/* ==========================================================================
   Cloud URL Shortner — interface stylesheet
   ==========================================================================

   ONE hand-written sheet. No Tailwind, no SCSS, no build step, no CDN. The
   Angular build's six stylesheets, its icon webfont, jQuery, Swiper, Slick and
   ApexCharts are all gone; nothing here needs a library.

   ── THE LOOK ────────────────────────────────────────────────────────────────
   Glassmorphism over a coloured aurora. Three things have to be true at once
   for glass to read as glass rather than as grey mud:

     1. Something COLOURFUL has to sit behind it. That is the `body::before`
        aurora — four large radial gradients in the brand hues. Without a
        colourful backdrop, a blurred translucent panel is just a grey box.
     2. The panel needs a LIGHT EDGE, not a border. Real frosted glass catches
        light along its top edge, so every .glass gets an inset highlight in
        addition to its hairline border.
     3. It needs DEPTH BELOW. A large, soft, low-opacity shadow lifts the panel
        off the aurora; without it the blur looks like a smudge on the page.

   Colour is carried by gradients (--grad-brand and friends) rather than by
   flat fills, so buttons, icon chips, chart bars, the logo mark and heading
   accents all read as one family.

   ── PERFORMANCE ─────────────────────────────────────────────────────────────
   The aurora is plain radial-gradients on one fixed pseudo-element — no
   filter: blur() on a full-screen layer, which is what makes most glass
   designs scroll badly. backdrop-filter is used only on panels, and there is
   an @supports fallback to opaque surfaces for browsers without it.

   Layout order:
     1. Tokens          7. Cards, glass, tables, pills, alerts
     2. Reset and base  8. Header, footer, page head
     3. Typography      9. Home page
     4. Layout          10. Admin shell
     5. Buttons         11. Utilities
     6. Forms
   ========================================================================== */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /*
     * AURORA TEAL.
     *
     * Deliberately nowhere near the blue of the system this replaced, and
     * nowhere near the indigo/violet every other SaaS front page is wearing.
     * One family — teal, cyan, aqua, lime — so the whole interface reads as one
     * material rather than as a set of unrelated accent colours.
     *
     * The four --grad-* names are SLOTS, not descriptions: they exist so a card
     * can ask for "a different ramp from its neighbour" without knowing which.
     * `warm` is the lime end of this family, which is as warm as it gets here.
     *
     * Light mode uses the darker stops of each hue. The bright teals below are
     * beautiful on ink and illegible as white-on-colour, so they only appear in
     * the dark palette.
     */
    --brand-1: #0d9488; /* teal      */
    --brand-2: #0891b2; /* cyan      */
    --brand-3: #65a30d; /* lime      */
    --brand-4: #0f766e; /* deep teal */
    --brand-5: #0e7490; /* deep cyan */
    --brand-6: #4d7c0f; /* deep lime */

    --grad-brand: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-5) 100%);
    /* Token-driven throughout, so redefining --brand-* in dark re-tunes every
       gradient without a second set of gradient declarations. */
    --grad-cool: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-4) 100%);
    --grad-warm: linear-gradient(135deg, var(--brand-6) 0%, var(--brand-3) 100%);
    --grad-mint: linear-gradient(135deg, var(--brand-4) 0%, var(--brand-3) 100%);

    --bg: #eef5f5;
    --text: #071a1f;
    --text-2: #2f4650;
    --muted: #5b757e;

    /* Glass. `surface` is the panel fill, `edge` the hairline, `sheen` the
       light caught along the top edge. */
    --glass: rgba(255, 255, 255, 0.62);
    --glass-strong: rgba(255, 255, 255, 0.8);
    --glass-soft: rgba(255, 255, 255, 0.4);
    --edge: rgba(255, 255, 255, 0.75);
    --edge-2: rgba(7, 26, 31, 0.09);
    --sheen: rgba(255, 255, 255, 0.85);
    --blur: saturate(180%) blur(20px);

    /* Opaque equivalents, for the @supports fallback and for form controls
       that must stay readable over any backdrop. */
    --solid: #ffffff;
    --solid-2: #e8f1f2;
    --solid-3: #dbe8ea;

    --accent: #0d9488;
    --accent-hover: #0f766e;
    --accent-ink: #ffffff;
    --accent-soft: rgba(13, 148, 136, 0.11);

    /*
     * Success is LIME, not green. In a teal palette a green "active" pill sits
     * a few degrees from the accent and stops reading as a status at all.
     */
    --ok: #4d7c0f;
    --ok-soft: rgba(101, 163, 13, 0.14);
    --bad: #be123c;
    --bad-soft: rgba(190, 18, 60, 0.1);

    --ring: rgba(13, 148, 136, 0.32);

    --shadow-sm: 0 2px 8px -2px rgba(7, 26, 31, 0.1);
    --shadow: 0 10px 30px -12px rgba(7, 26, 31, 0.2);
    --shadow-lg: 0 30px 70px -30px rgba(7, 26, 31, 0.38);
    --glow: 0 12px 32px -10px rgba(13, 148, 136, 0.45);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --container: 1180px;
    --header-h: 68px;
    --sidebar-w: 252px;

    --font: ui-sans-serif, -apple-system, "Segoe UI Variable Display", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SF Mono",
        Consolas, "Liberation Mono", monospace;

    /* Aurora stops, redefined in dark so the backdrop deepens rather than
       simply dimming. */
    --aurora-1: rgba(20, 184, 166, 0.42);
    --aurora-2: rgba(34, 211, 238, 0.36);
    --aurora-3: rgba(163, 230, 53, 0.28);
    --aurora-4: rgba(45, 212, 191, 0.32);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        /* The bright end of the family. These are the teals the palette was
           chosen for; on ink they glow, on white they would be unreadable. */
        --brand-1: #14b8a6;
        --brand-2: #22d3ee;
        --brand-3: #a3e635;
        --brand-4: #2dd4bf;
        --brand-5: #06b6d4;
        --brand-6: #84cc16;

        --bg: #04080a;
        --text: #e6f4f3;
        --text-2: #b3cbcb;
        --muted: #7d989e;

        --glass: rgba(9, 22, 26, 0.56);
        --glass-strong: rgba(12, 27, 32, 0.78);
        --glass-soft: rgba(9, 22, 26, 0.34);
        --edge: rgba(148, 233, 224, 0.13);
        --edge-2: rgba(148, 233, 224, 0.09);
        --sheen: rgba(190, 245, 238, 0.15);

        --solid: #0b1a1e;
        --solid-2: #10242a;
        --solid-3: #163038;

        --accent: #2dd4bf;
        --accent-hover: #5eead4;
        --accent-ink: #032420;
        --accent-soft: rgba(45, 212, 191, 0.16);

        --ok: #a3e635;
        --ok-soft: rgba(163, 230, 53, 0.15);
        --bad: #fb7185;
        --bad-soft: rgba(251, 113, 133, 0.14);

        --ring: rgba(45, 212, 191, 0.42);

        --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.65);
        --shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.85);
        --shadow-lg: 0 34px 80px -34px rgba(0, 0, 0, 0.95);
        --glow: 0 14px 38px -12px rgba(20, 184, 166, 0.5);

        --aurora-1: rgba(13, 148, 136, 0.55);
        --aurora-2: rgba(34, 211, 238, 0.4);
        --aurora-3: rgba(132, 204, 22, 0.28);
        --aurora-4: rgba(45, 212, 191, 0.34);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --brand-1: #14b8a6;
    --brand-2: #22d3ee;
    --brand-3: #a3e635;
    --brand-4: #2dd4bf;
    --brand-5: #06b6d4;
    --brand-6: #84cc16;

    --bg: #04080a;
    --text: #e6f4f3;
    --text-2: #b3cbcb;
    --muted: #7d989e;

    --glass: rgba(9, 22, 26, 0.56);
    --glass-strong: rgba(12, 27, 32, 0.78);
    --glass-soft: rgba(9, 22, 26, 0.34);
    --edge: rgba(148, 233, 224, 0.13);
    --edge-2: rgba(148, 233, 224, 0.09);
    --sheen: rgba(190, 245, 238, 0.15);

    --solid: #0b1a1e;
    --solid-2: #10242a;
    --solid-3: #163038;

    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-ink: #032420;
    --accent-soft: rgba(45, 212, 191, 0.16);

    --ok: #a3e635;
    --ok-soft: rgba(163, 230, 53, 0.15);
    --bad: #fb7185;
    --bad-soft: rgba(251, 113, 133, 0.14);

    --ring: rgba(45, 212, 191, 0.42);

    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.65);
    --shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.85);
    --shadow-lg: 0 34px 80px -34px rgba(0, 0, 0, 0.95);
    --glow: 0 14px 38px -12px rgba(20, 184, 166, 0.5);

    --aurora-1: rgba(13, 148, 136, 0.55);
    --aurora-2: rgba(34, 211, 238, 0.4);
    --aurora-3: rgba(132, 204, 22, 0.28);
    --aurora-4: rgba(45, 212, 191, 0.34);
}

