/* ── PicoCSS overrides & custom theme ─────────────────────────────────── */

:root {
    /* Colour palette */
    --bg-primary:   #12121f;
    --bg-card:      #1a1a2e;
    --bg-input:     #0f0f23;
    --border:       #2a2a44;
    --text:         #e4e4ef;
    --text-muted:   #9999b5;
    --accent:       #6366f1;
    --success:      #818cf8;
    --danger:       #ef4444;
    --warning:      #f59e0b;
    --bitcoin:      #f7931a;
    --lightning:    #9b59b6;
    --link:         #818cf8;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radii */
    --radius:    8px;
    --radius-sm: 4px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Pico overrides (dark theme) */
    --pico-background-color: var(--bg-primary);
    --pico-card-background-color: var(--bg-card);
    --pico-card-border-color: var(--border);
    --pico-color: var(--text);
    --pico-muted-color: var(--text-muted);
    --pico-primary: var(--accent);
    --pico-primary-hover: #818cf8;
    --pico-border-radius: var(--radius);
    --pico-form-element-background-color: var(--bg-input);
    --pico-form-element-border-color: var(--border);
    --pico-form-element-color: var(--text);
    --pico-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
    background:
        radial-gradient(circle at 20% 30%, rgba(99,102,241,.18) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139,92,246,.14) 0%, transparent 50%),
        linear-gradient(145deg, #0f0a1a 0%, #1a1030 40%, #12121f 100%);
    background-attachment: fixed;
    color: var(--text);
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-5);
    line-height: 1.6;
    position: relative;
}

