/* ===== ResellTrack PWA – Mobile First ===== */
:root {
    --bg: #0d1210;
    --surface: #151d19;
    --surface-soft: #1b2721;
    --ink: #edf7f0;
    --muted: #9aa9a0;
    --line: #2c3a32;
    --green: #5ae08b;
    --green-dark: #7ee7a3;
    --green-soft: #173a27;
    --danger: #ff7777;
    --danger-soft: #3b1d20;
    --amber: #f0b35a;
    --navy: #0b1110;
    --navy-soft: #15211c;
    --radius: 16px;
    --radius-sm: 12px;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 3px 12px rgba(0, 0, 0, 0.24);
    --appbar-h: 58px;
    --nav-h: 66px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --fab: 58px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 1.6rem; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 4px; }
h2 { font-size: 1.02rem; margin: 0; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.eyebrow {
    margin: 0 0 4px;
    color: var(--green-dark);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* ===== App-Bar ===== */
.app-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: calc(var(--appbar-h) + var(--safe-top));
    padding: var(--safe-top) 16px 0;
    background:
        radial-gradient(circle at 12% 0%, rgba(66, 212, 119, 0.16), transparent 40%),
        var(--navy);
    color: #f3f7f4;
    box-shadow: 0 2px 14px rgba(10, 14, 12, 0.25);
}
.app-bar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-bar-brand img {
    width: 34px; height: 34px; border-radius: 9px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.app-bar-brand span {
    font-weight: 780;
    font-size: 1.02rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.install-hint {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: #eafff1;
    font-size: 0.84rem;
    font-weight: 650;
    cursor: pointer;
}

/* ===== View ===== */
.view {
    padding: calc(var(--appbar-h) + var(--safe-top) + 18px) 16px
             calc(var(--nav-h) + var(--safe-bottom) + 20px);
    max-width: 760px;
    margin: 0 auto;
}

/* ===== Bottom-Nav ===== */
.bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: flex;
    height: calc(var(--nav-h) + var(--safe-bottom));
    padding: 6px 6px var(--safe-bottom);
    background:
        radial-gradient(circle at 85% 100%, rgba(66, 212, 119, 0.12), transparent 42%),
        var(--navy);
    box-shadow: 0 -4px 18px rgba(10, 14, 12, 0.22);
}
.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 14px;
    color: #93a19a;
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    transition: color 150ms ease, background 150ms ease;
}
.nav-item.active {
    color: var(--green);
    background: rgba(66, 212, 119, 0.13);
}
.nav-icon { display: inline-flex; }
.nav-icon svg { width: 24px; height: 24px; }

/* ===== FAB ===== */
.fab {
    position: fixed;
    right: 18px;
    bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px);
    z-index: 41;
    display: grid;
    place-items: center;
    width: var(--fab);
    height: var(--fab);
    border: none;
    border-radius: 50%;
    background: linear-gradient(150deg, #4fe388, #249f54);
    color: #06260f;
    box-shadow: 0 10px 24px rgba(36, 159, 84, 0.42);
    cursor: pointer;
    transition: transform 130ms ease;
}
.fab:active { transform: scale(0.94); }
.fab[hidden] { display: none; }

/* ===== Page header ===== */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.page-head h1 { font-size: 1.5rem; }
.primary-btn, .ghost-btn, .danger-btn, .mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 720;
    font-size: 0.94rem;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
    white-space: nowrap;
}
.primary-btn { background: var(--green); color: #06260f; box-shadow: 0 8px 18px rgba(90,224,139,0.28); }
.primary-btn:active, .ghost-btn:active { transform: scale(0.98); }
.ghost-btn { background: var(--surface); color: var(--ink); border-color: var(--line); }
.danger-btn { background: var(--danger-soft); color: var(--danger); }
.mini-btn { min-height: 32px; padding: 0 11px; font-size: 0.82rem; border-radius: 10px; }
.mini-btn.danger { background: var(--danger-soft); color: var(--danger); }
.primary-btn.small, .ghost-btn.small { min-height: 38px; padding: 0 13px; font-size: 0.88rem; }

/* ===== Metrics ===== */
.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.metric-card {
    position: relative;
    padding: 15px 15px 13px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.metric-card.primary { background: linear-gradient(150deg, #1a2921, var(--navy)); color: #f4faf6; }
.metric-card.primary small { color: #b7c6bd; }
.metric-card span { display: block; color: var(--muted); font-size: 0.76rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; }
.metric-card.primary span { color: #a9f7c6; }
.metric-card strong { display: block; margin-top: 5px; font-size: 1.32rem; letter-spacing: -0.02em; }
.metric-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.78rem; }
.metric-card .metric-glow { position: absolute; right: -26px; top: -26px; width: 96px; height: 96px; border-radius: 50%; background: rgba(66,212,119,0.14); }

/* ===== Panels ===== */
.panel {
    padding: 16px;
    margin-bottom: 16px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

/* ===== Chips / Segmented ===== */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0 -2px 12px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 680;
    cursor: pointer;
    transition: 140ms ease;
}
.chip.active { background: var(--navy); border-color: var(--navy); color: var(--green); }
.chip.soft-active { background: var(--green-soft); border-color: #2c6a47; color: var(--green-dark); }
.chip .chip-opt { font-weight: 400; }

/* ===== Legend ===== */
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.c-umsatz { background: #3aa0ff; }
.c-kosten { background: #ff9f43; }
.c-gewinn { background: var(--green); }

/* ===== Chart ===== */
.chart-wrap { position: relative; }
.chart { width: 100%; overflow: visible; display: block; }
.chart svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.chart-empty { padding: 30px 12px; text-align: center; color: var(--muted); font-size: 0.9rem; }
.chart-tooltip {
    position: absolute;
    z-index: 30;
    pointer-events: none;
    padding: 8px 11px;
    border-radius: 10px;
    background: var(--navy);
    color: #eaf5ee;
    font-size: 0.8rem;
    line-height: 1.5;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
    max-width: 220px;
}
.chart-tooltip.show { opacity: 1; transform: translateY(0); }
.chart-tooltip b { color: #fff; }
.chart-tooltip .tt-umsatz { color: #8cc6ff; }
.chart-tooltip .tt-kosten { color: #ffc288; }
.chart-tooltip .tt-gewinn { color: var(--green); }

/* ===== Donut grid ===== */
.donut-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .donut-grid { grid-template-columns: 1fr 1fr; } }
.donut-flex { display: flex; align-items: center; gap: 16px; }
.donut { flex: 0 0 auto; }
.donut svg { width: 132px; height: 132px; display: block; }

/* ===== Stat lists ===== */
.stat-list { display: grid; gap: 2px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); }
.stat-row:first-child { border-top: 0; }
.stat-row .stat-name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 0.92rem; min-width: 0; }
.stat-row .stat-name small { display: block; color: var(--muted); font-weight: 500; font-size: 0.76rem; }
.stat-row .stat-name .dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.stat-row .stat-val { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-row .stat-val.pos { color: var(--green-dark); }
.stat-row .stat-val.neg { color: var(--danger); }

/* ===== Ranking ===== */
.ranking { display: grid; gap: 2px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); }
.rank-row:first-child { border-top: 0; }
.rank-no { flex: 0 0 24px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--green-soft); color: var(--green-dark); font-size: 0.78rem; font-weight: 800; }
.rank-main { flex: 1; min-width: 0; }
.rank-main strong { display: block; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-main small { color: var(--muted); font-size: 0.76rem; }
.rank-val { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--green-dark); white-space: nowrap; }

/* ===== Transaction cards ===== */
.tx-list { display: grid; gap: 10px; }
.tx-card {
    display: block;
    padding: 13px 14px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(74, 94, 82, 0.55);
}
.tx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tx-name { font-weight: 750; font-size: 0.98rem; letter-spacing: -0.01em; }
.tx-cat { font-size: 0.74rem; color: var(--muted); margin-top: 1px; }
.tx-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.tx-meta div span { display: block; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 650; }
.tx-meta div b { font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.tx-meta div b.pos { color: var(--green-dark); }
.tx-meta div b.neg { color: var(--danger); }
.tx-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.tx-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.tx-actions { display: flex; gap: 6px; }

/* ===== Pills / badges ===== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}
.pill.cat { background: var(--surface-soft); border: 1px solid var(--line); color: var(--muted); }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 750; }
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.status-badge.sold { background: var(--green-soft); color: var(--green-dark); }
.status-badge.sold::before { background: var(--green); }
.status-badge.open { background: #3a2c17; color: #f5c36f; }
.status-badge.open::before { background: var(--amber); }

/* ===== Filters / search ===== */
.filter-panel { display: grid; gap: 10px; }
.search-box { position: relative; }
.search-box input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    outline: none;
}
.search-box svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-grid .full { grid-column: 1 / -1; }

/* ===== Forms ===== */
.form-card { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label.txt { font-size: 0.8rem; font-weight: 680; color: var(--muted); }
.field > input, .field > select {
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    outline: none;
    font-size: 1rem;
}
.field > input:focus, .field > select:focus, .search-box input:focus {
    border-color: var(--green-dark);
    box-shadow: 0 0 0 3px rgba(66,212,119,0.16);
}
.inp-affix { position: relative; }
.inp-affix input { width: 100%; min-height: 48px; padding: 0 40px 0 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); outline: none; font-size: 1rem; }
.inp-affix span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 650; }
.inp-affix input:focus { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(66,212,119,0.16); }
.field .hint { font-size: 0.76rem; color: var(--muted); }

/* article suggestion */
.suggest-wrap { position: relative; }
.suggest-list {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 25;
    transform: translateY(calc(100% + 6px));
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.suggest-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.suggest-head .sort-toggle { display: flex; gap: 4px; }
.suggest-head .sort-toggle button {
    min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); color: var(--muted); font-size: 0.72rem; font-weight: 680; cursor: pointer;
}
.suggest-head .sort-toggle button.active { background: var(--navy); color: var(--green); border-color: var(--navy); }
.suggest-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line);
    background: none; text-align: left; cursor: pointer;
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:active { background: var(--green-soft); }
.suggest-empty { padding: 14px 13px; color: var(--muted); font-size: 0.84rem; }

/* status segmented */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: var(--radius-sm); background: var(--surface-soft); border: 1px solid var(--line); }
.seg button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; font-size: 0.92rem; cursor: pointer; }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }
.seg button.active.offen { color: #f0b35a; }
.seg button.active.verkauft { color: var(--green-dark); }

.sale-fields[hidden] { display: none; }

.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.form-actions .primary-btn { flex: 1; }
.form-actions .ghost-btn { flex: 0 0 auto; }

/* ===== Payment list ===== */
.pay-list { display: grid; gap: 10px; }
.pay-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 15px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft);
}
.pay-name { font-weight: 720; font-size: 0.98rem; }
.pay-count { color: var(--muted); font-size: 0.84rem; }
.big-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1.5px dashed var(--line); border-radius: var(--radius); background: transparent; color: var(--green-dark); font-weight: 720; cursor: pointer; }