/* ── 2. Reset and base ──────────────────────────────────────────────────── */

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

* {
    margin: 0;
}

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

body {
    position: relative;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
 * THE AURORA.
 *
 * Four large radial gradients on one fixed layer. This is the colour that the
 * glass panels blur — without it, backdrop-filter has nothing interesting to
 * work with and every panel looks grey.
 *
 * Deliberately gradients and not a blurred image or a filter: blur() layer,
 * both of which force the compositor to re-rasterise a full-screen surface on
 * every scroll.
 */
body::before {
    content: "";
    position: fixed;
    inset: -20vmax;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 12% 8%, var(--aurora-1), transparent 62%),
        radial-gradient(42vmax 42vmax at 88% 12%, var(--aurora-2), transparent 60%),
        radial-gradient(46vmax 46vmax at 78% 88%, var(--aurora-3), transparent 62%),
        radial-gradient(36vmax 36vmax at 18% 82%, var(--aurora-4), transparent 60%);
}

/*
 * A fine grain over the aurora. Flat gradients on a large surface band
 * visibly, especially on cheaper panels; a little noise breaks the banding up
 * and is most of what separates "gradient" from "finished surface".
 */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--accent-hover);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

.skip-link {
    position: absolute;
    left: 14px;
    top: -60px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    background: var(--solid);
    border: 1px solid var(--edge-2);
    box-shadow: var(--shadow);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 14px;
}

