:root {
      --bg: #0d1117;
      --surface: #161b22;
      --surface2: #1c2330;
      --border: rgba(255, 255, 255, 0.08);
      --cyan: #22d3ee;
      --cyan-dim: rgba(34, 211, 238, 0.1);
      --cyan-glow: rgba(34, 211, 238, 0.3);
      --amber: #f59e0b;
      --amber-dim: rgba(245, 158, 11, 0.1);
      --green: #10b981;
      --green-dim: rgba(16, 185, 129, 0.12);
      --red: #f43f5e;
      --red-dim: rgba(244, 63, 94, 0.12);
      --text: #e2e8f0;
      --muted: #64748b;
      --muted2: #94a3b8;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      min-height: 100vh;
      overflow-x: hidden
    }

    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(34, 211, 238, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 90% 90%, rgba(245, 158, 11, 0.04) 0%, transparent 55%);
      pointer-events: none;
      z-index: 0
    }

    /* ─── LAYOUT ─── */
    .shell {
      display: grid;
      grid-template-rows: 60px 1fr;
      grid-template-columns: 240px 1fr;
      height: 100vh;
      position: relative;
      z-index: 1
    }

    /* ─── TOPBAR ─── */
    .topbar {
      grid-column: 1/-1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      border-bottom: 1px solid var(--border);
      background: rgba(22, 27, 34, 0.9);
      backdrop-filter: blur(16px);
      z-index: 100
    }

    .topbar-brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .brand-icon {
      width: 32px;
      height: 32px;
      border: 2px solid var(--cyan);
      border-radius: 6px;
      display: grid;
      place-items: center;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      font-weight: 500;
      color: var(--cyan);
      background: var(--cyan-dim)
    }

    .brand-name {
      font-family: 'Syne', serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.02em
    }

    .brand-name span {
      color: var(--cyan)
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .live-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--muted2);
      font-family: 'JetBrains Mono', monospace
    }

    .live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: blink 2s infinite
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .3
      }
    }

    #top-class-name {
      font-size: 12px;
      color: var(--cyan);
      font-weight: 500;
      background: var(--cyan-dim);
      border: 1px solid rgba(34, 211, 238, .2);
      padding: 3px 10px;
      border-radius: 20px
    }

    /* ─── SIDEBAR ─── */
    .sidebar {
      border-right: 1px solid var(--border);
      background: rgba(22, 27, 34, 0.6);
      display: flex;
      flex-direction: column;
      padding: 20px 0;
      overflow-y: auto
    }

    .sidebar-section {
      margin-bottom: 6px
    }

    .sidebar-label {
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 0 20px;
      margin: 14px 0 6px
    }

    .nav-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 20px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--muted2);
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 400;
      text-align: left;
      border-left: 2px solid transparent;
      transition: all .15s;
      position: relative
    }

    .nav-btn:hover {
      background: rgba(34, 211, 238, .06);
      color: var(--text)
    }

    .nav-btn.active {
      color: var(--cyan);
      border-left-color: var(--cyan);
      background: var(--cyan-dim);
      font-weight: 500
    }

    .nav-icon {
      font-size: 15px;
      width: 18px;
      flex-shrink: 0
    }

    .sidebar-divider {
      height: 1px;
      background: var(--border);
      margin: 10px 20px
    }

    /* Class picker */
    .class-picker {
      padding: 0 16px;
      margin-bottom: 4px
    }

    .class-picker select {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 10px;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      cursor: pointer;
      outline: none
    }

    .class-picker select:focus {
      border-color: var(--cyan)
    }

    /* ─── CONTENT ─── */
    .content {
      overflow-y: auto;
      padding: 32px 36px
    }

    /* ─── PAGES ─── */
    .page {
      display: none;
      animation: fadeUp .3s ease both
    }

    .page.active {
      display: block
    }

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

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

    .page-hd {
      margin-bottom: 28px
    }

    .page-title {
      font-family: 'Syne', serif;
      font-size: 26px;
      font-weight: 700;
      line-height: 1.1
    }

    .page-title em {
      color: var(--cyan);
      font-style: normal
    }

    .page-sub {
      font-size: 13px;
      color: var(--muted);
      margin-top: 5px
    }

    /* ─── CARDS & STATS ─── */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-bottom: 28px
    }

    .stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px 20px;
      position: relative;
      overflow: hidden;
      transition: border-color .2s
    }

    .stat:hover {
      border-color: var(--cyan)
    }

    .stat-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 6px
    }

    .stat-val {
      font-family: 'Syne', serif;
      font-size: 28px;
      color: var(--cyan)
    }

    .stat-sub {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px
    }

    /* ─── PANEL ─── */
    .panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px;
      max-width: 640px;
      margin-bottom: 20px
    }

    .panel-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted2);
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border)
    }

    /* Accordions */
    .acc-details {
      background: transparent;
    }

    .acc-summary {
      padding: 24px 28px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      list-style: none;
      outline: none;
      transition: background 0.2s;
    }

    .acc-summary::-webkit-details-marker {
      display: none;
    }

    .acc-summary:hover {
      background: rgba(34, 211, 238, 0.03);
    }

    .acc-content {
      padding: 0 28px 24px 28px;
    }

    .acc-icon::after {
      content: '▶';
      font-size: 11px;
      color: var(--muted);
      display: inline-block;
      transition: transform 0.2s;
    }

    details[open]>.acc-summary>.acc-icon::after {
      transform: rotate(90deg);
    }

    details[open]>.acc-summary {
      padding-bottom: 20px;
    }

    /* Beautiful Checkbox */
    .custom-check-lbl {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      user-select: none;
      font-weight: 600;
      color: var(--text);
      position: relative;
    }

    .custom-checkbox {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0;
      cursor: pointer;
    }

    .custom-box {
      width: 24px;
      height: 24px;
      background: var(--surface2);
      border: 2px solid var(--border);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .custom-checkbox:focus-visible~.custom-box {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
      border-color: var(--cyan);
    }

    .custom-checkbox:checked~.custom-box {
      background: var(--cyan);
      border-color: var(--cyan);
    }

    .custom-check-lbl:hover .custom-checkbox:not(:checked)~.custom-box {
      border-color: var(--cyan);
    }

    .custom-box::after {
      content: "✔";
      color: #000;
      font-size: 14px;
      font-weight: bold;
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.2s ease;
    }

    .custom-checkbox:checked~.custom-box::after {
      opacity: 1;
      transform: scale(1);
    }

    .form-row {
      display: grid;
      gap: 14px;
      margin-bottom: 14px
    }

    .form-row.cols2 {
      grid-template-columns: 1fr 1fr
    }

    .form-row.cols3 {
      grid-template-columns: 1fr 1fr 1fr
    }

    .fld label {
      display: block;
      font-size: 11px;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .09em;
      margin-bottom: 6px
    }

    .fld input,
    .fld select,
    .fld textarea {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      resize: vertical;
    }

    .fld input:focus,
    .fld select:focus,
    .fld textarea:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px var(--cyan-dim)
    }

    .fld select option {
      background: var(--surface)
    }

    .btn-row {
      display: flex;
      gap: 10px;
      margin-top: 6px;
      flex-wrap: wrap
    }

    /* ─── BUTTONS ─── */
    .btn {
      padding: 9px 20px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      font-weight: 500;
      transition: all .18s;
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .btn-cyan {
      background: var(--cyan);
      color: #0d1117
    }

    .btn-cyan:hover {
      background: #38bdf8;
      box-shadow: 0 4px 16px var(--cyan-glow)
    }

    .btn-amber {
      background: var(--amber);
      color: #0d1117
    }

    .btn-amber:hover {
      background: #fbbf24
    }

    .btn-red {
      background: var(--red);
      color: #fff
    }

    .btn-red:hover {
      background: #fb7185
    }

    .btn-ghost {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted2)
    }

    .btn-ghost:hover {
      border-color: var(--cyan);
      color: var(--cyan)
    }

    .btn-green {
      background: var(--green);
      color: #fff
    }

    .btn-green:hover {
      background: #34d399
    }

    .btn-sm {
      padding: 6px 14px;
      font-size: 12px
    }

    /* ─── TOAST ─── */
    #toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .toast-item {
      padding: 12px 18px;
      border-radius: 10px;
      font-size: 13px;
      backdrop-filter: blur(12px);
      border: 1px solid;
      animation: toastIn .3s ease;
      max-width: 320px;
      pointer-events: none
    }

    .toast-ok {
      background: rgba(16, 185, 129, .15);
      border-color: rgba(16, 185, 129, .4);
      color: #6ee7b7
    }

    .toast-err {
      background: rgba(244, 63, 94, .15);
      border-color: rgba(244, 63, 94, .4);
      color: #fca5a5
    }

    .toast-info {
      background: var(--cyan-dim);
      border-color: rgba(34, 211, 238, .4);
      color: var(--cyan)
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

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

    /* ─── TABLE ─── */
    .tbl-wrap {
      overflow-x: auto;
      border-radius: 12px;
      border: 1px solid var(--border)
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px
    }

    thead tr {
      background: var(--surface2)
    }

    thead th {
      padding: 11px 14px;
      text-align: left;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      font-weight: 600;
      white-space: nowrap;
      border-bottom: 1px solid var(--border)
    }

    tbody tr {
      border-bottom: 1px solid rgba(255, 255, 255, .04);
      transition: background .15s
    }

    tbody tr:hover {
      background: rgba(34, 211, 238, .04)
    }

    tbody tr:last-child {
      border: none
    }

    tbody td {
      padding: 10px 14px;
      color: var(--text)
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500
    }

    .badge-green {
      background: var(--green-dim);
      color: var(--green)
    }

    .badge-red {
      background: var(--red-dim);
      color: var(--red)
    }

    .badge-cyan {
      background: var(--cyan-dim);
      color: var(--cyan)
    }

    .badge-amber {
      background: var(--amber-dim);
      color: var(--amber)
    }

    .mono {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px
    }

    /* ─── ATTENDANCE GRID ─── */
    .att-grid {
      display: grid;
      gap: 10px
    }

    .att-row-hd {
      display: grid;
      grid-template-columns: 80px 180px 1fr;
      gap: 10px;
      align-items: center;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--muted);
      padding: 0 4px;
      margin-bottom: 4px
    }

    .att-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      transition: border-color .2s
    }

    .att-row:hover {
      border-color: rgba(34, 211, 238, .3)
    }

    .att-roll {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: var(--cyan);
      width: 70px;
      flex-shrink: 0
    }

    .att-name {
      flex: 1;
      font-size: 13px
    }

    .att-btns {
      display: flex;
      gap: 6px;
      margin-left: auto
    }

    .att-btn {
      padding: 5px 14px;
      border-radius: 6px;
      border: none;
      cursor: pointer;
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      font-weight: 500;
      transition: all .15s
    }

    .att-p {
      background: var(--green-dim);
      color: var(--green);
      border: 1px solid rgba(16, 185, 129, .3)
    }

    .att-p:hover,
    .att-p.sel {
      background: var(--green);
      color: #fff
    }

    .att-a {
      background: var(--red-dim);
      color: var(--red);
      border: 1px solid rgba(244, 63, 94, .3)
    }

    .att-a:hover,
    .att-a.sel {
      background: var(--red);
      color: #fff
    }

    /* ─── QUIZ MARKS TABLE INLINE EDIT ─── */
    .quiz-input {
      width: 70px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 5px 8px;
      color: var(--text);
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      text-align: center;
      outline: none
    }

    .quiz-input:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 2px var(--cyan-dim)
    }

    /* ─── PIE CHART & PROGRESS ─── */
    .progress-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px
    }

    .prog-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      transition: border-color .2s;
      cursor: pointer
    }

    .prog-card:hover {
      border-color: var(--cyan)
    }

    .prog-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px
    }

    .prog-roll {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--cyan);
      background: var(--cyan-dim);
      padding: 3px 8px;
      border-radius: 4px
    }

    .prog-name {
      font-size: 14px;
      font-weight: 500
    }

    .pie-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 14px
    }

    .prog-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px
    }

    .prog-stat {
      text-align: center;
      padding: 8px 4px;
      background: var(--surface2);
      border-radius: 8px
    }

    .prog-stat-val {
      font-family: 'Syne', serif;
      font-size: 16px;
      color: var(--cyan)
    }

    .prog-stat-lbl {
      font-size: 10px;
      color: var(--muted);
      margin-top: 2px
    }

    /* ─── REPORT ─── */
    .report-hd {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px
    }

    .report-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 18px
    }

    .report-card-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--muted);
      margin-bottom: 10px
    }

    .big-num {
      font-family: 'Syne', serif;
      font-size: 32px;
      color: var(--cyan)
    }

    .bar-wrap {
      margin-top: 8px
    }

    .bar-bg {
      height: 6px;
      background: var(--surface2);
      border-radius: 3px;
      overflow: hidden
    }

    .bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width .6s ease
    }

    /* ─── SORT CONTROLS ─── */
    .sort-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: wrap
    }

    .sort-select {
      padding: 6px 14px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted2);
      font-family: 'Outfit', sans-serif;
      font-size: 13px;
      cursor: pointer;
      transition: all .15s;
      outline: none;
    }

    .sort-select:hover,
    .sort-select:focus {
      border-color: var(--cyan);
      color: var(--cyan);
      background: var(--cyan-dim)
    }

    .search-input {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 12px;
      color: var(--text);
      font-family: 'Outfit', sans-serif;
      font-size: 12px;
      outline: none;
      margin-left: auto;
      width: 200px
    }

    .search-input:focus {
      border-color: var(--cyan)
    }

    /* ─── MODAL ─── */
    .modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .7);
      backdrop-filter: blur(6px);
      z-index: 500;
      display: none;
      place-items: center
    }

    .modal-bg.open {
      display: grid
    }

    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      width: min(520px, 90vw);
      max-height: 90vh;
      overflow-y: auto;
      animation: fadeUp .3s ease
    }

    .modal-title {
      font-family: 'Syne', serif;
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--border)
    }

    /* ─── CLASS CARDS ─── */
    .class-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
      margin-bottom: 28px
    }

    .class-card {
      background: var(--surface);
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      cursor: pointer;
      transition: all .2s;
      position: relative
    }

    .class-card:hover,
    .class-card.selected {
      border-color: var(--cyan);
      background: var(--cyan-dim)
    }

    .class-card-id {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: var(--cyan);
      margin-bottom: 6px
    }

    .class-card-name {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 10px
    }

    .class-card-meta {
      font-size: 11px;
      color: var(--muted)
    }

    .class-del {
      position: absolute;
      top: 12px;
      right: 12px;
      background: var(--red-dim);
      border: none;
      border-radius: 5px;
      color: var(--red);
      cursor: pointer;
      padding: 4px 7px;
      font-size: 12px;
      opacity: 0;
      transition: opacity .15s
    }

    .class-card:hover .class-del {
      opacity: 1
    }

    /* ─── MISC ─── */
    .empty {
      text-align: center;
      padding: 48px;
      color: var(--muted);
      font-size: 13px
    }

    .empty-icon {
      font-size: 32px;
      margin-bottom: 10px
    }

    .chip {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-family: 'JetBrains Mono', monospace
    }

    .export-bar {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-bottom: 18px;
      flex-wrap: wrap
    }

    .section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 14px;
      margin-top: 24px
    }

    hr.dim {
      border: none;
      border-top: 1px solid var(--border);
      margin: 20px 0
    }

    /* ─── RESPONSIVE ─── */
    @media(max-width:800px) {
      .shell {
        grid-template-columns: 1fr
      }

      .sidebar {
        display: none
      }

      .content {
        padding: 20px
      }

      .stats-row {
        grid-template-columns: 1fr 1fr
      }
    }