/* ==========================================================================
   MikroISP Voucher Exporter - design system

   Tokens mirror the main MikroISP system: dark is the default, and light is
   opted into with html[data-theme="light"], persisted under the same
   localStorage key (mikroisp_theme). The portal is a separate origin, so the
   stored value is its own - the shared key keeps the convention, not state.

   Flat surfaces only - colour comes from fills, borders and spacing, never
   from a gradient.
   ========================================================================== */

:root {
    /* ── Dark (default) ─────────────────────────────────────────── */
    --bg:          #0f0f12;
    --surface:     #181b1f;
    --surface-2:   #1f2329;
    --surface-3:   #272c33;
    --border:      rgba(255, 255, 255, .09);
    --border-2:    rgba(255, 255, 255, .17);

    --text:        #fcfdfd;
    --text-2:      #a9b3c4;
    --text-3:      #8892b0;

    --brand:       #009345;
    --brand-2:     #00ac51;
    --brand-soft:  rgba(0, 147, 69, .16);
    --on-brand:    #ffffff;

    --success:      #34c46a;
    --success-soft: rgba(52, 196, 106, .15);
    --warn:         #f59e0b;
    --warn-soft:    rgba(245, 158, 11, .15);
    --danger:       #ef5350;
    --danger-soft:  rgba(239, 83, 80, .15);
    --info:         #42a5f5;
    --info-soft:    rgba(66, 165, 245, .15);
    --accent:       #fd7a2a;
    --accent-soft:  rgba(253, 122, 42, .15);

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .35);
    --shadow:      0 4px 14px rgba(0, 0, 0, .4);
    --shadow-lg:   0 18px 44px rgba(0, 0, 0, .55);

    --radius:      12px;
    --radius-sm:   8px;
    --radius-lg:   16px;

    --font: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

    --nav-h: 62px;

    color-scheme: dark;
}