/* ── 3. Typography ──────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 650;
    line-height: 1.16;
    letter-spacing: -0.028em;
    color: var(--text);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.15rem, 1.4rem + 3vw, 3.6rem);
    letter-spacing: -0.042em;
    font-weight: 700;
}

h2 {
    font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.4rem);
    letter-spacing: -0.035em;
}

h3 {
    font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1rem;
}

p {
    text-wrap: pretty;
}

/* Gradient headline accent — the single most load-bearing "premium" cue, so
   it is a utility rather than something re-declared per page. */
.grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* A gradient clipped to text has no fallback colour of its own; this keeps
       it legible if background-clip is unsupported. */
    -webkit-text-fill-color: transparent;
}

.lede {
    font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
    color: var(--muted);
}

.muted {
    color: var(--muted);
}

.small {
    font-size: 0.875rem;
}

.mono {
    font-family: var(--mono);
    font-size: 0.9em;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--edge);
    background: var(--glass-soft);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    box-shadow: inset 0 1px 0 var(--sheen);
}

.eyebrow .icon {
    width: 14px;
    height: 14px;
    color: var(--accent);
}

.prose > * + * {
    margin-top: 1.05rem;
}

.prose h2,
.prose h3 {
    margin-top: 2.4rem;
}

.prose ul,
.prose ol {
    padding-left: 1.3rem;
    color: var(--text-2);
}

