/* ==========================================================================
   Trading Pipeline – Design System v2
   Moderne Dark-Dashboard-Ästhetik: Design-Tokens, Elevation, 8pt-Spacing,
   semantische Farben, Fokuszustände, responsives Grid, Micro-Interactions.
   ========================================================================== */

:root {
    /* Farbtokens – Hintergrund-Ebenen (tiefere Abstufung) */
    --bg0: #050912;
    --bg1: #0a1220;
    --bg2: #0f1a2e;
    --bg3: #16243c;
    --bg-elevated: #101a2e;

    /* Karten & Elevation (3 Ebenen) */
    --card: #0f1728;
    --card-elevated: #141f33;
    --card-hover: #18243e;
    --border: #1e2d45;
    --border-strong: #2a3f5e;
    --border-accent: rgba(0, 212, 255, 0.35);

    /* Text-Hierarchie (bessere Kontraste) */
    --text-1: #f0f5fb;
    --text-2: #c8d4e8;
    --text-3: #8a9ab5;
    --text-muted: #5e7089;

    /* Semantik (feiner abgestimmt) */
    --accent: #00d4ff;
    --accent-dim: #00a3cc;
    --accent-soft: rgba(0, 212, 255, 0.12);
    --accent-glow: rgba(0, 212, 255, 0.35);
    --up: #2fd18a;
    --up-soft: rgba(47, 209, 138, 0.14);
    --down: #ff5d6c;
    --down-soft: rgba(255, 93, 108, 0.14);
    --warn: #ffc857;
    --warn-soft: rgba(255, 200, 87, 0.14);
    --info: #8b97ff;
    --info-soft: rgba(139, 151, 255, 0.14);

    /* Abstände (8pt-System) */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;

    /* Radii & Schatten (Layered) */
    --radius: 16px;
    --radius-lg: 20px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --ring: 0 0 0 3px rgba(0, 212, 255, 0.22);

    /* Typografie */
    --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;

    /* Transition-Defaults */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --fast: 120ms;
    --normal: 200ms;
    --slow: 300ms;
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-1);
    background:
        radial-gradient(1200px 520px at 85% -10%, rgba(0, 212, 255, 0.08), transparent 60%),
        radial-gradient(900px 480px at -10% 0%, rgba(139, 151, 255, 0.07), transparent 55%),
        radial-gradient(700px 400px at 110% 40%, rgba(0, 212, 255, 0.04), transparent 60%),
        var(--bg0);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
::selection { background: var(--accent-soft); }

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-xs);
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #415594; }

/* ---------- Header ---------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) clamp(16px, 4vw, 40px);
    background: rgba(6, 10, 18, 0.78);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.brand { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--accent), #4d8dff);
    color: #051019;
    font-weight: 800;
    font-size: 16px;
    font-family: var(--font-display);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, var(--shadow-sm);
}
.brand-text h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
    background: linear-gradient(120deg, #ffffff, #9fd8ef);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-text p {
    margin: 0;
    font-size: 12px;
    color: var(--text-3);
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-inner);
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(47, 209, 138, 0.18); }
.status-pill.loading .dot { background: var(--warn); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Container & Abschnittstitel ---------- */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--s5) clamp(16px, 4vw, 40px);
}
.section-head { margin: 0 0 var(--s4); }
.section-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.section-head p { margin: var(--s1) 0 0; color: var(--text-3); font-size: 13.5px; }

/* ---------- Markt-Übersicht (Chips) ---------- */
.overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s6);
}
.ticker-chip {
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    padding: var(--s3) var(--s4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--card-elevated), var(--card));
    color: var(--text-1);
    box-shadow: var(--shadow-xs), var(--shadow-inner);
    transition: border-color var(--fast) var(--ease-out), transform var(--normal) var(--ease-spring), background var(--normal) var(--ease-out), box-shadow var(--normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.ticker-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    background: radial-gradient(120px 60px at 0% 0%, rgba(0, 212, 255, 0.06), transparent 60%);
    opacity: 0;
    transition: opacity var(--normal) var(--ease-out);
    pointer-events: none;
}
.ticker-chip:hover {
    border-color: var(--border-accent);
    background: linear-gradient(180deg, #1a2842, var(--card-hover));
    transform: translateY(-3px);
    box-shadow: var(--shadow), var(--shadow-inner);
}
.ticker-chip:hover::after { opacity: 1; }
.ticker-chip:active { transform: translateY(-1px) scale(0.99); }
.ticker-chip .cc-ticker { font-family: var(--font-display); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; letter-spacing: -0.01em; }
.ticker-chip .cc-signal { margin-left: auto; }
.ticker-chip .cc-name {
    color: var(--text-muted);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticker-chip .cc-price-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ticker-chip .cc-price { font-weight: 700; font-family: var(--mono); font-size: 13.5px; color: var(--text-1); }
.ticker-chip .cc-change { font-size: 11.5px; font-family: var(--mono); padding: 2px 7px; border-radius: var(--radius-xs); }
.ticker-chip .cc-change.up { color: var(--up); background: var(--up-soft); }
.ticker-chip .cc-change.down { color: var(--down); background: var(--down-soft); }
.ticker-chip .cc-change.flat { color: var(--text-3); background: rgba(138, 154, 181, 0.1); }
.ticker-chip .cc-signal-label {
    margin-top: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sig-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 6px rgba(0,0,0,0.2); }
.sig-dot.buy { background: var(--up); box-shadow: 0 0 8px var(--up-soft); }
.sig-dot.sell { background: var(--down); box-shadow: 0 0 8px var(--down-soft); }
.sig-dot.hold { background: var(--text-3); }
.sig-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.sig-cell .sig-dot { flex: none; }

/* ---------- Haupt-Raster ---------- */
.main-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr);
    gap: var(--s5);
    align-items: start;
}
.col { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }

