* { box-sizing: border-box; margin: 0; padding: 0; }
  html {
    overflow-x: clip;
    width: 100%;
    overscroll-behavior: none;
  }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #1a1410;
    color: #f0d9b5;
    min-height: 100vh;
    padding: 20px;
    width: 100%;
    max-width: 100%;   /* var 100vw: på iOS kan 100vw bli nån px bredare än synliga ytan → liten sidled-scroll */
    overflow-x: clip;
    overscroll-behavior: none;
  }
  @media (max-height: 760px) {
    .login-card { margin-top: 16px !important; padding: 28px 24px !important; }
  }
  .container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
  }
  /* Admin-vyn behöver mer bredd för att rymma alla kolumner snyggt utan rörig wrapping */
  #adminView { max-width: 1200px; }
  .card {
    background: #1a1408;
    border: 1px solid #3d2c1a;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
  }
  .login-card {
    max-width: 420px;
    margin: 60px auto 0;
    padding: 40px 32px;
  }
  /* Mobil: dölj den breda admin-tabellen och visa en kondenserad lista istället.
     Desktop är helt oförändrat (allt nedan gäller bara ≤600px eller mobil-blocket). */
  .mobile-list { display: none; }
  .mobile-list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(26, 20, 8, 0.4);
    border: 1px solid #3d2c1a;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    color: inherit;
    font: inherit;
  }
  .mobile-list-item:active { background: rgba(60, 44, 26, 0.5); }
  .mli-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .mli-name { font-weight: 600; color: #f0d9b5; font-size: 1.02em; }
  .mli-sub { color: #c9a96e; font-size: 0.82em; margin-top: 5px; line-height: 1.4; }
  @media (max-width: 600px) {
    table.resp-table { display: none; }
    .mobile-list { display: flex; flex-direction: column; gap: 8px; }
    .header-row { flex-wrap: wrap; gap: 10px; }
    .header-row .user { flex-wrap: wrap; width: 100%; gap: 8px; }
    /* Drill-in: stapla tabellen till kort på mobil (4 kolumner får inte plats) */
    .drill-detail-table { font-size: 0.9em; }
    .drill-detail-table thead { display: none; }
    .drill-detail-table tr { display: block; border-bottom: 1px solid #3d2c1a; padding: 9px 0; }
    .drill-detail-table td { display: block; text-align: left !important; padding: 2px 0 !important; white-space: normal !important; }
    .drill-detail-table td:first-child { font-weight: 600; color: #d4b896; font-size: 1.05em; margin-bottom: 3px; }
    .drill-detail-table td:not(:first-child)::before { content: attr(data-label) ": "; color: #a08866; }
  }
  .icon-large { font-size: 56px; text-align: center; margin-bottom: 12px; }
  h1 {
    font-family: 'Crimson Pro', Georgia, serif;
    color: #d4b896;
    font-size: 1.6em;
    font-weight: 600;
    margin-bottom: 18px;
  }
  h2 {
    font-family: 'Crimson Pro', Georgia, serif;
    color: #d4b896;
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  .header-row h1 { margin-bottom: 0; }
  .header-row .user {
    color: #c4a882;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid #3d2c1a;
  }
  .tab {
    flex: 1;
    background: none;
    border: none;
    color: #c9a96e;
    padding: 10px 8px;
    font-size: 0.95em;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
  }
  .tab.active { color: #d4b896; border-bottom-color: #d4b896; }
  .tab:hover:not(.active) { color: #c4a882; }
  label {
    display: block;
    color: #c4a882;
    font-size: 0.85em;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
  }
  input, select {
    width: 100%;
    padding: 11px 14px;
    background: rgba(26, 20, 16, 0.5);
    border: 1px solid #7a5c3e;   /* WCAG 1.4.11: kontroll-kant ≥3:1 (var #3d2c1a ~1.4:1) */
    border-radius: 8px;
    color: #f0d9b5;
    font-size: 0.95em;
    font-family: inherit;
    margin-bottom: 14px;
    transition: border-color 0.15s;
    box-sizing: border-box;
  }
  input:focus, select:focus { outline: none; border-color: #d4b896; }
  /* Radio- och checkbox-knappar ska INTE få full bredd som textfält */
  input[type="radio"], input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    accent-color: #C9A84C;
  }
  /* Visa/dölj-lösenord-toggle. Wrapper äger margin så knappen kan centreras vertikalt mot input. */
  .password-field { position: relative; margin-bottom: 14px; }
  .password-field input { padding-right: 76px; margin-bottom: 0; }
  .password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid #3d2c1a;
    color: #c9a96e;
    font-size: 0.78em;
    font-family: inherit;
    cursor: pointer;
    padding: 5px 11px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .password-toggle:hover { color: #c9b08a; background: rgba(60,40,20,0.4); border-color: #5a3d22; }
  .password-toggle:active { transform: translateY(-50%) scale(0.96); }

  button.primary {
    width: 100%;
    padding: 13px;
    background: #2C2416;
    border: 1px solid #3d2c1a;
    border-radius: 8px;
    color: #f0d9b5;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
    transition: background-color 0.15s, border-color 0.15s;
  }
  button.primary:hover { background: #3a3025; border-color: #C9A84C; }
  button.primary:disabled { opacity: 0.5; cursor: not-allowed; }

  button.secondary {
    background: none;
    border: 1px solid #3d2c1a;
    color: #c4a882;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s;
    font-size: 0.92em;
  }
  button.secondary:hover { border-color: #8a6a44; color: #f0d9b5; }

  button.danger {
    background: none;
    border: 1px solid #5a3030;
    color: #d08080;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
    transition: border-color 0.15s, color 0.15s;
  }
  button.danger:hover { border-color: #c62828; color: #ff8a8a; }

  button.add {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    border: none;
    border-radius: 8px;
    color: white;
    padding: 10px 18px;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }
  button.add:hover { opacity: 0.92; }

  .msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88em;
    margin-bottom: 14px;
    line-height: 1.5;
  }
  .msg.error { background: rgba(198,40,40,0.15); border: 1px solid #c62828; color: #ff8a8a; }
  .msg.info  { background: rgba(76,175,80,0.12); border: 1px solid #2e7d32; color: #aee0a3; }

  .hint {
    color: #c9a96e;
    font-size: 0.78em;
    text-align: center;
    margin-top: 16px;
    line-height: 1.5;
  }
  .hint a { color: #c4a882; text-decoration: none; border-bottom: 1px dashed #8a6a44; }

  /* Class list — namn + penna inline överst, [antal elever ........ klasskod]
     i linje på raden under (enhetligt, ingen lös penna på egen rad). */
  .class-row {
    display: block;
    padding: 14px;
    background: rgba(26, 20, 16, 0.4);
    border: 1px solid #3d2c1a;
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .class-row:hover { border-color: #8a6a44; background: rgba(26, 20, 16, 0.7); }
  .class-row .name { color: #f0d9b5; font-weight: 600; font-size: 1em; display: flex; align-items: center; }
  .class-row .name .rename-pen { flex: 0 0 auto; }
  .class-row-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
  .class-row .meta { color: #c9a96e; font-size: 0.82em; }
  .class-row .code {
    font-family: 'SF Mono', Menlo, monospace;
    color: #d4b896;
    background: rgba(212,184,150,0.08);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.9em;
    letter-spacing: 0.05em;
  }

  /* Student list — 4 kolumner: Elev (namn + penna inline) | PIN | Drill ▶ | Actions.
     Pennan ligger direkt efter namnet (naturligt) i .info, inte i en egen kolumn. */
  .student-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    column-gap: 16px;
    padding: 12px;
    border-bottom: 1px solid #2a1f12;
  }
  .student-row:last-child { border-bottom: none; }
  .student-row .avatar { font-size: 1.6em; display: inline-block; vertical-align: middle; margin-right: 10px; }
  .student-row .name { color: #f0d9b5; font-weight: 600; }
  .student-row .info { min-width: 0; display: flex; align-items: center; }
  .student-row .info .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .student-row .info .rename-pen { flex: 0 0 auto; }
  .student-row .pin-cell, .student-row .drill-toggle-cell { text-align: center; }
  .student-row .drill-toggle-cell {
    color: #a08866;
    cursor: pointer;
    padding: 6px 12px;
    font-size: 0.85em;
    background: none;
    border: none;
    font-family: inherit;
  }
  .student-row .row-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
  }
  .student-row .stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
    color: #c9a96e;
    font-size: 0.78em;
  }
  .student-row .stats span { white-space: nowrap; }
  .student-row .stats .stars { color: #ffb800; letter-spacing: 1px; }
  .student-row .stats .elo { color: #d4b896; }
  .student-row .stats em {
    font-style: normal;
    color: #a08866;
  }
  @media (max-width: 560px) {
    /* Kompakt 2×2-rutnät på telefon (var tidigare hög flex-wrap där pennan + actions
       hamnade på varsin egen rad → onödigt hög ruta):
         rad 1:  [avatar  namn  ✎]                 ▶
         rad 2:  [PIN: 1234]            [Ny PIN  Ta bort]
       Namnet trunkeras med ... om det blir trångt. */
    .student-row {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "info    toggle"
        "pin     actions";
      align-items: center;
      column-gap: 8px;
      row-gap: 6px;
      padding: 10px 12px;
    }
    .student-row .info { grid-area: info; min-width: 0; overflow: hidden; }
    .student-row .drill-toggle-cell { grid-area: toggle; align-self: center; }
    .student-row .pin-cell { grid-area: pin; justify-self: start; text-align: left; }
    .student-row .row-actions { grid-area: actions; justify-content: flex-end; }
    .student-row .pin { font-size: 0.82em; letter-spacing: 0.06em; }
    .student-row button { font-size: 0.85em; padding: 6px 10px; }
  }

  .empty {
    text-align: center;
    padding: 24px 14px;
    color: #c9a96e;
    font-size: 0.9em;
    line-height: 1.6;
  }

  /* Class detail header */
  .class-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .class-detail-head .back {
    background: none;
    border: 1px solid #3d2c1a;
    color: #c4a882;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85em;
  }
  .class-detail-head .back:hover { color: #f0d9b5; }
  .code-box {
    background: rgba(212,184,150,0.08);
    border: 1px solid #3d2c1a;
    border-radius: 10px;
    padding: 14px 18px;
    text-align: center;
  }
  .code-box .label {
    color: #c9a96e;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
  .code-box .code {
    font-family: 'SF Mono', Menlo, monospace;
    color: #d4b896;
    font-size: 1.4em;
    font-weight: 600;
    letter-spacing: 0.1em;
  }

  /* Modal */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
  }
  .modal-overlay.show { display: flex; }
  .modal-box {
    background: #2c1f12;
    border: 1px solid #3d2c1a;
    border-radius: 14px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
  }
  .modal-box h2 { margin-bottom: 14px; }
  .modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }
  .modal-actions button { flex: 1; }

  /* Penna-ikon för redigera-namn — diskret, syns vid hover på rad/titel */
  .rename-pen {
    background: none;
    border: none;
    color: #c9a96e;
    cursor: pointer;
    font-size: 0.95em;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    opacity: 0.45;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    vertical-align: middle;
    line-height: 1;
  }
  tr:hover .rename-pen, h1:hover .rename-pen, .rename-pen:hover {
    opacity: 1;
  }
  .rename-pen:hover {
    background: rgba(196,168,130,0.12);
    color: #d4a259;
  }
  /* Vid tangentbordsfokus: gör pennan helt synlig (inte nedtonad) + tightare ring så
     fokus-ringen tydligt hugger ikonen i stället för att se "förskjuten" ut. */
  .rename-pen:focus-visible {
    opacity: 1;
    background: rgba(196,168,130,0.12);
    outline-offset: 0;
  }
  /* Liten text-knapp för row-actions (Arkivera / Återställ / Radera) — diskret, hover-revealed */
  .action-btn {
    background: none;
    border: 1px solid #5a3d22;
    color: #c9a96e;
    cursor: pointer;
    font-size: 0.78em;
    padding: 4px 10px;
    border-radius: 3px;
    opacity: 0.6;
    margin-left: 6px;
    transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
    white-space: nowrap;
  }
  tr:hover .action-btn { opacity: 1; }
  .action-btn:hover {
    background: rgba(196,168,130,0.12);
    color: #d4b896;
    border-color: #8a6a44;
  }
  .action-btn.action-danger:hover {
    background: rgba(224,154,154,0.12);
    color: #e09a9a;
    border-color: #a06060;
  }
  /* Skräpkorgs-ikon — samma stil som rename-pen men dämpad röd vid hover */
  .action-trash:hover { color: #e09a9a !important; background: rgba(224,154,154,0.12) !important; }

  /* Avatar picker for student add */
  .avatar-picker {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-bottom: 14px;
  }
  .avatar-picker button {
    aspect-ratio: 1;
    background: rgba(26, 20, 16, 0.5);
    border: 1px solid #3d2c1a;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.4em;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
  }
  .avatar-picker button:hover { border-color: #8a6a44; }
  .avatar-picker button.selected { border-color: #d4b896; background: rgba(212,184,150,0.15); }

  [hidden] { display: none !important; }

  /* ============================================================
     WCAG 2.1 AA — Focus indicators + skip link
     ============================================================ */
  /* Synlig focus-ring på alla interaktiva element vid tangentbordsnav.
     :focus-visible aktiveras BARA vid tangentbord (inte mus-klick) så
     muanvändare slipper distraherande ringar. */
  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible,
  .class-row:focus-visible,
  .student-row:focus-visible,
  .elev-row:focus-visible,
  .overview-class-row:focus-visible,
  .admin-class-row:focus-visible,
  .archived-class-row:focus-visible,
  .teacher-option:focus-visible {
    outline: 2px solid #d4b896;
    outline-offset: 2px;
  }
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid #d4b896;
    outline-offset: 1px;
  }
  /* Lärar-valen ligger i en overflow:hidden-meny med rundade hörn → rita ringen
     INNANFÖR valet (negativ offset) så den inte klipps bort på första/sista valet. */
  .teacher-option:focus-visible { outline-offset: -2px; }

  /* Skip-to-content-länk: dold off-screen tills den får focus via Tab.
     Tab-användare ser den först och kan hoppa över top-nav direkt till
     huvudinnehållet. WCAG 2.4.1 Bypass Blocks. */
  .skip-link {
    position: absolute;
    top: -9999px;
    left: 0;
    background: #1a1208;
    color: #f0d9b5;
    padding: 10px 16px;
    text-decoration: none;
    z-index: 9999;
    border: 2px solid #d4b896;
    border-radius: 6px;
    font-weight: 600;
  }
  .skip-link:focus {
    top: 10px;
    left: 10px;
  }