/* ===== Modal ===== */
.modal-root { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(10,14,12,0.55); backdrop-filter: blur(3px); }
.modal-root[hidden] { display: none; }
.modal {
    width: 100%; max-width: 380px;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.modal h3 { margin: 0 0 4px; font-size: 1.1rem; }
.modal .modal-sub { color: var(--muted); font-size: 0.86rem; margin-bottom: 14px; }
.modal .field { margin-bottom: 12px; }
.modal .modal-actions { display: flex; gap: 9px; justify-content: flex-end; }
.modal .modal-actions .primary-btn { flex: 1; }

/* ===== Toast ===== */
.toast-root { position: fixed; inset: auto 0 var(--nav-h) 0; z-index: 70; display: grid; gap: 8px; justify-items: center; padding: 0 16px; pointer-events: none; }
.toast {
    max-width: 480px; padding: 11px 16px; border-radius: 12px;
    background: var(--navy); color: #eef6f1; font-size: 0.88rem; font-weight: 600;
    box-shadow: var(--shadow); opacity: 0; transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { box-shadow: inset 0 0 0 1px rgba(66,212,119,0.35), var(--shadow); }
.toast.err { box-shadow: inset 0 0 0 1px rgba(214,58,58,0.5), var(--shadow); }

/* ===== Empty / notice ===== */
.empty-card { padding: 34px 20px; text-align: center; color: var(--muted); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-soft); }
.empty-card strong { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 4px; }
.empty-card .ghost-btn { margin-top: 12px; }

/* ===== Skeleton ===== */
.skel { border-radius: 10px; background: linear-gradient(90deg, #1a241e 25%, #25342b 50%, #1a241e 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ===== Desktop tweaks ===== */
@media (min-width: 640px) {
    .metric-grid { grid-template-columns: repeat(3, 1fr); }
    .filter-grid { grid-template-columns: repeat(4, 1fr); }
    .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
#sale-fields[hidden] { display: none; }
/* ===== Anti-Overflow: Eingaben duerfen Grids nicht aufblaehen ===== */
.search-box { min-width: 0; width: 100%; }
.search-box input { min-width: 0; width: 100%; }
.filter-panel, .filter-panel > * { min-width: 0; }
.filter-grid, .filter-grid > * { min-width: 0; }
.panel { min-width: 0; overflow-x: clip; }
.view { min-width: 0; }

/* ===== Modern Dashboard ===== */
.dashboard-view {
    position: relative;
    isolation: isolate;
}
.dashboard-view::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -18px -16px auto;
    height: 360px;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 12%, rgba(90, 224, 139, 0.16), transparent 31%),
        radial-gradient(circle at 92% 0%, rgba(58, 160, 255, 0.12), transparent 30%);
    opacity: 0.9;
}
.dashboard-head {
    align-items: center;
    margin-bottom: 18px;
}
.dashboard-subtitle {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 0.88rem;
}
.live-pill, .panel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(90, 224, 139, 0.26);
    border-radius: 999px;
    background: rgba(23, 58, 39, 0.74);
    color: var(--green-dark);
    font-size: 0.72rem;
    font-weight: 750;
}
.live-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(90, 224, 139, 0.12), 0 0 12px rgba(90, 224, 139, 0.8);
}
.dashboard-view .chip-row {
    margin-bottom: 14px;
    padding: 3px 0 6px;
}
.dashboard-view .chip {
    border-color: rgba(74, 94, 82, 0.65);
    background: rgba(21, 29, 25, 0.76);
    backdrop-filter: blur(10px);
}
.dashboard-view .chip.active {
    border-color: transparent;
    background: linear-gradient(135deg, #2b965b, #173a27);
    box-shadow: 0 7px 18px rgba(42, 150, 91, 0.22);
    color: #c8ffda;
}
.metric-grid {
    gap: 10px;
    margin-bottom: 18px;
}
.dashboard-view .metric-card {
    min-height: 124px;
    border: 1px solid rgba(74, 94, 82, 0.48);
    background:
        linear-gradient(145deg, rgba(31, 45, 37, 0.98), rgba(21, 29, 25, 0.98));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255,255,255,0.035);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.dashboard-view .metric-card::after {
    content: "";
    position: absolute;
    inset: auto 14px 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: var(--green);
    opacity: 0.48;
}
.dashboard-view .metric-card.primary {
    border-color: rgba(90, 224, 139, 0.36);
    background:
        radial-gradient(circle at 100% 0%, rgba(90, 224, 139, 0.28), transparent 36%),
        linear-gradient(145deg, #193b29, #0b1110 82%);
    box-shadow: 0 14px 28px rgba(12, 86, 47, 0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.dashboard-view .metric-card.primary::after { background: #8af4ae; opacity: 0.95; }
.dashboard-view .metric-card.tone-blue::after { background: #59b7ff; }
.dashboard-view .metric-card.tone-orange::after { background: #ffad59; }
.dashboard-view .metric-card.tone-violet::after { background: #b58aff; }
.dashboard-view .metric-card.tone-amber::after { background: #f6c66c; }
.dashboard-view .metric-card .metric-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    background: rgba(255,255,255,0.07);
    color: var(--green-dark);
    font-size: 0.92rem;
    font-weight: 850;
    letter-spacing: 0;
}
.dashboard-view .metric-card > span:not(.metric-icon):not(.metric-glow) {
    max-width: calc(100% - 34px);
}
.dashboard-view .metric-card strong {
    font-size: clamp(1.12rem, 4vw, 1.46rem);
}
.dashboard-view .panel {
    border: 1px solid rgba(74, 94, 82, 0.45);
    background:
        linear-gradient(145deg, rgba(24, 35, 29, 0.98), rgba(18, 25, 21, 0.98));
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255,255,255,0.025);
}
.chart-panel {
    position: relative;
    overflow: hidden;
}
.chart-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, #3aa0ff, #42d477 55%, #ff9f43);
    opacity: 0.9;
}
.panel-subtitle {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}
.panel-badge {
    min-height: 25px;
    border-color: var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.68rem;
}
#series-toggles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.series-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 31px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,0.025);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 720;
    cursor: pointer;
    transition: 140ms ease;
}
.series-toggle i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.35;
    transition: opacity 140ms ease, box-shadow 140ms ease;
}
.series-toggle.active {
    border-color: rgba(90, 224, 139, 0.26);
    background: rgba(90, 224, 139, 0.09);
    color: var(--ink);
}
.series-toggle.active i {
    opacity: 1;
    box-shadow: 0 0 10px currentColor;
}
.chart-panel .chart-wrap {
    margin: 4px -4px -4px;
    padding-top: 8px;
}
.chart-panel .chart-wrap svg {
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.16));
}
.insight-panel, .ranking-panel {
    position: relative;
}
.insight-panel .panel-head, .ranking-panel .panel-head {
    align-items: center;
}
.insight-panel .chart-wrap {
    min-height: 145px;
}
.donut-flex {
    min-height: 145px;
}
.donut svg {
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.24));
    transition: transform 180ms ease;
}
.donut:hover svg { transform: scale(1.025); }
.ranking-panel .rank-row {
    margin: 0 -4px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 10px;
    transition: background 140ms ease;
}
.ranking-panel .rank-row:hover {
    background: rgba(90, 224, 139, 0.06);
}
.ranking-panel .rank-no {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(90, 224, 139, 0.18);
    background: linear-gradient(145deg, #235c3b, #173a27);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.ranking-panel .rank-row:nth-child(2) .rank-no {
    background: linear-gradient(145deg, #3a4550, #252e35);
    color: #dce7ee;
}
.ranking-panel .rank-row:nth-child(3) .rank-no {
    background: linear-gradient(145deg, #61482c, #3a2c17);
    color: #f5c36f;
}

@media (hover: hover) {
    .dashboard-view .metric-card:hover {
        transform: translateY(-3px);
        border-color: rgba(126, 231, 163, 0.32);
        box-shadow: 0 17px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .series-toggle:hover {
        border-color: rgba(126, 231, 163, 0.38);
        color: var(--ink);
    }
}

@media (min-width: 640px) {
    .dashboard-view .metric-card { min-height: 132px; }
    .dashboard-view .metric-card.primary { grid-column: span 2; }
    .dashboard-view .metric-card.primary strong { font-size: 1.62rem; }
}

/* ===== Liquid Glass Oberfläche ===== */
body {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 0%, rgba(90, 224, 139, 0.12), transparent 26rem),
        radial-gradient(circle at 100% 26%, rgba(58, 160, 255, 0.10), transparent 24rem),
        radial-gradient(circle at 70% 100%, rgba(165, 106, 255, 0.08), transparent 26rem),
        linear-gradient(135deg, #07100d 0%, #0d1712 52%, #08110e 100%);
    background-attachment: fixed;
}
.app-bar, .bottom-nav {
    border-color: rgba(174, 230, 197, 0.14);
    background:
        linear-gradient(120deg, rgba(31, 52, 41, 0.76), rgba(8, 17, 14, 0.78)),
        rgba(8, 17, 14, 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
}
.app-bar {
    border-bottom: 1px solid rgba(174, 230, 197, 0.12);
}
.bottom-nav {
    border-top: 1px solid rgba(174, 230, 197, 0.12);
}
.app-bar::after, .bottom-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, rgba(255,255,255,0.10), transparent 24%, transparent 72%, rgba(90,224,139,0.06));
    opacity: 0.75;
}
.app-bar > *, .bottom-nav > * {
    position: relative;
    z-index: 1;
}
.view {
    position: relative;
}
.panel, .dashboard-view .panel,
.tx-card, .pay-card, .empty-card, .modal, .suggest-list {
    position: relative;
    border: 1px solid rgba(174, 230, 197, 0.15);
    background:
        linear-gradient(145deg, rgba(36, 57, 45, 0.66), rgba(16, 27, 21, 0.72)),
        rgba(20, 32, 25, 0.60);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.085),
        inset 0 -1px 0 rgba(0,0,0,0.14);
}
.panel::before, .tx-card::before, .pay-card::before,
.empty-card::before, .modal::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(125deg, rgba(255,255,255,0.095), transparent 22%, transparent 70%, rgba(90,224,139,0.04));
}
.panel > *, .tx-card > *, .pay-card > *, .empty-card > *, .modal > * {
    position: relative;
    z-index: 1;
}
.metric-card, .dashboard-view .metric-card {
    border: 1px solid rgba(174, 230, 197, 0.16);
    background:
        linear-gradient(145deg, rgba(41, 67, 52, 0.72), rgba(18, 29, 23, 0.74)),
        rgba(20, 32, 25, 0.60);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
    backdrop-filter: blur(22px) saturate(145%);
    box-shadow:
        0 16px 32px rgba(0,0,0,0.23),
        inset 0 1px 0 rgba(255,255,255,0.09),
        inset 0 -1px 0 rgba(0,0,0,0.16);
}
.dashboard-view .metric-card.primary {
    border-color: rgba(126, 231, 163, 0.38);
    background:
        radial-gradient(circle at 100% 0%, rgba(90, 224, 139, 0.31), transparent 38%),
        linear-gradient(145deg, rgba(33, 91, 58, 0.82), rgba(8, 20, 14, 0.80));
}
.dashboard-view .metric-card .metric-glow {
    background: rgba(134, 248, 174, 0.17);
    filter: blur(2px);
}
.ghost-btn, .mini-btn.ghost-btn, .install-hint {
    border-color: rgba(174, 230, 197, 0.18);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025)),
        rgba(26, 42, 33, 0.54);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.primary-btn {
    border-color: rgba(183, 255, 207, 0.35);
    background:
        linear-gradient(135deg, rgba(218,255,229,0.28), transparent 35%),
        linear-gradient(145deg, #63e997, #238b50);
    box-shadow: 0 12px 24px rgba(35, 139, 80, 0.30), inset 0 1px 0 rgba(255,255,255,0.25);
}
.danger-btn, .mini-btn.danger {
    border-color: rgba(255, 143, 143, 0.24);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), transparent 40%),
        var(--danger-soft);
}
.fab {
    border: 1px solid rgba(205, 255, 220, 0.42);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.30), transparent 34%),
        linear-gradient(145deg, #70ee9f, #208b4d);
    box-shadow:
        0 16px 30px rgba(26, 129, 70, 0.38),
        inset 0 1px 0 rgba(255,255,255,0.38);
}
.chip, .series-toggle, .panel-badge, .live-pill, .pill.cat,
.seg, .suggest-head .sort-toggle button {
    border-color: rgba(174, 230, 197, 0.17);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018)),
        rgba(25, 43, 33, 0.52);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
