/* ═══════════════════════════════════════════════════════════════════════════
   MARKING DESK — generator page skin (2026-09-20)
   The "sky is the limit" redesign, applied as a skin over the existing markup:
   paper ground, ink text, one marker-red accent, answer-bubble chips, hairline
   cards with a stamped hover, and three typefaces with distinct jobs.

   Loaded ONLY by resources/views/panel/user/openai/list.blade.php, after that
   page's inline <style> blocks, so it overrides them. To remove the redesign:
   delete the two <link> lines from that view (or this file) — nothing else in
   the app changes.

   Tokens:  ink #101C19 · paper #F6F4EE · marker #E2452F · highlighter #F4E05A
            correct #1C7A62 · rule rgba(16,28,25,.13) · muted #5C6B65
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ground ─────────────────────────────────────────────────────────────── */
/* html+body beats the global rule in panel/layout/header.blade.php, which is
   later in the document and already uses !important on the colour. */
html body {
    background-color: #F6F4EE !important;
    background-image: none !important;
    font-family: "Instrument Sans", system-ui, -apple-system, sans-serif;
    color: #101C19;
}

/* ── the page header panel ──────────────────────────────────────────────── */
body .header-wrapper {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

body .qg-hero-orb,
body .qg-hero-orb2 { display: none !important; }

body .qg-hero-icon-wrap {
    width: 52px !important;
    height: 52px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 28, 25, 0.16) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    animation: none !important;
}
body .qg-hero-icon-wrap svg { stroke: #101C19 !important; color: #101C19 !important; }
body .qg-hero-icon-wrap svg circle[fill] { fill: #E2452F !important; }

body .qg-hero-text h2 {
    font-family: "Bricolage Grotesque", sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.15rem !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    color: #101C19 !important;
}
body .qg-hero-text p {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #5C6B65 !important;
}

/* ── step headers: 01 / 02 in a bordered square, then a rule to the edge ── */
body .qg-step-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
body .qg-step-header::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(16, 28, 25, 0.13);
}
/* the chosen type in the step-2 heading takes the marker red (the page in-line styles it indigo/coral) */
body #dynamic-source-heading strong { color: #E2452F !important; }
body .qg-step-badge {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 1px solid rgba(16, 28, 25, 0.18) !important;
    border-radius: 7px !important;
    color: transparent !important;
    font-size: 0 !important;
}
body .qg-step-badge::after {
    content: "01";
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    color: #101C19;
}
body #step2-container .qg-step-badge::after { content: "02"; }

body .qg-step-label {
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 0.97rem !important;
    font-weight: 600 !important;
    color: #101C19 !important;
}

/* ── question types: the answer bubble ──────────────────────────────────── */
body .filter-btn {
    position: relative !important;
    height: 46px !important;
    padding: 0 17px 0 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    color: #101C19 !important;
    transform: none !important;
}
body .filter-btn::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1.5px solid rgba(16, 28, 25, 0.28);
    background: transparent;
}
body .filter-btn:hover { border-color: rgba(16, 28, 25, 0.38) !important; }
body .filter-btn:hover::before { border-color: #101C19; }

body .filter-btn.active,
body .filter-btn.active:hover {
    background: #FFFFFF !important;
    border: 1.5px solid #101C19 !important;
    color: #101C19 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
body .filter-btn.active::before,
body .filter-btn.active:hover::before {
    background: #E2452F;
    border-color: #E2452F;
    box-shadow: inset 0 0 0 3px #FFFFFF;
}
/* the chips carry the bubble now, so their icons would say the same thing twice */
body .filter-btn svg { display: none !important; }

/* ── step 2 sits on the paper, not in a second panel ────────────────────── */
body #step2-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── source cards: hairline at rest, stamped on hover ───────────────────── */
body .generator-card {
    background: #FFFFFF !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
body .generator-card::before { display: none !important; }
body .generator-card:hover {
    transform: none !important;
    border: 1.5px solid #101C19 !important;
    box-shadow: 5px 5px 0 #E2452F !important;
}
body .generator-icon {
    width: 38px !important;
    height: 38px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 28, 25, 0.16) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body .generator-icon svg,
body .generator-card:hover .generator-icon svg {
    stroke: #101C19 !important;
    color: #101C19 !important;
}
body .generator-card .card-title {
    font-family: "Bricolage Grotesque", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    color: #101C19 !important;
}
body .generator-card .card-desc {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    color: #5C6B65 !important;
}
body .generator-card .fav-btn { color: #5C6B65 !important; }
body .generator-card .fav-btn.active { color: #E2452F !important; }

/* ── numerals anywhere on the page read as instrument data ──────────────── */
body .page-body .badge,
body .page-body .text-muted small {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 2 — the rail and the top bar (2026-09-20)
   These live in the shared panel layout, but this stylesheet is loaded only by
   the generator view, so the ink rail appears on THIS page only. Good for
   judging the design; before shipping it would move into the layout so the
   rail does not change colour as you navigate.
   ═══════════════════════════════════════════════════════════════════════════ */

body aside.navbar-vertical {
    background: #101C19 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}
body aside.navbar-vertical h1 { background: transparent !important; }

/* The animated logo stays. On this page the <lottie-player> loads main-white.json - the same animation with
   the eight letter paths in white (header.blade.php picks the file by route); the mascot keeps its colours. */
body aside.navbar-vertical h1 lottie-player { display: block !important; }

/* section labels carry an inline colour, so !important is what beats it */
body aside.navbar-vertical span[style*="064789"] {
    color: rgba(246, 244, 238, 0.45) !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    letter-spacing: 0.16em !important;
}

body aside.navbar-vertical .nav-link {
    color: rgba(246, 244, 238, 0.72) !important;
    border-radius: 9px !important;
    font-family: "Instrument Sans", sans-serif !important;
}
body aside.navbar-vertical .nav-link:hover {
    background-color: #1B2B27 !important;
    color: #F6F4EE !important;
}
body aside.navbar-vertical .nav-link.active {
    background: #1B2B27 !important;
    color: #F6F4EE !important;
    font-weight: 600 !important;
}
body aside.navbar-vertical .nav-link-icon { background: transparent !important; }
body aside.navbar-vertical .nav-link-icon svg,
body aside.navbar-vertical .nav-link:hover .nav-link-icon svg {
    stroke: currentColor !important;
    color: inherit !important;
}
body aside.navbar-vertical .nav-link.active .nav-link-icon svg {
    stroke: #E2452F !important;
    color: #E2452F !important;
}
body aside.navbar-vertical .nav-link .badge,
body aside.navbar-vertical .nav-link .sidebar-due-badge {
    background: rgba(246, 244, 238, 0.12) !important;
    color: #F4E05A !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-weight: 500 !important;
}
body aside.navbar-vertical hr { border-color: rgba(246, 244, 238, 0.12) !important; }
body aside.navbar-vertical p,
body aside.navbar-vertical .text-muted,
body aside.navbar-vertical small { color: rgba(246, 244, 238, 0.5) !important; }

/* ── top bar ────────────────────────────────────────────────────────────── */
body header .navbar-search-input {
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    border-radius: 11px !important;
    font-family: "Instrument Sans", sans-serif !important;
    color: #101C19 !important;
    box-shadow: none !important;
}
body header kbd {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    background: #F1EFE9 !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    color: #5C6B65 !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 3 — the pieces that needed markup (2026-09-20)
   ═══════════════════════════════════════════════════════════════════════════ */

/* the answer-sheet ornament in the top right of the page header */
body .qg-hero { position: relative !important; }
body .qg-hero::after {
    content: "";
    position: absolute;
    top: 26px;
    right: 30px;
    width: 96px;
    height: 72px;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 12px 12px, #1C7A62 6px, transparent 6.5px),
        radial-gradient(circle at 60px 36px, #E2452F 6px, transparent 6.5px),
        radial-gradient(circle at 36px 60px, #101C19 6px, transparent 6.5px),
        radial-gradient(circle at 84px 12px, #F4E05A 4.7px, transparent 5.2px),
        radial-gradient(circle at 12px 12px, transparent 4.6px, rgba(16, 28, 25, 0.22) 4.7px, rgba(16, 28, 25, 0.22) 6px, transparent 6.5px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 24px 24px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}
@media (max-width: 991px) { body .qg-hero::after { display: none; } }

/* what each source accepts, in the mono data voice */
body .generator-card .qg-card-formats {
    flex: 1 1 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(16, 28, 25, 0.1);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: #5C6B65;
}

/* the quota card at the foot of the rail */
body aside.navbar-vertical .qg-quota {
    margin: 18px 14px 6px;
    padding: 15px 15px 14px;
    background: #1B2B27;
    border-radius: 12px;
}
body aside.navbar-vertical .qg-quota-figure {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 20px;
    font-weight: 500;
    color: #F6F4EE;
    font-variant-numeric: tabular-nums;
}
body aside.navbar-vertical .qg-quota-figure span { font-size: 12px; color: rgba(246, 244, 238, 0.45); }
body aside.navbar-vertical .qg-quota-bar {
    height: 5px;
    margin: 9px 0;
    border-radius: 999px;
    background: rgba(246, 244, 238, 0.14);
    overflow: hidden;
}
body aside.navbar-vertical .qg-quota-bar span { display: block; height: 5px; border-radius: 999px; background: #F4E05A; }
body aside.navbar-vertical .qg-quota-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(246, 244, 238, 0.55) !important;
}
body aside.navbar-vertical .qg-quota-link {
    display: inline-block;
    margin-top: 8px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F4E05A !important;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 4 — matching the mock's step 1 (2026-09-20)
   The mock puts step 1 straight onto the paper, with smaller chips that fit on
   one line and the remaining types folded behind a button.
   ═══════════════════════════════════════════════════════════════════════════ */

/* no white card around the header and the chips */
body .header-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body .header-wrapper > .card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body .qg-hero { padding-left: 0 !important; padding-right: 0 !important; }
body .qg-hero::after { right: 6px; }

/* chips: smaller, left aligned, one row */
body .qg-types-row {
    justify-content: flex-start !important;
    gap: 8px !important;
}
body .filter-btn {
    height: 38px !important;
    padding: 0 14px 0 30px !important;
    font-size: 0.82rem !important;
    border-radius: 9px !important;
}
body .filter-btn::before {
    left: 13px;
    width: 13px;
    height: 13px;
}
body .filter-btn.active::before,
body .filter-btn.active:hover::before { box-shadow: inset 0 0 0 2.5px #FFFFFF; }

/* the fold-away button for the remaining types */
body .qg-more-btn {
    height: 38px;
    margin-top: 8px;
    padding: 0 14px;
    background: transparent;
    border: 1px dashed rgba(16, 28, 25, 0.24);
    border-radius: 9px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5C6B65;
    cursor: pointer;
}
body .qg-more-btn:hover { border-color: rgba(16, 28, 25, 0.42); color: #101C19; }
body .qg-more-btn.is-open { border-style: solid; color: #101C19; }
body #qg-types-more { display: none !important; }
body #qg-types-more.is-open { display: flex !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PART 5 — the strip beside the rail (2026-09-20)
   The top bar carried backdrop-filter: blur(10px), which smeared the rail's
   dark edge into the header as a soft white-to-dark band. Off here, and the
   top bar gets the same paper gutter the content has, as in the mock.
   ═══════════════════════════════════════════════════════════════════════════ */
body header.navbar-expand-md {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding-left: 34px !important;
}
body .page-body .container-xl {
    padding-left: 34px !important;
    padding-right: 34px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PART 6 — the top bar, matched to the mock (2026-09-20)
   ═══════════════════════════════════════════════════════════════════════════ */
body header.navbar-expand-md {
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 34px 0 !important;
}

/* the search grows until it meets the right-hand cluster */
body header #navbar-search-wrapper { flex: 1 1 auto !important; min-width: 0 !important; }
body header form.navbar-search { width: 100% !important; margin-right: 18px !important; }
body header .navbar-search .input-icon { width: 100% !important; }
body header .navbar-search-input {
    height: 46px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    border-radius: 11px !important;
    padding-left: 42px !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 14.5px !important;
    color: #101C19 !important;
    box-shadow: none !important;
}
body header .navbar-search-input:focus { border-color: #101C19 !important; box-shadow: none !important; }
body header .navbar-search .input-icon-addon { color: #5C6B65 !important; }
body header .navbar-search .input-icon-addon svg { width: 17px !important; height: 17px !important; }
body header kbd {
    opacity: 1 !important;
    padding: 3px 7px !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    color: #5C6B65 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* every button in the cluster becomes a hairline ghost button in ink … */
body header .navbar-nav a.btn {
    height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: 1px solid rgba(16, 28, 25, 0.2) !important;
    border-radius: 11px !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #101C19 !important;
    box-shadow: none !important;
}
body header .navbar-nav a.btn svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }
/* … and the plan pill is the mono, green-outlined one from the mock */
body header .navbar-nav a.btn[style*="d8eedb"] {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #1C7A62 !important;
    border-color: rgba(28, 122, 98, 0.45) !important;
}

/* the language switcher: a hairline square */
body header .navbar-nav .nav-item.dropdown > a.nav-link.px-0 {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(16, 28, 25, 0.2) !important;
    border-radius: 11px !important;
    color: #101C19 !important;
}
body header .navbar-nav .nav-item.dropdown > a.nav-link.px-0 svg { width: 19px !important; height: 19px !important; }

/* the avatar: a rounded square, no double ring */
body header .avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    box-shadow: none !important;
}

/* ── PART 7: the space between step 1 and step 2 (2026-09-20) ───────────
   Card padding, the section's own margin and the header's top margin were
   stacking to ~75px. In the mock it is one 26px beat. */
body .header-wrapper > .card-body { padding-bottom: 4px !important; }
body .qg-more-btn { margin-top: 6px; }
body #qg-types-more { margin-top: 0 !important; margin-bottom: 0 !important; }
body #step2-container { margin-top: 10px !important; padding-top: 0 !important; }
body #step2-container .qg-step-header { margin-top: 0 !important; }

/* ── PART 8: rail icon colour (2026-09-20) ────────────────────────────────
   On the ink rail the light-on-dark accent is the highlighter (badges, quota
   meter), so the active icon takes it too; marker red stays on the paper side.
   Inactive icons in paper-white at 62% so they read without competing. */
body aside.navbar-vertical .nav-link-icon svg {
    stroke: rgba(246, 244, 238, 0.62) !important;
    color: rgba(246, 244, 238, 0.70) !important;
}
body aside.navbar-vertical .nav-link:hover .nav-link-icon svg {
    stroke: rgba(246, 244, 238, 0.95) !important;
    color: rgba(246, 244, 238, 0.95) !important;
}
body aside.navbar-vertical .nav-link.active .nav-link-icon svg {
    stroke: #F4E05A !important;
    color: #F4E05A !important;
}

/* the old Word/Image credits block is redundant next to the quota card on this page */
body aside.navbar-vertical li.qg-credits-item { display: none !important; }

/* ── rail: wordmark + app badges in the rail's own palette (paper on ink) ──
   The animation file main-white.json now carries the letters in paper #F6F4EE rather than pure white, so the
   wordmark sits on the ink like the nav text does. The store badges drop the periwinkle fill for a ghost
   outline; the Google Play mark keeps its own colours, the Apple mark takes the paper text colour. */
body aside.navbar-vertical .qb-app-badges p { color: rgba(246, 244, 238, 0.62) !important; font-family: "Instrument Sans", sans-serif !important; font-weight: 500 !important; letter-spacing: 0.01em; }
body aside.navbar-vertical .qb-store-badge {
    background-color: transparent !important;
    border: 1px solid rgba(246, 244, 238, 0.22) !important;
    color: #F6F4EE !important;
    border-radius: 9px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}
body aside.navbar-vertical .qb-store-badge:hover { transform: none !important; background-color: rgba(246, 244, 238, 0.08) !important; border-color: rgba(246, 244, 238, 0.45) !important; }
body aside.navbar-vertical .qb-store-badge span { color: #F6F4EE !important; font-family: "Instrument Sans", sans-serif !important; }












/* ═══════════════════════════════════════════════════════════════════════════
   PART 10 · SLATE RAIL (2026-09-20) — the rail colour locked in after trying ink, slate, pewter, stone,
   espresso, graphite, ash and navy on the real page. Ground #383F42, lifted surface #495154: about half the
   contrast of the original near-black against the paper page, so the sheet leads and the rail recedes.
   Text, labels and idle icons are lifted to hold their contrast; the highlighter mark and the paper-lettered
   logo are unchanged. This is the only rail-colour block in the file; delete it for the original ink rail.
   ═══════════════════════════════════════════════════════════════════════════ */
body aside.navbar-vertical { background: #383F42 !important; }
body aside.navbar-vertical span[style*="064789"] { color: rgba(246, 244, 238, 0.48) !important; }
body aside.navbar-vertical .nav-link { color: rgba(246, 244, 238, 0.76) !important; }
body aside.navbar-vertical .nav-link:hover { background-color: #495154 !important; }
body aside.navbar-vertical .nav-link.active { background: #495154 !important; }
body aside.navbar-vertical .nav-link-icon svg { stroke: rgba(246, 244, 238, 0.68) !important; color: rgba(246, 244, 238, 0.68) !important; }
body aside.navbar-vertical .nav-link .badge,
body aside.navbar-vertical .nav-link .sidebar-due-badge { background: rgba(246, 244, 238, 0.14) !important; }
body aside.navbar-vertical hr { border-color: rgba(246, 244, 238, 0.14) !important; }
body aside.navbar-vertical p,
body aside.navbar-vertical .text-muted,
body aside.navbar-vertical small { color: rgba(246, 244, 238, 0.56) !important; }
body aside.navbar-vertical .qg-quota { background: #495154; }
body aside.navbar-vertical .qg-quota-bar { background: rgba(246, 244, 238, 0.16); }
body aside.navbar-vertical .qg-quota-figure span { color: rgba(246, 244, 238, 0.5); }
body aside.navbar-vertical .qg-quota-note { color: rgba(246, 244, 238, 0.6) !important; }
body aside.navbar-vertical .qb-app-badges p { color: rgba(246, 244, 238, 0.66) !important; }
body aside.navbar-vertical .qb-store-badge { border-color: rgba(246, 244, 238, 0.28) !important; }

/* submenu items (Frontend / Finance / Settings groups): they were left at the stock near-black and
   disappeared into the slate ground. Same ladder as the top-level links, one step quieter. */
body aside.navbar-vertical .dropdown-menu { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body aside.navbar-vertical .dropdown-item {
    color: rgba(246, 244, 238, 0.70) !important;
    border-radius: 7px !important;
}
body aside.navbar-vertical .dropdown-item:hover,
body aside.navbar-vertical .dropdown-item:focus {
    background-color: #495154 !important;
    color: rgba(246, 244, 238, 0.95) !important;
}
body aside.navbar-vertical .dropdown-item.active,
body aside.navbar-vertical .dropdown-item.is-active {
    background-color: #495154 !important;
    color: #F6F4EE !important;
    box-shadow: inset 2px 0 0 #E2452F !important;
}

/* ═══ Top-bar dropdowns (avatar menu, language menu) — 2026-09-21 ═══
   Paper header band with the name + mono e-mail, hairline card with the offset shadow, ink items that fill paper
   on hover, the current page marked in red, Logout under its own rule. The old Word/Image credits block (progress
   bar + legend) duplicates the rail's quota card and is hidden - delete the two :has() rules to bring it back. */
body header .dropdown-menu {
    min-width: 240px;
    padding: 0 !important;
    border: 1px solid rgba(16, 28, 25, 0.15) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: 8px 8px 0 rgba(16, 28, 25, 0.08) !important;
    overflow: hidden;
    font-family: "Instrument Sans", sans-serif !important;
}
body header .dropdown-menu > .dropdown-item.disabled:first-child {
    display: block;
    padding: 14px 16px !important;
    background: #F6F4EE !important;
    border-bottom: 1px solid rgba(16, 28, 25, 0.13);
    opacity: 1 !important;
    color: #101C19 !important;
}
body header .dropdown-menu > .dropdown-item.disabled:first-child > div > div:first-child {
    font-size: 15px;
    font-weight: 600;
    color: #101C19;
}
body header .dropdown-menu > .dropdown-item.disabled:first-child .small.text-muted {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.02em;
    color: #5C6B65 !important;
    margin-top: 3px !important;
}
body header .dropdown-menu > .dropdown-item.disabled:has(.progress-separated),
body header .dropdown-menu > .dropdown-item.disabled:has(.progress-separated) + .dropdown-divider,
body header .dropdown-menu > .dropdown-item.disabled:first-child + .dropdown-divider { display: none !important; }
body header .dropdown-menu .dropdown-divider { margin: 0 !important; border-top: 1px solid rgba(16, 28, 25, 0.13) !important; opacity: 1; }
body header .dropdown-menu a.dropdown-item {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #101C19 !important;
    background: transparent !important;
    border-left: 3px solid transparent;
}
body header .dropdown-menu a.dropdown-item:hover,
body header .dropdown-menu a.dropdown-item:focus { background: #F6F4EE !important; color: #101C19 !important; }
body header .dropdown-menu a.dropdown-item.active { border-left-color: #E2452F; background: #FFFFFF !important; font-weight: 600 !important; }
body header .dropdown-menu a.dropdown-item[onclick*="logout"] { border-top: 1px solid rgba(16, 28, 25, 0.13); color: #B8301F !important; }
body header .dropdown-menu a.dropdown-item[onclick*="logout"]:hover { background: rgba(226, 69, 47, 0.06) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PART 11 · PHONE PASS + GAPS (2026-09-21)
   Findings of the 390 px sweep over every skinned member page, plus small desktop gaps found on the way.
   Page skins load AFTER this file, so every rule here is route-scoped and !important where a skin already
   sets the property.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Membership: the ApexCharts donut keeps its inline indigo colours; the billing toggle wrapped badly at 390 px */
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-series[seriesName="Remaining"] path { fill: #1C7A62 !important; }
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-series[seriesName="Used"] path { fill: rgba(16, 28, 25, 0.12) !important; }
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker { background: #1C7A62 !important; color: #1C7A62 !important; }
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-legend-series:nth-child(2) .apexcharts-legend-marker { background: rgba(16, 28, 25, 0.25) !important; color: rgba(16, 28, 25, 0.25) !important; }
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-legend-text { font-family: "IBM Plex Mono", ui-monospace, monospace !important; font-size: 11px !important; letter-spacing: 0.06em; text-transform: uppercase; color: #5C6B65 !important; }
@media (max-width: 767px) {
    body[data-md="dashboard.user.payment.subscription"] #monthlyBtn,
    body[data-md="dashboard.user.payment.subscription"] #yearlyBtn,
    body[data-md="dashboard.user.payment.subscription"] #prepaidBtn { padding-left: 14px !important; padding-right: 14px !important; font-size: 15px !important; white-space: nowrap; }
    body[data-md="dashboard.user.payment.subscription"] .col-12.mb-2 > .flex.justify-center { flex-wrap: wrap; gap: 8px; }
    body[data-md="dashboard.user.payment.subscription"] .col-12.mb-2 > .flex.justify-center > * { margin: 0 !important; }
}

/* Member home: the Usage figures stack on phones, drop the column rule that then hangs on the right */
@media (max-width: 767px) {
    body[data-md="dashboard.user.index"] .card [class*="border-e"] { border-right: 0 !important; border-inline-end: 0 !important; }
}

/* Tutor chat: both cards were pinned to calc(100vh - 85px), leaving a tall empty workspace above the chat on phones */
@media (max-width: 991px) {
    body[data-md="dashboard.user.tutor.notebook.open"] .container-xl[style*="100vh"],
    body[data-md="dashboard.user.tutor.notebook.open"] .row.g-3[style*="100vh"] { height: auto !important; }
    body[data-md="dashboard.user.tutor.notebook.open"] .col-lg-7 .tutor-main-card { height: auto !important; max-height: 48vh; }
    body[data-md="dashboard.user.tutor.notebook.open"] .col-lg-7 .tutor-main-card > .flex.flex-col.h-full { max-height: 48vh; }
    body[data-md="dashboard.user.tutor.notebook.open"] .col-lg-5 .tutor-main-card { height: 72vh !important; min-height: 460px; }
}

/* Daily review: the "Prepare Me: n of n sessions" banner was still the old blue tint */
body[data-md="dashboard.user.quiz-me.daily-review"] .review-container > div[style*="dbeafe"] {
    background: #FBF6D2 !important;
    border: 1px solid rgba(16, 28, 25, 0.12) !important;
    border-left: 4px solid #F4E05A !important;
    border-radius: 10px !important;
}
body[data-md="dashboard.user.quiz-me.daily-review"] .review-container > div[style*="dbeafe"] svg { stroke: #101C19 !important; }
body[data-md="dashboard.user.quiz-me.daily-review"] .review-container > div[style*="dbeafe"] .fw-bold.small { color: #101C19 !important; font-family: "Instrument Sans", sans-serif !important; font-weight: 600 !important; }
body[data-md="dashboard.user.quiz-me.daily-review"] .review-container > div[style*="dbeafe"] .fw-bold.small[style] { color: #101C19 !important; }

/* Saved-question editor: the Copy / Export / Mail / Delete row overflowed the card on phones */
@media (max-width: 767px) {
    body[data-md="dashboard.user.openai.documents.single"] .row.text-\[13px\].items-center > .col-12 { flex-wrap: wrap; gap: 6px; }
    body[data-md="dashboard.user.openai.documents.single"] .row.text-\[13px\].items-center .btn { margin: 0 !important; }
}

/* AI ReWriter: the 42 px selects clipped their text (Tabler's vertical padding on top of the fixed height) */
body[data-md="dashboard.user.openai.rewriter"] .rw-form-body .form-select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 40px !important;
}

/* Donut legends (home + membership): ApexCharts writes the marker colour inline with !important, so paint over it */
body[data-md="dashboard.user.index"] #chart-credit .apexcharts-legend-marker,
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-legend-marker { position: relative !important; overflow: hidden !important; }
body[data-md="dashboard.user.index"] #chart-credit .apexcharts-legend-marker::after,
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-legend-marker::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(16, 28, 25, 0.25); }
body[data-md="dashboard.user.index"] #chart-credit .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker::after,
body[data-md="dashboard.user.payment.subscription"] #chart-credit .apexcharts-legend-series:nth-child(1) .apexcharts-legend-marker::after { background: #1C7A62; }

/* generator list (2026-09-21): list-custom.css draws #f0f4ff top borders above the type chips and the source grid;
   invisible on paper, a bright line in dark mode (the second one runs through the "02" heading) - removed */
body[data-md="dashboard.user.openai.list"] .qg-types-row,
body[data-md="dashboard.user.openai.list"] .row.g-3 { border-top-color: transparent !important; }

/* token donut (home + membership, 2026-09-21): ApexCharts parks its Remaining/Used legend inside the arc, where it
   runs into the figure on narrow cards. The green arc + figure say it already, so the legend is hidden. */
body #chart-credit .apexcharts-legend { display: none !important; }
body #chart-credit .apexcharts-series[seriesName="Remaining"] path { fill: #1C7A62 !important; }
body #chart-credit .apexcharts-series[seriesName="Used"] path { fill: rgba(16, 28, 25, 0.12) !important; }

/* ── Ordering / Categorization panel (2026-09-21): same marking-desk treatment as the workbook form ───────────── */
body #iq-panel .qg-step-badge::after { content: "02"; }
body #iq-type-label { color: #E2452F !important; }
body #iq-back {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #5C6B65 !important;
    padding: 0 !important;
    margin: 2px 0 14px !important;
    box-shadow: none !important;
}
body #iq-back:hover, body #iq-back:focus-visible { color: #101C19 !important; }
body #iq-form > .card {
    border: 1px solid rgba(16, 28, 25, 0.13) !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}
body #iq-form > .card > .card-body { padding: 22px 22px 20px !important; }
body #iq-form-title {
    font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #101C19 !important;
    margin: 0 0 18px !important;
}
body #iq-form .form-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #5C6B65 !important;
}
body #iq-form .form-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(16, 28, 25, 0.13);
    margin-left: 4px;
}
body #iq-form .form-control,
body #iq-form .form-select {
    min-height: 44px;
    border: 1px solid rgba(16, 28, 25, 0.18) !important;
    border-radius: 9px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 14px !important;
    color: #101C19 !important;
}
body #iq-form textarea.form-control { min-height: 150px; line-height: 1.5; }
body #iq-form .form-control:focus,
body #iq-form .form-select:focus { border-color: #101C19 !important; box-shadow: none !important; }
body #iq-form input[type="file"].form-control { padding: 0 !important; overflow: hidden; line-height: 42px; }
body #iq-form input[type="file"]::file-selector-button {
    height: 42px;
    margin: 0 12px 0 0;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid rgba(16, 28, 25, 0.13);
    background: #F6F4EE;
    color: #101C19;
    font-family: "Instrument Sans", sans-serif;
    font-weight: 600;
    cursor: pointer;
}
body #iq-form small.text-muted {
    display: block;
    margin-top: 6px;
    font-size: 12.5px !important;
    color: #5C6B65 !important;
}
body #iq-generate,
body #iq-generate.btn-primary {
    height: 46px !important;
    min-width: 220px;
    padding: 0 26px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #101C19 !important;
    background-image: none !important;
    color: #F6F4EE !important;
    font-family: "Instrument Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 3px 3px 0 #E2452F !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body #iq-generate:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #E2452F !important; }
body #iq-generate:disabled { opacity: 0.6; }
body #iq-status { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: #5C6B65 !important; }
@media (max-width: 575px) {
    body #iq-form > .card > .card-body { padding: 16px !important; }
    body #iq-generate { width: 100%; }
}

/* ── generation loader on the generator list page too (Ordering / Categorization, 2026-09-21): same block as the workbook skin ── */
body #qbGenLoadingModal { background: rgba(16, 28, 25, 0.35) !important; }
body #qbGenLoadingModal .qbgen-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(16, 28, 25, 0.15) !important;
    border-radius: 14px !important;
    box-shadow: 10px 10px 0 rgba(16, 28, 25, 0.08) !important;
    padding: 34px 32px 30px !important;
    font-family: "Instrument Sans", sans-serif !important;
}
body #qbGenLoadingModal .qbgen-ring-o {
    border-top-color: #E2452F !important;
    border-right-color: rgba(226, 69, 47, 0.35) !important;
}
body #qbGenLoadingModal .qbgen-ring-i {
    border-top-color: #101C19 !important;
    border-left-color: rgba(16, 28, 25, 0.25) !important;
}
body #qbGenLoadingModal .qbgen-emoji {
    background: #F6F4EE !important;
    box-shadow: none !important;
}
body #qbGenLoadingModal .qbgen-title {
    font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #101C19 !important;
}
body #qbGenLoadingModal .qbgen-sub {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #5C6B65 !important;
    margin-bottom: 16px !important;
}
body #qbGenLoadingModal .qbgen-track {
    height: 5px !important;
    background: rgba(16, 28, 25, 0.12) !important;
    border-radius: 999px !important;
}
body #qbGenLoadingModal .qbgen-fill {
    background: #E2452F !important;
    background-image: none !important;
    border-radius: 999px !important;
}


/* ── "Share This Quiz" modal (results + quiz history pages, 2026-09-21): the marking-desk treatment.
   Markup and behaviour stay as the views define them (#shareModal); the inline purple heading and the blue button are overridden. */
body #shareModal .modal-content {
    border: 1px solid rgba(16, 28, 25, 0.15) !important;
    border-radius: 14px !important;
    background: #FFFFFF !important;
    box-shadow: 10px 10px 0 rgba(16, 28, 25, 0.08) !important;
    font-family: "Instrument Sans", sans-serif !important;
}
body #shareModal .modal-header { padding: 22px 24px 4px !important; }
body #shareModal .modal-title {
    display: flex; align-items: center; gap: 10px;
    font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif !important;
    font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em !important;
    color: #101C19 !important;
}
body #shareModal .modal-title svg { width: 20px; height: 20px; stroke: #E2452F !important; margin-right: 0 !important; }
body #shareModal .btn-close { opacity: 0.6; }
body #shareModal .btn-close:focus-visible { outline: 2px solid #E2452F; outline-offset: 2px; box-shadow: none; }
body #shareModal .modal-body { padding: 8px 24px 24px !important; }
body #shareModal .modal-body > p.text-muted {
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 11px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important;
    color: #5C6B65 !important; margin-bottom: 14px !important; line-height: 1.6;
}
body #shareModal .input-group { gap: 8px; }
body #shareModal #shareUrlInput,
body #shareModal #shareUrlInput.form-control {
    height: 44px;
    border: 1px solid rgba(16, 28, 25, 0.18) !important;
    border-radius: 9px !important;
    background: #F6F4EE !important;
    box-shadow: none !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace !important;
    font-size: 13px !important;
    color: #101C19 !important;
}
body #shareModal #copyShareBtn,
body #shareModal #copyShareBtn.btn-primary {
    height: 44px; padding: 0 20px;
    border: 0 !important;
    border-radius: 9px !important;
    background: #101C19 !important; background-image: none !important;
    color: #F6F4EE !important;
    font-family: "Instrument Sans", sans-serif !important; font-size: 14px !important; font-weight: 600 !important;
    box-shadow: 3px 3px 0 #E2452F !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body #shareModal #copyShareBtn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #E2452F !important; }
body #shareModal #copySuccess { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; color: #1C7A62 !important; }
body #shareModal ~ .modal-backdrop, body .modal-backdrop.show { background: #101C19; }

/* ── rail edge (2026-09-21, user picked I): a marker-red rule down the seam, like a binder spine. Desktop only. ── */
@media (min-width: 992px) {
    body aside.navbar-vertical { border-right: 2px solid #E2452F !important; }
}

/* ── rail edge (2026-09-21, user): a spiral notebook binding down the seam instead of the red rule. One metal ring every 24px,
   each hooked through a hole on the dark rail and one on the paper. Drawn on body::before (the rail clips its own overflow),
   fixed to the seam: rail 250px open, 80px collapsed. Desktop only. ── */
@media (min-width: 992px) {
    body aside.navbar-vertical { border-right: 0 !important; }
    body::before {
        content: ""; position: fixed; top: 0; bottom: 0; left: 238px; width: 24px; z-index: 40; pointer-events: none;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNCIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAtNSAzNCAzNCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJtIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjRkJGQkZBIi8+PHN0b3Agb2Zmc2V0PSIuMzUiIHN0b3AtY29sb3I9IiNDOUNEQ0YiLz48c3RvcCBvZmZzZXQ9Ii42IiBzdG9wLWNvbG9yPSIjOEU5NDk3Ii8+PHN0b3Agb2Zmc2V0PSIuODUiIHN0b3AtY29sb3I9IiNFNEU2RTciLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2RTc0NzciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48Y2lyY2xlIGN4PSI3IiBjeT0iMTIiIHI9IjIuNiIgZmlsbD0iIzFFMjQyNiIvPjxjaXJjbGUgY3g9IjI3IiBjeT0iMTIiIHI9IjIuNiIgZmlsbD0iI0I5QjVBQSIvPjxjaXJjbGUgY3g9IjI3IiBjeT0iMTIuNiIgcj0iMiIgZmlsbD0iIzVGNUI1MyIvPjxnIHRyYW5zZm9ybT0icm90YXRlKC0xNCAxNyAxMikiPjxyZWN0IHg9IjQuNSIgeT0iOSIgd2lkdGg9IjI1IiBoZWlnaHQ9IjYuMiIgcng9IjMuMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDAsMCwwLC4yOCkiIHN0cm9rZS13aWR0aD0iMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC44IDEuMykiLz48cmVjdCB4PSI0LjUiIHk9IjkiIHdpZHRoPSIyNSIgaGVpZ2h0PSI2LjIiIHJ4PSIzLjEiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNtKSIgc3Ryb2tlLXdpZHRoPSIyLjQiLz48L2c+PC9zdmc+Cg==") center top / 24px 24px repeat-y;
    }
    body.navbar-shrinked::before { left: 68px; }
}