:root{
      --blue:#23479b;
      --blue-deep:#142c68;
      --teal:#69c7bd;
      --green:#1f9d61;
      --yellow:#f3c94a;
      --red:#d44f4f;
      --paper:#fbfcff;
      --ink:#1f2328;
      --muted:#687385;
      --line:#dfe5eb;
      --line-strong:#c9d5e1;
      --white:#fff;
      --surface:rgba(255,255,255,.9);
      --surface-strong:rgba(255,255,255,.97);
      --surface-soft:#f4f8fb;
      --shadow:0 24px 60px rgba(20,44,104,.14);
      --shadow-soft:0 10px 26px rgba(20,44,104,.08);
      --shadow-lift:0 18px 36px rgba(20,44,104,.12);
      --radius:8px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      min-height:100vh;
      font-family:Inter, "Segoe UI", Arial, sans-serif;
      color:var(--ink);
      background:
        linear-gradient(135deg, rgba(105,199,189,.18), transparent 38%),
        linear-gradient(225deg, rgba(129,117,187,.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(251,252,255,.98)),
        url("/assets/standard-slide-lines.webp") center top / min(920px, 120vw) auto no-repeat,
        var(--paper);
    }
    button,input,select,textarea{font:inherit}
    .page{
      width:min(1760px, calc(100% - 32px));
      margin:0 auto;
      padding:24px 0 56px;
    }
    header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      margin-bottom:20px;
      padding:12px 0;
    }
    .brand-block{
      display:flex;
      align-items:flex-start;
      gap:14px;
      min-width:0;
    }
    .menu-toggle{
      width:46px;
      min-width:46px;
      min-height:46px;
      padding:0;
      border:1px solid rgba(201,213,225,.82);
      background:var(--surface-strong);
      color:var(--blue-deep);
      box-shadow:var(--shadow-soft);
      display:grid;
      place-items:center;
      font-size:1.35rem;
      line-height:1;
      transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .menu-toggle:hover{
      transform:translateY(-1px);
      border-color:var(--teal);
      box-shadow:var(--shadow-lift);
    }
    h1{
      margin:0;
      color:var(--blue);
      font-size:clamp(2.15rem, 5vw, 4.35rem);
      line-height:.92;
      letter-spacing:0;
    }
    .subtitle{
      margin:16px 0 0;
      color:#3d4755;
      font-size:1.1rem;
    }
    .home-link{
      border:1px solid var(--line);
      border-radius:999px;
      background:white;
      color:var(--blue-deep);
      min-height:40px;
      padding:0 14px;
      display:inline-flex;
      align-items:center;
      text-decoration:none;
      font-weight:900;
      box-shadow:var(--shadow-soft);
      transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .home-link:hover{
      transform:translateY(-1px);
      border-color:var(--teal);
      box-shadow:var(--shadow-lift);
    }
    .header-actions{display:flex;gap:10px;align-items:center}
    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:24px;
      backdrop-filter:blur(12px);
    }
    #loginPanel{
      position:relative;
      overflow:hidden;
      width:min(720px,100%);
    }
    #loginPanel::before{
      content:"";
      position:absolute;
      top:0;
      left:18px;
      right:18px;
      height:4px;
      border-radius:0 0 999px 999px;
      background:linear-gradient(90deg, var(--blue), var(--teal), var(--yellow));
    }
    .login-row,.student-form{
      display:flex;
      gap:10px;
      align-items:flex-end;
      flex-wrap:wrap;
    }
    .login-row{max-width:520px}
    label{
      display:block;
      margin-bottom:8px;
      color:var(--muted);
      font-size:.78rem;
      font-weight:900;
      text-transform:uppercase;
    }
    .field{
      flex:1;
      min-width:190px;
    }
    input,select,textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:0 14px;
      font-weight:900;
      outline:none;
      background:rgba(255,255,255,.96);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
      transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }
    input,select{min-height:50px}
    textarea{
      min-height:130px;
      padding:12px 14px;
      resize:vertical;
      font-family:Consolas, "Courier New", monospace;
      font-weight:700;
      line-height:1.35;
    }
    input:focus,select:focus,textarea:focus{
      border-color:var(--teal);
      box-shadow:0 0 0 4px rgba(105,199,189,.2);
    }
    button{
      min-height:50px;
      border:0;
      border-radius:var(--radius);
      background:linear-gradient(180deg, #2b55b2, var(--blue));
      color:white;
      padding:0 18px;
      cursor:pointer;
      font-weight:900;
      box-shadow:0 8px 18px rgba(35,71,155,.2);
      transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
    }
    button:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(35,71,155,.24);
    }
    button:disabled{opacity:.55;cursor:not-allowed}
    .secondary{background:#edf2f7;color:var(--blue-deep)}
    .danger{background:#fff1f1;color:#9f2e2e}
    .success{background:#e8f8ee;color:#146c38}
    .game-session-card{
      display:grid;
      gap:10px;
      margin:14px 0;
      padding:16px;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:linear-gradient(180deg, #fff, #f8fbfe);
      box-shadow:var(--shadow-soft);
    }
    .game-session-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .error{
      min-height:22px;
      margin:12px 0 0;
      color:#a33d3d;
      font-weight:800;
    }
    .toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .toolbar h2{
      margin:0;
      color:var(--blue-deep);
      font-size:1.45rem;
    }
    .meta{color:var(--muted);font-weight:800}
    .dashboard-shell{display:grid;gap:18px}
    .dashboard-panel{
      display:grid;
      grid-template-columns:250px minmax(0,1fr);
      gap:18px;
      padding:0;
      border:0;
      background:transparent;
      box-shadow:none;
      backdrop-filter:none;
    }
    .tab-head{
      position:sticky;
      top:18px;
      align-self:start;
      display:grid;
      gap:14px;
      padding:14px;
      border:1px solid rgba(201,213,225,.86);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.92));
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }
    .tabs{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin:0;
    }
    .tab-button{
      min-height:44px;
      width:100%;
      background:transparent;
      color:var(--blue-deep);
      border:1px solid transparent;
      padding:0 14px;
      box-shadow:none;
      text-align:left;
      transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
    }
    .tab-button:hover{background:var(--surface-soft);border-color:var(--line)}
    .tab-button.active{background:linear-gradient(135deg, var(--blue-deep), var(--blue));color:white;border-color:var(--blue);box-shadow:0 12px 24px rgba(35,71,155,.2)}
    .tab-panel{
      min-width:0;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
      border:1px solid rgba(201,213,225,.86);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:24px;
      backdrop-filter:blur(12px);
    }
    body.nav-collapsed .dashboard-panel{grid-template-columns:minmax(0,1fr)}
    body.nav-collapsed .tab-head{display:none}
    .table-wrap{
      overflow:auto;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:white;
      box-shadow:var(--shadow-soft);
    }
    table{
      width:100%;
      border-collapse:collapse;
      min-width:880px;
    }
    th,td{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      text-align:left;
      vertical-align:top;
    }
    th{
      color:var(--blue-deep);
      background:linear-gradient(180deg, #f8fbfe, #f1f5fa);
      font-size:.82rem;
      text-transform:uppercase;
    }
    th.sortable{
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    th.sortable::after{
      content:" \2195";
      color:#8290a3;
    }
    th.sortable[aria-sort="ascending"]::after{content:" \2191";color:var(--blue)}
    th.sortable[aria-sort="descending"]::after{content:" \2193";color:var(--blue)}
    th.sortable:focus-visible{
      outline:3px solid var(--yellow);
      outline-offset:-3px;
    }
    td{font-weight:700;overflow-wrap:anywhere}
    tr:last-child td{border-bottom:0}
    tbody tr:hover td{background:#fbfdff}
    .cards{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
      margin-bottom:16px;
    }
    .stat-card{
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      padding:16px;
      box-shadow:var(--shadow-soft);
    }
    .stat-card b{
      display:block;
      color:var(--blue);
      font-size:2rem;
      line-height:1;
      margin-bottom:7px;
    }
    .stat-card span{color:var(--muted);font-weight:900}
    .split{
      display:grid;
      grid-template-columns:minmax(260px,.8fr) minmax(0,1.4fr);
      gap:16px;
    }
    .split .table-wrap table{min-width:680px}
    .list{
      display:grid;
      gap:8px;
      max-height:560px;
      overflow:auto;
      padding-right:4px;
    }
    .student-card{
      width:100%;
      min-height:48px;
      border:1px solid var(--line);
      background:white;
      color:var(--blue-deep);
      text-align:left;
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
      box-shadow:0 6px 14px rgba(20,44,104,.05);
      transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
    }
    .student-card:hover{transform:translateY(-1px);border-color:#cbd8e6;box-shadow:var(--shadow-soft)}
    .student-card.active{background:linear-gradient(135deg, var(--blue-deep), var(--blue));color:white;border-color:var(--blue);box-shadow:0 12px 24px rgba(35,71,155,.18)}
    .detail{
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:linear-gradient(180deg, #ffffff, #fbfdff);
      padding:16px;
      box-shadow:var(--shadow-soft);
    }
    .detail h3{margin:0 0 8px;color:var(--blue-deep)}
    .detail pre{
      margin:0;
      white-space:pre-wrap;
      font:700 .95rem/1.45 "Segoe UI", Arial, sans-serif;
      color:#2f3947;
    }
    .answer-list{
      display:grid;
      gap:10px;
      margin:14px 0;
    }
    .answer-card{
      border:1px solid var(--line);
      border-radius:10px;
      background:#f8fbff;
      padding:12px;
    }
    .answer-card b{
      display:block;
      color:var(--blue-deep);
      margin-bottom:6px;
    }
    .answer-card pre{
      background:white;
      border:1px solid #e6edf5;
      border-radius:8px;
      padding:10px;
      font-weight:650;
    }
    .answer-actions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin:12px 0;
    }
    .tag,.status-pill,.mood-pill{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      border-radius:999px;
      padding:0 10px;
      font-weight:900;
      font-size:.8rem;
    }
    .tag{background:#edf8f7;color:#17756f}
    .status-not-opened{background:#f1f4f8;color:#596679}
    .status-opened{background:#eaf2ff;color:#1b4e94}
    .status-draft{background:#fff8d8;color:#735600}
    .status-submitted{background:#e8f8ee;color:#146c38}
    .status-reviewed{background:#edf8f7;color:#17756f}
    .status-needs-fixing{background:#fff0f0;color:#9f2e2e}
    .status-complete{background:#e8f8ee;color:#146c38}
    .mood-pill{gap:8px;border:1px solid transparent}
    .mood-dot{width:14px;height:14px;border-radius:50%;display:inline-block}
    .mood-green{background:#e8f8ee;color:#146c38;border-color:#bceac9}
    .mood-green .mood-dot{background:#4bbf6b}
    .mood-yellow{background:#fff8d8;color:#735600;border-color:#f4dc82}
    .mood-yellow .mood-dot{background:#f0c53a}
    .mood-blue{background:#eaf2ff;color:#1b4e94;border-color:#bdd3f4}
    .mood-blue .mood-dot{background:#4c8be8}
    .mood-red{background:#fff0f0;color:#9f2e2e;border-color:#f2b9b9}
    .mood-red .mood-dot{background:#df5555}
    .view-button,.small-button{min-height:34px;padding:0 12px;font-size:.85rem}
    .task-form{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:10px;
      margin-bottom:16px;
    }
    .task-form .wide{grid-column:1/-1}
    .task-form .span-2{grid-column:span 2}
    .day-picker{
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:8px;
    }
    .day-picker label{
      margin:0;
      min-height:42px;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:linear-gradient(180deg, #ffffff, #f8fbff);
      color:var(--blue-deep);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      text-transform:none;
      font-size:.82rem;
      box-shadow:0 6px 14px rgba(20,44,104,.05);
    }
    .day-picker input{width:auto;min-height:0}
    .check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin-top:8px}
    .check-grid label{margin:0;min-height:40px;border:1px solid rgba(201,213,225,.9);border-radius:12px;background:#fff;color:var(--blue-deep);display:flex;align-items:center;gap:8px;padding:8px 10px;text-transform:none;font-size:.84rem;font-weight:850;box-shadow:0 5px 12px rgba(20,44,104,.05)}
    .check-grid input{width:auto;min-height:0}
    .visibility-panel,.ability-card{border:1px solid rgba(201,213,225,.9);border-radius:var(--radius);background:linear-gradient(180deg,#ffffff,#f8fbff);padding:12px;box-shadow:var(--shadow-soft)}
    .visibility-panel .meta,.ability-card .meta{margin-top:4px}
    .ability-summary{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
    .ability-pill{display:inline-flex;align-items:center;min-height:26px;border-radius:999px;background:#edf8f7;color:#17756f;padding:0 9px;font-weight:900;font-size:.78rem}
    .compact-field{min-width:220px;margin:0}
    .staff-view-sections{
      display:grid;
      gap:18px;
    }
    .staff-view-block{
      border-top:1px solid var(--line);
      padding-top:16px;
    }
    .staff-view-block:first-child{
      border-top:0;
      padding-top:0;
    }
    .staff-week-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(190px,1fr));
      gap:10px;
      overflow-x:auto;
      padding-bottom:4px;
    }
    .staff-day-column{
      min-width:190px;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,251,255,.86));
      padding:10px;
      box-shadow:var(--shadow-soft);
    }
    .staff-day-column.today{
      border-color:#d7c26a;
      background:#fffdf2;
    }
    .staff-day-column h4,.staff-view-block h3{
      margin:0 0 10px;
      color:var(--blue-deep);
    }
    .staff-task-list{
      display:grid;
      gap:10px;
    }
    .staff-view-card{
      display:grid;
      grid-template-columns:34px 1fr;
      gap:10px;
      align-items:start;
      border:1px solid rgba(201,213,225,.9);
      border-radius:var(--radius);
      background:linear-gradient(180deg, #ffffff, #fbfdff);
      padding:11px;
      box-shadow:var(--shadow-soft);
    }
    .staff-view-card.done{
      border-color:#bceac9;
      background:linear-gradient(180deg, #fbfffc, #f4fff7);
    }
    .staff-view-check{
      width:32px;
      height:32px;
      border:1px solid var(--line-strong);
      border-radius:7px;
      display:grid;
      place-items:center;
      color:transparent;
      background:white;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 5px 12px rgba(20,44,104,.08);
      font-weight:900;
    }
    .staff-view-card.done .staff-view-check{
      color:white;
      background:var(--green);
      border-color:var(--green);
      box-shadow:0 8px 18px rgba(31,157,97,.2);
    }
    .staff-view-title{
      margin:0;
      font-weight:900;
      color:var(--ink);
    }
    .staff-note{
      margin:7px 0 0;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.45;
    }
    .staff-cycle-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:10px;
    }
    .feedback-form{
      display:grid;
      gap:10px;
      margin-top:14px;
      padding-top:14px;
      border-top:1px solid var(--line);
    }
    .marking-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
    .marking-controls{display:flex;align-items:end;gap:16px;margin-bottom:14px}
    .marking-controls .field{flex:0 1 320px}.marking-controls .meta{margin:0 0 10px}
    .marking-table{min-width:680px}
    .marking-row-pending{background:#fffcf1}
    .marking-row-score{margin:8px 0;color:var(--blue-deep);font-weight:900}
    .reward-pill{display:inline-flex;margin:0 0 8px;padding:5px 8px;border-radius:999px;background:#e8f8ee;color:#146c38;font-size:.75rem;font-weight:900}
    .marking-detail-header{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px;align-items:start;margin-bottom:14px}
    .marking-detail-header h3,.marking-detail-header p{margin:0 0 7px}
    .marking-score-card{display:grid;gap:5px;padding:16px;border:1px solid #bceac9;border-radius:var(--radius);background:#f7fff9;text-align:center}
    .marking-score-card b{color:var(--green);font-size:2rem}.marking-score-card span{color:var(--muted);font-size:.82rem;font-weight:850}
    .marking-focus-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px}
    .marking-focus-heading h3,.marking-focus-heading p{margin:0 0 5px}
    .review-answer.is-manual{box-shadow:0 10px 22px rgba(120,101,168,.1)}
    .review-answer.is-automatic{display:none}
    #submissionDetail.show-automatic-answers .review-answer.is-automatic{display:block}
    .marking-complete-note{margin:12px 0;padding:16px;border:1px solid #bceac9;border-radius:var(--radius);background:#f7fff9;color:#146c38;font-weight:850}
    .marking-finish-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px;align-items:start}
    .marking-finish-grid textarea{min-height:100px;font-family:Inter, "Segoe UI", Arial, sans-serif}
    .sticky-marking-actions{position:sticky;bottom:8px;z-index:5;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.96);box-shadow:var(--shadow-lift);backdrop-filter:blur(10px)}
    .review-list{display:grid;gap:10px;margin:12px 0}
    .review-answer{
      border:1px solid var(--line);
      border-left:6px solid #94a3b8;
      border-radius:var(--radius);
      background:white;
      padding:12px;
    }
    .review-answer.is-correct{border-left-color:var(--green);background:#f7fff9}
    .review-answer.is-needs_work{border-left-color:var(--red);background:#fff8f8}
    .review-answer.is-unanswered{border-left-color:#e08a00;background:#fffaf0}
    .review-answer.is-teacher_check,.review-answer.is-unmarked{border-left-color:#7865a8;background:#faf8ff}
    .review-answer-heading{display:flex;align-items:center;gap:9px;color:var(--navy)}
    .review-mark-indicator{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#687385;color:white;font-size:1rem;font-weight:1000}
    .is-correct .review-mark-indicator{background:var(--green)}
    .is-needs_work .review-mark-indicator{background:var(--red)}
    .is-unanswered .review-mark-indicator{background:#e08a00}
    .is-teacher_check .review-mark-indicator,.is-unmarked .review-mark-indicator{background:#7865a8}
    .review-scan-summary{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
    .review-scan-summary span{padding:5px 9px;border-radius:999px;background:#eef2f7;font-weight:900}
    .review-answer pre{margin:8px 0 10px}
    .review-mark-buttons{display:flex;gap:7px;flex-wrap:wrap}
    .review-mark-buttons button{background:#eef2f7;color:var(--ink);border:1px solid var(--line-strong)}
    .review-mark-buttons button.is-selected[data-review-mark="correct"]{background:var(--green);border-color:var(--green);color:white}
    .review-mark-buttons button.is-selected[data-review-mark="needs_work"]{background:var(--red);border-color:var(--red);color:white}
    .review-mark-buttons button.is-selected[data-review-mark="unanswered"]{background:#e08a00;border-color:#e08a00;color:white}
    .review-mark-buttons button.is-selected[data-review-mark="teacher_check"]{background:#7865a8;border-color:#7865a8;color:white}
    .review-mark-buttons button.is-selected[data-review-mark="unmarked"]{background:#687385;border-color:#687385;color:white}
    .review-comment{margin-top:9px;min-height:76px}
    .feedback-save-message{color:var(--green);font-weight:900}
    .inline-actions{display:flex;gap:8px;flex-wrap:wrap}
    .warning-list{
      display:grid;
      gap:6px;
      margin:0 0 12px;
      color:#8a5a00;
      font-weight:850;
    }
    .warning-item{
      border:1px solid #f4dc82;
      border-radius:var(--radius);
      background:#fff8d8;
      padding:10px 12px;
    }
    .warning-list:empty{display:none}
    .note-area{min-height:120px;font-family:Inter, "Segoe UI", Arial, sans-serif}
    .profile-block{
      border-top:1px solid var(--line);
      margin-top:16px;
      padding-top:16px;
    }
    .profile-list{
      display:grid;
      gap:8px;
    }
    .pattern-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
      gap:10px;
      margin:0 0 14px;
    }
    .pattern-card{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:white;
      padding:12px;
    }
    .dot-row{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
    .mini-dot{width:16px;height:16px;border-radius:50%;background:#dfe5eb}
    .mini-dot.green{background:#4bbf6b}
    .mini-dot.yellow{background:#f0c53a}
    .mini-dot.blue{background:#4c8be8}
    .mini-dot.red{background:#df5555}
    .filters{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }
    .filters .field{min-width:170px}
    .maintenance-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:flex-end;
      margin-top:12px;
    }
    .maintenance-actions .field{min-width:240px}
    .tab-badge{display:none;min-width:23px;height:23px;margin-left:auto;border-radius:999px;background:var(--red);color:#fff;place-items:center;padding:0 6px;font-size:.72rem}
    .tab-badge.is-visible{display:grid}
    .bank-balance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 18px}
    .bank-balance-card{padding:15px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-soft)}
    .bank-balance-card span{display:block;color:var(--muted);font-size:.76rem;font-weight:900;text-transform:uppercase}.bank-balance-card b{display:block;margin-top:4px;color:var(--blue-deep);font-size:1.55rem}
    .admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.admin-card{padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:var(--shadow-soft)}
    .admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-form .wide{grid-column:1/-1}.admin-form label{display:grid;gap:5px;color:var(--blue-deep);font-weight:900;font-size:.78rem;text-transform:none}.admin-form input,.admin-form select,.admin-form textarea{min-width:0;width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px;color:var(--ink)}.admin-form textarea{min-height:82px;resize:vertical}.admin-form button{align-self:end}
    .product-thumb{width:70px;height:48px;object-fit:cover;border-radius:9px;background:#eef3f9}.image-preview{width:160px;max-height:110px;object-fit:cover;border-radius:11px;border:1px solid var(--line);margin-top:8px}.order-actions{display:flex;gap:6px;flex-wrap:wrap}.order-actions button{min-height:34px;padding:0 9px;font-size:.78rem}.small-note{color:var(--muted);font-size:.78rem;line-height:1.4}
    .hidden{display:none}
    .nav-backdrop{display:none}
    @media (max-width:900px){
      body.nav-open{overflow:hidden}
      .cards{grid-template-columns:1fr 1fr}
      .split{grid-template-columns:1fr}
      .task-form{grid-template-columns:1fr 1fr}
      .task-form .span-2{grid-column:span 2}
      .day-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
      .admin-grid{grid-template-columns:1fr}
      .dashboard-panel{grid-template-columns:1fr}
      .tab-head{
        position:fixed;
        z-index:20;
        top:14px;
        left:14px;
        bottom:14px;
        width:min(310px, calc(100vw - 28px));
        overflow:auto;
        transform:translateX(calc(-100% - 24px));
        transition:transform .2s ease;
      }
      body.nav-open .tab-head{transform:translateX(0)}
      body.nav-open .nav-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:19;
        background:rgba(20,44,104,.24);
        backdrop-filter:blur(4px);
      }
    }
    @media (max-width:680px){
      header{flex-direction:column}
      .login-row,.toolbar,.tab-head,.student-form{align-items:stretch;flex-direction:column}
      .cards,.task-form{grid-template-columns:1fr}
      .task-form .span-2{grid-column:1}
      .day-picker{grid-template-columns:1fr 1fr}
      .bank-balance-grid,.admin-form{grid-template-columns:1fr}
      .admin-form .wide{grid-column:1}
      button,.home-link{justify-content:center;width:100%}
      .menu-toggle{width:46px}
      .marking-overview,.marking-detail-header,.marking-finish-grid{grid-template-columns:1fr}
      .marking-controls,.marking-focus-heading{align-items:stretch;flex-direction:column}
      .marking-controls .field{flex-basis:auto}
      .marking-table,.marking-table tbody,.marking-table tr,.marking-table td{display:block;width:100%;min-width:0}
      .marking-table thead{display:none}
      .marking-table tbody{padding:8px}
      .marking-table tr{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
      .marking-table td{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;border-bottom:1px solid var(--line);padding:10px}
      .marking-table td:last-child{border-bottom:0}
      .marking-table td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase}
    }