.prose li + li {
    margin-top: 0.45rem;
}

.prose p {
    color: var(--text-2);
}

.prose li::marker {
    color: var(--accent);
}

/* ── 4. Layout ──────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.container--narrow {
    max-width: 780px;
}

.section {
    padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem);
}

.section--tight {
    padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem);
}

.stack > * + * {
    margin-top: var(--stack-gap, 1rem);
}

.row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.row--between {
    justify-content: space-between;
}

.grid {
    display: grid;
    gap: clamp(1rem, 0.6rem + 1.2vw, 1.6rem);
}

.grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.divider {
    height: 1px;
    background: var(--edge-2);
    border: 0;
}

/* ── 5. Buttons ─────────────────────────────────────────────────────────── */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.68rem 1.25rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--glass-strong);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 550;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--sheen);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.18s ease,
        background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow), inset 0 1px 0 var(--sheen);
    color: var(--text);
}

.btn:active {
    transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    border-color: transparent;
    background: var(--grad-brand);
    color: #ffffff;
    box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn--primary:hover {
    color: #ffffff;
    box-shadow: 0 18px 44px -14px rgba(13, 148, 136, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--muted);
}

.btn--ghost:hover {
    background: var(--glass-soft);
    color: var(--text);
    box-shadow: none;
}

.btn--danger {
    color: var(--bad);
    border-color: var(--edge);
}

.btn--danger:hover {
    background: var(--bad-soft);
    border-color: var(--bad);
    color: var(--bad);
}

.btn--sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
}

.btn--lg {
    padding: 0.9rem 1.7rem;
    font-size: 1rem;
}

.btn--block {
    width: 100%;
}

.btn .icon {
    width: 1.1em;
    height: 1.1em;
}

/* ── 6. Forms ───────────────────────────────────────────────────────────── */

.field + .field {
    margin-top: 1.15rem;
}

.label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-2);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-sm);
    /* Opaque, not glass: text in a field has to stay readable whatever the
       aurora is doing behind it. */
    background: var(--solid);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(22, 24, 42, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--ring);
}

.textarea {
    min-height: 128px;
    resize: vertical;
}

.select {
    appearance: none;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) calc(50% + 1px),
        calc(100% - 15px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9375rem;
    color: var(--text-2);
    cursor: pointer;
}

.checkbox input {
    margin-top: 0.3rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.hint {
    margin-top: 0.45rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.error {
    margin-top: 0.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bad);
    background: var(--bad-soft);
    font-size: 0.8438rem;
    color: var(--bad);
}

/* ── 7. Cards, glass, tables, pills, alerts ─────────────────────────────── */

/*
 * The glass recipe, in one place. Three layers: a translucent fill, a hairline
 * edge, and an inset sheen along the top. Take any one away and it stops
 * looking like glass.
 */
.card,
.glass {
    position: relative;
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px 0 var(--sheen);
}

/* Browsers without backdrop-filter would render the translucent fill over the
   aurora as a washed-out haze with unreadable text. Go opaque instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card,
    .glass,
    .btn,
    .eyebrow,
    .site-header,
    .admin__bar,
    .sidebar {
        background: var(--solid);
    }
}

.card--pad {
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

.card--hover {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.card--hover:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen);
}

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--edge-2);
}

.card__body {
    padding: 1.5rem;
}

.card__title {
    font-size: 1.05rem;
    font-weight: 650;
}

/* Icon chip. The hue is swapped per instance with --chip so a grid of them
   reads as a colourful set rather than four identical purple squares. */
.chip {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--chip, var(--grad-brand));
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 8px 20px -8px rgba(22, 24, 42, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.chip .icon {
    width: 22px;
    height: 22px;
}

.chip--sm {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.chip--sm .icon {
    width: 17px;
    height: 17px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table th {
    padding: 0.85rem 1.15rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--edge-2);
    white-space: nowrap;
}

.table td {
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--edge-2);
    color: var(--text-2);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr {
    transition: background 0.15s ease;
}

.table tbody tr:hover td {
    background: var(--glass-soft);
}

.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table .actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.cell-truncate {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--muted);
}

.empty strong {
    display: block;
    color: var(--text);
    font-size: 1.05rem;
    margin-bottom: 0.4rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--edge-2);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.65;
    background: var(--glass-soft);
    color: var(--muted);
    white-space: nowrap;
}

.pill--on {
    background: var(--ok-soft);
    border-color: transparent;
    color: var(--ok);
}

.pill--off {
    background: var(--bad-soft);
    border-color: transparent;
    color: var(--bad);
}

.pill--accent {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}

.alert {
    display: flex;
    gap: 0.7rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid var(--edge);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius-sm);
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    font-size: 0.9375rem;
    color: var(--text-2);
    box-shadow: var(--shadow-sm);
}

