@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
  :root{
    --ink:#F4F1FB;
    --ink-soft:#D7CFEC;
    --paper:#130B24;
    --paper-raised:#1E1436;
    --line:rgba(196,181,253,0.14);
    --muted:#9C90B8;
    --green:#4F9A6C;   --green-bg:rgba(79,154,108,0.14);
    --blue:#5A87B8;    --blue-bg:rgba(90,135,184,0.14);
    --yellow:#CB9A3B;  --yellow-bg:rgba(203,154,59,0.14);
    --pink:#BD6C8C;    --pink-bg:rgba(189,108,140,0.14);
    --red:#C05646;     --red-bg:rgba(192,86,70,0.14);
    --grey:#8F8672;    --grey-bg:rgba(143,134,114,0.14);
    --orange:#B5651D;  --orange-bg:rgba(181,101,29,0.16);
    --accent:#8B5CF6;
    --accent-2:#A78BFA;
    --gold:#CB9A3B;    --gold-bg:rgba(203,154,59,0.14);
    --surface-1:#170F2A;
    --surface-2:#221937;
    --card-radius:14px;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.25);
    --shadow-lg:0 20px 48px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.3);
    --font-display: 'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', 'Consolas', 'Menlo', monospace;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:
      radial-gradient(1100px 520px at 12% -8%, rgba(139,92,246,0.08), transparent 60%),
      radial-gradient(900px 480px at 100% 0%, rgba(139,92,246,0.05), transparent 55%),
      var(--paper);
    color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;letter-spacing:-0.005em;}
  .wrap{max-width:1360px;margin:0 auto;padding:28px 28px 110px;position:relative;z-index:1;}

  .bg-animated{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .bg-animated span{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform,opacity;}
  .bg-animated span.b1{width:900px;height:900px;top:-320px;left:-200px;
    background:radial-gradient(circle at 30% 30%, rgba(139,92,246,0.09), transparent 70%);
    animation:bgFloat1 46s ease-in-out infinite;}
  .bg-animated span.b2{width:820px;height:820px;top:20%;right:-260px;
    background:radial-gradient(circle at 60% 40%, rgba(139,92,246,0.07), transparent 70%);
    animation:bgFloat2 58s ease-in-out infinite;}
  .bg-animated span.b3{width:760px;height:760px;bottom:-300px;left:18%;
    background:radial-gradient(circle at 50% 50%, rgba(139,92,246,0.05), transparent 70%);
    animation:bgFloat3 64s ease-in-out infinite;}
  @keyframes bgFloat1{
    0%,100%{transform:translate(0,0) scale(1);opacity:0.85;}
    50%{transform:translate(60px,40px) scale(1.08);opacity:1;}
  }
  @keyframes bgFloat2{
    0%,100%{transform:translate(0,0) scale(1);opacity:0.8;}
    50%{transform:translate(-50px,50px) scale(1.06);opacity:1;}
  }
  @keyframes bgFloat3{
    0%,100%{transform:translate(0,0) scale(1);opacity:0.7;}
    50%{transform:translate(40px,-35px) scale(1.05);opacity:0.9;}
  }
  @media (prefers-reduced-motion: reduce){
    .bg-animated span{animation:none;}
  }

  /* ---- Orbit motif: drifting data field + rotating brand ring ---- */
  .bg-orbit-field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.55;
    background-image:radial-gradient(rgba(196,181,253,0.16) 1px, transparent 1px);
    background-size:44px 44px;animation:orbitDrift 140s linear infinite;}
  @keyframes orbitDrift{0%{background-position:0 0;}100%{background-position:440px 260px;}}
  @media (prefers-reduced-motion: reduce){.bg-orbit-field{animation:none;}}

  .orbit-rings-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .orbit-rings-bg span{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(139,92,246,0.16);
    transform:translate(-50%,-50%);}
  .orbit-rings-bg span.r1{width:340px;height:340px;}
  .orbit-rings-bg span.r2{width:560px;height:560px;border-color:rgba(139,92,246,0.1);}
  .orbit-rings-bg span.r3{width:800px;height:800px;border-color:rgba(139,92,246,0.06);}

  .brand-orbit{position:relative;flex:none;}
  .orbit-ring{position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(139,92,246,0.45);
    animation:orbitSpin 16s linear infinite;pointer-events:none;}
  .orbit-ring .orbit-dot{position:absolute;top:-2.5px;left:50%;width:5px;height:5px;margin-left:-2.5px;
    border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px 2px rgba(167,139,250,0.7);}
  @keyframes orbitSpin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion: reduce){.orbit-ring{animation:none;}}

  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.25);border-radius:10px;}
  ::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,0.4);}

  .masthead{
    background:linear-gradient(135deg,#130B24,#1E1436,#341F5C);
    border-radius:14px;padding:26px 30px;margin-bottom:26px;
    display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;
    box-shadow:var(--shadow-lg);position:relative;z-index:55;overflow:visible;border-bottom:2px solid rgba(139,92,246,0.4);
  }
  .masthead::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden;
    background:radial-gradient(600px 240px at 100% -20%, rgba(255,255,255,0.06), transparent 60%);}
  .masthead h1{font-family:var(--font-display);font-weight:800;font-size:1.7rem;margin:0;color:#fff;letter-spacing:-0.02em;}
  .masthead .sub{font-family:var(--font-body);font-style:normal;font-size:0.82rem;color:rgba(255,255,255,0.72);text-transform:none;letter-spacing:0.1px;margin-top:5px;}
  .masthead-brand{display:flex;align-items:center;gap:16px;position:relative;z-index:1;}
  .brand-mark{flex:none;width:48px;height:48px;border-radius:10px;
    background:linear-gradient(145deg,#8B5CF6,#6D28D9);
    display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 6px 16px rgba(139,92,246,0.4), inset 0 1px 0 rgba(255,255,255,0.15);}
  .brand-mark::before{display:none;}
  .brand-mark span{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:#fff;}
  .brand-kicker{font-size:0.66rem;letter-spacing:2.4px;text-transform:uppercase;color:var(--accent-2);font-weight:700;margin-bottom:3px;}
  .status-line{font-family:var(--font-body);font-size:0.75rem;color:rgba(255,255,255,0.78);text-align:right;font-weight:500;}
  .status-line .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 8px rgba(79,154,108,0.8);}
  .status-line.unsaved .dot{background:var(--red);box-shadow:0 0 8px rgba(192,86,70,0.8);}

  .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center;position:relative;z-index:5;}
  #actionsToolbar{z-index:45;}
  #filtersToolbar{z-index:5;}
  select, input[type=text], input[type=number], input[type=date]{
    font-family:var(--font-body);font-size:0.85rem;padding:9px 12px;border:1px solid var(--line);
    border-radius:10px;background:var(--surface-2);color:var(--ink);
  }
  select:focus-visible, input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  /* Dropdown lists (Section, Subject, Student, etc.): the open list is drawn by the browser and defaults to white,
     which hid the names against the purple theme. Tell the browser which theme we are in and colour the options. */
  :root{color-scheme:dark;}
  :root[data-theme="light"]{color-scheme:light;}
  select option, select optgroup{background-color:var(--paper-raised);color:var(--ink);}
  select option:checked{background-color:var(--accent);color:#fff;}
  select option:disabled{color:var(--muted);}
  button{font-family:var(--font-body);font-weight:600;font-size:0.83rem;border:1px solid var(--line);background:var(--surface-2);
    color:var(--ink-soft);padding:9px 15px;border-radius:11px;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease,border-color .18s ease;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;}
  button:hover{background:var(--surface-1);color:var(--ink);border-color:rgba(148,163,184,0.3);transform:translateY(-1px);}
  button.primary{background:linear-gradient(135deg,#8B5CF6,#6D28D9);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(139,92,246,0.32);}
  button.primary:hover{background:linear-gradient(135deg,#A78BFA,#8B5CF6);box-shadow:0 8px 22px rgba(139,92,246,0.45);transform:translateY(-1px);}
  button.ghost{border-color:var(--line);color:var(--ink-soft);background:transparent;}
  button.ghost:hover{background:rgba(148,163,184,0.08);color:var(--ink);border-color:rgba(148,163,184,0.3);box-shadow:0 0 0 1px rgba(139,92,246,0.15);}
  button.small{padding:6px 11px;font-size:0.76rem;border-radius:9px;}
  button:disabled{opacity:0.4;cursor:not-allowed;}
  button:disabled:hover{background:var(--surface-2);color:var(--ink-soft);transform:none;box-shadow:none;}
  button:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .spacer{flex:1;}
  .divider-v{width:1px;align-self:stretch;background:var(--line);margin:0 4px;}
  .icon{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  .panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--card-radius);padding:20px 22px;margin-bottom:18px;display:none;box-shadow:var(--shadow-md);}
  .panel.open{display:block;}
  .panel h3{margin:0 0 12px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;}
  .panel-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px;}
  .field{display:flex;flex-direction:column;gap:5px;}
  .field label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.9px;color:var(--muted);font-weight:600;}
  .hint{font-size:0.76rem;color:var(--muted);line-height:1.55;margin-top:6px;}
  .hint b{color:var(--ink-soft);}

  .preview-box{background:var(--surface-1);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:10px;font-size:0.8rem;max-height:280px;overflow:auto;}
  .preview-box table{width:100%;border-collapse:collapse;font-size:0.76rem;}
  .preview-box th{text-align:left;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap;}
  .preview-box td{padding:6px 8px;border-bottom:1px solid var(--line);}
  .warn-text{color:var(--red);}
  .ok-text{color:var(--green);}

  .table-wrap{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--card-radius);overflow:auto;max-height:70vh;box-shadow:var(--shadow-md);}
  table.main-table{width:100%;border-collapse:collapse;min-width:600px;}
  table.main-table thead th{position:sticky;top:0;background:linear-gradient(180deg,var(--surface-2),var(--surface-1));text-align:left;font-size:0.67rem;
    text-transform:uppercase;letter-spacing:0.9px;color:var(--muted);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:2;}
  th .th-sub{display:block;text-transform:none;letter-spacing:0;font-weight:400;font-size:0.62rem;color:var(--muted);opacity:.72;margin-top:2px;font-family:var(--font-mono);}
  th.sortable-th{cursor:pointer;user-select:none;}
  th.sortable-th:hover{color:var(--ink);}
  th.sortable-th .sort-arrow{margin-left:5px;font-size:0.85em;opacity:0.4;}
  th.sortable-th.active-sort{color:var(--ink);}
  th.sortable-th.active-sort .sort-arrow{opacity:1;color:var(--accent);}
  table.main-table tbody tr{border-bottom:1px solid var(--line);transition:background .15s ease;}
  table.main-table tbody tr:nth-child(even){background:rgba(255,255,255,0.012);}
  table.main-table tbody tr:hover{background:rgba(139,92,246,0.08);}
  table.main-table td{padding:12px 16px;vertical-align:middle;font-size:0.85rem;}
  td.name-cell{font-weight:600;min-width:150px;position:sticky;left:0;background:var(--paper-raised);}
  tr:hover td.name-cell{background:rgba(139,92,246,0.08);}
  .extra-detail{font-size:0.72rem;color:var(--muted);font-family:var(--font-mono);}

  .zone-cell{min-width:88px;}
  .zone-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:6px;font-size:0.74rem;font-weight:700;white-space:nowrap;border:1px solid transparent;}
  .zone-pill.green{background:var(--green-bg);color:#7FBF93;border-color:rgba(79,154,108,0.35);box-shadow:0 0 12px rgba(79,154,108,0.15);}
  .zone-pill.blue{background:var(--blue-bg);color:#8FB3D9;border-color:rgba(90,135,184,0.35);box-shadow:0 0 12px rgba(90,135,184,0.15);}
  .zone-pill.yellow{background:var(--yellow-bg);color:#E0B563;border-color:rgba(203,154,59,0.35);box-shadow:0 0 12px rgba(203,154,59,0.15);}
  .zone-pill.pink{background:var(--pink-bg);color:#D190AC;border-color:rgba(189,108,140,0.35);box-shadow:0 0 12px rgba(189,108,140,0.15);}
  .zone-pill.red{background:var(--red-bg);color:#DB8B7E;border-color:rgba(192,86,70,0.35);box-shadow:0 0 12px rgba(192,86,70,0.15);}
  .zone-pill.grey{background:var(--grey-bg);color:#94A3B8;border-color:rgba(100,116,139,0.35);}
  .zone-pill.none{background:transparent;color:var(--muted);border:1px solid var(--line);}
  .trend-dots{display:flex;gap:2px;margin-top:3px;}
  .trend-dots .d{width:6px;height:6px;border-radius:50%;}
  .trend-dots .d.green{background:var(--green);} .trend-dots .d.blue{background:var(--blue);}
  .trend-dots .d.yellow{background:var(--yellow);} .trend-dots .d.pink{background:var(--pink);}
  .trend-dots .d.red{background:var(--red);} .trend-dots .d.grey{background:var(--grey);}
  .trend-dots .d.none{background:var(--line);}

  .section-title{font-family:var(--font-display);font-weight:700;font-size:1.2rem;margin:44px 0 16px;
    padding-bottom:12px;position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink);}
  .section-title::after{content:'';position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));}
  .section-title .filters{font-size:0.8rem;font-weight:500;display:flex;gap:8px;align-items:center;color:var(--muted);}

  .charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;}
  .charts-grid .chart-card-wide{grid-column:1 / -1;}
  @media (min-width:900px){ .charts-grid .chart-card-wide{grid-column:span 2;} }
  .chart-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--card-radius);padding:20px 22px;box-shadow:var(--shadow-md);}
  .chart-card h4{margin:0 0 10px;font-size:0.76rem;text-transform:uppercase;letter-spacing:0.8px;color:var(--muted);font-weight:700;}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
  .card{background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px;
    box-shadow:var(--shadow-sm);position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
  .card::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:4px;
    background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:4px;}
  .card h4{margin:0 0 3px;font-size:0.86rem;font-weight:600;color:var(--ink-soft);}
  .card .count{font-family:var(--font-display);font-weight:800;font-size:1.75rem;line-height:1;margin:6px 0 10px;color:var(--ink);}
  .card ul{margin:0;padding:0;list-style:none;font-size:0.78rem;color:var(--ink-soft);max-height:120px;overflow:auto;}
  .card ul li{padding:5px 0;border-top:1px solid var(--line);}
  .card ul li:first-child{border-top:none;}
  .card .empty{color:var(--muted);font-style:italic;font-size:0.78rem;}

  .empty-state{text-align:center;padding:60px 20px;color:var(--muted);}
  .empty-state h3{font-family:var(--font-display);color:var(--ink);margin-bottom:8px;font-weight:700;}

  footer{text-align:center;color:var(--muted);font-size:0.74rem;margin-top:60px;}
  .modal-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.65);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:50;}
  .modal-overlay.open{display:flex;}
  .modal{background:var(--paper-raised);border:1px solid var(--line);border-radius:20px;padding:26px 26px;max-width:420px;width:90%;box-shadow:var(--shadow-lg);}
  .modal h3{margin:0 0 10px;font-family:var(--font-display);font-weight:700;}
  .modal .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}
  @media (prefers-reduced-motion: reduce){*{transition:none !important;}}

  /* ===== v2 additions ===== */
  .hero-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px;}
  .hero-metric{background:var(--paper-raised);border:1px solid var(--line);border-radius:18px;padding:17px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
  .hero-metric::before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0.7;}
  .hero-metric .hm-label{font-size:0.67rem;text-transform:uppercase;letter-spacing:0.9px;color:var(--muted);margin-bottom:7px;font-weight:700;}
  .hero-metric .hm-value{font-family:var(--font-display);font-weight:800;font-size:1.65rem;line-height:1.1;color:var(--ink);}
  .hero-metric .hm-value.small{font-size:1.1rem;}
  .hero-metric .hm-sub{font-size:0.71rem;color:var(--muted);margin-top:5px;}
  .hero-metric.accent .hm-value{color:var(--accent-2);}
  .hero-metric.warn .hm-value{color:#DB8B7E;}
  .hero-metric.good .hm-value{color:#7FBF93;}
  .hero-metric.gold .hm-value{color:var(--gold);}

  .chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
  .chip{font-family:var(--font-body);font-size:0.78rem;font-weight:600;padding:7px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .12s;}
  .chip:hover{border-color:rgba(148,163,184,0.35);transform:translateY(-1px);}
  .chip.active{background:linear-gradient(135deg,#8B5CF6,#6D28D9);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(139,92,246,0.35);}

  .pinned-panel{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--card-radius);padding:14px 18px;margin-bottom:16px;box-shadow:var(--shadow-md);}
  .pinned-panel-head{font-family:var(--font-display);font-weight:700;font-size:0.9rem;color:var(--ink-soft);margin-bottom:10px;letter-spacing:.02em;}
  .pinned-panel-list{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  .pinned-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:0.8rem;font-weight:600;padding:6px 10px 6px 12px;border-radius:8px;border:1px solid rgba(250,204,21,0.4);background:rgba(250,204,21,0.08);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .15s,transform .12s;}
  .pinned-chip:hover{background:rgba(250,204,21,0.18);transform:translateY(-1px);}
  .pinned-chip .unpin-x{opacity:.6;font-size:0.85rem;padding:0 2px;}
  .pinned-chip .unpin-x:hover{opacity:1;}
  .pin-star{cursor:pointer;font-size:1.05rem;line-height:1;color:var(--ink-soft);user-select:none;transition:color .15s,transform .12s;display:inline-block;margin-right:6px;vertical-align:middle;}
  .pin-star:hover{transform:scale(1.15);}
  .pin-star.pinned{color:var(--gold,#FACC15);}
  #drawerPinBtn.pinned{color:var(--gold,#FACC15);border-color:rgba(250,204,21,0.5);}

  .menu-wrap{position:relative;display:inline-block;}
  .menu-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);min-width:230px;z-index:90;padding:6px;}
  .menu-dropdown.open{display:block;}
  .menu-dropdown button{display:flex;width:100%;text-align:left;border:none;background:none;padding:9px 11px;border-radius:9px;color:var(--ink-soft);}
  .menu-dropdown button:hover{background:rgba(148,163,184,0.1);color:var(--ink);transform:none;}
  .menu-section-label{font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding:10px 11px 4px;}
  .menu-section-label:first-child{padding-top:5px;}
  .menu-divider{height:1px;background:var(--line);margin:5px 4px;}

  .gold-btn{border-color:rgba(203,154,59,0.4);color:var(--gold);}
  .gold-btn:hover{background:rgba(203,154,59,0.12);color:var(--gold);}

  .subject-th-avg{display:block;font-weight:500;font-size:0.68rem;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:2px;}

  .delta-tag{font-family:var(--font-mono);font-size:0.7rem;margin-left:6px;}
  .delta-tag.up{color:#7FBF93;}
  .delta-tag.down{color:#DB8B7E;}
  .delta-tag.flat{color:var(--muted);}
  .prev-percent{font-family:var(--font-mono);font-size:0.78rem;color:var(--muted);margin-right:4px;}
  .prev-arrow{color:var(--muted);margin-right:6px;font-size:0.78rem;}
  .zone-pill.prev-pill{margin-right:6px;}

  .zone-list{display:flex;flex-direction:column;gap:8px;justify-content:center;padding:0 6px;}
  .zone-list-row{display:flex;align-items:center;gap:9px;font-size:0.8rem;}
  .zone-list-row .zl-dot{width:10px;height:10px;border-radius:50%;flex:none;}
  .zone-list-row .zl-label{flex:1;color:var(--ink-soft);}
  .zone-list-row .zl-count{font-family:var(--font-mono);font-weight:700;}

  .mono{font-family:var(--font-mono);}

  /* Trend chart legend */
  .chart-legend{display:flex;gap:16px;margin-bottom:8px;font-size:0.72rem;color:var(--muted);}
  .chart-legend span{display:flex;align-items:center;gap:6px;}
  .lg-swatch{display:inline-block;width:13px;border-radius:2px;}
  .lg-swatch.lg-line{height:3px;}
  .lg-swatch.lg-band{height:9px;opacity:0.4;}

  /* Diverging (mirrored) zone comparison chart */
  .zdiv-headers{display:flex;justify-content:space-between;font-size:0.66rem;letter-spacing:0.6px;color:var(--muted);text-transform:uppercase;padding:0 0 6px 90px;}
  .zdiv-headers span:first-child{flex:1;text-align:right;padding-right:calc(50% - 45px);}
  .zdiv-headers span:last-child{flex:1;padding-left:calc(50% - 45px);}
  .zdiv-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
  .zdiv-label{width:70px;flex:none;font-size:0.72rem;color:var(--ink-soft);display:flex;align-items:center;gap:6px;justify-content:flex-end;text-align:right;}
  .zdiv-label .zl-dot{width:8px;height:8px;border-radius:50%;flex:none;}
  .zdiv-bars{flex:1;position:relative;height:20px;display:flex;}
  .zdiv-axis{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line);}
  .zdiv-half{width:50%;height:100%;display:flex;align-items:center;}
  .zdiv-half.left{justify-content:flex-end;}
  .zdiv-half.right{justify-content:flex-start;}
  .zdiv-bar{height:13px;border-radius:3px;transition:width .5s cubic-bezier(.22,.9,.3,1);}
  .zdiv-bar.prev{opacity:0.4;}
  .zdiv-nums{width:104px;flex:none;display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:0.74rem;}
  .zdiv-nums b{font-weight:700;}

  /* Score distribution histogram */
  .hist-stats{display:flex;gap:20px;margin-top:12px;}
  .hist-stats div{font-size:0.64rem;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);}
  .hist-stats b{display:block;font-size:0.95rem;color:var(--ink);margin-top:2px;font-weight:700;}

  .compare-row{display:flex;gap:10px;align-items:center;font-size:0.8rem;color:var(--ink-soft);margin:10px 0 2px;flex-wrap:wrap;}
  .compare-row .cr-bar{flex:1;min-width:120px;height:8px;background:var(--surface-1);border-radius:5px;overflow:hidden;border:1px solid var(--line);position:relative;}
  .compare-row .cr-fill{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:5px;}
  .compare-row .cr-fill.bench{background:var(--gold);opacity:0.55;}

  .insights-list{list-style:none;margin:0;padding:0;font-size:0.84rem;color:var(--ink-soft);}
  .insights-list li{padding:9px 0;border-top:1px solid var(--line);display:flex;gap:9px;}
  .insights-list li:first-child{border-top:none;}
  .insights-list li .ins-icon{flex:none;width:14px;text-align:center;font-size:0.72rem;font-weight:700;color:var(--muted);}
  .insights-list li .ins-icon.up{color:#7FBF93;}
  .insights-list li .ins-icon.down{color:#DB8B7E;}
  .insights-list li .ins-icon.alert{color:#DB8B7E;font-size:0.5rem;}
  .insights-list li .ins-icon.muted{color:var(--muted);font-size:0.5rem;}

  /* Small static color dots — replace circular zone emoji in table headers,
     hero-metric labels, dropdown chips, etc. Deliberately plain: no glow,
     no animation, just a color swatch next to the label. */
  .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle;}
  .dot.green{background:var(--green);}
  .dot.blue{background:var(--blue);}
  .dot.yellow{background:var(--yellow);}
  .dot.pink{background:var(--pink);}
  .dot.red{background:var(--red);}
  .dot.grey{background:var(--grey);}
  .dot.orange{background:var(--orange);}

  .tag-best,.tag-worst{font-size:0.66rem;font-weight:700;padding:1px 7px;border-radius:5px;margin-left:5px;vertical-align:middle;}
  .tag-best{background:rgba(250,204,21,0.16);color:var(--gold);}
  .tag-worst{background:rgba(192,86,70,0.12);color:#DB8B7E;}

  .tooltip-hint{font-size:0.68rem;color:var(--muted);text-align:right;margin-top:2px;}

  /* ===== search + clickable rows/cards ===== */
  table.main-table tbody tr{cursor:pointer;}
  .person-link{cursor:pointer;}
  .person-link:hover{text-decoration:underline;color:var(--accent-2);}
  .card ul li.person-link{padding-left:2px;}
  .card ul li.hide-extra{display:none;}
  .card ul.expanded li.hide-extra{display:list-item;}
  .more-toggle{cursor:pointer;}
  .more-toggle:hover{text-decoration:underline;color:var(--accent-2);}

  /* ===== student detail drawer =====
     Kept isolated from the page's paint/layout via `contain`, and promoted
     to its own compositing layer via `will-change`, so opening it doesn't
     force the whole page (counters, hover states, other cards) to repaint
     every frame during the slide-in. backdrop-filter is intentionally left
     off the overlay — blurring live content behind a moving panel is one of
     the most expensive things a browser can do on every frame; a solid
     translucent overlay looks nearly identical without the repaint cost. */
  .drawer-overlay{position:fixed;inset:0;background:rgba(2,6,23,0.62);display:none;z-index:60;contain:strict;}
  .drawer-overlay.open{display:block;}
  .drawer{position:fixed;top:0;right:0;height:100%;width:460px;max-width:92vw;background:var(--paper-raised);
    box-shadow:-16px 0 40px rgba(2,6,23,0.5);transform:translateX(100%);transition:transform .25s cubic-bezier(.22,.9,.32,1);
    display:flex;flex-direction:column;border-left:1px solid var(--line);will-change:transform;contain:layout style paint;}
  .drawer-overlay.open .drawer{transform:translateX(0);}
  .drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px;
    border-bottom:1px solid var(--line);gap:12px;flex-wrap:wrap;}
  .drawer-head h3{margin:0;font-family:var(--font-display);font-weight:800;font-size:1.3rem;}
  .drawer-sub{font-size:0.76rem;color:var(--muted);margin-top:5px;}
  .drawer-head-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;}
  .drawer-head-actions button{white-space:nowrap;}
  .drawer-body{padding:10px 24px 24px;overflow:auto;flex:1;contain:content;}
  .drawer-subject-row{display:block;padding:9px 12px 10px;margin:6px 0;background:var(--surface-2);
    border:1px solid var(--line);border-radius:10px;}
  .drawer-subject-row:first-child{margin-top:0;}
  .drawer-subject-name{font-weight:700;font-size:0.82rem;letter-spacing:0.01em;}
  .dsr-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px;}
  .dsr-meta{display:flex;align-items:baseline;gap:8px;font-size:0.68rem;color:var(--muted);}
  .dsr-meta .delta-tag{margin-left:0;font-size:0.68rem;}
  .dsr-pills{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:5px;}
  .drawer-subject-row .zone-pill{justify-content:center;padding:3px 6px;font-size:0.7rem;font-weight:600;
    font-variant-numeric:tabular-nums;border-radius:5px;box-shadow:none;}
  .drawer-subject-row .zone-pill.prev-pill{margin-right:0;opacity:0.72;}
  @media (prefers-reduced-motion: reduce){.drawer{transition:none;}}

  /* ===== v3 additions: theme, motion, polish ===== */
  :root[data-theme="light"]{
    --ink:#1c2b45;      --ink-soft:#3a4a68;
    --paper:#f6f4ef;    --paper-raised:#ffffff;
    --line:#e2ded3;     --muted:#7a7367;
    --green:#3f7150;    --green-bg:#e2ede2;
    --blue:#3a6ea8;     --blue-bg:#dfe8f2;
    --yellow:#c98f2b;   --yellow-bg:#f6ecd4;
    --pink:#b0567a;     --pink-bg:#f3e1ea;
    --red:#b5433a;      --red-bg:#f6e3e0;
    --grey:#8a8478;     --grey-bg:#e8e5dd;
    --accent:#B6903C;   --accent-2:#8F6F28;
    --orange:#A85A1E;   --orange-bg:#f3e3d2;
    --gold:#b6903c;     --gold-bg:#f6ecd4;
    --surface-1:#efece4; --surface-2:#ffffff;
    --glass-bg: rgba(255,255,255,0.6);
  }
  :root{ --glass-bg: rgba(21,31,47,0.55); }
  body{transition:background .25s ease, color .25s ease;}
  .panel, .card, .chart-card, .table-wrap, .modal, .toast{transition:background .25s ease, color .25s ease, border-color .25s ease, box-shadow .18s ease, transform .18s ease;}

  .theme-toggle{font-size:1rem;line-height:1;padding:8px 10px;}
  .masthead-actions{display:flex;align-items:center;gap:12px;}
  .last-updated{font-size:0.7rem;color:rgba(255,255,255,0.6);margin-top:4px;text-align:right;}

  /* Glass toolbar */
  .toolbar{background:var(--glass-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
    border:1px solid var(--line);border-radius:16px;padding:11px 12px;box-shadow:var(--shadow-sm);}

  /* Hover lift on cards */
  .card:hover, .chart-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(139,92,246,0.35);}
  .hero-metric{transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;}
  .hero-metric:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(139,92,246,0.3);}
  .hero-metric.clickable{cursor:pointer;}
  tr[data-sid]{cursor:pointer;}
  .card.clickable{cursor:pointer;}
  .card.clickable:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
  .stat-list-row{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;cursor:pointer;font-size:0.85rem;}
  .stat-list-row:hover{background:rgba(148,163,184,0.08);}
  .stat-list-row + .stat-list-row{border-top:none;margin-top:2px;}
  .stat-list-row .slr-name{font-weight:700;}
  .stat-list-row .slr-meta{font-size:0.72rem;color:var(--muted);font-weight:500;}

  /* Entrance animation */
  @keyframes fadeInUp{from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);}}
  .enter-anim{animation:fadeInUp .28s ease both;}
  @media (prefers-reduced-motion: reduce){ .enter-anim{animation:none;} }

  /* Student avatar initials */
  .avatar-initials{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
    border-radius:9px;font-size:0.65rem;font-weight:800;margin-right:9px;color:#fff;vertical-align:middle;flex:none;box-shadow:0 2px 6px rgba(2,6,23,0.3);}
  .avatar-initials.a1{background:linear-gradient(145deg,#C2703C,#8C4A1E);} .avatar-initials.a2{background:linear-gradient(145deg,#34D399,#059669);}
  .avatar-initials.a3{background:linear-gradient(145deg,#CB9A3B,#9C7526);} .avatar-initials.a4{background:linear-gradient(145deg,#BD6C8C,#8F4D66);}
  .avatar-initials.a5{background:linear-gradient(145deg,#C05646,#8F3C30);} .avatar-initials.a6{background:linear-gradient(145deg,#9B84C4,#6B5596);}

  /* Toast notifications */
  .toast-stack{position:fixed;top:18px;right:18px;z-index:400;display:flex;flex-direction:column;gap:10px;max-width:320px;}
  .toast{background:var(--paper-raised);border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:14px;padding:12px 16px;font-size:0.82rem;color:var(--ink);box-shadow:var(--shadow-lg);
    transform:translateX(130%);animation:toastIn .3s ease forwards, toastOut .3s ease forwards var(--toast-life,3.2s);}
  .toast.success{border-left-color:var(--green);} .toast.error{border-left-color:var(--red);}
  .toast.warning{border-left-color:var(--yellow);}
  @keyframes toastIn{to{transform:translateX(0);}}
  @keyframes toastOut{to{transform:translateX(130%);opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .toast{animation:none;transform:translateX(0);} }

  /* Loading splash screen */
  .loading-screen{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;
    z-index:600;transition:opacity .25s ease;}
  .loading-screen.hide{opacity:0;pointer-events:none;}
  .loading-inner{text-align:center;animation:loadingRise .25s ease;}
  @keyframes loadingRise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
  .loading-mark{width:64px;height:64px;margin:0 auto 18px;border-radius:14px;
    background:linear-gradient(145deg,#8B5CF6,#6D28D9);
    display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 10px 26px rgba(139,92,246,0.4);}
  .loading-mark::before{display:none;}
  .loading-mark span{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:#fff;}
  .loading-kicker{font-family:var(--font-body);font-size:0.68rem;letter-spacing:2.8px;text-transform:uppercase;
    color:var(--accent-2);font-weight:700;margin-bottom:7px;}
  .loading-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:7px;}
  .loading-sub{font-size:0.8rem;color:var(--muted);margin-bottom:18px;font-style:normal;}
  .loading-bar{width:220px;height:4px;background:var(--line);border-radius:3px;overflow:hidden;margin:0 auto;position:relative;}
  .loading-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));
    border-radius:3px;transition:width .12s ease;}
  @media (prefers-reduced-motion: reduce){ .loading-screen{display:none;} }

  /* ---- Welcome hero overlay: shown once per page load, signed-in users only ---- */
  .welcome-hero{position:fixed;inset:0;z-index:700;display:flex;flex-direction:column;overflow:hidden;
    opacity:1;transition:opacity .42s ease;
    background:radial-gradient(ellipse at 50% 42%,#211a38 0%,#111019 48%,#0b0a10 100%);}
  .welcome-hero.wh-hide{opacity:0;pointer-events:none;}
  @media (prefers-reduced-motion: reduce){ .welcome-hero{transition:none;} }

  .wh-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,6,12,.18),transparent 42%,rgba(7,6,12,.34));}
  .wh-grid{position:absolute;inset:0;pointer-events:none;opacity:.14;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
  .wh-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px)}
  .wh-glow-a{width:min(58vw,760px);aspect-ratio:1;left:50%;top:48%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(118,83,190,.18),rgba(93,64,153,.08) 38%,transparent 70%)}
  .wh-glow-b{width:320px;height:320px;right:-170px;bottom:-190px;background:rgba(152,119,220,.12);filter:blur(70px)}
  .wh-shard{display:none;position:absolute;filter:drop-shadow(0 10px 18px rgba(0,0,0,0.35));will-change:transform;}
  .wh-shard.violet{background:linear-gradient(150deg,#B9A2F0,#7C5CC7);}
  .wh-shard.violet-dark{background:linear-gradient(150deg,#6B4FA8,#3B2A6B);}
  .wh-shard.lime{background:linear-gradient(150deg,#CFF37A,#9AE04E);}
  .wh-s1{width:70px;height:70px;top:10%;left:4%;clip-path:polygon(20% 0,100% 15%,85% 100%,0 70%);animation:whFloat1 22s ease-in-out infinite;}
  .wh-s2{width:44px;height:44px;top:22%;left:28%;clip-path:polygon(0 30%,60% 0,100% 60%,40% 100%);animation:whFloat2 18s ease-in-out infinite;}
  .wh-s3{width:120px;height:120px;top:8%;right:6%;border-radius:50%;background:radial-gradient(circle at 30% 30%,#2A1B4D,#0D0619);animation:whFloat3 26s ease-in-out infinite;}
  .wh-s4{width:36px;height:36px;top:16%;right:16%;clip-path:polygon(50% 0,100% 40%,80% 100%,10% 90%);animation:whFloat1 20s ease-in-out infinite;}
  .wh-s5{width:56px;height:56px;bottom:16%;right:8%;clip-path:polygon(20% 0,100% 30%,80% 100%,0 80%);animation:whFloat2 24s ease-in-out infinite;}
  .wh-s6{width:80px;height:80px;bottom:8%;left:3%;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%);animation:whFloat3 28s ease-in-out infinite;}
  @keyframes whFloat1{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(10px,-14px) rotate(6deg);}}
  @keyframes whFloat2{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(-12px,10px) rotate(-5deg);}}
  @keyframes whFloat3{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(8px,12px) rotate(4deg);}}
  @media (prefers-reduced-motion: reduce){.wh-shard{animation:none;}}

  .wh-orb{display:none;position:absolute;top:9%;left:50%;transform:translateX(-50%);width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle at 32% 28%,#D8CBF7 0%,#9E7FDE 32%,#5A3FA0 68%,#2A1B4D 100%);
    box-shadow:0 40px 90px rgba(60,30,120,0.55), inset 0 0 0 1px rgba(255,255,255,0.18);z-index:1;}
  .wh-orb::before{content:'';position:absolute;inset:0;border-radius:50%;
    background:linear-gradient(115deg, transparent 42%, rgba(20,10,40,0.55) 46%, rgba(20,10,40,0.55) 58%, transparent 62%);}
  .wh-orb::after{content:'';position:absolute;top:14%;left:14%;width:22%;height:22%;border-radius:50%;
    background:rgba(255,255,255,0.5);filter:blur(6px);}

  .wh-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
    padding:clamp(22px,4vw,42px) clamp(22px,6vw,84px);gap:16px;flex-wrap:wrap;}
  .wh-brand{display:flex;align-items:center;gap:12px;}
  .wh-logo{display:block;width:154px;height:auto;max-height:52px;object-fit:contain;object-position:left center;filter:drop-shadow(0 4px 18px rgba(0,0,0,.2))}
  .wh-brand .brand-mark span{font-size:1rem;}
  .wh-wordmark{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-0.01em;}
  .wh-wordmark small{display:block;font-family:var(--font-body);font-weight:500;font-size:0.68rem;
    color:rgba(255,255,255,0.6);letter-spacing:0.3px;}
  .wh-greeting{color:rgba(235,230,247,.62);font-size:.77rem;font-weight:550;letter-spacing:.03em}

  .wh-main{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:0 22px clamp(62px,11vh,130px);}
  .wh-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:25px;color:#b9a5e6;font-size:.67rem;font-weight:700;letter-spacing:.19em}
  .wh-eyebrow span{width:22px;height:1px;background:#a98be1;box-shadow:0 0 12px #9d7bdc}
  .wh-title{font-family:var(--font-display);font-weight:720;color:#f8f6fc;letter-spacing:-0.045em;
    font-size:clamp(2.35rem,6.4vw,5.5rem);line-height:1.03;margin:0;max-width:1000px;text-wrap:balance;}
  .wh-title em{font-style:normal;color:#b7a1e5}
  .wh-description{margin:22px 0 38px;max-width:520px;color:rgba(235,230,247,.62);font-size:clamp(.92rem,1.5vw,1.05rem);line-height:1.65}
  .wh-cta{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:54px;background:#f5f2fa;color:#211833;
    font-weight:700;font-size:.9rem;padding:7px 8px 7px 23px;border-radius:999px;
    border:1px solid rgba(255,255,255,.68);box-shadow:0 12px 40px rgba(4,2,12,.3),0 0 0 5px rgba(255,255,255,.035);
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer;font-family:var(--font-body);}
  .wh-cta:hover{transform:translateY(-2px);background:#fff;box-shadow:0 18px 46px rgba(4,2,12,.4),0 0 0 6px rgba(183,161,229,.12);}
  .wh-cta-arrow{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
    background:#ddd2f1;color:#39275c;font-size:1.1rem;}
  .wh-credit{margin-top:24px;font-size:0.68rem;letter-spacing:1.6px;text-transform:uppercase;
    color:rgba(255,255,255,0.5);font-weight:600;}
  @media (max-width:640px){
    .wh-nav{padding:20px 20px;}
    .wh-logo{width:128px}
    .wh-title{font-size:clamp(2.1rem,10vw,3.7rem)}
    .wh-description{max-width:350px;margin:18px 0 30px}
  }

  /* Confetti */
  .confetti-container{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden;}
  .confetti-piece{position:absolute;top:-10px;width:7px;height:7px;border-radius:1px;opacity:0.9;
    animation-name:confettiFall;animation-timing-function:ease-in;animation-fill-mode:forwards;}
  @keyframes confettiFall{to{transform:translateY(100vh) rotate(360deg);opacity:0;}}  /* ===== micro-interactions: ripple, press, tooltip ===== */
  button, .chip{ position:relative; overflow:hidden; will-change:transform; }
  .card, .chart-card, .hero-metric{ position:relative; will-change:transform; }
  .table-wrap, .modal{ overflow:auto; }
  button{ transition:background .2s cubic-bezier(.22,.9,.32,1), color .2s cubic-bezier(.22,.9,.32,1), box-shadow .2s cubic-bezier(.22,.9,.32,1), transform .15s cubic-bezier(.22,.9,.32,1), border-color .2s cubic-bezier(.22,.9,.32,1); }
  button:active{ transform:translateY(0) scale(0.97); transition-duration:.08s; }
  .card, .chart-card, .hero-metric{ transition:transform .22s cubic-bezier(.22,.9,.32,1), box-shadow .22s cubic-bezier(.22,.9,.32,1), border-color .22s cubic-bezier(.22,.9,.32,1); }

  .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.35);transform:scale(0);
    animation:rippleAnim .55s cubic-bezier(.22,.9,.32,1) forwards;pointer-events:none;}
  button.ghost .ripple, button.chip .ripple{background:rgba(148,163,184,0.35);}
  @keyframes rippleAnim{to{transform:scale(2.6);opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .ripple{display:none;} }

  .spl-tooltip{position:fixed;z-index:800;background:var(--surface-2);color:var(--ink);border:1px solid var(--line);
    border-radius:10px;padding:7px 11px;font-size:0.76rem;font-weight:500;box-shadow:var(--shadow-md);
    backdrop-filter:blur(10px);max-width:260px;opacity:0;transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease;pointer-events:none;}
  .spl-tooltip.show{opacity:1;transform:translateY(0);}
  .spl-tooltip::after{content:'';position:absolute;width:8px;height:8px;background:inherit;border:1px solid var(--line);
    border-top:none;border-left:none;transform:rotate(45deg);}
  .spl-tooltip.pos-top::after{bottom:-5px;left:50%;margin-left:-4px;}
  .spl-tooltip.pos-bottom::after{top:-5px;left:50%;margin-left:-4px;border:none;border-top:1px solid var(--line);border-left:1px solid var(--line);}

  .skeleton{position:relative;overflow:hidden;background:var(--surface-2);border-radius:8px;}
  .skeleton::after{content:'';position:absolute;inset:0;
    background:linear-gradient(90deg, transparent, rgba(148,163,184,0.16), transparent);
    transform:translateX(-100%);animation:skeletonShimmer 1.4s ease-in-out infinite;}
  @keyframes skeletonShimmer{to{transform:translateX(100%);}}
  @media (prefers-reduced-motion: reduce){ .skeleton::after{animation:none;} }

  #soundToggleBtn.active{color:var(--accent-2);}
  .empty-state .es-icon{margin-bottom:14px;opacity:0.6;}
  .empty-state .es-icon svg{width:44px;height:44px;stroke:var(--muted);}

  /* ===== v4 additions: keyboard shortcuts, command palette, focus mode, presentation mode ===== */
  kbd{display:inline-block;min-width:20px;text-align:center;padding:3px 7px;font-family:var(--font-mono);
    font-size:0.72rem;font-weight:600;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);
    border-radius:6px;box-shadow:0 1px 0 rgba(2,6,23,0.3);}

  /* Keyboard shortcuts help modal */
  .shortcuts-modal .modal{max-width:600px;width:92vw;}
  .shortcuts-grid{display:flex;flex-direction:column;gap:0;margin-top:14px;max-height:60vh;overflow:auto;}
  .shortcut-row{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);}
  .shortcut-row:last-child{border-bottom:none;}
  .shortcut-row .sc-label{font-size:0.85rem;color:var(--ink-soft);}
  .shortcut-row .sc-keys{display:flex;gap:4px;align-items:center;}
  .sc-keys .plus{color:var(--muted);font-size:0.72rem;}

  /* Command palette */
  .cmdk-modal .modal{max-width:560px;width:92vw;padding:0;overflow:hidden;align-self:flex-start;margin-top:12vh;}
  .cmdk-input-wrap{padding:16px 18px;border-bottom:1px solid var(--line);}
  .cmdk-input-wrap input{width:100%;font-size:0.95rem;padding:10px 12px;border-radius:10px;}
  .cmdk-results{max-height:360px;overflow:auto;padding:8px;}
  .cmdk-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;cursor:pointer;font-size:0.85rem;color:var(--ink-soft);}
  .cmdk-item:hover, .cmdk-item.active{background:rgba(139,92,246,0.12);color:var(--ink);}
  .cmdk-item .sc-keys{opacity:0.75;flex:none;}
  .cmdk-empty{padding:26px;text-align:center;color:var(--muted);font-size:0.85rem;}

  /* Floating mode-exit button (shared by Focus Mode / Presentation Mode) */
  .mode-exit-btn{position:fixed;bottom:24px;right:24px;z-index:200;display:none;
    background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:14px;
    padding:11px 18px;box-shadow:var(--shadow-lg);font-weight:700;}
  .mode-exit-btn:hover{background:var(--surface-1);}
  body.focus-mode #focusModeExitBtn, body.presentation-mode #presentationModeExitBtn{display:inline-flex;}
  body.focus-mode, body.presentation-mode{animation:modeFadeIn .35s ease;}
  @keyframes modeFadeIn{from{opacity:0.5;} to{opacity:1;}}
  @media (prefers-reduced-motion: reduce){ body.focus-mode, body.presentation-mode{animation:none;} }

  /* Focus Mode: hide navigation/sidebars/buttons, maximise charts/tables/analytics */
  body.focus-mode .masthead, body.focus-mode #actionsToolbar, body.focus-mode .pinned-panel,
  body.focus-mode #quickChipRow { display:none !important; }
  body.focus-mode .wrap{max-width:100%;padding:20px 24px 90px;transition:padding .3s ease, max-width .3s ease;}
  body.focus-mode #filtersToolbar{background:transparent;border:none;box-shadow:none;padding:0 0 14px;}
  body.focus-mode .table-wrap{max-height:calc(100vh - 150px);}

  /* Presentation Mode: enlarge KPIs/charts/fonts, remove editing controls, keep dark premium theme */
  body.presentation-mode .masthead .masthead-actions, body.presentation-mode #actionsToolbar,
  body.presentation-mode .pinned-panel, body.presentation-mode tr[data-sid] .pin-star { display:none !important; }
  body.presentation-mode .wrap{max-width:1600px;padding:34px 44px 110px;transition:padding .3s ease, max-width .3s ease;}
  body.presentation-mode .hero-metric{padding:26px 24px;}
  body.presentation-mode .hero-metric .hm-label{font-size:0.8rem;}
  body.presentation-mode .hero-metric .hm-value{font-size:2.6rem;}
  body.presentation-mode .hero-metric .hm-value.small{font-size:1.6rem;}
  body.presentation-mode .section-title{font-size:1.7rem;margin:52px 0 20px;}
  body.presentation-mode .chart-card{padding:30px 32px;}
  body.presentation-mode .chart-card h4{font-size:1.15rem;}
  body.presentation-mode table.main-table td, body.presentation-mode table.main-table th{font-size:1rem;padding:16px 20px;}
  body.presentation-mode .card{padding:24px;}
  /* ===== v5 additions: support / intervention plan ===== */
  textarea{width:100%;background:var(--surface-1);border:1px solid var(--line);border-radius:10px;color:var(--ink);
    padding:9px 12px;font-family:var(--font-body);font-size:0.85rem;resize:vertical;min-height:64px;box-sizing:border-box;}
  textarea:focus{outline:none;border-color:var(--accent);}
  .support-indicator{display:inline-block;margin-right:3px;font-size:0.82rem;cursor:pointer;line-height:1;}
  .priority-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:0.72rem;font-weight:700;border:1px solid transparent;white-space:nowrap;}
  .priority-badge.high{background:var(--red-bg);color:#DB8B7E;border-color:rgba(192,86,70,0.35);}
  .priority-badge.medium{background:var(--yellow-bg);color:#E0B563;border-color:rgba(203,154,59,0.35);}
  .priority-badge.low{background:var(--green-bg);color:#7FBF93;border-color:rgba(79,154,108,0.35);}
  .support-status-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;font-size:0.7rem;
    font-weight:600;background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);margin-left:6px;white-space:nowrap;}
  .support-status-tag.resolved{background:var(--green-bg);color:#7FBF93;border-color:rgba(79,154,108,0.35);}
  .support-status-tag.improving{background:var(--blue-bg);color:#8FB3D9;border-color:rgba(90,135,184,0.35);}
  .support-status-tag.escalated{background:var(--red-bg);color:#DB8B7E;border-color:rgba(192,86,70,0.35);}
  .support-status-tag.no_improvement{background:var(--yellow-bg);color:#E0B563;border-color:rgba(203,154,59,0.35);}
  .followup-indicator{display:inline-block;margin-top:8px;font-size:0.73rem;font-weight:700;padding:3px 10px;border-radius:6px;}
  .followup-indicator.upcoming{background:var(--blue-bg);color:#60A5FA;}
  .followup-indicator.due{background:var(--yellow-bg);color:#E0B563;}
  .followup-indicator.overdue{background:var(--red-bg);color:#DB8B7E;}
  .support-section{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px;background:var(--surface-1);}
  .support-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px;}
  .support-section-head h4{margin:0;font-family:var(--font-display);font-weight:700;font-size:0.92rem;}
  .support-status-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:2px;}
  .ssc-top{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
  .ssc-problem{font-size:0.82rem;color:var(--ink-soft);margin-bottom:2px;}
  .ssc-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
  .support-history-toggle{margin-top:12px;font-size:0.76rem;color:var(--accent-2);cursor:pointer;text-decoration:underline;user-select:none;}
  .support-history-panel{display:none;margin-top:8px;}
  .support-history-panel.open{display:block;}
  .support-plan-item{border-top:1px solid var(--line);padding:10px 2px;font-size:0.8rem;}
  .spi-head{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap;}
  .followup-entry{padding:6px 0 6px 10px;border-left:2px solid var(--line);margin:4px 0 4px 4px;font-size:0.78rem;color:var(--ink-soft);}

  /* ===== Reorder Sections ===== */
  .ros-list{list-style:none;margin:0;padding:0;max-height:55vh;overflow-y:auto;border:1px solid var(--line);border-radius:12px;}
  .ros-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line);background:var(--paper-raised);cursor:grab;font-size:0.85rem;}
  .ros-list li:first-child{border-top:none;}
  .ros-list li.dragging{opacity:0.45;}
  .ros-list li.drag-over{box-shadow:inset 0 2px 0 var(--accent);}
  .ros-list .ros-handle{color:var(--muted);user-select:none;}
  .ros-list .ros-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ros-list button{padding:2px 8px;line-height:1.2;}