.chip.active, .series-toggle.active {
    border-color: rgba(126, 231, 163, 0.38);
    background:
        linear-gradient(135deg, rgba(199,255,215,0.16), transparent 38%),
        rgba(28, 104, 61, 0.64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 20px rgba(22, 101, 57, 0.18);
}
.seg button.active {
    border: 1px solid rgba(174, 230, 197, 0.15);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.025)),
        rgba(35, 57, 44, 0.74);
}
.search-box input, .field > input, .field > select, .inp-affix input {
    border-color: rgba(174, 230, 197, 0.18);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.018)),
        rgba(11, 23, 17, 0.58);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.search-box input:focus, .field > input:focus, .field > select:focus, .inp-affix input:focus {
    border-color: rgba(126, 231, 163, 0.62);
    box-shadow: 0 0 0 3px rgba(90,224,139,0.14), inset 0 1px 0 rgba(255,255,255,0.08);
}
.modal-root {
    background: rgba(2, 8, 5, 0.58);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
}
.chart-tooltip, .toast {
    border: 1px solid rgba(174, 230, 197, 0.18);
    background:
        linear-gradient(135deg, rgba(48, 76, 59, 0.86), rgba(8, 18, 13, 0.88));
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
    box-shadow: 0 16px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.10);
}
.status-badge.sold {
    border: 1px solid rgba(126, 231, 163, 0.20);
}
.status-badge.open {
    border: 1px solid rgba(240, 179, 90, 0.22);
}
.nav-item.active {
    border: 1px solid rgba(126, 231, 163, 0.18);
    background:
        linear-gradient(135deg, rgba(126,231,163,0.13), rgba(90,224,139,0.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (max-width: 420px) {
    .dashboard-head { align-items: flex-start; }
    .live-pill { margin-top: 2px; }
    .panel, .tx-card, .pay-card { border-radius: 18px; }
}

/* ===== Liquid Glass Boost ===== */
body {
    background:
        radial-gradient(circle at 4% 8%, rgba(90, 224, 139, 0.11), transparent 19rem),
        radial-gradient(circle at 96% 18%, rgba(58, 160, 255, 0.08), transparent 20rem),
        radial-gradient(circle at 78% 92%, rgba(171, 111, 255, 0.055), transparent 24rem),
        radial-gradient(circle at 28% 105%, rgba(255, 159, 67, 0.035), transparent 17rem),
        linear-gradient(135deg, #06100c 0%, #0c1912 48%, #07110d 100%);
}
.view::before, .view::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(78px);
    opacity: 0.19;
}
.view::before {
    top: 16%;
    right: -84px;
    background: rgba(90, 224, 139, 0.18);
}
.view::after {
    bottom: 18%;
    left: -90px;
    background: rgba(58, 160, 255, 0.13);
}
.app-bar, .bottom-nav {
    background:
        linear-gradient(120deg, rgba(74, 116, 88, 0.16), rgba(7, 16, 12, 0.76)),
        rgba(8, 18, 13, 0.74);
    -webkit-backdrop-filter: blur(14px) saturate(130%) contrast(102%);
    backdrop-filter: blur(14px) saturate(130%) contrast(102%);
    box-shadow:
        0 6px 16px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.07),
        inset 0 -1px 0 rgba(126,231,163,0.055);
}
.app-bar::after, .bottom-nav::after {
    background:
        linear-gradient(112deg, rgba(255,255,255,0.075), transparent 18%, transparent 55%, rgba(126,231,163,0.05)),
        linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%);
    opacity: 0.82;
}
.panel, .dashboard-view .panel,
.tx-card, .pay-card, .empty-card, .modal, .suggest-list,
.metric-card, .dashboard-view .metric-card {
    border-color: rgba(210, 255, 224, 0.15);
    background:
        linear-gradient(135deg, rgba(121, 171, 137, 0.075), transparent 24%),
        linear-gradient(315deg, rgba(90, 224, 139, 0.035), transparent 38%),
        rgba(18, 35, 25, 0.76);
    -webkit-backdrop-filter: blur(12px) saturate(130%) contrast(102%);
    backdrop-filter: blur(12px) saturate(130%) contrast(102%);
    box-shadow:
        0 10px 20px rgba(0,0,0,0.21),
        0 0 0 1px rgba(255,255,255,0.025),
        inset 0 1px 0 rgba(255,255,255,0.075),
        inset 0 -1px 0 rgba(0,0,0,0.15);
}
.panel::before, .tx-card::before, .pay-card::before,
.empty-card::before, .modal::before {
    background:
        linear-gradient(118deg, rgba(255,255,255,0.085), transparent 18%, transparent 62%, rgba(117,236,157,0.035)),
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.035), transparent 25%);
    opacity: 0.75;
}
.panel::after, .tx-card::after, .pay-card::after,
.empty-card::after, .modal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.025);
    mask-image: linear-gradient(135deg, black, transparent 38%);
    -webkit-mask-image: linear-gradient(135deg, black, transparent 38%);
}
.dashboard-view .metric-card.primary {
    background:
        radial-gradient(circle at 100% 0%, rgba(126, 231, 163, 0.23), transparent 38%),
        linear-gradient(135deg, rgba(93, 207, 128, 0.14), transparent 45%),
        rgba(9, 42, 24, 0.76);
    border-color: rgba(168, 255, 193, 0.28);
}
.dashboard-view .metric-card .metric-icon {
    border-color: rgba(220,255,229,0.24);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        rgba(20, 56, 34, 0.66);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.075), 0 3px 8px rgba(0,0,0,0.10);
}
.ghost-btn, .mini-btn.ghost-btn, .install-hint,
.chip, .series-toggle, .panel-badge, .live-pill, .pill.cat,
.seg, .suggest-head .sort-toggle button {
    border-color: rgba(210, 255, 224, 0.15);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.065), rgba(255,255,255,0.015) 42%),
        rgba(23, 48, 31, 0.68);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 4px 9px rgba(0,0,0,0.10);
}
.primary-btn, .fab {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.16), transparent 26%),
        linear-gradient(145deg, #78f3a6, #208c4d 72%);
    border-color: rgba(219, 255, 228, 0.52);
    box-shadow:
        0 9px 18px rgba(31, 139, 78, 0.24),
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -1px 0 rgba(0,70,30,0.22);
}
.search-box input, .field > input, .field > select, .inp-affix input {
    border-color: rgba(210, 255, 224, 0.15);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.06), transparent 35%),
        rgba(7, 23, 13, 0.70);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        inset 0 -1px 0 rgba(0,0,0,0.16);
}
.seg button.active, .chip.active, .series-toggle.active {
    border-color: rgba(168, 255, 193, 0.42);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10), rgba(126,231,163,0.035)),
        rgba(35, 125, 69, 0.67);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 5px 12px rgba(35, 139, 80, 0.13);
}
.chart-panel::before {
    height: 3px;
    background: linear-gradient(90deg, #5cbaff, #76f2a2 52%, #ffc078);
    box-shadow: 0 0 7px rgba(118,242,162,0.16);
}
.chart-panel .chart-wrap svg, .donut svg {
    filter:
        drop-shadow(0 6px 10px rgba(0,0,0,0.18))
        drop-shadow(0 0 5px rgba(126,231,163,0.035));
}
.modal-root {
    background: rgba(1, 7, 4, 0.54);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    backdrop-filter: blur(12px) saturate(125%);
}

/* Active tab: klar erkennbar, unabhängig von der jeweiligen Seite */
.bottom-nav .nav-item {
    position: relative;
    border: 1px solid transparent;
}
.bottom-nav .nav-item.active {
    border-color: rgba(126, 231, 163, 0.30);
    background:
        linear-gradient(135deg, rgba(126, 231, 163, 0.20), rgba(90, 224, 139, 0.07)),
        rgba(25, 73, 45, 0.44);
    color: #a1f8bd;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 0 22px rgba(65, 196, 111, 0.12);
}
.bottom-nav .nav-item.active::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: #78f3a6;
    box-shadow: 0 0 10px rgba(120, 243, 166, 0.8);
}
.bottom-nav .nav-item.active .nav-icon svg {
    filter: drop-shadow(0 0 5px rgba(120, 243, 166, 0.42));
}