/* Nostrich constellation overlay — tiling flock */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='900' viewBox='0 0 1100 900'%3E%3Cdefs%3E%3Cstyle%3Ecircle%7Bfill:%239b87f5%7Dline%7Bstroke:%239b87f5%7D.eye%7Bfill:%23c4b5fd%7D%3C/style%3E%3C/defs%3E%3C!-- Nostrich 1: top-right, large, wings wide --%3E%3Cg%3E%3Ccircle cx='730' cy='70' r='3'/%3E%3Ccircle cx='755' cy='58' r='2.5'/%3E%3Ccircle class='eye' cx='745' cy='66' r='3.5'/%3E%3Ccircle cx='775' cy='62' r='2'/%3E%3Ccircle cx='710' cy='110' r='2.5'/%3E%3Ccircle cx='690' cy='160' r='2.5'/%3E%3Ccircle cx='675' cy='210' r='2.5'/%3E%3Ccircle cx='660' cy='270' r='3'/%3E%3Ccircle cx='700' cy='290' r='3'/%3E%3Ccircle cx='620' cy='280' r='3'/%3E%3Ccircle cx='565' cy='250' r='2.5'/%3E%3Ccircle cx='500' cy='220' r='2.5'/%3E%3Ccircle cx='440' cy='195' r='3'/%3E%3Ccircle cx='760' cy='260' r='2.5'/%3E%3Ccircle cx='830' cy='235' r='2.5'/%3E%3Ccircle cx='900' cy='210' r='3'/%3E%3Ccircle cx='595' cy='300' r='2'/%3E%3Ccircle cx='560' cy='290' r='2'/%3E%3Ccircle cx='640' cy='340' r='2'/%3E%3Ccircle cx='635' cy='400' r='2.5'/%3E%3Ccircle cx='615' cy='420' r='2'/%3E%3Ccircle cx='655' cy='420' r='2'/%3E%3Ccircle cx='685' cy='335' r='2'/%3E%3Ccircle cx='690' cy='395' r='2.5'/%3E%3Ccircle cx='670' cy='415' r='2'/%3E%3Ccircle cx='710' cy='415' r='2'/%3E%3Cline x1='730' y1='70' x2='755' y2='58' stroke-width='.5'/%3E%3Cline x1='755' y1='58' x2='775' y2='62' stroke-width='.5'/%3E%3Cline x1='730' y1='70' x2='710' y2='110' stroke-width='.5'/%3E%3Cline x1='710' y1='110' x2='690' y2='160' stroke-width='.5'/%3E%3Cline x1='690' y1='160' x2='675' y2='210' stroke-width='.5'/%3E%3Cline x1='675' y1='210' x2='660' y2='270' stroke-width='.5'/%3E%3Cline x1='620' y1='280' x2='660' y2='270' stroke-width='.5'/%3E%3Cline x1='660' y1='270' x2='700' y2='290' stroke-width='.5'/%3E%3Cline x1='620' y1='280' x2='565' y2='250' stroke-width='.5'/%3E%3Cline x1='565' y1='250' x2='500' y2='220' stroke-width='.5'/%3E%3Cline x1='500' y1='220' x2='440' y2='195' stroke-width='.5'/%3E%3Cline x1='700' y1='290' x2='760' y2='260' stroke-width='.5'/%3E%3Cline x1='760' y1='260' x2='830' y2='235' stroke-width='.5'/%3E%3Cline x1='830' y1='235' x2='900' y2='210' stroke-width='.5'/%3E%3Cline x1='620' y1='280' x2='595' y2='300' stroke-width='.4'/%3E%3Cline x1='595' y1='300' x2='560' y2='290' stroke-width='.4'/%3E%3Cline x1='560' y1='290' x2='565' y2='250' stroke-width='.3'/%3E%3Cline x1='660' y1='270' x2='640' y2='340' stroke-width='.5'/%3E%3Cline x1='640' y1='340' x2='635' y2='400' stroke-width='.5'/%3E%3Cline x1='635' y1='400' x2='615' y2='420' stroke-width='.4'/%3E%3Cline x1='635' y1='400' x2='655' y2='420' stroke-width='.4'/%3E%3Cline x1='660' y1='270' x2='685' y2='335' stroke-width='.5'/%3E%3Cline x1='685' y1='335' x2='690' y2='395' stroke-width='.5'/%3E%3Cline x1='690' y1='395' x2='670' y2='415' stroke-width='.4'/%3E%3Cline x1='690' y1='395' x2='710' y2='415' stroke-width='.4'/%3E%3C/g%3E%3C!-- Nostrich 2: bottom-left, smaller, wings angled up --%3E%3Cg opacity='.8'%3E%3Ccircle cx='220' cy='480' r='2.5'/%3E%3Ccircle cx='240' cy='470' r='2'/%3E%3Ccircle class='eye' cx='232' cy='477' r='2.5'/%3E%3Ccircle cx='255' cy='474' r='1.5'/%3E%3Ccircle cx='205' cy='510' r='2'/%3E%3Ccircle cx='190' cy='545' r='2'/%3E%3Ccircle cx='180' cy='585' r='2'/%3E%3Ccircle cx='170' cy='625' r='2.5'/%3E%3Ccircle cx='200' cy='640' r='2.5'/%3E%3Ccircle cx='140' cy='630' r='2.5'/%3E%3Ccircle cx='100' cy='600' r='2'/%3E%3Ccircle cx='55' cy='570' r='2.5'/%3E%3Ccircle cx='245' cy='615' r='2'/%3E%3Ccircle cx='300' cy='595' r='2'/%3E%3Ccircle cx='350' cy='575' r='2.5'/%3E%3Ccircle cx='115' cy='645' r='1.5'/%3E%3Ccircle cx='155' cy='690' r='1.5'/%3E%3Ccircle cx='150' cy='730' r='2'/%3E%3Ccircle cx='135' cy='745' r='1.5'/%3E%3Ccircle cx='165' cy='745' r='1.5'/%3E%3Ccircle cx='190' cy='685' r='1.5'/%3E%3Ccircle cx='195' cy='725' r='2'/%3E%3Ccircle cx='180' cy='740' r='1.5'/%3E%3Ccircle cx='210' cy='740' r='1.5'/%3E%3Cline x1='220' y1='480' x2='240' y2='470' stroke-width='.4'/%3E%3Cline x1='240' y1='470' x2='255' y2='474' stroke-width='.4'/%3E%3Cline x1='220' y1='480' x2='205' y2='510' stroke-width='.4'/%3E%3Cline x1='205' y1='510' x2='190' y2='545' stroke-width='.4'/%3E%3Cline x1='190' y1='545' x2='180' y2='585' stroke-width='.4'/%3E%3Cline x1='180' y1='585' x2='170' y2='625' stroke-width='.4'/%3E%3Cline x1='140' y1='630' x2='170' y2='625' stroke-width='.4'/%3E%3Cline x1='170' y1='625' x2='200' y2='640' stroke-width='.4'/%3E%3Cline x1='140' y1='630' x2='100' y2='600' stroke-width='.4'/%3E%3Cline x1='100' y1='600' x2='55' y2='570' stroke-width='.4'/%3E%3Cline x1='200' y1='640' x2='245' y2='615' stroke-width='.4'/%3E%3Cline x1='245' y1='615' x2='300' y2='595' stroke-width='.4'/%3E%3Cline x1='300' y1='595' x2='350' y2='575' stroke-width='.4'/%3E%3Cline x1='140' y1='630' x2='115' y2='645' stroke-width='.3'/%3E%3Cline x1='170' y1='625' x2='155' y2='690' stroke-width='.4'/%3E%3Cline x1='155' y1='690' x2='150' y2='730' stroke-width='.4'/%3E%3Cline x1='150' y1='730' x2='135' y2='745' stroke-width='.3'/%3E%3Cline x1='150' y1='730' x2='165' y2='745' stroke-width='.3'/%3E%3Cline x1='170' y1='625' x2='190' y2='685' stroke-width='.4'/%3E%3Cline x1='190' y1='685' x2='195' y2='725' stroke-width='.4'/%3E%3Cline x1='195' y1='725' x2='180' y2='740' stroke-width='.3'/%3E%3Cline x1='195' y1='725' x2='210' y2='740' stroke-width='.3'/%3E%3C/g%3E%3C!-- Nostrich 3: top-left, small, wings swept back --%3E%3Cg opacity='.55'%3E%3Ccircle cx='165' cy='80' r='2'/%3E%3Ccircle cx='180' cy='72' r='1.5'/%3E%3Ccircle class='eye' cx='174' cy='78' r='2'/%3E%3Ccircle cx='192' cy='76' r='1.5'/%3E%3Ccircle cx='155' cy='105' r='1.5'/%3E%3Ccircle cx='145' cy='135' r='1.5'/%3E%3Ccircle cx='138' cy='168' r='2'/%3E%3Ccircle cx='160' cy='180' r='2'/%3E%3Ccircle cx='115' cy='175' r='2'/%3E%3Ccircle cx='85' cy='155' r='1.5'/%3E%3Ccircle cx='55' cy='140' r='2'/%3E%3Ccircle cx='195' cy='165' r='1.5'/%3E%3Ccircle cx='235' cy='150' r='2'/%3E%3Ccircle cx='100' cy='190' r='1.5'/%3E%3Ccircle cx='125' cy='220' r='1.5'/%3E%3Ccircle cx='120' cy='255' r='1.5'/%3E%3Ccircle cx='150' cy='215' r='1.5'/%3E%3Ccircle cx='155' cy='250' r='1.5'/%3E%3Cline x1='165' y1='80' x2='180' y2='72' stroke-width='.35'/%3E%3Cline x1='180' y1='72' x2='192' y2='76' stroke-width='.35'/%3E%3Cline x1='165' y1='80' x2='155' y2='105' stroke-width='.35'/%3E%3Cline x1='155' y1='105' x2='145' y2='135' stroke-width='.35'/%3E%3Cline x1='145' y1='135' x2='138' y2='168' stroke-width='.35'/%3E%3Cline x1='115' y1='175' x2='138' y2='168' stroke-width='.35'/%3E%3Cline x1='138' y1='168' x2='160' y2='180' stroke-width='.35'/%3E%3Cline x1='115' y1='175' x2='85' y2='155' stroke-width='.35'/%3E%3Cline x1='85' y1='155' x2='55' y2='140' stroke-width='.35'/%3E%3Cline x1='160' y1='180' x2='195' y2='165' stroke-width='.35'/%3E%3Cline x1='195' y1='165' x2='235' y2='150' stroke-width='.35'/%3E%3Cline x1='115' y1='175' x2='100' y2='190' stroke-width='.3'/%3E%3Cline x1='138' y1='168' x2='125' y2='220' stroke-width='.35'/%3E%3Cline x1='125' y1='220' x2='120' y2='255' stroke-width='.3'/%3E%3Cline x1='138' y1='168' x2='150' y2='215' stroke-width='.35'/%3E%3Cline x1='150' y1='215' x2='155' y2='250' stroke-width='.3'/%3E%3C/g%3E%3C!-- Nostrich 4: bottom-right, medium, facing left --%3E%3Cg opacity='.65'%3E%3Ccircle cx='870' cy='530' r='2.5'/%3E%3Ccircle cx='850' cy='520' r='2'/%3E%3Ccircle class='eye' cx='858' cy='527' r='2.5'/%3E%3Ccircle cx='835' cy='525' r='1.5'/%3E%3Ccircle cx='885' cy='560' r='2'/%3E%3Ccircle cx='895' cy='600' r='2'/%3E%3Ccircle cx='900' cy='650' r='2.5'/%3E%3Ccircle cx='930' cy='665' r='2.5'/%3E%3Ccircle cx='870' cy='660' r='2.5'/%3E%3Ccircle cx='825' cy='635' r='2'/%3E%3Ccircle cx='775' cy='615' r='2.5'/%3E%3Ccircle cx='975' cy='645' r='2'/%3E%3Ccircle cx='1030' cy='625' r='2.5'/%3E%3Ccircle cx='845' cy='680' r='1.5'/%3E%3Ccircle cx='880' cy='720' r='1.5'/%3E%3Ccircle cx='875' cy='765' r='2'/%3E%3Ccircle cx='860' cy='780' r='1.5'/%3E%3Ccircle cx='890' cy='780' r='1.5'/%3E%3Ccircle cx='920' cy='715' r='1.5'/%3E%3Ccircle cx='925' cy='760' r='2'/%3E%3Ccircle cx='910' cy='775' r='1.5'/%3E%3Ccircle cx='940' cy='775' r='1.5'/%3E%3Cline x1='870' y1='530' x2='850' y2='520' stroke-width='.4'/%3E%3Cline x1='850' y1='520' x2='835' y2='525' stroke-width='.4'/%3E%3Cline x1='870' y1='530' x2='885' y2='560' stroke-width='.4'/%3E%3Cline x1='885' y1='560' x2='895' y2='600' stroke-width='.4'/%3E%3Cline x1='895' y1='600' x2='900' y2='650' stroke-width='.4'/%3E%3Cline x1='870' y1='660' x2='900' y2='650' stroke-width='.4'/%3E%3Cline x1='900' y1='650' x2='930' y2='665' stroke-width='.4'/%3E%3Cline x1='870' y1='660' x2='825' y2='635' stroke-width='.4'/%3E%3Cline x1='825' y1='635' x2='775' y2='615' stroke-width='.4'/%3E%3Cline x1='930' y1='665' x2='975' y2='645' stroke-width='.4'/%3E%3Cline x1='975' y1='645' x2='1030' y2='625' stroke-width='.4'/%3E%3Cline x1='870' y1='660' x2='845' y2='680' stroke-width='.3'/%3E%3Cline x1='900' y1='650' x2='880' y2='720' stroke-width='.4'/%3E%3Cline x1='880' y1='720' x2='875' y2='765' stroke-width='.4'/%3E%3Cline x1='875' y1='765' x2='860' y2='780' stroke-width='.3'/%3E%3Cline x1='875' y1='765' x2='890' y2='780' stroke-width='.3'/%3E%3Cline x1='900' y1='650' x2='920' y2='715' stroke-width='.4'/%3E%3Cline x1='920' y1='715' x2='925' y2='760' stroke-width='.4'/%3E%3Cline x1='925' y1='760' x2='910' y2='775' stroke-width='.3'/%3E%3Cline x1='925' y1='760' x2='940' y2='775' stroke-width='.3'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* All direct body children sit above the overlay */
body > * { position: relative; z-index: 1; }