.alert--ok {
    border-left-color: var(--ok);
    background: var(--ok-soft);
    color: var(--text);
}

.alert--bad {
    border-left-color: var(--bad);
    background: var(--bad-soft);
    color: var(--text);
}

.alert ul {
    margin: 0;
    padding-left: 1.15rem;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 1.25rem;
    border-top: 1px solid var(--edge-2);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding-inline: 0.6rem;
    border: 1px solid var(--edge-2);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 550;
    color: var(--text-2);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination a:hover {
    background: var(--glass-strong);
    border-color: var(--accent);
    color: var(--text);
}

.pagination .is-current {
    background: var(--grad-brand);
    border-color: transparent;
    color: #ffffff;
    font-weight: 700;
    box-shadow: var(--glow);
}

.pagination .is-disabled {
    opacity: 0.35;
}

.pagination .pagination__meta {
    border: 0;
    color: var(--muted);
    font-size: 0.8125rem;
}

/* ── 8. Header, footer, page head ───────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--glass-soft);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--edge-2);
    box-shadow: inset 0 1px 0 var(--sheen);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.brand:hover {
    color: var(--text);
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--grad-brand);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.brand__mark .icon {
    width: 18px;
    height: 18px;
}

.brand__name {
    font-size: 1rem;
    white-space: nowrap;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.nav a {
    position: relative;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    transition: background 0.18s ease, color 0.18s ease;
}

.nav a:hover {
    background: var(--glass-strong);
    color: var(--text);
}

.nav a.is-active {
    color: var(--text);
    font-weight: 600;
    background: var(--glass-strong);
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--sheen);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.icon-btn:hover {
    background: var(--glass-strong);
    border-color: var(--edge);
    color: var(--text);
    transform: translateY(-1px);
}

.icon-btn .icon {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-moon {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle .icon-moon {
        display: block;
    }
}

.nav-toggle {
    display: none;
}

@media (max-width: 940px) {
    .site-header .nav,
    .header-actions .auth-links {
        display: none;
    }

    .nav-toggle {
        display: grid;
    }

    .site-header.is-open .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--header-h);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        padding: 0.9rem clamp(1rem, 0.5rem + 2vw, 2rem) 1.15rem;
        background: var(--glass-strong);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        border-bottom: 1px solid var(--edge);
        box-shadow: var(--shadow-lg);
    }

    .site-header.is-open .nav a {
        padding: 0.75rem 0.95rem;
        font-size: 0.975rem;
        border-radius: 12px;
    }

    .site-header.is-open .nav .auth-links {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding-top: 0.85rem;
        border-top: 1px solid var(--edge-2);
    }

    .site-header.is-open .nav .auth-links > * {
        flex: 1;
    }
}

/*
 * PAGE HEAD.
 *
 * The brand's own banner strip (dpbredcum.jpg, 1920x234) sits behind a
 * gradient scrim. The scrim is not decoration: white-on-photograph is
 * unreadable wherever the photo happens to be light, which is exactly how the
 * original banner failed.
 */
.page-head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
    border-bottom: 1px solid var(--edge-2);
}

