/*
  Final visual refinement layer and responsive overrides.
  Extracted from snippetz-study-v5.html so the HTML can stay focused on markup.
  Keep this file loaded in the order declared in the HTML because later files refine earlier styles.
*/

    /* ── APPLE GLASS REDESIGN LAYER ────────────────────────────────── */
    :root {
      --bg: #f5f7fb;
      --bg2: #e9edf5;
      --white: rgba(255, 255, 255, .74);
      --surface: rgba(255, 255, 255, .62);
      --border: rgba(21, 31, 47, .09);
      --border2: rgba(21, 31, 47, .14);
      --text: #111827;
      --text2: #475467;
      --text3: #8a94a6;
      --accent: #007aff;
      --al: rgba(0, 122, 255, .1);
      --ab: rgba(0, 122, 255, .2);
      --green: #2fb344;
      --gl: rgba(47, 179, 68, .1);
      --gb: rgba(47, 179, 68, .2);
      --red: #ff3b30;
      --rl: rgba(255, 59, 48, .1);
      --rb: rgba(255, 59, 48, .2);
      --orange: #ff9500;
      --ol: rgba(255, 149, 0, .12);
      --ob: rgba(255, 149, 0, .23);
      --purple: #af52de;
      --pl: rgba(175, 82, 222, .1);
      --pb: rgba(175, 82, 222, .22);
      --teal: #00a6a6;
      --tl: rgba(0, 166, 166, .1);
      --tb: rgba(0, 166, 166, .22);
      --yellow: #d89b00;
      --yl: rgba(216, 155, 0, .1);
      --yb: rgba(216, 155, 0, .22);
      --pink: #ff2d55;
      --pkl: rgba(255, 45, 85, .1);
      --glass: rgba(255, 255, 255, .66);
      --glass-strong: rgba(255, 255, 255, .82);
      --hairline: rgba(255, 255, 255, .72);
      --sh: 0 10px 30px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
      --shm: 0 22px 55px rgba(16, 24, 40, .12), 0 6px 18px rgba(16, 24, 40, .07);
      --r: 18px;
      --rs: 13px;
    }

    html,
    body {
      background:
        radial-gradient(circle at 15% 8%, rgba(0, 122, 255, .12), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(52, 199, 89, .10), transparent 24%),
        linear-gradient(145deg, #fbfcff 0%, #eef3f9 52%, #f8fafc 100%);
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Plus Jakarta Sans", sans-serif;
      letter-spacing: 0;
      color: var(--text);
    }

    .sb,
    .topbar,
    .card,
    .csm,
    .sbox,
    .cc,
    .li,
    .ring,
    .wsl,
    .wsr,
    .topic-item,
    .asgn-item,
    .msg-item,
    .cls-item,
    .note-it,
    .modal,
    .auth-card,
    .ob-path-btn {
      background: var(--glass);
      border: 1px solid var(--hairline);
      box-shadow: var(--sh);
      -webkit-backdrop-filter: blur(26px) saturate(180%);
      backdrop-filter: blur(26px) saturate(180%);
    }

    .sb {
      width: 248px;
      min-width: 248px;
      border-right: 1px solid rgba(21, 31, 47, .08);
      background: rgba(255, 255, 255, .58);
    }

    .sb-logo {
      padding: 22px 16px 16px;
      border-bottom-color: rgba(21, 31, 47, .07);
    }

    .sb-brand {
      gap: 10px;
      margin-bottom: 8px;
    }

    .sb-icon,
    .auth-logo-ic {
      background: linear-gradient(145deg, #111827, #007aff 70%, #5ac8fa);
      border-radius: 11px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 20px rgba(0, 122, 255, .24);
    }

    .sb-name,
    .tb-title,
    .ph,
    .sval,
    .ot,
    .ih-title,
    .auth-logo-nm,
    .modal-title,
    .ring-pct,
    .is-val {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", sans-serif;
      font-weight: 760;
      letter-spacing: 0;
    }

    .sb-name {
      font-size: 17px;
    }

    .sb-mode,
    .nbadge,
    .pill,
    .stl,
    .slbl,
    .cc-cd,
    .u-meta,
    .k-lbl,
    .fl,
    .gtable th,
    .stu-table th,
    .li-end,
    .ring-d,
    .ib-lbl,
    .is-lbl,
    .osl,
    .bc-lbl,
    .tt-head,
    .tt-time {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Plus Jakarta Sans", sans-serif;
      letter-spacing: .02em;
    }

    .sb-grp {
      padding: 10px 10px 2px;
    }

    .sb-grp-lbl {
      padding: 0 10px;
      margin-bottom: 6px;
      color: #98a2b3;
    }

    .ni {
      border-radius: 14px;
      padding: 9px 10px;
      margin-bottom: 3px;
      color: #566274;
      font-weight: 650;
      font-size: 12.5px;
    }

    .ni:hover {
      background: rgba(255, 255, 255, .78);
      color: var(--text);
      transform: translateX(2px);
    }

    .ni.on {
      background: linear-gradient(135deg, rgba(0, 122, 255, .16), rgba(255, 255, 255, .82));
      color: #0057d9;
      border-color: rgba(0, 122, 255, .18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 10px 24px rgba(0, 122, 255, .1);
    }

    .sb-foot {
      padding: 10px;
      border-top-color: rgba(21, 31, 47, .07);
    }

    .u-row {
      border-radius: 16px;
      padding: 10px;
      background: rgba(255, 255, 255, .42);
    }

    .av,
    .msg-av,
    .k-orb {
      background: linear-gradient(145deg, #007aff, #5ac8fa);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px rgba(0, 122, 255, .24);
    }

    .main {
      background: transparent;
    }

    .topbar {
      height: 64px;
      min-height: 64px;
      margin: 12px 14px 0;
      border-radius: 22px;
      border-bottom: 1px solid var(--hairline);
      padding: 0 18px 0 22px;
    }

    .tb-title {
      font-size: 20px;
    }

    .tb-sub {
      color: var(--text3);
    }

    .pg {
      padding: 22px;
    }

    .ph {
      font-size: 30px;
      margin-bottom: 5px;
    }

    .ps {
      color: #667085;
      margin-bottom: 20px;
    }

    .btn,
    .gbtn,
    .tab,
    .chip,
    .exam-type-btn,
    .tt-view-btn {
      border-radius: 999px;
      min-height: 32px;
      border-color: rgba(21, 31, 47, .1);
      background: rgba(255, 255, 255, .7);
      color: #344054;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 2px rgba(16, 24, 40, .04);
      -webkit-backdrop-filter: blur(18px) saturate(170%);
      backdrop-filter: blur(18px) saturate(170%);
    }

    .btn:hover,
    .chip:hover,
    .tab:hover,
    .exam-type-btn:hover,
    .tt-view-btn:hover {
      background: rgba(255, 255, 255, .9);
      color: #111827;
      transform: translateY(-1px);
      box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
    }

    .btn.pr,
    .gbtn,
    .auth-tab.on,
    .tab.on,
    .tt-view-btn.on,
    .exam-type-btn.on {
      background: linear-gradient(135deg, #007aff, #0a84ff);
      border-color: rgba(0, 122, 255, .24);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 12px 26px rgba(0, 122, 255, .22);
    }

    .btn.pr:hover,
    .gbtn:hover {
      background: linear-gradient(135deg, #006ee6, #007aff);
      color: #fff;
    }

    .card,
    .csm,
    .sbox,
    .cc,
    .ring,
    .wsl,
    .wsr,
    .modal,
    .auth-card {
      border-radius: 22px;
    }

    .card,
    .csm {
      padding: 18px 20px;
    }

    .sbox {
      padding: 18px;
      position: relative;
      overflow: hidden;
    }

    .sbox::after,
    .cc::after,
    .card::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(145deg, rgba(255, 255, 255, .55), transparent 38%);
      opacity: .72;
    }

    .slbl,
    .stl {
      color: #7b8496;
      font-weight: 800;
    }

    .sval {
      font-size: 34px;
    }

    .shint {
      color: #8a94a6;
    }

    .kai,
    .inst-head {
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, .75);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .5)),
        linear-gradient(135deg, rgba(0, 122, 255, .14), rgba(90, 200, 250, .08));
      box-shadow: var(--sh);
      -webkit-backdrop-filter: blur(28px) saturate(185%);
      backdrop-filter: blur(28px) saturate(185%);
    }

    .inst-head {
      color: var(--text);
    }

    .ih-sub,
    .is-lbl {
      color: var(--text3);
      opacity: 1;
    }

    .is-box {
      background: rgba(255, 255, 255, .58);
      border: 1px solid rgba(255, 255, 255, .72);
      border-radius: 16px;
    }

    .is-val {
      color: var(--text);
    }

    .k-orb {
      width: 38px;
      height: 38px;
    }

    .chip {
      color: #0057d9;
      border-color: rgba(0, 122, 255, .16);
    }

    .cc {
      min-height: 158px;
      padding: 20px;
      border-color: rgba(255, 255, 255, .72);
    }

    .cc:hover,
    .ring:hover,
    .li:hover,
    .topic-item:hover,
    .note-it:hover,
    .msg-item:hover,
    .ob-path-btn:hover {
      border-color: rgba(0, 122, 255, .24);
      background: rgba(255, 255, 255, .84);
      box-shadow: var(--shm);
      transform: translateY(-2px);
    }

    .cc-bar {
      height: 5px;
      opacity: .9;
    }

    .cc-ic {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      background: rgba(255, 255, 255, .72);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
    }

    .pb-wrap,
    .mini-bar,
    .sd {
      background: rgba(17, 24, 39, .08);
      border-radius: 999px;
    }

    .pb-fill,
    .mini-fill {
      border-radius: 999px;
    }

    .li,
    .topic-item,
    .asgn-item,
    .msg-item,
    .cls-item,
    .note-it,
    .ob-path-btn {
      border-radius: 16px;
      background: rgba(255, 255, 255, .6);
    }

    .pill,
    .nbadge,
    .risk-b,
    .topic-imp,
    .grade-pill {
      border-radius: 999px;
    }

    .fi,
    input[type="color"] {
      min-height: 38px;
      background: rgba(255, 255, 255, .72);
      border-color: rgba(21, 31, 47, .12);
      border-radius: 14px;
      box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
    }

    .fi:focus {
      background: rgba(255, 255, 255, .96);
      border-color: rgba(0, 122, 255, .42);
      box-shadow: 0 0 0 4px rgba(0, 122, 255, .11);
    }

    .modal-overlay {
      background: rgba(17, 24, 39, .24);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    .modal {
      border-radius: 26px;
      padding: 26px;
      box-shadow: 0 35px 80px rgba(16, 24, 40, .22);
    }

    .modal-title {
      font-size: 22px;
    }

    .auth-card {
      border-radius: 28px;
      padding: 38px;
    }

    .auth-tabs {
      border-radius: 999px;
      padding: 3px;
      background: rgba(17, 24, 39, .06);
      border-color: rgba(21, 31, 47, .08);
    }

    .auth-tab {
      border-radius: 999px;
    }

    #auth-overlay [style*="Instrument Serif"],
    #admin-overlay [style*="Instrument Serif"],
    #teacher-overlay [style*="Instrument Serif"] {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", sans-serif !important;
      font-weight: 760;
      letter-spacing: 0;
    }

    #ob-welcome .auth-card {
      max-width: 430px;
    }

    #ob-welcome [style*="font-size:28px"] {
      font-size: 29px !important;
      line-height: 1.08;
    }

    #ob-welcome .auth-card>div:first-child {
      background: transparent !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }

    #ob-welcome .auth-card>div:first-child>div:first-child {
      background: linear-gradient(145deg, #007aff, #635bff) !important;
      border-radius: 15px !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 34px rgba(0, 122, 255, .28) !important;
    }

    .gtable th,
    .stu-table th {
      background: rgba(17, 24, 39, .04);
    }

    .gtable td,
    .stu-table td,
    .gtable th,
    .stu-table th {
      border-bottom-color: rgba(21, 31, 47, .07);
    }

    .gtable tr:hover td,
    .stu-table tr:hover td {
      background: rgba(0, 122, 255, .05);
    }

    .tt-head,
    .tt-time,
    .tt-cell.empty {
      background: rgba(255, 255, 255, .56);
      border: 1px solid rgba(255, 255, 255, .7);
      border-radius: 14px;
    }

    .tt-cell {
      border-radius: 14px;
      box-shadow: 0 8px 18px rgba(16, 24, 40, .08);
    }

    .fc {
      border-radius: 26px;
      background: rgba(255, 255, 255, .72);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      backdrop-filter: blur(28px) saturate(180%);
    }

    .tab-row {
      background: rgba(255, 255, 255, .48);
      border: 1px solid rgba(255, 255, 255, .7);
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
      width: fit-content;
      max-width: 100%;
      overflow-x: auto;
    }

    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(102, 112, 133, .28);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }

    @media (max-width: 1100px) {
      .auth-split {
        grid-template-columns: 1fr;
      }

      .auth-showcase {
        min-height: auto;
      }

      .sr4,
      .g4,
      .cgrid,
      #ai-tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .g2,
      .gms,
      .gws {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .auth-split {
        min-height: 0;
      }

      .auth-showcase {
        padding: 24px;
      }

      .auth-proof-grid {
        grid-template-columns: 1fr;
      }

      body {
        flex-direction: column;
        overflow: auto;
      }

      .sb {
        width: auto;
        min-width: 0;
        max-height: 42vh;
        border-right: 0;
        border-bottom: 1px solid rgba(21, 31, 47, .08);
      }

      .topbar {
        margin: 10px;
        min-height: auto;
        height: auto;
        flex-wrap: wrap;
        padding: 14px;
      }

      .tb-right {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      .pg {
        padding: 14px;
      }

      .sr4,
      .sr3,
      .g3,
      .g4,
      .cgrid,
      #ai-tools-grid {
        grid-template-columns: 1fr !important;
      }

      .ph {
        font-size: 26px;
      }
    }

    /* ── APPLE-SOFTWARE PASS ───────────────────────────────────────── */
    :root {
      --bg: #f2f4f7;
      --bg2: #e6e9ee;
      --white: rgba(255, 255, 255, .68);
      --surface: rgba(255, 255, 255, .58);
      --border: rgba(15, 23, 42, .075);
      --border2: rgba(15, 23, 42, .12);
      --text: #0b1220;
      --text2: #445064;
      --text3: #8791a3;
      --accent: #0a84ff;
      --al: rgba(10, 132, 255, .085);
      --ab: rgba(10, 132, 255, .18);
      --glass: rgba(255, 255, 255, .62);
      --glass-strong: rgba(255, 255, 255, .82);
      --hairline: rgba(255, 255, 255, .82);
      --sh: 0 1px 1px rgba(15, 23, 42, .035), 0 14px 34px rgba(15, 23, 42, .065);
      --shm: 0 2px 4px rgba(15, 23, 42, .055), 0 28px 70px rgba(15, 23, 42, .13);
      --r: 22px;
      --rs: 15px;
    }

    html,
    body {
      background:
        linear-gradient(180deg, #fbfcfe 0%, #f2f5f9 42%, #edf1f6 100%),
        repeating-linear-gradient(90deg, rgba(15, 23, 42, .018) 0, rgba(15, 23, 42, .018) 1px, transparent 1px, transparent 48px);
    }

    body {
      font-size: 13px;
      font-weight: 500;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    .sb,
    .topbar,
    .card,
    .csm,
    .sbox,
    .cc,
    .li,
    .ring,
    .wsl,
    .wsr,
    .topic-item,
    .asgn-item,
    .msg-item,
    .cls-item,
    .note-it,
    .modal,
    .auth-card,
    .ob-path-btn,
    .fc {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .56));
      border: 1px solid rgba(255, 255, 255, .86);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 1px rgba(15, 23, 42, .035), 0 18px 48px rgba(15, 23, 42, .08);
      -webkit-backdrop-filter: blur(34px) saturate(165%);
      backdrop-filter: blur(34px) saturate(165%);
    }

    .card::after,
    .cc::after,
    .sbox::after {
      display: none;
    }

    .sb {
      width: 264px;
      min-width: 264px;
      margin: 12px 0 12px 12px;
      border-radius: 28px;
      border-right: 1px solid rgba(255, 255, 255, .86);
      overflow: hidden;
    }

    .sb-logo {
      padding: 24px 18px 18px;
    }

    .sb-icon,
    .auth-logo-ic,
    #ob-welcome .auth-card>div:first-child>div:first-child {
      background: #0b1220 !important;
      color: #fff;
      border-radius: 14px !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 36px rgba(15, 23, 42, .18) !important;
    }

    .sb-name {
      font-size: 18px;
      font-weight: 780;
    }

    .sb-mode {
      background: rgba(15, 23, 42, .055);
      border-color: rgba(15, 23, 42, .06);
      color: #4b5565;
      padding: 4px 10px;
      font-size: 9.5px;
    }

    .sb-mode::before {
      background: #30d158;
      box-shadow: 0 0 0 4px rgba(48, 209, 88, .13);
    }

    .sb-grp {
      padding: 12px 12px 2px;
    }

    .sb-grp-lbl,
    .stl,
    .slbl {
      color: #9aa3b2;
      font-size: 9px;
      letter-spacing: .09em;
    }

    .ni {
      padding: 10px 11px;
      border-radius: 16px;
      font-weight: 680;
      color: #5f6b7d;
    }

    .ni:hover {
      background: rgba(255, 255, 255, .78);
      transform: none;
    }

    .ni.on {
      background: rgba(11, 18, 32, .92);
      color: #fff;
      border-color: rgba(11, 18, 32, .05);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 28px rgba(11, 18, 32, .16);
    }

    .ni.on .nbadge {
      background: rgba(255, 255, 255, .14);
      color: #fff;
      border-color: rgba(255, 255, 255, .08);
    }

    .nbadge,
    .pill {
      background: rgba(15, 23, 42, .055);
      border: 1px solid rgba(15, 23, 42, .06);
      color: #465367;
      padding: 3px 8px;
    }

    .sb-foot {
      padding: 12px;
    }

    .u-row {
      background: rgba(255, 255, 255, .52);
      border: 1px solid rgba(255, 255, 255, .72);
    }

    .av,
    .msg-av,
    .k-orb {
      background: #0b1220;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 30px rgba(15, 23, 42, .16);
    }

    .topbar {
      height: 68px;
      min-height: 68px;
      margin: 12px 12px 0;
      border-radius: 28px;
      padding: 0 18px 0 24px;
    }

    .tb-title {
      font-size: 21px;
      font-weight: 780;
    }

    .tb-sub {
      font-size: 12px;
      color: #8b94a5;
    }

    .pg {
      padding: 26px;
    }

    .ph {
      font-size: 34px;
      line-height: 1.03;
      font-weight: 820;
      margin-bottom: 7px;
    }

    .ps {
      font-size: 13px;
      color: #687386;
      margin-bottom: 24px;
    }

    .btn,
    .gbtn,
    .tab,
    .chip,
    .exam-type-btn,
    .tt-view-btn {
      min-height: 36px;
      padding: 8px 14px;
      background: rgba(255, 255, 255, .66);
      border: 1px solid rgba(255, 255, 255, .82);
      color: #394557;
      font-weight: 700;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 20px rgba(15, 23, 42, .055);
    }

    .btn:hover,
    .chip:hover,
    .tab:hover,
    .exam-type-btn:hover,
    .tt-view-btn:hover {
      background: rgba(255, 255, 255, .9);
      transform: translateY(-1px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 14px 30px rgba(15, 23, 42, .09);
    }

    .btn.pr,
    .gbtn,
    .auth-tab.on,
    .tab.on,
    .tt-view-btn.on,
    .exam-type-btn.on {
      background: #0b1220;
      border-color: rgba(11, 18, 32, .08);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 34px rgba(15, 23, 42, .18);
    }

    .btn.pr:hover,
    .gbtn:hover {
      background: #161f31;
    }

    .sr4,
    .sr3,
    .g2,
    .g3,
    .g4,
    .cgrid {
      gap: 16px;
    }

    .card,
    .csm,
    .sbox,
    .cc,
    .ring {
      border-radius: 26px;
    }

    .card,
    .csm {
      padding: 22px;
    }

    .sbox {
      padding: 22px;
      min-height: 122px;
    }

    .sbox:hover,
    .cc:hover,
    .card:hover,
    .ring:hover {
      background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .64));
      border-color: rgba(255, 255, 255, .95);
      transform: translateY(-3px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 30px 78px rgba(15, 23, 42, .13);
    }

    .sval {
      font-size: 40px;
      line-height: .96;
      letter-spacing: -.02em;
      color: #0b1220;
    }

    .shint {
      color: #8f98a8;
      margin-top: 5px;
    }

    .c-b,
    .c-g,
    .c-r,
    .c-o,
    .c-p,
    .c-t,
    .c-y {
      color: #0b1220;
    }

    .kai,
    .inst-head {
      border-radius: 30px;
      padding: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .58));
      border: 1px solid rgba(255, 255, 255, .9);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 24px 64px rgba(15, 23, 42, .095);
    }

    .k-orb {
      width: 42px;
      height: 42px;
      animation: none;
    }

    .k-lbl,
    .osl {
      color: #566274;
    }

    .k-msg {
      color: #202b3d;
      font-size: 13.5px;
    }

    .chip {
      color: #2f3b4f;
    }

    .cc {
      min-height: 178px;
      padding: 24px;
    }

    .cc-bar {
      height: 0;
    }

    .cc-ic,
    .asgn-icon {
      width: 42px;
      height: 42px;
      border-radius: 16px;
      background: rgba(15, 23, 42, .055);
      color: #111827;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    }

    .cc-nm {
      font-size: 15px;
      font-weight: 780;
      margin-top: 4px;
    }

    .cc-cd {
      color: #8b94a5;
      margin-bottom: 14px;
    }

    .pb-wrap,
    .mini-bar {
      height: 6px;
      background: rgba(15, 23, 42, .07);
    }

    .pb-fill,
    .mini-fill,
    .bc-bar,
    .sd.y,
    .sd.t {
      background: #0b1220 !important;
      border-color: #0b1220 !important;
    }

    .li,
    .topic-item,
    .asgn-item,
    .msg-item,
    .cls-item,
    .note-it,
    .ob-path-btn {
      padding: 13px 15px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .li:hover,
    .topic-item:hover,
    .asgn-item:hover,
    .msg-item:hover,
    .cls-item:hover,
    .note-it:hover,
    .ob-path-btn:hover {
      background: rgba(255, 255, 255, .86);
      transform: translateY(-2px);
    }

    .li-name,
    .asgn-name,
    .cls-name,
    .msg-name {
      font-weight: 520;
      color: #182235;
    }

    .fi,
    input[type="color"] {
      min-height: 42px;
      border-radius: 16px;
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(15, 23, 42, .08);
      font-weight: 580;
    }

    .fi:focus {
      border-color: rgba(10, 132, 255, .45);
      box-shadow: 0 0 0 4px rgba(10, 132, 255, .1), inset 0 1px 2px rgba(15, 23, 42, .035);
    }

    .tab-row,
    .auth-tabs {
      background: rgba(15, 23, 42, .055);
      border: 1px solid rgba(255, 255, 255, .7);
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, .045);
    }

    .modal-overlay {
      background: rgba(8, 13, 23, .28);
      -webkit-backdrop-filter: blur(24px) saturate(130%);
      backdrop-filter: blur(24px) saturate(130%);
    }

    .modal {
      border-radius: 32px;
      padding: 30px;
      max-width: 500px;
    }

    .modal-title {
      font-size: 25px;
      letter-spacing: -.015em;
    }

    .auth-card {
      border-radius: 34px;
      padding: 42px 40px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), 0 36px 90px rgba(15, 23, 42, .12);
    }

    #auth-overlay {
      background:
        linear-gradient(180deg, #fbfcfe 0%, #f2f5f9 55%, #edf1f6 100%) !important;
    }

    #ob-welcome .auth-card {
      max-width: 470px;
      padding: 46px 38px 38px;
    }

    #ob-welcome [style*="font-size:28px"] {
      font-size: 32px !important;
      letter-spacing: -.025em;
      line-height: 1.02 !important;
      max-width: 340px;
      margin-left: auto;
      margin-right: auto;
      color: #0b1220;
    }

    #ob-welcome .auth-card>div:first-child>div:first-child {
      width: 60px !important;
      height: 60px !important;
      margin-bottom: 18px !important;
    }

    #ob-welcome .ob-path-btn {
      min-height: 76px;
      padding: 16px 18px;
    }

    .gtable,
    .stu-table {
      border-collapse: separate;
      border-spacing: 0;
    }

    .gtable th,
    .stu-table th {
      background: rgba(15, 23, 42, .045);
      color: #7c8798;
      padding: 12px 14px;
    }

    .gtable td,
    .stu-table td {
      padding: 13px 14px;
    }

    .tt-grid {
      gap: 8px;
    }

    .tt-head,
    .tt-time,
    .tt-cell.empty {
      border-radius: 18px;
      background: rgba(255, 255, 255, .58);
    }

    .tt-cell {
      border-radius: 18px;
      min-height: 58px;
    }

    .fc {
      width: min(520px, 100%);
      height: 230px;
    }

    @media (max-width: 760px) {
      .sb {
        margin: 10px;
        width: auto;
        min-width: 0;
        border-radius: 26px;
      }

      .topbar {
        border-radius: 24px;
      }

      .auth-card {
        padding: 34px 28px;
      }

      #ob-welcome [style*="font-size:28px"] {
        font-size: 28px !important;
      }
    }

    /* ── HELVETICA EDITORIAL REDESIGN — SOLID AND QUIET ─────────────── */
    :root {
      --bg: #f6f6f4;
      --bg2: #ececea;
      --white: #ffffff;
      --surface: #fbfbfa;
      --border: #e6e6e3;
      --border2: #d7d7d2;
      --text: #171717;
      --text2: #555a63;
      --text3: #8c929d;
      --accent: #111111;
      --al: #f0f0ee;
      --ab: #deded9;
      --green: #16833a;
      --gl: #eef8f1;
      --gb: #ccebd4;
      --red: #d92d20;
      --rl: #fff0ee;
      --rb: #ffd6d1;
      --orange: #b75f00;
      --ol: #fff5e8;
      --ob: #f5d7ad;
      --purple: #6d42c7;
      --pl: #f3efff;
      --pb: #ded3ff;
      --teal: #087d77;
      --tl: #eaf8f7;
      --tb: #c9ece9;
      --yellow: #9d7200;
      --yl: #fff8dc;
      --yb: #eadb9c;
      --pink: #c2255c;
      --pkl: #fff0f5;
      --sh: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 34px rgba(16, 24, 40, .055);
      --shm: 0 2px 3px rgba(16, 24, 40, .05), 0 24px 54px rgba(16, 24, 40, .095);
      --r: 20px;
      --rs: 12px;
    }

    html,
    body {
      background:
        linear-gradient(180deg, #fafaf8 0%, #f4f4f1 50%, #efefec 100%);
    }

    body,
    button,
    input,
    select,
    textarea {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      letter-spacing: 0;
    }

    .sb-mode,
    .nbadge,
    .pill,
    .stl,
    .slbl,
    .cc-cd,
    .u-meta,
    .k-lbl,
    .fl,
    .gtable th,
    .stu-table th,
    .li-end,
    .ring-d,
    .ib-lbl,
    .is-lbl,
    .osl,
    .bc-lbl,
    .tt-head,
    .tt-time,
    code {
      font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace !important;
      letter-spacing: .02em;
    }

    .sb-name,
    .tb-title,
    .ph,
    .sval,
    .ot,
    .ih-title,
    .auth-logo-nm,
    .modal-title,
    .ring-pct,
    .is-val,
      #auth-overlay [style*="Instrument Serif"],
      #admin-overlay [style*="Instrument Serif"],
      #teacher-overlay [style*="Instrument Serif"] {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      font-weight: 520;
      letter-spacing: -.025em;
    }

    #auth-overlay [style*="font-weight:700"],
    #admin-overlay [style*="font-weight:700"],
    #teacher-overlay [style*="font-weight:700"] {
      font-weight: 520 !important;
    }

    .sb,
    .topbar,
    .card,
    .csm,
    .sbox,
    .cc,
    .li,
    .ring,
    .wsl,
    .wsr,
    .topic-item,
    .asgn-item,
    .msg-item,
    .cls-item,
    .note-it,
    .modal,
    .auth-card,
    .ob-path-btn,
    .fc,
    .kai,
    .inst-head {
      background: var(--white);
      border: 1px solid var(--border);
      box-shadow: var(--sh);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .sb {
      width: 258px;
      min-width: 258px;
      margin: 14px 0 14px 14px;
      border-radius: 24px;
      background: #fbfbfa;
    }

    .topbar {
      margin: 14px 14px 0;
      border-radius: 24px;
      height: 66px;
      min-height: 66px;
    }

    .pg {
      padding: 28px;
    }

    .sb-icon,
    .auth-logo-ic,
    .av,
    .msg-av,
    .k-orb,
    #ob-welcome .auth-card>div:first-child>div:first-child {
      background: #111 !important;
      border-radius: 13px !important;
      box-shadow: 0 10px 24px rgba(17, 17, 17, .14) !important;
    }

    .sb-name {
      font-size: 17px;
      font-weight: 520;
    }

    .tb-title {
      font-size: 19px;
      font-weight: 520;
    }

    .ph {
      font-size: 32px;
      line-height: 1.04;
      font-weight: 520;
    }

    .ps {
      color: #6d737d;
      font-size: 13px;
    }

    .ni {
      font-weight: 520;
      color: #5f646d;
      border-radius: 13px;
      padding: 9px 11px;
    }

    .ni.on {
      background: #171717;
      color: #fff;
      border-color: #171717;
      box-shadow: none;
    }

    .btn,
    .gbtn,
    .tab,
    .chip,
    .exam-type-btn,
    .tt-view-btn {
      min-height: 34px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid var(--border2);
      box-shadow: none;
      color: #252525;
      font-weight: 520;
    }

    .btn:hover,
    .chip:hover,
    .tab:hover,
    .exam-type-btn:hover,
    .tt-view-btn:hover {
      transform: none;
      background: #f3f3f1;
      box-shadow: none;
    }

    .btn.pr,
    .gbtn,
    .auth-tab.on,
    .tab.on,
    .tt-view-btn.on,
    .exam-type-btn.on {
      background: #171717;
      color: #fff;
      border-color: #171717;
      box-shadow: none;
    }

    .card,
    .csm,
    .sbox,
    .cc,
    .ring,
    .auth-card,
    .modal {
      border-radius: 22px;
    }

    .card:hover,
    .sbox:hover,
    .cc:hover,
    .ring:hover {
      transform: translateY(-2px);
      background: #fff;
      box-shadow: var(--shm);
      border-color: #dcdcd7;
    }

    .sbox {
      min-height: 112px;
      padding: 20px;
    }

    .sval {
      font-size: 36px;
      font-weight: 500;
      color: #171717;
    }

    .stl,
    .slbl {
      color: #8a8f98;
      font-weight: 650;
      letter-spacing: .08em;
    }

    .kai,
    .inst-head {
      border-radius: 24px;
      background: #fbfbfa;
    }

    .k-msg {
      color: #2f3339;
    }

    .cc {
      min-height: 164px;
      padding: 22px;
    }

    .cc-ic,
    .asgn-icon {
      background: #f1f1ee;
      border-radius: 14px;
      box-shadow: none;
    }

    .li,
    .topic-item,
    .asgn-item,
    .msg-item,
    .cls-item,
    .note-it,
    .ob-path-btn {
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
    }

    .fi,
    input[type="color"] {
      border-radius: 12px;
      background: #fff;
      border-color: var(--border2);
      box-shadow: none;
      font-weight: 400;
    }

    .fi:focus {
      border-color: #171717;
      box-shadow: 0 0 0 3px rgba(17, 17, 17, .08);
    }

    .tab-row,
    .auth-tabs {
      background: #efefec;
      border-color: #e3e3df;
      border-radius: 14px;
      box-shadow: none;
    }

    .tab {
      border-radius: 10px;
    }

    .modal-overlay {
      background: rgba(246, 246, 244, .84);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    #auth-overlay {
      background:
        linear-gradient(180deg, #fafaf8 0%, #f4f4f1 54%, #efefec 100%) !important;
    }

    #ob-welcome .auth-card {
      max-width: 500px;
      padding: 48px 42px 40px;
    }

    #ob-welcome [style*="font-size:28px"] {
      font-size: 31px !important;
      font-weight: 500 !important;
      letter-spacing: -.035em;
      line-height: 1.02 !important;
    }

    #ob-welcome .ob-path-btn {
      min-height: 74px;
      background: #fff;
    }

    .pb-fill,
    .mini-fill,
    .bc-bar,
    .sd.y,
    .sd.t {
      background: #171717 !important;
      border-color: #171717 !important;
    }

    @media (max-width: 760px) {
      .ph {
        font-size: 27px;
      }

      #ob-welcome [style*="font-size:28px"] {
        font-size: 27px !important;
      }
    }

    /* ── FLUID DASHBOARD POLISH ────────────────────────────────────── */
    :root {
      --ease-apple: cubic-bezier(.2, .8, .2, 1);
      --ease-spring: cubic-bezier(.16, 1, .3, 1);
    }

    .main,
    #admin-overlay,
    #teacher-overlay {
      font-weight: 400;
    }

    .main [style*="font-weight:700"],
    .main [style*="font-weight:800"],
    #admin-overlay [style*="font-weight:700"],
    #admin-overlay [style*="font-weight:800"],
    #teacher-overlay [style*="font-weight:700"],
    #teacher-overlay [style*="font-weight:800"] {
      font-weight: 480 !important;
    }

    .u-name,
    .li-name,
    .asgn-name,
    .cls-name,
    .msg-name,
    .cc-nm,
    .topic-nm,
    .ot,
    .modal-title,
    .auth-logo-nm,
    .ih-title {
      font-weight: 480 !important;
    }

    .sval,
    .ring-pct,
    .is-val {
      font-weight: 440 !important;
    }

    .stl,
    .slbl,
    .k-lbl,
    .fl,
    .gtable th,
    .stu-table th,
    .sb-grp-lbl,
    .pill,
    .nbadge {
      font-weight: 520 !important;
    }

    .sb {
      background:
        linear-gradient(180deg, #ffffff 0%, #fafaf8 100%);
      box-shadow: 0 18px 44px rgba(16, 24, 40, .07);
      transform-origin: left center;
      animation: sidebarIn .72s var(--ease-spring) both;
    }

    .sb-logo {
      padding-bottom: 20px;
    }

    .sb-brand {
      gap: 11px;
    }

    .sb-icon {
      width: 32px;
      height: 32px;
      font-size: 15px;
    }

    .sb-name {
      font-size: 18px;
      font-weight: 480 !important;
    }

    .sb-mode {
      border: 0;
      background: #f1f1ee;
      padding: 5px 10px;
      color: #747a83;
    }

    .sb-nav {
      padding: 4px 8px 8px;
    }

    .sb-grp {
      padding: 12px 4px 3px;
    }

    .sb-grp-lbl {
      padding: 0 12px;
      margin-bottom: 7px;
      color: #a0a4ab;
    }

    .ni {
      position: relative;
      gap: 10px;
      padding: 10px 12px 10px 13px;
      margin-bottom: 4px;
      border-radius: 15px;
      transition:
        transform .32s var(--ease-apple),
        background .32s var(--ease-apple),
        color .32s var(--ease-apple),
        box-shadow .32s var(--ease-apple);
    }

    .ni::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 50%;
      width: 3px;
      height: 18px;
      border-radius: 999px;
      background: currentColor;
      opacity: 0;
      transform: translateY(-50%) scaleY(.35);
      transition: opacity .28s var(--ease-apple), transform .34s var(--ease-spring);
    }

    .ni:hover {
      background: #f2f2ef;
      transform: translateX(3px);
    }

    .ni.on {
      padding-left: 17px;
      background: #171717;
      box-shadow: 0 12px 24px rgba(17, 17, 17, .13);
      transform: translateX(0);
    }

    .ni.on::before {
      opacity: .9;
      transform: translateY(-50%) scaleY(1);
    }

    .ni .ic {
      width: 18px;
      opacity: .88;
      transform: translateZ(0);
      transition: transform .32s var(--ease-spring), opacity .32s var(--ease-apple);
    }

    .ni:hover .ic,
    .ni.on .ic {
      opacity: 1;
      transform: scale(1.08);
    }

    .sb-foot {
      background: linear-gradient(180deg, rgba(250, 250, 248, .4), #fff);
    }

    .u-row {
      border: 1px solid #ecece8;
      transition: transform .32s var(--ease-apple), background .32s var(--ease-apple), box-shadow .32s var(--ease-apple);
    }

    .u-row:hover {
      transform: translateY(-1px);
      background: #fff;
      box-shadow: 0 12px 26px rgba(16, 24, 40, .07);
    }

    .topbar {
      animation: topbarIn .68s var(--ease-spring) both;
    }

    .tb-title,
    .ph {
      font-weight: 470 !important;
    }

    .pg.on {
      animation: pageFloatIn .52s var(--ease-spring) both;
    }

    .kai,
    .card,
    .csm,
    .sbox,
    .cc,
    .ring,
    .li,
    .topic-item,
    .asgn-item,
    .msg-item,
    .cls-item,
    .note-it,
    .modal,
    .ob-path-btn,
    .fc {
      transition:
        transform .34s var(--ease-apple),
        box-shadow .34s var(--ease-apple),
        border-color .34s var(--ease-apple),
        background .34s var(--ease-apple),
        opacity .34s var(--ease-apple);
    }

    .kai:hover,
    .card:hover,
    .csm:hover,
    .sbox:hover,
    .cc:hover,
    .ring:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 26px 62px rgba(16, 24, 40, .11);
    }

    .li:hover,
    .topic-item:hover,
    .asgn-item:hover,
    .msg-item:hover,
    .cls-item:hover,
    .note-it:hover,
    .ob-path-btn:hover {
      transform: translateY(-2px) scale(1.006);
      box-shadow: 0 14px 34px rgba(16, 24, 40, .085);
    }

    .btn,
    .gbtn,
    .tab,
    .chip,
    .exam-type-btn,
    .tt-view-btn {
      transition:
        transform .28s var(--ease-apple),
        background .28s var(--ease-apple),
        border-color .28s var(--ease-apple),
        color .28s var(--ease-apple),
        box-shadow .28s var(--ease-apple);
    }

    .btn:hover,
    .gbtn:hover,
    .tab:hover,
    .chip:hover,
    .exam-type-btn:hover,
    .tt-view-btn:hover {
      transform: translateY(-1px);
    }

    .btn:active,
    .gbtn:active,
    .tab:active,
    .chip:active,
    .exam-type-btn:active,
    .tt-view-btn:active,
    .ni:active,
    .li:active,
    .cc:active {
      transform: scale(.985);
    }

    .btn:focus,
    .gbtn:focus,
    .tab:focus,
    .chip:focus,
    .exam-type-btn:focus,
    .tt-view-btn:focus,
    .ob-path-btn:focus,
    .ni:focus {
      outline: none;
    }

    .btn:focus-visible,
    .gbtn:focus-visible,
    .tab:focus-visible,
    .chip:focus-visible,
    .exam-type-btn:focus-visible,
    .tt-view-btn:focus-visible,
    .ob-path-btn:focus-visible,
    .ni:focus-visible {
      outline: 2px solid rgba(17, 17, 17, .72);
      outline-offset: 3px;
    }

    .admin-portal-head {
      align-items: flex-start !important;
      padding: 6px 0 10px;
    }

    .admin-portal-head>div:first-child {
      align-items: flex-start !important;
      gap: 16px !important;
      min-width: 0;
      flex: 1;
    }

    .admin-portal-mark {
      width: 56px !important;
      height: 56px !important;
      border-radius: 18px !important;
      background: #172033 !important;
      box-shadow: 0 18px 42px rgba(23, 32, 51, .16) !important;
      flex-shrink: 0;
    }

    .admin-centre-title {
      color: #171717;
      font-size: 32px !important;
      line-height: 1.05;
      font-weight: 500 !important;
      letter-spacing: -.045em;
      margin-bottom: 12px;
    }

    .admin-code-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      color: #4d535c !important;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    }

    .admin-code-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 38px;
      padding: 7px 8px 7px 13px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid #ddddda;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 24px rgba(16, 24, 40, .045);
      color: #171717;
      animation: contentRise .48s var(--ease-spring) both;
    }

    .admin-code-label {
      color: #747a83;
      font-size: 11px;
      font-weight: 420;
      letter-spacing: 0;
    }

    .admin-code-pill strong {
      color: #171717 !important;
      font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace !important;
      font-size: 14px !important;
      line-height: 1;
      letter-spacing: .16em !important;
      font-weight: 520 !important;
    }

    .admin-code-copy {
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 9px;
      background: #f1f1ee;
      border-color: #e4e4df;
      color: #2b2b2b;
      font-size: 11px;
    }

    .admin-code-copy:hover {
      background: #171717;
      border-color: #171717;
      color: #fff;
    }

    .tab.on,
    .tt-view-btn.on,
    .exam-type-btn.on {
      animation: softPop .34s var(--ease-spring) both;
    }

    .modal-overlay.open {
      animation: overlayFade .24s var(--ease-apple) both;
    }

    .modal-overlay.open .modal {
      animation: modalLift .44s var(--ease-spring) both;
    }

    .fi {
      transition: border-color .25s var(--ease-apple), box-shadow .25s var(--ease-apple), background .25s var(--ease-apple);
    }

    /* ── FORM + TEACHER/ADMIN PUSH ERGONOMICS ───────────────────── */
    .fg {
      gap: 7px;
      min-width: 0;
    }

    .fl {
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .fi {
      min-height: 40px;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    textarea.fi {
      min-height: 86px;
      line-height: 1.55;
      overflow: auto;
    }

    .auth-err,
    .li-sub,
    .shint,
    .ps {
      line-height: 1.45;
    }

    .pill,
    .stag,
    .nbadge,
    .slbl,
    .cc-cd,
    .li-end,
    .admin-code-pill strong,
    [style*="JetBrains Mono"],
    [style*="SF Mono"] {
      line-height: 1.35;
    }

    #admin-tab-push .gws,
    #tch-tab-push .gws {
      grid-template-columns: minmax(640px, .95fr) minmax(320px, .7fr);
      gap: 18px;
      align-items: start;
      min-height: calc(100vh - 230px);
    }

    #admin-tab-push .wsl,
    #tch-tab-push .wsl {
      gap: 16px;
      padding: 20px;
      overflow-x: hidden;
    }

    #admin-tab-push .wsr,
    #tch-tab-push .wsr {
      min-width: 0;
    }

    #admin-tab-push .gws [style*="display:grid"],
    #tch-tab-push .gws [style*="display:grid"] {
      gap: 12px !important;
      margin-top: 12px;
    }

    #admin-tab-push .gws [style*="display:grid"]:first-child,
    #tch-tab-push .gws [style*="display:grid"]:first-child {
      margin-top: 0;
    }

    .portal-target-box {
      border: 1px solid var(--border);
      border-radius: var(--rs);
      background: var(--white);
      padding: 10px;
    }

    .portal-target-tools {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }

    .portal-target-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }

    .portal-target-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 190px;
      overflow: auto;
      padding-right: 2px;
    }

    .portal-target-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border: 1px solid var(--border);
      border-radius: var(--rs);
      padding: 8px 10px;
      background: var(--bg);
      cursor: pointer;
      font-size: 12.5px;
    }

    .portal-target-row input {
      margin-top: 2px;
      accent-color: var(--accent);
    }

    .portal-target-empty {
      color: var(--text3);
      font-size: 12.5px;
      padding: 12px;
      text-align: center;
    }

    .portal-target-summary {
      margin-top: 8px;
      font-size: 11px;
      color: var(--text3);
      line-height: 1.45;
    }

    [data-course-package-row] {
      padding: 12px !important;
      overflow: visible;
    }

    .course-package-topic-grid,
    .course-package-assignment-grid,
    .course-package-exam-grid {
      display: grid;
      gap: 12px;
      padding-right: 22px;
      align-items: end;
    }

    .course-package-topic-grid {
      grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) minmax(112px, .45fr);
    }

    .course-package-assignment-grid {
      grid-template-columns: minmax(220px, 1.2fr) minmax(140px, .7fr) minmax(120px, .5fr) minmax(180px, 1fr);
    }

    .course-package-exam-grid {
      grid-template-columns: minmax(180px, 1.15fr) minmax(145px, .7fr) minmax(112px, .48fr) minmax(160px, 1fr) minmax(105px, .42fr);
    }

    .course-package-topic-grid .fg,
    .course-package-assignment-grid .fg,
    .course-package-exam-grid .fg {
      margin-bottom: 0 !important;
    }

    .analytics-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, .44fr);
      gap: 16px;
      align-items: start;
    }

    .analytics-stack {
      display: flex;
      flex-direction: column;
      gap: 14px;
      min-width: 0;
    }

    .analytics-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px;
      box-shadow: var(--sh);
      min-width: 0;
    }

    .analytics-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .analytics-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 8px;
    }

    .analytics-chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--bg);
      border: 1px solid var(--border);
      color: var(--text2);
      font-size: 11px;
      line-height: 1.35;
    }

    .competition-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap;
    }

    .competition-loading {
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text3);
    }

    .competition-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(150px, .25fr);
      gap: 14px;
      align-items: stretch;
      margin-bottom: 14px;
      padding: 18px;
      border: 1px solid var(--ab);
      border-radius: var(--r);
      background: linear-gradient(135deg, var(--white), var(--al));
      box-shadow: var(--sh);
      overflow: hidden;
    }

    .competition-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 6px;
    }

    .competition-title {
      font-size: 24px;
      line-height: 1.1;
      font-weight: 900;
      color: var(--text);
      margin-bottom: 7px;
    }

    .competition-sub {
      max-width: 760px;
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--text2);
    }

    .competition-hero-stat {
      min-height: 120px;
      border: 1px solid var(--border);
      border-radius: var(--rs);
      background: var(--white);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 14px;
      box-shadow: var(--sh);
    }

    .competition-hero-stat span,
    .competition-hero-stat em {
      font-size: 11px;
      color: var(--text3);
      font-style: normal;
    }

    .competition-hero-stat strong {
      font-size: 34px;
      line-height: 1;
      color: var(--accent);
      margin: 5px 0;
    }

    .competition-kpis {
      margin-bottom: 14px;
    }

    .competition-grid {
      display: grid;
      grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
      gap: 14px;
      align-items: start;
    }

    .competition-board,
    .competition-detail {
      min-width: 0;
    }

    .competition-row {
      width: 100%;
      display: grid;
      grid-template-columns: 34px 38px minmax(0, 1fr) minmax(86px, .28fr);
      gap: 10px;
      align-items: center;
      min-height: 78px;
      padding: 10px;
      margin-bottom: 8px;
      border: 1px solid var(--border);
      border-radius: var(--rs);
      background: var(--white);
      box-shadow: var(--sh);
      color: var(--text);
      text-align: left;
      cursor: pointer;
      transition: transform .16s var(--ease-apple), border-color .16s, background .16s;
      font: inherit;
    }

    .competition-row:hover,
    .competition-row.on {
      border-color: var(--ab);
      background: var(--al);
      transform: translateY(-1px);
    }

    .competition-rank {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      font-weight: 900;
      color: var(--text3);
    }

    .competition-avatar {
      width: 38px;
      height: 38px;
      border: 1px solid;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 900;
      flex-shrink: 0;
    }

    .competition-avatar.big {
      width: 54px;
      height: 54px;
      font-size: 16px;
    }

    .competition-person {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .competition-person strong,
    .competition-detail-name {
      min-width: 0;
      font-size: 13.5px;
      font-weight: 850;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .competition-person em,
    .competition-detail-name span {
      display: inline-flex;
      margin-left: 4px;
      color: var(--accent);
      font-size: 10px;
      font-style: normal;
      font-weight: 800;
      vertical-align: middle;
    }

    .competition-person small,
    .competition-detail-sub {
      font-size: 11px;
      color: var(--text3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .competition-bars {
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-width: 0;
      grid-column: 3 / 4;
    }

    .competition-bars span {
      height: 7px;
      border-radius: 999px;
      background: var(--bg2);
      overflow: hidden;
    }

    .competition-bars i {
      display: block;
      height: 100%;
      border-radius: inherit;
    }

    .competition-score {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      min-width: 0;
      grid-column: 4;
      grid-row: 1 / span 2;
    }

    .competition-score strong {
      font-size: 17px;
      font-weight: 900;
      color: var(--text);
    }

    .competition-score .pill {
      max-width: 100%;
      white-space: nowrap;
    }

    .competition-detail-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      min-width: 0;
    }

    .competition-detail-top > div:last-child {
      min-width: 0;
    }

    .competition-mini-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .competition-mini-kpis div {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: var(--rs);
      padding: 9px;
      background: var(--bg);
    }

    .competition-mini-kpis span,
    .competition-mini-kpis em {
      display: block;
      font-size: 10px;
      color: var(--text3);
      font-style: normal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .competition-mini-kpis strong {
      display: block;
      font-size: 18px;
      color: var(--text);
      margin: 2px 0;
    }

    .competition-course {
      border: 1px solid var(--border);
      border-radius: var(--rs);
      padding: 10px;
      background: var(--white);
      margin-bottom: 8px;
      box-shadow: var(--sh);
    }

    .competition-course-main,
    .competition-course-metrics {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .competition-course-main {
      margin-bottom: 7px;
    }

    .competition-course-main > div {
      min-width: 0;
    }

    .competition-course-main strong,
    .competition-course-main small {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .competition-course-main strong {
      font-size: 12.5px;
    }

    .competition-course-main small,
    .competition-course-metrics {
      font-size: 10.5px;
      color: var(--text3);
    }

    .competition-course-metrics {
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 7px;
    }

    .competition-empty {
      min-height: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 24px;
      border: 1px dashed var(--border2);
      border-radius: var(--r);
      background: var(--white);
      text-align: center;
      color: var(--text2);
    }

    .competition-empty-icon {
      font-size: 36px;
    }

    .competition-empty-title {
      font-size: 18px;
      font-weight: 850;
      color: var(--text);
    }

    .competition-empty-text {
      max-width: 520px;
      font-size: 13px;
      line-height: 1.6;
      color: var(--text3);
    }

    @media (max-width: 900px) {
      #admin-tab-push .gws,
      #tch-tab-push .gws,
      .analytics-panel,
      .competition-grid,
      .competition-hero {
        grid-template-columns: 1fr;
      }

      .analytics-kpis,
      .competition-mini-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-height: 820px) and (min-width: 901px) {
      #auth-overlay {
        padding: 10px !important;
      }

      #auth-overlay .auth-split,
      #auth-overlay .auth-showcase {
        min-height: calc(100vh - 20px) !important;
      }

      #auth-overlay .auth-showcase {
        padding: 28px !important;
      }

      .auth-brand-row {
        margin-bottom: 10px !important;
      }

      #auth-overlay .auth-status-pill {
        margin-bottom: 34px !important;
      }

      .auth-hero-title {
        font-size: 42px !important;
        margin-bottom: 12px !important;
      }

      .auth-hero-copy {
        font-size: 13px !important;
      }

      #auth-overlay .auth-proof-grid {
        margin-top: 36px !important;
        gap: 8px !important;
      }

      .auth-proof {
        min-height: 48px !important;
        padding: 11px 14px !important;
      }

      .auth-stage {
        padding: 26px 44px !important;
      }

      .auth-kicker {
        margin-bottom: 10px !important;
      }

      .auth-title {
        font-size: 38px !important;
        margin-bottom: 8px !important;
      }

      .auth-subtitle {
        margin-bottom: 16px !important;
      }

      .auth-choice-list {
        gap: 8px !important;
        margin-bottom: 22px !important;
      }

      #auth-overlay .ob-path-btn {
        min-height: 66px !important;
        padding: 12px 16px !important;
      }

      .auth-choice-icon {
        width: 38px !important;
        height: 38px !important;
      }

      .auth-signin-area {
        margin-bottom: 10px !important;
      }

      .auth-signin-btn {
        min-height: 42px !important;
      }
    }

    @media (max-width: 760px) {
      .course-package-topic-grid,
      .course-package-assignment-grid,
      .course-package-exam-grid,
      .analytics-kpis,
      .competition-mini-kpis {
        grid-template-columns: 1fr;
      }

      .competition-title {
        font-size: 20px;
      }

      .competition-row {
        grid-template-columns: 34px 38px minmax(0, 1fr) minmax(70px, .28fr);
      }

      .competition-score {
        align-items: flex-end;
      }
    }

    .pb-fill,
    .mini-fill,
    .ring-c svg circle,
    .bc-bar {
      transition: width .65s var(--ease-spring), height .65s var(--ease-spring), stroke-dashoffset .75s var(--ease-spring), transform .3s var(--ease-apple);
    }

    .bc-bar:hover {
      transform: scaleY(1.04);
    }

    .sbox,
    .cc,
    .card {
      animation: contentRise .54s var(--ease-spring) both;
    }

    .sr4 .sbox:nth-child(2),
    .sr3 .sbox:nth-child(2),
    .cgrid .cc:nth-child(2) {
      animation-delay: .04s;
    }

    .sr4 .sbox:nth-child(3),
    .sr3 .sbox:nth-child(3),
    .cgrid .cc:nth-child(3) {
      animation-delay: .08s;
    }

    .sr4 .sbox:nth-child(4),
    .cgrid .cc:nth-child(4) {
      animation-delay: .12s;
    }

    @keyframes sidebarIn {
      from {
        opacity: 0;
        transform: translateX(-18px) scale(.985);
      }

      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    @keyframes topbarIn {
      from {
        opacity: 0;
        transform: translateY(-14px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pageFloatIn {
      from {
        opacity: 0;
        transform: translateY(14px) scale(.992);
        filter: blur(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes contentRise {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes softPop {
      0% {
        transform: scale(.97);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes overlayFade {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes modalLift {
      from {
        opacity: 0;
        transform: translateY(18px) scale(.97);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .edith-chat-modal {
      width: min(820px, calc(100vw - 28px));
      max-height: min(840px, calc(100vh - 34px));
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 0%, rgba(37, 99, 235, .10), transparent 30%),
        radial-gradient(circle at 90% 8%, rgba(13, 148, 136, .10), transparent 34%),
        var(--white);
      border: 1px solid rgba(37, 99, 235, .18);
      box-shadow: 0 28px 90px rgba(24, 23, 20, .18), var(--shm);
    }

    #modal-ask-edith {
      z-index: 2200;
    }

    .edith-chat-log {
      background:
        linear-gradient(180deg, rgba(255,255,255,.8), rgba(247,246,242,.78)),
        var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      min-height: 340px;
      max-height: min(56vh, 560px);
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 9px;
      overscroll-behavior: contain;
    }

    .edith-msg {
      border: 1px solid var(--border);
      background: var(--white);
      border-radius: 14px;
      padding: 11px 13px;
      font-size: 13px;
      line-height: 1.65;
      color: var(--text2);
      max-width: min(94%, 680px);
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: normal;
      box-shadow: var(--sh);
    }

    .edith-msg.user {
      align-self: flex-end;
      background: linear-gradient(135deg, #111827, var(--accent));
      border-color: var(--ab);
      color: #fff;
      max-width: min(82%, 560px);
    }

    .edith-thinking {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      width: fit-content;
      background: linear-gradient(135deg, rgba(37, 99, 235, .08), rgba(13, 148, 136, .08), #fff);
      border-color: rgba(37, 99, 235, .16);
      color: var(--text);
      font-weight: 650;
    }

    .edith-thinking span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: edithDotPulse 1s ease-in-out infinite;
    }

    .edith-thinking span:nth-child(2) { animation-delay: .14s; }
    .edith-thinking span:nth-child(3) { animation-delay: .28s; }

    @keyframes edithDotPulse {
      0%, 100% { transform: translateY(0); opacity: .35 }
      50% { transform: translateY(-4px); opacity: 1 }
    }

    .edith-result {
      display: flex;
      flex-direction: column;
      gap: 12px;
      color: var(--text);
      max-width: 100%;
      min-width: 0;
    }

    .edith-result .ai-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 2px;
    }

    .edith-result h3 {
      margin: 0;
      font-size: 20px;
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 760;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .edith-result h4 {
      margin: 0 0 10px;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .edith-result p,
    .edith-result li {
      font-size: 14px;
      line-height: 1.75;
      color: var(--text2);
      overflow-wrap: anywhere;
    }

    .edith-result ul,
    .edith-result ol {
      margin: 0;
      padding-left: 18px;
    }

    .edith-block {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
      box-shadow: var(--sh);
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }

    .edith-result-shell {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
      box-shadow: var(--shm);
      max-width: 100%;
      min-width: 0;
      margin: 0 auto;
      overflow: hidden;
    }

    .edith-save-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid var(--border);
    }

    .edith-result table,
    .edith-msg table {
      width: 100%;
      min-width: 560px;
      border-collapse: collapse;
      font-size: 12px;
      margin-top: 8px;
      overflow: hidden;
      border-radius: 8px;
      table-layout: fixed;
    }

    .edith-result th,
    .edith-result td,
    .edith-msg th,
    .edith-msg td {
      border: 1px solid var(--border);
      padding: 8px 9px;
      text-align: left;
      vertical-align: top;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .edith-result th,
    .edith-msg th {
      background: var(--bg);
      color: var(--text);
      font-weight: 800;
    }

    .edith-msg p {
      margin: 0 0 8px;
    }

    .edith-msg p:last-child,
    .edith-msg ul:last-child,
    .edith-msg ol:last-child {
      margin-bottom: 0;
    }

    .edith-table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--white);
    }

    .edith-table-wrap table {
      width: 100%;
      min-width: 560px;
      margin: 0;
      border: 0;
      border-radius: 0;
      table-layout: fixed;
    }

    .edith-table-wrap th:first-child,
    .edith-table-wrap td:first-child {
      border-left: 0;
    }

    .edith-table-wrap th:last-child,
    .edith-table-wrap td:last-child {
      border-right: 0;
    }

    .edith-table-wrap tr:first-child th {
      border-top: 0;
    }

    .edith-table-wrap tr:last-child td {
      border-bottom: 0;
    }

    .edith-input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: stretch;
      margin-top: 10px;
    }

    #edith-chat-input {
      width: 100%;
      min-width: 0;
      max-height: 128px;
      resize: vertical;
      border-radius: 16px;
      background: rgba(255, 255, 255, .9);
    }

    .edith-send-btn {
      position: relative;
      overflow: hidden;
      min-width: 86px;
      min-height: 52px;
      border-radius: 15px;
      align-self: stretch;
      background: linear-gradient(135deg, #111827, var(--accent), #0f766e) !important;
      box-shadow: 0 12px 28px rgba(13, 148, 136, .22);
    }

    .edith-send-btn.stop {
      background: linear-gradient(135deg, var(--red), #991b1b) !important;
      border-color: rgba(220, 38, 38, .35) !important;
      box-shadow: 0 12px 28px rgba(220, 38, 38, .2);
    }

    .edith-send-btn::after {
      content: "";
      position: absolute;
      inset: -60% -45%;
      background: linear-gradient(120deg, transparent 34%, rgba(255, 255, 255, .28) 50%, transparent 66%);
      transform: translateX(-55%);
      animation: edithSheen 4.4s ease-in-out infinite;
      pointer-events: none;
    }

    .edith-thinking {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: var(--text2);
    }

    .edith-thinking span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      opacity: .42;
      animation: edithDot 1.2s ease-in-out infinite;
    }

    .edith-thinking span:nth-child(2) {
      animation-delay: .16s;
    }

    .edith-thinking span:nth-child(3) {
      animation-delay: .32s;
    }

    @keyframes edithDot {
      0%, 80%, 100% { transform: translateY(0); opacity: .35; }
      40% { transform: translateY(-4px); opacity: 1; }
    }

    .btn[onclick^="openAskEdith"] {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border-color: rgba(13, 148, 136, .24) !important;
      background: linear-gradient(135deg, rgba(13, 148, 136, .12), rgba(255, 255, 255, .9) 46%, rgba(247, 177, 69, .14)) !important;
      box-shadow: 0 8px 18px rgba(13, 148, 136, .10);
    }

    .btn[onclick^="openAskEdith"]::after {
      content: "";
      position: absolute;
      inset: -80% -45%;
      z-index: -1;
      background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
      transform: translateX(-55%);
      animation: edithSheen 5.6s ease-in-out infinite;
    }

    .btn[onclick^="openAskEdith"]:hover {
      transform: translateY(-1px);
      border-color: rgba(13, 148, 136, .36) !important;
      box-shadow: 0 12px 28px rgba(13, 148, 136, .16);
    }

    .or,
    .oe,
    .wsr {
      max-width: 100%;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .or table,
    .oe table,
    .wsr table {
      max-width: 100%;
    }

    .edith-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .edith-exam-banner {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--white), var(--al));
      border: 1px solid var(--ab);
      border-left: 4px solid var(--accent);
      border-radius: 8px;
      padding: 14px 16px;
      box-shadow: var(--sh);
    }

    .edith-wizard-step {
      display: none;
    }

    .edith-wizard-step.on {
      display: block;
    }

    @media (max-width: 820px) {
      .edith-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }
    }
    /* ── FINAL AUTH + RESPONSIVE FIT OVERRIDES ─────────────────────── */
    #auth-overlay {
      background: #f4f3ef !important;
      padding: 16px !important;
      z-index: 2000 !important;
      inset: 0 !important;
      align-items: flex-start !important;
      justify-content: center !important;
      overflow-y: hidden !important;
      pointer-events: none !important;
    }

    #auth-overlay .auth-split {
      width: min(1440px, 100%) !important;
      min-height: calc(100vh - 32px) !important;
      grid-template-columns: minmax(360px, 1.05fr) minmax(360px, .95fr) !important;
      display: grid;
    }

    #auth-overlay .auth-showcase {
      min-height: calc(100vh - 32px) !important;
      background: linear-gradient(180deg, #000 0%, #00066f 48%, #1a22d4 74%, #c8cbf8 100%) !important;
      padding: clamp(26px, 3.2vw, 42px) !important;
    }

    #auth-overlay .auth-brand-row {
      margin-bottom: clamp(26px, 5vh, 42px) !important;
    }

    #auth-overlay .auth-status-pill {
      margin: 0 0 clamp(36px, 9vh, 90px) !important;
    }

    #auth-overlay .auth-platform-pill {
      margin-bottom: clamp(24px, 4vh, 36px) !important;
    }

    #auth-overlay .auth-proof-grid {
      margin-top: clamp(20px, 4vh, 32px) !important;
    }

    #ob-welcome .auth-card {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      text-align: left !important;
    }

    #ob-welcome .auth-card>div:first-child {
      display: none !important;
    }

    #auth-overlay .auth-stage {
      background: #f4f3ef !important;
    }

    #auth-overlay .ob-path-btn {
      border-radius: 14px !important;
      min-height: 84px;
    }

    #auth-overlay,
    #auth-overlay *:not(.sb-icon) {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      letter-spacing: 0 !important;
    }

    #auth-overlay input,
    #auth-overlay textarea,
    #auth-overlay select,
    #auth-overlay code,
    #auth-overlay .mono,
    #auth-overlay [style*="JetBrains Mono"] {
      font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace !important;
    }

    #auth-overlay .auth-hero-title,
    #auth-overlay .auth-hero-title em,
    #auth-overlay .auth-title,
    #auth-overlay .auth-title em {
      font-family: "Instrument Serif", Georgia, serif !important;
      letter-spacing: 0 !important;
    }

    #auth-overlay .auth-hero-title {
      max-width: 640px !important;
      font-size: clamp(42px, 4.6vw, 60px) !important;
      line-height: .98 !important;
      margin-bottom: 18px !important;
    }

    #auth-overlay .auth-hero-copy {
      max-width: 460px !important;
      font-size: 15px !important;
      line-height: 1.65 !important;
    }

    #auth-overlay .auth-proof {
      min-height: 54px !important;
      grid-template-columns: 30px minmax(0, 1fr) !important;
      padding: 12px 14px 12px 13px !important;
    }

    @media (max-height: 920px) and (min-width: 761px) {
      #auth-overlay .auth-showcase {
        padding: 32px 42px !important;
      }

      #auth-overlay .auth-brand-row {
        margin-bottom: 34px !important;
      }

      #auth-overlay .auth-platform-pill {
        margin-bottom: 24px !important;
      }

      #auth-overlay .auth-hero-title {
        font-size: clamp(42px, 4.3vw, 56px) !important;
      }

      #auth-overlay .auth-proof-grid {
        margin-top: 20px !important;
      }
    }

    .gtable {
      min-width: 620px;
    }

    .analytics-card,
    .card,
    .sbox,
    .wsl,
    .wsr,
    .li,
    .note-it {
      min-width: 0;
    }

    .li-info,
    .asgn-info {
      min-width: 0;
    }

    .portal-target-tools,
    .portal-target-actions {
      flex-wrap: wrap;
    }

    .portal-target-tools .fi {
      min-width: 160px;
    }

    @media (max-width: 900px) {
      #auth-overlay .auth-split {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
        overflow: visible;
      }

      #auth-overlay .auth-showcase {
        min-height: auto !important;
        padding: 28px !important;
      }

      .auth-brand-row {
        margin-bottom: 34px !important;
      }

      .auth-status-pill {
        margin: 0 0 34px !important;
      }

      .auth-proof-grid {
        margin-top: 28px !important;
      }

      .auth-stage {
        padding: 28px !important;
      }

      .gws,
      .gms,
      .analytics-panel,
      .portal-profile-grid {
        grid-template-columns: 1fr !important;
      }
    }

    @media (max-width: 760px) {
      html,
      body {
        height: auto;
        min-height: 100%;
      }

      body {
        overflow: auto;
      }

      #auth-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
      }

      #auth-overlay .auth-showcase {
        padding: 22px !important;
      }

      .auth-hero-title {
        font-size: 42px !important;
      }

      .auth-hero-copy {
        font-size: 13px !important;
      }

      .auth-proof {
        grid-template-columns: 28px 1fr;
        padding: 12px 14px;
      }

      .auth-stage {
        padding: 22px !important;
      }

      .auth-title {
        font-size: 42px !important;
      }

      #auth-overlay .ob-path-btn {
        min-height: 76px;
        padding: 14px !important;
        gap: 12px !important;
      }

      .auth-choice-icon {
        width: 38px;
        height: 38px;
      }

      .auth-choice-index {
        display: none;
      }

      .auth-choice-arrow {
        width: 28px;
        height: 28px;
      }

      .main {
        min-height: 100vh;
      }

      .tb-title,
      .tb-sub {
        max-width: 100%;
        white-space: normal;
      }

      .topbar,
      .tb-right {
        min-width: 0;
      }

      .btn,
      .gbtn,
      .fi {
        max-width: 100%;
      }

      .gtable {
        min-width: 560px;
      }

      .modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px);
        overflow: auto;
      }

      .edith-chat-modal {
        max-height: calc(100vh - 24px);
      }

      .edith-chat-log {
        min-height: 260px;
        max-height: 48vh;
      }

      .edith-input-row {
        grid-template-columns: 1fr;
      }

      .edith-send-btn {
        width: 100%;
      }

      .course-package-topic-grid,
      .course-package-assignment-grid,
      .course-package-exam-grid {
        grid-template-columns: 1fr !important;
      }

      .portal-preset-row {
        grid-template-columns: 1fr 1fr !important;
      }

      .portal-preset-row select {
        grid-column: 1 / -1;
      }
    }

    /* App shell — portals live inside .main; never hide .main entirely */
    body.app-shell-auth .sb,
    body.app-shell-admin .sb,
    body.app-shell-teacher .sb {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important
    }

    body.app-shell-auth .main,
    body.app-shell-admin .main,
    body.app-shell-teacher .main {
      display: block !important;
      visibility: visible !important;
      pointer-events: auto !important;
      flex: 1 !important
    }

    body.app-shell-auth .main > :not(#auth-overlay):not(.modal-overlay),
    body.app-shell-admin .main > :not(#admin-overlay):not(.modal-overlay),
    body.app-shell-teacher .main > :not(#teacher-overlay):not(.modal-overlay) {
      display: none !important
    }

    body.app-shell-auth #auth-overlay {
      display: flex !important;
      visibility: visible !important;
      position: fixed !important;
      inset: 0 !important;
      left: 0 !important;
      z-index: 2000 !important
    }

    body.app-shell-admin #admin-overlay {
      display: block !important;
      visibility: visible !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: 1500 !important;
      pointer-events: auto !important
    }

    body.app-shell-teacher #teacher-overlay {
      display: block !important;
      visibility: visible !important;
      position: fixed !important;
      inset: 0 !important;
      z-index: 1500 !important;
      pointer-events: auto !important
    }

    body.app-shell-student .sb {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important
    }

    body.app-shell-student .main {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important
    }

    body.app-shell-student #auth-overlay,
    body.app-shell-student #admin-overlay,
    body.app-shell-student #teacher-overlay {
      display: none !important;
      pointer-events: none !important
    }

    body.app-shell-admin .main > .modal-overlay.open,
    body.app-shell-teacher .main > .modal-overlay.open {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important;
      z-index: 5200 !important
    }

    #portal-settings-overlay.open,
    #student-settings-overlay.open {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important
    }

    #modal-settings-confirm {
      z-index: 9000 !important
    }

    #modal-portal-settings-confirm,
    #student-restriction-modal {
      z-index: 9100 !important
    }

    /* Study Cabinet polish overrides */
    .sb-icon,
    .auth-logo-ic,
    .auth-brand-mark,
    .settings-user-avatar {
      overflow: hidden;
      background: #050505 !important;
      border: 1px solid rgba(255, 255, 255, .08);
      color: transparent !important;
    }

    .sb-icon img,
    .auth-logo-ic img,
    .auth-brand-mark img,
    .settings-user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .welcome-logo {
      display: block;
      width: min(300px, 78vw);
      max-height: 120px;
      object-fit: contain;
      margin: 0 auto 8px;
    }

    .assignment-docs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .assignment-doc-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      padding: 5px 6px;
      border: 1px solid var(--border);
      border-radius: var(--rs);
      background: var(--bg);
    }

    .assignment-doc-name {
      max-width: 170px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11.5px;
      color: var(--text2);
    }

    .btn.posting,
    .gbtn.posting {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    .btn-progress-fill {
      position: absolute;
      inset: 0 auto 0 0;
      background: rgba(255, 255, 255, .24);
      transition: width .25s ease;
      z-index: -1;
    }

    .btn-progress-label {
      position: relative;
      z-index: 1;
    }

    .modal {
      padding: 26px !important;
    }

    .modal .fg {
      margin-bottom: 14px;
    }

    #admin-tab-push .gws,
    #tch-tab-push .gws {
      grid-template-columns: minmax(760px, 1.1fr) minmax(340px, .55fr) !important;
      gap: 24px !important;
    }

    #admin-tab-push .wsl,
    #tch-tab-push .wsl {
      overflow-x: auto !important;
      padding: 24px !important;
    }

    .course-package-topic-grid,
    .course-package-assignment-grid,
    .course-package-exam-grid {
      min-width: 720px;
      gap: 14px !important;
    }

    .analytics-card:has(.gtable),
    .portal-profile-grid .analytics-card {
      overflow-x: auto;
    }

    .analytics-card .gtable {
      min-width: 620px;
    }

    .sb-icon,
    .auth-logo-ic,
    .auth-brand-mark,
    .settings-user-avatar {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .sb-icon img,
    .auth-logo-ic img,
    .auth-brand-mark img,
    .settings-user-avatar img {
      width: 86% !important;
      height: 86% !important;
      object-fit: contain !important;
      object-position: center center !important;
      margin: auto !important;
    }

    .course-focus-card {
      padding: 14px !important;
      overflow: visible !important;
    }

    .course-focus-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }

    .course-focus-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255, 255, 255, .58);
      padding: 11px 12px;
      min-width: 0;
      box-shadow: 0 8px 22px rgba(16, 24, 40, .05);
    }

    .course-focus-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      font-size: 12.5px;
      color: var(--text);
      min-width: 0;
    }

    .course-focus-top strong {
      min-width: 0;
      overflow-wrap: anywhere;
      line-height: 1.35;
    }

    .course-focus-top span {
      flex-shrink: 0;
      font-weight: 850;
      font-size: 12px;
    }

    .course-focus-bar {
      height: 7px;
      border-radius: 999px;
      background: rgba(15, 23, 42, .08);
      overflow: hidden;
      margin: 9px 0;
    }

    .course-focus-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
    }

    .course-focus-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      font-size: 10.8px;
      color: var(--text3);
    }

    .course-focus-metrics span {
      min-width: 0;
      border-radius: 9px;
      background: rgba(255, 255, 255, .7);
      border: 1px solid rgba(21, 31, 47, .07);
      padding: 5px 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .course-focus-metrics b {
      color: var(--text);
      font-weight: 850;
    }

    .btn[onclick^="openAskEdith"] {
      border-radius: 999px !important;
      min-height: 38px;
      padding: 8px 15px 8px 13px !important;
      color: #172033 !important;
      border-color: rgba(84, 116, 255, .22) !important;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(239, 247, 255, .78) 44%, rgba(239, 255, 250, .88)) !important;
      box-shadow: 0 14px 32px rgba(48, 82, 150, .13), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
      backdrop-filter: blur(18px) saturate(160%);
    }

    .btn[onclick^="openAskEdith"]::before {
      content: "";
      width: 18px;
      height: 18px;
      border-radius: 999px;
      margin-right: 7px;
      background:
        radial-gradient(circle at 50% 50%, #ffffff 0 14%, transparent 16%),
        conic-gradient(from 140deg, #9fd8ff, #f3c6ff, #b8fff0, #9fd8ff);
      box-shadow: 0 0 18px rgba(116, 150, 255, .45);
      display: inline-block;
      vertical-align: -4px;
      animation: edithOrbFloat 4.8s ease-in-out infinite;
    }

    .btn[onclick^="openAskEdith"]:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 18px 38px rgba(48, 82, 150, .18), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
    }

    .edith-chat-modal {
      position: relative;
      width: min(900px, calc(100vw - 28px)) !important;
      border-radius: 28px !important;
      padding: 18px !important;
      gap: 14px !important;
      background:
        radial-gradient(circle at 16% -8%, rgba(130, 190, 255, .24), transparent 35%),
        radial-gradient(circle at 92% 8%, rgba(178, 255, 231, .22), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(248,251,255,.72)) !important;
      border: 1px solid rgba(255, 255, 255, .82) !important;
      box-shadow: 0 32px 90px rgba(19, 35, 61, .22), inset 0 1px 0 rgba(255,255,255,.95) !important;
    }

    .edith-chat-modal > div:first-child {
      border-radius: 22px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, .62);
      border: 1px solid rgba(255, 255, 255, .7);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
    }

    .edith-chat-modal .modal-title {
      font-size: 22px;
      letter-spacing: 0;
    }

    .edith-chat-log {
      border-radius: 24px !important;
      padding: 16px !important;
      gap: 12px !important;
      background:
        linear-gradient(180deg, rgba(255,255,255,.7), rgba(242,247,255,.76)),
        radial-gradient(circle at 10% 20%, rgba(143, 194, 255, .12), transparent 28%) !important;
      border-color: rgba(148, 163, 184, .18) !important;
    }

    .edith-msg {
      border-radius: 20px 20px 20px 7px !important;
      padding: 12px 15px !important;
      border-color: rgba(148, 163, 184, .18) !important;
      background: rgba(255, 255, 255, .82) !important;
      box-shadow: 0 12px 30px rgba(34, 48, 74, .07) !important;
    }

    .edith-msg.user {
      border-radius: 20px 20px 7px 20px !important;
      background: linear-gradient(135deg, #1f2937, #2563eb 62%, #0d9488) !important;
      color: #fff !important;
      box-shadow: 0 16px 36px rgba(37, 99, 235, .22) !important;
    }

    .edith-input-row {
      grid-template-columns: minmax(0, 1fr) 104px !important;
      gap: 12px !important;
      padding: 10px;
      border-radius: 24px;
      background: rgba(255,255,255,.58);
      border: 1px solid rgba(255,255,255,.72);
    }

    #edith-chat-input {
      border-radius: 18px !important;
      border-color: rgba(148, 163, 184, .2) !important;
      background: rgba(255,255,255,.86) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
      min-height: 58px;
    }

    .edith-send-btn {
      border-radius: 18px !important;
      min-height: 58px !important;
      font-weight: 850;
      background: linear-gradient(135deg, #101828, #2563eb 56%, #10b981) !important;
      box-shadow: 0 16px 34px rgba(37, 99, 235, .24) !important;
    }

    @keyframes edithOrbFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-1px) rotate(18deg); }
    }

    @media (max-width: 760px) {
      .course-focus-metrics {
        grid-template-columns: 1fr;
      }

      .edith-input-row {
        grid-template-columns: 1fr !important;
      }

      .edith-send-btn {
        width: 100%;
      }
    }

    /* ── DESKTOP ONLY MODE ────────────────────────────────────────────
       The app intentionally uses one desktop layout at every screen size.
       Narrow/mobile browsers get the same desktop canvas instead of a
       separate phone or tablet interface. */
    :root {
      --desktop-canvas: 1440px;
      --desktop-shell: 1180px;
    }

    html,
    body {
      min-width: var(--desktop-shell) !important;
    }

    body {
      display: flex !important;
      overflow: hidden !important;
    }

    .sb {
      position: relative !important;
      width: 264px !important;
      min-width: 264px !important;
      max-height: none !important;
      margin: 12px 0 12px 12px !important;
      display: flex !important;
      flex-direction: column !important;
      border-radius: 28px !important;
      border-right: 1px solid rgba(255, 255, 255, .86) !important;
      border-bottom: 0 !important;
      overflow: hidden !important;
    }

    .sb-logo,
    .sb-grp-lbl {
      display: block !important;
    }

    .sb-nav {
      display: block !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 4px 8px 8px !important;
    }

    .sb-grp {
      display: block !important;
      padding: 12px 4px 3px !important;
    }

    .ni {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 10px !important;
      min-width: 0 !important;
      max-width: none !important;
      min-height: 0 !important;
      padding: 10px 12px 10px 13px !important;
      margin-bottom: 4px !important;
      border-radius: 15px !important;
      white-space: nowrap !important;
      text-align: left !important;
      font-size: 12.5px !important;
      line-height: normal !important;
    }

    .ni.on {
      padding-left: 17px !important;
    }

    .ni::before {
      display: block !important;
    }

    .ni .ic {
      width: 18px !important;
      min-height: 0 !important;
      font-size: 12px !important;
    }

    .nbadge {
      position: static !important;
      margin-left: auto !important;
      max-width: none !important;
    }

    .sb-foot {
      display: block !important;
      margin-top: auto !important;
      padding: 8px 7px !important;
      border-top: 1px solid var(--border) !important;
    }

    .u-row {
      width: auto !important;
      height: auto !important;
      padding: 7px 8px !important;
      justify-content: flex-start !important;
    }

    .u-row > div[style*="flex:1"] {
      display: block !important;
    }

    .settings-trigger {
      position: relative !important;
      right: auto !important;
      top: auto !important;
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      border-radius: 9px !important;
      font-size: 15px !important;
    }

    .av {
      width: 28px !important;
      height: 28px !important;
    }

    .main {
      display: flex !important;
      flex: 1 !important;
      flex-direction: column !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }

    .topbar {
      height: 50px !important;
      min-height: 50px !important;
      margin: 0 !important;
      padding: 0 20px !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      border-radius: 0 !important;
    }

    .tb-title {
      display: inline !important;
      font-size: 17px !important;
      line-height: normal !important;
    }

    .tb-sub {
      display: inline !important;
      margin-left: 3px !important;
      font-size: 11.5px !important;
      line-height: normal !important;
      white-space: nowrap !important;
    }

    .tb-right {
      width: auto !important;
      margin-left: auto !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow: visible !important;
      padding: 0 !important;
    }

    .pg {
      flex: 1 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 20px !important;
    }

    .ph {
      font-size: 21px !important;
      line-height: normal !important;
    }

    .ps {
      font-size: 12.5px !important;
      margin-bottom: 16px !important;
    }

    .sr4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .sr3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .g2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .g3,
    .cgrid,
    #ai-tools-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .g4,
    .analytics-kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .gms {
      grid-template-columns: minmax(0, 1fr) 300px !important;
    }

    .gws {
      grid-template-columns: 300px minmax(0, 1fr) !important;
      min-height: calc(100vh - 110px) !important;
    }

    .wsl,
    .wsr {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 16px !important;
    }

    .inst-stats {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .tab-row {
      display: flex !important;
      flex-wrap: nowrap !important;
      width: fit-content !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
    }

    .tab,
    .chip {
      white-space: nowrap !important;
    }

    .gtable,
    .stu-table {
      display: table !important;
      width: 100% !important;
      min-width: 620px !important;
      border-collapse: collapse !important;
    }

    .gtable thead,
    .stu-table thead {
      display: table-header-group !important;
    }

    .gtable tbody,
    .stu-table tbody {
      display: table-row-group !important;
    }

    .gtable tr,
    .stu-table tr {
      display: table-row !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
    }

    .gtable th,
    .gtable td,
    .stu-table th,
    .stu-table td {
      display: table-cell !important;
      width: auto !important;
      padding: 9px 12px !important;
      border-bottom: 1px solid var(--border) !important;
    }

    .modal-overlay {
      align-items: center !important;
      justify-content: center !important;
      padding: 20px !important;
    }

    .modal {
      max-width: 460px !important;
      max-height: 90vh !important;
      padding: 26px !important;
      border-radius: var(--r) !important;
    }

    .edith-input-row {
      grid-template-columns: minmax(0, 1fr) 104px !important;
    }

    .edith-send-btn {
      width: auto !important;
    }

    #auth-overlay,
    #admin-overlay,
    #teacher-overlay {
      min-width: var(--desktop-shell) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
    }

    #auth-overlay {
      padding: 16px !important;
      align-items: flex-start !important;
      justify-content: center !important;
      background: #f4f3ef !important;
    }

    #auth-overlay .auth-split {
      display: grid !important;
      width: min(1440px, 100%) !important;
      min-height: calc(100vh - 32px) !important;
      grid-template-columns: minmax(360px, 1.05fr) minmax(360px, .95fr) !important;
      overflow: hidden !important;
    }

    #auth-overlay .auth-showcase {
      display: flex !important;
      min-height: calc(100vh - 32px) !important;
      padding: clamp(26px, 3.2vw, 42px) !important;
      justify-content: space-between !important;
      border-radius: 0 !important;
    }

    #auth-overlay .auth-stage {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: clamp(28px, 5vw, 78px) !important;
      overflow-y: auto !important;
      background: #f4f3ef !important;
    }

    #auth-overlay .auth-proof-grid {
      display: flex !important;
    }

    #auth-overlay .auth-hero-title {
      font-size: clamp(42px, 4.6vw, 60px) !important;
      line-height: .98 !important;
      margin-bottom: 18px !important;
    }

    #auth-overlay .auth-title {
      font-size: clamp(34px, 4vw, 54px) !important;
      line-height: .96 !important;
      margin-bottom: 10px !important;
    }

    #auth-overlay .auth-card {
      max-width: 400px !important;
    }

    #admin-overlay,
    #teacher-overlay {
      padding: 20px !important;
      background: var(--bg) !important;
    }

    .admin-portal-head,
    #teacher-overlay > div:first-child {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      flex-wrap: wrap !important;
      gap: 12px !important;
    }

    .admin-centre-title,
    #tch-name {
      font-size: 32px !important;
      line-height: 1.05 !important;
    }

    #admin-tab-push .gws,
    #tch-tab-push .gws {
      grid-template-columns: minmax(760px, 1.1fr) minmax(340px, .55fr) !important;
      min-height: calc(100vh - 230px) !important;
      gap: 24px !important;
    }

    #admin-tab-push .wsl,
    #tch-tab-push .wsl {
      overflow-x: auto !important;
      padding: 24px !important;
    }

    .course-package-topic-grid,
    .course-package-assignment-grid,
    .course-package-exam-grid {
      min-width: 720px !important;
    }

    html.app-shell-landing,
    html:has(body.app-shell-landing) {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 100% !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }

    body.app-shell-landing {
      display: block !important;
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 100dvh !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
    }

    body.app-shell-landing #landing-page {
      min-width: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      min-height: 100dvh !important;
      overflow-x: hidden !important;
      overflow-y: visible !important;
      touch-action: pan-y !important;
    }

    body.app-shell-landing .sb,
    body.app-shell-landing .main {
      display: none !important;
    }