/* Shared visual language for the approved TRIWORDS club / atlas design. */
:root{
 --bg:#f8f9fc;--bg-soft:#eef2fb;--surface:#fff;--surface-2:#fffdf7;
 --ink:#202742;--ink-soft:#626779;--ink-faint:#657086;--border:#dce0e8;
 --shadow:rgba(32,39,66,.07);--accent:#4267f2;--accent-ink:#fff;--accent-soft:#eaf0ff;
 --brand-primary:#3156d8;--brand-primary-soft:#eaf0ff;--brand-secondary:#a54831;
 --amber:#896000;--amber-soft:#fff4c5;--teal:#17836d;--teal-soft:#e7f4ec;--teal-ink:#246446;
 --coral:#ff6d54;--coral-soft:#fff0e9;--coral-ink:#a13e29;--surface-card:#fff;
 --radius-lg:18px;--radius-md:12px;--radius-sm:9px;--radius:12px;
 --font-display:Inter,"Segoe UI",system-ui,sans-serif;--font-body:Inter,"Segoe UI",system-ui,sans-serif;
 --status-success-ink:#246446;--status-warning-ink:#805900;--status-danger-ink:#b42323;
 --club-yellow:#ffd44b;--club-line:#202742;--club-map:#e7f0df;
}
[data-theme="dark"]{
 --bg:#161d2c;--bg-soft:#222c40;--surface:#1e293b;--surface-2:#253149;
 --ink:#f1f4fc;--ink-soft:#c4cce1;--ink-faint:#aebbd3;--border:#42506a;
 --shadow:rgba(0,0,0,.2);--accent:#a9bcff;--accent-ink:#182342;--accent-soft:#2d3d62;
 --brand-primary:#a9bcff;--brand-primary-soft:#2d3d62;--brand-secondary:#ffb299;--surface-card:#1e293b;
 --amber:#ffdf85;--amber-soft:#40361f;--teal:#79d9b7;--teal-soft:#173f37;--teal-ink:#a1e3c8;
 --coral:#ffb299;--coral-soft:#472f30;--coral-ink:#ffc5b3;--club-line:#aab7d0;--club-map:#263e36;
 --status-success-ink:#a1e3c8;--status-warning-ink:#ffdf85;--status-danger-ink:#ffb4b4;
}
@media screen{
 body{font-family:var(--font-body);background:var(--bg);color:var(--ink)}
 h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.025em;line-height:1.25}
 h1{font-size:clamp(27px,3.2vw,40px)}
 .card,.admin-stat-card,.teacher-stat-card,.mini-stat{box-shadow:none;border-radius:16px;min-width:0}
 .card{padding:clamp(16px,2.2vw,28px)}
 .btn,.auth-btn{min-height:44px;border:1px solid transparent;box-shadow:none;line-height:1.4;touch-action:manipulation}
 .btn:not(.secondary):not(.ghost):not(:disabled):hover,.auth-btn:not(:disabled):hover{box-shadow:0 3px 0 #20274226}
 .btn.secondary{background:var(--surface);border-color:var(--border)}
 button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
 input,select,textarea{max-width:100%;min-width:0;font-family:inherit}
 .auth-input{font-size:16px}
 .grade-switcher{background:var(--surface);border-color:var(--border);color:var(--ink-soft);font-size:12px}
 .grade-switcher a{font-weight:650;color:var(--brand-primary)}
 .auth-container{width:100%;min-width:0}
 .auth-card{border:1px solid var(--border);background:var(--surface);box-shadow:0 12px 40px var(--shadow);border-radius:18px;width:min(480px,100%);max-width:100%}
 .auth-card::before{height:4px;background:linear-gradient(90deg,#4267f2 0 55%,#ffd44b 55% 78%,#ff6d54 78%)}
 .auth-header .auth-page-logo,.auth-page-logo,.auth-logo-img{width:240px!important;height:80px!important;object-fit:contain;background:#fff;border-radius:10px;padding:4px;box-shadow:none;display:block;margin:0 auto 18px;max-width:100%}
 .auth-header h1{letter-spacing:-.03em;font-size:28px}
 .auth-header p{color:var(--ink-soft);font-size:14px;line-height:1.65}
 .auth-login .auth-header p{min-height:0}
 .auth-btn{background:var(--brand-primary);border:1px solid var(--brand-primary);border-radius:9px;color:var(--accent-ink);font-family:inherit}
 .auth-footer-links a{color:var(--brand-primary)}
 .teacher-header,.admin-header,.unit-hero,.hero{background:var(--surface);border:1px solid var(--border);color:var(--ink);box-shadow:none}
 .teacher-header .th-sub,.admin-header p,.unit-hero .desc{color:var(--ink-soft)}
 .teacher-header::before,.teacher-header::after,.admin-header::before,.admin-header::after{display:none}
 .teacher-badge{background:var(--accent-soft);color:var(--brand-primary)}
 .admin-badge{background:var(--coral-soft);color:var(--coral-ink)}
 .admin-stat-card:hover,.teacher-stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 14px var(--shadow)}
 .section-title{flex-wrap:wrap;align-items:center;gap:8px 16px}
 .section-title h2{font-size:22px}
 .tabbar{gap:6px;flex-wrap:wrap;background:transparent;padding:0;border:0}
 .tabbtn{min-height:44px;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--ink-soft)}
 .tabbtn.active{background:var(--accent-soft);color:var(--brand-primary);border-color:var(--accent)}
 .vocab-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
 .vocab-card{box-shadow:none;border:1px solid var(--border);border-radius:14px;min-width:0}
 .vocab-card .en{font-size:24px;overflow-wrap:anywhere}
 .q-stem,.question-text{line-height:1.65;overflow-wrap:anywhere}
 .option-btn,.answer-option,.q-option{min-height:48px;white-space:normal;overflow-wrap:anywhere}
 .admin-table-container,.table-wrap,.table-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .admin-table th{background:var(--bg-soft);color:var(--ink-soft)}
 .admin-table td{line-height:1.5}
 .teacher-unit-table-scroll{scrollbar-color:var(--accent) var(--bg-soft)}
 .teacher-unit-table-scroll::-webkit-scrollbar-thumb{background:var(--accent)}
 .unit-pdf-dialog{background:var(--surface);color:var(--ink);border-color:var(--border)}
 .unit-pdf-pages{background:var(--bg-soft)}
 .mobile-more-dialog{border-radius:16px;box-shadow:0 14px 45px #20274230}
 .mobile-more-dialog header{position:sticky;top:-20px;padding:12px 0;background:var(--surface);z-index:1}
 .bottomnav{background:var(--surface);border-color:var(--border)}
 .bottomnav .navlink.active{background:var(--accent-soft);color:var(--brand-primary)}
 .triwords-footer{background:var(--surface);color:var(--ink-soft);border-color:var(--border);font-family:var(--font-body);font-size:12px}
 .triwords-footer .legal-links{border-color:var(--border)}
 .triwords-footer .legal-links h2{color:var(--ink-soft);font-size:12px;letter-spacing:0}
 .triwords-footer .legal-links a{font-size:12px}
 .triwords-footer a:focus-visible{outline-color:var(--accent)}
 .feedback-fab-btn{background:var(--accent-soft);color:var(--brand-primary);border:1px solid var(--border);box-shadow:none}
 .support-launcher{box-shadow:0 3px 12px var(--shadow)}
 @media(max-width:600px){
  .grid3,.grid2{grid-template-columns:minmax(0,1fr)}
  .card{padding:18px 15px}
  .section-title h2{font-size:20px}
  .auth-card{padding:24px 18px}
  .auth-header .auth-page-logo,.auth-page-logo{width:210px!important;height:70px!important}
  .tabbar{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:4px 3px 9px;scrollbar-width:thin}
  .tabbtn{flex:none;max-width:100%;font-size:13px}
  .btn-row>*{max-width:100%}
  .triwords-footer{gap:12px;padding-inline:16px}
 }
}