:root {
      --ink: #1c2a37;
      --muted: #5f6a77;
      --line: #d4dbe3;
      --panel: #ffffffcc;
      --chip: #f7efe4;
      --active: #1f8a8a;
      --active-ink: #f7fffd;
      --accent: #ef6c2f;
      --shadow: 0 12px 34px rgba(13, 43, 54, 0.12);
      --box-shadow: 0 8px 22px rgba(20, 47, 68, 0.06);
      --bg-base: #fff6ea;
      --bg-radial-1: #ffe5c6;
      --bg-radial-2: #d8f0ee;
      --stripe: rgba(31, 138, 138, 0.04);
      --hero-bg-1: rgba(255, 255, 255, 0.95);
      --hero-bg-2: rgba(255, 252, 246, 0.82);
      --hero-title: #123347;
    }

    /* Dark Mode */
    html[data-theme="dark"] {
      color-scheme: dark;
      --ink: #e7edf5;
      --muted: #a7b3c2;
      --line: #2f3b4c;
      --panel: rgba(12, 18, 28, 0.82);
      --chip: #182232;
      --active: #31a5a5;
      --active-ink: #f7fffd;
      --accent: #ff9b5f;
      --shadow: 0 18px 40px rgba(1, 8, 15, 0.55);
      --box-shadow: 0 12px 30px rgba(1, 8, 15, 0.42);
      --bg-base: #0b1118;
      --bg-radial-1: #152235;
      --bg-radial-2: #11313a;
      --stripe: rgba(31, 138, 138, 0.08);
      --hero-bg-1: rgba(16, 25, 37, 0.95);
      --hero-bg-2: rgba(9, 16, 25, 0.86);
      --hero-title: #f0f6ff;
    }

    html[data-theme="dark"] body {
      background-color: #0b1118;
    }

    html[data-theme="dark"] #searchInput,
    html[data-theme="dark"] .quiz-select {
      background-color: #131d2b;
      border-color: #2f3b4c;
      color: #e7edf5;
    }

    html[data-theme="dark"] .quiz-select:disabled {
      background-color: #172130;
      border-color: #2f3b4c;
      color: #8393a8;
      opacity: 1;
    }

    html[data-theme="dark"] #searchInput:focus,
    html[data-theme="dark"] .quiz-select:focus {
      border-color: #47a5b2;
      box-shadow: 0 0 0 4px rgba(71, 165, 178, 0.2);
    }

    html[data-theme="dark"] #clearSearch,
    html[data-theme="dark"] #savedToggle,
    html[data-theme="dark"] #synonymsToggle,
    html[data-theme="dark"] #antonymsToggle,
    html[data-theme="dark"] .page-btn {
      background-color: #182232;
      border-color: #2f3b4c;
      color: #a7b3c2;
    }

    html[data-theme="dark"] #clearSearch:hover,
    html[data-theme="dark"] #savedToggle:hover,
    html[data-theme="dark"] #synonymsToggle:hover,
    html[data-theme="dark"] #antonymsToggle:hover,
    html[data-theme="dark"] .page-btn:hover {
      background-color: #223147;
      border-color: #3b4f66;
    }

    html[data-theme="dark"] .filter-btn,
    html[data-theme="dark"] .pos-filters .filter-btn {
      background-color: #1b2738;
      border-color: #2f3b4c;
      color: #afbdd0;
    }

    html[data-theme="dark"] .filter-btn:hover {
      border-color: #41566e;
    }

    html[data-theme="dark"] .card {
      background: linear-gradient(180deg, #152131 0%, #101a28 100%);
      border-color: #2f3b4c;
    }

    html[data-theme="dark"] .card:hover {
      border-color: #41566e;
      box-shadow: 0 16px 30px rgba(1, 8, 15, 0.45);
    }

    html[data-theme="dark"] .quiz-word-card {
      background: linear-gradient(160deg, #152131 0%, #101a28 100%);
      border-color: #2f3b4c;
    }

    html[data-theme="dark"] .quiz-room-card {
      background: linear-gradient(145deg, #0d2030 0%, #081829 60%, #05121e 100%);
      border-color: rgba(31, 138, 138, 0.3);
    }

    html[data-theme="dark"] .quiz-room-card::before {
      background: linear-gradient(90deg, #0a5a62, #1f8a8a, #0a5a62);
    }

    html[data-theme="dark"] .quiz-room-arena {
      background: rgba(31, 138, 138, 0.12);
      border-color: rgba(31, 138, 138, 0.18);
    }

    html[data-theme="dark"] .quiz-room-side,
    html[data-theme="dark"] .quiz-room-or {
      background: rgba(8, 20, 33, 0.92);
    }

    html[data-theme="dark"] .quiz-room-or span { color: #3a5a6a; }
    html[data-theme="dark"] .quiz-room-side-label { color: #5dcac4; }
    html[data-theme="dark"] .room-create-form {
      background: rgba(6, 18, 30, 0.88);
      border-color: rgba(93, 202, 196, 0.24);
    }

    html[data-theme="dark"] .quiz-room-join-btn {
      background: rgba(31, 138, 138, 0.12);
      border-color: rgba(31, 138, 138, 0.3);
      color: #5dcac4;
    }

    html[data-theme="dark"] .quiz-room-join-btn:hover:not(:disabled) {
      background: rgba(31, 138, 138, 0.2);
      border-color: #1f8a8a;
    }

    html[data-theme="dark"] .quiz-room-status { color: #7aaabb; }

    html[data-theme="dark"] .quiz-room-leave-btn {
      border-color: #1e3040;
      color: #4a6878;
      background: transparent;
    }

    html[data-theme="dark"] .quiz-room-leave-btn:hover:not(:disabled) {
      background: rgba(200, 60, 60, 0.1);
      border-color: #8b3030;
      color: #c86060;
    }

    html[data-theme="dark"] .card-back {
      background: linear-gradient(180deg, #152131 0%, #101a28 100%);
    }

    html[data-theme="dark"] .card-spell-input {
      background: #131d2b;
      border-color: #2f3b4c;
      color: #e7edf5;
    }

    html[data-theme="dark"] .card-spell-input:focus {
      border-color: #47a5b2;
      box-shadow: 0 0 0 3px rgba(71, 165, 178, 0.2);
    }

    html[data-theme="dark"] .card-spell-input::placeholder {
      color: #5a6a7a;
    }

    html[data-theme="dark"] .practice-label {
      color: #8ad6de;
    }

    html[data-theme="dark"] .quiz-opt {
      background-color: #131d2b;
      border-color: #2f3b4c;
      color: #e7edf5;
    }

    html[data-theme="dark"] .quiz-opt:hover:not(:disabled) {
      background-color: #223147;
      border-color: #3b4f66;
    }

    html[data-theme="dark"] .pos {
      background-color: #131d2b;
      border-color: #2f3b4c;
      color: #a7b3c2;
    }

    html[data-theme="dark"] .mode-tab {
      background-color: #1b2738;
      border-color: #2f3b4c;
      color: #afbdd0;
    }

    html[data-theme="dark"] .mode-tab:hover {
      background-color: #223147;
      border-color: #3b4f66;
    }

    .dark-mode-toggle {
      border: 1px solid var(--line);
      background: var(--chip);
      color: var(--ink);
      font-weight: 700;
      font-size: 13px;
      border-radius: 12px;
      padding: 8px 12px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease;
    }

    .dark-mode-toggle:hover {
      background: var(--active);
      border-color: #146f6f;
      color: var(--active-ink);
    }

    html[data-theme="dark"] .dark-mode-toggle {
      background: #1b2738;
      border-color: #2f3b4c;
    }

    html[data-theme="dark"] .dark-mode-toggle:hover {
      background: var(--active);
      border-color: #146f6f;
      color: var(--active-ink);
    }

    html[data-theme="dark"] #searchInput::placeholder {
      color: #7f8ea2;
    }

    html[data-theme="dark"] .hero-kicker {
      color: #89dbe2;
      background: #103541;
      border-color: #1d5a69;
    }

    html[data-theme="dark"] .badge {
      background: #392517;
      border-color: #855438;
      color: #ffc8a0;
    }

    html[data-theme="dark"] .filter-title,
    html[data-theme="dark"] .pos-title,
    html[data-theme="dark"] .meta,
    html[data-theme="dark"] .quiz-settings label,
    html[data-theme="dark"] .quiz-room-help,
    html[data-theme="dark"] .page-ellipsis {
      color: #97a7bb;
    }

    html[data-theme="dark"] .quiz-config-row,
    html[data-theme="dark"] .quiz-toggle-row {
      background: #111d2b;
      border-color: #2f3b4c;
    }

    html[data-theme="dark"] .study-plan-card {
      background: #111d2b;
      border-color: #2f3b4c;
    }

    html[data-theme="dark"] .study-plan-output {
      color: #9bb0c7;
    }

    html[data-theme="dark"] .study-plan-day-card {
      background: #0f1b29;
      border-color: #2f3b4c;
    }

    html[data-theme="dark"] .study-plan-day-title {
      color: #8fa3ba;
    }

    html[data-theme="dark"] .study-plan-day-main {
      color: #d6e4f2;
    }

    html[data-theme="dark"] .study-plan-day-sub {
      color: #93a7bd;
    }

    html[data-theme="dark"] .study-plan-day-card.is-done {
      background: #173426;
      border-color: #2e7a53;
    }

    html[data-theme="dark"] .study-plan-day-card.is-done .study-plan-day-title,
    html[data-theme="dark"] .study-plan-day-card.is-done .study-plan-day-main,
    html[data-theme="dark"] .study-plan-day-card.is-done .study-plan-day-sub {
      color: #b8f1d1;
    }

    html[data-theme="dark"] .study-plan-badges .badge:nth-child(1) {
      background: #1a2740;
      border-color: #355488;
      color: #bdd4ff;
    }

    html[data-theme="dark"] .study-plan-badges .badge:nth-child(2) {
      background: #162d24;
      border-color: #2d6a52;
      color: #a9ebc8;
    }

    html[data-theme="dark"] .study-plan-badges .badge:nth-child(3) {
      background: #352716;
      border-color: #7e5630;
      color: #ffd6aa;
    }

    html[data-theme="dark"] .study-plan-badges .badge:nth-child(4) {
      background: #2a2142;
      border-color: #5f4a9e;
      color: #d7c8ff;
    }

    html[data-theme="dark"] .study-plan-badges .badge:nth-child(5) {
      background: #13303a;
      border-color: #2f6f82;
      color: #b5ebff;
    }

    html[data-theme="dark"] .study-plan-badges .badge:nth-child(6) {
      background: #3a1f28;
      border-color: #874356;
      color: #ffc3d1;
    }

    html[data-theme="dark"] .study-plan-badges .badge:nth-child(7) {
      background: #1d2732;
      border-color: #42586f;
      color: #c6d4e2;
    }

    html[data-theme="dark"] .quiz-room-player {
      background: rgba(8, 20, 34, 0.82);
      border-color: rgba(31, 138, 138, 0.18);
    }

    html[data-theme="dark"] .quiz-room-player.is-me {
      background: rgba(31, 138, 138, 0.07);
      border-color: rgba(61, 207, 207, 0.3);
      box-shadow: 0 0 0 3px rgba(31, 138, 138, 0.1);
    }

    html[data-theme="dark"] .quiz-room-badge {
      background: rgba(8, 20, 34, 0.7);
      border-color: rgba(31, 138, 138, 0.32);
      color: #5dcac4;
    }

    html[data-theme="dark"] .quiz-room-badge.is-active {
      background: linear-gradient(135deg, #0f5a62, #0a4a52);
      border-color: #1f8a8a;
      color: #9de8e2;
    }

    html[data-theme="dark"] .word,
    html[data-theme="dark"] .quiz-word,
    html[data-theme="dark"] .quiz-result-title {
      color: #f0f6ff;
    }

    html[data-theme="dark"] .card:hover .word {
      color: #8cccf8;
    }

    html[data-theme="dark"] .gujarati,
    html[data-theme="dark"] .quiz-opt-gujarati {
      color: #9ebdd8;
    }

    html[data-theme="dark"] .quiz-opt-speak {
      background: #1d2a3d;
      border-color: #3b4f66;
      color: #b6c9de;
    }

    html[data-theme="dark"] .quiz-opt-speak:hover {
      background: #25364f;
      border-color: #557192;
      color: #e7edf5;
    }

    html[data-theme="dark"] .level-tag {
      border-color: #1d5a69;
      background: #103541;
      color: #89dbe2;
    }

    html[data-theme="dark"] .quiz-word-pos,
    html[data-theme="dark"] .quiz-word-level {
      background: #121d2c;
      border-color: #2f3b4c;
      color: #a7b3c2;
    }

    html[data-theme="dark"] .quiz-word-level {
      border-color: #1d5a69;
      background: #103541;
      color: #89dbe2;
    }

    html[data-theme="dark"] .example {
      border-left-color: #31526b;
    }

    html[data-theme="dark"] .card-panel {
      background: #121d2c;
      border-color: #2f3b4c;
    }

    html[data-theme="dark"] .card-example-wrap {
      border-left-color: #31526b;
    }

    html[data-theme="dark"] .vocab-badge {
      background: #121d2c;
      border-color: #2f3b4c;
      color: #a7b3c2;
    }

    html[data-theme="dark"] .vocab-badge.syn {
      border-color: #1d5a69;
      background: #103541;
      color: #89dbe2;
    }

    html[data-theme="dark"] .vocab-badge.ant {
      border-color: #70462f;
      background: #3d2818;
      color: #ffc79f;
    }

    html[data-theme="dark"] .quiz-score-badge {
      background: #0f3a33;
      border-color: #1d6f61;
      color: #95f1d8;
    }

    html[data-theme="dark"] .quiz-progress-bar {
      background: #1b2635;
    }

    html[data-theme="dark"] .quiz-prompt {
      color: #85d8df;
    }

    html[data-theme="dark"] .save-btn,
    html[data-theme="dark"] .pronounce-btn,
    html[data-theme="dark"] .speak-btn,
    html[data-theme="dark"] .quiz-btn-ghost {
      background: #182232;
      border-color: #2f3b4c;
      color: #c6d4e7;
    }

    html[data-theme="dark"] .save-btn:hover,
    html[data-theme="dark"] .pronounce-btn:hover,
    html[data-theme="dark"] .speak-btn:hover:not(:disabled),
    html[data-theme="dark"] .quiz-btn-ghost:hover {
      background: #223147;
      border-color: #3b4f66;
      color: #e7edf5;
    }

    html[data-theme="dark"] .quiz-btn-ghost.active,
    html[data-theme="dark"] .quiz-btn-ghost.active:hover {
      background: var(--active);
      border-color: #146f6f;
      color: #f7fffd;
    }

    html[data-theme="dark"] .quiz-opt.correct,
    html[data-theme="dark"] .quiz-opt.reveal-correct,
    html[data-theme="dark"] .quiz-feedback.correct {
      background: linear-gradient(135deg, #0f3f34, #14503f);
      border-color: #2ca47f;
      color: #b8f4df;
    }

    html[data-theme="dark"] .quiz-opt.wrong,
    html[data-theme="dark"] .quiz-feedback.wrong {
      background: linear-gradient(135deg, #4a1f28, #5d2731);
      border-color: #d06774;
      color: #ffd1d5;
    }

    html[data-theme="dark"] .quiz-result-stat .val {
      color: #d9e4f1;
    }
    html[data-theme="dark"] .quiz-room-label { color: #5dcac4; }
    html[data-theme="dark"] .quiz-room-player-score { color: #5dcac4; }
    html[data-theme="dark"] .quiz-room-player-score span { color: #3a5a6a; }
    html[data-theme="dark"] .quiz-room-player-meta { color: #4e7080; }
    html[data-theme="dark"] .quiz-room-player-name { color: #cce0ee; }
    html[data-theme="dark"] .quiz-room-results h3 { color: #cce0ee; }
    html[data-theme="dark"] .quiz-room-avatar {
      background: linear-gradient(135deg, #0f5a62, #0a4a52);
    }
    html[data-theme="dark"] .quiz-room-player.is-me .quiz-room-avatar {
      background: linear-gradient(135deg, #1f8a8a, #0f6272);
    }
    html[data-theme="dark"] .quiz-room-progress-track {
      background: rgba(31, 138, 138, 0.1);
    }
    html[data-theme="dark"] .quiz-room-pulse-dot { background: #1a3a4a; }
    html[data-theme="dark"] .quiz-room-card.is-active .quiz-room-pulse-dot { background: #1f8a8a; }
    html[data-theme="dark"] .quiz-room-status-dot { background: #1a3a4a; }
    html[data-theme="dark"] .quiz-room-card.is-active .quiz-room-status-dot { background: #1f8a8a; }
    html[data-theme="dark"] .quiz-wrong-item {
      background: #121d2c;
      border-color: #2f3b4c;
    }
    html[data-theme="dark"] .quiz-wrong-title {
      color: #89dbe2;
    }
    html[data-theme="dark"] .quiz-wrong-line {
      color: #d6e1ee;
    }
    html[data-theme="dark"] .quiz-wrong-line .lbl {
      color: #97a7bb;
    }

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

    body {
      min-height: 100vh;
      color: var(--ink);
      font-family: "Manrope", "Segoe UI", sans-serif;
      /* background:
        radial-gradient(circle at 0% 0%, var(--bg-radial-1) 0%, transparent 35%),
        radial-gradient(circle at 95% 8%, var(--bg-radial-2) 0%, transparent 32%),
        var(--bg-base); */
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(135deg, var(--stripe) 0 2px, rgba(31, 138, 138, 0) 2px 16px);
      opacity: 0.28;
    }

    .page {
      position: relative;
      z-index: 1;
      max-width: 1150px;
      margin: 0 auto;
      padding: 24px 16px 32px;
    }

    .hero {
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 24px;
      background: linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2));
      box-shadow: var(--shadow);
    }

    .hero-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-wrap: wrap;
    }

    .hero-top .admin-link {
      text-decoration: none;
    }

    .hero-kicker {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 700;
      color: #0f6c75;
      background: #dff4f5;
      border: 1px solid #b8dbdf;
      padding: 4px 10px;
      border-radius: 999px;
    }

    .hero h1 {
      margin-top: 12px;
      font-family: "Fraunces", Georgia, serif;
      font-size: clamp(1.5rem, 2.8vw, 2.5rem);
      color: var(--hero-title);
      line-height: 1.15;
    }


    .hero p {
      margin-top: 10px;
      color: var(--muted);
      max-width: 70ch;
      line-height: 1.6;
    }

    .stats {
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border-radius: 12px;
      border: 1px solid #f0b38a;
      background: #fff1e5;
      color: #a14d15;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 10px;
    }

    .panel {
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 16px;
      background: var(--panel);
      box-shadow: 0 14px 28px rgba(18, 51, 71, 0.08);
      backdrop-filter: blur(8px);
    }

    .study-plan-panel {
      display: none;
    }

    .search-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      margin-bottom: 8px;
    }

    .vocab-toggle-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 12px;
    }

    #searchInput {
      width: 100%;
      border: 1px solid #cdd8e3;
      border-radius: 14px;
      padding: 12px 14px;
      font: inherit;
      background: #fff;
      color: var(--ink);
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }

    #searchInput::placeholder {
      color: #5f6a77;
    }

    #searchInput:focus {
      outline: none;
      border-color: #47a5b2;
      box-shadow: 0 0 0 4px rgba(71, 165, 178, 0.14);
      transform: translateY(-1px);
    }

    #clearSearch,
    #synonymsToggle,
    #antonymsToggle {
      border: 1px solid #d3dbe6;
      background: #fff;
      color: #3c4f63;
      font-weight: 600;
      font-size: 13px;
      border-radius: 12px;
      padding: 10px 14px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease;
    }

    #clearSearch:hover,
    #synonymsToggle:hover,
    #antonymsToggle:hover {
      background: #f2f7ff;
      border-color: #b7c8df;
      color: #153f66;
    }

    #savedToggle {
      border: 1px solid #d3dbe6;
      background: #fff;
      color: #3c4f63;
      font-weight: 700;
      font-size: 13px;
      border-radius: 12px;
      padding: 10px 14px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1.2;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease;
    }

    #savedToggle:hover {
      background: #f2f7ff;
      border-color: #b7c8df;
      color: #153f66;
    }

    #savedToggle.active,
    #synonymsToggle.active,
    #antonymsToggle.active {
      background: var(--active);
      border-color: #146f6f;
      color: #ffffff;
    }

    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .pos-filters {
      background: transparent;
      border: 0;
      border-radius: 0;
      padding: 0;
      overflow: visible;
      flex-wrap: wrap;
      gap: 8px;
    }

    .filter-block {
      margin-bottom: 8px;
    }

    .study-plan-card {
      margin: 10px 0 12px;
      padding: 12px;
      border: 1px solid #dbe2eb;
      border-radius: 14px;
      background: var(--surface, #f5f8fb);
    }

    .study-plan-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 10px;
      align-items: end;
    }

    .study-plan-action-wrap {
      display: flex;
      align-items: end;
      min-height: 100%;
    }

    .study-plan-action-wrap .quiz-btn {
      width: 100%;
    }

    .study-plan-output {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #3f5369;
      line-height: 1.5;
    }

    .study-plan-badges {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .study-plan-badges .badge {
      border-width: 1.5px;
    }

    .study-plan-badges .badge:nth-child(1) {
      background: #eef4ff;
      border-color: #bfd2ff;
      color: #23407a;
    }

    .study-plan-badges .badge:nth-child(2) {
      background: #ecfff5;
      border-color: #b9ebcd;
      color: #1f6a45;
    }

    .study-plan-badges .badge:nth-child(3) {
      background: #fff6e9;
      border-color: #f2d2a3;
      color: #8a4e11;
    }

    .study-plan-badges .badge:nth-child(4) {
      background: #f3efff;
      border-color: #d1c1ff;
      color: #4b2b8f;
    }

    .study-plan-badges .badge:nth-child(5) {
      background: #e9fbff;
      border-color: #b6e7f3;
      color: #0f5c72;
    }

    .study-plan-badges .badge:nth-child(6) {
      background: #fff0f3;
      border-color: #f1c2cc;
      color: #7e2a3a;
    }

    .study-plan-badges .badge:nth-child(7) {
      background: #f3f6f9;
      border-color: #cfd8e2;
      color: #30465d;
    }

    .study-plan-cards {
      margin-top: 10px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 8px;
    }

    .study-plan-day-card {
      border: 1px solid #dbe2eb;
      border-radius: 12px;
      background: #ffffff;
      padding: 10px;
      cursor: pointer;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .study-plan-day-card:hover {
      transform: translateY(-1px);
      border-color: #b8c8d8;
      box-shadow: 0 6px 14px rgba(15, 51, 71, 0.08);
    }

    .study-plan-day-card.is-done {
      border-color: #6cc68f;
      background: #edfbf2;
    }

    .study-plan-day-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #526273;
      margin-bottom: 6px;
    }

    .study-plan-day-main {
      font-size: 17px;
      font-weight: 800;
      color: #0f3347;
    }

    .study-plan-day-sub {
      margin-top: 4px;
      font-size: 12px;
      color: #607284;
      font-weight: 600;
    }

    .study-plan-day-card.is-done .study-plan-day-title {
      color: #1f6a45;
    }

    .study-plan-day-card.is-done .study-plan-day-main {
      color: #1f6a45;
    }

    .study-plan-day-card.is-done .study-plan-day-sub {
      color: #2f7a56;
    }

    .filter-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #526273;
      margin-bottom: 8px;
    }

    .pos-title {
      color: #526273;
    }

    .filter-btn {
      border: 1px solid #d7dee7;
      background: var(--chip);
      color: #3f5369;
      font-size: 12px;
      font-weight: 600;
      border-radius: 999px;
      padding: 7px 12px;
      cursor: pointer;
      transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    }

    .pos-filters .filter-btn {
      white-space: nowrap;
      border-radius: 999px;
      padding: 7px 14px;
    }

    .filter-btn:hover {
      transform: translateY(-1px);
      border-color: #b9cad8;
    }

    .pos-filters .filter-btn:hover {
      border-color: #b9cad8;
    }

    .filter-btn.active {
      background: var(--active);
      color: var(--active-ink);
      border-color: #146f6f;
    }

    .pos-filters .filter-btn.active {
      background: var(--active);
      color: var(--active-ink);
      border-color: #146f6f;
      box-shadow: none;
    }

    .pos-filters .filter-btn:focus-visible {
      outline: 2px solid #0f766e;
      outline-offset: 2px;
    }

    .meta {
      color: #526273;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 12px;
    }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
      flex-wrap: wrap;
    }

    .page-btn {
      border: 1px solid #d3dbe6;
      background: #fff;
      color: #3c4f63;
      font-weight: 700;
      font-size: 13px;
      border-radius: 12px;
      padding: 8px 12px;
      cursor: pointer;
      transition: background .18s ease, border-color .18s ease, color .18s ease;
    }

    .page-btn:hover {
      background: #f2f7ff;
      border-color: #b7c8df;
      color: #153f66;
    }

    .page-btn.active {
      background: var(--active);
      border-color: #146f6f;
      color: #ffffff;
    }

    .page-btn[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-numbers {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .page-ellipsis {
      color: #7a8795;
      font-weight: 700;
      padding: 0 2px;
    }

    .card {
      position: relative;
      border: 1px solid #dbe2eb;
      border-radius: 16px;
      padding: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
      box-shadow: var(--box-shadow);
      overflow: hidden;
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      content-visibility: auto;
      contain-intrinsic-size: 280px;
    }

    .card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #f18b4c, #f2c561, #52a7a7);
    }

    .card:hover {
      transform: translateY(-3px);
      border-color: #c5d1de;
      box-shadow: 0 14px 26px rgba(22, 53, 77, 0.11);
    }

    .card:hover .word {
      color: #0d4f72;
    }

    .practice-card {
      cursor: pointer;
      perspective: 1000px;
      touch-action: manipulation;
    }

    /* Disable hover lift on touch devices — avoids transform conflicts with flip */
    @media (hover: none) {
      .card:hover {
        transform: none;
        border-color: #dbe2eb;
        box-shadow: var(--box-shadow);
      }
      .card:hover .word {
        color: inherit;
      }
    }

    .practice-card:focus-visible {
      outline: 3px solid rgba(31, 138, 138, 0.35);
      outline-offset: 3px;
    }

    .card-front {
      transition: transform 0.48s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease;
      transform-origin: center;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .card-back {
      position: absolute;
      inset: 0;
      padding: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
      opacity: 0;
      pointer-events: none;
      transform: rotateY(180deg);
      transform-origin: center;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transition: transform 0.48s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.18s ease;
      overflow: auto;
    }

    .practice-card.is-flipped .card-front {
      transform: rotateY(180deg);
      opacity: 0;
      pointer-events: none;
    }

    .practice-card.is-flipped .card-back {
      transform: rotateY(0deg);
      opacity: 1;
      pointer-events: auto;
    }

    .card-back {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .practice-label {
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #0f6c75;
      margin-bottom: 4px;
    }

    .practice-close-hint {
      font-size: 10px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
      color: #9aaab8;
      display: block;
    }

    .card-spell-input {
      width: 100%;
      border: 2px solid #d0d9e4;
      border-radius: 10px;
      padding: 9px 12px;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      background: #ffffff;
      text-align: center;
      letter-spacing: 0.06em;
      margin-top: 10px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .card-spell-input:focus {
      outline: none;
      border-color: #47a5b2;
      box-shadow: 0 0 0 3px rgba(71, 165, 178, .14);
    }

    .card-spell-input::placeholder {
      color: #9aaab8;
      font-weight: 500;
      letter-spacing: 0;
    }

    .practice-feedback {
      margin-top: 14px;
      text-align: center;
      font-weight: 900;
      font-size: 13px;
      min-height: 20px;
      color: #5b6a79;
    }

    .practice-feedback.ok {
      color: #0f6c75;
    }

    .practice-feedback.bad {
      color: #b24a19;
    }

    .card-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .card-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-shrink: 0;
    }

    .word {
      font-family: "Fraunces", Georgia, serif;
      font-size: 1.2rem;
      color: #1c2f45;
      line-height: 1.2;
      word-break: break-word;
      text-transform: lowercase;
      margin-bottom: 6px;
    }

    .level-tag {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #c5e6e8;
      background: #e1f5f6;
      color: #0f6c75;
    }

    .save-btn {
      border: 1px solid #d7dee7;
      background: var(--chip);
      color: #3f5369;
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }

    .save-btn:hover {
      transform: translateY(-1px);
      border-color: #b9cad8;
      background: #f2f7ff;
      color: #153f66;
    }

    .save-btn.saved {
      background: var(--active);
      border-color: #146f6f;
      color: #ffffff;
    }

    .pronounce-btn {
      border: 1px solid #d7dee7;
      background: #fff;
      color: #3f5369;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }

    .pronounce-btn:hover {
      transform: translateY(-1px);
      border-color: #b9cad8;
      background: #f2f7ff;
      color: #153f66;
    }

    .pos {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      color: #51667c;
      background: #f7fbff;
      border: 1px solid #d7e1eb;
      border-radius: 8px;
      padding: 3px 6px;
      margin-bottom: 8px;
      white-space: nowrap;
    }

    .card-panel {
      border: 1px solid #d7e1eb;
      background: #f7fbff;
      border-radius: 12px;
      padding: 10px 10px 8px;
      margin-bottom: 8px;
    }

    .meaning {
      font-size: 14px;
      line-height: 1.45;
      margin-bottom: 6px;
    }

    .gujarati {
      font-family: "Noto Sans Gujarati", "Nirmala UI", sans-serif;
      font-size: 14px;
      color: #27495f;
      margin-bottom: 0;
    }

    .card-example-wrap {
      border-left: 3px solid #d7e9f5;
      padding-left: 9px;
      margin-bottom: 8px;
    }

    .example {
      font-size: 13px;
      line-height: 1.45;
      color: var(--muted);
      font-style: italic;
      margin: 0;
    }

    .card-vocab-wrap {
      padding-top: 2px;
    }

    .vocab-badges {
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .vocab-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      border: 1px solid #d7e1eb;
      background: #f7fbff;
      color: #51667c;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
    }

    .vocab-badge.syn {
      border-color: #c5e6e8;
      background: #e1f5f6;
      color: #0f6c75;
    }

    .vocab-badge.ant {
      border-color: #f0d3bf;
      background: #fff2e8;
      color: #a54e1f;
    }

    #status {
      color: var(--accent);
      font-weight: 700;
      margin-top: 10px;
      display: none;
    }


    /* Quiz Mode */
    .mode-tabs {
      display: flex;
      gap: 8px;
      margin-top: 16px;
    }

    .mode-tab {
      flex: 1;
      border: 1.5px solid #d7dee7;
      background: var(--chip);
      color: #3f5369;
      font-size: 13px;
      font-weight: 700;
      border-radius: 14px;
      padding: 10px 16px;
      cursor: pointer;
      transition: all .2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
    }

    .mode-tab:hover {
      transform: translateY(-2px);
      border-color: #b9cad8;
      background: #f2f7ff;
    }

    .mode-tab.active {
      background: var(--active);
      border-color: #146f6f;
      color: #fff;
      box-shadow: 0 4px 14px rgba(31, 138, 138, 0.28);
    }

    .quiz-panel {
      display: none;
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 24px;
      background: var(--panel);
      box-shadow: 0 14px 28px rgba(18, 51, 71, 0.08);
      backdrop-filter: blur(8px);
      animation: fadeUp .3s ease;
    }

    .quiz-panel.visible {
      display: block;
    }

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

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

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

    .quiz-meta {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
    }

    .quiz-score-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e2f5f0;
      border: 1px solid #9fdccc;
      color: #0d6e5e;
      font-size: 13px;
      font-weight: 800;
      border-radius: 999px;
      padding: 5px 14px;
    }

    .quiz-settings {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }

    .quiz-config-row {
      display: flex;
      align-items: flex-end;
      gap: 12px;
      flex-wrap: wrap;
      padding: 14px 16px;
      background: var(--surface, #f5f8fb);
      border: 1.5px solid #dbe2eb;
      border-radius: 14px;
    }

    .quiz-config-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .quiz-toggle-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 14px;
      background: var(--surface, #f5f8fb);
      border: 1.5px solid #dbe2eb;
      border-radius: 14px;
    }

    .quiz-room-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px;
      background: linear-gradient(145deg, #e2f5f5 0%, #f2fafc 60%, #e6f3f7 100%);
      border: 1.5px solid #7ecece;
      border-radius: 20px;
      overflow: hidden;
    }

    .quiz-room-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #0f6c75 0%, #3dcfcf 50%, #0f6c75 100%);
    }

    .quiz-room-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .quiz-room-title-group {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .quiz-room-pulse-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #b8d4d8;
      flex-shrink: 0;
      margin-top: 4px;
      transition: background 0.4s, box-shadow 0.4s;
    }

    .quiz-room-card.is-active .quiz-room-pulse-dot {
      background: #1f8a8a;
      animation: qr-pulse 2s ease-in-out infinite;
    }

    @keyframes qr-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(31, 138, 138, 0.55); }
      55% { box-shadow: 0 0 0 7px rgba(31, 138, 138, 0); }
    }

    .quiz-room-label {
      margin: 0 0 3px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #0f6c75;
    }

    .quiz-room-help {
      margin: 0;
      font-size: 12.5px;
      color: #476070;
    }

    .quiz-room-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 6px 14px;
      background: rgba(255,255,255,0.85);
      border: 1.5px solid #aacfd4;
      color: #3a6070;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
    }

    .quiz-room-badge.is-active {
      background: linear-gradient(135deg, #1f8a8a, #0f6c75);
      border-color: #0a5a62;
      color: #fff;
      box-shadow: 0 0 0 3px rgba(31, 138, 138, 0.22);
      letter-spacing: 0.1em;
    }

    /* Two-sided arena layout */
    .quiz-room-arena {
      display: flex;
      gap: 1px;
      background: rgba(31, 138, 138, 0.2);
      border: 1px solid rgba(31, 138, 138, 0.22);
      border-radius: 14px;
      overflow: hidden;
    }

    .quiz-room-side {
      flex: 1 1 120px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px;
      background: rgba(255, 255, 255, 0.68);
    }

    .quiz-room-or {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 10px;
      background: rgba(255, 255, 255, 0.68);
    }

    .quiz-room-or span {
      font-size: 10px;
      font-weight: 900;
      color: #7a9aaa;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      writing-mode: vertical-lr;
      padding: 6px 0;
      position: relative;
    }

    .quiz-room-or span::before,
    .quiz-room-or span::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 18px;
      background: rgba(31, 138, 138, 0.22);
    }

    .quiz-room-or span::before { bottom: 100%; }
    .quiz-room-or span::after  { top: 100%; }

    .quiz-room-side-label {
      margin: 0;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #0f6c75;
    }

    .quiz-room-input { width: 100%; }

    .room-create-form {
      border: 1px solid rgba(31, 138, 138, 0.24);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.78);
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .room-create-form-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .room-create-form-actions .quiz-btn {
      flex: 1 1 120px;
    }

    .quiz-room-code-input {
      font-family: "Courier New", Courier, monospace;
      font-weight: 800;
      letter-spacing: 0.18em;
      font-size: 14px;
      text-align: center;
      text-transform: uppercase;
    }

    .quiz-room-join-btn {
      width: 100%;
      background: linear-gradient(135deg, #e6f5f0, #d4eeec);
      border: 1.5px solid #7ecece;
      color: #0f6c75;
      font-size: 13px;
      font-weight: 800;
      border-radius: 10px;
      padding: 9px 14px;
      min-height: 40px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }

    .quiz-room-join-btn:hover:not(:disabled) {
      background: linear-gradient(135deg, #ceeae4, #bce4e2);
      border-color: #1f8a8a;
    }

    .quiz-room-join-btn:disabled { opacity: 0.45; cursor: not-allowed; }

    /* Footer bar */
    .quiz-room-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .quiz-room-status-row {
      display: flex;
      align-items: center;
      gap: 7px;
      flex: 1;
      min-width: 0;
    }

    .quiz-room-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #b0c8d2;
      flex-shrink: 0;
      transition: background 0.3s;
    }

    .quiz-room-card.is-active .quiz-room-status-dot { background: #1f8a8a; }

    .quiz-room-status {
      font-size: 12.5px;
      font-weight: 600;
      color: #3a5f70;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .quiz-room-bar-btns {
      display: flex;
      gap: 7px;
      flex-shrink: 0;
    }

    .quiz-room-sm-btn {
      font-size: 12px;
      padding: 7px 11px;
      min-height: 34px;
    }

    .quiz-room-leave-btn {
      background: transparent;
      border: 1.5px solid #c4d4da;
      color: #6888a0;
      font-size: 12px;
      font-weight: 700;
      border-radius: 8px;
      padding: 7px 12px;
      min-height: 34px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .quiz-room-leave-btn:hover:not(:disabled) {
      background: #fff0f0;
      border-color: #e07070;
      color: #c04040;
    }

    .quiz-room-leave-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Player cards */
    .quiz-room-players,
    .quiz-room-results-list {
      display: grid;
      gap: 8px;
    }

    .quiz-room-player {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid #c4d8de;
      background: rgba(255, 255, 255, 0.85);
      transition: box-shadow 0.25s;
    }

    .quiz-room-player.is-me {
      border-color: #5bcbc7;
      background: linear-gradient(135deg, rgba(91, 203, 199, 0.07), rgba(255,255,255,0.9));
      box-shadow: 0 0 0 3px rgba(91, 203, 199, 0.16);
    }

    .quiz-room-player.is-finished {
      border-color: #90cea0;
    }

    .quiz-room-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg, #1f8a8a, #0f6272);
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .quiz-room-player.is-me .quiz-room-avatar {
      background: linear-gradient(135deg, #3dcfcf, #1f8a8a);
      box-shadow: 0 0 0 3px rgba(31, 138, 138, 0.22);
    }

    .quiz-room-player-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .quiz-room-player-name {
      font-size: 13.5px;
      font-weight: 800;
      color: #0f2f40;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .quiz-room-player-meta {
      font-size: 11.5px;
      color: #5d7e8e;
    }

    .quiz-room-progress-track {
      height: 3px;
      background: rgba(31, 138, 138, 0.12);
      border-radius: 99px;
      margin-top: 5px;
      overflow: hidden;
    }

    .quiz-room-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #1f8a8a, #3dcfcf);
      border-radius: 99px;
      transition: width 0.6s ease;
    }

    .quiz-room-player.is-finished .quiz-room-progress-fill {
      background: linear-gradient(90deg, #3a9e5f, #5dca82);
    }

    .quiz-room-player-score {
      font-size: 20px;
      font-weight: 900;
      color: #0f6c75;
      text-align: right;
      white-space: nowrap;
      line-height: 1;
    }

    .quiz-room-player-score span {
      font-size: 11px;
      font-weight: 600;
      color: #7a9aaa;
      display: block;
      text-align: right;
      margin-top: 2px;
    }

    .quiz-limit-input {
      width: 70px;
    }

    .quiz-restart-inline {
      margin-left: auto;
      align-self: flex-end;
    }

    .quiz-settings label {
      font-size: 11px;
      font-weight: 700;
      color: #526273;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .quiz-select {
      border: 1.5px solid #cdd8e3;
      border-radius: 10px;
      padding: 6px 10px;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      background: #fff;
      cursor: pointer;
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .quiz-select:disabled {
      cursor: not-allowed;
      opacity: .72;
      background: #f3f6fa;
    }

    .quiz-select:focus {
      outline: none;
      border-color: #47a5b2;
      box-shadow: 0 0 0 3px rgba(71, 165, 178, .14);
    }

    #quizLimit {
      width: 92px;
      text-align: center;
    }

    .quiz-progress-bar {
      height: 6px;
      border-radius: 99px;
      background: #e4eaf1;
      overflow: hidden;
      margin-bottom: 22px;
    }

    .quiz-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #1f8a8a, #5abcb3);
      border-radius: 99px;
      transition: width .4s ease;
    }

    .quiz-word-card {
      border: 1.5px solid #dbe2eb;
      border-radius: 18px;
      padding: 28px 24px;
      text-align: center;
      background: linear-gradient(160deg, #f9fcff 0%, #eef8f8 100%);
      margin-bottom: 22px;
      position: relative;
      overflow: hidden;
    }

    .quiz-word-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #f18b4c, #f2c561, #52a7a7);
    }

    .quiz-prompt {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: #0f6c75;
      margin-bottom: 10px;
    }

    .quiz-word {
      font-family: "Fraunces", Georgia, serif;
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      color: #123347;
      line-height: 1.2;
      margin-bottom: 8px;
    }

    .quiz-word-meta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .quiz-word-pos,
    .quiz-word-level {
      font-size: 12px;
      font-weight: 700;
      color: #51667c;
      background: #f0f5fb;
      border: 1px solid #d7e1eb;
      border-radius: 8px;
      padding: 4px 10px;
      display: inline-block;
    }

    .quiz-word-level {
      border-color: #c5e6e8;
      background: #e1f5f6;
      color: #0f6c75;
      font-weight: 800;
      letter-spacing: .03em;
    }

    .speak-btn {
      margin-top: 10px;
      border: 1px solid #d7dee7;
      background: #fff;
      color: #3f5369;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }

    .speak-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: #b9cad8;
      background: #f2f7ff;
      color: #153f66;
    }

    .speak-btn:disabled {
      opacity: .5;
      cursor: not-allowed;
      transform: none;
    }

    .quiz-options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }

    .quiz-opt {
      border: 1.5px solid #d7dee7;
      background: #fff;
      color: #2d3f52;
      font: inherit;
      font-size: 13.5px;
      font-weight: 600;
      border-radius: 14px;
      padding: 14px 12px;
      cursor: pointer;
      text-align: left;
      line-height: 1.4;
      transition: all .18s ease;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .quiz-opt-main {
      font-weight: 700;
    }

    .quiz-opt-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .quiz-opt-main {
      flex: 1;
      min-width: 0;
    }

    .quiz-opt-speak {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      border: 1px solid #d0d9e4;
      background: #f5f8fc;
      color: #33516a;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      line-height: 1;
      cursor: pointer;
      user-select: none;
      transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
    }

    .quiz-opt-speak:hover {
      transform: translateY(-1px);
      background: #eaf2fb;
      border-color: #a8c0d8;
      color: #153f66;
    }

    .quiz-opt:disabled .quiz-opt-speak {
      opacity: .5;
      cursor: default;
      transform: none;
    }

    .quiz-opt-gujarati {
      font-family: "Noto Sans Gujarati", "Nirmala UI", sans-serif;
      font-size: 12.5px;
      color: #35566f;
    }

    .quiz-opt:hover:not(:disabled) {
      transform: translateY(-2px);
      border-color: #a8c0d8;
      background: #f4f9ff;
    }

    .quiz-opt.correct {
      border-color: #22c08b;
      background: linear-gradient(135deg, #edfcf5, #d6f5e9);
      color: #0b5e38;
      animation: popIn .25s ease;
    }

    .quiz-opt.wrong {
      border-color: #e5534b;
      background: linear-gradient(135deg, #fff3f2, #fde0de);
      color: #8c1b17;
      animation: shake .3s ease;
    }

    .quiz-opt.reveal-correct {
      border-color: #22c08b;
      background: linear-gradient(135deg, #edfcf5, #d6f5e9);
      color: #0b5e38;
      opacity: .65;
    }

    .quiz-opt:disabled {
      cursor: default;
    }

    @keyframes popIn {
      0% {
        transform: scale(.96);
      }

      60% {
        transform: scale(1.03);
      }

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

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0);
      }

      25% {
        transform: translateX(-5px);
      }

      75% {
        transform: translateX(5px);
      }
    }

    .quiz-feedback {
      min-height: 36px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 16px;
      border-radius: 12px;
      padding: 8px 16px;
      transition: opacity .2s;
    }

    .quiz-feedback.correct {
      background: #edfcf5;
      color: #0b5e38;
      border: 1px solid #9fdccc;
    }

    .quiz-feedback.wrong {
      background: #fff3f2;
      color: #8c1b17;
      border: 1px solid #f5b8b5;
    }

    .quiz-countdown {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      position: absolute;
      top: 12px;
      right: 16px;
      font-size: 13px;
      color: var(--muted);
      z-index: 2;
    }

    .quiz-countdown span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      line-height: 1;
    }

    html[data-theme="dark"] .quiz-countdown span {
      background: #1d6f61;
      color: #95f1d8;
    }

    .quiz-actions {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .quiz-btn {
      border: none;
      border-radius: 12px;
      padding: 11px 28px;
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all .2s ease;
    }

    .quiz-btn-primary {
      background: var(--active);
      color: #fff;
      box-shadow: 0 4px 14px rgba(31, 138, 138, 0.3);
    }

    .quiz-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(31, 138, 138, 0.38);
    }

    .quiz-btn-primary:disabled {
      opacity: .4;
      cursor: default;
      transform: none;
    }

    .quiz-btn-ghost {
      background: #f0f4f9;
      color: #3c4f63;
      border: 1.5px solid #d3dbe6;
    }

    .quiz-btn-ghost:hover {
      background: #e4ecf5;
      border-color: #b7c8df;
    }

    .quiz-btn-ghost.active {
      background: var(--active);
      border-color: #146f6f;
      color: #ffffff;
    }

    .quiz-btn-ghost:disabled {
      opacity: .38;
      cursor: not-allowed;
      pointer-events: auto;
    }

    /* Results screen */
    .quiz-results {
      display: none;
      text-align: center;
      padding: 20px 0 10px;
      animation: fadeUp .35s ease;
    }

    .quiz-results.visible {
      display: block;
    }

    .quiz-result-emoji {
      font-size: 3.5rem;
      line-height: 1;
      margin-bottom: 12px;
    }

    .quiz-result-title {
      font-family: "Fraunces", Georgia, serif;
      font-size: 1.8rem;
      color: #123347;
      margin-bottom: 8px;
    }

    .quiz-result-score {
      font-size: 1rem;
      color: var(--muted);
      margin-bottom: 24px;
    }

    .quiz-result-score strong {
      color: var(--active);
      font-size: 1.35rem;
    }

    .quiz-result-bars {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 28px;
    }

    .quiz-result-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .quiz-result-stat .val {
      font-size: 2rem;
      font-weight: 800;
      color: #1c2a37;
    }

    .quiz-result-stat .lbl {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
    }

    .quiz-result-stat.good .val {
      color: #22c08b;
    }

    .quiz-result-stat.bad .val {
      color: #e5534b;
    }

    .quiz-room-results {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(31, 138, 138, 0.18);
      text-align: left;
    }

    .quiz-room-results h3 {
      margin: 0 0 12px;
      font-size: 1rem;
      font-weight: 800;
      color: #0f3347;
    }

    .quiz-wrong-review {
      margin: 0 auto 20px;
      max-width: 760px;
      display: grid;
      gap: 10px;
      text-align: left;
    }

    .quiz-wrong-item {
      border: 1px solid #dbe2eb;
      border-radius: 14px;
      background: #f9fbfe;
      padding: 12px;
    }

    .quiz-wrong-title {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #0f6c75;
      margin-bottom: 6px;
    }

    .quiz-wrong-prompt {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 8px;
    }

    .quiz-wrong-line {
      font-size: 13px;
      line-height: 1.45;
      color: #24384b;
    }

    .quiz-wrong-line .lbl {
      font-weight: 800;
      color: #51667c;
    }

    /* Multiplayer Room Panel */
    .room-panel {
      display: none;
      margin-top: 16px;
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 24px;
      background: var(--panel);
      box-shadow: 0 14px 28px rgba(18, 51, 71, 0.08);
      backdrop-filter: blur(8px);
      animation: fadeUp .3s ease;
    }

    .room-panel.visible {
      display: block;
    }

    .room-panel-inner {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .room-go-quiz {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
      padding: 14px 18px;
      background: linear-gradient(135deg, rgba(31,138,138,0.08), rgba(61,207,207,0.05));
      border: 1.5px solid rgba(31,138,138,0.3);
      border-radius: 14px;
    }

    .room-go-quiz-text {
      margin: 0;
      font-size: 13.5px;
      color: #0f6c75;
      font-weight: 600;
    }

    .room-how-to {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .room-how-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 13px;
      color: #476070;
    }

    .room-how-num {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(31,138,138,0.12);
      border: 1.5px solid rgba(31,138,138,0.3);
      color: #0f6c75;
      font-size: 11px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }

    html[data-theme="dark"] .room-panel {
      background: linear-gradient(145deg, #0d2030 0%, #081829 100%);
      border-color: rgba(31,138,138,0.25);
    }

    html[data-theme="dark"] .room-go-quiz {
      background: rgba(31,138,138,0.07);
      border-color: rgba(31,138,138,0.22);
    }

    html[data-theme="dark"] .room-go-quiz-text { color: #5dcac4; }
    html[data-theme="dark"] .room-how-step { color: #6a8a9a; }
    html[data-theme="dark"] .room-how-num {
      background: rgba(31,138,138,0.1);
      border-color: rgba(31,138,138,0.25);
      color: #5dcac4;
    }

    /* ─── Responsive ──────────────────────────────────────────────── */

    /* Tablet – 900px */
    @media (max-width: 900px) {
      .page {
        padding: 16px 12px 28px;
      }

      .hero {
        padding: 20px 18px;
      }

      .quiz-panel,
      .room-panel {
        padding: 18px 16px;
        border-radius: 18px;
      }

      .quiz-config-row {
        gap: 10px;
        padding: 12px 14px;
      }

      .quiz-toggle-row {
        padding: 8px 12px;
        gap: 6px;
      }

      .quiz-word-card {
        padding: 20px 16px;
      }

      .quiz-result-bars {
        gap: 12px;
      }
    }

    /* Large mobile – 720px */
    @media (max-width: 720px) {
      .search-row {
        grid-template-columns: 1fr;
      }

      #clearSearch,
      #savedToggle,
      #synonymsToggle,
      #antonymsToggle {
        width: 100%;
      }

      .hero h1 {
        font-size: clamp(1.4rem, 5vw, 2rem);
      }

      .quiz-config-row {
        flex-direction: column;
        align-items: stretch;
      }

      .quiz-config-group {
        width: 100%;
      }

      .quiz-config-group .quiz-select {
        width: 100%;
      }

      .quiz-limit-input {
        width: 100% !important;
      }

      .quiz-restart-inline {
        width: 100%;
        margin-left: 0;
        text-align: center;
      }

      .quiz-toggle-row {
        flex-direction: column;
        align-items: stretch;
      }

      .quiz-toggle-row .quiz-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
      }

      .quiz-actions {
        flex-wrap: wrap;
        gap: 8px;
      }

      .quiz-actions .quiz-btn {
        flex: 1 1 auto;
        min-width: 100px;
        text-align: center;
        justify-content: center;
      }

      .quiz-result-bars {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
      }

      .quiz-result-stat {
        flex: 1 1 80px;
      }
    }

    /* Small mobile – 600px */
    @media (max-width: 600px) {
      .page {
        padding: 10px 8px 20px;
      }

      .hero {
        padding: 16px 14px;
        border-radius: 16px;
      }

      .hero h1 {
        font-size: clamp(1.2rem, 6vw, 1.7rem);
      }

      .hero p {
        font-size: 13px;
      }

      .mode-tabs {
        flex-direction: column;
        gap: 6px;
      }

      .mode-tab {
        width: 100%;
        text-align: center;
        justify-content: center;
      }

      .quiz-panel,
      .room-panel {
        padding: 14px 12px;
        border-radius: 14px;
      }

      .quiz-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 12px;
      }

      .quiz-word-card {
        padding: 16px 12px;
        border-radius: 14px;
        margin-bottom: 14px;
      }

      .quiz-word {
        font-size: clamp(1.3rem, 6vw, 1.8rem);
      }

      .quiz-options {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .quiz-opt {
        padding: 10px 12px;
        font-size: 13px;
      }

      .quiz-countdown {
        top: 8px;
        right: 10px;
        font-size: 11px;
      }

      .quiz-countdown span {
        width: 22px;
        height: 22px;
        font-size: 12px;
      }

      .quiz-config-row,
      .quiz-toggle-row {
        border-radius: 10px;
        padding: 10px 10px;
      }

      .quiz-result-bars {
        flex-direction: column;
        gap: 8px;
      }

      .quiz-result-stat {
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 14px;
        gap: 0;
      }

      .quiz-result-stat .val {
        font-size: 1.2rem;
      }

      .stats {
        gap: 6px;
      }

      .badge {
        font-size: 11px;
        padding: 3px 8px;
      }

      .filter-block {
        margin-bottom: 12px;
      }

      .pagination {
        gap: 4px;
      }

      .page-btn {
        padding: 6px 10px;
        font-size: 12px;
      }
    }

    /* Very small – 380px (iPhone SE etc.) */
    @media (max-width: 380px) {
      .hero h1 {
        font-size: 1.15rem;
      }

      .quiz-word {
        font-size: 1.2rem;
      }

      .quiz-opt {
        font-size: 12px;
        padding: 8px 10px;
      }

      .quiz-config-row,
      .quiz-toggle-row {
        padding: 8px;
      }
    }

    /* Streak banner */
    .streak-banner {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      background: linear-gradient(135deg, #fff7ed, #fef3c7);
      border: 1.5px solid #fcd34d;
      border-radius: 999px;
      padding: 7px 16px;
      font-size: 13px;
      font-weight: 800;
      color: #92400e;
    }

    .streak-banner::before {
      content: "🔥";
    }

    /* Dark mode — streak banner */
    html[data-theme="dark"] .streak-banner {
      background: linear-gradient(135deg, #2a1f0a, #2e2008);
      border-color: #9e7834;
      color: #ffd7a8;
    }

    /* Live Visitor Badge */
    .visitor-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 10px;
      background: rgba(31, 138, 138, 0.08);
      border: 1.5px solid rgba(31, 138, 138, 0.28);
      border-radius: 999px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: var(--active);
    }

    .visitor-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
      animation: visitor-pulse 2s ease infinite;
      flex-shrink: 0;
    }

    @keyframes visitor-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
      70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
      100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    }

    html[data-theme="dark"] .visitor-badge {
      background: rgba(49, 165, 165, 0.1);
      border-color: rgba(49, 165, 165, 0.3);
    }

    /* ── Incoming Call Overlay ── */
    .call-overlay {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      animation: callSlideIn 0.3s ease;
    }

    @keyframes callSlideIn {
      from { opacity: 0; transform: translateY(-20px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .call-overlay-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--surface);
      border: 1.5px solid rgba(31, 138, 138, 0.4);
      border-radius: 16px;
      padding: 14px 18px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.18);
      min-width: 280px;
    }

    .call-overlay-icon {
      font-size: 1.6rem;
      animation: callRing 0.6s ease infinite alternate;
      flex-shrink: 0;
    }

    @keyframes callRing {
      from { transform: rotate(-15deg); }
      to   { transform: rotate(15deg); }
    }

    .call-overlay-info {
      flex: 1;
    }

    .call-overlay-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 2px;
    }

    .call-overlay-sub {
      font-size: 12px;
      color: var(--muted);
      margin: 0;
    }

    .call-overlay-btns {
      display: flex;
      gap: 7px;
      flex-shrink: 0;
    }

    .call-overlay-answer {
      background: #22c55e;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }

    .call-overlay-answer:hover { background: #16a34a; }

    .call-overlay-decline {
      background: #ef4444;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }

    .call-overlay-decline:hover { background: #dc2626; }

    html[data-theme="dark"] .call-overlay-card {
      background: #0d2030;
      border-color: rgba(31, 138, 138, 0.4);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }

    @media (max-width: 480px) {
      .call-overlay {
        top: auto;
        bottom: 20px;
        right: 12px;
        left: 12px;
      }
      .call-overlay-card { min-width: unset; }
    }

    /* ── Voice Call UI ── */
    .quiz-room-call {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--line);
      padding: 10px 16px;
      background: rgba(31, 138, 138, 0.05);
    }

    .quiz-room-call[hidden] { display: none !important; }

    .quiz-room-call-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .quiz-room-call-left {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .quiz-call-status-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--line);
      flex-shrink: 0;
      transition: background 0.3s;
    }

    .quiz-call-status-dot.is-active {
      background: #22c55e;
      animation: visitor-pulse 2s ease infinite;
    }

    .quiz-call-status-dot.is-ringing {
      background: #f59e0b;
      animation: visitor-pulse 1s ease infinite;
    }

    .quiz-call-status {
      font-size: 12.5px;
      color: var(--muted);
      font-weight: 600;
    }

    .quiz-room-call-btns {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
    }

    html[data-theme="dark"] .quiz-room-call {
      background: rgba(31, 138, 138, 0.08);
      border-color: rgba(31, 138, 138, 0.2);
    }

    .admin-page {
      max-width: 760px;
    }

    .admin-hero h1 {
      margin-bottom: 10px;
    }

    .admin-panel {
      margin-top: 18px;
    }

    .admin-section-panel {
      margin-bottom: 18px;
    }

    .admin-form {
      display: grid;
      gap: 14px;
    }

    .admin-form[hidden] {
      display: none !important;
    }

    .admin-section-form {
      margin-top: 12px;
    }

    .admin-section-list {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .admin-section-item {
      align-items: center;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--box-shadow);
      display: flex;
      justify-content: space-between;
      padding: 14px 16px;
      gap: 12px;
    }

    .admin-section-actions {
      align-items: center;
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .admin-section-item.is-active {
      border-color: rgba(31, 138, 138, 0.35);
      box-shadow: 0 14px 30px rgba(31, 138, 138, 0.12);
    }

    .admin-section-item .meaning {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      margin: 4px 0 0;
    }

    .admin-enter-btn {
      white-space: nowrap;
    }

    .admin-delete-section-btn {
      white-space: nowrap;
    }

    .admin-modal {
      align-items: center;
      display: flex;
      inset: 0;
      justify-content: center;
      padding: 24px;
      position: fixed;
      z-index: 1000;
    }

    .admin-modal[hidden] {
      display: none !important;
    }

    .admin-modal-backdrop {
      background: rgba(7, 13, 22, 0.6);
      inset: 0;
      position: absolute;
    }

    .admin-modal-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
      max-width: 420px;
      padding: 22px;
      position: relative;
      width: min(420px, 100%);
      z-index: 1;
    }

    .admin-modal-card h2 {
      color: var(--hero-title);
      font-family: "Fraunces", Georgia, serif;
      font-size: 22px;
      margin: 0 0 10px;
    }

    .admin-modal-card p {
      color: var(--ink);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      margin: 0;
    }

    .admin-modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 20px;
    }

    html[data-theme="dark"] .admin-modal-backdrop {
      background: rgba(0, 0, 0, 0.72);
    }

    .admin-word-form {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-form label {
      color: var(--ink);
      display: grid;
      font-size: 13px;
      font-weight: 800;
      gap: 7px;
    }

    .admin-pos-field {
      position: relative;
    }

    .admin-pos-label {
      align-items: center;
      display: inline-flex;
      gap: 8px;
    }

    .admin-pos-info {
      align-items: center;
      background: var(--accent);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 999px;
      color: #fff;
      cursor: help;
      display: inline-flex;
      flex: 0 0 auto;
      font-size: 11px;
      font-weight: 900;
      height: 18px;
      justify-content: center;
      line-height: 1;
      position: relative;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
      width: 18px;
    }

    .admin-pos-tooltip {
      background: #102233;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 12px;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      left: 50%;
      line-height: 1.45;
      opacity: 0;
      padding: 10px 12px;
      pointer-events: none;
      position: absolute;
      top: calc(100% + 10px);
      transform: translateX(-50%) translateY(-4px);
      transition: opacity 0.18s ease, transform 0.18s ease;
      width: 240px;
      z-index: 4;
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
    }

    .admin-pos-tooltip code {
      color: #ffd9b8;
    }

    .admin-pos-info:hover .admin-pos-tooltip,
    .admin-pos-info:focus .admin-pos-tooltip,
    .admin-pos-info:focus-within .admin-pos-tooltip,
    .admin-pos-field:focus-within .admin-pos-tooltip {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    html[data-theme="dark"] .admin-pos-info {
      background: #ff9b5f;
      color: #0b1118;
      border-color: rgba(255, 255, 255, 0.08);
    }

    html[data-theme="dark"] .admin-pos-tooltip {
      background: #eaf2ff;
      border-color: rgba(11, 17, 24, 0.12);
      color: #102233;
    }

    html[data-theme="dark"] .admin-pos-tooltip code {
      color: #8c3f00;
    }

    .admin-form label[hidden] {
      display: none !important;
    }

    .admin-form textarea {
      min-height: 74px;
      resize: vertical;
    }

    .admin-fetch-wrap {
      align-items: end;
      display: grid;
      gap: 7px;
    }

    .admin-fetch-status {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      min-height: 18px;
    }

    .admin-form code,
    .admin-help code {
      background: var(--chip);
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 1px 5px;
    }

    .admin-wide {
      grid-column: 1 / -1;
    }

    .admin-form-head,
    .admin-toolbar,
    .admin-list-head,
    .admin-actions {
      align-items: center;
      display: flex;
      gap: 12px;
      justify-content: space-between;
    }

    .admin-help {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      margin: 0;
    }

    .admin-status {
      color: var(--accent);
      font-size: 14px;
      font-weight: 800;
      min-height: 20px;
    }

    .admin-list-head {
      border-top: 1px solid var(--line);
      margin-top: 22px;
      padding-top: 18px;
    }

    .admin-word-list {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }

    .admin-word-item,
    .admin-empty {
      background: rgba(255, 255, 255, 0.62);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px;
    }

    .admin-word-item {
      align-items: start;
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr auto;
    }

    .admin-word-title {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }

    .admin-word-title strong {
      color: var(--hero-title);
      font-size: 18px;
    }

    .admin-delete-btn {
      white-space: nowrap;
    }

    html[data-theme="dark"] .admin-form textarea,
    html[data-theme="dark"] .admin-form input,
    html[data-theme="dark"] .admin-form select {
      background-color: #131d2b;
      border-color: #2f3b4c;
      color: #e7edf5;
    }

    html[data-theme="dark"] .admin-word-item,
    html[data-theme="dark"] .admin-empty {
      background: rgba(18, 28, 42, 0.72);
      border-color: #2f3b4c;
    }

    @media (max-width: 720px) {
      .admin-word-form {
        grid-template-columns: 1fr;
      }

      .admin-toolbar,
      .admin-list-head,
      .admin-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .admin-word-item {
        grid-template-columns: 1fr;
      }
    }