/* The generated mesh strip. Full bleed, behind the heading. */
.page-head__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.page-head::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--brand-1) 55%, transparent),
        color-mix(in srgb, var(--brand-2) 35%, transparent) 45%,
        transparent 85%
    );
}

.page-head h1 {
    font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.85rem);
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--text-2);
    margin-bottom: 0.75rem;
}

.crumbs a {
    color: var(--text-2);
}

.crumbs a:hover {
    color: var(--accent);
}

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: auto;
    padding-block: clamp(2.75rem, 2rem + 2.5vw, 4rem) 1.5rem;
    border-top: 1px solid var(--edge-2);
    background: var(--glass-soft);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

/* Was the old design`s photographic strip. A hairline of brand gradient along
   the top edge does the same job of separating the footer, without shipping a
   picture nobody looks at. */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--grad-brand);
    opacity: 0.7;
}

.footer-grid {
    display: grid;
    gap: 2.25rem;
    grid-template-columns: minmax(250px, 1.5fr) repeat(auto-fit, minmax(150px, 1fr));
}

.footer-grid h2 {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.95rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--text-2);
}

.footer-links a:hover {
    color: var(--accent);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--edge-2);
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ── 9. Home page ───────────────────────────────────────────────────────── */

.hero {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(2rem, 1.5rem + 3vw, 4rem);
}

.hero__grid {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
}

.hero h1 {
    margin-top: 1.1rem;
}

.hero .lede {
    max-width: 52ch;
    margin-top: 1.1rem;
}

/* The product render, lifted off the aurora by a coloured glow behind it
   rather than a drop shadow — a shadow under a transparent PNG reads as dirt,
   a glow reads as light. */
.hero__art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 300px;
}

.hero__art::before {
    content: "";
    position: absolute;
    inset: 12% 8%;
    z-index: -1;
    border-radius: 50%;
    background: var(--grad-brand);
    opacity: 0.5;
    filter: blur(60px);
}

.hero__art .art--hero {
    width: min(100%, 500px);
    height: auto;
    animation: float 7s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

/* Floating glass stat chips over the artwork. Hidden below 1024px, where they
   would overlap the image instead of framing it. */
.hero__chip {
    display: none;
}

@media (min-width: 1024px) {
    .hero__chip {
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.7rem 1rem;
        border-radius: var(--radius);
        background: var(--glass-strong);
        backdrop-filter: var(--blur);
        -webkit-backdrop-filter: var(--blur);
        border: 1px solid var(--edge);
        box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen);
        animation: float 8s ease-in-out infinite;
    }

    .hero__chip--a {
        top: 6%;
        left: -4%;
    }

    .hero__chip--b {
        bottom: 10%;
        right: -2%;
        animation-delay: -3s;
    }

    .hero__chip--c {
        bottom: 40%;
        left: -8%;
        animation-delay: -5s;
    }
}