/* ── Header (sticky content-width glass bar) ──────────────────────────── */
.site-header {
    position: sticky;
    top: var(--space-2);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 640px;
    margin: 0 auto var(--space-4);
    padding: var(--space-3) var(--space-5);
    background: rgba(15, 10, 26, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: var(--radius-lg);
}
.site-header h1 { margin: 0; font-size: 1.125rem; }

/* ── Site footer ────────────────────────────────────────────────────────── */
.site-footer {
    margin-top: var(--space-6);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.site-footer a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer a:hover { color: var(--pico-primary-hover); }
.footer-sep {
    margin: 0 var(--space-2);
    color: var(--border);
}

/* ── Status dot ────────────────────────────────────────────────────────── */
.status-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-dot.active   { background: var(--success); box-shadow: 0 0 6px var(--success); }
.status-dot.inactive { background: var(--danger);  }
.status-dot.presign  { background: var(--warning); box-shadow: 0 0 6px var(--warning); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
.status-dot.active, .status-dot.presign {
    animation: pulse 2s ease-in-out infinite;
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
    background: rgba(26, 26, 46, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(99, 102, 241, .15);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    border-color: rgba(99, 102, 241, .3);
}

.card h2 {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
button {
    padding: var(--space-3) var(--space-5);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
}
button:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary   { background: var(--accent);    color: #fff; }
.btn-success   { background: var(--success);   color: #fff; }
.btn-danger    { background: var(--danger);    color: #fff; }
.btn-secondary { background: #374151;          color: #fff; }
.btn-warning   { background: var(--warning);   color: #fff; }
.btn-bitcoin   { background: var(--bitcoin);   color: #000; font-weight: 700; }
.btn-lightning { background: var(--lightning);  color: #fff; }
.btn-sm        { padding: var(--space-2) var(--space-3); font-size: 0.75rem; }

/* ── Utility classes ──────────────────────────────────────────────────── */
.row    { display: flex; gap: var(--space-3); align-items: center; }
.flex-1 { flex: 1; }
.mt-2   { margin-top: var(--space-2); }
.mb-2   { margin-bottom: var(--space-2); }

.text-sm      { font-size: 0.875rem; }
.text-muted   { color: var(--text-muted); }
.text-warning { color: var(--warning); }

/* ── Message banner ───────────────────────────────────────────────────── */
.message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
    display: none;
    animation: slideDown 0.3s ease;
}
.message.success { display: block; background: #312e81; border: 1px solid #818cf844; }
.message.error   { display: block; background: #7f1d1d; border: 1px solid #ef444444; }
.message.warning { display: block; background: #78350f; border: 1px solid #f59e0b44; }

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

/* ── Login options ────────────────────────────────────────────────────── */
.login-option {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: border-color 0.2s;
}
.login-option.recommended { border-color: var(--success); }
.login-option:hover       { border-color: var(--accent); }
.login-option h3 {
    font-size: 1rem;
    margin-bottom: var(--space-2);
    display: flex; align-items: center; gap: var(--space-2);
}

.badge {
    font-size: 0.625rem;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--success);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.divider {
    display: flex; align-items: center;
    margin: var(--space-4) 0;
    color: #555;
}
.divider::before, .divider::after {
    content: ''; flex: 1;
    border-bottom: 1px solid var(--border);
}
.divider span { padding: 0 var(--space-3); font-size: 0.75rem; }

/* ── Info rows ────────────────────────────────────────────────────────── */
.info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}
.info-row:last-child { border-bottom: none; }

/* ── Quotes ────────────────────────────────────────────────────────────── */
.quotes-list { max-height: 200px; overflow-y: auto; }
.quote-item {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
    font-size: 0.875rem;
    border-left: 3px solid var(--accent);
}

/* ── Events ────────────────────────────────────────────────────────────── */
.event-list { max-height: 250px; overflow-y: auto; }
.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
    font-size: 0.8125rem;
}
.event-status {
    font-size: 0.6875rem;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.event-status.signed  { background: var(--success); color: #fff; }
.event-status.pending { background: var(--warning); color: #000; }

.progress-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--space-2);
}
.progress-bar .fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
}

/* ── Tipping ──────────────────────────────────────────────────────────── */
.tip-section {
    background: linear-gradient(135deg, #1e3a5f 0%, var(--bg-card) 100%);
    border-color: var(--bitcoin);
}
.tip-section h2 { color: var(--bitcoin); }
.tip-amount-input { width: 120px; text-align: right; }
.tip-buttons { display: flex; gap: var(--space-2); flex-wrap: wrap; }



.tip-success {
    background: #312e81;
    padding: var(--space-4);
    border-radius: var(--radius);
    text-align: center;
}
.tip-success h3 { color: #a5b4fc; margin-bottom: var(--space-2); }

/* ── Noscript ─────────────────────────────────────────────────────────── */
noscript article {
    text-align: center;
    margin-top: var(--space-6);
}

/* ── Loading skeletons ────────────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-input) 25%,
        rgba(99, 102, 241, .08) 50%,
        var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-line {
    height: 14px;
    margin-bottom: var(--space-2);
}
.skeleton-line:last-child { width: 60%; }
.skeleton-line-short { width: 40%; }

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty states ─────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--space-5) var(--space-4);
    color: var(--text-muted);
}
.empty-state .empty-icon {
    font-size: 2rem;
    margin-bottom: var(--space-3);
    opacity: .6;
}
.empty-state p {
    font-size: 0.875rem;
    margin-bottom: var(--space-3);
    line-height: 1.5;
}
.empty-state .btn-secondary {
    font-size: 0.8125rem;
}