/* Prompt/Kanit; SIL OFL in their respective res/fonts folders. */
@font-face{font-family:'Prompt';font-style:normal;font-weight:400;font-display:swap;src:url('/frontend/res/fonts/prompt/Prompt-Regular.ttf') format('truetype');}
@font-face{font-family:'Prompt';font-style:normal;font-weight:500;font-display:swap;src:url('/frontend/res/fonts/prompt/Prompt-Medium.ttf') format('truetype');}
@font-face{font-family:'Prompt';font-style:normal;font-weight:600;font-display:swap;src:url('/frontend/res/fonts/prompt/Prompt-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Prompt';font-style:normal;font-weight:700;font-display:swap;src:url('/frontend/res/fonts/prompt/Prompt-Bold.ttf') format('truetype');}
@font-face{font-family:'Prompt';font-style:normal;font-weight:800;font-display:swap;src:url('/frontend/res/fonts/prompt/Prompt-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url('/frontend/res/fonts/kanit/Kanit-Regular.ttf') format('truetype');}
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url('/frontend/res/fonts/kanit/Kanit-Medium.ttf') format('truetype');}
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url('/frontend/res/fonts/kanit/Kanit-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url('/frontend/res/fonts/kanit/Kanit-Bold.ttf') format('truetype');}
@font-face{font-family:'Kanit';font-style:normal;font-weight:800;font-display:swap;src:url('/frontend/res/fonts/kanit/Kanit-ExtraBold.ttf') format('truetype');}
/* Sarabun; SIL OFL in res/fonts/sarabun/OFL.txt. */
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url('/frontend/res/fonts/sarabun/Sarabun-Regular.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url('/frontend/res/fonts/sarabun/Sarabun-Medium.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url('/frontend/res/fonts/sarabun/Sarabun-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url('/frontend/res/fonts/sarabun/Sarabun-Bold.ttf') format('truetype');}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:800;font-display:swap;src:url('/frontend/res/fonts/sarabun/Sarabun-ExtraBold.ttf') format('truetype');}
/* Bai Jamjuree by Cadson Demak; SIL OFL in res/fonts/bai-jamjuree/OFL.txt. */
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:400;font-display:swap;src:url('/frontend/res/fonts/bai-jamjuree/BaiJamjuree-Regular.ttf') format('truetype');}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:500;font-display:swap;src:url('/frontend/res/fonts/bai-jamjuree/BaiJamjuree-Medium.ttf') format('truetype');}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:600;font-display:swap;src:url('/frontend/res/fonts/bai-jamjuree/BaiJamjuree-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Bai Jamjuree';font-style:normal;font-weight:700;font-display:swap;src:url('/frontend/res/fonts/bai-jamjuree/BaiJamjuree-Bold.ttf') format('truetype');}
/* Charmonman by Cadson Demak; SIL Open Font License in res/fonts/OFL.txt. */
@font-face {
 font-family:'Charmonman';font-style:normal;font-weight:400;font-display:swap;
 src:url('/frontend/res/fonts/Charmonman-Regular.ttf') format('truetype');
}
@font-face {
 font-family:'Charmonman';font-style:normal;font-weight:700;font-display:swap;
 src:url('/frontend/res/fonts/Charmonman-Bold.ttf') format('truetype');
}
:root {
 --tk-font:sans-serif;
 --tk-navy:#080f2d; --tk-cyan:#27dbf6; --tk-pink:#f25ac0; --tk-gold:#f4ce88;
 --tk-glass-lo:linear-gradient(135deg,rgba(8,20,53,.85),rgba(37,13,54,.82));
 --tk-glass-mid:linear-gradient(135deg,rgba(8,20,53,.94),rgba(37,13,54,.92));
 --tk-glass-hi:linear-gradient(135deg,rgba(24,188,223,.45),rgba(237,78,184,.45));
 --tk-border-lo:linear-gradient(135deg,rgba(39,219,246,.5),rgba(244,206,136,.3),rgba(242,90,192,.5));
 --tk-border-mid:linear-gradient(135deg,#27dbf6,#f4ce88,#f25ac0);
 --tk-glow:rgba(236,72,153,.4);
 --tk-button-bg:var(--tk-glass-hi) padding-box,var(--tk-border-mid) border-box;
 --bg:#080f2d;--surface:rgba(27,35,66,.75);--surface2:rgba(39,219,246,.09);--border:rgba(244,206,136,.2);--accent:#27dbf6;--text:#f4f4fa;--text2:#bdc4dd;
}
body{background-color:var(--tk-navy);}
.tk-auth-logo{width:75px;height:75px;object-fit:cover;border-radius:24px;margin:0 auto 16px;box-shadow:0 0 35px #ec489942;border:1px solid #f4ce8866;}
.auth-container{max-height:94dvh;overflow-y:auto;background:linear-gradient(145deg,rgba(8,15,45,.96),rgba(34,12,47,.94))!important;border:1px solid #f4ce8866!important;}
body:has(.auth-container)::before{filter:blur(2px)!important;transform:none!important;}
.auth-container h1{color:#f4ce88!important;}
button:focus-visible,a:focus-visible{outline:2px solid #27dbf6!important;outline-offset:3px;}
.lang-switcher-option:focus-visible{outline:none!important;}
@media(max-width:600px){.tk-auth-logo{width:57px;height:57px;margin-bottom:10px}.auth-container{padding:24px!important;margin:12px!important}}

body:has(.auth-container){background:linear-gradient(90deg,#080f2d55,#080f2d99),url('/frontend/res/wallpaper.jpg') center/cover fixed!important;}

#wallpaper{object-fit:cover!important;object-position:center top!important;}

/* Frame the supplied artwork above its embedded gray bottom margin. */
body:has(.auth-container){isolation:isolate;background:#080f2d!important;}
body:has(.auth-container)::before{inset:0 0 -11% 0!important;background-position:center top!important;z-index:-2!important;}
#wallpaper{height:111%!important;}

/* Primary actions share the highlighted circular icons' glass and border. */
.auth-container .btn:hover,
.custom-alert-btn:not(.custom-alert-cancel-btn):hover{box-shadow:0 0 14px rgba(39,219,246,.20),0 0 20px rgba(242,90,192,.18);}

/* Shared auth spacing: login, signup and password reset use the same values. */
.auth-container{padding:40px;}
.auth-container h1{font-size:21px;margin-bottom:12px;}
.auth-container .subtitle{font-size:12px;}
.auth-container .input-group{margin-bottom:20px;}
.auth-container .input-group label{margin-bottom:8px;}
.auth-container .input-group input{padding:14px 16px;}
.auth-container .btn{padding:14px;margin-top:10px;}
.auth-container .links{margin-top:25px;}

/* Shared typeface across the app, including form controls and backoffice. */
body,button,input,select,textarea{font-family:var(--tk-font);}

/* Language sub-dropdown inside side menu */
.tk-menu-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: calc(100% + 10px);
    background: rgba(20, 20, 20, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    overflow: hidden;
    min-width: 200px;
    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.tk-menu-dropdown.visible {
    display: block;
}

.tk-menu-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: none;
}

.tk-menu-option:hover,
.tk-menu-option.smenu-option-active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Checkmark — visible only on the option matching the current language /
   current mode. Marker is set via JS (.smenu-opt-current class). */
.smenu-opt-text {
    white-space: nowrap;
}

.smenu-opt-check {
    visibility: hidden;
    color: #4ade80;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.smenu-opt-current .smenu-opt-check {
    visibility: visible;
}


.tk-menu-dropdown{border:1px solid transparent;background:linear-gradient(135deg,rgba(60,20,110,.92),rgba(100,20,70,.92),rgba(110,45,10,.88)) padding-box,var(--tk-border-mid) border-box;max-height:calc(100dvh - 40px);overflow-y:auto;}
.tk-menu-option:hover,.tk-menu-option.smenu-option-active{background:var(--tk-glass-mid);}
/* Settings menus have one selection shared by mouse and keyboard. Native
   focus/hover must not paint another row after the keyboard has moved away. */
.tk-focus-menu .tk-menu-option:not(.smenu-option-active){background:transparent;}
#smenu-refresh:focus-visible,
#side-menu .side-menu-item:focus-visible,
.tk-focus-menu .tk-menu-option:focus-visible{outline:none!important;}
@media(max-width:640px){.tk-menu-dropdown{left:0;top:100%;min-width:200px;max-width:calc(100vw - 40px);}.tk-menu-option{white-space:normal;}.tk-menu-option .smenu-opt-text{white-space:normal;}}

/* One inset for form icons and dropdown arrows across the application. */
:root {--tk-control-inset:16px;--tk-control-icon-size:22px;}
.password-wrapper {position:relative;display:flex;align-items:center;}
.password-wrapper input {padding-right:calc(var(--tk-control-inset) * 2 + var(--tk-control-icon-size))!important;}
body button.toggle-password {
    position:absolute;right:calc(var(--tk-control-inset) - (32px - var(--tk-control-icon-size)) / 2);
    top:50%;transform:translateY(-50%);width:32px;height:32px;min-height:0;
    display:flex;align-items:center;justify-content:center;padding:0;
    background:transparent!important;border:0!important;box-shadow:none!important;
    color:#aaa;cursor:pointer;z-index:20;pointer-events:auto;transition:color .2s;
}
body button.toggle-password:hover:not(:disabled) {background:transparent!important;border:0!important;box-shadow:none!important;color:#fff;}
body button.toggle-password:focus-visible {outline:2px solid #fff!important;outline-offset:2px;border-radius:6px;}
body button.toggle-password svg {width:var(--tk-control-icon-size);height:var(--tk-control-icon-size);}
body select:not([multiple]) {
    appearance:none!important;-webkit-appearance:none!important;
    padding-right:calc(var(--tk-control-inset) * 2 + 16px)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-size:16px 16px!important;
    background-position:right var(--tk-control-inset) center!important;
}

/* Hide song counts and collapse their space; counting logic remains active. */
.tk-song-count-hidden { display: none !important; }