/* ---------- Karten ---------- */
.card {
    background: linear-gradient(180deg, var(--card-elevated), var(--card));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s5);
    box-shadow: var(--shadow-sm), var(--shadow-inner);
    transition: border-color var(--normal) var(--ease-out), box-shadow var(--normal) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); }
.card-title {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: 0 0 var(--s3);
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.card-title::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(var(--accent), #4d8dff);
    box-shadow: 0 0 10px var(--accent-glow);
}
.card-sub { color: var(--text-2); font-size: 13px; margin: 0 0 var(--s4); }
.hint { color: var(--text-muted); font-size: 12.5px; margin-top: var(--s2); }

/* ---------- Formulare ---------- */
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: var(--s1); font-weight: 600; letter-spacing: 0.01em; }
.form-row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.form-row .grow { flex: 1; min-width: 140px; }

.dash-input {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text-1);
    font-weight: 600;
    background: var(--bg1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
    box-shadow: var(--shadow-inner);
}
.dash-input::placeholder { color: var(--text-muted); font-weight: 400; }
.dash-input:hover { border-color: var(--border-strong); }
.dash-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg2);
    box-shadow: var(--ring), var(--shadow-inner);
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

@media (max-width: 640px) {
    .form-row { align-items: stretch; flex-direction: column; }
    .form-row .grow { min-width: 0; }
    .btn { width: 100%; }
}

/* ---------- Buttons ---------- */
.btn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: #04121a;
    background: linear-gradient(135deg, var(--accent), #38b6ff);
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 22px;
    cursor: pointer;
    transition: filter var(--fast) var(--ease-out), transform var(--fast) var(--ease-spring), box-shadow var(--fast) var(--ease-out);
    box-shadow: 0 6px 18px rgba(0, 212, 255, 0.22), var(--shadow-inner);
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform var(--slow) var(--ease-out);
}
.btn:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 212, 255, 0.3); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:focus-visible { box-shadow: var(--ring), 0 6px 18px rgba(0, 212, 255, 0.25); }

/* ---------- Dropdown (Dash 3.x – neues DOM) ----------
   Dash 3.x rendert das Dropdown als <button class="dash-dropdown"> mit
   .dash-dropdown-value/.dash-dropdown-value-item – NICHT als react-select.
   Ohne Styling ergibt sich Standard-WEISS-auf-WEISS (unlesbar), das beheben wir hier. */