html[data-theme="light"] {
    --bg:          #f0f2f5;
    --surface:     #ffffff;
    --surface-2:   #eef1f5;
    --surface-3:   #e2e6ec;
    --border:      rgba(0, 0, 0, .10);
    --border-2:    rgba(0, 0, 0, .18);

    --text:        #111827;
    --text-2:      #4b5563;
    --text-3:      #6b7280;

    --brand:       #009345;
    --brand-2:     #007a39;
    --brand-soft:  rgba(0, 147, 69, .10);
    --on-brand:    #ffffff;

    --success:      #2e7d32;
    --success-soft: rgba(46, 125, 50, .10);
    --warn:         #b45309;
    --warn-soft:    rgba(180, 83, 9, .11);
    --danger:       #c62828;
    --danger-soft:  rgba(198, 40, 40, .10);
    --info:         #0277bd;
    --info-soft:    rgba(2, 119, 189, .10);
    --accent:       #d2610f;
    --accent-soft:  rgba(210, 97, 15, .11);

    --shadow-sm:   0 1px 2px rgba(16, 24, 40, .05);
    --shadow:      0 4px 14px rgba(16, 24, 40, .08);
    --shadow-lg:   0 18px 44px rgba(16, 24, 40, .14);

    color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Column layout keeps the footer at the bottom of short pages without the
   main element having to guess the footer's height. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
a  { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

code, kbd, .mono { font-family: var(--mono); font-size: .9em; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--brand); color: var(--on-brand);
    padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── Icons ────────────────────────────────────────────────────────
   Every icon is an inline SVG in currentColor, so it inherits the colour
   of whatever it sits in and needs no per-theme handling. */

.vep-i { flex: none; display: block; }
.vep-i-fill { fill: currentColor; stroke: none; }

/* ── Layout ───────────────────────────────────────────────────────── */

.wrap      { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.wrap-slim { width: 100%; max-width: 880px;  margin: 0 auto; padding: 0 20px; }

.main { flex: 1 0 auto; }

/* Vertical padding only: these are also combined with .wrap on one element
   ("wrap section-tight"), and a padding shorthand here wiped the .wrap side
   gutter - content ran to the screen edge on phones. */
.section { padding-top: 68px; padding-bottom: 68px; }
.section-tight { padding-top: 36px; padding-bottom: 48px; }
@media (max-width: 640px) {
    .section { padding-top: 44px; padding-bottom: 44px; }
    .section-tight { padding-top: 26px; padding-bottom: 36px; }
}

.stack   { display: flex; flex-direction: column; gap: 18px; }
.row     { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-end { display: flex; gap: 12px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.spread  { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }

/* A header row: title block on the left, actions on the right. Below the
   breakpoint the actions drop to their own full-width line rather than
   half-hanging off the title's baseline. */
.spread > * { min-width: 0; }
@media (max-width: 560px) {
    .row-end { flex-direction: column-reverse; align-items: stretch; }
    .row-end > .btn { width: 100%; }
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ── Navigation ───────────────────────────────────────────────────── */

.nav {
    position: sticky; top: 0; z-index: 60;
    height: var(--nav-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
/* Three groups across the bar: brand hard left, page tabs centred, account
   actions hard right. A grid rather than flex so the tabs sit on the true
   centre of the bar instead of wherever the two ends happen to leave them.

   The bar is allowed to run wider than the 1180px page measure. Brand, six
   tabs and the account controls come to roughly 1180px on their own, so held
   to the content width they would collide - and a navigation bar spanning
   more than the prose beneath it is normal anyway. */
.nav-inner {
    height: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

/* The wrapper exists for the mobile drop-down; on a wide screen it steps out
   of the way so its two groups become grid items of the bar itself. */
.nav-menu { display: contents; }

.nav-tabs    { display: flex; align-items: center; gap: 4px; justify-self: center; }
.nav-actions { display: flex; align-items: center; gap: 8px; justify-self: end; }

.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800; color: var(--text); letter-spacing: -.02em;
    justify-self: start; white-space: nowrap;
}
.brand:hover { text-decoration: none; }

/* The logo artwork is dark-on-white, so it always sits on its own light
   tile - that reads correctly in either theme. */
.brand-mark {
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    background: #fff; border: 1px solid var(--border);
    object-fit: contain; padding: 2px;
}
.brand-text { font-size: 1rem; line-height: 1.2; white-space: nowrap; }
.brand-text span { color: var(--brand); }

.nav-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: var(--radius-sm);
    color: var(--text-2); font-weight: 500; font-size: .92rem;
    white-space: nowrap;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { color: var(--brand); background: var(--brand-soft); font-weight: 600; }

/* The account chip is an avatar, not a word - it needs square padding so it
   lines up on the same optical centre as the text links beside it. */
.nav-link.nav-avatar { padding: 5px; }

/* Icon-only controls in the bar: identical box to .nav-link, square. */
.nav-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: none;
    background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-2); cursor: pointer; padding: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.nav-icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
.nav-icon-btn.active { color: var(--brand); background: var(--brand-soft); border-color: transparent; }

/* The sign-out form must not introduce a layout box of its own, or the button
   inside it cannot stretch with the rest of the menu on mobile. */
.nav-form { display: contents; }

/* Both glyphs ship in the markup; the theme decides which one shows, so the
   switch never depends on JavaScript having replaced anything. */
.theme-toggle > span { display: none; line-height: 0; }
.theme-toggle .theme-toggle-light { display: block; }
html[data-theme="light"] .theme-toggle .theme-toggle-light { display: none; }
html[data-theme="light"] .theme-toggle .theme-toggle-dark  { display: block; }

.nav-toggle { display: none; }

/* Below the breakpoint the two groups collapse into one drop-down, so the
   wrapper has to become a real box again. */
@media (max-width: 1080px) {
    .nav-inner { display: flex; }
    .brand { margin-right: auto; }

    .nav-toggle { display: inline-flex; }

    .nav-menu {
        position: absolute; top: var(--nav-h); left: 0; right: 0;
        display: none; flex-direction: column; align-items: stretch; gap: 10px;
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: 12px 20px 16px; box-shadow: var(--shadow);
        max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    }
    .nav-menu.open { display: flex; }

    .nav-tabs, .nav-actions {
        flex-direction: column; align-items: stretch; gap: 2px;
        justify-self: stretch;
    }
    .nav-actions {
        padding-top: 10px; border-top: 1px solid var(--border);
    }

    .nav-link { justify-content: flex-start; }
    .nav-link.nav-avatar { padding: 5px 8px; }
    .nav-menu .btn { width: 100%; justify-content: center; }
    .nav-icon-btn { width: 100%; height: 40px; gap: 8px; justify-content: flex-start; padding: 0 13px; }
    .nav-icon-btn::after { content: attr(data-label); font-size: .92rem; font-weight: 500; }
    .nav-toggle { width: 36px; height: 36px; justify-content: center; padding: 0; }
    .nav-toggle::after { content: none; }
}

/* Between the drop-down breakpoint and a comfortable desktop there is room
   for the tabs or the wordmark, not both. The logo keeps the brand present
   while the tabs - the part being used - stay legible. */
@media (min-width: 1081px) and (max-width: 1300px) {
    .brand-text { display: none; }
    .nav-link { padding: 8px 10px; gap: 6px; }
    .nav-tabs { gap: 2px; }
}

@media (max-width: 420px) {
    .brand-text { font-size: .9rem; white-space: normal; }
}

/* ── Avatar / account chip ────────────────────────────────────────── */

.avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    object-fit: cover; background: var(--brand-soft); color: var(--brand);
    display: grid; place-items: center; font-weight: 700; font-size: .8rem;
    border: 1px solid var(--border); line-height: 1;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.2rem; }

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--radius-sm);
    font-family: inherit; font-size: .93rem; font-weight: 600; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .06s, opacity .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .vep-i { margin-block: -2px; }

.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-2); }

.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn-quiet { background: transparent; color: var(--text-2); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn-lg { padding: 13px 26px; font-size: 1rem; }
.btn-sm { padding: 6px 12px; font-size: .84rem; }
.btn-block { display: flex; width: 100%; }

.btn-google {
    background: var(--surface); color: var(--text); border-color: var(--border-2);
    font-weight: 600;
}
.btn-google:hover:not(:disabled) { background: var(--surface-2); }
.btn-google svg { width: 18px; height: 18px; flex: none; }

/* ── Cards & panels ───────────────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-pad { padding: 22px; }
.card-head {
    padding: 16px 22px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.card-head > :first-child { min-width: 0; }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.02rem; }
.card-body { padding: 22px; }
.card-foot {
    padding: 14px 22px; border-top: 1px solid var(--border);
    background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius);
}

.panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }

/* Icon tile used on feature / shortcut cards. */
.ico-tile {
    width: 42px; height: 42px; border-radius: 11px; flex: none;
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
}
.ico-tile-lg { width: 54px; height: 54px; border-radius: 14px; }

/* ── Forms ────────────────────────────────────────────────────────── */

.field { margin-bottom: 16px; }
.label {
    display: block; margin-bottom: 6px;
    font-size: .86rem; font-weight: 600; color: var(--text-2);
}
.hint  { margin: 6px 0 0; font-size: .82rem; color: var(--text-3); line-height: 1.5; }

.input, .select, .textarea {
    width: 100%; padding: 10px 13px;
    font-family: inherit; font-size: .95rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--text-3); cursor: not-allowed; }
.input.error, .select.error { border-color: var(--danger); }
.textarea { resize: vertical; min-height: 84px; }

/* The chevron is drawn per theme rather than left at one hard-coded grey,
   which would otherwise disappear against the dark field. */
.select {
    appearance: none;
    padding-right: 34px;
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 13px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892b0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-theme="light"] .select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Input + adjoining button: the two borders overlap into one hairline, and
   the focused field lifts above its neighbour so its ring is not clipped. */
.input-group { display: flex; align-items: stretch; }
.input-group .input {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    position: relative; z-index: 1;
}
.input-group .input:focus { z-index: 2; }
.input-group .btn {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-left: -1px; flex: none;
}

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .92rem; }
.check input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--brand); flex: none; cursor: pointer; }
.check > span { min-width: 0; }
.check-center { align-items: center; }
.check-center input { margin-top: 0; }