.hero__chip strong {
    display: block;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero__chip span {
    font-size: 0.75rem;
    color: var(--muted);
}



.trust {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
    font-size: 0.8125rem;
    color: var(--muted);
}

.trust > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.trust .icon {
    width: 15px;
    height: 15px;
    color: var(--brand-6);
}

.shortener {
    margin-top: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

.tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    margin-bottom: 1rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: var(--glass-soft);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: inset 0 1px 0 var(--sheen);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tab .icon {
    width: 16px;
    height: 16px;
}

.tab[aria-selected="true"] {
    background: var(--grad-brand);
    color: #ffffff;
    box-shadow: var(--glow);
}

.shortener__panel {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.result {
    margin-top: 1.1rem;
    padding: 1.15rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-sm);
    background: var(--glass-soft);
    box-shadow: inset 0 1px 0 var(--sheen);
}

.result__url {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.result__url .input {
    font-family: var(--mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
}

.result__qr {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.result__qr img {
    width: 138px;
    height: 138px;
    padding: 10px;
    border-radius: var(--radius-sm);
    /* The QR is black-on-transparent SVG; it needs a light plate to stay
       scannable when the page is dark. */
    background: #ffffff;
    box-shadow: var(--shadow);
}

.spinner {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

.feature {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
}

.feature h3 {
    font-size: 1.02rem;
    margin-bottom: 0.3rem;
}

.feature p {
    font-size: 0.9rem;
    color: var(--muted);
}

.showcase {
    display: grid;
    gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .showcase {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .showcase--flip > :first-child {
        order: 2;
    }
}

/*
 * Artwork panel. This used to frame photographs and carried a brand-tinted
 * multiply wash to stop a stock image reading as a foreign rectangle. The
 * photographs are gone — every illustration is now an inline SVG drawn from
 * the palette tokens, so it is already the right colour and the wash would
 * only mute it.
 */
.showcase__media {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--edge);
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen);
}

.showcase__media .art {
    width: 100%;
    height: auto;
    padding: clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem);
}

.check-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--text-2);
}

.check-list .icon {
    width: 20px;
    height: 20px;
    padding: 3px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--grad-mint);
    color: #ffffff;
    flex-shrink: 0;
}

.step {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    overflow: hidden;
}

.step__n {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--chip, var(--grad-brand));
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 8px 20px -8px rgba(22, 24, 42, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/*
 * CTA banner: the brand's wide artwork behind a strong gradient. The image is
 * an <img> rather than a CSS background so it is fetched with the right
 * priority and can carry an empty alt for what it is — decoration.
 */
.cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    flex-wrap: wrap;
    padding: clamp(2rem, 1.5rem + 2vw, 3.25rem);
    border-radius: var(--radius-xl);
    border: 1px solid var(--edge);
    box-shadow: var(--shadow-lg), inset 0 1px 0 var(--sheen);
}

/* The generated band artwork, which already carries the dark brand base, so
   the gradient scrim over it is lighter than it was over a photograph. */
.cta__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
}

.cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, rgba(3, 32, 30, 0.72), rgba(4, 47, 46, 0.34) 55%, transparent);
}

.cta h2,
.cta p {
    color: #ffffff;
}

.cta .lede {
    color: rgba(255, 255, 255, 0.82);
}

.cta .btn {
    background: #ffffff;
    border-color: transparent;
    color: #04302c;
}

.cta .btn:hover {
    color: #04302c;
}

.cta .btn--outline {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.cta .btn--outline:hover {
    background: rgba(255, 255, 255, 0.24);
    color: #ffffff;
}

.faq {
    overflow: hidden;
}

.faq details + details {
    border-top: 1px solid var(--edge-2);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease, color 0.15s ease;
}

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

.faq summary:hover {
    background: var(--glass-soft);
    color: var(--accent);
}

.faq summary .icon {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.faq details[open] summary {
    color: var(--accent);
}

.faq details[open] summary .icon {
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 1.4rem 1.4rem;
    color: var(--muted);
    font-size: 0.9375rem;
}

.plan {
    display: flex;
    flex-direction: column;
    padding: 1.75rem 1.5rem;
}

/* The recommended plan is lifted, ringed and gradient-topped — three cues, not
   one, because a single accent border disappears at a glance. */
.plan--featured {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg), inset 0 1px 0 var(--sheen);
}

.plan--featured::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--grad-brand);
}

@media (min-width: 900px) {
    .plan--featured {
        transform: scale(1.03);
    }
}

.plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0.85rem 0 1.4rem;
}

.plan__amount {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.plan__period {
    font-size: 0.875rem;
    color: var(--muted);
}

.plan__features {
    list-style: none;
    padding: 0;
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    flex: 1;
}

.plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-2);
}

.plan__features .icon {
    width: 18px;
    height: 18px;
    padding: 2px;
    margin-top: 0.2rem;
    border-radius: 50%;
    background: var(--grad-mint);
    color: #ffffff;
    flex-shrink: 0;
}

/* ── 10. Admin shell ────────────────────────────────────────────────────── */

.auth-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
}

.auth-card .brand {
    justify-content: center;
    margin-bottom: 1.6rem;
}