/* Liquid Glass – bewusst nur als dezente Oberflächen- und Lichtkante */
body {
    background:
        radial-gradient(circle at 12% 0%, rgba(90, 224, 139, 0.045), transparent 25rem),
        linear-gradient(145deg, #08100c 0%, #0c1510 52%, #080f0c 100%);
}
.view::before, .view::after {
    display: none;
}
.app-bar, .bottom-nav {
    border-color: rgba(190, 226, 202, 0.09);
    background: rgba(9, 16, 12, 0.94);
    -webkit-backdrop-filter: blur(6px) saturate(108%);
    backdrop-filter: blur(6px) saturate(108%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
.app-bar::after, .bottom-nav::after {
    background: linear-gradient(110deg, rgba(255,255,255,0.025), transparent 30%, transparent 75%, rgba(90,224,139,0.02));
    opacity: 0.45;
}
.panel, .dashboard-view .panel,
.tx-card, .pay-card, .empty-card, .modal, .suggest-list,
.metric-card, .dashboard-view .metric-card {
    border-color: rgba(190, 226, 202, 0.10);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.018), transparent 34%),
        rgba(17, 25, 20, 0.94);
    -webkit-backdrop-filter: blur(5px) saturate(108%);
    backdrop-filter: blur(5px) saturate(108%);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.17),
        inset 0 1px 0 rgba(255,255,255,0.035);
}
.panel::before, .tx-card::before, .pay-card::before,
.empty-card::before, .modal::before {
    background: linear-gradient(120deg, rgba(255,255,255,0.035), transparent 26%, transparent 72%, rgba(90,224,139,0.015));
    opacity: 0.4;
}
.panel::after, .tx-card::after, .pay-card::after,
.empty-card::after, .modal::after {
    border-color: rgba(255,255,255,0.012);
    opacity: 0.35;
}
.dashboard-view .metric-card.primary {
    border-color: rgba(126, 231, 163, 0.20);
    background:
        linear-gradient(145deg, rgba(38, 82, 54, 0.50), rgba(12, 24, 17, 0.96));
}
.dashboard-view .metric-card .metric-glow {
    background: rgba(134, 248, 174, 0.07);
    filter: blur(5px);
}
.dashboard-view .metric-card .metric-icon {
    border-color: rgba(220,255,229,0.12);
    background: rgba(20, 56, 34, 0.38);
    box-shadow: none;
}
.ghost-btn, .mini-btn.ghost-btn, .install-hint,
.chip, .series-toggle, .panel-badge, .live-pill, .pill.cat,
.seg, .suggest-head .sort-toggle button {
    border-color: rgba(190, 226, 202, 0.11);
    background: rgba(23, 36, 28, 0.78);
    -webkit-backdrop-filter: blur(3px) saturate(105%);
    backdrop-filter: blur(3px) saturate(105%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
.chip.active, .series-toggle.active,
.seg button.active, .bottom-nav .nav-item.active {
    border-color: rgba(126, 231, 163, 0.22);
    background: rgba(36, 83, 53, 0.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.primary-btn, .fab {
    background: linear-gradient(145deg, #63df91, #278a50);
    border-color: rgba(190, 242, 205, 0.30);
    box-shadow: 0 5px 12px rgba(31, 139, 78, 0.18);
}
.search-box input, .field > input, .field > select, .inp-affix input {
    border-color: rgba(190, 226, 202, 0.11);
    background: rgba(9, 19, 13, 0.88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}
.search-box input:focus, .field > input:focus, .field > select:focus, .inp-affix input:focus {
    border-color: rgba(126, 231, 163, 0.48);
    box-shadow: 0 0 0 3px rgba(90,224,139,0.10);
}
.modal-root {
    background: rgba(2, 8, 5, 0.56);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.chart-tooltip, .toast {
    border-color: rgba(190, 226, 202, 0.12);
    background: rgba(17, 27, 21, 0.96);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.20);
}
.chart-panel::before {
    height: 2px;
    background: rgba(118, 210, 151, 0.38);
    box-shadow: none;
}
.chart-panel .chart-wrap svg, .donut svg {
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.14));
}
.bottom-nav .nav-item.active {
    color: #a1f0b8;
}
.bottom-nav .nav-item.active::before {
    background: rgba(120, 223, 154, 0.75);
    box-shadow: none;
}
.bottom-nav .nav-item.active .nav-icon svg {
    filter: none;
}