.dash-dropdown.dash-dropdown {
    appearance: none;
    width: 100%;
    background: var(--bg1);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    line-height: 1.2;
    transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
    box-shadow: var(--shadow-inner);
}
.dash-dropdown.dash-dropdown:hover { border-color: var(--border-strong); background: var(--bg2); }
.dash-dropdown.dash-dropdown:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}
.dash-dropdown .dash-dropdown-value {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-1);
    font-weight: 600;
}
.dash-dropdown .dash-dropdown-value-item { color: var(--text-1); }
.dash-dropdown .dash-dropdown-trigger-icon { color: var(--text-3); flex: none; }
/* Dropdown-Liste (Popover) dunkel halten */
.dash-dropdown [data-state="open"],
.dash-dropdown .dash-dropdown-popover,
.dash-dropdown .dash-dropdown-menu,
.dash-dropdown [role="listbox"] {
    background: var(--bg2) !important;
    color: var(--text-1) !important;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.dash-dropdown [role="option"] {
    color: var(--text-1) !important;
    padding: 11px 14px;
    transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.dash-dropdown [role="option"][aria-selected="true"],
.dash-dropdown [role="option"]:hover,
.dash-dropdown [role="option"]:focus {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* ---------- Slider (Dash 3.x – Radix, neues DOM) ---------- */
.slider-wrap { padding: 6px 4px 8px; }
.slider-wrap .dash-slider-container { color: var(--text-1); }
/* Wert-Input rechts neben dem Slider */
.slider-wrap .dash-slider-container .dash-range-slider-input {
    background: var(--bg1);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    font-family: var(--mono);
    font-weight: 600;
    text-align: center;
}
.slider-wrap .dash-slider-track {
    background: var(--bg3);
    height: 6px;
    border-radius: 3px;
}
.slider-wrap .dash-slider-range { background: linear-gradient(90deg, var(--accent-dim), var(--accent)); }
.slider-wrap .dash-slider-thumb {
    width: 18px; height: 18px;
    border: 3px solid var(--accent);
    background: #0b1017;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px var(--accent-glow);
    cursor: pointer;
    transition: box-shadow var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.slider-wrap .dash-slider-thumb:hover { transform: scale(1.1); }
.slider-wrap .dash-slider-thumb:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--ring), 0 0 12px var(--accent-glow);
}
.slider-wrap .dash-slider-mark {
    color: var(--text-3);
    font-size: 11.5px;
}
.slider-wrap .dash-slider-tooltip {
    background: #ffffff;
    color: #05070d;
    border-radius: var(--radius-xs);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 13px;
    padding: 3px 8px;
    box-shadow: var(--shadow);
}

/* ---------- Split-Balken (Glidepath) ---------- */
.split-bar { margin-bottom: var(--s3); }
.split-bar .rb-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.split-bar .rb-head span:first-child { color: var(--text-2); font-size: 13px; }
.split-bar .rb-head span:last-child { font-family: var(--mono); font-weight: 700; }
.split-bar .rb-track { height: 8px; background: var(--bg3); border-radius: var(--radius-pill); overflow: hidden; box-shadow: var(--shadow-inner); }
.split-bar .rb-fill { height: 100%; border-radius: var(--radius-pill); transition: width 0.35s var(--ease-out); box-shadow: 0 0 10px var(--accent-glow); }

/* ---------- Strategie-Karten & Chips ---------- */
.risk-chip {
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #04070c;
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: var(--shadow-xs);
}
.strategy-card {
    border-radius: var(--radius);
    padding: var(--s4);
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg1));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--normal) var(--ease-out), transform var(--normal) var(--ease-out);
}
.strategy-card:hover { border-color: var(--border-strong); }
.strategy-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s2); }
.strategy-card h4 { margin: 0; font-family: var(--font-display); font-size: 15.5px; font-weight: 700; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: var(--s3); }
.doc-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.doc-table th.num, .doc-table td.num { text-align: right; }
.doc-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.doc-table tr { transition: background var(--fast) var(--ease-out); }
.doc-table tbody tr:hover { background: rgba(0, 212, 255, 0.04); }
.doc-table td .sub { color: var(--text-muted); font-size: 11.5px; }
.doc-table tr:last-child td { border-bottom: none; }

/* ---------- Kennzahlen (Fundamentals) ---------- */
.fundamentals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 20px;
    padding: var(--s2) 0;
}
.fund-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.fund-row .fund-key { color: var(--text-muted); white-space: nowrap; }
.fund-row .fund-val {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--text-1);
    text-align: right;
    flex: 1;
    white-space: nowrap;
}
.fund-row .fund-val.fund-name {
    font-family: var(--font);
    font-weight: 600;
    color: var(--text-2);
}
@media (max-width: 560px) {
    .fundamentals { grid-template-columns: 1fr; }
}

/* ---------- Empty-State & Placeholder ---------- */
.empty-state {
    text-align: center;
    padding: var(--s7) var(--s5);
    color: var(--text-3);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: rgba(10, 18, 32, 0.4);
}
.empty-state .es-icon { font-size: 30px; margin-bottom: var(--s2); opacity: 0.7; }

/* ---------- Stat-Karten (Backtest) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s4); }
.stat-card {
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: var(--s4);
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg1));
    box-shadow: var(--shadow-xs);
    transition: border-color var(--normal) var(--ease-out), transform var(--normal) var(--ease-out);
}
.stat-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.stat-card h4 { margin: 0 0 var(--s3); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-2); }
.stat-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13.5px; margin-bottom: 6px; }
.stat-row .key { color: var(--text-muted); white-space: nowrap; }
.stat-row .val { font-family: var(--mono); font-weight: 600; text-align: right; flex: 1; }
.stat-row.muted .val { color: var(--text-2); }

/* ---------- Backtest-Metazeile ---------- */
.meta-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s3) 0; font-size: 13px; color: var(--text-2); }
.meta-row b { color: var(--text-1); font-family: var(--mono); }

/* ---------- DataTable ---------- */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table { font-family: var(--font); }
.backtest-table { margin-top: var(--s3); }

/* ---------- Footer ---------- */
.app-footer {
    border-top: 1px solid var(--border);
    padding: var(--s4) clamp(16px, 4vw, 40px);
    margin-top: var(--s6);
    color: var(--text-muted);
    font-size: 12.5px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    justify-content: space-between;
    background: rgba(6, 10, 18, 0.5);
}
.app-footer b { color: var(--text-3); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .main-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .app-header { flex-direction: column; align-items: stretch; text-align: center; }
    .brand { justify-content: center; }
    .status-pill { justify-content: center; }
    body { font-size: 14px; }
    .card { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}