.admin {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-w);
    padding: 1.15rem 0.85rem;
    background: var(--glass);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-right: 1px solid var(--edge);
    box-shadow: inset -1px 0 0 var(--sheen);
}

.sidebar .brand {
    padding: 0.35rem 0.5rem 1.4rem;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    flex: 1;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 550;
    color: var(--muted);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar__link:hover {
    background: var(--glass-strong);
    color: var(--text);
    transform: translateX(2px);
}

.sidebar__link.is-active {
    background: var(--grad-brand);
    color: #ffffff;
    box-shadow: var(--glow);
}

.sidebar__link .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar__foot {
    padding-top: 0.9rem;
    border-top: 1px solid var(--edge-2);
    font-size: 0.8125rem;
    color: var(--muted);
}

.admin__main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}

.admin__bar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--header-h);
    padding-inline: clamp(1rem, 0.5rem + 1.5vw, 1.9rem);
    background: var(--glass-soft);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--edge-2);
}

.admin__content {
    flex: 1;
    padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem) clamp(1rem, 0.5rem + 1.5vw, 1.9rem)
        3rem;
}

.admin__foot {
    padding: 1.35rem clamp(1rem, 0.5rem + 1.5vw, 1.9rem);
    border-top: 1px solid var(--edge-2);
    font-size: 0.8125rem;
    color: var(--muted);
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
        box-shadow: var(--shadow-lg);
        background: var(--glass-strong);
    }

    .admin.is-open .sidebar {
        transform: none;
    }

    .admin.is-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 44;
        background: rgba(7, 7, 15, 0.5);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border: 0;
    }

    .admin__main {
        margin-left: 0;
    }
}

@media (min-width: 1025px) {
    .sidebar-toggle {
        display: none;
    }
}

.stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem;
}

.stat__label {
    font-size: 0.8125rem;
    font-weight: 550;
    color: var(--muted);
}

.stat__value {
    margin-top: 0.2rem;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Server-rendered bar chart. ApexCharts was 521 KB of JavaScript to draw
   fourteen rectangles; these are fourteen rectangles, gradient filled. */
.chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(3px, 0.8vw, 10px);
    height: 200px;
    padding-top: 0.5rem;
}

.chart__col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.55rem;
    height: 100%;
    min-width: 0;
}

.chart__bar {
    width: 100%;
    min-height: 4px;
    border-radius: 8px 8px 3px 3px;
    background: var(--grad-cool);
    box-shadow: 0 6px 16px -8px rgba(20, 184, 166, 0.75);
    transition: filter 0.15s ease, transform 0.15s ease;
}

.chart__col:hover .chart__bar {
    filter: brightness(1.12);
    transform: scaleY(1.02);
    transform-origin: bottom;
}

.chart__bar--empty {
    background: var(--edge-2);
    box-shadow: none;
}

.chart__label {
    font-size: 0.6875rem;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.filter-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-bar .input,
.filter-bar .select {
    width: auto;
    min-width: 175px;
    flex: 0 1 auto;
    padding-block: 0.55rem;
    font-size: 0.9rem;
}

.filter-bar .input[type="search"] {
    flex: 1 1 240px;
}

/* ── 11. Utilities ──────────────────────────────────────────────────────── */

.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/*
 * Generated artwork (resources/views/components/art/*).
 *
 * Inline SVG rather than <img>, because an <img> is an isolated document and
 * cannot read this page's custom properties — the illustrations would keep the
 * light palette in dark mode and would not follow a palette change at all.
 */
.art {
    display: block;
    width: 100%;
    height: auto;
}

/* The dashes travel along the connectors, which suggests a link resolving
   without needing a script. Killed under prefers-reduced-motion by the global
   rule near the top of this sheet. */
.art__flow {
    stroke-dasharray: 10 8;
    animation: flow 2.4s linear infinite;
}

@keyframes flow {
    to {
        stroke-dashoffset: -36;
    }
}

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

.text-center {
    text-align: center;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.page-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

[hidden] {
    display: none !important;
}