@font-face{font-family:"Roboto";src:url("/fonts/roboto/Roboto-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:"Roboto";src:url("/fonts/roboto/Roboto-Light.ttf") format("truetype");font-style:normal;font-weight:300;font-display:swap}@font-face{font-family:"Roboto";src:url("/fonts/roboto/Roboto-Medium.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}@font-face{font-family:"Roboto";src:url("/fonts/roboto/Roboto-Bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:"Roboto";src:url("/fonts/roboto/Roboto-Italic.ttf") format("truetype");font-style:italic;font-weight:400;font-display:swap}@font-face{font-family:"Roboto";src:url("/fonts/roboto/Roboto-BoldItalic.ttf") format("truetype");font-style:italic;font-weight:700;font-display:swap}[hidden]{display:none!important}




@font-face{font-family:"Font Awesome 6 Free";src:url("/webfonts/fa-solid-900.woff2") format("woff2"),url("/webfonts/fa-solid-900.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Font Awesome 6 Free Regular";src:url("/webfonts/fa-regular-400.woff2") format("woff2"),url("/webfonts/fa-regular-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Font Awesome 6 Brands";src:url("/webfonts/fa-brands-400.woff2") format("woff2"),url("/webfonts/fa-brands-400.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--bg:#0b1020;--panel:#11182b;--panel2:#151e34;--line:#26314a;--text:#eef3ff;--muted:#9aa8c4;--accent:#73e0c1;--accent2:#91a8ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Roboto",Arial,sans-serif;min-height:100vh}.app-shell{min-height:100vh;display:flex}.sidebar{width:268px;flex:0 0 268px;background:#0e1527;border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:10px}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 28px}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(135deg,#76e7c7,#7eb2ff);color:#0b1424;font-size:30px;font-weight:800}.brand strong{display:block;font-size:15px;letter-spacing:.1px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.new-chat{height:45px;border:1px solid #33415d;border-radius:12px;background:#19233a;color:var(--text);font:inherit;text-align:left;padding:0 14px;cursor:pointer;margin-bottom:18px}.side-label{font-size:10px;letter-spacing:1.5px;color:#73819f;padding:0 12px 4px}.nav-item{border:0;background:transparent;color:#aab6d0;text-align:left;padding:12px;border-radius:10px;font:inherit;font-size:13px;cursor:pointer}.nav-item:hover,.nav-item.active{background:#1b2740;color:#edf5ff}.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:18px 8px 0;color:var(--muted);font-size:11px}.status-dot{display:inline-block;width:7px;height:7px;background:#6ee7b7;border-radius:50%;margin-right:7px}.main{position:relative;min-width:0;flex:1;display:flex;flex-direction:column;min-height:100vh}.topbar{height:68px;border-bottom:1px solid rgba(38,49,74,.75);display:flex;align-items:center;padding:0 30px;gap:14px}.top-title{font-size:13px;font-weight:600}.private-pill{margin-left:auto;border:1px solid #29364e;border-radius:30px;padding:7px 11px;font-size:10px;color:#b7c5dc}.private-pill:first-letter{color:#6ee7b7}.welcome{width:min(760px,calc(100% - 36px));margin:auto auto 0;padding:42px 0 24px;text-align:center}.hero-note{margin:0 auto 20px;width:64px;height:64px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(135deg,#183b4b,#26345f);border:1px solid #3a5673;color:var(--accent);font-size:42px;box-shadow:0 12px 50px #080d1c}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700}.welcome h1{font-size:clamp(30px,4.3vw,47px);line-height:1.2;letter-spacing:-1.7px;margin:15px 0}.welcome h1 span{color:#8bbcff}.welcome-copy{max-width:540px;margin:0 auto;color:var(--muted);font-size:13px;line-height:1.9}.suggestions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 0}.suggestion{display:flex;align-items:center;gap:10px;text-align:left;padding:15px 12px;border:1px solid var(--line);border-radius:14px;background:#11192b;color:var(--text);cursor:pointer;min-width:0}.suggestion:hover{border-color:#6378b5;background:#17223a}.suggestion>b{color:var(--accent);font-size:22px}.suggestion span:nth-child(2){min-width:0;flex:1}.suggestion strong,.suggestion small{display:block}.suggestion strong{font-size:11px}.suggestion small{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5}.arrow{color:#8796b6}.conversation{width:min(800px,calc(100% - 36px));margin:0 auto;flex:1;overflow-y:auto;padding:18px 0 20px;display:none}.conversation.visible{display:block}.message{display:flex;gap:12px;margin:22px 0;align-items:flex-start}.avatar{flex:0 0 32px;height:32px;border-radius:11px;display:grid;place-items:center;background:#1a2941;color:var(--accent);font-size:17px}.message.user .avatar{background:#26345c;color:#d4e6ff}.bubble{font-size:13px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;padding:4px 0;max-width:100%}.message.user .bubble{background:#17233a;border:1px solid #283956;border-radius:14px;padding:12px 15px}.composer-wrap{width:min(800px,calc(100% - 36px));margin:0 auto;padding:10px 0 18px}.composer{display:flex;align-items:flex-end;gap:8px;border:1px solid #33415d;border-radius:18px;padding:10px;background:#131c30;box-shadow:0 10px 40px #070b16}.composer:focus-within{border-color:#667fc1}.composer textarea{flex:1;min-width:0;max-height:180px;resize:none;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-size:13px;line-height:1.6;padding:8px 2px}.composer textarea::placeholder{color:#8491ad}.tool-button,.send-button{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:11px;cursor:pointer;font-size:18px}.tool-button{background:#202b42;color:#c5d1e8}.mic-button{font-size:16px}.mic-button.recording{background:#692f47;color:#fff}.send-button{background:var(--accent);color:#071a1b;font-weight:800;font-size:23px}.composer-foot{text-align:center;color:#73809a;font-size:10px;padding-top:11px}.upload-preview{font-size:11px;color:var(--accent);padding:0 0 8px}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#202d45;border:1px solid #3c4e6d;color:#fff;padding:11px 16px;border-radius:12px;font-size:12px;transition:.2s;z-index:10;max-width:90vw}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-only{display:none}.typing{color:var(--muted)}@media(max-width:760px){.sidebar{position:fixed;z-index:5;inset:0 auto 0 0;transform:translateX(-100%);transition:transform .2s;box-shadow:20px 0 50px #0008}.sidebar.open{transform:translateX(0)}.mobile-only{display:block}.topbar{padding:0 16px;height:60px}.welcome{padding-top:26px}.welcome h1{letter-spacing:-1px}.suggestions{grid-template-columns:1fr}.suggestion{padding:13px}.suggestion small{font-size:10px}.composer-wrap,.conversation{width:calc(100% - 24px)}.composer{gap:5px;padding:7px}.tool-button,.send-button{width:33px;height:33px;flex-basis:33px}.private-pill{font-size:9px}.welcome-copy{font-size:12px}}@media(min-width:761px) and (max-width:1000px){.sidebar{width:230px;flex-basis:230px}.suggestions{grid-template-columns:1fr}.welcome{max-width:560px}}

/* Light is the default theme; dark mode is opt-in. */
:root{color-scheme:light;--bg:#f7f9fc;--panel:#ffffff;--panel2:#f0f4fa;--line:#e0e6ef;--text:#202b3c;--muted:#68768c;--accent:#178d79;--accent2:#526fd1}
body{background:var(--bg);color:var(--text)}
.sidebar{background:#fff;border-right-color:var(--line)}
.brand small,.welcome-copy,.suggestion small,.side-bottom,.composer-foot{color:var(--muted)}
.new-chat{background:#f2f5fa;color:var(--text);border-color:var(--line)}
.nav-item{color:#5d6a80}.nav-item:hover,.nav-item.active{background:#eaf0fa;color:#24344d}
.topbar{border-bottom-color:var(--line)}
.private-pill,.user-chip{color:var(--muted);border-color:var(--line)}
.hero-note{background:linear-gradient(135deg,#d7f6ee,#d4e6ff);border-color:#cbd9ec;box-shadow:0 12px 35px #304b7210}
.welcome h1 span{color:var(--accent2)}
.suggestion{background:#fff;color:var(--text);border-color:var(--line)}
.suggestion:hover{border-color:#aabbe1;background:#f7f9ff}
.avatar{background:#e2f5f0;color:#147e6c}.message.user .avatar{background:#e4eaff;color:#3c55aa}
.message.user .bubble{background:#edf2fb;border-color:#dce5f4}
.composer{background:#fff;border-color:#d7e0ec;box-shadow:0 10px 35px #2e45640a}
.composer textarea{color:var(--text)}.composer textarea::placeholder{color:#8a96a8}
.tool-button{background:#edf1f7;color:#526078}.send-button{background:#68d7b9;color:#082d27}
.toast{background:#fff;border-color:var(--line);color:var(--text);box-shadow:0 8px 32px #263c5b18}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.theme-toggle,.auth-button{border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:var(--panel);color:var(--text);font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}
.auth-button{background:#1d8e79;border-color:#1d8e79;color:white;font-weight:700}
.user-chip{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:7px 10px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-backdrop{position:fixed;inset:0;z-index:2000;background:#15223866;backdrop-filter:blur(7px);display:grid;place-items:center;padding:18px}
.auth-backdrop.hidden{display:none}
.auth-card{position:relative;width:min(440px,100%);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 24px 90px #12213a30}
.auth-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--panel2);color:var(--muted);font:inherit;font-size:25px;line-height:1;cursor:pointer;z-index:2}
.auth-close:hover{background:var(--line);color:var(--text)}
.auth-close:focus-visible{outline:2px solid var(--accent,#1c927f);outline-offset:2px}
.auth-brand{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#76e7c7,#7eb2ff);color:#102033;font-size:30px;margin-bottom:15px}
.auth-card h2{font-size:21px;margin:0 0 8px}.auth-subtitle,.auth-note{color:var(--muted);font-size:12px;line-height:1.6}
.auth-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:20px 0}
.auth-tab{border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:9px;padding:9px 3px;font:inherit;font-size:10px;cursor:pointer}
.auth-tab.active{background:#dff5ef;color:#146d5e;border-color:#a7e2d4;font-weight:700}
.auth-form{display:grid;gap:13px}.auth-form label{display:grid;gap:6px;font-size:11px;font-weight:600;color:var(--muted)}
.auth-form input{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--text);border-radius:10px;padding:12px;font:inherit;font-size:13px;outline:none}
.auth-form input:focus{border-color:var(--accent)}.auth-submit{border:0;border-radius:11px;background:#1d8e79;color:white;padding:12px;font:inherit;font-weight:700;cursor:pointer;margin-top:3px}
.auth-error{color:#c0394b;font-size:12px;min-height:0;margin:0}.auth-note{margin:14px 0 0;font-size:10px}
body[data-theme="dark"]{color-scheme:dark;--bg:#0b1020;--panel:#11182b;--panel2:#151e34;--line:#26314a;--text:#eef3ff;--muted:#9aa8c4;--accent:#73e0c1;--accent2:#73e0c1}
body[data-theme="dark"] .sidebar{background:#0e1527;border-right-color:var(--line)}
body[data-theme="dark"] .new-chat{background:#19233a;color:var(--text);border-color:#33415d}
body[data-theme="dark"] .nav-item{color:#aab6d0}body[data-theme="dark"] .nav-item:hover,body[data-theme="dark"] .nav-item.active{background:#1b2740;color:#edf5ff}
body[data-theme="dark"] .private-pill,body[data-theme="dark"] .user-chip{color:#b7c5dc;border-color:#29364e}
body[data-theme="dark"] .hero-note{background:linear-gradient(135deg,#183b4b,#26345f);border-color:#3a5673;box-shadow:0 12px 50px #080d1c}
body[data-theme="dark"] .welcome h1 span{color:#73e0c1}
body[data-theme="dark"] .suggestion{background:#11192b;color:var(--text);border-color:var(--line)}body[data-theme="dark"] .suggestion:hover{border-color:#6378b5;background:#17223a}
body[data-theme="dark"] .avatar{background:#1a2941;color:var(--accent)}body[data-theme="dark"] .message.user .avatar{background:#26345c;color:#d4e6ff}
body[data-theme="dark"] .message.user .bubble{background:#17233a;border-color:#283956}
body[data-theme="dark"] .composer{background:#131c30;border-color:#33415d;box-shadow:0 10px 40px #070b16}body[data-theme="dark"] .composer textarea{color:var(--text)}
body[data-theme="dark"] .tool-button{background:#202b42;color:#c5d1e8}body[data-theme="dark"] .send-button{background:var(--accent);color:#071a1b}
body[data-theme="dark"] .toast{background:#202d45;border-color:#3c4e6d;color:#fff}
body[data-theme="dark"] .auth-tab.active{background:#173e39;color:#a3f0df;border-color:#286d60}
@media(max-width:760px){.topbar{padding:0 10px}.top-actions{gap:5px}.theme-toggle,.auth-button{padding:8px 7px;font-size:10px}.user-chip{max-width:80px;padding:7px}.auth-card{padding:22px 18px}}
.admin-users-button{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel2);color:var(--text);font:inherit;font-size:10px;cursor:pointer;white-space:nowrap}
.admin-backdrop{position:fixed;inset:0;z-index:2001;background:#15223866;backdrop-filter:blur(7px);display:grid;place-items:center;padding:18px}.admin-backdrop.hidden{display:none}
.admin-card{width:min(900px,100%);max-height:85vh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 24px 90px #12213a30}
.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.admin-heading h2{font-size:20px;margin:0}.admin-heading p{font-size:12px;color:var(--muted);margin:6px 0 0}.admin-table-wrap{overflow:auto}.admin-table{width:100%;border-collapse:collapse;font-size:12px}.admin-table th,.admin-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}.admin-table th{color:var(--muted);font-weight:600}.role-pill{display:inline-block;border-radius:20px;padding:4px 8px;background:var(--panel2)}

.admin-login-link{display:block;width:100%;margin-top:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-weight:650;cursor:pointer}.admin-login-link:hover{background:var(--panel2);color:var(--text)}.admin-login-link[hidden]{display:none}

/* Nút hiện/ẩn mật khẩu */
.auth-form label{position:relative}
.auth-form input[type="password"],.auth-form input[type="text"]{padding-right:44px}
.auth-form .password-toggle{position:absolute;right:8px;top:28px;width:32px;height:34px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;border-radius:7px}
.auth-form .password-toggle:hover{background:var(--line)}

.forgot-password-link{justify-self:end;border:0;background:transparent;color:var(--accent);font:inherit;font-size:12px;font-weight:650;padding:2px 0;cursor:pointer}.forgot-password-link:hover{text-decoration:underline}.forgot-password-link[hidden]{display:none}


/* Mobile/tablet sidebar drawer: explicit close control and no dark edge shadow. */
.sidebar-close{display:none;position:absolute;top:16px;right:14px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--panel2);color:var(--text);font:inherit;font-size:27px;line-height:1;align-items:center;justify-content:center;cursor:pointer;z-index:3}
@media(max-width:1000px){
  .sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:min(86vw,320px);height:100vh;height:100dvh;overflow-y:auto;transform:translateX(-105%);transition:transform .22s ease;box-shadow:none!important;border-right:1px solid var(--line);padding-top:68px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:flex}
  .mobile-only{display:block}
}
@media(min-width:1001px){.sidebar{position:relative;transform:none;box-shadow:none}.sidebar-close{display:none}.mobile-only{display:none}}

/* Tệp đính kèm trước khi gửi cho AI */
.upload-preview-item{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);min-width:0}
.upload-preview-name{font-size:12px;overflow-wrap:anywhere;min-width:0}
.upload-remove{flex:0 0 30px;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--panel2);color:var(--text);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.upload-remove:hover{background:#fee2e2;color:#b91c1c;border-color:#fca5a5}

/* Đính kèm ảnh trong tin nhắn: xem vừa đủ, không làm tràn khung chat. */
.message-attachment-image{display:block;width:auto;max-width:min(280px,100%);max-height:240px;object-fit:contain;object-position:left center;margin-top:8px;border-radius:12px;border:1px solid var(--line);cursor:zoom-in;background:var(--panel2)}
.image-viewer{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,13,25,.88);cursor:zoom-out}
.image-viewer img{display:block;max-width:min(94vw,1200px);max-height:92vh;object-fit:contain;border-radius:10px;box-shadow:0 12px 48px #0008}
@media(max-width:760px){.message-attachment-image{max-width:min(240px,100%);max-height:210px}.image-viewer{padding:10px}}

/* Tệp do AI tạo: thẻ tải xuống ngay trong câu trả lời */
.generated-file-card{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);max-width:100%}.generated-file-name{font-size:12px;overflow-wrap:anywhere;min-width:0;color:var(--text)}.generated-file-download{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:9px 12px;background:var(--accent);color:#071a1b;text-decoration:none;font-size:12px;font-weight:750;white-space:nowrap}.generated-file-download:hover{filter:brightness(1.05)}

/* Responsive mobile/tablet: lock the app frame; only the chat transcript scrolls. */
html, body { width:100%; height:100%; min-height:0; overflow:hidden; }
.app-shell { width:100%; height:100vh; height:100dvh; min-height:0; overflow:hidden; }
.main { height:100%; min-height:0; min-width:0; overflow:hidden; }
.topbar { flex:0 0 68px; min-width:0; }
.conversation { min-height:0; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; }
.composer-wrap { flex:0 0 auto; min-width:0; padding-bottom:max(12px, env(safe-area-inset-bottom)); }
.welcome { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
@media (max-width:1000px) {
  .app-shell { height:100vh; height:100dvh; min-height:0; }
  .main { width:100%; height:100%; min-height:0; }
  .topbar { flex-basis:auto; height:auto; min-height:58px; padding:8px 10px; gap:8px; flex-wrap:nowrap; }
  .top-title { flex:1 1 auto; min-width:0; font-size:clamp(11px,2.2vw,14px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .top-actions { flex:0 1 auto; min-width:0; gap:4px; }
  .theme-toggle,.auth-button,.admin-users-button { padding:7px 8px; font-size:clamp(9px,1.8vw,11px); }
  .user-chip { max-width:clamp(62px,18vw,130px); padding:6px 7px; font-size:9px; }
  .conversation { width:calc(100% - 24px); flex:1 1 0; min-height:0; margin:0 auto; padding:12px 0 16px; overflow-y:auto; }
  .message { gap:8px; margin:14px 0; }
  .avatar { flex-basis:28px; height:28px; }
  .bubble { min-width:0; font-size:13px; }
  .composer-wrap { width:calc(100% - 20px); margin:0 auto; padding-top:6px; }
  .composer-foot { padding-top:7px; padding-bottom:2px; }
  .upload-preview { max-height:22vh; overflow-y:auto; }
  .welcome { width:calc(100% - 24px); margin:0 auto; padding:24px 0 18px; }
}
@media (max-width:600px) {
  .topbar { min-height:54px; padding:7px 8px; gap:6px; }
  .top-title { max-width:92px; white-space:normal; line-height:1.2; font-size:11px; }
  .top-actions { gap:3px; }
  .theme-toggle { font-size:0; min-width:34px; padding:8px 6px; }
  .theme-toggle::first-letter { font-size:14px; }
  .user-chip { max-width:72px; font-size:8px; }
  .admin-users-button { max-width:74px; white-space:normal; line-height:1.1; padding:6px; font-size:9px; }
  .auth-button { padding:7px 7px; font-size:9px; }
  .composer { gap:5px; padding:6px; }
  .composer textarea { font-size:16px; max-height:112px; }
  .tool-button,.send-button { width:32px; height:32px; flex-basis:32px; }
  .conversation { width:calc(100% - 18px); padding-top:8px; }
  .message.user .bubble { padding:10px 12px; }
  .message-attachment-image { max-width:min(220px,100%); max-height:190px; }
}
@media (min-width:601px) and (max-width:1000px) {
  .top-title { max-width:none; }
  .conversation { width:min(800px,calc(100% - 32px)); }
  .composer-wrap { width:min(800px,calc(100% - 32px)); }
}

/* Mỹ Linh - Âm Nhạc: trang chủ mới và trợ lý chat dạng cửa sổ nổi */
:root{--ml-ink:#24304a;--ml-purple:#1769d2;--ml-coral:#f4a88e;--ml-mint:#8bdcc9}
.home-page{flex:1 1 auto;min-height:0;overflow:auto;padding:clamp(22px,4vw,54px) clamp(18px,5vw,72px) 26px;background:radial-gradient(ellipse at 82% 7%,#dceaff 0,transparent 28%),radial-gradient(ellipse at 4% 48%,#e4f8f1 0,transparent 25%),var(--bg);scrollbar-gutter:stable}
.home-hero{max-width:1280px;margin:0 auto;min-height:350px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(24px,5vw,70px);align-items:center;padding:clamp(18px,3vw,40px) 0 46px}
.hero-copy{max-width:670px}.eyebrow{display:flex;align-items:center;gap:8px;color:var(--ml-purple);font-size:10px;letter-spacing:.16em;font-weight:800;margin:0 0 16px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#75cbb8;box-shadow:0 0 0 4px #75cbb822}
.home-hero h1{font-size:clamp(36px,4.6vw,64px);letter-spacing:-.055em;line-height:1.08;margin:0;color:var(--ml-ink);font-weight:800}.home-hero h1 span{color:var(--ml-purple)}.hero-copy>p:not(.eyebrow){max-width:560px;color:var(--muted);font-size:clamp(13px,1.15vw,16px);line-height:1.85;margin:20px 0 25px}
.hero-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.primary-cta,.secondary-cta,.banner-chat{border-radius:13px;padding:13px 17px;font:inherit;font-size:12px;font-weight:750;cursor:pointer;transition:transform .18s,box-shadow .18s}.primary-cta{background:linear-gradient(135deg,#1769d2,#0b5fc6);color:#fff;border:0;box-shadow:0 10px 24px #1769d235}.primary-cta span,.banner-chat span{margin-left:12px}.primary-cta:hover,.banner-chat:hover{transform:translateY(-2px);box-shadow:0 14px 28px #1769d240}.secondary-cta{background:transparent;color:var(--text);border:1px solid var(--line)}.secondary-cta:hover{background:var(--panel2)}
.hero-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:31px}.hero-stats div{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px}.hero-stats strong{width:29px;height:29px;display:grid;place-items:center;border-radius:10px;background:var(--panel);color:var(--ml-purple);font-size:17px;box-shadow:0 5px 16px #2736530a}
.hero-art{position:relative;min-height:300px;display:grid;place-items:center;isolation:isolate}.art-glow{position:absolute;width:min(30vw,340px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#f9d7c9,#c8ddff 58%,#b9ece1);filter:blur(1px);opacity:.88;z-index:-1}.music-disc{width:min(24vw,255px);min-width:190px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle at center,#35334d 0 2px,#4a4568 3px 4px,#393650 5px 7px);box-shadow:0 26px 55px #48416c38,inset 0 0 0 12px #ffffff14;transform:rotate(-12deg)}.disc-center{width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f3a88d,#8bbcff);color:#fff;font-size:clamp(38px,5vw,65px);box-shadow:0 0 0 7px #ffffff24}.floating-note{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:#fff;color:var(--ml-purple);font-size:30px;box-shadow:0 15px 35px #33385c1c;animation:ml-float 4s ease-in-out infinite}.note-one{top:12%;left:13%;transform:rotate(-12deg)}.note-two{right:10%;top:20%;background:#dff7ef;color:#288c7a;animation-delay:-1s}.note-three{right:14%;bottom:12%;background:#ffede4;color:#ce8067;animation-delay:-2s}.art-caption{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #ffffffb8;background:#ffffffc9;backdrop-filter:blur(14px);border-radius:16px;box-shadow:0 15px 40px #29345212}.art-caption-icon{width:34px;height:34px;display:grid;place-items:center;background:#dceaff;color:#1769d2;border-radius:11px}.art-caption strong,.art-caption small{display:block}.art-caption strong{font-size:11px;color:#30364e}.art-caption small{font-size:9px;color:#7c8196;margin-top:4px}
@keyframes ml-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
.home-section{max-width:1280px;margin:0 auto;padding:25px 0 34px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:22px}.section-heading .eyebrow{margin-bottom:9px}.section-heading h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.035em;color:var(--text);margin:0 0 8px}.section-heading p:not(.eyebrow){margin:0;color:var(--muted);font-size:12px;line-height:1.6}.section-mark{font-size:10px;letter-spacing:.12em;color:var(--muted);padding-bottom:5px}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-card{position:relative;text-align:left;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;padding:20px 18px 17px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}.feature-card:hover{transform:translateY(-4px);border-color:#8bbcff;box-shadow:0 16px 35px #2934520d}.feature-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:23px;margin-bottom:20px}.feature-number{position:absolute;right:17px;top:23px;color:var(--muted);opacity:.65;font-size:10px;letter-spacing:.08em}.feature-card h3{font-size:15px;margin:0 0 9px;letter-spacing:-.02em}.feature-card p{font-size:11px;line-height:1.75;color:var(--muted);min-height:58px;margin:0 0 16px}.feature-link{display:flex;align-items:center;justify-content:space-between;padding-top:13px;border-top:1px solid var(--line);font-size:10px;font-weight:750}.feature-link b{font-size:16px;font-weight:500}.feature-lilac .feature-icon{background:#e8f1ff;color:#1769d2}.feature-peach .feature-icon{background:#fff0e7;color:#d88669}.feature-mint .feature-icon{background:#e1f8f0;color:#2d9b84}.feature-blue .feature-icon{background:#e6f0ff;color:#5885c8}
.home-bottom-banner{max-width:1280px;margin:6px auto 20px;padding:clamp(18px,3vw,30px);display:flex;align-items:center;gap:18px;border-radius:22px;background:linear-gradient(110deg,#12345b,#1769d2 70%,#0b5fc6);color:#fff;box-shadow:0 18px 42px #3b386c24}.banner-symbol{width:58px;height:58px;flex:0 0 58px;display:grid;place-items:center;border-radius:18px;background:#ffffff1a;border:1px solid #ffffff2b;font-size:34px}.home-bottom-banner .eyebrow{color:#d8e9ff;margin-bottom:8px}.home-bottom-banner h2{font-size:clamp(17px,2vw,25px);margin:0 0 7px;letter-spacing:-.03em}.home-bottom-banner p:not(.eyebrow){font-size:11px;color:#dbeafe;margin:0}.banner-chat{margin-left:auto;white-space:nowrap;background:#fff;color:#174a91;border:0}.home-footer{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;gap:14px;padding:5px 0 0;color:var(--muted);font-size:10px}
.chat-panel{position:fixed;z-index:60;right:24px;bottom:24px;width:min(490px,calc(100vw - 32px));height:min(700px,calc(100dvh - 110px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--bg);box-shadow:0 24px 90px #1c27413b;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.98);transition:opacity .2s,transform .2s,visibility .2s}.chat-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}.chat-panel-head{flex:0 0 64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 15px;border-bottom:1px solid var(--line);background:var(--panel)}.chat-panel-brand{display:flex;align-items:center;gap:10px}.chat-panel-brand>span{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#8ce0cf,#8bbcff);color:#263454;font-size:23px}.chat-panel-brand strong,.chat-panel-brand small{display:block}.chat-panel-brand strong{font-size:13px;color:var(--text)}.chat-panel-brand small{font-size:10px;color:var(--muted);margin-top:4px}.chat-close{width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:var(--panel2);color:var(--text);font-size:25px;line-height:1;cursor:pointer}.chat-panel .welcome{width:100%;padding:22px 20px 14px;flex:1 1 auto}.chat-panel .welcome h1{font-size:23px;line-height:1.2}.chat-panel .welcome h1 span{color:var(--ml-purple)}.chat-panel .hero-note{width:42px;height:42px;font-size:24px;margin-bottom:14px}.chat-panel .welcome-copy{font-size:11px;line-height:1.65}.chat-panel .suggestions{display:grid;grid-template-columns:1fr;gap:8px}.chat-panel .suggestion{padding:10px 12px;min-height:55px}.chat-panel .suggestion b{width:32px;height:32px;font-size:16px}.chat-panel .suggestion strong{font-size:11px}.chat-panel .suggestion small{font-size:9px}.chat-panel .conversation{width:100%;flex:1 1 0;min-height:0;overflow-y:auto;padding:8px 16px 14px}.chat-panel .composer-wrap{width:100%;margin:0;padding:10px 12px max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}.chat-panel .composer{gap:6px;padding:7px;border-radius:15px}.chat-panel .composer textarea{font-size:14px}.chat-panel .composer-foot{font-size:9px}.chat-launcher{position:fixed;z-index:59;right:25px;bottom:24px;display:flex;align-items:center;gap:9px;padding:12px 17px 12px 12px;border:0;border-radius:18px;background:linear-gradient(135deg,#1769d2,#0b5fc6);color:#fff;box-shadow:0 13px 32px #1769d250;cursor:pointer;font:inherit;font-size:12px;font-weight:750;transition:transform .18s,box-shadow .18s}.chat-launcher:hover{transform:translateY(-3px);box-shadow:0 18px 38px #1769d260}.launcher-note{width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:#ffffff26;font-size:23px}.launcher-spark{position:absolute;right:10px;top:5px;font-size:10px;color:#ffe5a7}.launcher-label{white-space:nowrap}.chat-panel.open~.chat-launcher{opacity:0;pointer-events:none;transform:translateY(8px)}
.back-to-top{position:fixed;z-index:60;right:42px;bottom:94px;width:46px;height:46px;display:grid;place-items:center;border:1px solid #ffffff70;border-radius:16px;background:linear-gradient(135deg,#1769d2,#0b5fc6);color:#fff;box-shadow:0 10px 28px #1769d245;cursor:pointer;font:700 25px/1 system-ui,sans-serif;transition:opacity .2s,transform .2s,background .2s}.back-to-top:hover{transform:translateY(-3px)}.back-to-top[hidden]{display:none}body[data-theme="dark"] .back-to-top{background:linear-gradient(135deg,#174f91,#123a70);border-color:#ffffff30}.chat-panel.open~.back-to-top{opacity:0;pointer-events:none}@media(max-width:760px){.back-to-top{right:28px;bottom:91px;width:42px;height:42px;border-radius:14px;font-size:23px}}
body[data-theme="dark"] .home-page{background:radial-gradient(ellipse at 82% 7%,#12345b 0,transparent 30%),radial-gradient(ellipse at 4% 48%,#12332f 0,transparent 25%),var(--bg)}body[data-theme="dark"] .home-hero h1{color:var(--text)}body[data-theme="dark"] .art-caption{background:#182238d9;border-color:#ffffff12}body[data-theme="dark"] .art-caption strong{color:#eef3ff}body[data-theme="dark"] .art-caption small{color:#a7b4cd}body[data-theme="dark"] .floating-note{background:#202a42;color:#b9d8ff}body[data-theme="dark"] .feature-lilac .feature-icon{background:#12345b;color:#b9d8ff}body[data-theme="dark"] .feature-peach .feature-icon{background:#472e30;color:#ffc3a7}body[data-theme="dark"] .feature-mint .feature-icon{background:#173c39;color:#8ce0cf}body[data-theme="dark"] .feature-blue .feature-icon{background:#173c39;color:#8ce0cf}
@media(max-width:900px){.home-hero{grid-template-columns:minmax(0,1.1fr) minmax(230px,.8fr);gap:20px}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{min-height:260px}.music-disc{min-width:170px}.home-page{padding:20px 24px}.home-bottom-banner{margin-top:12px}}
@media(max-width:620px){.home-page{padding:20px 15px 22px}.home-hero{grid-template-columns:1fr;gap:4px;padding:16px 0 28px}.home-hero h1{font-size:39px}.hero-copy>p:not(.eyebrow){font-size:13px;margin:16px 0 20px}.hero-stats{gap:10px;margin-top:22px}.hero-stats div{font-size:9px;gap:5px}.hero-art{min-height:230px;margin:5px 0 10px}.art-glow{width:220px}.music-disc{width:190px;min-width:190px}.art-caption{left:0;bottom:0;padding:9px 11px}.art-caption strong{font-size:10px}.art-caption small{font-size:9px}.floating-note{width:42px;height:42px;font-size:24px;border-radius:14px}.section-heading{align-items:start}.section-heading h2{font-size:24px}.section-heading p:not(.eyebrow){font-size:11px}.section-mark{display:none}.feature-grid{gap:9px}.feature-card{padding:14px 12px;border-radius:16px}.feature-icon{width:37px;height:37px;margin-bottom:14px}.feature-number{right:12px;top:18px}.feature-card h3{font-size:13px}.feature-card p{font-size:10px;min-height:70px}.feature-link{font-size:9px}.home-bottom-banner{align-items:flex-start;gap:11px;padding:16px;border-radius:18px;flex-wrap:wrap}.banner-symbol{width:43px;height:43px;flex-basis:43px;border-radius:13px;font-size:27px}.home-bottom-banner>div:nth-child(2){flex:1;min-width:0}.home-bottom-banner h2{font-size:17px}.home-bottom-banner p:not(.eyebrow){font-size:10px;line-height:1.5}.banner-chat{margin-left:54px;padding:10px 13px}.home-footer{font-size:9px;flex-direction:column;gap:6px}.chat-launcher{right:14px;bottom:14px;padding:9px 12px 9px 9px;border-radius:16px}.launcher-note{width:32px;height:32px}.chat-panel{right:8px;bottom:8px;width:calc(100vw - 16px);height:min(700px,calc(100dvh - 16px));border-radius:20px}.chat-panel .welcome{padding:17px 15px 10px}.chat-panel .welcome h1{font-size:22px}.chat-panel .conversation{padding:6px 12px}.chat-panel .composer-wrap{padding:8px 9px max(8px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.floating-note,.feature-card,.primary-cta,.chat-launcher{animation:none;transition:none}}

/* Header navigation layout: home and learning menus live in the header. */
.app-shell{display:block;min-height:100vh}
.topbar{height:auto;min-height:76px;padding:12px clamp(12px,2vw,30px);display:flex;align-items:center;gap:clamp(10px,1.5vw,24px);position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.top-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;color:var(--text)}
.top-brand .brand-icon{width:39px;height:39px;font-size:27px;border-radius:13px}
.top-brand strong{font-size:14px}
.header-nav{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;min-width:0}
.header-nav-item{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;padding:11px 12px;border-radius:11px;cursor:pointer;transition:background .18s,color .18s}
.header-nav-item:hover,.header-nav-item.active{background:rgba(23,105,210,.13);color:var(--text)}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
#goHome{scroll-margin-top:90px}
@media(max-width:1100px){
 .topbar{flex-wrap:wrap;gap:8px 12px}
 .top-brand{order:0}
 .top-actions{order:1;margin-left:auto}
 .header-nav{order:2;flex-basis:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
 .header-nav::-webkit-scrollbar{display:none}
 .header-nav-item{padding:9px 12px}
}
@media(max-width:620px){
 .topbar{padding:10px 12px;min-height:0}
 .top-brand .brand-icon{width:34px;height:34px;font-size:23px}
 .top-brand strong{font-size:12px}
 .top-actions{gap:5px}
 .top-actions .user-chip{display:none}
 .theme-toggle,.auth-button,.admin-users-button{font-size:10px!important;padding:7px 9px!important}
 .header-nav{gap:2px;margin:0 -2px}
 .header-nav-item{font-size:11px;padding:9px 10px}
}

/* Keep the brand neatly inside the header and anchor navigation to content cards. */
.topbar{box-sizing:border-box;width:100%;padding-left:clamp(18px,2vw,34px);padding-right:clamp(18px,2vw,34px);}
.top-brand{min-width:0;margin:0;align-items:center;}
.top-brand .brand-icon{flex-shrink:0;}
.feature-card{scroll-margin-top:110px;}


/* Header alignment fix: keep the complete brand inside the header box. */
.topbar{position:sticky;top:0;width:100%;max-width:100%;min-width:0;overflow:visible;padding-left:clamp(20px,2.2vw,36px);padding-right:clamp(20px,2.2vw,36px);}
.top-brand{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto;max-width:260px;min-width:0;white-space:nowrap;margin:0;padding:0;line-height:1.2;}
.top-brand .brand-icon{display:grid;place-items:center;flex:0 0 39px;width:39px;height:39px;margin:0;}
.top-brand strong{display:block;min-width:0;line-height:1.25;overflow:visible;}
@media(max-width:620px){.topbar{padding-left:14px;padding-right:14px}.top-brand{max-width:190px}.top-brand .brand-icon{flex-basis:34px;width:34px;height:34px}}

/* Requested logo placement: inset the brand into the header's centered content area on desktop. */
@media (min-width:1101px){
  .topbar{padding-left:clamp(190px,12vw,240px)!important;padding-right:clamp(20px,2.2vw,36px)!important;}
}
@media (max-width:1100px){
  .topbar{padding-left:clamp(14px,2vw,24px)!important;padding-right:clamp(14px,2vw,24px)!important;}
}


/* Header alignment: align logo, navigation and account controls to the same centered content width as the page. */
@media (min-width:1101px){
  .topbar{padding-left:max(24px,calc((100vw - 1280px)/2))!important;padding-right:max(24px,calc((100vw - 1280px)/2))!important;display:flex;flex-wrap:nowrap;gap:clamp(14px,1.4vw,24px)}
  .top-brand{flex:0 0 auto}
  .header-nav{flex:1 1 auto;justify-content:center;min-width:0}
  .top-actions{flex:0 0 auto}
}
.mobile-menu-toggle,.mobile-menu-close{display:none}
@media(max-width:1100px){
  .topbar{display:flex;flex-wrap:nowrap;min-height:66px;padding:10px 18px!important;gap:10px;}
  .top-brand{order:0;flex:1 1 auto;max-width:none;min-width:0;}
  .top-brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .top-actions{order:1;flex:0 0 auto;margin-left:0;}
  .mobile-menu-toggle{order:2;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-size:22px;cursor:pointer;}
  .header-nav{position:fixed;z-index:100;top:0;right:0;bottom:0;width:min(320px,86vw);height:100dvh;padding:76px 18px 24px;background:var(--panel);border-left:1px solid var(--line);box-shadow:-18px 0 50px #10182b24;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;overflow-y:auto;transform:translateX(105%);visibility:hidden;pointer-events:none;transition:transform .22s ease,visibility .22s;}
  .header-nav.open{transform:translateX(0);visibility:visible;pointer-events:auto;}
  .header-nav-item{text-align:left;width:100%;font-size:14px;padding:14px 15px;white-space:normal;}
  .mobile-menu-close{display:grid;place-items:center;position:absolute;right:16px;top:16px;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);font-size:29px;line-height:1;cursor:pointer;}
  body.mobile-menu-open{overflow:hidden;}
  body.mobile-menu-open:after{content:"";position:fixed;inset:0;background:rgba(16,24,39,.22);z-index:49;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);pointer-events:auto;}
}
@media(max-width:620px){
  .topbar{padding:9px 12px!important;gap:8px;}
  .top-brand{gap:8px;}
  .top-brand .brand-icon{width:34px;height:34px;flex-basis:34px;font-size:23px;}
  .top-brand strong{font-size:12px;max-width:132px;}
  .top-actions{gap:5px;}
  .top-actions .user-chip,.top-actions .admin-users-button{display:none!important;}
  .theme-toggle,.auth-button{font-size:10px!important;padding:7px 8px!important;}
  .mobile-menu-toggle{width:36px;height:36px;flex-basis:36px;font-size:20px;}
}


/* Responsive navigation reinforcement: show a menu icon on phones and tablets. */
@media (max-width: 1100px) {
  .topbar { flex-wrap: nowrap !important; align-items: center !important; }
  .mobile-menu-toggle { display: grid !important; visibility: visible !important; opacity: 1 !important; }
  .header-nav:not(.open) { transform: translateX(105%) !important; visibility: hidden !important; pointer-events: none !important; }
  .header-nav.open { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; }
}
@media (min-width: 1101px) { .mobile-menu-toggle, .mobile-menu-close { display: none !important; } }

/* Ensure the responsive navigation drawer stays above every floating UI, including the AI chat panel. */
@media (max-width:1100px){
  body.mobile-menu-open .topbar{position:sticky;z-index:10000!important;}
  body.mobile-menu-open .header-nav{z-index:10001!important;}
  body.mobile-menu-open .mobile-menu-close{z-index:10002!important;}
}

/* Semantic, colorful navigation icons: games, lessons, and news */
.header-nav-item .nav-icon{display:inline-block;font-family:system-ui,-apple-system,"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:15px;line-height:1;vertical-align:-2px;margin-right:3px}
.feature-icon{font-family:system-ui,-apple-system,"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:24px;line-height:1}
.feature-peach .feature-icon,.feature-mint .feature-icon,.feature-blue .feature-icon{color:initial}
@media(max-width:620px){.header-nav-item .nav-icon{font-size:18px}.feature-icon{font-size:22px}}
/* Admin CMS workspace */
.cms-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;padding-bottom:12px;border-bottom:1px solid var(--line)}.cms-tab{border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--text);font:600 14px inherit;padding:10px 15px;cursor:pointer}.cms-tab.active{background:#1769d2;color:#fff;border-color:#1769d2}.cms-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:4px 0 18px}.cms-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:650;color:var(--muted)}.cms-form input,.cms-form select,.cms-form textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:11px;font:500 14px inherit}.cms-form button{align-self:end;min-height:42px}.cms-list{display:grid;gap:9px;margin-top:12px}.cms-list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel)}.cms-list-item strong{display:block}.cms-list-item small{color:var(--muted)}.cms-list-item button{border:1px solid var(--line);background:var(--panel2);border-radius:9px;padding:7px 10px;color:var(--text);cursor:pointer}.content-browser{padding:24px 0 10px}.content-browser h2{font-size:clamp(24px,3vw,34px);margin:0 0 8px}.content-browser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.content-item{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:18px;min-width:0;box-shadow:0 6px 24px #28344d08}.content-item h3{margin:0 0 8px;font-size:18px}.content-item p{color:var(--muted);line-height:1.6}.content-item audio,.content-item video,.content-item iframe{width:100%;max-width:100%;border-radius:10px}.content-item .content-open{display:inline-flex;margin-top:10px;color:var(--accent,#1769d2);font-weight:700;overflow-wrap:anywhere}.content-empty{border:1px dashed var(--line);border-radius:16px;padding:24px;color:var(--muted)}.admin-card{max-height:92dvh;overflow:auto}.cms-pane.hidden{display:none!important}@media(max-width:760px){.cms-form{grid-template-columns:1fr}.content-browser-grid{grid-template-columns:1fr}.cms-tab{font-size:12px;padding:9px 11px}.cms-list-item{align-items:flex-start}.admin-card{width:calc(100% - 20px);padding:16px}}

/* CMS upload feedback and admin-managed branding */
.upload-progress-wrap{margin:16px 0;padding:14px 16px;border:1px solid var(--line,#dfe5f0);border-radius:14px;background:var(--surface,#f7f9fd)}
.upload-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14px;font-weight:700}
.upload-progress-head button{border:0;border-radius:9px;padding:7px 10px;background:#fff0f0;color:#b42318;font-weight:700;cursor:pointer}
.upload-progress-wrap progress{width:calc(100% - 48px);height:10px;accent-color:var(--accent,#1769d2);vertical-align:middle}
#uploadProgressPercent{display:inline-block;width:42px;text-align:right;font-size:13px;font-weight:800;color:var(--accent,#1769d2)}
.cms-form small{display:block;color:var(--muted,#65738b);font-size:12px;margin-top:4px}
.admin-custom-logo{width:38px;height:38px;object-fit:contain;border-radius:10px;margin-right:8px}
.admin-footer-logo{max-width:110px;max-height:56px;object-fit:contain;display:block;margin:0 0 12px}

/* Password eye controls sit inside the input boundary, including Admin CMS forms. */
.password-input-wrap{position:relative;display:block;width:100%;min-width:0}
.password-input-wrap input{width:100%;padding-right:48px!important}
.password-input-wrap .password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:17px;z-index:2}
.password-input-wrap .password-toggle:hover{background:var(--panel2)}
.cms-form .password-input-wrap{grid-column:1/-1}
.cms-empty{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:13px}

/* Visual refinement: clearer typography and richer, consistent icon colors. */
:root{--ml-purple:#1769d2;--ml-mint:#1f9b85;--ml-coral:#d77d5d;--ml-blue:#477fc7}
.top-brand strong{font-size:16px;letter-spacing:.01em}
.header-nav{gap:6px}
.header-nav-item{font-size:14px;font-weight:700;padding:12px 13px}
.theme-toggle,.auth-button,.admin-users-button,.user-chip{font-size:12px}
.home-hero h1{font-size:clamp(40px,4.7vw,66px);line-height:1.1;letter-spacing:-.045em}
.hero-copy>p:not(.eyebrow){font-size:clamp(15px,1.2vw,17px);line-height:1.8}
.eyebrow{font-size:12px;letter-spacing:.14em}
.primary-cta,.secondary-cta,.banner-chat{font-size:14px;padding:14px 18px}
.hero-stats div{font-size:12px;font-weight:600}
.hero-stats strong{width:34px;height:34px;font-size:20px}
.section-heading h2{font-size:clamp(25px,2.8vw,35px)}
.section-heading p:not(.eyebrow){font-size:14px;line-height:1.7}
.section-mark{font-size:12px}
.feature-card{padding:22px 20px 18px;border-radius:20px}
.feature-icon{width:52px;height:52px;border-radius:16px;font-size:27px;margin-bottom:20px;box-shadow:0 5px 14px #24304a0b}
.feature-card h3{font-size:18px;line-height:1.35;margin-bottom:10px}
.feature-card p{font-size:14px;line-height:1.7;min-height:72px;margin-bottom:18px}
.feature-link{font-size:13px;padding-top:14px}
.feature-link b{font-size:19px}
.feature-number{font-size:11px}
.feature-lilac .feature-icon{background:linear-gradient(135deg,#e8f1ff,#d4e6ff);color:#1769d2}
.feature-peach .feature-icon{background:linear-gradient(135deg,#fff0e7,#ffd8c7);color:#c96848}
.feature-mint .feature-icon{background:linear-gradient(135deg,#e1f8f0,#bcefe1);color:#168a73}
.feature-blue .feature-icon{background:linear-gradient(135deg,#e6f0ff,#cbdfff);color:#3975c2}
.floating-note{filter:saturate(1.12)}
.home-bottom-banner h2{font-size:clamp(20px,2.1vw,28px)}
.home-bottom-banner p:not(.eyebrow){font-size:14px;line-height:1.65}
.home-footer{font-size:12px}
.chat-launcher{font-size:14px;font-weight:700}
.chat-panel-brand strong{font-size:16px}
.chat-panel-brand small{font-size:12px}
.chat-panel .welcome-copy{font-size:14px;line-height:1.75}
.chat-panel .suggestion strong{font-size:14px}
.chat-panel .suggestion small{font-size:12px}
.bubble{font-size:15px;line-height:1.8}
.composer textarea{font-size:16px;line-height:1.65}
.composer-foot{font-size:12px}
.cms-tab{font-size:15px;padding:11px 16px;font-weight:700}
.cms-form label{font-size:14px}
.cms-form input,.cms-form select,.cms-form textarea{font-size:15px;padding:12px 13px}
.cms-list-item{padding:15px}
.cms-list-item strong{font-size:16px}
.cms-list-item small{font-size:13px}
.content-item h3{font-size:20px}
.content-item p{font-size:15px;line-height:1.75}
.auth-card h2{font-size:25px}
.auth-subtitle,.auth-note{font-size:14px}
.auth-form label{font-size:14px}
.auth-form input{font-size:16px}
@media(max-width:900px){
 .header-nav-item{font-size:15px}
 .feature-card h3{font-size:17px}
 .feature-card p{font-size:14px;min-height:68px}
 .home-bottom-banner p:not(.eyebrow){font-size:13px}
}
@media(max-width:620px){
 .top-brand strong{font-size:14px}
 .header-nav-item{font-size:16px;padding:15px 16px}
 .home-hero h1{font-size:clamp(35px,9vw,43px);line-height:1.12}
 .hero-copy>p:not(.eyebrow){font-size:15px;line-height:1.75}
 .eyebrow{font-size:11px}
 .primary-cta,.secondary-cta,.banner-chat{font-size:13px;padding:12px 14px}
 .hero-stats div{font-size:11px}
 .section-heading h2{font-size:25px}
 .section-heading p:not(.eyebrow){font-size:13px}
 .feature-grid{grid-template-columns:1fr;gap:12px}
 .feature-card{padding:17px 16px;border-radius:17px}
 .feature-icon{width:46px;height:46px;font-size:25px;margin-bottom:14px}
 .feature-card h3{font-size:17px}
 .feature-card p{font-size:13px;min-height:0;line-height:1.7}
 .feature-link{font-size:12px}
 .home-bottom-banner h2{font-size:19px}
 .home-bottom-banner p:not(.eyebrow){font-size:12px}
 .home-footer{font-size:11px}
 .chat-panel .welcome-copy{font-size:13px}
 .cms-tab{font-size:14px;padding:10px 12px}
 .cms-form label{font-size:14px}
 .cms-list-item strong{font-size:15px}
 .content-item h3{font-size:18px}
 .content-item p{font-size:14px}
}

/* Header smart search: expandable, keyboard accessible, and responsive. */
.header-search-toggle{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--ml-purple,#1769d2);font:inherit;font-size:30px;line-height:1;cursor:pointer;box-shadow:0 4px 12px #2836530b;transition:transform .18s,border-color .18s,background .18s}
.header-search-toggle:hover,.header-search-toggle[aria-expanded="true"]{border-color:#5a9bea;background:rgba(23,105,210,.12);transform:translateY(-1px)}
.header-search-panel{position:sticky;top:76px;z-index:49;width:min(900px,calc(100% - 32px));margin:10px auto 0;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 18px 50px #202b451c;color:var(--text)}
.header-search-panel.hidden{display:none}
.header-search-field{display:flex;align-items:center;gap:10px;padding:7px 9px 7px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.header-search-field>span{font-size:26px;color:var(--ml-purple,#1769d2);line-height:1}
.header-search-field input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:16px;padding:9px 0}
.header-search-field input::placeholder{color:var(--muted)}
.header-search-field button{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;padding:8px 11px;cursor:pointer}
.header-search-results{display:grid;gap:6px;max-height:min(52vh,440px);overflow:auto;padding-top:10px}
.header-search-results:empty{display:none}
.header-search-results .search-hint,.header-search-results .search-status{margin:0;padding:12px;color:var(--muted);font-size:13px}
.header-search-result{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text);font:inherit;cursor:pointer}
.header-search-result:hover,.header-search-result:focus-visible{outline:0;border-color:rgba(23,105,210,.35);background:rgba(23,105,210,.09)}
.header-search-result-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#dceaff;color:#1769d2;font-size:21px}
.header-search-result[data-category="games"] .header-search-result-icon{background:#ffeadf;color:#db744d}
.header-search-result[data-category="lessons"] .header-search-result-icon{background:#ddf7ee;color:#168e78}
.header-search-result[data-category="news"] .header-search-result-icon{background:#e2edff;color:#3f7fd0}
.header-search-result-copy{min-width:0;flex:1}
.header-search-result-copy strong,.header-search-result-copy small{display:block;overflow-wrap:anywhere}
.header-search-result-copy strong{font-size:14px;font-weight:750;line-height:1.4}
.header-search-result-copy small{font-size:12px;color:var(--muted);line-height:1.5;margin-top:3px}
.header-search-result-arrow{color:var(--ml-purple,#1769d2);font-size:20px}
@media(max-width:900px){.header-search-panel{position:relative;top:auto;margin-top:2px;margin-bottom:0;width:calc(100% - 20px);}}
@media(max-width:620px){.header-search-toggle{width:35px;height:35px;flex-basis:35px;font-size:27px;border-radius:11px}.header-search-panel{top:auto;width:calc(100% - 20px);padding:9px;border-radius:15px;margin-top:2px}.header-search-field{gap:6px;padding-left:9px}.header-search-field input{font-size:16px}.header-search-field button{padding:7px 8px;font-size:12px}.header-search-result{padding:9px;gap:9px}.header-search-result-icon{width:35px;height:35px;flex-basis:35px;font-size:19px}.header-search-result-copy strong{font-size:13px}.header-search-result-copy small{font-size:11px}}
.content-item.search-result-highlight{outline:3px solid rgba(23,105,210,.55);box-shadow:0 0 0 7px rgba(23,105,210,.12);transition:outline .2s,box-shadow .2s}

/* Header action controls: consistent height and vertical alignment. */
.top-actions{display:flex;align-items:center;gap:10px;min-height:64px}
.top-actions .header-search-toggle,
.top-actions .theme-toggle,
.top-actions .user-chip,
.top-actions .admin-users-button,
.top-actions .auth-button{
  box-sizing:border-box!important;height:64px!important;min-height:64px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin:0!important;line-height:1.2!important;vertical-align:middle;
}
.top-actions .header-search-toggle{width:64px!important;min-width:64px!important;padding:0!important;border-radius:24px!important;font-size:29px!important;line-height:1!important}
.top-actions .theme-toggle{padding:0 20px!important;border-radius:20px!important;font-size:18px!important}
.top-actions .user-chip{padding:0 18px!important;border-radius:32px!important;font-size:16px!important;max-width:220px}
.top-actions .admin-users-button{padding:0 20px!important;border-radius:20px!important;font-size:16px!important;white-space:nowrap!important}
.top-actions .auth-button{padding:0 24px!important;border-radius:20px!important;font-size:17px!important;white-space:nowrap!important}
@media(max-width:760px){
 .top-actions{gap:6px;min-height:44px}
 .top-actions .header-search-toggle,.top-actions .theme-toggle,.top-actions .user-chip,.top-actions .admin-users-button,.top-actions .auth-button{height:44px!important;min-height:44px!important}
 .top-actions .header-search-toggle{width:44px!important;min-width:44px!important;border-radius:15px!important;font-size:23px!important}
 .top-actions .theme-toggle{padding:0 10px!important;font-size:13px!important;border-radius:13px!important}
 .top-actions .user-chip{padding:0 9px!important;font-size:11px!important;max-width:105px}
 .top-actions .admin-users-button{padding:0 9px!important;font-size:11px!important;border-radius:13px!important}
 .top-actions .auth-button{padding:0 12px!important;font-size:12px!important;border-radius:13px!important}
}

/* Final header balance: compact action controls so navigation never gets covered. */
.topbar{gap:clamp(6px,0.7vw,12px);padding-left:clamp(14px,3vw,42px);padding-right:clamp(14px,3vw,42px)}
.top-brand{flex:0 1 auto;min-width:0;max-width:clamp(165px,19vw,250px);gap:9px}
.top-brand strong{font-size:clamp(12px,1vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-nav{flex:1 1 auto;min-width:0;gap:clamp(2px,.35vw,6px);justify-content:center}
.header-nav-item{font-size:clamp(11px,.9vw,13px)!important;padding:10px clamp(6px,.7vw,11px)!important;white-space:nowrap;line-height:1.2}
.top-actions{flex:0 0 auto;gap:clamp(5px,.45vw,8px);min-height:44px}
.top-actions .header-search-toggle,.top-actions .theme-toggle,.top-actions .user-chip,.top-actions .admin-users-button,.top-actions .auth-button{height:44px!important;min-height:44px!important;font-size:clamp(11px,.9vw,13px)!important;line-height:1.15!important;border-radius:13px!important}
.top-actions .header-search-toggle{width:44px!important;min-width:44px!important;flex:0 0 44px!important;font-size:21px!important;border-radius:14px!important}
.top-actions .theme-toggle{padding:0 11px!important;white-space:nowrap}
.top-actions .user-chip{max-width:145px;padding:0 12px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions .admin-users-button{padding:0 12px!important;white-space:nowrap!important}
.top-actions .auth-button{padding:0 15px!important;white-space:nowrap!important}
@media(min-width:1101px) and (max-width:1450px){
 .topbar{gap:6px;padding-left:16px;padding-right:16px}
 .top-brand{max-width:190px}
 .top-brand strong{font-size:12px}
 .header-nav{gap:1px}
 .header-nav-item{font-size:11px!important;padding:9px 6px!important}
 .top-actions{gap:4px}
 .top-actions .user-chip{max-width:105px;padding:0 8px!important}
 .top-actions .theme-toggle,.top-actions .admin-users-button{padding:0 8px!important}
 .top-actions .auth-button{padding:0 10px!important}
}
@media(max-width:1100px){
 .topbar{gap:8px;padding-left:14px;padding-right:14px}
 .header-nav{flex-basis:auto}
 .top-actions{gap:5px}
 .top-actions .header-search-toggle,.top-actions .theme-toggle,.top-actions .user-chip,.top-actions .admin-users-button,.top-actions .auth-button{height:40px!important;min-height:40px!important;font-size:11px!important}
 .top-actions .header-search-toggle{width:40px!important;min-width:40px!important;flex-basis:40px!important}
}
@media(max-width:620px){
 .topbar{min-height:58px;height:auto;padding:8px 10px;gap:6px;flex-wrap:nowrap}
 .top-brand{max-width:min(48vw,190px);gap:6px}
 .top-brand .brand-icon{width:32px;height:32px;flex-basis:32px;font-size:21px}
 .top-brand strong{font-size:11px;max-width:calc(100% - 38px)}
 .top-actions{gap:4px;min-height:36px}
 .top-actions .header-search-toggle,.top-actions .theme-toggle,.top-actions .user-chip,.top-actions .admin-users-button,.top-actions .auth-button{height:36px!important;min-height:36px!important;font-size:10px!important;border-radius:10px!important}
 .top-actions .header-search-toggle{width:36px!important;min-width:36px!important;flex-basis:36px!important;font-size:18px!important}
 .top-actions .theme-toggle{padding:0 7px!important}
 .top-actions .auth-button{padding:0 9px!important}
}


/* Reliable responsive brand placement: JS relocates the brand to body on small screens. */
.top-brand.brand-floating-mobile {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: auto !important;
  top: auto !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: min(46vw, 230px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 10px 6px 6px !important;
  gap: 7px !important;
  border: 1px solid var(--line, #dce4f1) !important;
  border-radius: 17px !important;
  background: var(--panel, #fff) !important;
  box-shadow: 0 8px 24px rgba(30, 42, 70, .16) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  transform: none !important;
}
.top-brand.brand-floating-mobile .brand-icon {
  flex: 0 0 32px !important; width: 32px !important; height: 32px !important;
  font-size: 21px !important;
}
.top-brand.brand-floating-mobile strong {
  display: block !important; max-width: calc(min(46vw, 230px) - 53px) !important;
  font-size: 11px !important; line-height: 1.2 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
@media (max-width: 390px) {
  .top-brand.brand-floating-mobile { max-width: 44vw !important; padding: 5px 7px 5px 5px !important; gap: 5px !important; }
  .top-brand.brand-floating-mobile .brand-icon { flex-basis: 29px !important; width: 29px !important; height: 29px !important; font-size: 19px !important; }
  .top-brand.brand-floating-mobile strong { max-width: calc(44vw - 46px) !important; font-size: 10px !important; }
}
@media (max-width: 1100px) {
  .chat-launcher { z-index: 9999 !important; bottom: max(14px, env(safe-area-inset-bottom)) !important; right: max(12px, env(safe-area-inset-right)) !important; }
  body { padding-bottom: 64px; }
}

/* Mobile/tablet header: balance controls across the full width without clipping. */
@media (max-width:1000px){
  .topbar{
    display:flex!important;
    width:100%;
    justify-content:space-between!important;
    align-items:center!important;
    gap:8px!important;
    padding-inline:clamp(8px,2.5vw,16px)!important;
  }
  .topbar>.top-brand{display:none!important}
  .topbar>.header-nav{position:fixed!important}
  .topbar>.top-actions{
    order:1;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:clamp(3px,1.2vw,10px)!important;
    margin:0!important;
  }
  .topbar>.mobile-menu-toggle{
    order:2;
    flex:0 0 clamp(38px,8vw,46px)!important;
    width:clamp(38px,8vw,46px)!important;
    height:clamp(38px,8vw,46px)!important;
    margin-left:clamp(2px,1vw,8px)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .top-actions .header-search-toggle,
  .top-actions .theme-toggle,
  .top-actions .user-chip,
  .top-actions .admin-users-button,
  .top-actions .auth-button{
    flex:0 1 auto!important;
    min-width:0!important;
    height:clamp(38px,8vw,46px)!important;
    min-height:clamp(38px,8vw,46px)!important;
    padding-inline:clamp(5px,1.5vw,12px)!important;
    white-space:nowrap!important;
  }
  .top-actions .user-chip{max-width:clamp(58px,19vw,140px)!important;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:600px){
  .topbar{gap:5px!important;padding-inline:7px!important}
  .topbar>.top-actions{gap:clamp(2px,.7vw,5px)!important}
  .top-actions .header-search-toggle{width:36px!important;flex:0 0 36px!important;padding:0!important}
  .top-actions .theme-toggle{width:40px!important;flex:0 0 40px!important;padding:0 4px!important}
  .top-actions .user-chip{max-width:clamp(54px,17vw,75px)!important;font-size:8px!important;padding-inline:4px!important}
  .top-actions .admin-users-button{max-width:65px!important;font-size:9px!important;padding-inline:5px!important}
  .top-actions .auth-button{font-size:9px!important;padding-inline:6px!important}
  .topbar>.mobile-menu-toggle{flex-basis:38px!important;width:38px!important;height:38px!important;margin-left:2px!important}
}

/* Final mobile/tablet drawer repair: solid theme-aware drawer above the dim layer. */
@media (max-width: 1100px) {
  body.mobile-menu-open::after {
    z-index: 9000 !important;
    background: rgba(20, 29, 47, .28) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
  }
  body.mobile-menu-open .topbar { position: relative !important; z-index: 9001 !important; }
  body.mobile-menu-open .header-nav,
  .topbar > .header-nav.open {
    position: fixed !important; inset: 0 0 0 auto !important;
    width: min(360px, 88vw) !important; height: 100vh !important; height: 100dvh !important;
    box-sizing: border-box !important; padding: 88px 18px max(24px, env(safe-area-inset-bottom)) !important;
    background: #ffffff !important; color: #253149 !important;
    border-left: 1px solid #e0e6ef !important; box-shadow: -12px 0 36px rgba(24, 35, 58, .14) !important;
    z-index: 9002 !important; isolation: isolate !important; opacity: 1 !important; filter: none !important;
    overflow-y: auto !important; overscroll-behavior: contain !important;
  }
  body[data-theme="dark"].mobile-menu-open .header-nav,
  body[data-theme="dark"] .topbar > .header-nav.open {
    background: #11182b !important; color: #eef3ff !important; border-left-color: #26314a !important;
  }
  .header-nav .mobile-menu-close {
    position: absolute !important; top: max(16px, env(safe-area-inset-top)) !important; right: 16px !important;
    z-index: 2 !important; background: #f0f4fa !important; color: #202b3c !important;
  }
  body[data-theme="dark"] .header-nav .mobile-menu-close { background: #202b42 !important; color: #eef3ff !important; }
  .header-nav .header-nav-item { flex: 0 0 auto !important; color: #536783 !important; border-radius: 13px !important; }
  .header-nav .header-nav-item.active { background: #eeefff !important; color: #202b3c !important; }
  body[data-theme="dark"] .header-nav .header-nav-item { color: #b7c5dc !important; }
  body[data-theme="dark"] .header-nav .header-nav-item.active { background: #26304b !important; color: #eef3ff !important; }
  body.mobile-menu-open .top-brand.brand-floating-mobile,
  body.mobile-menu-open .chat-launcher { z-index: 8999 !important; }
}
/* Keep the floating brand and AI launcher equal in visual height, above footer text. */
@media (max-width: 1100px) {
  .top-brand.brand-floating-mobile { min-height: 48px !important; height: 48px !important; padding: 6px 10px 6px 6px !important; }
  .chat-launcher { min-height: 48px !important; height: 48px !important; padding-top: 6px !important; padding-bottom: 6px !important; }
  .top-brand.brand-floating-mobile .brand-icon,
  .chat-launcher .launcher-note { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  .home-footer { padding-bottom: max(58px, calc(env(safe-area-inset-bottom) + 58px)) !important; }
}


/* Targeted fix: keep mobile/tablet drawer navigation links at the top below the close button. */
@media (max-width: 1100px) {
  body.mobile-menu-open .header-nav,
  .topbar > .header-nav.open {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    align-content: flex-start !important;
    gap: 8px !important;
    padding-top: max(88px, calc(env(safe-area-inset-top) + 76px)) !important;
  }
  body.mobile-menu-open .header-nav > .header-nav-item,
  .topbar > .header-nav.open > .header-nav-item {
    margin-block: 0 !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
  }
}

/* Targeted final fix: keep the header visible after choosing a section on mobile/tablet. */
@media (max-width: 1100px) {
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 8990 !important;
    background: var(--bg) !important;
    isolation: isolate;
  }
  body.mobile-menu-open .topbar { position: fixed !important; top: 0 !important; }
}
/* Respect role-based hidden controls even when responsive styles set display. */
[hidden] { display: none !important; }

/* Final targeted mobile/tablet repair: keep the top action bar fixed while browsing sections. */
@media (max-width: 1100px) {
  .main { padding-top: 66px !important; }
  .topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    min-height: 66px !important;
    height: auto !important;
    z-index: 8990 !important;
    background: var(--bg, #f7f9fc) !important;
    border-bottom: 1px solid var(--line, #dbe3f0) !important;
  }
  body.mobile-menu-open .topbar { z-index: 9001 !important; }
  .header-nav { scroll-padding-top: 12px; }
  .header-nav-item { scroll-margin-top: 12px; }
}
/* Admin control must remain hidden unless updateAccountUI confirms an Admin session. */
#adminUsersButton[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; }


/* Mobile/tablet login fix: keep the authentication form usable above the on-screen keyboard. */
@media (max-width: 1000px) {
  .auth-backdrop {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    height: var(--auth-visual-height, 100dvh);
    max-height: var(--auth-visual-height, 100dvh);
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
  .auth-card {
    flex: 0 0 auto;
    width: min(440px, 100%);
    max-height: calc(var(--auth-visual-height, 100dvh) - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: auto 0;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block: 18px;
  }
  .auth-form input { font-size: 16px; }
}

/* Final mobile/tablet auth viewport correction: track the actual visible area
   when iOS/Android keyboards open, and keep every auth control reachable. */
@media (max-width: 1000px) {
  .auth-backdrop {
    position: fixed !important;
    top: var(--auth-visual-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: var(--auth-visual-height, 100dvh) !important;
    max-height: var(--auth-visual-height, 100dvh) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }
  .auth-card {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    width: min(440px, 100%) !important;
    max-height: calc(var(--auth-visual-height, 100dvh) - 16px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 18px 16px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-block: 20px !important;
  }
  .auth-brand { margin-bottom: 10px !important; }
  .auth-card h2 { margin-bottom: 6px !important; }
  .auth-tabs { margin: 12px 0 !important; }
  .auth-form { gap: 10px !important; }
  .auth-form input { min-height: 44px; font-size: 16px !important; }
  .auth-submit, .admin-login-link { min-height: 44px; }
}

/* Mobile/tablet chat keyboard fit: keep the panel and composer in the visible viewport. */
@media (max-width: 1000px) {
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: auto; top: var(--chat-visible-top, 8px); height: var(--chat-visible-height, calc(100dvh - 16px)); max-height: none; border-radius: 18px; }
  .chat-panel.open { top: var(--chat-visible-top, 8px); height: var(--chat-visible-height, calc(100dvh - 16px)); }
  .chat-panel .conversation { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .chat-panel .composer-wrap { flex: 0 0 auto; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .chat-panel .composer textarea { max-height: 22dvh; font-size: 16px; }
}

/* Chat open state: hide the floating site badge so it never covers the chat UI. */
body.chat-open .top-brand.brand-floating-mobile { display: none !important; }
/* Keep the chat close control visible and tappable above the content on phones/tablets. */
.chat-panel-head { position: relative; z-index: 5; flex-shrink: 0; }
.chat-panel .chat-close {
  position: relative !important;
  z-index: 10 !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  touch-action: manipulation;
  font-size: 28px !important;
  line-height: 1 !important;
}
.chat-panel .welcome { overflow-y: auto; min-height: 0; }
.chat-panel .welcome .suggestions { display: none !important; }
@media (max-width: 1000px) {
  .chat-panel .chat-panel-head { min-height: 58px !important; padding-top: max(8px, env(safe-area-inset-top)) !important; }
  .chat-panel .chat-close { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  body.chat-open .top-brand.brand-floating-mobile { display: none !important; }
}

/* Final targeted chat fixes: keep close button/header visible, align welcome mark and remove footer disclaimer. */
.chat-panel .chat-panel-head {
  display: flex !important;
  position: relative !important;
  flex: 0 0 64px !important;
  min-height: 64px !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  z-index: 20 !important;
}
.chat-panel .chat-panel-brand { flex: 1 1 auto !important; min-width: 0 !important; }
.chat-panel .chat-close {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  margin-left: auto !important;
  color: var(--text) !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  z-index: 21 !important;
}
.chat-panel .welcome .hero-note { margin-left: auto !important; margin-right: auto !important; }
.chat-panel .welcome > .eyebrow { text-align: center !important; width: 100% !important; margin: 0 auto 14px !important; line-height: 1.5 !important; }
.chat-panel .composer-foot { display: none !important; }
@media (max-width: 1000px) {
  .chat-panel .chat-panel-head { flex-basis: 60px !important; min-height: 60px !important; padding: max(8px, env(safe-area-inset-top)) 12px 8px !important; }
  .chat-panel .chat-close { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .chat-panel .welcome { flex: 1 1 0 !important; }
}

/* Requested mobile/tablet behavior: hide the site header while AI chat is open,
   so the chat's own close (X) is visible without the page menu behind it. */
@media (max-width: 1000px) {
  body.chat-open .topbar,
  body.chat-open .site-header,
  body.chat-open header[role="banner"] {
    display: none !important;
  }
  body.chat-open .chat-panel {
    position: fixed !important;
    z-index: 2147483000 !important;
    top: var(--chat-visible-top, 6px) !important;
    height: var(--chat-visible-height, calc(100dvh - 12px)) !important;
    max-height: none !important;
  }
  body.chat-open .chat-panel .chat-panel-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2147483001 !important;
    background: var(--panel, #f7f9fc) !important;
  }
  body.chat-open .chat-panel .chat-close {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}


/* Targeted mobile/tablet fix: hide site header while authentication dialog is open. */
@media (max-width: 1000px) {
  body.auth-open .topbar,
  body.auth-open .site-header,
  body.auth-open header[role="banner"] {
    display: none !important;
  }
  body.auth-open .auth-backdrop {
    position: fixed !important;
    inset: var(--auth-visual-top, 0px) 0 auto 0 !important;
    width: 100% !important;
    height: var(--auth-visual-height, 100dvh) !important;
    max-height: var(--auth-visual-height, 100dvh) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 2147483100 !important;
  }
  body.auth-open .auth-card {
    width: 100% !important;
    max-width: 560px !important;
    max-height: calc(var(--auth-visual-height, 100dvh) - 16px) !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}
/* Keep the chat welcome icon and its eyebrow aligned on the same center axis. */
.chat-panel .welcome {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.chat-panel .welcome .hero-note,
.chat-panel .welcome > .eyebrow {
  align-self: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Targeted mobile/tablet fix: align the music mark with its label and prevent accidental double-tap zoom. */
.welcome-kicker { display: contents; }
@media (max-width: 1000px) {
  .chat-panel .welcome-kicker {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 auto 18px !important;
  }
  .chat-panel .welcome-kicker .hero-note {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    font-size: 31px !important;
  }
  .chat-panel .welcome-kicker .eyebrow {
    flex: 0 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.35 !important;
    letter-spacing: 1.4px !important;
  }
}
html, body, button, a, input, textarea, select { touch-action: manipulation; }

/* Requested final mobile/tablet polish: larger auth tabs, consistent home/song icons,
   and prevent the page behind the AI chat from scrolling when the composer is active. */
@media (max-width: 1000px) {
  .auth-tabs { gap: 10px !important; }
  .auth-tab {
    font-size: clamp(14px, 1.8vw, 16px) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    min-height: 52px !important;
    padding: 12px 10px !important;
  }
  .header-nav-item#goHome,
  .header-nav-item[data-section="songs"] {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  .header-nav-item#goHome::first-letter,
  .header-nav-item[data-section="songs"]::first-letter {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  html, body { overscroll-behavior: none !important; }
  body.chat-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }
  body.chat-open .chat-panel {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
  }
  body.chat-open .chat-panel .conversation,
  body.chat-open .chat-panel .welcome {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.chat-open .chat-panel .composer,
  body.chat-open .chat-panel .composer textarea {
    touch-action: manipulation !important;
  }
}

/* iPhone/iPad chat input polish: lock the page behind the chat, but keep text editing natural. */
@media (max-width: 1000px) {
  body.chat-open { overflow: hidden !important; }
  body.chat-open .chat-panel { touch-action: auto !important; }
  body.chat-open .chat-panel .composer,
  body.chat-open .chat-panel .composer textarea { touch-action: pan-x pan-y !important; }
  body.chat-open .chat-panel .composer textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
    caret-color: var(--accent);
  }
  .clear-message-button {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 1 !important;
    background: #e9edf4 !important;
    color: #526078 !important;
  }
  .clear-message-button[hidden] { display: none !important; }
}

/* Targeted mobile/tablet menu typography: match Games, Lessons and News labels to Songs. */
@media (max-width: 1000px) {
  .header-nav .header-nav-item[data-section="games"],
  .header-nav .header-nav-item[data-section="lessons"],
  .header-nav .header-nav-item[data-section="news"] {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  .header-nav .header-nav-item[data-section="games"] .nav-icon,
  .header-nav .header-nav-item[data-section="lessons"] .nav-icon,
  .header-nav .header-nav-item[data-section="news"] .nav-icon {
    font-size: 22px !important;
    line-height: 1 !important;
    vertical-align: -2px !important;
    margin-right: 5px !important;
  }
}

/* Requested targeted mobile/tablet header polish: larger Home/Songs icons and clearer header bar. */
@media (max-width: 1000px) {
  .topbar {
    background: linear-gradient(110deg, #e6f0ff 0%, #f4f8ff 55%, #e5f7f2 100%) !important;
    border-bottom: 1px solid #cbd7ed !important;
    box-shadow: 0 5px 16px rgba(48, 66, 103, .10) !important;
    position: relative;
    z-index: 100 !important;
  }
  .header-nav .header-nav-item#goHome,
  .header-nav .header-nav-item[data-section="songs"] {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    padding: 13px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .header-nav .header-nav-item#goHome,
  .header-nav .header-nav-item[data-section="songs"] {
    letter-spacing: 0 !important;
  }
  .top-actions .header-search-toggle,
  .top-actions .theme-toggle,
  .top-actions .user-chip,
  .top-actions .admin-users-button,
  .top-actions .auth-button,
  .topbar > .mobile-menu-toggle {
    border-color: #cbd8ed !important;
    box-shadow: 0 2px 5px rgba(42, 61, 96, .06) !important;
  }
  .top-actions .theme-toggle { font-size: 13px !important; }
  .top-actions .user-chip { font-size: 11px !important; }
  .top-actions .admin-users-button,
  .top-actions .auth-button { font-size: 12px !important; font-weight: 700 !important; }
  .topbar > .mobile-menu-toggle { background: #fff !important; font-size: 22px !important; }
}
@media (max-width: 600px) {
  .topbar {
    gap: 4px !important;
    padding: 8px 7px !important;
    min-height: 64px !important;
  }
  .topbar > .top-actions { gap: 4px !important; }
  .top-actions .header-search-toggle { width: 38px !important; flex: 0 0 38px !important; font-size: 22px !important; }
  .top-actions .theme-toggle { width: 42px !important; flex: 0 0 42px !important; font-size: 11px !important; }
  .top-actions .user-chip { max-width: 76px !important; font-size: 9px !important; padding-inline: 4px !important; }
  .top-actions .admin-users-button { max-width: 68px !important; font-size: 10px !important; padding-inline: 4px !important; }
  .top-actions .auth-button { font-size: 10px !important; padding-inline: 5px !important; }
  .topbar > .mobile-menu-toggle { width: 38px !important; height: 40px !important; flex-basis: 38px !important; }
}

/* Minimal final polish: stronger mobile/tablet header contrast and readable controls. */
@media (max-width: 1000px) {
  .topbar {
    background: linear-gradient(110deg, #dceaff 0%, #edf5ff 52%, #d9f4ec 100%) !important;
    border-bottom: 1px solid #b9c9e5 !important;
    box-shadow: 0 5px 18px rgba(36, 55, 91, .16) !important;
  }
  .top-actions .theme-toggle,
  .top-actions .user-chip,
  .top-actions .admin-users-button,
  .top-actions .auth-button,
  .topbar > .mobile-menu-toggle {
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .top-actions .user-chip { font-size: 12px !important; }
  .top-actions .admin-users-button,
  .top-actions .auth-button { font-size: 14px !important; }
  .header-nav .header-nav-item#goHome,
  .header-nav .header-nav-item[data-section="songs"],
  .header-nav .header-nav-item[data-section="games"],
  .header-nav .header-nav-item[data-section="lessons"],
  .header-nav .header-nav-item[data-section="news"] {
    font-size: 18px !important;
    font-weight: 700 !important;
  }
  .header-nav .header-nav-item#goHome .nav-icon,
  .header-nav .header-nav-item[data-section="songs"] .nav-icon {
    font-size: 32px !important;
    line-height: 1.1 !important;
    vertical-align: -3px !important;
    margin-right: 7px !important;
  }
  .header-nav .header-nav-item[data-section="games"] .nav-icon,
  .header-nav .header-nav-item[data-section="lessons"] .nav-icon,
  .header-nav .header-nav-item[data-section="news"] .nav-icon {
    font-size: 24px !important;
  }
}
@media (max-width: 600px) {
  .top-actions .theme-toggle { font-size: 12px !important; }
  .top-actions .user-chip { font-size: 11px !important; }
  .top-actions .admin-users-button,
  .top-actions .auth-button { font-size: 12px !important; }
}

/* Targeted fix: show the complete signed-in account label on mobile/tablet headers. */
@media (max-width: 760px) {
  .top-actions .user-chip {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 132px !important;
    max-width: 160px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 10px !important;
  }
}

/* Final iOS/iPadOS scroll lock: prevent the underlying home scroller from moving
   while the AI chat is open; preserve scrolling only in the conversation list. */
@media (max-width: 1000px) {
  html.chat-scroll-locked,
  html.chat-scroll-locked body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }
  body.chat-open #homePage {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }
  body.chat-open .chat-panel {
    overscroll-behavior: none !important;
  }
  body.chat-open .chat-panel #conversation {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}


/* iPad/tablet header: distribute controls across the available width without changing desktop/mobile behavior. */
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar {
    width: 100%;
    box-sizing: border-box;
    padding: 0 18px;
    gap: 12px;
  }
  .top-actions {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.6vw, 18px);
    flex: 1 1 auto;
  }
  .top-actions > * {
    flex: 0 1 auto;
    min-width: 0;
  }
  .top-actions .header-search-toggle {
    flex: 0 0 40px;
  }
  .top-actions .theme-toggle,
  .top-actions .auth-button,
  .top-actions .admin-users-button {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 13px;
  }
  .top-actions .user-chip {
    max-width: 220px;
    font-size: 12px;
    padding: 9px 12px;
  }
}


/* Targeted fix: show the site logo in the header on iPad mini and larger tablets,
   while keeping the existing floating-bottom logo on phones (<=760px). */
@media (min-width: 761px) and (max-width: 1000px) {
  .topbar > .top-brand {
    display: flex !important;
    order: 0 !important;
    flex: 0 1 150px !important;
    width: 150px !important;
    max-width: 150px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 6px !important;
    margin: 0 !important;
  }
  .topbar > .top-brand .brand-icon {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    font-size: 19px !important;
  }
  .topbar > .top-brand strong {
    display: block !important;
    min-width: 0 !important;
    max-width: 112px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
  }
  .topbar > .top-actions {
    order: 1 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .topbar > .mobile-menu-toggle { order: 2 !important; }
}


/* Targeted iPad-mini-and-up header spacing: keep the logo left and evenly
   space the search/theme/account/login/menu controls as one right-aligned group. */
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .topbar > .top-brand {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
  }
  .topbar > .top-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: clamp(8px, 1.35vw, 16px) !important;
  }
  .topbar > .top-actions > * {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .topbar > .top-actions .header-search-toggle {
    flex: 0 0 40px !important;
    width: 40px !important;
  }
}

/* Targeted final polish requested 2026-10-16:
   slightly enlarge search icon from iPad mini upward, and let page content
   remain subtly visible beneath the sticky mobile/tablet header while scrolling. */
@media (min-width: 761px) {
  .topbar > .top-actions .header-search-toggle {
    font-size: 25px !important;
  }
}
@media (max-width: 1000px) {
  .topbar {
    background: linear-gradient(110deg, rgba(220, 234, 255, 0.85), rgba(219, 247, 239, 0.85)) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }
}

/* Professional sticky-header behavior: keep the normal header opaque at the
   top of the page, then apply a subtle 85%-opaque glass effect only on scroll. */
.topbar {
  background: linear-gradient(110deg, var(--bg, #f7f9fc), color-mix(in srgb, var(--bg, #f7f9fc) 96%, #d9f7ef)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background-color .22s ease, background .22s ease, box-shadow .22s ease,
              -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease;
}
.topbar.is-scrolled {
  background: linear-gradient(110deg, rgba(226, 232, 255, .68), rgba(219, 247, 239, .68)) !important;
  -webkit-backdrop-filter: saturate(145%) blur(8px) !important;
  backdrop-filter: saturate(145%) blur(8px) !important;
  box-shadow: 0 8px 22px rgba(35, 48, 78, .08);
}
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none !important; }
}

/* Dark-mode glass header correction: keep the header in harmony with the dark page. */
body[data-theme="dark"] .topbar {
  background: linear-gradient(110deg, rgba(12, 18, 34, 0.98), rgba(20, 27, 48, 0.98)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}
body[data-theme="dark"] .topbar.is-scrolled {
  background: linear-gradient(110deg, rgba(12, 18, 34, 0.68), rgba(20, 27, 48, 0.68)) !important;
  -webkit-backdrop-filter: saturate(145%) blur(8px) !important;
  backdrop-filter: saturate(145%) blur(8px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
}



/* Targeted fix: make the mobile/tablet menu icon clearly visible in dark mode. */
@media (max-width: 1100px) {
  body[data-theme="dark"] .topbar > .mobile-menu-toggle {
    color: #8bbcff !important;
    background: #172039 !important;
    border-color: #6674a0 !important;
    box-shadow: 0 0 0 1px rgba(196, 181, 253, .12) !important;
  }
  body[data-theme="dark"] .topbar > .mobile-menu-toggle svg,
  body[data-theme="dark"] .topbar > .mobile-menu-toggle i {
    color: #8bbcff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* Focused fix: enlarge only the clear (×) icon in the search bar. */
#headerSearchClear{font-size:24px;line-height:1;min-width:44px;min-height:44px;padding:8px 10px}


/* Mobile/tablet menu: align every navigation icon in one fixed column. */
@media (max-width: 1100px) {
  .header-nav .header-nav-item {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
  }
  .header-nav .header-nav-item > .nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
  .header-nav .header-nav-item > .nav-icon.nav-home,
  .header-nav .header-nav-item > .nav-icon.nav-songs {
    font-family: system-ui, -apple-system, "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
  }
}


/* Precise navigation icon alignment: normalize every menu icon on desktop and mobile/tablet. */
.header-nav-item {
  display: inline-flex !important;
  align-items: center !important;
}
.header-nav-item .nav-icon {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  text-align: center !important;
  font-family: system-ui, -apple-system, "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
}
.header-nav-item .nav-icon.nav-home,
.header-nav-item .nav-icon.nav-songs {
  font-size: 25px !important;
}
@media (max-width: 1100px) {
  .header-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .header-nav-item .nav-icon {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 32px !important;
    margin-right: 8px !important;
    font-size: 25px !important;
  }
}

/* Mobile/tablet only: align every navigation icon in one fixed column. */
@media (max-width: 1100px) {
  .header-nav .header-nav-item {
    display: flex !important;
    align-items: center !important;
    text-align: left;
  }
  .header-nav .header-nav-item .nav-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 30px;
    margin: 0 10px 0 0 !important;
    font-size: 24px !important;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
  }
}


/* Final targeted repair: mobile/tablet menu icons share one fixed left column. */
@media (max-width: 1100px) {
  .header-nav .header-nav-item {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: initial !important;
    column-gap: 12px !important;
    text-align: left !important;
  }
  .header-nav .header-nav-item > .nav-icon {
    grid-column: 1 !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    vertical-align: middle !important;
  }
  .header-nav .header-nav-item > span:not(.nav-icon),
  .header-nav .header-nav-item > .nav-label {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

/* Minimal visual alignment patch: compensate emoji glyph side-bearing in the mobile/tablet menu.
   Keep the existing fixed icon column and text positions unchanged. */
@media (max-width: 1100px) {
  .header-nav .header-nav-item > .nav-icon.nav-games,
  .header-nav .header-nav-item > .nav-icon.nav-lessons,
  .header-nav .header-nav-item > .nav-icon.nav-news {
    padding-left: 12px !important;
  }
}


/* Targeted request: bring each navigation icon closer to its own label
   consistently on desktop, tablet, and mobile. Keep other UI unchanged. */
.header-nav .header-nav-item > .nav-icon {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  margin: 0 3px 0 0 !important;
}
@media (max-width: 1100px) {
  .header-nav .header-nav-item {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    column-gap: 4px !important;
  }
  .header-nav .header-nav-item > .nav-icon {
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
  }
  .header-nav .header-nav-item > .nav-icon.nav-games,
  .header-nav .header-nav-item > .nav-icon.nav-lessons,
  .header-nav .header-nav-item > .nav-icon.nav-news {
    padding-left: 0 !important;
  }
}

/* Final narrow fix: mobile/tablet navigation icons use one consistent icon column.
   Only affects the drawer navigation at tablet/mobile widths. */
@media (max-width: 1100px) {
  .header-nav .header-nav-item {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
    justify-content: initial !important;
    text-align: left !important;
  }
  .header-nav .header-nav-item > .nav-icon {
    grid-column: 1 !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    text-align: center !important;
  }
  .header-nav .header-nav-item > span:not(.nav-icon),
  .header-nav .header-nav-item > .nav-label {
    grid-column: 2 !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}


/* Auto-detected category submenu: keep dropdown controls inside the nav layout. */
.nav-category-wrap{position:relative;display:inline-flex;align-items:center;min-width:0;}
.nav-category-wrap>.header-nav-item{flex:0 1 auto;min-width:0;}
.nav-submenu-toggle{display:inline-grid;place-items:center;flex:0 0 24px;width:24px;min-width:24px;height:28px;margin:0 3px 0 -5px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:13px;line-height:1;cursor:pointer;}
.nav-submenu-toggle span{display:block;transition:transform .18s ease;}
.nav-category-wrap.submenu-open .nav-submenu-toggle span{transform:rotate(180deg);}
.nav-submenu-toggle:hover{background:rgba(23,105,210,.12);color:var(--text);}
.nav-submenu{position:absolute;z-index:10020;top:calc(100% + 6px);left:0;display:flex;flex-direction:column;gap:3px;width:max-content;min-width:210px;max-width:min(320px,80vw);max-height:60vh;overflow:auto;margin:0;padding:7px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 12px 32px rgba(20,30,50,.18);}
.nav-submenu[hidden]{display:none!important;}
.nav-submenu-item{display:block;width:100%;min-width:0;padding:9px 11px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:13px;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer;}
.nav-submenu-item:hover{background:rgba(23,105,210,.12);color:var(--text);}
.nav-submenu-all{font-weight:700;}
.nav-folder-node{min-width:0;}
.nav-folder-row{display:flex;align-items:center;gap:3px;min-width:0;}
.nav-folder-link{flex:1 1 auto;min-width:0;}
.nav-folder-toggle{display:inline-grid;place-items:center;flex:0 0 28px;width:28px;height:30px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;}
.nav-folder-toggle span{display:block;transition:transform .18s ease;}
.nav-folder-node.folder-expanded>.nav-folder-row>.nav-folder-toggle span{transform:rotate(180deg);}
.nav-folder-toggle:hover{background:rgba(23,105,210,.12);color:var(--text);}
.nav-folder-children{margin:2px 0 5px 13px;padding-left:8px;border-left:1px solid var(--line);}
.nav-folder-children[hidden]{display:none!important;}
.nav-submenu-content{font-size:12px;padding-top:7px;padding-bottom:7px;}
@media(max-width:1100px){
 .header-nav .nav-category-wrap{display:grid;width:100%;grid-template-columns:minmax(0,1fr) 32px;align-items:center;column-gap:0;}
 .header-nav .nav-category-wrap>.header-nav-item{grid-column:1;grid-row:1;width:100%!important;min-width:0;flex:0 0 auto!important;padding-right:10px!important;}
 .header-nav .nav-category-wrap>.nav-submenu-toggle{grid-column:2;grid-row:1;justify-self:stretch;width:32px;height:32px;min-width:32px;margin:0;font-size:13px;}
 .header-nav .nav-category-wrap>.nav-submenu{position:static;grid-column:1/-1;grid-row:2;width:100%;max-width:100%;max-height:none;overflow:visible;margin:3px 0 8px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);box-shadow:none;}
 .header-nav .nav-submenu-item{font-size:13px;padding:10px 12px;}
}


/* Palette harmonization: light theme uses education blue; dark theme uses green accents. */
:root{--ml-purple:#1769d2;--ml-blue:#1769d2;--accent2:#1769d2}
.primary-cta{background:linear-gradient(135deg,#287ce0,#1259b8)!important;box-shadow:0 10px 24px #1769d235!important}
.primary-cta:hover{box-shadow:0 14px 28px #1769d240!important}
.art-glow{background:linear-gradient(135deg,#d4e6ff,#c8ddff 58%,#b9ece1)!important}
.disc-center{background:linear-gradient(135deg,#7eb2ff,#b8d8ff)!important}
.art-caption-icon{background:#dceaff!important;color:#1769d2!important}
.home-bottom-banner{background:linear-gradient(110deg,#15365d,#1769d2 70%,#3288df)!important}
.home-bottom-banner .eyebrow{color:#d8e9ff!important}
.banner-chat{color:#174a91!important}
.header-search-result-icon{background:#dceaff!important;color:#1769d2!important}
body[data-theme="dark"]{--accent:#73e0c1;--accent2:#73e0c1;--ml-purple:#73e0c1;--ml-blue:#73e0c1}
body[data-theme="dark"] .primary-cta{background:linear-gradient(135deg,#18876e,#116b57)!important;box-shadow:0 10px 24px #0e8b6c35!important}
body[data-theme="dark"] .home-bottom-banner{background:linear-gradient(110deg,#123d35,#176b59 70%,#21866e)!important}
body[data-theme="dark"] .art-glow{background:linear-gradient(135deg,#26483f,#1b5549 58%,#183d35)!important}
body[data-theme="dark"] .disc-center{background:linear-gradient(135deg,#2a9b7d,#176b59)!important}
body[data-theme="dark"] .art-caption-icon,body[data-theme="dark"] .header-search-result-icon{background:#173c39!important;color:#8ce0cf!important}
body[data-theme="dark"] .banner-chat{color:#155846!important}
body[data-theme="dark"] .feature-lilac .feature-icon,body[data-theme="dark"] .feature-blue .feature-icon{background:#173c39!important;color:#8ce0cf!important}


/* Targeted mobile/tablet header sizing: give the theme switch enough room,
   while keeping the signed-in account chip compact and responsive. Desktop unchanged. */
@media (min-width: 621px) and (max-width: 1100px) {
  .top-actions .theme-toggle {
    box-sizing: border-box !important;
    width: clamp(78px, 9vw, 104px) !important;
    min-width: clamp(78px, 9vw, 104px) !important;
    flex: 0 0 clamp(78px, 9vw, 104px) !important;
    padding-inline: 7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .top-actions .user-chip {
    box-sizing: border-box !important;
    width: clamp(100px, 12vw, 138px) !important;
    min-width: 0 !important;
    max-width: clamp(100px, 12vw, 138px) !important;
    flex: 0 1 clamp(100px, 12vw, 138px) !important;
    padding-inline: 7px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 620px) {
  .top-actions .theme-toggle {
    box-sizing: border-box !important;
    width: clamp(70px, 20vw, 84px) !important;
    min-width: clamp(70px, 20vw, 84px) !important;
    flex: 0 0 clamp(70px, 20vw, 84px) !important;
    padding-inline: 5px !important;
    font-size: clamp(10px, 2.7vw, 12px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .top-actions .user-chip {
    box-sizing: border-box !important;
    width: clamp(78px, 23vw, 104px) !important;
    min-width: 0 !important;
    max-width: clamp(78px, 23vw, 104px) !important;
    flex: 0 1 clamp(78px, 23vw, 104px) !important;
    padding-inline: 5px !important;
    font-size: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Light theme: use a clean white page background throughout; preserve dark mode. */
body:not([data-theme="dark"]),
body:not([data-theme="dark"]) .app-shell,
body:not([data-theme="dark"]) .main,
body:not([data-theme="dark"]) .home-page {
  background: #ffffff !important;
}


/* Thông báo đăng nhập/đăng ký/đăng xuất: chữ xanh dễ nhìn, nổi trên cùng mọi màn hình */
.toast.toast-top{position:fixed;top:calc(16px + env(safe-area-inset-top, 0px));bottom:auto;left:50%;transform:translate(-50%,-12px);z-index:2147483647;max-width:calc(100vw - 24px);width:max-content;text-align:center;color:#087f5b!important;background:#ecfdf5!important;border:1px solid #34d399!important;font-weight:700;box-shadow:0 8px 32px rgba(5,150,105,.22)}
.toast.toast-top.show{opacity:1;transform:translate(-50%,0)}
body[data-theme="dark"] .toast.toast-top{color:#6ee7b7!important;background:#102d26!important;border-color:#10b981!important}


/* Hide the greeting permanently while a conversation is active, freeing the chat history area. */
.chat-panel.has-messages #welcome { display: none !important; }
.chat-panel.has-messages #conversation { display: block !important; flex: 1 1 0 !important; min-height: 0 !important; }

/* Logo Mỹ Linh - Âm Nhạc: cân đối header desktop/mobile và chatbox */
.top-brand .brand-logo-image{display:block;flex:0 0 42px;width:42px;height:42px;object-fit:contain;object-position:center;border-radius:10px;}
.chat-panel-brand .chat-brand-logo{display:block;flex:0 0 42px;width:42px;height:42px;object-fit:contain;object-position:center;border-radius:10px;}
@media(max-width:620px){.top-brand .brand-logo-image{flex-basis:36px;width:36px;height:36px}.top-brand{gap:8px}.top-brand strong{max-width:clamp(105px,34vw,155px);font-size:clamp(11px,3.2vw,14px)}}
@media(max-width:420px){.top-brand .brand-logo-image{flex-basis:32px;width:32px;height:32px}.top-brand strong{max-width:105px;font-size:11px}.chat-panel-brand .chat-brand-logo{flex-basis:38px;width:38px;height:38px}}


/* Logo replacement: preserve layout while displaying the supplied transparent badge */
.top-brand .brand-logo-image,.chat-panel-brand .chat-brand-logo{object-fit:contain;object-position:center;background:transparent;border-radius:0;}
.chat-launcher .launcher-logo-image{display:block;width:42px;height:42px;flex:0 0 42px;object-fit:contain;object-position:center;background:transparent;border-radius:0;}
@media(max-width:620px){.chat-launcher .launcher-logo-image{width:38px;height:38px;flex-basis:38px;}}

/* File-type badges and optional cover images for uploaded content. */
.file-type-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#e7f2ff,#f1eaff);font-size:23px;box-shadow:inset 0 0 0 1px rgba(31,91,170,.10)}
.content-title-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;min-width:0}.content-title-row h3{min-width:0;overflow-wrap:anywhere}
.content-type-icon{width:40px;height:40px}
.content-thumbnail{display:block;width:100%;max-height:210px;object-fit:cover;border-radius:13px;margin:0 0 14px;border:1px solid var(--line);background:var(--panel2)}
.cms-item-label{display:flex;align-items:center;gap:11px;min-width:0;flex:1}.cms-item-label>div{min-width:0}.cms-item-label strong{overflow-wrap:anywhere}.cms-item-thumb{width:58px;height:48px;object-fit:cover;border-radius:9px;border:1px solid var(--line);flex:0 0 auto}.cms-list-item .file-type-icon{width:48px;height:48px}
@media(max-width:760px){.content-thumbnail{max-height:190px}.content-title-row{gap:8px}.content-type-icon{width:36px;height:36px;font-size:20px}.cms-item-thumb{width:48px;height:44px}}
/* Responsive embedded media: keep the iframe itself as the topmost touch target.
   Avoid transforms/isolation that can interfere with iframe hit-testing in mobile emulation. */
.content-item .content-embed-frame{display:block;width:100%;height:auto;aspect-ratio:16/9;min-height:220px;border:0;border-radius:12px;background:#0f172a;margin-top:10px;position:relative;z-index:2;pointer-events:auto!important;touch-action:auto!important;-webkit-tap-highlight-color:transparent;flex:none;}
.content-item{position:relative;}
.content-item .content-thumbnail{position:relative;z-index:1;margin-top:8px;margin-bottom:12px;}
@media(max-width:1000px){.content-item .content-embed-frame{display:block;width:100%;height:auto;min-height:220px;aspect-ratio:16/9;position:relative;z-index:2;pointer-events:auto!important;touch-action:auto!important;-webkit-transform:none!important;}}
@media(max-width:600px){.content-item .content-embed-frame{min-height:220px;max-height:none;border-radius:10px;}}

/* Thu nhỏ biểu tượng hiện/ẩn mật khẩu trên đăng nhập và quản trị, giữ nguyên bố cục. */
.password-input-wrap input{padding-right:40px!important}
.password-input-wrap .password-toggle{width:26px;height:26px;right:8px;font-size:12px;line-height:1;padding:0;transform:translateY(-50%)}
.auth-form .password-toggle{font-size:12px}


/* Admin: đồng bộ chữ trên các nút hành động nền xanh (lưu, tải lên, cập nhật, tạo...). */
.admin-card button[type="submit"],
.admin-card form button:not(.theme-toggle):not(.cms-tab),
.admin-card .primary-cta,
.admin-card .save-button,
.admin-card .upload-button,
.admin-card .submit-button,
.admin-card .cms-primary-action {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .01em;
}
@media (max-width: 620px) {
  .admin-card button[type="submit"],
  .admin-card form button:not(.theme-toggle):not(.cms-tab),
  .admin-card .primary-cta,
  .admin-card .save-button,
  .admin-card .upload-button,
  .admin-card .submit-button,
  .admin-card .cms-primary-action {
    font-size: 17px !important;
    min-height: 52px;
  }
}


/* Desktop: balanced login/register tabs; readable without overpowering the form. */
@media (min-width: 1001px) {
  .auth-tabs {
    gap: 10px !important;
  }
  .auth-tab {
    font-size: clamp(16px, 1.05vw, 18px) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    min-height: 54px !important;
    padding: 11px 14px !important;
  }
}


/* Thumbnail covers embedded video; tap to play on desktop, mobile and tablet. */
.content-item .content-video-preview{position:relative;display:block;width:100%;aspect-ratio:16/9;min-height:220px;margin-top:10px;overflow:hidden;border-radius:12px;background:#0f172a;isolation:isolate}
.content-item .content-video-preview>.content-embed-frame,.content-item .content-video-preview>video{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;margin:0;border:0;border-radius:0;z-index:1;object-fit:contain}
.content-item .content-video-cover{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:#0f172a;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow:hidden}
.content-item .content-video-cover img.content-thumbnail{display:block;width:100%;height:100%;max-height:none;object-fit:cover;margin:0;border:0;border-radius:0;pointer-events:none}
.content-item .content-video-play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:76px;height:52px;border-radius:15px;background:#f00020;color:#fff;font:700 28px/1 Arial,sans-serif;padding-left:4px;box-shadow:0 3px 12px #0005;pointer-events:none}
.content-item .content-video-cover:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.content-item .content-native-video-preview>video{object-fit:contain}
@media(max-width:760px){.content-item .content-video-preview{min-height:0;aspect-ratio:16/9}.content-item .content-video-play-mark{width:64px;height:44px;font-size:24px;border-radius:12px}}


/* Targeted fix: soften and balance the chat welcome greeting on desktop, tablet and mobile. */
.chat-panel .welcome h1 {
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.42 !important;
  letter-spacing: -0.35px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  margin: 18px 0 !important;
  text-align: center !important;
}
.chat-panel .welcome h1 span {
  display: inline-block !important;
  margin-top: 2px !important;
  font-size: 0.92em !important;
  line-height: 1.42 !important;
  font-weight: 400 !important;
  letter-spacing: -0.25px !important;
  color: var(--muted) !important;
  opacity: 0.88 !important;
}
@media (max-width: 1000px) {
  .chat-panel .welcome h1 {
    font-size: clamp(20px, 3.2vw, 25px) !important;
    line-height: 1.45 !important;
    margin: 14px 0 !important;
    letter-spacing: -0.2px !important;
  }
  .chat-panel .welcome h1 span {
    font-size: 0.94em !important;
    font-weight: 400 !important;
    opacity: 0.86 !important;
  }
}


/* Final balance adjustment: make the welcome greeting smaller and lighter on all screens. */
.chat-panel .welcome h1 {
  font-size: clamp(17px, 1.45vw, 20px) !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: -0.15px !important;
  margin: 16px 0 !important;
}
.chat-panel .welcome h1 span {
  font-size: 0.78em !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  opacity: 0.76 !important;
}
@media (max-width: 1000px) {
  .chat-panel .welcome h1 {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 14px 0 !important;
    font-weight: 400 !important;
  }
  .chat-panel .welcome h1 span {
    font-size: 0.78em !important;
    line-height: 1.5 !important;
    opacity: 0.76 !important;
  }
}


/* Responsive in-page player for uploaded HTML/ZIP music games */
.uploaded-game-player{position:fixed;inset:0;z-index:100000;display:none;align-items:stretch;justify-content:stretch;padding:0;margin:0;background:#050816;backdrop-filter:none;overflow:hidden}
.uploaded-game-player.is-open{display:flex}
.uploaded-game-player__panel{position:relative;width:100%;height:100%;height:100dvh;height:100svh;min-height:0;margin:0;padding:0;background:#050816;border-radius:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:none}
.uploaded-game-player__status{position:absolute;z-index:2;top:12px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:12px;background:rgba(15,23,42,.88);color:#fff;text-align:center;max-width:calc(100% - 32px)}
.uploaded-game-player__status[hidden]{display:none}
.uploaded-game-player__panel iframe{display:block;position:absolute;inset:0;border:0;width:100%;height:100%;height:100dvh;height:100svh;flex:1 1 auto;background:#050816;min-height:0}
body.game-player-open{overflow:hidden}
.content-game-launch{cursor:pointer;font:inherit}

/* UI polish: align content category icons and headings on one visual baseline. */
.content-browser-grid .content-item .content-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  margin:0 0 14px;
}
.content-browser-grid .content-item .content-title-row .content-type-icon{
  flex:0 0 48px;
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin:0;
}
.content-browser-grid .content-item .content-title-row h3{
  flex:1 1 auto;
  align-self:center;
  min-width:0;
  margin:0;
  line-height:1.25;
  font-size:clamp(18px,1.55vw,22px);
  font-weight:750;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.content-browser-grid .content-item .content-game-launch{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  margin:4px 0 0;
  padding:10px 19px;
  border:1px solid rgba(18,145,125,.22);
  border-radius:14px;
  background:linear-gradient(135deg,#e2f8f1 0%,#eefbf7 100%);
  color:#138c79;
  box-shadow:0 3px 9px rgba(19,140,121,.09),inset 0 1px 0 rgba(255,255,255,.9);
  font-family:inherit;
  font-size:clamp(15px,1.15vw,18px);
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.content-browser-grid .content-item .content-game-launch:hover{
  background:linear-gradient(135deg,#d3f4e9 0%,#e5faf3 100%);
  box-shadow:0 5px 14px rgba(19,140,121,.15);
  transform:translateY(-1px);
}
.content-browser-grid .content-item .content-game-launch:active{transform:translateY(0);box-shadow:0 2px 5px rgba(19,140,121,.1)}
.content-browser-grid .content-item .content-game-launch:focus-visible{outline:3px solid rgba(23,105,210,.35);outline-offset:3px}
@media(max-width:760px){
  .content-browser-grid .content-item .content-title-row{gap:10px;min-height:42px;margin-bottom:12px}
  .content-browser-grid .content-item .content-title-row .content-type-icon{flex-basis:42px;width:42px;height:42px;font-size:21px}
  .content-browser-grid .content-item .content-title-row h3{font-size:18px;line-height:1.3}
  .content-browser-grid .content-item .content-game-launch{min-height:42px;padding:9px 16px;border-radius:12px;font-size:15px}
}


/* Trình xem tài liệu Bài giảng: bố cục cân đối, xem trực tiếp và toàn màn hình */
.content-item .content-document-launch{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:11px 15px;border:1px solid rgba(19,140,121,.25);border-radius:13px;background:rgba(19,140,121,.09);color:var(--accent,#138c79);font:700 15px/1.4 inherit;text-align:center;cursor:pointer;text-decoration:none}
.content-item .content-document-download{display:inline-flex;margin-right:12px}
.lesson-document-viewer{position:fixed;inset:0;z-index:100500;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(12,20,35,.68);backdrop-filter:blur(5px)}
.lesson-document-viewer.is-open{display:flex}
.lesson-document-viewer__panel{display:flex;flex-direction:column;width:min(1200px,100%);height:min(92dvh,1000px);min-height:300px;overflow:hidden;background:var(--panel,#fff);color:var(--text,#1e293b);border:1px solid var(--line,#dbe3f0);border-radius:18px;box-shadow:0 24px 80px #0004}
.lesson-document-viewer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line,#dbe3f0)}
.lesson-document-viewer__title{min-width:0;flex:1;overflow-wrap:anywhere;font-size:17px}
.lesson-document-viewer__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lesson-document-viewer__actions a,.lesson-document-viewer__actions button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 11px;border:1px solid var(--line,#dbe3f0);border-radius:10px;background:var(--panel2,#f1f5f9);color:inherit;text-decoration:none;font:600 13px/1.2 inherit;cursor:pointer}
.lesson-document-viewer__body{flex:1;min-height:0;background:#fff}
.lesson-document-viewer__body iframe{display:block;width:100%;height:100%;min-height:0;border:0;background:#fff}
body.lesson-document-open{overflow:hidden}
.lesson-document-viewer.is-maximized{padding:0}
.lesson-document-viewer.is-maximized .lesson-document-viewer__panel{width:100%;height:100dvh;border-radius:0;max-height:none}
.lesson-document-viewer__panel:fullscreen{width:100vw;height:100vh;max-width:none;max-height:none;border-radius:0}
@media(max-width:700px){.lesson-document-viewer{padding:0}.lesson-document-viewer__panel{width:100%;height:100dvh;max-height:none;border-radius:0;border:0}.lesson-document-viewer__head{padding:10px;gap:8px}.lesson-document-viewer__title{flex-basis:100%;font-size:15px}.lesson-document-viewer__actions{width:100%;gap:6px}.lesson-document-viewer__actions a,.lesson-document-viewer__actions button{flex:1;padding:8px 6px;font-size:12px}}

/* Trình đọc tài liệu chạy tại website, không nhúng Google Docs. */
.lesson-document-viewer__content{height:100%;min-height:0;overflow:auto;background:#f3f6fb;padding:clamp(12px,2vw,28px);color:#1e293b}
.lesson-document-viewer__content>iframe{display:block;width:100%;height:100%;min-height:60vh;border:0;background:#fff}
.lesson-document-status{max-width:760px;margin:8vh auto;padding:28px;border:1px solid #dbe3f0;border-radius:16px;background:#fff;color:#64748b;text-align:center;font:500 16px/1.65 system-ui,sans-serif;white-space:pre-wrap}
.lesson-document-word{max-width:900px;min-height:100%;margin:0 auto;padding:clamp(20px,4vw,56px);background:#fff;box-shadow:0 2px 14px #17255412;font:16px/1.75 Arial,sans-serif;overflow-wrap:anywhere}
.lesson-document-word img{max-width:100%;height:auto}.lesson-document-word table,.lesson-sheet-area table{border-collapse:collapse;max-width:100%;width:max-content;background:#fff}.lesson-document-word td,.lesson-document-word th,.lesson-sheet-area td,.lesson-sheet-area th{border:1px solid #cbd5e1;padding:6px 10px;vertical-align:top}
.lesson-document-text{max-width:1100px;margin:0 auto;padding:24px;background:#fff;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,monospace}
.lesson-sheet-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.lesson-sheet-tabs button{border:1px solid #cbd5e1;border-radius:9px;padding:8px 13px;background:#fff;color:#334155;cursor:pointer}.lesson-sheet-tabs button.active{background:#0f8f7c;color:#fff;border-color:#0f8f7c}.lesson-sheet-area{overflow:auto;background:#fff;padding:12px;border-radius:12px}.lesson-sheet-area td,.lesson-sheet-area th{white-space:pre-wrap;min-width:80px}
.lesson-document-slide{max-width:1000px;margin:0 auto 20px;padding:clamp(18px,3vw,36px);background:#fff;border:1px solid #dbe3f0;border-radius:14px;box-shadow:0 5px 20px #1725540d;white-space:pre-wrap;overflow-wrap:anywhere}.lesson-document-slide h3{margin:0 0 14px;color:#1768cc;font-size:16px;border-bottom:1px solid #e2e8f0;padding-bottom:10px}.lesson-document-slide>div{font:16px/1.8 Arial,sans-serif}
.lesson-document-viewer__body{overflow:hidden}.lesson-document-viewer__body .lesson-document-viewer__content{height:100%;overflow:auto}
@media(max-width:700px){.lesson-document-viewer__content{padding:8px}.lesson-document-word{padding:18px;font-size:14px}.lesson-document-status{margin:6vh 4px;padding:18px;font-size:14px}.lesson-document-slide{padding:16px}}

/* Admin CMS selected-file clear control */
.cms-form .clear-content-file{align-self:flex-start;min-height:0}.clear-content-file{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;border:1px solid #f1b9b9!important;border-radius:999px!important;background:#fff1f1!important;color:#b42318!important;padding:7px 12px!important;font:600 13px inherit;cursor:pointer}.clear-content-file.hidden{display:none!important}


/* 2026-10-16: Header uses the supplied horizontal Mỹ Linh Âm nhạc logo. Keep the existing Hỏi Mỹ Linh portrait identity, optimized for faster loading. */
.topbar .top-brand{display:flex;align-items:center;flex:0 0 auto;min-width:0;gap:0;overflow:visible;}
.topbar .top-brand .brand-logo-image{display:block;width:138px;height:66px;max-width:100%;flex:0 0 auto;object-fit:contain;object-position:left center;border:0;border-radius:0;background:transparent;}
.topbar .top-brand strong{display:none!important;}
@media (min-width:761px) and (max-width:1100px){.topbar>.top-brand{flex:0 0 145px!important;width:145px!important;max-width:145px!important;overflow:visible!important}.topbar>.top-brand .brand-logo-image{width:138px;height:62px;}}
@media (max-width:760px){.topbar .top-brand{flex:0 1 118px!important;width:118px!important;max-width:118px!important;overflow:visible!important}.topbar .top-brand .brand-logo-image{width:116px;height:54px;}}
@media (max-width:420px){.topbar .top-brand{flex-basis:104px!important;width:104px!important;max-width:104px!important}.topbar .top-brand .brand-logo-image{width:102px;height:48px;}}


/* Typography hierarchy refinement: calm, readable content titles and smaller action labels. */
.content-browser-grid .content-item .content-title-row h3{
  font-size:20px;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.3;
}
.content-browser-grid .content-item .content-game-launch{
  font-size:15px;
  font-weight:500;
  line-height:1.25;
  padding:9px 17px;
  min-height:42px;
}
@media(max-width:760px){
  .content-browser-grid .content-item .content-title-row h3{
    font-size:17px;
    font-weight:500;
    line-height:1.3;
  }
  .content-browser-grid .content-item .content-game-launch{
    font-size:14px;
    font-weight:500;
    min-height:39px;
    padding:8px 14px;
  }
}


/* 2026-10-16: Further typography scale refinement — compact, modern website hierarchy. */
.section-heading h2{
  font-size:clamp(24px,2.1vw,29px)!important;
  line-height:1.25!important;
  font-weight:600!important;
  letter-spacing:-.025em!important;
}
.section-heading p:not(.eyebrow){font-size:12px!important;line-height:1.6!important}
.feature-card h3{font-size:16px!important;line-height:1.35!important;font-weight:600!important}
.feature-card p{font-size:12px!important;line-height:1.65!important}
.feature-link{font-size:11px!important;font-weight:600!important}
.feature-link b{font-size:15px!important}
.content-browser-grid .content-item .content-title-row h3{
  font-size:17px!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:0!important;
}
.content-browser-grid .content-item .content-game-launch{
  font-size:13px!important;
  font-weight:500!important;
  min-height:38px!important;
  padding:8px 14px!important;
  border-radius:12px!important;
}
@media(max-width:760px){
  .section-heading h2{font-size:23px!important;line-height:1.3!important}
  .section-heading p:not(.eyebrow){font-size:12px!important}
  .feature-card h3{font-size:15px!important}
  .feature-card p{font-size:12px!important}
  .feature-link{font-size:11px!important}
  .content-browser-grid .content-item .content-title-row h3{font-size:15px!important;font-weight:500!important}
  .content-browser-grid .content-item .content-game-launch{font-size:12px!important;min-height:36px!important;padding:7px 12px!important}
}


/* 2026-10-16: Dark-mode folder filter contrast fix. Keep the light theme unchanged. */
body[data-theme="dark"] #contentBrowser .content-folder-filter select{
  background-color:#11182b!important;
  color:#eef3ff!important;
  border-color:#33415d!important;
  color-scheme:dark;
}
body[data-theme="dark"] #contentBrowser .content-folder-filter select option{
  background-color:#11182b!important;
  color:#eef3ff!important;
}
body[data-theme="dark"] #contentBrowser .content-folder-filter label{
  color:#dbe6fa!important;
}


/* Full-width, responsive footer inspired by the supplied reference image. */
.home-footer{display:block;max-width:none;width:100vw;margin:34px 0 0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:34px max(24px,calc((100vw - 1280px)/2)) 16px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--bg));color:var(--muted);font-size:14px;box-sizing:border-box;position:relative;left:auto;right:auto}
.footer-main{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:minmax(250px,1.45fr) repeat(3,minmax(145px,1fr));gap:clamp(24px,4vw,64px);align-items:start}
.footer-brand{min-width:0}
.footer-brand-logo{display:block;width:min(100%,310px);height:auto;max-height:100px;object-fit:contain;object-position:left center;margin:0 0 22px}
.footer-brand .admin-footer-logo{display:block;width:min(100%,310px);max-width:310px;max-height:100px;height:auto;object-fit:contain;object-position:left center;margin:0 0 14px}
.footer-description{margin:0 0 20px;max-width:360px;color:var(--muted);font-size:15px;line-height:1.7}
.footer-chat-link,.footer-contact-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--text);font-family:inherit;font-size:13px;font-weight:600;line-height:1.3;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}
.footer-chat-link:hover,.footer-contact-button:hover{transform:translateY(-1px);border-color:var(--accent);background:var(--panel2)}
.footer-chat-link>span:first-child{color:var(--accent)}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.footer-column h2{margin:2px 0 7px;color:var(--text);font-family:inherit;font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.footer-column>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:230px;padding:0;border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:14px;font-weight:400;line-height:1.6;text-align:left;cursor:pointer;transition:color .18s}
.footer-column>button span{opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s;color:var(--accent)}
.footer-column>button:hover{color:var(--text)}
.footer-column>button:hover span{opacity:1;transform:translateX(0)}
.footer-column p{margin:0;max-width:260px;color:var(--muted);font-size:13px;line-height:1.7}
.footer-contact-button{margin-top:4px;min-height:38px;padding:8px 13px;font-size:12px}
.footer-bottom{max-width:1280px;margin:30px auto 0;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;line-height:1.6}
body[data-theme="dark"] .home-footer{background:linear-gradient(180deg,#10182a,var(--bg));border-top-color:var(--line)}
body[data-theme="dark"] .footer-brand-logo{filter:drop-shadow(0 2px 8px #0002)}
@media(max-width:900px){.home-footer{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:30px 24px 16px}.footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px}.footer-brand{grid-column:1/-1}.footer-brand-logo{width:min(100%,280px);max-height:90px}.footer-description{margin-bottom:14px}}
@media(max-width:560px){.home-footer{width:100vw;margin-top:26px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:26px 18px 14px}.footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.footer-brand{grid-column:1/-1}.footer-brand-logo{width:min(100%,250px);max-height:82px;margin-bottom:14px}.footer-description{font-size:13px;line-height:1.65}.footer-column{gap:10px}.footer-column h2{font-size:14px;margin-bottom:4px}.footer-column>button{font-size:13px;line-height:1.5}.footer-column p{font-size:12px}.footer-chat-link,.footer-contact-button{font-size:12px;min-height:38px;padding:8px 12px}.footer-bottom{margin-top:24px;padding-top:12px;flex-direction:column;gap:4px;font-size:11px}}

/* Footer social links and copyright */
.footer-social-links{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.footer-social{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;text-decoration:none;box-shadow:0 5px 12px #1b3d681a;transition:transform .18s,filter .18s;border:1px solid #ffffff80;box-sizing:border-box}
.footer-social:hover{transform:translateY(-2px);filter:brightness(1.06)}
.footer-social svg{width:22px;height:22px;display:block}
.footer-social.facebook{background:#0866ff;color:#fff}
.footer-social.youtube{background:#f52222;color:#fff}
.footer-social.zalo{background:#eaf5ff;color:#0878d1;border:1px solid #b9dcff;font-family:Arial,sans-serif;font-weight:800;font-size:12px}
.footer-social[aria-disabled="true"]{cursor:default;opacity:.92}
.footer-copyright{display:inline-flex;align-items:center;gap:10px}
@media(max-width:560px){.footer-social{width:40px;height:40px}.footer-social-links{gap:10px;margin-bottom:14px}.footer-copyright{flex-wrap:wrap;gap:7px}}

/* Header brand is a home link; keep its original visual appearance. */
.top-brand[href="/"] { color: inherit; text-decoration: none; cursor: pointer; }
.top-brand[href="/"]:focus-visible { outline: 2px solid var(--accent, #246fe5); outline-offset: 4px; border-radius: 6px; }

/* 2026-10-16: Make the header brand visibly larger than the footer logo. */
@media (min-width:1101px){.topbar .top-brand .brand-logo-image{width:170px;height:74px}.topbar .top-brand{flex:0 0 170px;}}
@media (min-width:761px) and (max-width:1100px){.topbar>.top-brand{flex:0 0 158px!important;width:158px!important;max-width:158px!important}.topbar>.top-brand .brand-logo-image{width:150px;height:66px;}}
.footer-brand-logo,.footer-brand .admin-footer-logo{width:min(100%,195px);max-width:195px;max-height:72px;}
@media(max-width:900px){.footer-brand-logo,.footer-brand .admin-footer-logo{width:min(100%,185px);max-width:185px;max-height:68px}}
@media(max-width:560px){.footer-brand-logo,.footer-brand .admin-footer-logo{width:min(100%,170px);max-width:170px;max-height:62px}}

/* Admin CMS: collapsible sections for long forms */
.admin-accordion{grid-column:1/-1;min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;margin:0 0 10px;}
.admin-accordion>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:13px 16px;cursor:pointer;list-style:none;font-size:14px;font-weight:700;color:var(--text);background:var(--panel2);user-select:none;}
.admin-accordion>summary::-webkit-details-marker{display:none;}
.admin-accordion>summary::before{content:"›";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--line);border-radius:7px;font-size:21px;line-height:1;transform:rotate(0deg);transition:transform .18s ease;background:var(--panel);}
.admin-accordion[open]>summary::before{transform:rotate(90deg);}
.admin-accordion[open]>summary{border-bottom:1px solid var(--line);}
.admin-accordion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px;}
.admin-accordion-grid .wide-field{grid-column:1/-1;}
.cms-form>.admin-accordion{align-self:start;}
.cms-form>.appearance-save-button{grid-column:1/-1;width:100%;}
#cmsAccounts>.admin-accordion,#cmsFolders>.admin-accordion{margin:0 0 14px;}
#cmsAccounts .admin-accordion .cms-form{padding:16px;}
#cmsFolders .admin-accordion .cms-form{padding:16px;}
.admin-accordion .admin-table-wrap{padding:8px 14px 14px;}
@media(max-width:760px){.admin-accordion-grid{grid-template-columns:1fr;padding:12px;}.admin-accordion-grid .wide-field{grid-column:auto;}.admin-accordion>summary{padding:12px;font-size:13px;}}


/* Latest published content directly beneath the home banner. */
.latest-posts-section{padding-top:28px;padding-bottom:34px;border-bottom:1px solid var(--line);}
.latest-posts-heading{align-items:center;gap:18px;}
.latest-posts-view-all{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:9px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease;}
.latest-posts-view-all:hover{border-color:var(--accent2);transform:translateY(-1px);}
.latest-posts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px;}
.latest-post-card{min-width:0;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.latest-post-card:hover{border-color:var(--accent2);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.08);}
.latest-post-card-top{display:flex;align-items:center;gap:11px;min-width:0;}
.latest-post-thumb{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;overflow:hidden;border-radius:13px;border:1px solid var(--line);background:var(--panel2);font-size:25px;}
.latest-post-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.latest-post-copy{min-width:0;flex:1;}
.latest-post-category{display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.2px;}
.latest-post-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--text);font-size:15px;line-height:1.4;font-weight:600;overflow-wrap:anywhere;}
.latest-post-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;color:var(--muted);font-size:12px;line-height:1.65;overflow-wrap:anywhere;}
.latest-post-date{margin-top:auto;color:var(--muted);font-size:11px;}
.latest-posts-status{grid-column:1/-1;margin:0;padding:18px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:13px;}
.latest-posts-empty{grid-column:1/-1;}
@media(max-width:900px){.latest-posts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.latest-posts-section{padding-top:22px;padding-bottom:24px;}.latest-posts-heading{align-items:flex-start;}.latest-posts-view-all{min-height:36px;padding:8px 10px;font-size:12px;white-space:nowrap;}.latest-posts-grid{grid-template-columns:1fr;gap:11px;margin-top:15px;}.latest-post-card{padding:13px;border-radius:15px;}.latest-post-thumb{width:46px;height:46px;flex-basis:46px;font-size:22px;}.latest-post-title{font-size:14px;}}

.latest-posts-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:18px;}
.latest-posts-page-button{min-width:36px;min-height:35px;padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease;}
.latest-posts-page-button:hover:not(:disabled){border-color:var(--accent2);}
.latest-posts-page-button.is-active{background:var(--accent);border-color:var(--accent);color:#fff;}
.latest-posts-page-button:disabled{opacity:.4;cursor:not-allowed;}
.latest-posts-page-dots{padding:0 2px;color:var(--muted);font-size:13px;}
.latest-posts-page-status{flex-basis:100%;margin-top:4px;text-align:center;color:var(--muted);font-size:12px;}
@media(max-width:600px){.latest-posts-pagination{gap:5px;margin-top:14px;}.latest-posts-page-button{min-width:32px;min-height:32px;padding:6px 8px;font-size:11px;}.latest-posts-page-status{font-size:11px;}}


/* In-app image viewer with an explicit close control; keeps the previous page in place. */
.content-image-launch{cursor:zoom-in;outline-offset:3px}
.content-image-viewer{position:fixed;inset:0;z-index:100600;display:none;align-items:center;justify-content:center;padding:54px 20px 20px;background:rgba(0,0,0,.94);backdrop-filter:blur(3px)}
.content-image-viewer.is-open{display:flex}
.content-image-viewer__stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.content-image-viewer__image{display:block;max-width:min(94vw,1500px);max-height:calc(100dvh - 84px);width:auto;height:auto;object-fit:contain;border-radius:4px;box-shadow:0 12px 48px #0008}
.content-image-viewer__close{position:absolute;top:18px;right:20px;z-index:1;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);border-radius:50%;background:rgba(20,25,35,.78);color:#fff;font:700 25px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 4px 18px #0005}
.content-image-viewer__close:hover{background:#1769d2}
.content-image-viewer-open{overflow:hidden}
@media(max-width:700px){.content-image-viewer{padding:58px 8px 8px}.content-image-viewer__close{top:10px;right:10px;width:42px;height:42px}.content-image-viewer__image{max-width:100%;max-height:calc(100dvh - 66px)}}


/* 2026-10-16: Improve dark-mode contrast for the music-game feature icon. */
body[data-theme="dark"] .feature-peach .feature-icon{background:#173c39!important;color:#8ce0cf!important}

/* 2026-10-16: Brighten the music-game controller icon in both light and dark themes. */
.feature-peach .feature-icon{
  background:linear-gradient(135deg,#d8fff3 0%,#a7f0df 100%)!important;
  color:#087f69!important;
  filter:saturate(1.18) brightness(1.04);
  box-shadow:0 5px 16px rgba(16,185,129,.18)!important;
}
body[data-theme="dark"] .feature-peach .feature-icon{
  background:linear-gradient(135deg,#236e61 0%,#174e46 100%)!important;
  color:#b8ffed!important;
  filter:saturate(1.2) brightness(1.12);
  box-shadow:0 5px 18px rgba(45,212,191,.2)!important;
}

/* Fix: align the Home icon visually with the "Trang chủ" label on all screen sizes. */
.header-nav .header-nav-item#goHome > .nav-icon.nav-home {
  position: relative !important;
  top: -2px !important;
  transform: none !important;
  line-height: 1 !important;
  align-self: center !important;
}

/* Targeted fix 2026-10-17: remove only the blue box behind the floating “Hỏi Mỹ Linh” launcher. Keep the logo, label, position, and click behavior. */
.chat-launcher, .chat-launcher:hover { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; color: #1769d2 !important; }


/* Merged three-banner carousel styles; keep existing full homepage/admin styling. */
/* Three-slide homepage hero carousel */
.hero-carousel{touch-action:pan-y;position:relative;isolation:isolate;overflow:hidden;border-radius:28px;min-height:330px;background:linear-gradient(135deg,#e8f3ff,#f7fbff 55%,#dff8f2);box-shadow:0 18px 50px #1b5fa012;border:1px solid #dce9f8}
.hero-slide-visual{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .7s ease,transform 5.8s ease;pointer-events:none}
.hero-slide-visual.active{opacity:1;transform:scale(1);z-index:1}
.hero-slide-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-carousel-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 27%,rgba(255,255,255,.22) 56%,rgba(255,255,255,0) 100%)}
.hero-carousel-caption{position:absolute;z-index:3;left:16px;bottom:18px;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid #ffffffc7;background:#ffffffdf;backdrop-filter:blur(12px);border-radius:15px;box-shadow:0 12px 30px #263b5b18;max-width:calc(100% - 80px)}
.hero-carousel-caption-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#dceaff;color:#1769d2;font-size:22px;flex:0 0 34px}
.hero-carousel-caption strong,.hero-carousel-caption small{display:block}.hero-carousel-caption strong{font-size:11px;color:#24324c}.hero-carousel-caption small{font-size:9px;color:#71809a;margin-top:4px}
.hero-slide-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:36px;height:36px;border:1px solid #ffffffc9;border-radius:50%;background:#ffffffd9;color:#1b5db4;font-size:25px;line-height:1;cursor:pointer;box-shadow:0 5px 18px #203c6018;opacity:.82;transition:opacity .2s,transform .2s}.hero-slide-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.07)}.hero-slide-arrow.prev{left:12px}.hero-slide-arrow.next{right:12px}
.hero-slide-dots{position:absolute;z-index:4;right:17px;bottom:20px;display:flex;gap:6px}.hero-slide-dots button{width:8px;height:8px;padding:0;border:0;border-radius:9px;background:#ffffffd9;box-shadow:0 1px 5px #243b5a55;cursor:pointer;transition:width .2s,background .2s}.hero-slide-dots button.active{width:23px;background:#1769d2}
body[data-theme="dark"] .hero-carousel{border-color:#263a57;background:#101c32}body[data-theme="dark"] .hero-carousel-shade{background:linear-gradient(90deg,rgba(12,22,40,.97) 0%,rgba(12,22,40,.85) 27%,rgba(12,22,40,.22) 58%,transparent 100%)}body[data-theme="dark"] .hero-carousel-caption{background:#14243bde;border-color:#ffffff22}body[data-theme="dark"] .hero-carousel-caption strong{color:#edf4ff}body[data-theme="dark"] .hero-carousel-caption small{color:#a8b8d2}body[data-theme="dark"] .hero-slide-arrow{background:#152640e8;color:#cfe2ff;border-color:#ffffff22}
@media(max-width:900px){.hero-carousel{min-height:280px;border-radius:22px}.hero-carousel-caption{left:12px;bottom:14px}}@media(max-width:620px){.hero-carousel{min-height:235px;margin:5px 0 10px;border-radius:19px}.hero-slide-visual img{object-position:58% center}.hero-carousel-shade{background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.65) 36%,rgba(255,255,255,.08) 80%)}body[data-theme="dark"] .hero-carousel-shade{background:linear-gradient(90deg,rgba(12,22,40,.92),rgba(12,22,40,.58) 36%,rgba(12,22,40,.1) 80%)}.hero-carousel-caption{left:9px;bottom:10px;padding:8px 10px;gap:8px}.hero-carousel-caption strong{font-size:10px}.hero-carousel-caption small{font-size:8px}.hero-slide-arrow{width:30px;height:30px;font-size:21px}.hero-slide-arrow.prev{left:7px}.hero-slide-arrow.next{right:7px}.hero-slide-dots{right:10px;bottom:19px;gap:5px}.hero-slide-dots button{width:7px;height:7px}.hero-slide-dots button.active{width:18px}}
@media(prefers-reduced-motion:reduce){.hero-slide-visual,.hero-slide-arrow,.hero-slide-dots button{transition:none}}




/* Targeted fix: dark theme only — make the “Hỏi Mỹ Linh” launcher label green. */
body[data-theme="dark"] .chat-launcher, body[data-theme="dark"] .chat-launcher:hover { color: #22c55e !important; }

/* Admin: configurable hero banner list */
.admin-banner-manager{padding:14px 16px 16px}.admin-banner-help{margin:0 0 12px;color:var(--muted);font-size:13px;line-height:1.55}.admin-banner-slides{display:grid;gap:12px}.admin-banner-slide{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:12px}.admin-banner-slide-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--text)}.admin-banner-slide-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-banner-slide-fields label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:13px;font-weight:650}.admin-banner-slide-fields label:last-child{grid-column:1/-1}.admin-banner-slide-fields input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);padding:10px;font:500 14px inherit}.admin-banner-slide-fields small{font-size:12px;color:var(--muted)}.admin-banner-remove{border:1px solid #efb8b8;border-radius:9px;background:#fff1f1;color:#b42318;padding:7px 10px;cursor:pointer}.admin-banner-remove:disabled{opacity:.45;cursor:not-allowed}.admin-banner-add{margin-top:12px;border:1px dashed var(--accent,#1769d2);border-radius:10px;background:var(--panel2);color:var(--accent,#1769d2);padding:10px 14px;font-weight:700;cursor:pointer}.admin-banner-add:disabled{opacity:.5;cursor:not-allowed}@media(max-width:760px){.admin-banner-manager{padding:12px}.admin-banner-slide-fields{grid-template-columns:1fr}.admin-banner-slide-fields label:last-child{grid-column:auto}}


/* Large centered video viewer, matching the Hoang Hue Music video modal behavior. */
.content-video-viewer{position:fixed;inset:0;z-index:12000;display:none;align-items:center;justify-content:center;padding:clamp(10px,3vw,36px);background:rgba(15,23,42,.62);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.content-video-viewer.is-open{display:flex}
.content-video-viewer__panel{position:relative;display:flex;flex-direction:column;width:min( min(1180px,96vw), calc(96vh * 16 / 9));max-width:100%;max-height:94vh;overflow:hidden;background:var(--surface,#fff);color:var(--text,#172033);border:1px solid var(--border,#dbe3f0);border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.34)}
.content-video-viewer__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--border,#dbe3f0);flex:none}
.content-video-viewer__title{font-size:clamp(17px,2vw,24px);font-weight:750;line-height:1.3}
.content-video-viewer__close{flex:none;width:42px;height:42px;border:1px solid var(--border,#dbe3f0);border-radius:50%;background:var(--surface,#fff);color:inherit;font-size:22px;cursor:pointer}
.content-video-viewer__stage{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;max-height:calc(94vh - 145px);min-height:220px;background:#05070b}
.content-video-viewer__frame,.content-video-viewer__native{display:block;width:100%;height:100%;border:0;object-fit:contain;background:#05070b}
.content-video-viewer__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px;color:var(--muted,#64748b);font-size:13px;flex-wrap:wrap}
.content-video-viewer__open{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:var(--accent,#1769d2);color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}
.content-video-launch{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;min-height:180px;margin-top:10px;padding:0;border:0;border-radius:12px;overflow:hidden;background:#0f172a;cursor:pointer}
.content-video-launch-thumb{display:block;width:100%;height:100%;max-height:none;object-fit:cover;margin:0;border:0;border-radius:0;pointer-events:none}
.content-video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font-size:52px;background:radial-gradient(circle at center,#244a7c,#0f172a 70%)}
.content-video-launch .content-video-play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:76px;height:54px;border-radius:15px;background:#e11d48;color:#fff;font-size:26px;box-shadow:0 8px 28px #0006;pointer-events:none}
.content-video-launch:hover .content-video-play-mark{background:#c11235;transform:translate(-50%,-50%) scale(1.06)}
body.content-video-viewer-open{overflow:hidden}
@media(max-width:640px){.content-video-viewer{padding:8px}.content-video-viewer__panel{width:100%;max-height:96vh;border-radius:14px}.content-video-viewer__head{padding:10px 12px}.content-video-viewer__close{width:38px;height:38px}.content-video-viewer__stage{min-height:0;max-height:calc(96vh - 145px);aspect-ratio:16/9}.content-video-viewer__foot{padding:10px 12px}.content-video-viewer__foot span{font-size:12px}.content-video-launch{min-height:0}}
@media(prefers-color-scheme:dark){.content-video-viewer__panel{background:var(--surface,#111827);color:var(--text,#f8fafc)}}

/* Targeted dark-mode contrast fix for the large video popup: readable title, footer text and close control. */
body[data-theme="dark"] .content-video-viewer__panel {
  background: #101827 !important;
  color: #f3f7ff !important;
  border-color: #3b4b66 !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.62) !important;
}
body[data-theme="dark"] .content-video-viewer__head {
  background: #101827 !important;
  border-bottom-color: #334155 !important;
}
body[data-theme="dark"] .content-video-viewer__title {
  color: #f8fafc !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
body[data-theme="dark"] .content-video-viewer__close {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: #64748b !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
body[data-theme="dark"] .content-video-viewer__close:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #94a3b8 !important;
}
body[data-theme="dark"] .content-video-viewer__foot {
  background: #101827 !important;
  color: #cbd5e1 !important;
}
body[data-theme="dark"] .content-video-viewer__open {
  background: #0f9f82 !important;
  color: #ffffff !important;
}

/* Hierarchical folder filter: match the expandable tree used in the header menus. */
#contentBrowser .folder-tree-picker{position:relative;display:inline-block;min-width:min(360px,100%);max-width:100%;color:var(--text);}
#contentBrowser .folder-tree-picker__button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--border,#dbe3f0);border-radius:12px;background:var(--panel,#fff);color:var(--text,#1f2937);font:inherit;text-align:left;cursor:pointer;}
#contentBrowser .folder-tree-picker__chevron{transition:transform .18s ease;font-size:20px;}
#contentBrowser .folder-tree-picker.is-open .folder-tree-picker__chevron{transform:rotate(180deg);}
#contentBrowser .folder-tree-picker__panel{position:absolute;z-index:80;top:calc(100% + 7px);left:0;width:max-content;min-width:100%;max-width:min(520px,calc(100vw - 36px));max-height:min(420px,60vh);overflow:auto;padding:8px;border:1px solid var(--border,#dbe3f0);border-radius:15px;background:var(--panel,#fff);color:var(--text,#1f2937);box-shadow:0 16px 38px rgba(15,23,42,.18);}
#contentBrowser .folder-tree-picker__panel[hidden]{display:none!important;}
#contentBrowser .folder-tree-picker__row{display:flex;align-items:center;gap:4px;min-width:0;}
#contentBrowser .folder-tree-picker__toggle,#contentBrowser .folder-tree-picker__toggle-spacer{flex:0 0 30px;width:30px;height:34px;}
#contentBrowser .folder-tree-picker__toggle{display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-size:19px;}
#contentBrowser .folder-tree-picker__toggle span{transition:transform .18s ease;}
#contentBrowser .folder-tree-picker__node.is-expanded>.folder-tree-picker__row .folder-tree-picker__toggle span{transform:rotate(180deg);}
#contentBrowser .folder-tree-picker__toggle:hover{background:rgba(23,105,210,.12);color:var(--text);}
#contentBrowser .folder-tree-picker__item{display:block;flex:1 1 auto;min-width:0;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;white-space:normal;overflow-wrap:anywhere;cursor:pointer;font:inherit;}
#contentBrowser .folder-tree-picker__item:hover{background:rgba(23,105,210,.10);}
#contentBrowser .folder-tree-picker__item[aria-selected="true"]{background:rgba(23,105,210,.15);font-weight:700;}
#contentBrowser .folder-tree-picker__children{margin:2px 0 4px 14px;padding-left:8px;border-left:1px solid var(--line,#dbe3f0);}
#contentBrowser .folder-tree-picker__children[hidden]{display:none!important;}
@media(max-width:600px){#contentBrowser .folder-tree-picker{width:min(100%,420px);}#contentBrowser .folder-tree-picker__panel{width:100%;max-width:calc(100vw - 40px);}}
body[data-theme="dark"] #contentBrowser .folder-tree-picker__button,body[data-theme="dark"] #contentBrowser .folder-tree-picker__panel{background:#11182b;color:#eef3ff;border-color:#33415d;}
body[data-theme="dark"] #contentBrowser .folder-tree-picker__toggle{color:#b9c8e3;}
body[data-theme="dark"] #contentBrowser .folder-tree-picker__children{border-left-color:#33415d;}

/* Fix: keep nested-folder chevrons inline with their parent folder labels. */
.nav-folder-node{min-width:0;width:100%;}
.nav-folder-row{display:flex;align-items:center;gap:4px;min-width:0;width:100%;}
.nav-folder-row>.nav-folder-link{flex:1 1 auto;width:auto;min-width:0;}
.nav-folder-row>.nav-folder-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;min-width:30px;height:32px;margin:0;padding:0;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:15px;line-height:1;cursor:pointer;appearance:none;-webkit-appearance:none;}
.nav-folder-toggle span{display:block;transition:transform .18s ease;}
.nav-folder-node.folder-expanded>.nav-folder-row>.nav-folder-toggle span{transform:rotate(180deg);}
.nav-folder-toggle:hover{background:rgba(23,105,210,.12);color:var(--text);}
.nav-folder-children{margin:2px 0 4px 14px;padding-left:8px;border-left:1px solid var(--line);min-width:0;}
.nav-folder-children[hidden]{display:none!important;}
.nav-folder-children .nav-folder-link,.nav-folder-children .nav-submenu-content{font-size:.94em;}

/* Final typography polish: folder parents stay prominent; nested folders are smaller and softer. */
.nav-folder-row>.nav-folder-link{font-size:13px!important;font-weight:650!important;color:var(--text)!important;}
.nav-folder-children .nav-folder-link{font-size:11.5px!important;font-weight:400!important;color:var(--muted)!important;}
.nav-folder-children .nav-folder-link:hover{color:var(--text)!important;}
#contentBrowser .folder-tree-picker__row>.folder-tree-picker__item{font-size:16px;font-weight:650;color:var(--text);}
#contentBrowser .folder-tree-picker__children .folder-tree-picker__item{font-size:14px;font-weight:400;color:var(--muted);}
#contentBrowser .folder-tree-picker__children .folder-tree-picker__item:hover{color:var(--text);}
body[data-theme="dark"] #contentBrowser .folder-tree-picker__children .folder-tree-picker__item{color:#aab8d0;}
body[data-theme="dark"] #contentBrowser .folder-tree-picker__children .folder-tree-picker__item:hover{color:#eef3ff;}

/* Typography correction: child folders must be smaller than their parent labels. */
.nav-submenu .nav-folder-row > .nav-folder-link,
.nav-submenu > .nav-folder-node > .nav-folder-row > .nav-folder-link {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.nav-submenu .nav-folder-children .nav-folder-row > .nav-folder-link {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
}
.nav-submenu .nav-folder-children .nav-folder-row > .nav-folder-link:hover {
  color: var(--text) !important;
}
#contentBrowser .folder-tree-picker__row > .folder-tree-picker__item {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
#contentBrowser .folder-tree-picker__children .folder-tree-picker__row > .folder-tree-picker__item {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
}
#contentBrowser .folder-tree-picker__children .folder-tree-picker__row > .folder-tree-picker__item:hover {
  color: var(--text) !important;
}
body[data-theme="dark"] #contentBrowser .folder-tree-picker__children .folder-tree-picker__row > .folder-tree-picker__item {
  color: #aab8d0 !important;
}
body[data-theme="dark"] #contentBrowser .folder-tree-picker__children .folder-tree-picker__row > .folder-tree-picker__item:hover {
  color: #eef3ff !important;
}

/* 2026-10-17: deepest level (individual songs) is visually smaller than folders. */
.nav-submenu .nav-folder-children > .nav-submenu-content,
.nav-submenu > .nav-submenu-content {
  font-size: 11px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  padding-top: 7px;
  padding-bottom: 7px;
}
.nav-submenu .nav-folder-children > .nav-submenu-content:hover,
.nav-submenu > .nav-submenu-content:hover {
  color: var(--text) !important;
}


/* Targeted mobile search dropdown fix: render the search panel below the sticky header
   and keep its field/results fully visible and scrollable on small screens. */
@media (max-width: 900px) {
  .header-search-panel:not(.hidden) {
    position: fixed !important;
    top: var(--header-search-top, 190px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--header-search-top, 190px) - 12px) !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 10050 !important;
  }
  .header-search-panel:not(.hidden) .header-search-results {
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Follow-up correction: keep the mobile search panel below the live sticky header
   even after navigating back from a song/player or when the viewport changes. */
@media (max-width: 900px) {
  #headerSearchPanel:not(.hidden) {
    z-index: 10050 !important;
    visibility: visible !important;
    display: block !important;
    scroll-margin-top: var(--header-search-top, 190px);
  }
  #headerSearchPanel:not(.hidden) .header-search-field {
    position: relative;
    min-width: 0;
  }
  #headerSearchPanel:not(.hidden) .header-search-field input {
    width: 0;
  }
}


/* Requested mobile-only placement: bring Back to Top closer to the fixed Hỏi Mỹ Linh launcher.
   Desktop/tablet-wide placement remains unchanged. */
@media (max-width: 760px) {
  .back-to-top {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 68px)) !important;
  }
}


/* =========================================================
   Typography refinement — balanced, readable, responsive
   Scope: text sizing/line-height/weight only; preserve layout,
   colors, component behavior, and existing display headings.
   ========================================================= */
:root {
  --ml-font-body: 16px;
  --ml-font-small: 14px;
  --ml-font-xs: 13px;
  --ml-line-body: 1.6;
  --ml-line-tight: 1.35;
}

/* Consistent body copy and form controls */
body {
  font-size: var(--ml-font-body);
  line-height: var(--ml-line-body);
}
button, input, select, textarea {
  font-family: inherit;
}
input, select, textarea {
  font-size: 16px;
}

/* Header controls and primary navigation */
.topbar .top-actions button,
.topbar .top-actions a,
.header-nav a,
.header-nav button {
  line-height: 1.25;
}
.topbar .top-actions button {
  font-size: 14px;
  font-weight: 600;
}
.header-search-field input {
  font-size: 16px;
  line-height: 1.45;
}
.header-search-field button {
  font-size: 14px;
  line-height: 1.3;
}

/* Content hierarchy: titles remain visually distinct; supporting text is readable */
.home-page p,
.home-footer p,
.home-section p,
.feature-card p,
.art-caption small {
  line-height: 1.65;
}
.home-section .section-heading p,
.home-hero .hero-copy > p:not(.eyebrow) {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
}
.feature-card h3,
.home-section h3 {
  line-height: 1.35;
}
.feature-card p,
.feature-card .feature-description {
  font-size: 15px;
}
.home-footer {
  font-size: 14px;
  line-height: 1.65;
}
.footer-column h2 {
  font-size: 17px;
  line-height: 1.4;
}
.footer-column p,
.footer-column > button,
.footer-description,
.footer-bottom {
  font-size: 14px;
  line-height: 1.65;
}
.footer-contact-button,
.footer-chat-link {
  font-size: 14px;
  line-height: 1.35;
}

/* Search results, song lists and reusable content items */
.header-search-result {
  font-size: 15px;
  line-height: 1.45;
}
.header-search-results .search-hint,
.header-search-results .search-status {
  font-size: 14px;
  line-height: 1.5;
}
button, .primary-cta, .secondary-cta {
  line-height: 1.35;
}

/* Tablet: slightly more room, same hierarchy */
@media (min-width: 621px) and (max-width: 1000px) {
  body {
    font-size: 16px;
  }
  .home-footer,
  .footer-column p,
  .footer-column > button,
  .footer-description,
  .footer-bottom {
    font-size: 15px;
  }
  .feature-card p,
  .header-search-result {
    font-size: 15px;
  }
}

/* Mobile: readable text without inflating controls or changing layout */
@media (max-width: 620px) {
  body {
    font-size: 15px;
    line-height: 1.6;
  }
  .home-page p,
  .home-section p,
  .feature-card p {
    line-height: 1.6;
  }
  .home-section .section-heading p,
  .home-hero .hero-copy > p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.65;
  }
  .feature-card p,
  .feature-card .feature-description {
    font-size: 14px;
  }
  .home-footer {
    font-size: 14px;
    line-height: 1.6;
  }
  .footer-column h2 {
    font-size: 16px;
  }
  .footer-column p,
  .footer-column > button,
  .footer-description,
  .footer-bottom {
    font-size: 14px;
    line-height: 1.6;
  }
  .footer-contact-button,
  .footer-chat-link {
    font-size: 13px;
  }
  .header-search-result {
    font-size: 14px;
  }
  .header-search-results .search-hint,
  .header-search-results .search-status {
    font-size: 13px;
  }
}

/* Keep small legal/meta labels legible without forcing all labels to the same size. */
.footer-copyright,
.footer-bottom,
.home-footer .footer-bottom * {
  line-height: 1.6;
}


/* =========================================================
   COMPLETE TYPOGRAPHY AUDIT — site-wide consistency layer
   Applies to common UI components across desktop/tablet/mobile.
   Preserves display headings, icon glyphs, game/canvas visuals,
   explicit sizing for charts and scoreboards.
   ========================================================= */
:root {
  --ml-type-body: 16px;
  --ml-type-body-mobile: 15px;
  --ml-type-label: 14px;
  --ml-type-caption: 13px;
  --ml-type-control: 15px;
  --ml-type-line: 1.55;
}

/* Base text rhythm */
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-size: var(--ml-type-body);
  line-height: var(--ml-type-line);
}
p, li, dd, dt, blockquote {
  line-height: 1.6;
}
small {
  font-size: var(--ml-type-caption);
  line-height: 1.45;
}

/* Shared controls: align text weight and baseline without changing dimensions */
button, input, select, textarea {
  font-family: inherit;
}
button {
  line-height: 1.35;
}
input, select, textarea {
  font-size: 16px;
  line-height: 1.4;
}
label {
  line-height: 1.45;
}

/* Site navigation and account actions */
.header-nav a, .header-nav button,
.topbar .top-actions button, .topbar .top-actions a,
.mobile-menu a, .mobile-menu button,
.nav-menu a, .nav-menu button {
  line-height: 1.35;
}
.topbar .top-actions button,
.topbar .top-actions a {
  font-size: 14px;
  font-weight: 600;
}

/* Content lists, cards, tiles and supporting descriptions */
.home-page p, .home-section p, .home-footer p,
.feature-card p, .content-card p, .song-card p,
.lesson-card p, .news-card p, .game-card p {
  line-height: 1.6;
}
.content-card, .song-card, .lesson-card, .news-card, .game-card,
.feature-card {
  line-height: 1.5;
}
.content-card p, .song-card p, .lesson-card p, .news-card p, .game-card p {
  font-size: 15px;
}
.content-card small, .song-card small, .lesson-card small,
.news-card small, .game-card small {
  font-size: 13px;
}

/* Forms, comments, ratings and modal dialogs */
.form-group label, .field-label, .form-label,
.modal label, .dialog label {
  font-size: 14px;
  line-height: 1.45;
}
.form-group input, .form-group select, .form-group textarea,
.modal input, .modal select, .modal textarea,
.dialog input, .dialog select, .dialog textarea {
  font-size: 16px;
}
.comment, .comment-content, .rating-description,
.empty-state, .status-message, .helper-text {
  font-size: 14px;
  line-height: 1.55;
}

/* Search and chat support text */
.header-search-field input,
#messageInput, .composer input, .composer textarea {
  font-size: 16px;
  line-height: 1.45;
}
.header-search-result {
  font-size: 15px;
  line-height: 1.45;
}
.header-search-results .search-hint,
.header-search-results .search-status {
  font-size: 13px;
  line-height: 1.5;
}

/* Admin: readable labels and data, keeping table density reasonable */
.admin-panel label, .admin-page label,
.admin-panel .field-label, .admin-page .field-label {
  font-size: 14px;
  line-height: 1.45;
}
.admin-panel input, .admin-panel select, .admin-panel textarea,
.admin-page input, .admin-page select, .admin-page textarea {
  font-size: 15px;
}
.admin-panel table, .admin-page table,
.admin-panel .table, .admin-page .table {
  font-size: 14px;
  line-height: 1.45;
}
.admin-panel th, .admin-page th {
  font-weight: 700;
}
.admin-panel .help-text, .admin-page .help-text,
.admin-panel .muted, .admin-page .muted {
  font-size: 13px;
  line-height: 1.5;
}

/* Footer hierarchy */
.footer-column h2 {
  font-size: 17px;
  line-height: 1.4;
}
.footer-column p, .footer-column > button,
.footer-description, .footer-bottom {
  font-size: 14px;
  line-height: 1.6;
}

/* Responsive typography: modest changes only, not blanket scaling */
@media (min-width: 621px) and (max-width: 1000px) {
  body { font-size: 16px; }
  p, li, dd, dt { line-height: 1.6; }
  .content-card p, .song-card p, .lesson-card p,
  .news-card p, .game-card p { font-size: 15px; }
}
@media (max-width: 620px) {
  body { font-size: var(--ml-type-body-mobile); line-height: 1.55; }
  p, li, dd, dt { line-height: 1.6; }
  .content-card p, .song-card p, .lesson-card p,
  .news-card p, .game-card p { font-size: 14px; }
  .content-card small, .song-card small, .lesson-card small,
  .news-card small, .game-card small { font-size: 12px; }
  .form-group label, .field-label, .form-label,
  .modal label, .dialog label { font-size: 13px; }
  .admin-panel label, .admin-page label,
  .admin-panel .field-label, .admin-page .field-label { font-size: 13px; }
  .admin-panel table, .admin-page table,
  .admin-panel .table, .admin-page .table { font-size: 13px; }
  .footer-column h2 { font-size: 16px; }
  .footer-column p, .footer-column > button,
  .footer-description, .footer-bottom { font-size: 13px; }
}

/* Do not accidentally resize icon fonts, SVGs, emoji, score counters or game canvas text. */
svg, canvas, .fa, [class^="fa-"], [class*=" fa-"],
.icon, .iconify, .material-icons, .lucide {
  text-size-adjust: none;
}


/* =========================================================
   FINAL TYPOGRAPHY PASS — targeted readability corrections
   Audit focus: small labels, auth/admin controls, tables,
   helper copy and compact cards. Intentional icon/score text
   and display typography remain individually sized.
   ========================================================= */
:root {
  --ml-text-primary: 16px;
  --ml-text-secondary: 14px;
  --ml-text-meta: 12px;
  --ml-text-control: 14px;
}

/* Small labels and secondary copy that were below comfortable reading size */
.brand small,
.side-bottom,
.suggestion small,
.composer-foot,
.upload-preview,
.upload-preview-name,
.generated-file-name,
.generated-file-download,
.auth-subtitle,
.auth-note,
.auth-error,
.forgot-password-link,
.admin-heading p,
.welcome-copy,
.toast,
.art-caption small,
.footer-copyright {
  font-size: 12px;
  line-height: 1.5;
}

/* Keep compact metadata small but not tiny */
.side-label,
.private-pill,
.user-chip,
.auth-tab,
.auth-form label,
.admin-users-button,
.theme-toggle,
.auth-button,
.eyebrow,
.suggestion strong,
.art-caption strong,
.hero-stats div {
  font-size: 12px;
  line-height: 1.4;
}

/* Tables and admin data must remain readable on desktop and mobile */
.admin-table,
.admin-panel table,
.admin-page table,
.admin-table th,
.admin-table td {
  font-size: 13px;
  line-height: 1.45;
}
.admin-table th,
.admin-panel th,
.admin-page th {
  font-weight: 650;
}

/* Common interactive elements: consistent readable label sizing */
.primary-cta,
.secondary-cta,
.banner-chat,
.footer-chat-link,
.footer-contact-button,
.generated-file-download {
  font-size: 14px;
  line-height: 1.35;
}
.auth-form input,
.auth-form select,
.auth-form textarea,
.admin-panel input,
.admin-panel select,
.admin-panel textarea,
.admin-page input,
.admin-page select,
.admin-page textarea {
  font-size: 15px;
  line-height: 1.4;
}

/* Content meta and statistics are secondary, but avoid sub-10px text */
.hero-stats div,
.feature-card small,
.art-caption small,
.card-meta,
.item-meta,
.song-meta,
.lesson-meta,
.news-meta {
  font-size: 12px;
  line-height: 1.45;
}

/* Mobile: prioritize legibility while preserving the existing layout */
@media (max-width: 620px) {
  .side-label,
  .private-pill,
  .user-chip,
  .auth-tab,
  .auth-form label,
  .admin-users-button,
  .theme-toggle,
  .auth-button,
  .eyebrow,
  .suggestion strong,
  .admin-table,
  .admin-panel table,
  .admin-page table {
    font-size: 12px;
  }
  .admin-table th,
  .admin-table td {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .primary-cta,
  .secondary-cta,
  .banner-chat {
    font-size: 13px;
  }
}

/* Preserve deliberate large/special typography and icon-only controls */
.back-to-top,
.chat-launcher,
.launcher-spark,
.header-search-toggle,
svg, canvas, .fa, [class^="fa-"], [class*=" fa-"],
.icon, .iconify, .material-icons, .lucide {
  /* Intentionally excluded from general text normalization. */
}

/* =========================================================
   RESPONSIVE PRACTICAL AUDIT — 2026-10-17
   CSS-only safeguards. Keep existing desktop design and behavior.
   ========================================================= */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
.app-shell, .main, .home-page, .content-browser,
.content-browser-grid, .content-item, .cms-pane,
.cms-form, .admin-accordion-grid { min-width: 0; }
img, video, audio, iframe, canvas, svg { max-width: 100%; }
.content-item, .cms-list-item, .latest-post-card,
.admin-accordion, .admin-accordion-grid > *,
.auth-card, .admin-card, .chat-panel { min-width: 0; }
.content-item h1, .content-item h2, .content-item h3,
.content-item p, .content-item a, .cms-list-item strong,
.admin-accordion summary, .admin-table td,
.auth-card, .admin-card, .chat-panel {
  overflow-wrap: anywhere;
}

/* Dialogs remain inside the usable viewport on short screens. */
.auth-backdrop, .admin-backdrop {
  padding: max(10px, env(safe-area-inset-top))
           max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom))
           max(10px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.auth-card {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.admin-card {
  width: min(900px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.admin-table-wrap, .lesson-sheet-area { max-width: 100%; overflow: auto; }
.admin-table { min-width: 620px; }
.cms-tabs { min-width: 0; }
.cms-tab { flex: 0 0 auto; }

/* Keep embedded media and long form controls from widening cards. */
.cms-form input, .cms-form select, .cms-form textarea,
.admin-accordion-grid input, .admin-accordion-grid select,
.admin-accordion-grid textarea, .auth-form input,
.content-item audio, .content-item video, .content-item iframe {
  max-width: 100%; min-width: 0;
}
.content-browser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 761px) and (max-width: 1100px) {
  .home-page { padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(18px, 3vw, 34px); }
  .content-browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-card { padding: 18px; }
}

@media (max-width: 760px) {
  .home-page { padding-left: 14px; padding-right: 14px; }
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; padding-top: 18px; padding-bottom: 24px; }
  .home-hero h1 { font-size: clamp(30px, 8vw, 42px); overflow-wrap: anywhere; }
  .content-browser-grid { grid-template-columns: minmax(0, 1fr); }
  .cms-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 0 0 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .cms-tab { white-space: nowrap; }
  .admin-heading { align-items: flex-start; }
  .admin-heading h2 { overflow-wrap: anywhere; }
  .auth-card { border-radius: 17px; padding: 22px 16px; }
  .admin-card { width: 100%; border-radius: 16px; padding: 14px; }
  .chat-panel { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); max-width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 17px; }
  .chat-panel-head { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .chat-panel .conversation { padding-left: 10px; padding-right: 10px; }
  .chat-panel .composer-wrap { padding-left: 8px; padding-right: 8px; }
  .chat-launcher { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .back-to-top { right: max(16px, env(safe-area-inset-right)) !important; }
}

@media (max-width: 420px) {
  .topbar { gap: 5px; }
  .topbar .top-brand { min-width: 0; }
  .top-actions { min-width: 0; gap: 4px; }
  .top-actions .theme-toggle { padding-left: 6px !important; padding-right: 6px !important; }
  .top-actions .auth-button { padding-left: 8px !important; padding-right: 8px !important; }
  .home-page { padding-left: 11px; padding-right: 11px; }
  .content-item { padding: 13px; }
  .content-title-row { gap: 7px; }
  .content-title-row h3 { font-size: 15px; }
  .auth-card { padding: 20px 13px; }
  .admin-card { padding: 10px; }
  .chat-launcher { gap: 6px; padding: 8px 11px 8px 8px; }
  .chat-launcher .launcher-logo-image { width: 34px; height: 34px; flex-basis: 34px; }
}

@media (max-height: 520px) {
  .auth-backdrop, .admin-backdrop { place-items: start center; }
  .auth-card, .admin-card { margin: 4px 0; max-height: calc(100dvh - 16px); }
  .chat-panel { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* MOBILE/TABLET MENU TYPOGRAPHY FIX — 2026-10-17
   Improve text readability in the expanded music navigation only; desktop remains unchanged. */
@media (max-width: 900px) {
  .mobile-menu .nav-submenu .nav-folder-row > .nav-folder-link,
  .nav-menu .nav-submenu .nav-folder-row > .nav-folder-link,
  .mobile-menu .nav-folder-row > .nav-folder-link,
  .nav-menu .nav-folder-row > .nav-folder-link {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;
  }
  .mobile-menu .nav-submenu .nav-folder-children .nav-folder-row > .nav-folder-link,
  .nav-menu .nav-submenu .nav-folder-children .nav-folder-row > .nav-folder-link,
  .mobile-menu .nav-folder-children .nav-folder-row > .nav-folder-link,
  .nav-menu .nav-folder-children .nav-folder-row > .nav-folder-link {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 450 !important;
  }
  .mobile-menu .nav-submenu .nav-folder-children > .nav-submenu-content,
  .mobile-menu .nav-submenu > .nav-submenu-content,
  .nav-menu .nav-submenu .nav-folder-children > .nav-submenu-content,
  .nav-menu .nav-submenu > .nav-submenu-content {
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
  }
  .mobile-menu .nav-folder-children,
  .nav-menu .nav-folder-children {
    min-width: 0;
  }
  .mobile-menu .nav-folder-link,
  .mobile-menu .nav-submenu-content,
  .nav-menu .nav-folder-link,
  .nav-menu .nav-submenu-content {
    overflow-wrap: anywhere;
  }
}

/* MOBILE MENU TYPOGRAPHY FIX 2: target the actual navigation classes. */
@media (max-width: 1100px) {
  #headerNav .header-nav-item > span:not(.nav-icon),
  #headerNav .header-nav-item > .nav-label {
    font-size: 19px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }
  #headerNav .nav-submenu-item.nav-submenu-all {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
  }
  #headerNav .nav-folder-row > .nav-folder-link {
    font-size: 16px !important;
    line-height: 1.45 !important;
    font-weight: 650 !important;
  }
  #headerNav .nav-folder-children .nav-folder-row > .nav-folder-link {
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
  }
  #headerNav .nav-submenu-content {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 450 !important;
  }
}


/* MOBILE MENU ARROW SIZE FIX: make expand/collapse arrows easier to see and tap.
   Scoped to phone/tablet navigation only; desktop styles remain unchanged. */
@media (max-width: 1100px) {
  #headerNav .nav-folder-row > .nav-folder-toggle {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
  }
  #headerNav .nav-folder-row > .nav-folder-toggle span,
  #headerNav .nav-submenu-toggle span {
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
  }
  #headerNav .nav-category-wrap > .nav-submenu-toggle {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin-left: 0 !important;
    font-size: 20px !important;
  }
}


/* Mobile menu: slightly larger and bolder expand/collapse arrows. */
@media (max-width: 1100px) {
  #headerNav .nav-folder-row > .nav-folder-toggle,
  #headerNav .nav-category-wrap > .nav-submenu-toggle {
    flex-basis: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  #headerNav .nav-folder-row > .nav-folder-toggle span,
  #headerNav .nav-category-wrap > .nav-submenu-toggle span {
    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    -webkit-text-stroke: .45px currentColor;
  }
}

/* Requested: hide the Hoàng Huệ/Mỹ Linh logo in the mobile header only. */
@media (max-width: 760px) {
  .topbar > .top-brand {
    display: none !important;
  }
}



/* FIX: chữ "Bạn" trong avatar tin nhắn người dùng hiển thị trên một hàng ở mobile/tablet */
@media (max-width: 1000px) {
  .message.user .avatar {
    font-size: 11px;
    white-space: nowrap;
    letter-spacing: -0.25px;
    overflow: visible;
  }
}


/* USER LABEL FIX 2: keep "Bạn" on one line on mobile/tablet */
@media (max-width: 1000px) {
  .message.user .avatar {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: -0.45px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    padding: 0 !important;
  }
}

/* Desktop-only requested layout: keep brand/actions on the first row and move primary navigation below. */
@media (min-width: 1101px) {
  .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    column-gap: clamp(14px, 1.4vw, 24px) !important;
    height: auto !important;
    min-height: 72px !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }
  .topbar > .top-brand { order: 1 !important; }
  .topbar > .top-actions { order: 2 !important; margin-left: auto !important; }
  .topbar > .header-nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.1vw, 18px) !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
    overflow: visible !important;
  }
  .topbar > .header-nav .header-nav-item {
    font-size: clamp(16px, 1.15vw, 19px) !important;
    padding: 12px 15px !important;
    line-height: 1.3 !important;
  }
  .topbar > .header-nav .nav-icon {
    font-size: 21px !important;
    margin-right: 6px !important;
    vertical-align: -2px !important;
  }
}

/* Desktop-only refinement requested 2026-10-17: place Search and Dark Mode beside the second-row navigation. */
@media (min-width: 1101px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto auto 64px auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: clamp(10px, 1vw, 18px) !important;
    row-gap: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 22px !important;
  }
  .topbar > .top-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: initial !important;
  }
  .topbar > .top-actions {
    display: contents !important;
  }
  .top-actions .user-chip {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: 155px !important;
  }
  .top-actions .admin-users-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  .top-actions .auth-button {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }
  .topbar > .header-nav {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: initial !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.1vw, 18px) !important;
    margin: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--line) !important;
  }
  .top-actions .header-search-toggle {
    grid-column: 5 !important;
    grid-row: 2 !important;
    align-self: center !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    flex: 0 0 56px !important;
    font-size: 30px !important;
    border-radius: 17px !important;
  }
  .top-actions .theme-toggle {
    grid-column: 6 !important;
    grid-row: 2 !important;
    align-self: center !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    font-size: 17px !important;
    border-radius: 17px !important;
  }
  .topbar > .header-nav .header-nav-item {
    font-size: clamp(16px, 1.15vw, 19px) !important;
    padding: 13px 16px !important;
    line-height: 1.3 !important;
  }
  .topbar > .header-nav .nav-icon {
    font-size: 22px !important;
    margin-right: 6px !important;
  }
}

/* Desktop-only polish requested 2026-10-17: contain the logo fully in the header and separate navigation from the hero. */
@media (min-width: 1101px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto auto 56px auto !important;
    grid-template-rows: minmax(82px, auto) auto !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    align-content: start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding-top: 10px !important;
    padding-bottom: 14px !important;
    overflow: visible !important;
    row-gap: 10px !important;
    margin-bottom: 24px !important;
    background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
  }
  .topbar > .top-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    display: flex !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .topbar > .top-brand .brand-logo-image {
    display: block !important;
    width: 170px !important;
    height: 74px !important;
    max-height: 74px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .topbar > .top-actions { display: contents !important; }
  .top-actions .user-chip { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; }
  .top-actions .admin-users-button { grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; }
  .top-actions .auth-button { grid-column: 4 !important; grid-row: 1 !important; align-self: center !important; }
  .topbar > .header-nav {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid var(--line) !important;
    overflow: visible !important;
  }
  .top-actions .header-search-toggle {
    grid-column: 5 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .top-actions .theme-toggle {
    grid-column: 6 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
  }
  .home-page { padding-top: 0 !important; }
  .home-page > .home-hero { margin-top: 0 !important; }
}

/* DESKTOP ALIGNMENT CORRECTION — scoped to desktop header/home spacing only. */
@media (min-width: 1101px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto 56px auto !important;
    grid-template-rows: 82px 64px !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    align-content: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 8px max(24px, calc((100vw - 1280px) / 2)) 10px !important;
    margin: 0 !important;
    column-gap: clamp(10px, 1vw, 18px) !important;
    row-gap: 8px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 50 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .topbar > .top-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .topbar > .top-brand .brand-logo-image {
    display: block !important;
    width: 170px !important;
    height: 74px !important;
    max-height: 74px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
  }
  .topbar > .mobile-menu-toggle { display: none !important; }
  .topbar > .top-actions { display: contents !important; }
  .top-actions .user-chip {
    grid-column: 2 !important; grid-row: 1 !important;
    align-self: center !important; justify-self: end !important;
    max-width: 180px !important; white-space: nowrap !important;
  }
  .top-actions .admin-users-button {
    grid-column: 3 !important; grid-row: 1 !important;
    align-self: center !important; justify-self: center !important;
  }
  .top-actions .auth-button {
    grid-column: 4 !important; grid-row: 1 !important;
    align-self: center !important; justify-self: end !important;
  }
  .topbar > .header-nav {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 60px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(8px, 1vw, 18px) !important;
    border: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }
  .topbar > .header-nav .header-nav-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px clamp(12px, 1vw, 18px) !important;
    font-size: clamp(16px, 1.05vw, 20px) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
  }
  .topbar > .header-nav .nav-icon {
    font-size: clamp(20px, 1.25vw, 24px) !important;
    margin-right: 7px !important;
    vertical-align: middle !important;
  }
  .top-actions .header-search-toggle {
    grid-column: 5 !important; grid-row: 2 !important;
    align-self: center !important; justify-self: center !important;
    width: 56px !important; min-width: 56px !important;
    height: 56px !important; min-height: 56px !important;
    padding: 0 !important; margin: 0 !important;
    font-size: 27px !important; border-radius: 17px !important;
  }
  .top-actions .theme-toggle {
    grid-column: 6 !important; grid-row: 2 !important;
    align-self: center !important; justify-self: end !important;
    height: 56px !important; min-height: 56px !important;
    padding: 0 17px !important; margin: 0 !important;
    font-size: 17px !important; border-radius: 17px !important;
    white-space: nowrap !important;
  }
  .home-page {
    padding-top: 34px !important;
    padding-left: max(24px, calc((100vw - 1280px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1280px) / 2)) !important;
  }
  .home-page > .home-hero {
    margin-top: 0 !important;
    padding-top: 18px !important;
  }
}


/* Final desktop-only correction: align top account controls, keep search/theme inside the content grid,
   and prevent the navigation row from overlapping the hero banner. */
@media (min-width: 1101px) {
  .topbar {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) auto auto minmax(96px, auto) auto !important;
    grid-template-rows: 82px 64px !important;
    align-items: center !important;
    align-content: start !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px max(24px, calc((100vw - 1280px) / 2)) 12px !important;
    margin: 0 !important;
    column-gap: clamp(10px, 1vw, 18px) !important;
    row-gap: 10px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 50 !important;
  }
  .topbar > .top-brand {
    grid-column: 1 !important; grid-row: 1 !important;
    justify-self: start !important; align-self: center !important;
    width: 180px !important; max-width: 180px !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
  }
  .topbar > .top-brand .brand-logo-image {
    display: block !important; width: 170px !important; height: 74px !important;
    max-height: 74px !important; object-fit: contain !important;
    object-position: left center !important; margin: 0 !important;
  }
  .topbar > .mobile-menu-toggle { display: none !important; }
  .topbar > .top-actions { display: contents !important; }
  .top-actions .user-chip {
    grid-column: 3 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important;
    max-width: 180px !important; white-space: nowrap !important;
    margin: 0 !important;
  }
  .top-actions .admin-users-button {
    grid-column: 4 !important; grid-row: 1 !important;
    justify-self: center !important; align-self: center !important; margin: 0 !important;
  }
  .top-actions .auth-button {
    grid-column: 5 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important; margin: 0 !important;
  }
  .topbar > .header-nav {
    grid-column: 1 / 5 !important; grid-row: 2 !important;
    display: flex !important; align-items: center !important;
    justify-content: flex-start !important; align-self: center !important;
    justify-self: stretch !important; width: auto !important; min-width: 0 !important;
    min-height: 60px !important; height: auto !important;
    margin: 0 !important; padding: 0 !important; gap: clamp(8px, 1vw, 18px) !important;
    border: 0 !important; overflow: visible !important; position: relative !important;
  }
  .topbar > .header-nav .header-nav-item {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-height: 54px !important; height: auto !important; box-sizing: border-box !important;
    margin: 0 !important; padding: 12px clamp(10px, .9vw, 16px) !important;
    font-size: clamp(15px, 1.02vw, 19px) !important; line-height: 1.25 !important;
    white-space: nowrap !important;
  }
  .topbar > .header-nav .nav-icon {
    font-size: clamp(19px, 1.2vw, 23px) !important; margin-right: 7px !important;
    vertical-align: middle !important;
  }
  .top-actions .header-search-toggle {
    grid-column: 5 !important; grid-row: 2 !important;
    justify-self: center !important; align-self: center !important;
    width: 56px !important; min-width: 56px !important; height: 56px !important;
    min-height: 56px !important; padding: 0 !important; margin: 0 !important;
    font-size: 27px !important; border-radius: 17px !important;
  }
  .top-actions .theme-toggle {
    grid-column: 6 !important; grid-row: 2 !important;
    justify-self: end !important; align-self: center !important;
    height: 56px !important; min-height: 56px !important;
    padding: 0 17px !important; margin: 0 !important;
    font-size: 17px !important; border-radius: 17px !important; white-space: nowrap !important;
  }
  .home-page {
    padding-top: 34px !important;
    padding-left: max(24px, calc((100vw - 1280px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1280px) / 2)) !important;
  }
  .home-page > .home-hero { margin-top: 0 !important; padding-top: 0 !important; }
  .home-page .eyebrow { margin-top: 0 !important; }
}

/* DESKTOP LAYOUT HOTFIX 2026-10-17: one authoritative grid override.
   Scope strictly to desktop; preserve existing mobile/tablet behavior. */
@media (min-width: 1101px) {
  header.topbar {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) max-content max-content max-content 58px max-content !important;
    grid-template-rows: 76px 66px !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    align-content: start !important;
    gap: 8px 14px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px max(24px, calc((100vw - 1350px) / 2)) 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }
  header.topbar > .top-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-self: start !important;
    align-self: center !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 0 !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  header.topbar > .top-brand .brand-logo-image {
    display: block !important;
    width: 170px !important;
    height: 70px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
  }
  header.topbar > .mobile-menu-toggle { display: none !important; }
  header.topbar > .top-actions { display: contents !important; }
  header.topbar .user-chip {
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important;
    max-width: 180px !important; white-space: nowrap !important;
    margin: 0 !important;
  }
  header.topbar .admin-users-button {
    grid-column: 3 !important; grid-row: 1 !important;
    justify-self: center !important; align-self: center !important;
    margin: 0 !important; white-space: nowrap !important;
  }
  header.topbar .auth-button {
    grid-column: 4 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important;
    margin: 0 !important; white-space: nowrap !important;
  }
  header.topbar > .header-nav {
    grid-column: 1 / 5 !important; grid-row: 2 !important;
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: flex-start !important;
    justify-self: stretch !important; align-self: center !important;
    width: 100% !important; min-width: 0 !important;
    min-height: 62px !important; height: 62px !important;
    gap: clamp(8px, .8vw, 16px) !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; overflow: visible !important;
    position: relative !important;
  }
  header.topbar > .header-nav .header-nav-item {
    display: inline-flex !important; flex: 0 0 auto !important;
    align-items: center !important; justify-content: center !important;
    min-height: 54px !important; height: 54px !important;
    margin: 0 !important; padding: 10px clamp(10px, .85vw, 16px) !important;
    box-sizing: border-box !important;
    font-size: clamp(16px, 1.08vw, 20px) !important;
    line-height: 1.2 !important; white-space: nowrap !important;
  }
  header.topbar > .header-nav .nav-icon {
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1 !important; margin-right: 7px !important;
  }
  header.topbar .header-search-toggle {
    grid-column: 5 !important; grid-row: 2 !important;
    justify-self: center !important; align-self: center !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 56px !important; min-width: 56px !important; height: 56px !important; min-height: 56px !important;
    padding: 0 !important; margin: 0 !important; font-size: 26px !important;
  }
  header.topbar .theme-toggle {
    grid-column: 6 !important; grid-row: 2 !important;
    justify-self: end !important; align-self: center !important;
    height: 56px !important; min-height: 56px !important;
    padding: 0 17px !important; margin: 0 !important;
    font-size: 17px !important; white-space: nowrap !important;
  }
  .home-page {
    padding-top: 30px !important;
    padding-left: max(24px, calc((100vw - 1350px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1350px) / 2)) !important;
  }
  .home-page > .home-hero { margin-top: 0 !important; padding-top: 8px !important; }
}

/* AUTHORITATIVE DESKTOP HEADER FIX — fixes the real cause: inherited 68px flex-basis
   was collapsing a two-row grid and letting the hero scroll content sit behind row 2. */
@media (min-width: 1101px) {
  header.topbar {
    display: grid !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr) max-content max-content max-content 58px max-content !important;
    grid-template-rows: 76px 64px !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    align-content: start !important;
    column-gap: clamp(10px, 1vw, 16px) !important;
    row-gap: 8px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 6px max(24px, calc((100vw - 1350px) / 2)) 12px !important;
    margin: 0 !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
    z-index: 50 !important;
  }
  header.topbar > .top-brand {
    grid-column: 1 !important; grid-row: 1 !important;
    display: flex !important; align-items: center !important; justify-self: start !important;
    align-self: center !important; width: 180px !important; max-width: 180px !important;
    min-width: 0 !important; height: 70px !important; margin: 0 !important;
    padding: 0 !important; overflow: visible !important;
  }
  header.topbar > .top-brand .brand-logo-image {
    display: block !important; width: 170px !important; height: 70px !important;
    max-height: 70px !important; object-fit: contain !important;
    object-position: left center !important; margin: 0 !important;
  }
  header.topbar > .mobile-menu-toggle { display: none !important; }
  header.topbar > .top-actions { display: contents !important; }
  header.topbar .user-chip {
    grid-column: 4 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important;
    max-width: 180px !important; white-space: nowrap !important; margin: 0 !important;
  }
  header.topbar .admin-users-button {
    grid-column: 5 !important; grid-row: 1 !important;
    justify-self: center !important; align-self: center !important;
    white-space: nowrap !important; margin: 0 !important;
  }
  header.topbar .auth-button {
    grid-column: 6 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important;
    white-space: nowrap !important; margin: 0 !important;
  }
  header.topbar > .header-nav {
    grid-column: 1 / 5 !important; grid-row: 2 !important;
    display: flex !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: flex-start !important;
    justify-self: stretch !important; align-self: center !important;
    width: 100% !important; min-width: 0 !important;
    min-height: 62px !important; height: 62px !important;
    gap: clamp(8px, .8vw, 16px) !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    overflow: visible !important; position: relative !important;
  }
  header.topbar > .header-nav .header-nav-item {
    display: inline-flex !important; flex: 0 0 auto !important;
    align-items: center !important; justify-content: center !important;
    min-height: 54px !important; height: 54px !important;
    margin: 0 !important; padding: 10px clamp(9px, .75vw, 15px) !important;
    box-sizing: border-box !important; font-size: clamp(16px, 1.08vw, 20px) !important;
    line-height: 1.2 !important; white-space: nowrap !important;
  }
  header.topbar > .header-nav .nav-icon {
    font-size: clamp(20px, 1.25vw, 24px) !important;
    line-height: 1 !important; margin-right: 7px !important;
  }
  header.topbar .header-search-toggle {
    grid-column: 5 !important; grid-row: 2 !important;
    justify-self: center !important; align-self: center !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 56px !important; min-width: 56px !important; height: 56px !important;
    min-height: 56px !important; padding: 0 !important; margin: 0 !important; font-size: 26px !important;
  }
  header.topbar .theme-toggle {
    grid-column: 6 !important; grid-row: 2 !important;
    justify-self: end !important; align-self: center !important;
    height: 56px !important; min-height: 56px !important;
    padding: 0 17px !important; margin: 0 !important; font-size: 17px !important;
    white-space: nowrap !important;
  }
  .home-page {
    flex: 1 1 auto !important; min-height: 0 !important;
    padding-top: 30px !important;
    padding-left: max(24px, calc((100vw - 1350px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1350px) / 2)) !important;
  }
  .home-page > .home-hero { margin-top: 0 !important; padding-top: 8px !important; }
}

/* DESKTOP HEADER VISUAL HIERARCHY + SHARED CONTENT GUTTERS — 2026-10-17
   Reference: pale-blue brand row, near-white navigation row, and consistent page gutters.
   Desktop only; preserve tablet/mobile rules and all existing behavior. */
@media (min-width: 1101px) {
  html body {
    background-color: #f3f9ff !important;
  }

  header.topbar {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 58px max-content !important;
    grid-template-rows: 76px 66px !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    align-content: start !important;
    gap: 8px 14px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 6px max(28px, calc((100vw - 1350px) / 2)) 10px !important;
    margin: 0 !important;
    background: linear-gradient(to bottom, #edf7ff 0, #edf7ff 88px, #f8fbff 88px, #f8fbff 100%) !important;
    border-bottom: 1px solid #d4e5f6 !important;
    box-shadow: 0 3px 12px rgba(33, 89, 145, .045) !important;
    overflow: visible !important;
    position: relative !important;
    top: auto !important;
    z-index: 50 !important;
  }

  header.topbar > .top-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-self: start !important;
    align-self: center !important;
    width: 180px !important;
    max-width: 180px !important;
    min-width: 0 !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  header.topbar > .top-brand .brand-logo-image {
    display: block !important;
    width: 170px !important;
    height: 70px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
  }

  header.topbar > .mobile-menu-toggle { display: none !important; }
  header.topbar > .top-actions { display: contents !important; }

  /* Account actions share one tidy right-aligned line in the top band. */
  header.topbar .user-chip {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    max-width: 180px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  header.topbar .admin-users-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  header.topbar .auth-button {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  /* Navigation occupies the left/center area; search and theme occupy the far right. */
  header.topbar > .header-nav {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    height: 62px !important;
    gap: clamp(6px, .65vw, 14px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
  }
  header.topbar > .header-nav .header-nav-item {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 10px clamp(8px, .72vw, 14px) !important;
    box-sizing: border-box !important;
    font-size: clamp(15px, 1.02vw, 19px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  header.topbar > .header-nav .nav-icon {
    flex: 0 0 auto !important;
    font-size: clamp(19px, 1.18vw, 23px) !important;
    line-height: 1 !important;
    margin-right: 7px !important;
  }

  header.topbar .header-search-toggle {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 25px !important;
    border-radius: 16px !important;
  }
  header.topbar .theme-toggle {
    grid-column: 4 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 17px !important;
    margin: 0 !important;
    font-size: 17px !important;
    white-space: nowrap !important;
    border-radius: 16px !important;
  }

  /* Exact same horizontal gutter as the header: logo/menu align with hero and sections below. */
  .home-page {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px max(28px, calc((100vw - 1350px) / 2)) 32px !important;
    background: transparent !important;
  }
  .home-page > .home-hero {
    margin: 0 !important;
    padding: 8px 0 28px !important;
  }
  .home-page .eyebrow { margin-top: 0 !important; }
}


/* DESKTOP RECOVERY FIX: restore one shared centered content frame.
   Only affects desktop. No HTML, JavaScript, or mobile/tablet rules changed. */
@media (min-width: 1101px) {
  html, body { max-width: 100%; overflow-x: clip; }
  header.topbar {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 54px 88px !important;
    grid-template-rows: 76px 66px !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    align-content: start !important;
    column-gap: 14px !important;
    row-gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px max(28px, calc((100vw - 1350px) / 2)) 10px !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  header.topbar > .top-brand {
    grid-column: 1 !important; grid-row: 1 !important;
    justify-self: start !important; align-self: center !important;
    width: 180px !important; max-width: 180px !important;
    height: 70px !important; margin: 0 !important; padding: 0 !important;
  }
  header.topbar > .top-brand .brand-logo-image {
    display: block !important; width: 170px !important; height: 70px !important;
    object-fit: contain !important; object-position: left center !important;
    margin: 0 !important;
  }
  header.topbar > .mobile-menu-toggle { display: none !important; }
  header.topbar > .top-actions { display: contents !important; }
  header.topbar .user-chip {
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important;
    margin: 0 !important; max-width: 180px !important; white-space: nowrap !important;
  }
  header.topbar .admin-users-button {
    grid-column: 3 !important; grid-row: 1 !important;
    justify-self: center !important; align-self: center !important; margin: 0 !important;
    white-space: nowrap !important;
  }
  header.topbar .auth-button {
    grid-column: 4 !important; grid-row: 1 !important;
    justify-self: end !important; align-self: center !important; margin: 0 !important;
    white-space: nowrap !important;
  }
  header.topbar > .header-nav {
    grid-column: 1 / 3 !important; grid-row: 2 !important;
    display: flex !important; flex-wrap: nowrap !important;
    justify-content: space-between !important; align-items: center !important;
    justify-self: stretch !important; align-self: center !important;
    width: 100% !important; min-width: 0 !important;
    height: 62px !important; min-height: 62px !important;
    gap: clamp(4px, .5vw, 10px) !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
    position: relative !important; z-index: 1 !important;
  }
  header.topbar > .header-nav .header-nav-item {
    display: inline-flex !important; flex: 0 1 auto !important; min-width: 0 !important;
    align-items: center !important; justify-content: center !important;
    height: 54px !important; min-height: 54px !important;
    margin: 0 !important; padding: 10px clamp(7px, .6vw, 12px) !important;
    box-sizing: border-box !important;
    font-size: clamp(14px, .95vw, 18px) !important;
    line-height: 1.2 !important; white-space: nowrap !important;
  }
  header.topbar > .header-nav .nav-icon {
    flex: 0 0 auto !important; font-size: clamp(18px, 1.1vw, 22px) !important;
    line-height: 1 !important; margin-right: 6px !important;
  }
  header.topbar .header-search-toggle {
    grid-column: 3 !important; grid-row: 2 !important;
    justify-self: center !important; align-self: center !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 54px !important; min-width: 54px !important; height: 54px !important;
    min-height: 54px !important; padding: 0 !important; margin: 0 !important;
    font-size: 24px !important;
  }
  header.topbar .theme-toggle {
    grid-column: 4 !important; grid-row: 2 !important;
    justify-self: end !important; align-self: center !important;
    height: 54px !important; min-height: 54px !important;
    padding: 0 16px !important; margin: 0 !important;
    font-size: 16px !important; white-space: nowrap !important;
  }

  /* All home sections share the exact same left/right inset and width. */
  .home-page {
    display: block !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    box-sizing: border-box !important; flex: 1 1 auto !important;
    padding: 24px max(28px, calc((100vw - 1350px) / 2)) 32px !important;
    margin: 0 !important; overflow: visible !important;
  }
  .home-page > .home-hero,
  .home-page > .home-section,
  .home-page > section {
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important;
  }
  .home-page > .home-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr) !important;
    align-items: center !important;
    gap: clamp(28px, 3vw, 54px) !important;
    margin-top: 0 !important; padding: 8px 0 28px !important;
  }
  .home-page .hero-copy { min-width: 0 !important; }
  .home-page .hero-art { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .home-page > .home-section {
    margin-top: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  .home-page .latest-posts-section,
  .home-page .home-section .section-heading,
  .home-page .latest-posts-grid {
    max-width: none !important; width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* DESKTOP SCROLL RECOVERY: keep the app frame intact and make the page content scrollable.
   The base app intentionally locks html/body; the home page itself must be the scroll container. */
@media (min-width: 1101px) {
  html, body {
    height: 100% !important;
    overflow: hidden !important;
  }
  .app-shell {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .main {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .home-page {
    display: block !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    touch-action: pan-y;
  }
}

/* FIX DARK MODE CONTRAST (requested 2026-10-17): repair only homepage colors that became unreadable.
   Keep the current header, layout, spacing, scroll behavior, and all interactions unchanged. */
body[data-theme="dark"] .app-shell,
body[data-theme="dark"] .main,
body[data-theme="dark"] .home-page {
  background-color: #0b1020 !important;
  color: #eef3ff !important;
}
body[data-theme="dark"] .home-page {
  background-image: radial-gradient(ellipse at 82% 7%, #12345b 0, transparent 30%), radial-gradient(ellipse at 4% 48%, #12332f 0, transparent 25%) !important;
}
body[data-theme="dark"] .home-hero h1,
body[data-theme="dark"] .home-section .section-heading h2,
body[data-theme="dark"] .latest-posts-heading h2,
body[data-theme="dark"] .home-page h2,
body[data-theme="dark"] .home-page h3 {
  color: #eef3ff !important;
}
body[data-theme="dark"] .home-hero h1 span,
body[data-theme="dark"] .home-hero h1 .highlight,
body[data-theme="dark"] .home-page .eyebrow {
  color: #73e0c1 !important;
}
body[data-theme="dark"] .home-page p:not(.eyebrow),
body[data-theme="dark"] .home-page .section-heading p,
body[data-theme="dark"] .home-page .latest-posts-description,
body[data-theme="dark"] .home-page .post-date,
body[data-theme="dark"] .home-page .latest-post-meta {
  color: #aab8d0 !important;
}
body[data-theme="dark"] .home-page .home-section,
body[data-theme="dark"] .home-page .latest-posts-section {
  border-color: #26314a !important;
}
body[data-theme="dark"] .home-page .latest-post-card,
body[data-theme="dark"] .home-page .feature-card {
  background: #11182b !important;
  color: #eef3ff !important;
  border-color: #26314a !important;
}
body[data-theme="dark"] .home-page .latest-post-title,
body[data-theme="dark"] .home-page .latest-post-card strong,
body[data-theme="dark"] .home-page .feature-card h3 {
  color: #eef3ff !important;
}
body[data-theme="dark"] .home-page .secondary-cta,
body[data-theme="dark"] .home-page .outline-cta {
  background: #11182b !important;
  color: #eef3ff !important;
  border-color: #33415d !important;
}

/* Requested only: visually separate the desktop brand/account header from the navigation row in dark mode. */
@media (min-width: 1101px) {
  body[data-theme="dark"] header.topbar {
    background: linear-gradient(to bottom, #0b1020 0%, #0b1020 52%, #151e34 52%, #151e34 100%);
    border-bottom: 1px solid #2b3853;
  }
  body[data-theme="dark"] header.topbar > .header-nav {
    background: transparent;
  }
}

/* TARGETED FIX — desktop header stays opaque above scrolled content; align both sides
   to the same centered content frame. No colors or non-header features are changed. */
@media (min-width: 1101px) {
  header.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    isolation: isolate !important;
    /* Opaque bands prevent page content from showing through while scrolling. */
    background: linear-gradient(to bottom,
      #edf7ff 0, #edf7ff 88px,
      #f8fbff 88px, #f8fbff 100%) !important;
    border-bottom: 1px solid #d4e5f6 !important;
    padding-left: max(24px, calc((100vw - 1590px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1590px) / 2)) !important;
  }
  .home-page {
    padding-left: max(24px, calc((100vw - 1590px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1590px) / 2)) !important;
  }
  body[data-theme="dark"] header.topbar {
    background: linear-gradient(to bottom,
      #0b1020 0, #0b1020 88px,
      #151e34 88px, #151e34 100%) !important;
    border-bottom-color: #2b3853 !important;
  }
}


/* FINAL TARGETED DESKTOP FIX (2026-10-17): use normal document scrolling so the
   sticky header participates in the same scroll context as page content. Align
   header and page gutters to the same 1590px content frame. No color/theme or
   feature behavior is changed. */
@media (min-width: 1101px) {
  html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }
  body { margin: 0 !important; }
  .app-shell {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  .main {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  header.topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: max(24px, calc((100vw - 1590px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1590px) / 2)) !important;
    isolation: isolate !important;
    background: #edf7ff !important;
    box-shadow: 0 1px 0 rgba(90, 125, 165, .16) !important;
  }
  body[data-theme="dark"] header.topbar {
    background: #0b1020 !important;
    box-shadow: 0 1px 0 #2b3853 !important;
  }
  .home-page {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding-left: max(24px, calc((100vw - 1590px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1590px) / 2)) !important;
  }
}


/* FINAL REQUESTED FIX — distinct header/menu bands + footer content aligned to home.
   Desktop only for the header; preserve responsive/mobile behavior and existing functions. */
@media (min-width: 1101px) {
  header.topbar {
    background: linear-gradient(
      to bottom,
      #eaf5ff 0,
      #eaf5ff 88px,
      #f8fbff 88px,
      #f8fbff 100%
    ) !important;
    border-bottom: 1px solid #cbdff3 !important;
    box-shadow: 0 2px 0 rgba(35, 94, 160, .035) !important;
  }
  header.topbar > .header-nav {
    border-top: 1px solid rgba(185, 211, 239, .55) !important;
    border-radius: 0 !important;
  }
  body[data-theme="dark"] header.topbar {
    background: linear-gradient(
      to bottom,
      #0b1223 0,
      #0b1223 88px,
      #151f35 88px,
      #151f35 100%
    ) !important;
    border-bottom: 1px solid #344562 !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .16) !important;
  }
  body[data-theme="dark"] header.topbar > .header-nav {
    border-top: 1px solid rgba(88, 111, 151, .32) !important;
  }
}

/* Use the same 1590px centered content frame as the desktop home sections.
   Footer background remains full-bleed; only its inner content alignment changes. */
@media (min-width: 1101px) {
  .home-footer {
    padding-left: max(24px, calc((100vw - 1590px) / 2)) !important;
    padding-right: max(24px, calc((100vw - 1590px) / 2)) !important;
  }
  .home-footer .footer-main,
  .home-footer .footer-bottom {
    width: 100% !important;
    max-width: 1590px !important;
    box-sizing: border-box !important;
  }
}


/* REQUESTED MENU ALIGNMENT FIX (2026-10-17)
   Desktop: keep navigation grouped on the left and search/theme controls on the far right.
   Scope is limited to header navigation spacing; preserve existing colors, theme, and behavior. */
@media (min-width: 1101px) {
  header.topbar > .header-nav {
    justify-content: flex-start !important;
    gap: clamp(4px, .38vw, 9px) !important;
  }
  header.topbar > .header-nav .header-nav-item {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    padding-left: clamp(7px, .48vw, 11px) !important;
    padding-right: clamp(7px, .48vw, 11px) !important;
  }
  header.topbar > .header-nav .nav-category-wrap {
    flex: 0 0 auto !important;
  }
  header.topbar .header-search-toggle {
    justify-self: end !important;
    margin-right: 0 !important;
  }
  header.topbar .theme-toggle {
    justify-self: end !important;
    margin-right: 0 !important;
  }
}


/* Targeted spacing fix: keep Search and Dark Mode controls side-by-side with the same compact rhythm as menu items. */
@media (min-width: 761px) {
  header.topbar > .top-actions {
    justify-content: flex-start !important;
    gap: clamp(8px, .55vw, 12px) !important;
  }
  header.topbar > .top-actions .header-search-toggle,
  header.topbar > .top-actions .theme-toggle {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
}


/* Fine-tune: bring search and theme buttons closer together on desktop only. */
@media (min-width: 1101px) {
  header.topbar .header-search-toggle {
    margin-right: -8px !important;
  }
  header.topbar .theme-toggle {
    margin-left: 0 !important;
  }
}


/* Fine tune requested: align search and dark-mode controls with the tight gap
   used by the admin buttons. Desktop only; no other layout changes. */
@media (min-width: 1101px) {
  header.topbar .header-search-toggle {
    margin-right: -22px !important;
  }
  header.topbar .theme-toggle {
    margin-left: 0 !important;
  }
}


/* Final spacing adjustment: move the Dark Mode button toward Search to match
   the compact gap between the Admin and Logout buttons in the reference. */
@media (min-width: 1101px) {
  header.topbar .header-search-toggle {
    margin-right: 0 !important;
  }
  header.topbar .theme-toggle {
    margin-left: -48px !important;
  }
}


/* FIX6: prevent Search and Dark Mode controls from overlapping.
   Keep a small, consistent visible gap; do not shift either button over the other. */
header.topbar > .top-actions {
  display: flex !important;
  align-items: center !important;
  column-gap: 8px !important;
}
header.topbar > .top-actions .header-search-toggle {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}
header.topbar > .top-actions .theme-toggle {
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}


/* FIX7 — keep Search + Dark Mode on the SECOND (navigation) row on desktop.
   The previous FIX6 changed .top-actions to flex, which pulled both buttons into
   the account/header row. Restore grid participation for its children and give
   each control an explicit grid cell. No mobile/tablet or other UI changes. */
@media (min-width: 1101px) {
  header.topbar {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) 54px max-content max-content max-content !important;
    grid-template-rows: 76px 66px !important;
    grid-auto-flow: row !important;
    align-items: center !important;
    align-content: start !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
  }
  header.topbar > .top-actions {
    display: contents !important;
  }
  header.topbar > .header-nav {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    gap: clamp(4px, .38vw, 9px) !important;
    min-width: 0 !important;
    z-index: 2 !important;
  }
  header.topbar > .header-nav .header-nav-item {
    flex: 0 0 auto !important;
  }
  header.topbar .header-search-toggle {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  header.topbar .theme-toggle {
    grid-column: 4 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 17px !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    white-space: nowrap !important;
  }
  header.topbar .user-chip {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
  header.topbar .admin-users-button {
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
  }
  header.topbar .auth-button {
    grid-column: 6 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }
}

/* FIX8 — align Search and Dark Mode at the far right of the navigation row,
   directly below the admin/logout controls. Only desktop header positioning. */
@media (min-width: 1101px) {
  header.topbar {
    grid-template-columns: 180px minmax(0, 1fr) max-content max-content max-content max-content !important;
  }
  header.topbar > .header-nav {
    grid-column: 1 / 5 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
  }
  header.topbar .header-search-toggle {
    grid-column: 5 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    margin-right: 0 !important;
  }
  header.topbar .theme-toggle {
    grid-column: 6 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    margin-right: 0 !important;
  }
}

/* FIX9 — reduce only the visual gap between Search and Dark Mode on desktop.
   Keep the Dark Mode button anchored to the right edge; shift Search toward it. */
@media (min-width: 1101px) {
  header.topbar .header-search-toggle {
    transform: translateX(24px) !important;
  }
}

/* Targeted fix: hide the complete header/menu behind login and admin dialogs on every screen size. */
body.auth-open .topbar,
body.auth-open .site-header,
body.auth-open header[role="banner"],
body.admin-open .topbar,
body.admin-open .site-header,
body.admin-open header[role="banner"] {
  display: none !important;
}
body.auth-open .header-search-panel,
body.admin-open .header-search-panel {
  display: none !important;
}


/* LIGHT MODE BACKGROUND SEPARATION — requested only.
   Keep the outer frame softly blue and the actual page content white.
   Dark mode and component layouts remain unchanged. */
body:not([data-theme="dark"]) {
  background: #eaf4fd !important;
}
body:not([data-theme="dark"]) .app-shell,
body:not([data-theme="dark"]) .main {
  background: #eaf4fd !important;
}
body:not([data-theme="dark"]) .home-page {
  background: #ffffff !important;
  color: #202b3c;
}
body:not([data-theme="dark"]) .home-footer {
  background: #f2f7fc !important;
}


/* Targeted fix 2026-10-17: keep the floating assistant label below its portrait,
   reserve footer room for it, and keep Back-to-Top visibly above the launcher. */
.chat-launcher {
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  width: 82px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 3px 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: visible !important;
}
.chat-launcher .launcher-logo-image {
  width: 44px !important; height: 44px !important; flex: 0 0 44px !important;
  object-fit: contain !important;
}
.chat-launcher .launcher-label {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  text-align: center !important;
  overflow: visible !important;
}
.chat-launcher .launcher-spark { right: 8px !important; top: 0 !important; }
.home-footer { padding-right: 112px; }
.back-to-top {
  z-index: 10001 !important;
  right: max(28px, env(safe-area-inset-right)) !important;
  bottom: max(100px, calc(env(safe-area-inset-bottom) + 92px)) !important;
}
.chat-panel.open ~ .back-to-top { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .chat-launcher { right: max(8px, env(safe-area-inset-right)) !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; }
  .chat-launcher .launcher-logo-image { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
  .chat-launcher .launcher-label { font-size: 10px !important; }
  .home-footer { padding-right: 0; padding-bottom: 72px; }
  .back-to-top { right: max(14px, env(safe-area-inset-right)) !important; bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px)) !important; }
}

/* Focused mobile adjustment: reduce Back to Top size while keeping its
   position aligned with the Hỏi Mỹ Linh launcher. */
@media (max-width: 760px) {
  .back-to-top {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    font-size: 25px !important;
    border-radius: 16px !important;
    right: max(19px, calc(env(safe-area-inset-right) + 11px)) !important;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px)) !important;
  }
}

/* TARGETED FIX 2026-10-17: full-viewport separator between header and menu.
   Attach the line to the full-width header (not the centered nav container),
   so it always reaches both browser edges. No layout or feature changes. */
@media (min-width: 1101px) {
  header.topbar {
    position: sticky !important;
    overflow: visible !important;
  }
  header.topbar > .header-nav {
    border-top: 0 !important;
  }
  header.topbar::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 88px !important;
    left: calc(50% - 50vw) !important;
    right: calc(50% - 50vw) !important;
    width: auto !important;
    height: 1px !important;
    background: #cbdff3 !important;
    pointer-events: none !important;
    z-index: 1002 !important;
  }
  body[data-theme="dark"] header.topbar::after {
    background: #344562 !important;
  }
}

/* Targeted 2026-10-17 fix: make Back-to-Top arrow lighter/smaller and center it on the Hỏi Mỹ Linh portrait axis. */
.back-to-top {
  width: 36px !important;
  height: 36px !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border-radius: 13px !important;
  right: max(41px, calc(env(safe-area-inset-right) + 41px)) !important;
}
@media (max-width: 760px) {
  .back-to-top {
    width: 36px !important;
    height: 36px !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    right: max(31px, calc(env(safe-area-inset-right) + 23px)) !important;
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px)) !important;
  }
}

/* 2026-10-17 MOBILE-ONLY FIX: align Back to Top and Hỏi Mỹ Linh like desktop.
   Keep both floating controls on one vertical axis, with a clear gap and a
   compact, lighter arrow. No desktop layout or other features changed. */
@media (max-width: 760px) {
  .chat-launcher {
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: 82px !important;
  }
  .back-to-top {
    box-sizing: border-box !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    border-radius: 14px !important;
    right: max(28px, calc(env(safe-area-inset-right) + 20px)) !important;
    bottom: max(100px, calc(env(safe-area-inset-bottom) + 92px)) !important;
  }
}


/* 2026-10-17 MOBILE FIX: hide Back-to-Top at page top and lower it closer
   to the Hỏi Mỹ Linh launcher. Keep all other layout and behavior unchanged. */
.back-to-top[hidden] {
  display: none !important;
}
@media (max-width: 760px) {
  .back-to-top {
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)) !important;
  }
}


/* Desktop-only: make the navigation dropdown hierarchy easier to read. */
@media (min-width: 1101px) {
  .header-nav .nav-submenu-item {
    font-size: 15px !important;
    line-height: 1.45;
    padding: 10px 13px !important;
  }
  .header-nav .nav-folder-toggle {
    width: 30px;
    height: 34px;
    flex-basis: 30px;
  }
}

/* Desktop-only navigation submenu readability fix. Keep tablet/mobile styling unchanged. */
@media (min-width: 1101px) {
  .nav-submenu { min-width: 270px; max-width: min(390px, 36vw); padding: 9px; gap: 4px; }
  .nav-submenu-item { font-size: 15px !important; line-height: 1.45; padding: 11px 13px; }
  .nav-submenu-all { font-size: 15.5px !important; }
  .nav-folder-row { gap: 5px; }
  .nav-folder-toggle { flex-basis: 32px; width: 32px; height: 34px; }
  .nav-folder-children { margin-left: 16px; padding-left: 10px; }
  .nav-submenu-content { font-size: 14px !important; padding-top: 9px; padding-bottom: 9px; }
}

/* Targeted desktop-only fix: enlarge folder names and individual song links in the expanded menu. Keep mobile/tablet styling unchanged. */
@media (min-width: 1101px) {
  .header-nav .nav-submenu .nav-folder-row > .nav-folder-link,
  .header-nav .nav-submenu > .nav-folder-node > .nav-folder-row > .nav-folder-link {
    font-size: 17px !important;
    line-height: 1.45 !important;
  }
  .header-nav .nav-submenu .nav-folder-children .nav-folder-row > .nav-folder-link {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .header-nav .nav-submenu .nav-submenu-content {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}


/* FIX mobile: prevent the header/search interaction from leaving a horizontal blue strip behind the floating brand and assistant icons. */
@media (max-width: 760px) {
  header.topbar,
  .topbar {
    background: var(--bg) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  header.topbar::before,
  header.topbar::after,
  .topbar::before,
  .topbar::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .top-brand.brand-floating-mobile,
  .chat-launcher,
  .top-brand.brand-floating-mobile:hover,
  .chat-launcher:hover {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .header-search-panel,
  .header-search-panel.hidden {
    box-shadow: none;
  }
}


/* Mobile Safari repaint fix: prevent the video/search overlay from leaving a stale horizontal background strip behind fixed controls. */
@media (max-width: 760px) {
  .content-video-viewer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    isolation: isolate !important;
  }
  body.content-video-viewer-open .topbar,
  body.content-video-viewer-open .top-brand.brand-floating-mobile,
  body.content-video-viewer-open .chat-launcher,
  body.content-video-viewer-open .back-to-top {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .top-brand.brand-floating-mobile, .chat-launcher, .back-to-top {
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  .header-search-panel.hidden { display: none !important; }
}


/* ROOT FIX 2026-10-17: prevent the mobile sticky header's translucent
   .is-scrolled gradient/blur from leaving a blue horizontal repaint strip
   after using search or opening/closing a media viewer. Keep desktop unchanged. */
@media (max-width: 760px) {
  .topbar,
  .topbar.is-scrolled,
  body[data-theme="dark"] .topbar,
  body[data-theme="dark"] .topbar.is-scrolled {
    background-image: none !important;
    background-color: #f2f7fc !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }
  body[data-theme="dark"] .topbar,
  body[data-theme="dark"] .topbar.is-scrolled {
    background-color: #0b1020 !important;
    border-bottom-color: #26314a !important;
  }
}


/* ROOT CAUSE FIX 2026-10-17:
   On mobile the global body bottom padding creates an exposed horizontal
   band outside the home page. Keep the footer/background continuous while
   preserving the fixed assistant and Back-to-Top controls. */
@media (max-width: 760px) {
  html, body {
    background: #f2f7fc !important;
  }
  body {
    padding-bottom: 0 !important;
  }
  .app-shell, .main {
    background: #f2f7fc !important;
  }
  .home-page {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .home-footer {
    background: #f2f7fc !important;
    margin-bottom: 0 !important;
    padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px)) !important;
  }
  .top-brand.brand-floating-mobile,
  .chat-launcher,
  .back-to-top {
    background-clip: padding-box !important;
  }
}



/* TARGETED FIX 2026-10-17: restore the Back-to-Top button's blue contrast,
   and keep it below the mobile navigation drawer whenever the menu is open. */
.back-to-top {
  background: linear-gradient(135deg, #1769d2, #0b5fc6) !important;
  color: #ffffff !important;
  border-color: #ffffff70 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
.back-to-top svg,
.back-to-top i,
.back-to-top span {
  color: #ffffff !important;
  fill: #ffffff !important;
}
@media (max-width: 1100px) {
  body.mobile-menu-open .back-to-top {
    z-index: 48 !important;
    pointer-events: none !important;
  }
}
body[data-theme="dark"] .back-to-top {
  background: linear-gradient(135deg, #174f91, #123a70) !important;
  color: #ffffff !important;
}


/* FINAL MOBILE BACK-TO-TOP FIX: restore visible blue button and keep it behind the mobile navigation drawer. */
.back-to-top {
  background: linear-gradient(135deg, #1769d2, #0b5fc6) !important;
  color: #ffffff !important;
  border: 1px solid #8fc4ff !important;
  box-shadow: 0 10px 28px rgba(23, 105, 210, .28) !important;
  opacity: 1;
}
.back-to-top svg, .back-to-top i, .back-to-top span {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
@media (max-width: 1100px) {
  body.mobile-menu-open .back-to-top {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  body.mobile-menu-open .back-to-top[hidden] { display: none !important; }
}


/* Per-answer text-to-speech control for Hỏi Mỹ Linh */
.assistant-speak-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: 8px 0 0 2px; padding: 0;
  border: 1px solid #b9d5f5; border-radius: 10px;
  background: #eaf4ff; color: #075fc7; font-size: 17px; line-height: 1;
  cursor: pointer; vertical-align: middle; box-shadow: 0 2px 8px rgba(20,90,170,.10);
}
.assistant-speak-button:hover { background: #d8eaff; }
.assistant-speak-button.is-speaking { background: #d9f7ef; border-color: #159b83; color: #087c68; }
.assistant-speak-button:focus-visible { outline: 2px solid #087bd5; outline-offset: 2px; }

/* Admin tree/accordion: hidden sections must remain collapsed regardless of layout styles. */
.cms-folder-children[hidden],.cms-folder-category-group [hidden],.cms-content-category-body[hidden]{display:none!important}
.cms-content-category-group>.cms-content-category-toggle[aria-expanded="true"]{border-bottom:1px solid var(--line,#dbe4f0)}
.cms-folder-category-toggle[aria-expanded="true"]{border-bottom:1px solid var(--line,#dbe4f0)}


/* TARGETED FIX: keep Back-to-Top at its existing position, but always behind the open chat panel. Do not move it below the footer. */
.back-to-top { z-index: 100 !important; }
body.chat-open .back-to-top { z-index: 100 !important; }
body.chat-open .chat-panel { z-index: 2147483000 !important; }

/* Targeted fix: remove the extra horizontal divider under the header. */
.topbar,
body[data-theme="dark"] .topbar {
  border-bottom: 0 !important;
}

/* FINAL TARGETED FIX: remove the extra truncated horizontal separator under the header.
   The unwanted line was generated by the desktop header pseudo-element. */
@media (min-width: 1101px) {
  header.topbar::after,
  .topbar::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }
}

/* FINAL FIX 2026-10-18: remove only the unwanted short horizontal line between header and menu. */
@media (min-width: 1101px) {
  header.topbar > .header-nav,
  body[data-theme="dark"] header.topbar > .header-nav {
    border-top: 0 !important;
    box-shadow: none !important;
  }
}

/* Targeted mobile/tablet drawer alignment: keep menu icons and labels on one vertical axis. */
@media (max-width: 1100px) {
  .header-nav .header-nav-item {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    line-height: 1.25 !important;
    gap: 0 !important;
  }
  .header-nav .header-nav-item > .nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 40px !important;
    margin: 0 14px 0 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    font-size: 30px !important;
    text-align: center !important;
  }
  .header-nav .header-nav-item > span:not(.nav-icon) {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.3 !important;
    align-self: center !important;
  }
}

/* MOBILE/TABLET: make the opened navigation drawer span the full viewport width. */
@media (max-width: 1100px) {
  body.mobile-menu-open .header-nav,
  .topbar > .header-nav.open {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
  }
}

/* FINAL targeted fix: consistent icon column, label start and submenu-arrow column in mobile/tablet drawer. */
@media (max-width: 1100px) {
  body.mobile-menu-open #headerNav,
  .topbar > #headerNav.open {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  body.mobile-menu-open #headerNav .header-nav-item,
  .topbar > #headerNav.open .header-nav-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 13px 14px !important;
    min-height: 64px !important;
    width: 100% !important;
    text-align: left !important;
  }
  body.mobile-menu-open #headerNav .header-nav-item > .nav-icon,
  .topbar > #headerNav.open .header-nav-item > .nav-icon {
    display: inline-flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 38px !important;
    margin: 0 16px 0 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    font-size: 27px !important;
  }
  body.mobile-menu-open #headerNav .header-nav-item > span:not(.nav-icon),
  .topbar > #headerNav.open .header-nav-item > span:not(.nav-icon) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: center !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }
  body.mobile-menu-open #headerNav .nav-category-wrap,
  .topbar > #headerNav.open .nav-category-wrap {
    width: 100% !important;
  }
  body.mobile-menu-open #headerNav .nav-category-wrap > .header-nav-item,
  .topbar > #headerNav.open .nav-category-wrap > .header-nav-item {
    width: 100% !important;
  }
  body.mobile-menu-open #headerNav .nav-category-wrap > .nav-submenu-toggle,
  .topbar > #headerNav.open .nav-category-wrap > .nav-submenu-toggle {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    margin-left: auto !important;
    align-self: center !important;
  }
}

/* FINAL FIX 2026-10-18: align all mobile/tablet drawer labels to one exact vertical start line. */
@media (max-width: 1100px) {
  body.mobile-menu-open #headerNav .header-nav-item,
  .topbar > #headerNav.open .header-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  body.mobile-menu-open #headerNav .header-nav-item > .nav-icon,
  .topbar > #headerNav.open .header-nav-item > .nav-icon {
    box-sizing: border-box !important;
    flex: 0 0 60px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  body.mobile-menu-open #headerNav .header-nav-item > span:not(.nav-icon),
  .topbar > #headerNav.open .header-nav-item > span:not(.nav-icon) {
    display: block !important;
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
}

/* TARGETED DARK MODE FOOTER FIX (2026-10-18)
   Darken only the footer in dark theme; leave light theme and all layout unchanged. */
body[data-theme="dark"] .home-footer {
  background: #0b1222 !important;
  color: #b8c7df !important;
  border-top-color: #344562 !important;
}
body[data-theme="dark"] .home-footer .footer-column h2 {
  color: #e6eefc !important;
}
body[data-theme="dark"] .home-footer .footer-description,
body[data-theme="dark"] .home-footer .footer-column p,
body[data-theme="dark"] .home-footer .footer-column > button,
body[data-theme="dark"] .home-footer .footer-bottom,
body[data-theme="dark"] .home-footer .footer-bottom * {
  color: #b8c7df !important;
}
body[data-theme="dark"] .home-footer .footer-bottom {
  border-top-color: #344562 !important;
}
@media (max-width: 760px) {
  body[data-theme="dark"] .home-footer {
    background: #0b1222 !important;
  }
}

/* Tablet-only header action alignment: cover iPad mini through iPad Pro widths.
   Keep controls grouped beside the menu button without changing phone or desktop layouts. */
@media (min-width: 621px) and (max-width: 1400px) and (hover: none) {
  .topbar {
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .topbar > .top-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
    gap: clamp(5px, .7vw, 9px) !important;
  }
  .topbar > .mobile-menu-toggle {
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin-left: 2px !important;
  }
}

/* Desktop-only vertical balance: lower the navigation row and its Search/Theme controls slightly.
   Preserve the existing horizontal positioning and leave tablet/mobile untouched. */
@media (min-width: 1101px) {
  header.topbar > .header-nav,
  header.topbar .header-search-toggle,
  header.topbar .theme-toggle {
    position: relative !important;
    top: 4px !important;
  }
}

/* Mobile-only fix: hide only the extra/custom footer logo at the very bottom.
   Keep the main footer brand logo visible in the contact/footer area. */
@media (max-width: 560px) {
  .home-footer .admin-footer-logo {
    display: none !important;
  }
  .home-footer .footer-brand-logo {
    display: block !important;
  }
}

/* TABLET-ONLY FIX 2026-10-18: prevent the exposed horizontal blue strip
   below the footer after opening/closing header search. Mobile's existing
   fix is preserved; desktop styles are untouched. */
@media (min-width: 761px) and (max-width: 1100px) {
  html, body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    background: #f2f7fc !important;
  }
  body[data-theme="dark"] {
    background: #0b1020 !important;
  }
  .app-shell, .main, .home-page {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: #f2f7fc !important;
  }
  body[data-theme="dark"] .app-shell,
  body[data-theme="dark"] .main,
  body[data-theme="dark"] .home-page {
    background: #0b1020 !important;
  }
  .home-footer {
    margin-bottom: 0 !important;
    background: #f2f7fc !important;
  }
  body[data-theme="dark"] .home-footer {
    background: #0b1020 !important;
  }
}

/* DESKTOP-ONLY FIX 2026-10-18: keep the header/menu background unchanged
   while scrolling on desktop; do not tint or blur content beneath the menu.
   Mobile and tablet scroll behavior remains untouched. */
@media (min-width: 1101px) {
  .topbar.is-scrolled {
    background: linear-gradient(110deg, var(--bg, #f7f9fc), color-mix(in srgb, var(--bg, #f7f9fc) 96%, #d9f7ef)) !important;
    background-color: var(--bg, #f7f9fc) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  body[data-theme="dark"] .topbar.is-scrolled {
    background: linear-gradient(110deg, rgba(12, 18, 34, 0.98), rgba(20, 27, 48, 0.98)) !important;
    background-color: #0b1020 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* DESKTOP-ONLY FIX 2026-10-18: remove the extra blank band after the footer.
   Keep the footer as the final page section; leave tablet/mobile spacing unchanged. */
@media (min-width: 1101px) {
  html, body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body, .app-shell, .main, .home-page {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .home-footer {
    margin-bottom: 0 !important;
  }
}

/* DESKTOP FOLLOW-UP FIX 2026-10-18: remove the white tail below the footer.
   Keep the page canvas continuous with the light footer; no mobile/tablet changes. */
@media (min-width: 1101px) {
  html, body {
    background-color: #f2f7fc !important;
    margin-block-end: 0 !important;
    padding-block-end: 0 !important;
  }
  body {
    min-height: 0 !important;
  }
  .app-shell, .main {
    min-height: 0 !important;
    margin-block-end: 0 !important;
    padding-block-end: 0 !important;
    background-color: #f2f7fc !important;
  }
  .home-page {
    margin-block-end: 0 !important;
    padding-block-end: 0 !important;
  }
  .home-footer {
    margin-block-end: 0 !important;
  }
  body[data-theme="dark"],
  body[data-theme="dark"] .app-shell,
  body[data-theme="dark"] .main {
    background-color: #0b1020 !important;
  }
}

/* PWA install controls and guide — isolated addition */
.install-app-desktop{width:max-content;min-width:0;max-width:max-content;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 7px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;line-height:normal;flex:0 0 auto}.install-app-desktop:hover{border-color:var(--accent)}
.install-app-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(8,15,30,.62);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:16px}.install-app-backdrop.hidden{display:none}.install-app-dialog{position:relative;width:min(560px,100%);max-height:min(88dvh,820px);overflow:auto;background:var(--panel,#fff);color:var(--text,#182033);border:1px solid var(--line,#ddd);border-radius:22px;padding:26px;box-shadow:0 24px 90px #0004}.install-app-close{position:absolute;right:14px;top:14px;width:36px;height:36px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);font-size:24px;cursor:pointer}.install-app-logo{display:block;width:100px;height:100px;object-fit:contain;margin:0 auto 8px}.install-app-eyebrow{text-align:center;color:var(--accent);font-size:10px;letter-spacing:1.5px;font-weight:800}.install-app-dialog h2{text-align:center;margin:7px 0 8px;font-size:25px}.install-app-intro,.install-app-note{text-align:center;color:var(--muted);font-size:12px;line-height:1.7}.install-app-primary{display:block;width:100%;border:0;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;padding:13px;margin:16px 0;cursor:pointer}.install-app-guides{display:grid;gap:9px;margin-top:18px}.install-app-guides details{border:1px solid var(--line);border-radius:13px;padding:12px 14px;background:var(--panel2)}.install-app-guides summary{font-weight:700;font-size:13px;cursor:pointer}.install-app-guides ol{padding-left:22px;margin:12px 0 3px;font-size:12px;line-height:1.8}.install-app-note{font-size:11px;margin:15px 0 0}.install-app-menu-item{color:var(--accent)!important}@media(max-width:1100px){.install-app-desktop{display:none}}@media(max-width:520px){.install-app-dialog{padding:22px 16px;border-radius:18px}.install-app-logo{width:82px;height:82px}.install-app-dialog h2{font-size:22px}}

/* FIX: desktop header uses CSS Grid with display:contents on .top-actions.
   Flex order cannot move this button in that layout; assign its grid cell explicitly.
   Put Install App immediately LEFT of the login-status chip, preserving its size. */
@media (min-width:1101px){
  header.topbar .install-app-desktop{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    position:static!important;
    float:none!important;
    margin:0!important;
    transform:none!important;
    width:max-content!important;
    min-width:0!important;
    max-width:max-content!important;
    flex:0 0 auto!important;
  }
  header.topbar .user-chip{grid-column:4!important;grid-row:1!important;justify-self:end!important}
  header.topbar .admin-users-button{grid-column:5!important;grid-row:1!important;justify-self:center!important}
  header.topbar .auth-button{grid-column:6!important;grid-row:1!important;justify-self:end!important}
}


/* Requested: hide duplicate install item in the desktop navigation only. Keep the topbar install button and mobile/tablet menu item unchanged. */
@media (min-width: 1101px) {
  #installAppMenuItem { display: none !important; }
}