/* A labelled toggle row: text block left, control right, both vertically
   centred on the row regardless of how many lines the text runs to. */
.switch-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.switch-row:last-child { border-bottom: 0; }
.switch-row > label { cursor: pointer; min-width: 0; }
.switch-row .sr-label { display: block; font-weight: 600; font-size: .92rem; color: var(--text); }
.switch-row .sr-help  { display: block; font-size: .8rem; color: var(--text-3); line-height: 1.45; }
.switch-row input[type="checkbox"] {
    width: 18px; height: 18px; flex: none; margin: 0;
    accent-color: var(--brand); cursor: pointer;
}

.divider-text {
    display: flex; align-items: center; gap: 14px;
    color: var(--text-3); font-size: .82rem; margin: 20px 0;
}
.divider-text::before, .divider-text::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ── Alerts ───────────────────────────────────────────────────────── */

.alert {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 15px; border-radius: var(--radius-sm);
    font-size: .9rem; line-height: 1.55; margin-bottom: 16px;
    border: 1px solid transparent; text-align: left;
}
/* The icon is a fixed 18px box nudged onto the first line's optical centre,
   so single- and multi-line alerts both align. */
.alert-icon { flex: none; display: flex; align-items: center; height: 1.55em; }
.alert > span:last-child { min-width: 0; }
.alert-error   { background: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.alert-success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 32%, transparent); }
.alert-warn    { background: var(--warn-soft);    color: var(--warn);    border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.alert-info    { background: var(--info-soft);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* ── Badges & pills ───────────────────────────────────────────────── */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35;
    background: var(--surface-3); color: var(--text-2);
    white-space: nowrap; vertical-align: middle;
}
.badge-brand   { background: var(--brand-soft);   color: var(--brand); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warn    { background: var(--warn-soft);    color: var(--warn); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }

/* ── Tables ───────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A scroller sits flush to the card edge, so the card has to do the clipping
   or wide rows run straight past its rounded corners. */
.table-card { overflow: hidden; }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th {
    font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-3); background: var(--surface-2); white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Action cells hold buttons, not numbers - right-aligned but laid out as a
   row so multiple buttons keep an even gap instead of collapsing onto
   whitespace. */
.table .actions { text-align: right; white-space: nowrap; }
.table .actions > * { vertical-align: middle; }
.table .actions .btn + .btn { margin-left: 6px; }

/* ── Progress ─────────────────────────────────────────────────────── */

.meter { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .3s ease; }
.meter-fill.warn   { background: var(--warn); }
.meter-fill.danger { background: var(--danger); }

.progress-big { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress-big > div {
    height: 100%; border-radius: 999px; width: 0;
    background: var(--brand);
    transition: width .2s ease;
}

/* ── Steps ────────────────────────────────────────────────────────── */

/* The strip scrolls rather than wraps or shrinks. Wrapping strands the
   connector lines mid-row, and shrinking clips the labels - scrolling keeps
   every step readable at any width. */
.steps {
    display: flex; align-items: center; gap: 0; margin-bottom: 26px;
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 2px; scrollbar-width: none;
}
.steps::-webkit-scrollbar { display: none; }
.step { display: flex; align-items: center; gap: 9px; flex: none;
    color: var(--text-3); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.step-num {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: .8rem; line-height: 1;
    background: var(--surface-3); color: var(--text-3);
}
.step.active { color: var(--text); }
.step.active .step-num { background: var(--brand); color: var(--on-brand); }
.step.done .step-num { background: var(--success); color: #fff; }
.step.done { color: var(--text-2); }
.step-line { flex: 1 1 40px; height: 2px; background: var(--border); margin: 0 12px; min-width: 18px; }

@media (max-width: 760px) {
    .steps { margin-bottom: 20px; }
    /* Shorter connectors so more of the labels fit before scrolling starts. */
    .step-line { margin: 0 8px; flex: 0 0 18px; }
}

/* ── Empty state ──────────────────────────────────────────────────── */

.empty { text-align: center; padding: 52px 20px; color: var(--text-2); }
.empty-icon {
    width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--text-3);
    border: 1px solid var(--border);
}
.empty h3 { color: var(--text); }
.empty p { margin-bottom: 0; }
.empty .btn { margin-top: 16px; }

/* ── Generation overlay ───────────────────────────────────────────── */
/* Shown while a PDF is being built or rebuilt - the only feedback during a
   run that can take minutes on a long document. */

.gen-overlay { position: fixed; inset: 0; z-index: 150; display: none;
    background: rgba(8, 12, 22, .72); backdrop-filter: blur(3px); place-items: center; padding: 20px; }
.gen-overlay.on { display: grid; }
.gen-card { background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 30px;
    width: 100%; max-width: 430px; box-shadow: var(--shadow-lg); text-align: center; }
.gen-pct { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ── Modal ────────────────────────────────────────────────────────── */

.modal { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 22, .66); backdrop-filter: blur(3px); }

/* Column layout so the head and foot stay put and only the body scrolls -
   the editor is taller than a phone screen. */
.modal-card {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    width: 100%; max-width: 520px; max-height: calc(100vh - 40px);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    animation: modal-in .18s ease;
}
.modal-lg { max-width: 720px; }
.modal-xl { max-width: min(1400px, calc(100vw - 40px)); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border); flex: none;
}
.modal-head h2 { margin: 0; font-size: 1.05rem; }

.modal-x {
    display: grid; place-items: center; width: 32px; height: 32px; flex: none;
    background: none; border: 0; border-radius: var(--radius-sm);
    color: var(--text-3); cursor: pointer; padding: 0;
}
.modal-x:hover { background: var(--surface-2); color: var(--text); }

.modal-body { padding: 20px; overflow-y: auto; flex: 1 1 auto; }

.modal-foot {
    display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 14px 20px; border-top: 1px solid var(--border);
    background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex: none;
}
@media (max-width: 520px) {
    .modal-foot { flex-direction: column-reverse; }
    .modal-foot .btn { width: 100%; }
}

.modal-section {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-3); margin: 22px 0 10px; padding-top: 16px;
    border-top: 1px solid var(--border);
}
.modal-body > .modal-section:first-of-type { margin-top: 18px; }

body.modal-open { overflow: hidden; }

/* ── Toasts ───────────────────────────────────────────────────────── */

.toast-host {
    position: fixed; right: 18px; bottom: 18px; z-index: 200;
    display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px));
}
.toast {
    padding: 12px 16px; border-radius: var(--radius-sm);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); font-size: .9rem; color: var(--text);
    animation: toast-in .22s ease;
}
.toast.error   { border-left: 4px solid var(--danger); }
.toast.success { border-left: 4px solid var(--success); }
.toast.info    { border-left: 4px solid var(--info); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Footer ───────────────────────────────────────────────────────── */

.footer {
    flex: none;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 40px 0 28px;
    margin-top: 60px;
}
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-brand p { margin-top: 12px; }
@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* The brand blurb is wider than a half column; give it the full row so the
       two link lists still sit side by side beneath it. */
    .footer-brand { grid-column: 1 / -1; }
}
.footer h4, .footer .footer-heading { font-size: .8rem; line-height: 1.4; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 12px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--text-2); font-size: .9rem; }
.footer-links a:hover { color: var(--brand); }
.footer-bottom {
    margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    font-size: .84rem; color: var(--text-3);
}

/* ── Utilities ────────────────────────────────────────────────────── */

.muted    { color: var(--text-2); }
.dim      { color: var(--text-3); }
.small    { font-size: .85rem; }
.tiny     { font-size: .78rem; }
.strong   { font-weight: 700; }
.center   { text-align: center; }
.nowrap   { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tabnum   { font-variant-numeric: tabular-nums; }
.hidden   { display: none !important; }

.mt-0 { margin-top: 0; }    .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 8px; }  .mb-1 { margin-bottom: 8px; }
.mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; }
.mt-3 { margin-top: 26px; } .mb-3 { margin-bottom: 26px; }
.mt-4 { margin-top: 40px; } .mb-4 { margin-bottom: 40px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.crumbs ol { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0;
    font-size: .84rem; color: var(--text-3); }
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--border-2); }
.crumbs a { color: var(--text-2); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Design thumbnails in two-across phone grids: the 4:3 crop cut most of a
   1350×750 voucher away, so show the whole card at its own shape. */
@media (max-width: 520px) {
    .th-grid .th-shot, .theme-grid .theme-shot { height: auto; aspect-ratio: 9 / 5; object-fit: contain; object-position: center; }
}