/* ============================================================
   🌐 CRYPTOARBITOR UI THEME — CLEANED (Option 1: no visual changes)
   Structure: Variables → Base → Components → Themes (Light/Dark/System) → Responsive
   ============================================================ */

/* ---------- 🟩 PALETTE & THEME VARIABLES ---------- */
:root {
    --color-primary: #00B5C9;
    --color-dark: #0A1B2A;
    --color-light: #F5F7FA;
    --color-success: #00C98D;
    --color-danger: #E85D5D;
    --color-warning: #FFC857;
    --color-warning-level-2: #f9b428;
    --color-warning-level-3: #e39800;
    --color-info: #1C75BC;
    /* Defaults = Light */
    --bg-color: var(--color-light);
    --text-color: var(--color-dark);
    /* Cards / tables (overridable per theme) */
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.05);
    --table-head-bg: #f6f9fc;
    --table-row-bg: #ffffff;
    --muted-text: #6c757d;
    --muted-text-badge: #545454;
}

/* ---------- 🧱 BASE LAYOUT ---------- */
html {
    font-size: 14px;
    min-height: 100%;
    position: relative;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    transition: background-color .3s ease, color .3s ease;
}

/* iOS safe-area padding for bottom nav/footer */
@supports (padding: max(0px)) {
    body {
        padding-bottom: max(70px, env(safe-area-inset-bottom));
        background-color: var(--bg-color);
    }
}

/* ---------- ✨ FOCUS / BUTTONS ---------- */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--color-primary);
}

.btn-primary {
    background: linear-gradient(90deg, var(--color-primary), #00D1E8);
    border: none;
    color: #fff;
    font-weight: 600;
}

    .btn-primary:hover {
        background: linear-gradient(90deg, #00A3B4, #00C2DB);
    }

/* ---------- 🔷 NAVBAR ---------- */
.navbar {
    background-color: var(--color-dark) !important;
}

.navbar-brand img {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.navbar-brand span {
    color: var(--color-primary);
    font-weight: 600;
}

/* ---------- 💰 BITVAVO CARD ---------- */
.bitvavo-card {
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1rem 1.2rem;
}

.bitvavo-header {
    display: flex;
    align-items: center;
}

.bitvavo-logo {
    background: #fff;
    border-radius: 4px;
    height: 26px;
    margin-right: 10px;
    object-fit: contain;
    padding: 2px;
    width: 26px;
}

.bitvavo-title {
    color: var(--color-primary);
    font-weight: 600;
    margin: 0;
}

/* ---------- 📊 TABLE / EXCHANGES ---------- */
.exchange-logo {
    background: #fff;
    border-radius: 4px;
    height: 22px;
    margin-right: 8px;
    object-fit: contain;
    padding: 1px;
    width: 22px;
}

.exchange-table .table {
    background-color: var(--card-bg);
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

.exchange-table thead th {
    background-color: var(--table-head-bg);
    border-bottom: 1px solid rgba(0,0,0,.05);
    color: var(--color-dark);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .75rem 1rem;
    text-transform: uppercase;
}

.exchange-table tbody tr {
    background: var(--table-row-bg);
    border-bottom: 1px solid rgba(0,0,0,.04);
    color: var(--color-dark);
    transition: background-color .2s ease-in-out, transform .15s ease;
}

    .exchange-table tbody tr:hover {
        background-color: #f9fafb;
        transform: translateY(-1px);
    }

.exchange-table tbody td {
    padding: .8rem 1rem;
    vertical-align: middle;
}

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

/* ---------- 🎨 BADGES ---------- */
.table .badge {
    box-shadow: inset 0 0 6px rgba(0,0,0,.05);
    border-radius: .5rem;
    display: inline-block;
    font-size: .87rem;
    font-weight: 600;
    min-width: 72px;
    padding: 4px 8px;
    text-align: center;
}

.badge.green {
    background-color: var(--color-success);
    color: #fff;
}

.badge.red {
    background-color: var(--color-danger);
    color: #fff;
}

.badge.gray {
    background-color: #adb5bd;
    color: #fff;
}

.badge.warning {
    background-color: var(--color-warning);
    color: #fff;
}

.badge.warning-level-2 {
    background-color: var(--color-warning-level-2);
    color: #fff;
}

.badge.warning-level-3 {
    background-color: var(--color-warning-level-3);
    color: #fff;
}

.exchange-table tbody tr:hover .badge {
    filter: brightness(1.05);
}

/* ---------- 🔤 TITLES ---------- */
.container h1 span, h2, h3, h4 {
    background: linear-gradient(90deg, var(--color-primary), #00D1E8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* ---------- 🌗 THEME TOGGLE + DROPDOWN ---------- */
.theme-toggle .btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
}

    .theme-toggle .btn:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

.dropdown-menu {
    background-color: var(--color-dark);
    border: 1px solid rgba(255,255,255,.15);
}

.dropdown-item {
    color: #fff;
}

    .dropdown-item:hover {
        background-color: var(--color-primary);
        color: #fff;
    }

/* ---------- 🧭 BREADCRUMB / MUTED TEXT ---------- */
.page-breadcrumb, .text-muted.small {
    color: var(--muted-text);
}

    .page-breadcrumb .text-dark, .text-muted.small .text-dark {
        color: var(--color-dark);
    }

/* ---------- 🏠 FEATURE CARDS ---------- */
.feature-box {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
    color: var(--text-color);
    padding: 1.5rem;
    transition: all .3s ease;
}

    .feature-box:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,.08);
        transform: translateY(-3px);
    }

/* ---------- 🔐 LOGIN & REGISTER ---------- */
.login-card, .register-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);
    transition: background-color .3s ease, color .3s ease;
}

/* ---------- 📱 FIXED MOBILE NAV (bottom) ---------- */
.mobile-nav {
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.1);
    bottom: 0;
    display: flex;
    height: 60px;
    justify-content: space-around;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1050;
}

.mobile-nav-item {
    align-items: center;
    color: #d0e1eb;
    display: flex;
    flex: 1;
    flex-direction: column;
    font-size: .8rem;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    transition: all .2s ease-in-out;
}

    .mobile-nav-item i {
        font-size: 1.3rem;
        margin-bottom: 3px;
    }

    .mobile-nav-item.active, .mobile-nav-item:hover {
        color: var(--color-primary);
    }

/* ---------- ⚙️ SETTINGS (Exchange-instellingen) ---------- */
.settings-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.4rem;
    transition: background-color .25s ease, border-color .25s ease;
}

    .settings-card h5 {
        color: var(--color-primary);
        font-weight: 600;
        margin-bottom: .25rem;
    }

    .settings-card p {
        color: var(--text-color);
        font-size: .9rem;
        opacity: .75;
    }

.exchange-grid {
    display: grid;
    gap: .6rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.exchange-item {
    align-items: center;
    border-radius: 6px;
    display: flex;
    gap: .5rem;
    padding: .4rem .6rem;
    transition: background-color .15s ease;
}

    .exchange-item input[type=checkbox] {
        accent-color: var(--color-primary);
        cursor: pointer;
        height: 1.1rem;
        width: 1.1rem;
    }

    .exchange-item label {
        color: var(--text-color);
        cursor: pointer;
        font-size: .95rem;
        user-select: none;
    }

/* ============================================================
   🌞 LIGHT MODE (explicit override)
   ============================================================ */
:root[data-theme="light"] {
    --bg-color: var(--color-light);
    --text-color: var(--color-dark);
    --card-bg: #ffffff;
    --card-border: rgba(0, 0, 0, 0.05);
    --table-head-bg: #f6f9fc;
    --table-row-bg: #ffffff;
    --muted-text: #6c757d;
}

    /* Light-specific tweaks */
    :root[data-theme="light"] .mobile-nav {
        background-color: rgba(255,255,255,.92);
        border-top: 1px solid rgba(0,0,0,.1);
    }

    :root[data-theme="light"] .mobile-nav-item {
        color: #444;
    }

        :root[data-theme="light"] .mobile-nav-item.active,
        :root[data-theme="light"] .mobile-nav-item:hover {
            color: var(--color-primary);
        }

    /* Badge contrast in light */
    :root[data-theme="light"] .badge.green {
        background-color: #00B77A !important;
        color: #fff !important;
    }

    :root[data-theme="light"] .badge.red {
        background-color: #E34848 !important;
        color: #fff !important;
    }

    :root[data-theme="light"] .badge.gray {
        background-color: #8a96a3 !important;
        color: #fff !important;
    }

    :root[data-theme="light"] .badge.warning-level-3 {
        background-color: var(--color-warning-level-3) !important;
        color: #fff !important;
    }

    /* Opportunities subtle text in light */
    :root[data-theme="light"] .opportunities-table .small.text-muted {
        color: #495057 !important;
    }

/* ============================================================
   🌙 DARK MODE (explicit override)
   ============================================================ */
:root[data-theme="dark"] {
    --bg-color: #0B1726;
    --text-color: #F1F5F9;
    --card-bg: #132235;
    --card-border: #1F3B52;
    --table-head-bg: #13253A;
    --table-row-bg: #162B44;
    --muted-text: #AFC8E0;
}

    :root[data-theme="dark"] body {
        background-color: var(--bg-color);
        color: var(--text-color);
    }

    :root[data-theme="dark"] .navbar {
        background-color: #08121F !important;
    }

    :root[data-theme="dark"] .bitvavo-card {
        box-shadow: 0 2px 10px rgba(0,0,0,.4);
        color: #E6ECF3;
    }

    :root[data-theme="dark"] .exchange-table thead th {
        border-bottom: 1px solid rgba(255,255,255,.05);
        color: #C8E7F9;
    }

    :root[data-theme="dark"] .exchange-table tbody tr {
        border-bottom: 1px solid rgba(255,255,255,.05);
        color: #F3F8FC;
    }

        :root[data-theme="dark"] .exchange-table tbody tr:hover {
            background-color: #1D3958;
        }

    :root[data-theme="dark"] .exchange-table tbody td,
    :root[data-theme="dark"] .exchange-table thead th {
        color: #E5F2FF !important;
    }

    /* Dark badges */
    :root[data-theme="dark"] .badge.green {
        background-color: #00DFA2;
        color: #fff
    }

    :root[data-theme="dark"] .badge.red {
        background-color: #FF7070;
        color: #fff;
    }

    :root[data-theme="dark"] .badge.gray {
        background-color: #607080;
        color: #fff;
    }

    :root[data-theme="dark"] .badge.warning {
        background-color: #FFCD61;
        color: #fff;
    }

    :root[data-theme="dark"] .badge.warning-level-3 {
        background-color: var(--color-warning-level-3);
        color: #fff;
    }

    /* Select */
    :root[data-theme="dark"] #pairSelect {
        background-color: #14263C;
        border-color: #1D3958;
        box-shadow: 0 1px 4px rgba(0,0,0,.3);
        color: #F3F8FC;
    }

        :root[data-theme="dark"] #pairSelect:hover {
            background-color: #1C3552;
        }

    /* Headings gradient in dark */
    :root[data-theme="dark"] h1,
    :root[data-theme="dark"] h2,
    :root[data-theme="dark"] h3,
    :root[data-theme="dark"] h4 {
        background: linear-gradient(90deg, #00B5C9, #25E6FF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Breadcrumb / muted text */
    :root[data-theme="dark"] .page-breadcrumb,
    :root[data-theme="dark"] .text-muted.small {
        color: #AFC8E0 !important;
    }

        :root[data-theme="dark"] .page-breadcrumb .text-dark,
        :root[data-theme="dark"] .text-muted.small .text-dark {
            color: #E6F3FF !important;
        }

    /* Login / Register inputs in dark */
    :root[data-theme="dark"] .login-card input,
    :root[data-theme="dark"] .register-card input {
        background-color: #0A1B2A;
        border-color: #2A3D52;
        color: #F5F7FA;
    }

        :root[data-theme="dark"] .login-card input:focus,
        :root[data-theme="dark"] .register-card input:focus {
            border-color: #00B5C9;
            box-shadow: 0 0 0 .25rem rgba(0,181,201,.25);
        }

    /* Mobile nav base in dark */
    :root[data-theme="dark"] .mobile-nav {
        background-color: rgba(10, 27, 42, .96);
    }

    :root[data-theme="dark"] footer,
    :root[data-theme="dark"] .mobile-nav {
        background-color: #0B1726;
    }

    /* Opportunities small text in dark */
    :root[data-theme="dark"] .opportunities-table .small.text-muted {
        color: #d3dae2 !important;
    }

/* ============================================================
   🖥️ SYSTEM THEME (when no explicit data-theme is set)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-color: #0B1726;
        --text-color: #F1F5F9;
        --card-bg: #132235;
        --card-border: #1F3B52;
        --table-head-bg: #13253A;
        --table-row-bg: #162B44;
        --muted-text: #AFC8E0;
    }

        :root:not([data-theme]) .navbar {
            background-color: #08121F !important;
        }

        :root:not([data-theme]) .bitvavo-card {
            box-shadow: 0 2px 10px rgba(0,0,0,.4);
            color: #E6ECF3;
        }

        :root:not([data-theme]) .exchange-table thead th {
            border-bottom: 1px solid rgba(255,255,255,.05);
            color: #C8E7F9 !important;
            font-weight: 600;
        }

        :root:not([data-theme]) .exchange-table tbody tr {
            border-bottom: 1px solid rgba(255,255,255,.05);
            color: #F3F8FC;
        }

            :root:not([data-theme]) .exchange-table tbody tr:hover {
                background-color: #1D3958;
            }

        :root:not([data-theme]) .exchange-table tbody td,
        :root:not([data-theme]) .exchange-table thead th {
            color: #E5F2FF !important;
        }

        /* Badge colors */
        :root:not([data-theme]) .badge.green {
            background-color: #00DFA2;
            color: #fff;
        }

        :root:not([data-theme]) .badge.red {
            background-color: #FF7070;
            color: #fff;
        }

        :root:not([data-theme]) .badge.gray {
            background-color: #607080;
            color: #fff;
        }

        :root:not([data-theme]) .badge.warning {
            background-color: #FFCD61;
            color: #fff;
        }

        :root:not([data-theme]) .badge.warning-level-3 {
            background-color: var(--color-warning-level-3);
            color: #fff;
        }

        /* Select */
        :root:not([data-theme]) #pairSelect {
            background-color: #14263C;
            border-color: #1D3958;
            box-shadow: 0 1px 4px rgba(0,0,0,.3);
            color: #F3F8FC;
        }

            :root:not([data-theme]) #pairSelect:hover {
                background-color: #1C3552;
            }

        /* Headings gradient */
        :root:not([data-theme]) h1,
        :root:not([data-theme]) h2,
        :root:not([data-theme]) h3,
        :root:not([data-theme]) h4 {
            background: linear-gradient(90deg, #00B5C9, #25E6FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* System-dark table text emphasis (as in original) */
        :root:not([data-theme]) .exchange-table thead th,
        :root:not([data-theme]) .exchange-table tbody td,
        :root:not([data-theme]) .exchange-table tbody tr,
        :root:not([data-theme]) .exchange-logo {
            color: #EAF6FF !important;
        }

            :root:not([data-theme]) .exchange-table tbody td:nth-child(2) {
                color: #F7FAFF !important;
                font-weight: 500;
            }

            :root:not([data-theme]) .exchange-table tbody tr:hover td {
                color: #FFFFFF !important;
                transition: color .15s ease-in-out;
            }

        /* Footer & mobile nav background in system dark */
        :root:not([data-theme]) footer,
        :root:not([data-theme]) .mobile-nav {
            background-color: #0B1726;
        }
}

/* System light explicit (keep parity with original) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .feature-box {
        background-color: #ffffff;
        border: 1px solid rgba(0,0,0,.05);
        box-shadow: 0 2px 6px rgba(0,0,0,.05);
        color: var(--color-dark);
    }
}

/* ============================================================
   📈 OPPORTUNITIES TABLE (shared)
   ============================================================ */
.opportunities-table td {
    vertical-align: middle;
}

.opportunities-table .exchange-logo {
    background: #fff;
    border-radius: 4px;
    height: 22px;
    object-fit: contain;
    width: 22px;
}

.opportunities-table .small.text-muted {
    font-size: .8rem;
    color: #6c757d !important;
}

.best-opportunity {
    border-left: 3px solid var(--color-success);
    background: rgba(0, 201, 141, 0.05);
}

/* Hover hints for settings list */
html[data-theme='dark'] .exchange-item:hover {
    background-color: rgba(255,255,255,.05);
}

html[data-theme='light'] .exchange-item:hover {
    background-color: rgba(0,0,0,.04);
}

/* ============================================================
   📱 RESPONSIVE
   ============================================================ */

/* Houd de netto marge zichtbaar; alleen de minder belangrijke brutokolom verdwijnt. */
@media (max-width: 768px) {
    .opportunities-table thead {
        display: table-header-group;
    }

    .opportunities-table th:nth-child(4),
    .opportunities-table td:nth-child(4) {
        display: none !important;
    }

    .opportunities-table th,
    .opportunities-table td {
        font-size: .9rem;
        padding: .55rem .6rem;
        vertical-align: middle;
        white-space: nowrap;
    }

    .exchange-logo {
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }

    .opportunities-table .badge {
        font-size: .8rem;
        padding: 3px 7px;
    }

    .opportunities-table td:first-child {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .opportunities-table td:first-child .badge {
            border-radius: .4rem;
            font-size: .75rem;
            margin-top: 2px;
            padding: 3px 6px;
        }

    /* Compact mobile */
    .opportunities-table th, .opportunities-table td {
        padding: .6rem .5rem;
    }

    .opportunities-table .small.text-muted {
        font-size: .75rem;
    }

    /* Bottom nav hidden on desktop only */
    /* (kept from original) */
}

/* Hide mobile nav on desktop */
@media (min-width: 768px) {
    .mobile-nav {
        display: none;
    }
}

/* ============================================================
   🧭 SAFARI / MOBILE NAV TWEAKS
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    .mobile-nav {
        background-clip: padding-box;
        border-top: 1px solid rgba(255, 255, 255, .1);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}
/* ============================================================
   🔘 CRYPTOARBITOR TOGGLE SWITCH — Volledig pakket
   Past perfect in de Opportunities-header (desktop & mobiel)
   ============================================================ */

/* 🔹 Headercontainer waar de toggle in zit */
.header-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0.4rem;
    margin-bottom: 1rem;
}

/* 🔹 Wrapper rond switch en label */
.toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ============================================================
   🌙 Switch Styling
   ============================================================ */

.form-switch {
    position: relative;
    display: inline-block;
    width: 2.8em;
    height: 1.4em;
    flex-shrink: 0;
}

/* 🔸 Verborgen checkbox */
.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* 🔸 Achtergrond (baan van slider) */
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-dark);
    border: 2px solid var(--color-primary);
    border-radius: 20px;
    transition: all 0.25s ease-in-out;
}

    /* 🔸 Bolletje (de “knop”) */
    .toggle-slider::before {
        content: "";
        position: absolute;
        height: 0.9em;
        width: 0.9em;
        left: 3px;
        bottom: 2px;
        background-color: white;
        border-radius: 50%;
        transition: all 0.25s ease-in-out;
    }

/* 🔸 Actieve toestand (aan) */
.toggle-input:checked + .toggle-slider {
    background-color: var(--color-primary);
    box-shadow: 0 0 6px rgba(0, 181, 201, 0.6);
}

    .toggle-input:checked + .toggle-slider::before {
        transform: translateX(1.3em);
        background-color: var(--color-dark);
    }

/* 🔸 Hover & Focus */
.toggle-slider:hover {
    box-shadow: 0 0 8px rgba(0, 181, 201, 0.4);
}

.toggle-input:focus + .toggle-slider {
    outline: none;
    box-shadow: 0 0 6px rgba(0, 181, 201, 0.5);
}

/* ============================================================
   🏷️ Label & Teller
   ============================================================ */

.form-check-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-dark);
    cursor: pointer;
    user-select: none;
}

#validCount {
    display: inline-block;
    background-color: var(--color-light);
    color: var(--color-dark);
    border-radius: 8px;
    padding: 0.05rem 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ============================================================
   🌗 Dark Mode Correcties
   ============================================================ */

[data-theme="dark"] .toggle-slider {
    background-color: #1a1f29;
    border-color: var(--color-primary);
}

[data-theme="dark"] .toggle-input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

[data-theme="dark"] .form-check-label {
    color: var(--color-light);
}

[data-theme="dark"] #validCount {
    background-color: var(--color-dark);
    color: var(--color-light);
}

/* ============================================================
   📱 Mobiel gedrag
   ============================================================ */

@media (max-width: 576px) {
    .header-toggle {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-wrapper {
        width: 100%;
        justify-content: flex-start;
    }

    .form-check-label {
        font-size: 0.85rem;
    }

    #validCount {
        font-size: 0.75rem;
        padding: 0.05rem 0.4rem;
    }
}
/* ============================================================
   📱 MOBILE HEADER ALIGN FIX (Arbitrage Opportunities)
   ============================================================ */

@media (max-width: 576px) {
    .header-toggle {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1.2rem;
    }

    .header-toggle h4 {
        width: 100%;
        margin-bottom: 0.6rem !important;
        font-size: 1.15rem;
        text-align: left;
    }

    .toggle-wrapper {
        width: 100%;
        justify-content: flex-start;
        gap: 0.6rem;
    }

    .toggle-wrapper label.form-check-label {
        font-size: 0.9rem;
        text-align: left;
    }
}
/* ============================================
   🌓 FIX: Toggle-label kleur in Dark/System mode
   ============================================ */

/* Alleen in dark-mode (of system-dark) */
@media (prefers-color-scheme: dark) {
    .form-check-label,
    .toggle-wrapper .form-check-label,
    .toggle-wrapper label[for="onlyValidToggle"] {
        color: #fff !important;
    }

    /* optioneel ook de badge binnen label lichter maken */
    .form-check-label .badge {
        background-color: rgba(255,255,255,0.15) !important;
        color: #fff !important;
    }
}

/* Extra fallback: expliciete dark-theme class (indien je die gebruikt) */
html[data-theme='dark'] .form-check-label,
html[data-theme='dark'] .toggle-wrapper .form-check-label {
    color: #fff !important;
}



/* NEW BADGES OPTION A */
.badge {
    display: inline-block;
    min-width: 64px;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    border: none;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}
.badge.green { background-color:#12B76A !important; color:#fff !important; }
.badge.red { background-color:#F04438 !important; color:#fff !important; }
.badge.warning { background-color:#FEC84B !important; color:#3A2E00 !important; }
.badge.warning-level-2 { background-color:#FB8A24 !important; color:#3A1800 !important; }
.badge.warning-level-3 { background-color:#D97706 !important; color:#1E1200 !important; }
.badge.gray { background-color:#98A2B3 !important; color:#fff !important; }
:root[data-theme="light"] .badge { box-shadow:0 2px 4px rgba(0,0,0,0.10); }
:root[data-theme="dark"] .badge { box-shadow:0 2px 6px rgba(0,0,0,0.45); }

/* Badge overrides - white text */
.badge,
.badge.green,
.badge.red,
.badge.yellow,
.badge.orange,
.badge.warning,
.badge.warning-level-2,
.badge.warning-level-3 {
    color: #ffffff !important;
}
/* Fix: force dark text for small counter badges in toggle */
.badge.bg-light.text-dark,
.bg-light.text-dark.badge,
.badge-counter,
.toggle-wrapper .badge,
.header-toggle .badge {
    color: var(--color-dark) !important;
    background-color: #fff !important;
}
/* Fix: info badges (zoals 'Totaal: xxx') terug naar donkere tekst */
.badge.bg-info,
.bg-info.badge,
.badge.badge-info,
.header-stats .badge,
.card .badge.bg-info {
    color: var(--color-dark) !important;
}
/* ============================================================
   CRYPTOARBITOR — UNIVERSAL TEXT FIX FOR DARK + SYSTEM DARK
   ============================================================ */

/* 🔥 1. Dark mode via toggle */
html[data-theme="dark"] .opportunities-table td,
html[data-theme="dark"] .opportunities-table th,
html[data-theme="dark"] .opportunities-table .text-muted,
html[data-theme="dark"] .opportunities-table .native-compact {
    color: #E6F0FF !important;
}

/* 🔥 2. System-dark Mode (iOS/Android/Windows/macOS) */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .opportunities-table td,
    html:not([data-theme]) .opportunities-table th,
    html:not([data-theme]) .opportunities-table .text-muted,
    html:not([data-theme]) .opportunities-table .native-compact {
        color: #E6F0FF !important;
    }
}

/* ===== ARBITRAGE MONITOR ===== */
.opportunities-page { --op-border: color-mix(in srgb, var(--text-color) 10%, transparent); --op-soft: color-mix(in srgb, var(--color-primary) 8%, var(--card-bg)); max-width: 1240px; margin: 0 auto; }
.opportunities-hero { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:2rem; align-items:center; padding:clamp(1.5rem,4vw,3.5rem); border:1px solid rgba(74,222,218,.18); border-radius:26px; color:#f7fbff; background:radial-gradient(circle at 82% 18%,rgba(0,213,190,.20),transparent 30%),linear-gradient(135deg,#071827 0%,#0a2533 55%,#0b3440 100%); box-shadow:0 20px 60px rgba(6,27,42,.18); }
.opportunities-hero::after { content:""; position:absolute; width:260px; height:260px; right:-100px; bottom:-170px; border:38px solid rgba(255,255,255,.025); border-radius:50%; }
.hero-copy,.hero-controls { position:relative; z-index:1; }
.hero-copy { max-width:720px; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1rem; color:#75e9df; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero-copy h1 { margin:0 0 .8rem; color:#fff; background:none!important; -webkit-text-fill-color:currentColor!important; font-size:clamp(2rem,5vw,3.5rem); line-height:1.02; letter-spacing:-.045em; }
.hero-copy p { max-width:650px; margin:0; color:#b9cad6; font-size:1.02rem; line-height:1.7; }
.hero-controls { display:flex; flex-direction:column; align-items:stretch; gap:.75rem; }
.live-status { align-self:flex-end; display:inline-flex; gap:.5rem; align-items:center; padding:.45rem .75rem; color:#c8d9e2; font-size:.78rem; font-weight:700; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#44e2a8; box-shadow:0 0 0 5px rgba(68,226,168,.12); }
.quality-filter { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(255,255,255,.07); backdrop-filter:blur(12px); cursor:pointer; }
.quality-filter strong,.quality-filter small { display:block; }
.quality-filter strong { color:#fff; font-size:.9rem; }
.quality-filter small { margin-top:.18rem; color:#9fb5c3; font-size:.72rem; }
.method-strip { display:flex; align-items:center; gap:1rem; margin:1rem 0 1.4rem; padding:.8rem 1.1rem; border:1px solid var(--op-border); border-radius:14px; background:var(--card-bg); color:var(--muted-text); font-size:.78rem; font-weight:650; }
.method-strip span { display:inline-flex; align-items:center; gap:.45rem; }
.method-strip span i { color:var(--color-primary); }
.strip-arrow { color:color-mix(in srgb,var(--muted-text) 45%,transparent); font-size:.65rem; }
.method-strip .quality-count { margin-left:auto; padding:.32rem .65rem; border-radius:999px; color:var(--text-color); background:var(--op-soft); }
#opportunitiesContainer { transition:opacity .18s ease; }
#opportunitiesContainer { opacity:1; }
.opportunity-loading,.opportunity-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; padding:2rem; border:1px dashed var(--op-border); border-radius:20px; color:var(--muted-text); background:var(--card-bg); text-align:center; }
.opportunity-loading { flex-direction:row; gap:1rem; text-align:left; }
.opportunity-loading strong,.opportunity-loading span,.opportunity-empty strong,.opportunity-empty span { display:block; }
.opportunity-loading strong,.opportunity-empty strong { margin-bottom:.25rem; color:var(--text-color); }
.opportunity-empty>i { margin-bottom:1rem; color:var(--color-primary); font-size:2rem; }
.opportunity-empty.error>i { color:var(--color-danger); }
.opportunity-empty.compact { min-height:180px; margin-bottom:1rem; }
.loading-pulse { width:42px; height:42px; border:3px solid color-mix(in srgb,var(--color-primary) 20%,transparent); border-top-color:var(--color-primary); border-radius:50%; animation:op-spin .8s linear infinite; }
@keyframes op-spin { to { transform:rotate(360deg); } }
.guest-notice { display:flex; align-items:center; gap:.7rem; margin-bottom:1rem; padding:.85rem 1rem; border:1px solid color-mix(in srgb,var(--color-primary) 22%,transparent); border-radius:13px; background:var(--op-soft); color:var(--text-color); font-size:.83rem; }
.guest-notice>i { color:var(--color-primary); }
.guest-notice a { margin-left:auto; color:var(--color-primary); font-weight:750; text-decoration:none; }
.guest-notice span strong { display:block; margin-bottom:.12rem; color:var(--text-color); }
.guest-actions { display:flex; align-items:center; gap:.7rem; margin-left:auto; flex:none; }
.guest-actions a { margin-left:0; }
.guest-actions .guest-register { padding:.42rem .65rem; border-radius:8px; color:#fff; background:var(--color-primary); }
.guest-results-gate { display:flex; align-items:center; gap:.85rem; margin-top:1rem; padding:1rem 1.15rem; border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--card-border)); border-radius:15px; background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 8%,var(--card-bg)),var(--card-bg)); box-shadow:0 12px 30px rgba(8,30,44,.06); }
.guest-gate-icon { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:12px; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 12%,transparent); }
.guest-results-gate>div { min-width:0; flex:1; }
.guest-results-gate strong,.guest-results-gate span { display:block; }
.guest-results-gate strong { color:var(--text-color); font-size:.78rem; }
.guest-results-gate>div span { margin-top:.15rem; color:var(--muted-text); font-size:.66rem; }
.guest-results-gate .btn { flex:none; font-size:.68rem; }
.opportunity-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-bottom:1rem; }
.stat-card { min-width:0; padding:1.05rem 1.15rem; border:1px solid var(--op-border); border-radius:16px; background:var(--card-bg); box-shadow:0 8px 24px rgba(8,30,44,.04); }
.stat-card>span,.stat-card>small,.stat-card>strong { display:block; }
.stat-card>span { overflow:hidden; color:var(--muted-text); font-size:.7rem; font-weight:750; letter-spacing:.045em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.stat-card>strong { margin:.45rem 0 .2rem; color:var(--text-color); font-size:1.45rem; line-height:1; }
.stat-card>small { color:var(--muted-text); font-size:.72rem; }
.stat-highlight { border-color:color-mix(in srgb,var(--color-success) 32%,transparent); background:linear-gradient(145deg,color-mix(in srgb,var(--color-success) 10%,var(--card-bg)),var(--card-bg)); }
.stat-highlight>strong { color:var(--color-success); }
.opportunity-table-shell { overflow:hidden; border:1px solid var(--op-border); border-radius:19px; background:var(--card-bg); box-shadow:0 14px 35px rgba(8,30,44,.06); }
.table-caption { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--op-border); }
.table-caption strong,.table-caption span { display:block; }
.table-caption strong { color:var(--text-color); font-size:.95rem; }
.table-caption div>span { margin-top:.15rem; color:var(--muted-text); font-size:.72rem; }
.calculation-note { color:var(--muted-text); font-size:.72rem; }
.calculation-note i { margin-right:.3rem; color:var(--color-primary); }
.opportunities-table { --bs-table-bg:transparent; color:var(--text-color); }
.opportunities-table thead th { padding:.75rem 1rem; border-bottom:1px solid var(--op-border); color:var(--muted-text); background:color-mix(in srgb,var(--card-bg) 92%,var(--text-color)); font-size:.67rem; letter-spacing:.07em; text-transform:uppercase; }
.opportunities-table tbody td { padding:1rem; border-bottom-color:var(--op-border); color:var(--text-color); }
.opportunities-table tbody tr:last-child td { border-bottom:0; }
.opportunities-table tbody tr { transition:background-color .16s ease; }
.opportunities-table tbody tr:hover { background:var(--op-soft); }
.asset-cell { white-space:nowrap; }
.asset-symbol { font-weight:800; }
.pair-quote { color:var(--muted-text); font-size:.72rem; }
.chain-pill { display:inline-block; max-width:100px; overflow:hidden; margin-top:.35rem; padding:.18rem .4rem; border-radius:6px; color:var(--muted-text); background:var(--op-soft); font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.exchange-cell { display:flex; align-items:center; gap:.65rem; min-width:145px; }
.exchange-cell .exchange-logo { flex:0 0 28px; width:28px; height:28px; margin:0; border:1px solid var(--op-border); border-radius:8px; padding:4px; }
.exchange-cell strong,.exchange-cell span,.exchange-cell small { display:block; }
.exchange-cell strong { color:var(--text-color); font-size:.78rem; }
.exchange-cell span { color:var(--text-color); font-size:.76rem; font-variant-numeric:tabular-nums; }
.exchange-cell small { color:var(--muted-text); font-size:.62rem; }
.gross-margin { display:block; color:var(--text-color); font-size:.78rem; font-weight:750; }
.fee-line,.age-line { display:block; margin-top:.18rem; color:var(--muted-text); font-size:.6rem; white-space:nowrap; }
.net-margin { display:inline-block; min-width:70px; padding:.42rem .62rem; border-radius:9px; color:#047857; background:#d7faed; font-size:.82rem; font-weight:850; text-align:center; font-variant-numeric:tabular-nums; }
.confidence-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.32rem .52rem; border-radius:999px; font-size:.65rem; font-weight:750; white-space:nowrap; }
.confidence-pill.high { color:#047857; background:#d7faed; }
.confidence-pill.indicative { color:#9a6700; background:#fff1c2; }
.table-footnote { margin:0; padding:.75rem 1.25rem; border-top:1px solid var(--op-border); color:var(--muted-text); background:color-mix(in srgb,var(--card-bg) 94%,var(--text-color)); font-size:.67rem; }
:root[data-theme="dark"] .net-margin,:root[data-theme="dark"] .confidence-pill.high { color:#6ee7b7; background:rgba(16,185,129,.14); }
:root[data-theme="dark"] .confidence-pill.indicative { color:#fcd34d; background:rgba(245,158,11,.14); }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) .net-margin,:root:not([data-theme]) .confidence-pill.high { color:#6ee7b7; background:rgba(16,185,129,.14); } :root:not([data-theme]) .confidence-pill.indicative { color:#fcd34d; background:rgba(245,158,11,.14); } }
@media (max-width:991.98px) { .opportunities-hero { grid-template-columns:1fr; } .hero-controls { max-width:480px; } .live-status { align-self:flex-start; } .opportunity-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px) { .opportunities-page { padding-top:1rem!important; } .opportunities-hero { margin:0 -.25rem; padding:1.5rem 1.15rem; border-radius:20px; } .hero-copy h1 { font-size:2.15rem; } .hero-copy p { font-size:.9rem; } .method-strip { overflow-x:auto; margin-left:-.25rem; margin-right:-.25rem; gap:.65rem; white-space:nowrap; } .method-strip .quality-count { position:absolute; left:-9999px; } .opportunity-stats { grid-template-columns:repeat(3,1fr); gap:.6rem; } .stat-card { padding:.9rem .72rem; } .stat-card>span { font-size:.67rem; line-height:1.3; } .stat-card>strong { font-size:1.3rem; } .stat-card>small { font-size:.66rem; line-height:1.35; } .update-card { display:none; } .guest-notice { align-items:flex-start; flex-wrap:wrap; } .guest-notice>span { flex:1; } .guest-actions { width:100%; margin-left:1.45rem; } .guest-actions a { width:auto; margin-left:0; } .guest-results-gate { align-items:flex-start; flex-wrap:wrap; } .guest-results-gate>div { width:calc(100% - 55px); } .guest-results-gate .btn { width:100%; } .table-caption,.table-footnote { padding-left:.85rem; padding-right:.85rem; } .table-caption strong { font-size:.86rem; } .table-caption span,.table-footnote { font-size:.68rem; line-height:1.55; } .opportunity-table-shell .table-responsive { overflow-x:hidden; } .opportunities-table { width:100%; min-width:0; table-layout:fixed; } .opportunities-table th:nth-child(1) { width:19%; } .opportunities-table th:nth-child(2),.opportunities-table th:nth-child(3) { width:29%; } .opportunities-table th:nth-child(5) { width:23%; } .opportunities-table thead th,.opportunities-table tbody td { padding:1rem .38rem; } .opportunities-table thead th { font-size:.67rem; letter-spacing:.025em; } .exchange-cell { min-width:0; gap:.38rem; } .exchange-cell>div { min-width:0; } .exchange-cell .exchange-logo { flex:0 0 22px; width:22px; height:22px; padding:3px; } .exchange-cell strong { display:block; max-width:100%; overflow:hidden; font-size:.76rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .exchange-cell span { display:block; overflow:hidden; color:var(--text-color); font-size:.75rem; font-weight:700; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; } .exchange-cell small { display:block; overflow:hidden; margin-top:.08rem; color:var(--muted-text); font-size:.65rem; font-weight:600; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; } .chain-pill { display:none; } .asset-cell { min-width:0; flex-wrap:wrap; gap:.12rem; } .asset-symbol { font-size:.8rem; line-height:1.3; } .pair-quote { font-size:.63rem; line-height:1.3; } .row-calculator-icon { display:none; } .net-margin { min-width:0; width:100%; padding:.45rem .25rem; font-size:.8rem; line-height:1.2; } }

/* ===== SITE-WIDE VISUAL SYSTEM ===== */
body { margin-bottom:0; min-height:100vh; background:radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--color-primary) 6%,transparent),transparent 28%),var(--bg-color); }
.app-navbar { position:sticky; top:0; z-index:1030; min-height:68px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(7,24,39,.96)!important; box-shadow:0 8px 30px rgba(3,15,24,.12); backdrop-filter:blur(18px); }
.navbar-brand { letter-spacing:-.02em; }
.navbar-brand img { width:34px; height:34px; border:1px solid rgba(255,255,255,.15); }
.app-nav { gap:.2rem; margin-left:1.25rem; }
.app-nav .nav-link { display:flex; align-items:center; gap:.45rem; padding:.55rem .75rem!important; border-radius:9px; color:#b8cad6!important; font-size:.83rem; font-weight:650; }
.app-nav .nav-link:hover { color:#fff!important; background:rgba(255,255,255,.07); }
.app-nav .nav-link.active { color:#7ce9df!important; background:rgba(0,181,201,.13); }
.app-nav .nav-link i { font-size:.75rem; }
.nav-actions { display:flex; align-items:center; gap:.55rem; }
.nav-theme-button { display:flex; min-width:40px; height:40px; align-items:center; justify-content:center; gap:.45rem; padding:0 .7rem; border:1px solid rgba(255,255,255,.13); border-radius:11px; color:#a9becb; background:rgba(255,255,255,.035); font-size:.7rem; font-weight:700; transition:border-color .18s ease,color .18s ease,background .18s ease; }
.nav-theme-button::after { margin-left:.1rem; opacity:.55; }
.nav-theme-button:hover,.nav-theme-button[aria-expanded="true"] { border-color:rgba(124,233,223,.38); color:#fff; background:rgba(124,233,223,.09); }
.nav-user-actions { display:flex; align-items:center; gap:.35rem; }
.nav-auth-link { display:flex; min-height:40px; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .75rem; border:0; border-radius:10px; color:#c5d5de; background:transparent; font-size:.76rem; font-weight:720; text-decoration:none; transition:color .18s ease,background .18s ease; }
.nav-auth-link:hover { color:#fff; background:rgba(255,255,255,.065); }
.nav-auth-primary { display:flex; min-height:40px; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem; border:1px solid rgba(77,230,214,.34); border-radius:10px; color:#062833; background:linear-gradient(135deg,#75eee1,#21c8bd); box-shadow:0 8px 22px rgba(12,190,178,.14); font-size:.76rem; font-weight:850; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.nav-auth-primary:hover { color:#041f28; box-shadow:0 11px 28px rgba(12,190,178,.23); transform:translateY(-1px); }
.nav-auth-primary i { font-size:.68rem; }
.nav-logout-button { cursor:pointer; }
.app-shell { min-height:calc(100vh - 132px); }
.app-main { min-width:0; }
.app-footer { padding:1.3rem 0; border-top:1px solid var(--card-border); color:var(--muted-text); font-size:.72rem; }
.standard-page { max-width:1180px; margin:0 auto; }
.narrow-page { max-width:820px; }
.page-heading { max-width:720px; margin-bottom:2rem; }
.page-heading h1,.page-hero h1 { margin:.2rem 0 .55rem; color:var(--text-color); background:none!important; -webkit-text-fill-color:currentColor!important; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.04em; }
.page-heading p,.page-hero p { margin:0; color:var(--muted-text); line-height:1.65; }
.page-hero { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem; border:1px solid rgba(81,213,210,.16); border-radius:22px; color:#fff; background:linear-gradient(135deg,#081b2a,#0c3441); box-shadow:0 16px 45px rgba(6,27,42,.12); }
.page-hero h1 { color:#fff; }
.page-hero p { max-width:650px; color:#b7cbd6; }
.compact-hero { min-height:190px; }
.page-control { min-width:230px; }
.page-control label { display:block; margin-bottom:.45rem; color:#a9bfcb; font-size:.7rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.page-control .form-select,.page-control.input-group .form-select,.page-control .input-group-text { min-height:46px; border-color:rgba(255,255,255,.12); color:#fff; background-color:rgba(255,255,255,.08); }
.page-control .form-select option { color:#132235; background:#fff; }
.data-section { margin-top:1rem; transition:opacity .18s ease; }
.data-section { opacity:1; }
.js-price-value,.js-percentage-value,.js-reference-value,.js-buy-price,.js-sell-price,.js-gross-percentage,.js-net-percentage { border-radius:6px; transition:color .2s ease,background-color .25s ease,box-shadow .25s ease; font-variant-numeric:tabular-nums; }
.tick-up { color:#047857!important; background:rgba(16,185,129,.14)!important; box-shadow:0 0 0 4px rgba(16,185,129,.06); }
.tick-down { color:#b42318!important; background:rgba(239,68,68,.12)!important; box-shadow:0 0 0 4px rgba(239,68,68,.05); }
.top-prices-page .tick-up { color:#008d6b!important; background:transparent!important; box-shadow:none!important; }
.top-prices-page .tick-down { color:#c63f49!important; background:transparent!important; box-shadow:none!important; }
@media (prefers-reduced-motion:reduce) { .tick-up,.tick-down { transition:none; } }
.content-card { padding:clamp(1.15rem,3vw,2rem); border:1px solid var(--card-border); border-radius:18px; color:var(--text-color); background:var(--card-bg); box-shadow:0 12px 35px rgba(8,30,44,.06); }
.prose-card h2 { margin-top:1.7rem; color:var(--text-color); font-size:1.05rem; }
.prose-card h2:first-child { margin-top:0; }
.prose-card p { color:var(--muted-text); line-height:1.75; }
.card { border-color:var(--card-border)!important; color:var(--text-color); background:var(--card-bg); box-shadow:0 12px 35px rgba(8,30,44,.06)!important; }
.card .card-body { color:var(--text-color); }
.form-control,.form-select,.input-group-text { border-color:var(--card-border); color:var(--text-color); background-color:var(--card-bg); border-radius:10px; }
.form-control:focus,.form-select:focus { border-color:var(--color-primary); color:var(--text-color); background-color:var(--card-bg); }
.table { --bs-table-bg:transparent; --bs-table-color:var(--text-color); --bs-table-border-color:var(--card-border); color:var(--text-color); }
.table thead th { color:var(--muted-text); background:color-mix(in srgb,var(--card-bg) 92%,var(--text-color)); font-size:.7rem; letter-spacing:.055em; text-transform:uppercase; }
.table tbody tr:hover { background:color-mix(in srgb,var(--color-primary) 6%,transparent); }
.nav-tabs { gap:.35rem; border:0; }
.nav-tabs .nav-link { border:0; border-radius:9px; color:var(--muted-text); font-size:.8rem; font-weight:700; }
.nav-tabs .nav-link.active { color:var(--color-primary); background:var(--op-soft); }
.search-box { position:relative; }
.search-box i { position:absolute; z-index:1; top:50%; left:1rem; color:var(--muted-text); transform:translateY(-50%); }
.search-box .form-control { height:48px; padding-left:2.7rem; }

/* Home */
.home-page { max-width:1240px; margin:0 auto; }
.home-hero { overflow:hidden; display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; min-height:540px; padding:clamp(2rem,5vw,4.5rem); border-radius:28px; color:#fff; background:radial-gradient(circle at 82% 15%,rgba(37,230,255,.18),transparent 28%),linear-gradient(135deg,#061725,#0a2a38 62%,#0b3b44); box-shadow:0 24px 70px rgba(5,26,40,.2); }
.home-hero h1 { max-width:720px; margin:.25rem 0 1rem; color:#fff; background:none!important; -webkit-text-fill-color:currentColor!important; font-size:clamp(2.7rem,6vw,5rem); line-height:.98; letter-spacing:-.06em; }
.home-hero-copy>p { max-width:650px; color:#b7c9d4; font-size:1.05rem; line-height:1.75; }
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin:1.7rem 0; }
.hero-actions .btn { display:inline-flex; align-items:center; gap:.55rem; border-radius:11px; }
.btn-ghost-light { border:1px solid rgba(255,255,255,.18); color:#fff; background:rgba(255,255,255,.06); }
.btn-ghost-light:hover { border-color:#78e8df; color:#78e8df; }
.hero-trust { display:flex; gap:1rem; flex-wrap:wrap; color:#9db4c1; font-size:.72rem; }
.hero-trust i { margin-right:.3rem; color:#51ddb1; }
.market-visual { display:flex; flex-direction:column; gap:.7rem; padding:1.2rem; border:1px solid rgba(255,255,255,.1); border-radius:22px; background:rgba(255,255,255,.055); backdrop-filter:blur(14px); }
.market-card { padding:1.25rem; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(3,16,25,.38); }
.market-card span,.market-card small,.market-card strong { display:block; }
.market-card span { color:#93adba; font-size:.7rem; text-transform:uppercase; }
.market-card strong { margin:.35rem 0; font-size:2rem; }
.market-card small { color:#9eb3bf; }
.market-card-buy strong { color:#69e2d6; }.market-card-sell strong { color:#65e7ae; }
.market-route { display:flex; align-items:center; justify-content:center; gap:.6rem; color:#8ea8b5; font-size:.7rem; }
.section-heading { max-width:680px; margin:4.5rem auto 2rem; text-align:center; }
.section-heading>span { color:var(--color-primary); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.section-heading h2,.home-cta h2 { margin:.55rem 0; color:var(--text-color); background:none!important; -webkit-text-fill-color:currentColor!important; letter-spacing:-.035em; }
.section-heading p { color:var(--muted-text); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature-grid .feature-box { position:relative; padding:2rem; text-align:left; }
.feature-grid .feature-box:hover { transform:translateY(-4px); }
.feature-grid .feature-box>i { margin-bottom:1.4rem; color:var(--color-primary); font-size:1.5rem; }
.feature-grid h3 { color:var(--text-color); font-size:1rem; }
.feature-grid p { margin:0; color:var(--muted-text); font-size:.83rem; line-height:1.65; }
.feature-number { position:absolute; right:1.2rem; top:1rem; color:color-mix(in srgb,var(--muted-text) 35%,transparent); font-size:1.6rem; font-weight:850; }
.home-cta { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:4rem; padding:2rem; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); }
.home-cta>div>span { color:var(--color-primary); font-size:.72rem; font-weight:800; text-transform:uppercase; }

/* CryptoPhase public homepage */
.cryptophase-home { max-width:1320px; }
.phase-hero { grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr); min-height:650px; background:radial-gradient(circle at 86% 12%,rgba(27,220,208,.2),transparent 28%),radial-gradient(circle at 5% 100%,rgba(0,158,120,.12),transparent 34%),linear-gradient(135deg,#061725,#0a2a38 60%,#0b4147); }
.phase-hero .eyebrow { color:#72e5d6; }
.phase-hero h1 { font-size:clamp(3rem,6vw,5.4rem); }
.phase-preview { position:relative; overflow:hidden; padding:1.35rem; border:1px solid rgba(255,255,255,.16); border-radius:24px; color:#102536; background:rgba(255,255,255,.96); box-shadow:0 32px 80px rgba(0,12,20,.3); transform:rotate(1.2deg); }
.phase-preview::before { position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(18,199,200,.08),transparent 38%); content:""; }
.phase-preview-head,.phase-score-grid,.phase-indicators { position:relative; z-index:1; }
.phase-preview-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.35rem .2rem 1.1rem; }
.phase-preview-head div small,.phase-preview-head div strong { display:block; }
.phase-preview-head small { margin-bottom:.2rem; color:#7a8993; font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.phase-preview-head strong { color:#092236; font-size:1.1rem; }
.phase-status { display:inline-flex; align-items:center; gap:.42rem; padding:.5rem .65rem; border-radius:999px; color:#a96d00; background:#fff1d6; font-size:.68rem; font-weight:800; }
.phase-score-grid { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.phase-score-grid>div { display:grid; grid-template-columns:1fr auto; gap:.35rem .7rem; padding:.7rem .8rem; border:1px solid #e5eaed; border-radius:12px; background:#fff; }
.phase-score-grid span { color:#697985; font-size:.66rem; font-weight:750; }
.phase-score-grid strong { font-size:.85rem; }
.phase-score-grid i { grid-column:1/-1; overflow:hidden; height:5px; border-radius:999px; background:#edf0f2; }
.phase-score-grid i b { display:block; height:100%; border-radius:inherit; }
.phase-score-grid>div:first-child i b { background:#009c78; }
.phase-score-grid>div:last-child i b { background:#ea4e59; }
.score-buy { color:#009c78; }.score-sell { color:#e34855; }
.phase-chart-heading { display:flex; position:relative; z-index:1; align-items:center; justify-content:space-between; margin:.85rem .2rem 0; color:#647682; font-size:.6rem; font-weight:750; }
.phase-chart-heading span { display:flex; align-items:center; gap:.38rem; color:#087f72; }
.phase-chart-heading span i { width:15px; height:3px; border-radius:99px; background:#00a88e; }
.phase-chart { position:relative; height:185px; margin:.2rem -.3rem 0; }
.phase-chart svg,.analysis-window-chart svg { width:100%; height:100%; }
.phase-chart-grid,.window-grid { fill:none; stroke:#e6ecef; stroke-width:1; vector-effect:non-scaling-stroke; }
.phase-chart-area { fill:url(#phase-area); }
.phase-chart-line,.window-line { fill:none; stroke:#00a88e; stroke-width:4; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.phase-marker { position:absolute; display:grid; place-items:center; width:25px; height:25px; border:3px solid #fff; border-radius:50%; color:#fff; font-size:.62rem; font-style:normal; font-weight:850; box-shadow:0 5px 14px rgba(3,26,38,.18); transform:translate(-50%,-50%); }
.marker-buy,.legend-buy { background:#009c78; }.marker-top,.legend-top { background:#7a3fe1; }.marker-warning { background:#ee9800; }.marker-sell,.legend-sell { background:#ea4653; }
.phase-mini-charts { display:grid; position:relative; z-index:1; grid-template-columns:1fr 1fr; gap:.45rem; margin:.15rem 0 .5rem; }
.phase-mini-charts>div { overflow:hidden; padding:.5rem .6rem .2rem; border:1px solid #e7ecef; border-radius:10px; background:#fbfcfd; }
.phase-mini-charts span { display:flex; align-items:center; gap:.3rem; color:#667985; font-size:.52rem; font-weight:750; }
.phase-mini-charts span strong { margin-left:auto; color:#18313e; font-size:.5rem; }
.phase-mini-charts span b { width:6px; height:6px; flex:0 0 6px; border-radius:50%; }
.fear-dot { background:#ee9800; }.rsi-dot { background:#8458ed; }
.phase-mini-charts svg { width:100%; height:34px; margin-top:.1rem; }
.mini-grid { fill:none; stroke:#e8edef; stroke-width:1; vector-effect:non-scaling-stroke; }
.mini-fear-line,.mini-rsi-line { fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.mini-fear-line { stroke:#ee9800; }.mini-rsi-line { stroke:#8458ed; }
.mini-rsi-levels { fill:none; stroke:#e9dffc; stroke-width:1; stroke-dasharray:4 4; vector-effect:non-scaling-stroke; }
.phase-indicators { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; }
.phase-indicators>span { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.5rem; padding:.62rem; border:1px solid #e7ecef; border-radius:10px; background:#fff; }
.phase-indicators i { grid-row:1/3; align-self:center; color:#00a889; }
.phase-indicators small { color:#82909a; font-size:.57rem; }
.phase-indicators strong { color:#132b3a; font-size:.66rem; }
.phase-history-preview { display:grid; position:relative; z-index:1; grid-template-columns:1fr 1fr; gap:.45rem; margin-top:.5rem; padding-top:.5rem; border-top:1px solid #e6ecef; }
.phase-history-preview>div { display:grid; grid-template-columns:1fr auto; gap:.1rem .45rem; padding:.5rem .6rem; border-radius:9px; background:#f7fafb; }
.phase-history-preview small { color:#74848e; font-size:.5rem; font-weight:750; }
.phase-history-preview strong { grid-row:1/3; grid-column:2; align-self:center; font-size:.78rem; }
.phase-history-preview span { color:#87959e; font-size:.46rem; }
.history-dip { color:#d67a00; }.history-rise { color:#009c78; }
.phase-asset-strip { display:flex; align-items:center; justify-content:center; gap:clamp(.7rem,2.2vw,2rem); margin:1.2rem 0 0; padding:1rem 1.25rem; border:1px solid var(--card-border); border-radius:16px; color:var(--muted-text); background:var(--card-bg); box-shadow:0 8px 30px rgba(8,30,44,.04); }
.phase-asset-strip span { font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.phase-asset-strip strong { color:var(--text-color); font-size:.76rem; }
.phase-feature-grid .feature-box { overflow:hidden; min-height:235px; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); box-shadow:0 12px 35px rgba(8,30,44,.05); }
.phase-feature-grid h3 { font-size:1.12rem; }
.phase-feature-grid p { font-size:.86rem; }
.product-showcase,.portfolio-showcase { display:grid; grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; margin-top:5rem; padding:clamp(1.2rem,3vw,2rem); }
.showcase-kicker { display:block; margin-bottom:.65rem; color:var(--color-primary); font-size:.68rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.showcase-copy h2 { margin:0 0 1rem; color:var(--text-color); background:none!important; -webkit-text-fill-color:currentColor!important; font-size:clamp(1.8rem,3vw,2.7rem); letter-spacing:-.045em; }
.showcase-copy p { color:var(--muted-text); font-size:.94rem; line-height:1.75; }
.showcase-copy ul { display:grid; gap:.72rem; margin:1.4rem 0 0; padding:0; list-style:none; color:var(--text-color); font-size:.83rem; }
.showcase-copy li { display:flex; align-items:center; gap:.65rem; }
.showcase-copy li i { color:#00a77d; }
.analysis-window { overflow:hidden; border:1px solid var(--card-border); border-radius:22px; background:var(--card-bg); box-shadow:0 28px 65px rgba(5,29,42,.12); }
.analysis-window-top { display:flex; align-items:center; gap:.35rem; padding:.9rem 1rem; border-bottom:1px solid var(--card-border); }
.analysis-window-top>span { width:8px; height:8px; border-radius:50%; background:#dce3e7; }
.analysis-window-top>span:first-child { background:#ff8585; }.analysis-window-top>span:nth-child(2) { background:#ffc660; }.analysis-window-top>span:nth-child(3) { background:#62d7ac; }
.analysis-window-top strong { margin-left:.45rem; color:var(--muted-text); font-size:.65rem; }
.analysis-window-chart { position:relative; height:300px; margin:1rem; }
.window-area { fill:color-mix(in srgb,#00a88e 10%,transparent); }
.analysis-window-legend { display:flex; justify-content:flex-end; gap:1rem; padding:0 1.2rem 1.15rem; color:var(--muted-text); font-size:.62rem; }
.analysis-window-legend span { display:flex; align-items:center; gap:.35rem; }
.analysis-window-legend b { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; color:#fff; font-size:.55rem; }
.portfolio-showcase { grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr); padding:clamp(2rem,5vw,4rem); border:1px solid color-mix(in srgb,var(--color-primary) 20%,var(--card-border)); border-radius:28px; background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)),var(--card-bg)); }
.portfolio-mini-card { display:flex; flex-direction:column; padding:1.35rem; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); box-shadow:0 20px 55px rgba(6,31,44,.12); }
.portfolio-preview-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.portfolio-preview-head span { color:var(--color-primary); font-size:.72rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-preview-head small { padding:.28rem .48rem; border-radius:999px; color:#008c77; background:rgba(0,185,137,.1); font-size:.56rem; font-weight:800; }
.portfolio-preview-summary { display:grid; grid-template-columns:1.35fr .85fr; gap:.85rem; padding-bottom:1rem; }
.portfolio-preview-summary>div { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.portfolio-preview-summary small { color:var(--muted-text); font-size:.58rem; font-weight:750; letter-spacing:.03em; text-transform:uppercase; }
.portfolio-preview-summary strong { margin:.15rem 0; color:var(--text-color); font-size:1.65rem; line-height:1.1; }
.portfolio-preview-summary em,.portfolio-preview-summary span { color:#009c78; font-size:.65rem; font-style:normal; font-weight:800; }
.portfolio-preview-result { padding-left:.85rem; border-left:1px solid var(--card-border); }
.portfolio-preview-result strong { font-size:1.02rem; }
.portfolio-preview-allocation { display:flex; overflow:hidden; height:8px; margin-bottom:.85rem; border-radius:999px; background:#e0eef0; }
.portfolio-preview-allocation i { display:block; height:100%; }
.allocation-btc { width:76%; background:#00aa92; }
.allocation-eth { width:17%; background:#7665e8; }
.allocation-sol { width:7%; background:#f09b00; }
.portfolio-preview-positions { display:flex; flex-direction:column; gap:.42rem; }
.portfolio-preview-positions>div { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:.58rem; padding:.55rem .6rem; border:1px solid color-mix(in srgb,var(--card-border) 75%,transparent); border-radius:11px; background:color-mix(in srgb,var(--card-bg) 88%,var(--hover-bg)); }
.portfolio-preview-positions b { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; color:#fff; font-size:.8rem; }
.portfolio-preview-positions span { display:flex; min-width:0; flex-direction:column; }
.portfolio-preview-positions span strong { color:var(--text-color); font-size:.68rem; }
.portfolio-preview-positions span small { color:var(--muted-text); font-size:.53rem; }
.portfolio-preview-positions em { color:var(--text-color); font-size:.68rem; font-style:normal; font-weight:850; }
.coin-btc { background:#f7931a; }.coin-eth { background:#627eea; }.coin-sol { background:linear-gradient(135deg,#18e2b5,#7958f0); }
.phase-cta { border-color:color-mix(in srgb,var(--color-primary) 24%,var(--card-border)); background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 8%,var(--card-bg)),var(--card-bg)); }
.phase-cta p { margin:0; color:var(--muted-text); font-size:.75rem; }

/* Settings and account */
.settings-hub { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.hub-card { display:flex; flex-direction:column; min-height:260px; padding:1.6rem; border:1px solid var(--card-border); border-radius:18px; color:var(--text-color); background:var(--card-bg); box-shadow:0 10px 30px rgba(8,30,44,.05); text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.hub-card:hover { border-color:color-mix(in srgb,var(--color-primary) 45%,transparent); color:var(--text-color); transform:translateY(-4px); }
.hub-card.disabled { opacity:.62; }
.hub-icon { display:grid; place-items:center; width:46px; height:46px; margin-bottom:2rem; border-radius:12px; color:var(--color-primary); background:var(--op-soft); font-size:1.2rem; }
.hub-card h2 { margin:0 0 .5rem; color:var(--text-color); background:none!important; -webkit-text-fill-color:currentColor!important; font-size:1.15rem; }
.hub-card p { color:var(--muted-text); font-size:.8rem; line-height:1.6; }
.hub-arrow { margin-top:auto; color:var(--color-primary); }
.coming-soon { display:inline-block; margin-bottom:.45rem; color:var(--color-primary); font-size:.62rem; font-weight:800; text-transform:uppercase; }
.settings-card { border-radius:18px; box-shadow:0 10px 30px rgba(8,30,44,.05); }
.exchange-item { border:1px solid transparent; background:color-mix(in srgb,var(--card-bg) 94%,var(--text-color)); }
.account-manage-card .nav-pills { gap:.35rem; }
.account-manage-card .nav-link { display:flex; align-items:center; gap:.5rem; border-radius:9px; color:var(--muted-text); font-size:.8rem; }
.account-manage-card .nav-link.active { color:#fff; background:var(--color-primary); }
.login-card,.register-card,.container .card.shadow-lg { overflow:hidden; border-radius:20px!important; }

@media (max-width:991.98px) { .app-nav { margin-left:0; padding-top:1rem; } .nav-actions { align-items:stretch; flex-direction:column; gap:.55rem; margin:0; padding:.75rem 0 .5rem; border-top:1px solid rgba(255,255,255,.08); } .nav-theme-button { width:100%; justify-content:flex-start; } .nav-account-actions,.nav-user-actions { width:100%; } .nav-guest-actions { display:grid; grid-template-columns:1fr 1fr; } .nav-auth-link,.nav-auth-primary { width:100%; } .home-hero { grid-template-columns:1fr; } .phase-preview { max-width:650px; transform:none; } .market-visual { max-width:560px; } .feature-grid,.settings-hub { grid-template-columns:1fr 1fr; } .product-showcase,.portfolio-showcase { grid-template-columns:1fr; } .product-showcase .showcase-copy { max-width:720px; } }
@media (max-width:767.98px) { .app-footer { padding-bottom:78px; } .page-hero { align-items:stretch; flex-direction:column; } .page-control { width:100%; min-width:0; } .home-hero { min-height:auto; border-radius:20px; } .feature-grid,.settings-hub { grid-template-columns:1fr; } .home-cta { align-items:flex-start; flex-direction:column; } .phase-asset-strip { overflow:auto; justify-content:flex-start; } .phase-asset-strip>* { flex:0 0 auto; } .product-showcase,.portfolio-showcase { margin-top:3.5rem; padding:1rem 0; } .portfolio-showcase { padding:1.4rem; } }
@media (max-width:575.98px) { .home-hero { margin:0 -.25rem; padding:2rem 1.2rem; } .home-hero h1 { font-size:2.65rem; } .phase-hero { gap:2rem; } .phase-preview { padding:.8rem; border-radius:17px; } .phase-preview-head { align-items:flex-start; flex-direction:column; } .phase-score-grid { grid-template-columns:1fr 1fr; } .phase-chart { height:150px; } .phase-mini-charts { grid-template-columns:1fr; } .phase-mini-charts svg { height:29px; } .phase-indicators>span { padding:.48rem; } .phase-indicators i { display:none; } .phase-indicators strong { font-size:.6rem; } .phase-history-preview { grid-template-columns:1fr; } .analysis-window-chart { height:220px; margin:.65rem; } .analysis-window-legend { justify-content:flex-start; flex-wrap:wrap; gap:.5rem .8rem; } .portfolio-preview-summary strong { font-size:1.42rem; } .portfolio-preview-result strong { font-size:.95rem; } .portfolio-preview-positions>div { grid-template-columns:30px minmax(0,1fr) auto; padding:.5rem; } .market-visual { padding:.75rem; } .hero-trust { flex-direction:column; gap:.4rem; } .page-hero { margin:0 -.25rem; padding:1.35rem; border-radius:18px; } .section-heading { margin-top:3rem; } }

/* ===== OPPORTUNITY CALCULATOR ===== */
.opportunity-row { cursor:pointer; }
.opportunity-row:focus-visible { position:relative; z-index:1; outline:2px solid var(--color-primary); outline-offset:-2px; }
.row-calculator-icon { margin-left:.45rem; color:var(--color-primary); font-size:.65rem; opacity:.35; transition:opacity .15s ease,transform .15s ease; }
.opportunity-row:hover .row-calculator-icon,.opportunity-row:focus .row-calculator-icon { opacity:1; transform:scale(1.08); }
.opportunity-calculator-modal .modal-dialog { max-width:620px; }
.opportunity-calculator-modal .modal-content { overflow:hidden; border:1px solid var(--card-border); border-radius:22px; color:var(--text-color); background:var(--card-bg); box-shadow:0 30px 90px rgba(3,18,29,.28); }
.opportunity-calculator-modal .modal-header { align-items:flex-start; padding:1.5rem 1.6rem 1.2rem; border-bottom:1px solid var(--card-border); background:linear-gradient(145deg,color-mix(in srgb,var(--color-primary) 9%,var(--card-bg)),var(--card-bg)); }
.opportunity-calculator-modal .modal-title { margin:.15rem 0 .25rem; color:var(--text-color); background:none!important; -webkit-text-fill-color:currentColor!important; font-size:1.55rem; letter-spacing:-.035em; }
.opportunity-calculator-modal .modal-header p { color:var(--muted-text); font-size:.78rem; }
.modal-eyebrow { color:var(--color-primary); font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.opportunity-calculator-modal .modal-body { padding:1.5rem 1.6rem 1.6rem; }
.calculator-label { color:var(--muted-text); font-size:.72rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.calculator-input-group .form-control,.calculator-input-group .input-group-text { min-height:52px; font-size:1rem; }
.calculator-input-group .form-control { font-size:1.25rem; font-weight:750; font-variant-numeric:tabular-nums; }
.calculator-rate { margin-top:.45rem; color:var(--muted-text); font-size:.65rem; }
.calculator-depth-hint { min-height:34px; margin-top:.65rem; padding:.55rem .7rem; border-radius:9px; font-size:.69rem; }
.calculator-depth-hint.success { color:#047857; background:rgba(16,185,129,.11); }
.calculator-depth-hint.warning { color:#9a6700; background:rgba(245,158,11,.13); }
.calculator-flow { display:grid; grid-template-columns:1fr auto 1fr; gap:.75rem; align-items:center; margin:1.25rem 0; }
.calculator-flow>i { color:var(--color-primary); font-size:.8rem; }
.calculator-leg { min-width:0; padding:1rem; border:1px solid var(--card-border); border-radius:13px; background:color-mix(in srgb,var(--card-bg) 95%,var(--text-color)); }
.calculator-leg span,.calculator-leg b,.calculator-leg small { display:block; }
.calculator-leg span { overflow:hidden; margin-bottom:.35rem; color:var(--muted-text); font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.calculator-leg span strong { color:var(--text-color); }
.calculator-leg b { overflow:hidden; color:var(--text-color); font-size:.92rem; text-overflow:ellipsis; white-space:nowrap; }
.calculator-leg.result b { color:var(--color-success); }
.calculator-leg small { margin-top:.3rem; color:var(--muted-text); font-size:.6rem; }
.calculator-summary { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid var(--card-border); border-radius:14px; }
.calculator-summary>div { padding:1rem 1.1rem; }
.calculator-summary>div+div { border-left:1px solid var(--card-border); }
.calculator-summary span,.calculator-summary strong { display:block; }
.calculator-summary span { margin-bottom:.35rem; color:var(--muted-text); font-size:.67rem; }
.calculator-summary strong { color:var(--text-color); font-size:1.25rem; font-variant-numeric:tabular-nums; }
.calculator-summary .positive { color:var(--color-success); }
.calculator-summary .negative { color:var(--color-danger); }
.calculator-disclaimer { display:flex; gap:.55rem; margin-top:1rem; padding:.75rem; border-radius:10px; color:var(--muted-text); background:var(--op-soft); font-size:.65rem; line-height:1.5; }
.calculator-disclaimer i { flex:0 0 auto; margin-top:.12rem; color:var(--color-primary); }
:root[data-theme="dark"] .opportunity-calculator-modal .btn-close { filter:invert(1) grayscale(100%) brightness(200%); }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) .opportunity-calculator-modal .btn-close { filter:invert(1) grayscale(100%) brightness(200%); } }
@media (max-width:575.98px) { .opportunity-calculator-modal .modal-dialog { align-items:flex-end; min-height:100%; margin:0; } .opportunity-calculator-modal .modal-content { border-radius:22px 22px 0 0; } .opportunity-calculator-modal .modal-header,.opportunity-calculator-modal .modal-body { padding-left:1rem; padding-right:1rem; } .calculator-flow { grid-template-columns:1fr; } .calculator-flow>i { transform:rotate(90deg); text-align:center; } }

/* ===== NOTIFICATION SETTINGS ===== */
.notification-page { max-width:1120px; }
.page-back-link { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.25rem; color:var(--muted-text); font-size:.76rem; font-weight:700; text-decoration:none; transition:.2s ease; }
.page-back-link:hover { color:var(--color-primary); transform:translateX(-2px); }
.notification-heading { max-width:720px; margin-bottom:2rem; }
.notification-heading h1 { max-width:680px; }
.notification-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); gap:1.15rem; align-items:start; }
.notification-card { border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); box-shadow:0 14px 38px rgba(8,30,44,.07); }
.notification-form-card { padding:1.6rem; }
.notification-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.65rem; padding-bottom:1.2rem; border-bottom:1px solid var(--card-border); }
.notification-card h2 { margin:.2rem 0 0; color:var(--text-color); font-size:1.2rem; letter-spacing:-.025em; }
.section-kicker { color:var(--color-primary); font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.connection-status { display:inline-flex; align-items:center; gap:.38rem; flex:none; padding:.42rem .65rem; border-radius:99px; font-size:.66rem; font-weight:750; }
.connection-status.connected { color:#047857; background:rgba(16,185,129,.13); }
.connection-status.not-connected { color:var(--muted-text); background:var(--hover-bg); }
.notification-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.notification-field .form-label { margin-bottom:.45rem; color:var(--text-color); font-size:.75rem; font-weight:750; }
.notification-field small { display:block; margin-top:.45rem; color:var(--muted-text); font-size:.66rem; line-height:1.5; }
.notification-input .input-group-text,.notification-input .form-control { min-height:50px; }
.notification-input .input-group-text { color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); }
.notification-input .input-suffix { color:var(--muted-text); font-weight:750; }
.notification-input .form-control { border-left:0; font-size:.86rem; }
.notification-input .form-control:focus { border-left:1px solid var(--color-primary); }
.alert-preview { display:flex; align-items:center; gap:.8rem; margin-top:1.15rem; padding:.9rem 1rem; border:1px solid color-mix(in srgb,var(--color-primary) 20%,var(--card-border)); border-radius:13px; background:color-mix(in srgb,var(--color-primary) 5%,var(--card-bg)); }
.alert-preview-icon { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 12%,transparent); }
.alert-preview span,.alert-preview strong { display:block; }
.alert-preview span { color:var(--muted-text); font-size:.64rem; }
.alert-preview strong { margin-top:.08rem; color:var(--text-color); font-size:.78rem; }
.notification-actions { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:1.35rem; }
.notification-actions .btn { display:inline-flex; align-items:center; justify-content:center; gap:.48rem; min-height:44px; padding:.65rem .9rem; font-size:.73rem; font-weight:750; }
.button-spinner { display:none; }
.notification-actions .is-loading .button-spinner { display:inline-block; }
.notification-actions .is-loading>i { display:none; }
.telegram-guide-card { position:relative; overflow:hidden; padding:1.6rem; }
.telegram-guide-card:before { position:absolute; top:-70px; right:-65px; width:180px; height:180px; border-radius:50%; background:rgba(34,158,217,.09); content:""; }
.telegram-mark { position:relative; display:grid; place-items:center; width:48px; height:48px; margin-bottom:1rem; border-radius:14px; color:#fff; background:linear-gradient(145deg,#2aabee,#1785bd); box-shadow:0 10px 24px rgba(34,158,217,.24); font-size:1.45rem; }
.telegram-guide-card>p { margin:.55rem 0 1.2rem; color:var(--muted-text); font-size:.75rem; line-height:1.6; }
.telegram-guide-card>p strong { color:var(--text-color); }
.telegram-steps { display:grid; gap:.85rem; margin:0; padding:0; list-style:none; }
.telegram-steps li { display:flex; align-items:flex-start; gap:.7rem; }
.telegram-steps li>span { display:grid; place-items:center; width:25px; height:25px; flex:none; border-radius:8px; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 10%,transparent); font-size:.65rem; font-weight:850; }
.telegram-steps strong,.telegram-steps small { display:block; }
.telegram-steps strong { color:var(--text-color); font-size:.72rem; }
.telegram-steps small { margin-top:.1rem; color:var(--muted-text); font-size:.64rem; line-height:1.45; }
.telegram-widget-wrap { display:flex; align-items:center; flex-direction:column; gap:.7rem; margin-top:1.35rem; padding:1rem; border:1px dashed var(--card-border); border-radius:13px; background:var(--hover-bg); text-align:center; }
.telegram-widget-wrap>span { color:var(--muted-text); font-size:.65rem; }
.privacy-note { display:flex; align-items:flex-start; gap:.5rem; margin-top:1rem; color:var(--muted-text); font-size:.61rem; line-height:1.5; }
.privacy-note i { margin-top:.12rem; color:var(--color-primary); }
.notification-message-area { min-height:0; }
.notification-feedback { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; padding:.85rem 1rem; border:1px solid transparent; border-radius:12px; font-size:.72rem; font-weight:650; }
.notification-feedback.success { color:#047857; border-color:rgba(16,185,129,.22); background:rgba(16,185,129,.11); }
.notification-feedback.danger { color:#b42318; border-color:rgba(239,68,68,.2); background:rgba(239,68,68,.09); }
@media (max-width:991.98px) { .notification-layout { grid-template-columns:1fr; } .telegram-guide-card { display:grid; grid-template-columns:auto 1fr; column-gap:1rem; } .telegram-guide-card .telegram-mark { grid-row:1/4; } .telegram-guide-card .telegram-steps,.telegram-guide-card .telegram-widget-wrap,.telegram-guide-card .privacy-note { grid-column:1/-1; } }
@media (max-width:575.98px) { .notification-heading { margin-bottom:1.35rem; } .notification-heading h1 { font-size:2rem; } .notification-form-card,.telegram-guide-card { padding:1.15rem; border-radius:17px; } .notification-card-header { align-items:flex-start; flex-direction:column; } .notification-fields { grid-template-columns:1fr; } .notification-actions { flex-direction:column; } .notification-actions .btn { width:100%; } .telegram-guide-card { display:block; } }

/* ===== EXCHANGE SETTINGS ===== */
.exchange-settings-page { max-width:1120px; }
.exchange-settings-heading { max-width:760px; margin-bottom:1.8rem; }
.exchange-settings-form { display:grid; gap:1rem; }
.exchange-settings-summary { display:grid; grid-template-columns:180px 180px 1fr; gap:.75rem; padding:.85rem; border:1px solid var(--card-border); border-radius:16px; background:var(--card-bg); }
.exchange-settings-summary>div { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:11px; background:var(--hover-bg); }
.summary-icon { display:grid; place-items:center; width:34px; height:34px; grid-row:1/3; border-radius:10px; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 12%,transparent); }
.summary-icon.opportunity { color:#f59e0b; background:rgba(245,158,11,.13); }
.exchange-settings-summary span:not(.summary-icon) { color:var(--muted-text); font-size:.62rem; }
.exchange-settings-summary strong { grid-column:3; grid-row:1/3; color:var(--text-color); font-size:1.15rem; }
.exchange-settings-summary>p { display:flex; align-items:center; gap:.5rem; margin:0; padding:.65rem; color:var(--muted-text); font-size:.65rem; line-height:1.5; }
.exchange-settings-summary>p i { color:var(--color-primary); }
.exchange-preference-card { padding:1.45rem; border:1px solid var(--card-border); border-radius:19px; background:var(--card-bg); box-shadow:0 12px 32px rgba(8,30,44,.05); }
.preference-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; }
.preference-card-header h2 { margin:.18rem 0 .28rem; color:var(--text-color); font-size:1.13rem; }
.preference-card-header p { margin:0; color:var(--muted-text); font-size:.7rem; }
.select-all-button,.clear-selection-button { display:inline-flex; align-items:center; gap:.4rem; flex:none; font-size:.66rem; }
.exchange-choice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.65rem; }
.exchange-choice { position:relative; display:flex; align-items:center; gap:.65rem; min-width:0; padding:.78rem; border:1px solid var(--card-border); border-radius:13px; background:var(--card-bg); cursor:pointer; transition:.18s ease; }
.exchange-choice:hover { border-color:color-mix(in srgb,var(--color-primary) 35%,var(--card-border)); transform:translateY(-1px); }
.exchange-choice.selected { border-color:color-mix(in srgb,var(--color-primary) 45%,var(--card-border)); background:color-mix(in srgb,var(--color-primary) 5%,var(--card-bg)); }
.exchange-choice>input { position:absolute; opacity:0; pointer-events:none; }
.exchange-choice-mark { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 11%,transparent); font-size:.75rem; font-weight:850; }
.exchange-choice-mark.opportunity { color:#f59e0b; background:rgba(245,158,11,.12); }
.exchange-choice-copy { min-width:0; flex:1; }
.exchange-choice-copy strong,.exchange-choice-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exchange-choice-copy strong { color:var(--text-color); font-size:.72rem; }
.exchange-choice-copy small { margin-top:.12rem; color:var(--muted-text); font-size:.58rem; }
.exchange-check { display:grid; place-items:center; width:19px; height:19px; flex:none; border:1px solid var(--card-border); border-radius:6px; color:transparent; font-size:.55rem; }
.exchange-choice.selected .exchange-check { border-color:var(--color-primary); color:#fff; background:var(--color-primary); }
.sticky-save-bar { position:sticky; bottom:1rem; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border:1px solid var(--card-border); border-radius:15px; background:color-mix(in srgb,var(--card-bg) 92%,transparent); box-shadow:0 16px 45px rgba(5,22,35,.16); backdrop-filter:blur(15px); }
.sticky-save-bar strong,.sticky-save-bar span { display:block; }
.sticky-save-bar strong { color:var(--text-color); font-size:.75rem; }
.sticky-save-bar span { color:var(--muted-text); font-size:.61rem; }
.sticky-save-bar .btn { display:inline-flex; align-items:center; gap:.45rem; flex:none; font-size:.7rem; }

/* ===== ACCOUNT PASSWORD ===== */
.account-panel-heading { margin-bottom:1.35rem; }
.account-panel-heading h2 { margin:.2rem 0 .3rem; color:var(--text-color); font-size:1.3rem; }
.account-panel-heading p { margin:0; color:var(--muted-text); font-size:.72rem; }
.password-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:1rem; align-items:start; }
.password-form { display:grid; gap:1rem; }
.password-field .form-label { margin-bottom:.4rem; color:var(--text-color); font-size:.72rem; font-weight:750; }
.password-field .text-danger { font-size:.62rem; }
.password-submit { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; justify-self:start; min-height:44px; font-size:.72rem; }
.password-advice { padding:1rem; border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--card-border)); border-radius:14px; background:color-mix(in srgb,var(--color-primary) 4%,var(--card-bg)); }
.password-advice-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 12%,transparent); }
.password-advice h3 { margin:.7rem 0 .6rem; color:var(--text-color); font-size:.86rem; }
.password-advice ul { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; }
.password-advice li { display:flex; gap:.4rem; color:var(--muted-text); font-size:.63rem; }
.password-advice li i { margin-top:.13rem; color:#10b981; }

/* ===== ADMIN USERS ===== */
.admin-users-page,.admin-user-form-page { max-width:1160px; }
.admin-user-form-page.narrow { max-width:760px; }
.admin-page-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.admin-page-hero h1 { margin:.35rem 0 .35rem; color:var(--text-color); font-size:2.35rem; letter-spacing:-.045em; }
.admin-page-hero p { max-width:650px; margin:0; color:var(--muted-text); font-size:.78rem; }
.admin-page-hero>.btn { display:inline-flex; align-items:center; gap:.45rem; flex:none; }
.admin-user-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1rem; }
.admin-user-stats>div { padding:1rem; border:1px solid var(--card-border); border-radius:15px; background:var(--card-bg); }
.admin-user-stats span,.admin-user-stats small { display:block; color:var(--muted-text); font-size:.62rem; }
.admin-user-stats strong { display:block; margin:.15rem 0; color:var(--text-color); font-size:1.35rem; }
.admin-users-card,.admin-edit-card { border:1px solid var(--card-border); border-radius:19px; background:var(--card-bg); box-shadow:0 14px 38px rgba(8,30,44,.06); }
.admin-users-card { overflow:hidden; }
.admin-users-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; border-bottom:1px solid var(--card-border); }
.admin-users-toolbar h2 { margin:0; color:var(--text-color); font-size:1rem; }
.admin-users-toolbar span { color:var(--muted-text); font-size:.63rem; }
.admin-user-search { position:relative; width:260px; }
.admin-user-search i { position:absolute; top:50%; left:.75rem; color:var(--muted-text); font-size:.68rem; transform:translateY(-50%); }
.admin-user-search input { width:100%; min-height:40px; padding:.5rem .7rem .5rem 2rem; border:1px solid var(--card-border); border-radius:10px; color:var(--text-color); background:var(--card-bg); font-size:.68rem; }
.admin-users-table thead th { padding:.75rem 1rem; border-color:var(--card-border); color:var(--muted-text); background:var(--table-header-bg,var(--hover-bg)); font-size:.6rem; letter-spacing:.05em; text-transform:uppercase; }
.admin-users-table tbody td { padding:.85rem 1rem; border-color:var(--card-border); }
.admin-user-cell { display:flex; align-items:center; gap:.65rem; }
.user-avatar { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:10px; color:#fff; background:linear-gradient(145deg,var(--color-primary),#0e7490); font-size:.72rem; font-weight:850; }
.admin-user-cell strong,.admin-user-cell small { display:block; }
.admin-user-cell strong { color:var(--text-color); font-size:.72rem; }
.admin-user-cell small { margin-top:.1rem; color:var(--muted-text); font-size:.58rem; }
.role-list { display:flex; gap:.3rem; flex-wrap:wrap; }
.role-badge { padding:.3rem .48rem; border-radius:7px; color:#0369a1; background:rgba(14,165,233,.11); font-size:.58rem; font-weight:750; }
.role-badge.admin { color:#7c3aed; background:rgba(124,58,237,.11); }
.role-badge.empty { color:var(--muted-text); background:var(--hover-bg); }
.user-status { display:inline-flex; align-items:center; gap:.35rem; padding:.34rem .5rem; border-radius:8px; font-size:.59rem; font-weight:750; }
.user-status.active { color:#047857; background:rgba(16,185,129,.11); }
.user-status.locked { color:#b42318; background:rgba(239,68,68,.1); }
.admin-row-actions { display:flex; justify-content:flex-end; gap:.35rem; }
.admin-row-actions form { display:inline; }
.admin-row-actions .btn { display:inline-flex; align-items:center; gap:.35rem; min-height:34px; font-size:.62rem; }
.admin-empty { display:flex; align-items:center; flex-direction:column; padding:3rem; color:var(--muted-text); text-align:center; }
.admin-empty i { margin-bottom:.75rem; color:var(--color-primary); font-size:1.8rem; }
.admin-empty strong,.admin-empty span { display:block; }
.admin-empty strong { color:var(--text-color); }
.admin-empty span { margin-top:.25rem; font-size:.7rem; }
.admin-edit-card { padding:1.5rem; }
.admin-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.admin-form-section { margin-top:1.25rem; padding-top:1.15rem; border-top:1px solid var(--card-border); }
.admin-form-section h2 { margin:0; color:var(--text-color); font-size:.95rem; }
.admin-form-section>p { margin:.25rem 0 .8rem; color:var(--muted-text); font-size:.65rem; }
.role-choice-grid { display:flex; gap:.55rem; flex-wrap:wrap; }
.role-choice { cursor:pointer; }
.role-choice input { position:absolute; opacity:0; }
.role-choice span { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .7rem; border:1px solid var(--card-border); border-radius:10px; color:var(--muted-text); font-size:.66rem; font-weight:700; }
.role-choice input:checked+span { border-color:var(--color-primary); color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 8%,var(--card-bg)); }
.admin-confirm-choice { display:flex; align-items:flex-start; gap:.65rem; margin-top:1.2rem; padding:.85rem; border-radius:12px; background:var(--hover-bg); cursor:pointer; }
.admin-confirm-choice input { margin-top:.2rem; accent-color:var(--color-primary); }
.admin-confirm-choice strong,.admin-confirm-choice small { display:block; }
.admin-confirm-choice strong { color:var(--text-color); font-size:.7rem; }
.admin-confirm-choice small { color:var(--muted-text); font-size:.6rem; }
.admin-form-actions { display:flex; gap:.6rem; margin-top:1.3rem; }
.admin-form-actions .btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; }
.locked-user-note,.security-warning { display:flex; align-items:flex-start; gap:.55rem; margin-top:1rem; padding:.8rem; border-radius:11px; font-size:.64rem; line-height:1.5; }
.locked-user-note { color:#b42318; background:rgba(239,68,68,.09); }
.security-warning { color:#9a6700; background:rgba(245,158,11,.11); }
.hub-card.admin { border-color:color-mix(in srgb,#7c3aed 25%,var(--card-border)); }

/* Portfolio */
.portfolio-page { --portfolio-green:#00b989; }
.portfolio-pull-refresh { display:none; position:fixed; z-index:1040; top:calc(env(safe-area-inset-top,0px) + 67px); left:50%; align-items:center; gap:.45rem; min-height:38px; padding:.5rem .75rem; border:1px solid color-mix(in srgb,var(--color-primary) 28%,var(--card-border)); border-radius:999px; color:var(--text-color); background:color-mix(in srgb,var(--card-bg) 94%,transparent); box-shadow:0 10px 28px rgba(4,35,48,.18); font-size:.68rem; font-weight:800; opacity:0; pointer-events:none; transform:translate(-50%,calc(-52px + var(--pull-distance,0px))); transition:opacity .14s ease,transform .08s linear,background-color .16s ease,color .16s ease; backdrop-filter:blur(10px); white-space:nowrap; }
.portfolio-pull-refresh i { color:var(--color-primary); transition:transform .16s ease; }
.portfolio-pull-refresh.visible { opacity:1; }
.portfolio-pull-refresh.ready,.portfolio-pull-refresh.refreshing,.portfolio-pull-refresh.complete { border-color:#00a783; color:#fff; background:#00a783; }
.portfolio-pull-refresh.ready i { color:#fff; transform:rotate(180deg); }
.portfolio-pull-refresh.refreshing,.portfolio-pull-refresh.complete,.portfolio-pull-refresh.failed { transform:translate(-50%,8px); }
.portfolio-pull-refresh.refreshing i,.portfolio-pull-refresh.complete i { color:#fff; }
.portfolio-pull-refresh.failed { border-color:#d8444f; color:#fff; background:#d8444f; }
.portfolio-pull-refresh.failed i { color:#fff; }
.portfolio-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:1.2rem; padding:1.6rem 1.8rem; overflow:hidden; border:1px solid rgba(16,185,129,.2); border-radius:22px; color:#fff; background:linear-gradient(120deg,#082a37 0%,#074254 58%,#08756f 140%); box-shadow:0 18px 48px rgba(4,48,64,.13); position:relative; }
.portfolio-hero:after { content:""; position:absolute; right:-55px; bottom:-95px; width:260px; height:260px; border:38px solid rgba(255,255,255,.045); border-radius:50%; }
.portfolio-hero>div { position:relative; z-index:1; }
.portfolio-hero .eyebrow { display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.55rem; color:#73e7d1; font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-hero h1 { margin:0; color:#fff; font-size:clamp(1.7rem,3vw,2.45rem); font-weight:850; letter-spacing:-.035em; }
.portfolio-hero p { max-width:690px; margin:.45rem 0 0; color:rgba(255,255,255,.72); font-size:.76rem; line-height:1.6; }
.portfolio-live-badge { display:flex; align-items:center; gap:.45rem; flex:none; padding:.55rem .72rem; border:1px solid rgba(255,255,255,.14); border-radius:11px; color:rgba(255,255,255,.8); background:rgba(3,24,33,.25); font-size:.63rem; font-weight:700; }
.portfolio-live-badge span { width:8px; height:8px; border-radius:50%; background:#43e6b5; box-shadow:0 0 0 5px rgba(67,230,181,.12); }
.portfolio-alert { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; padding:.75rem .9rem; border-radius:12px; font-size:.7rem; font-weight:700; }
.portfolio-alert.success { color:#047857; background:rgba(16,185,129,.11); }
.portfolio-alert.error { color:#b42318; background:rgba(239,68,68,.1); }
.portfolio-switcher { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding:1rem 1.15rem; border:1px solid var(--card-border); border-radius:16px; background:var(--card-bg); box-shadow:0 10px 28px rgba(8,30,44,.045); }
.portfolio-select-wrap label { display:block; margin-bottom:.3rem; color:var(--muted-text); font-size:.57rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.portfolio-select-wrap select,.portfolio-create-form input { min-height:39px; border:1px solid var(--card-border); border-radius:10px; outline:none; color:var(--text-color); background:var(--card-bg); font-size:.68rem; }
.portfolio-select-wrap select { min-width:220px; padding:.45rem 2rem .45rem .7rem; font-weight:750; }
.portfolio-management-actions,.portfolio-create-form { display:flex; align-items:center; gap:.45rem; }
.portfolio-management-actions form { margin:0; }
.portfolio-management-actions .btn { display:inline-flex; align-items:center; justify-content:center; gap:.38rem; min-height:39px; border:1px solid var(--card-border); border-radius:10px; color:var(--text-color); background:var(--card-bg); font-size:.62rem; font-weight:750; }
.portfolio-management-actions .btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.portfolio-create-form input { width:175px; padding:.45rem .65rem; }
.portfolio-layout { display:block; }
.portfolio-form-card,.portfolio-list-card,.portfolio-stat { border:1px solid var(--card-border); background:var(--card-bg); box-shadow:0 14px 38px rgba(8,30,44,.055); }
.portfolio-form-card { position:sticky; top:1rem; padding:1.25rem; border-radius:19px; }
.portfolio-position-dialog { width:min(92vw,470px); max-width:none; max-height:calc(100dvh - 1rem); padding:0; overflow:hidden; border:0; border-radius:20px; color:var(--text-color); background:transparent; box-shadow:0 28px 80px rgba(3,25,38,.28); }
.portfolio-position-dialog::backdrop { background:rgba(3,20,31,.58); backdrop-filter:blur(3px); }
.portfolio-dialog-panel { max-height:calc(100dvh - 1rem); padding:1.35rem; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); }
body:has(.portfolio-position-dialog[open]) { overflow:hidden; }
.portfolio-dialog-panel .portfolio-card-heading { padding-right:2.3rem; position:relative; }
.portfolio-dialog-close { position:absolute; top:0; right:0; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--card-border); border-radius:9px; color:var(--muted-text); background:var(--card-bg); }
.portfolio-dialog-close:hover { color:var(--text-color); background:var(--hover-bg); }
.portfolio-confirm-dialog { width:min(90vw,410px); max-width:none; padding:0; overflow:hidden; border:0; border-radius:20px; color:var(--text-color); background:transparent; box-shadow:0 28px 80px rgba(3,25,38,.3); }
.portfolio-confirm-dialog::backdrop { background:rgba(3,20,31,.58); backdrop-filter:blur(3px); }
body:has(.portfolio-confirm-dialog[open]) { overflow:hidden; }
.portfolio-confirm-panel { padding:1.45rem; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); text-align:center; }
.portfolio-confirm-icon { display:grid; width:48px; height:48px; margin:0 auto .9rem; place-items:center; border-radius:15px; color:#c23843; background:rgba(226,62,73,.11); font-size:1.1rem; }
.portfolio-confirm-panel h2 { margin:0; color:var(--text-color); font-size:1.1rem; }
.portfolio-confirm-panel p { margin:.5rem auto 1.2rem; color:var(--muted-text); font-size:.75rem; line-height:1.55; }
.portfolio-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.portfolio-confirm-actions .btn { min-height:44px; border-radius:11px; font-size:.74rem; font-weight:800; }
.portfolio-confirm-cancel { border:1px solid var(--card-border); color:var(--text-color); background:var(--card-bg); }
.portfolio-confirm-delete { border:1px solid #d8444f; color:#fff; background:#d8444f; }
.portfolio-confirm-delete:hover { border-color:#bd303b; color:#fff; background:#bd303b; }
.portfolio-add-trigger { border-color:transparent!important; color:#fff!important; background:linear-gradient(135deg,#00a99a,#008d82)!important; }
.portfolio-card-heading { display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.portfolio-heading-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:11px; color:#007e75; background:rgba(16,185,129,.12); }
.portfolio-card-heading h2,.portfolio-list-header h2 { margin:0; color:var(--text-color); font-size:.95rem; font-weight:800; }
.portfolio-card-heading p,.portfolio-list-header p { margin:.18rem 0 0; color:var(--muted-text); font-size:.62rem; }
.portfolio-field { margin-bottom:.9rem; }
.portfolio-field label { display:block; margin-bottom:.38rem; color:var(--text-color); font-size:.65rem; font-weight:750; }
.portfolio-field input { width:100%; min-height:43px; padding:.62rem .72rem; border:1px solid var(--card-border); border-radius:11px; outline:none; color:var(--text-color); background:var(--card-bg); font-size:.75rem; transition:border-color .18s,box-shadow .18s; }
.portfolio-field input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 13%,transparent); }
.portfolio-input-with-icon,.portfolio-input-prefix { position:relative; }
.portfolio-input-with-icon i { position:absolute; z-index:1; top:50%; left:.8rem; color:var(--color-primary); font-size:.72rem; transform:translateY(-50%); }
.portfolio-input-with-icon input { padding-left:2.25rem; text-transform:uppercase; }
.portfolio-input-prefix span { position:absolute; z-index:1; top:50%; left:.8rem; color:var(--muted-text); font-size:.75rem; transform:translateY(-50%); }
.portfolio-input-prefix input { padding-left:1.75rem; }
.portfolio-field>span,.portfolio-validation { display:block; margin-top:.28rem; color:#dc2626; font-size:.58rem; }
.portfolio-validation:empty { display:none; }
.portfolio-field small { display:block; margin-top:.3rem; color:var(--muted-text); font-size:.55rem; line-height:1.45; }
.portfolio-submit { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:43px; margin-top:.25rem; border:0; border-radius:11px; color:#fff; background:linear-gradient(135deg,#00a99a,#008d82); font-size:.68rem; font-weight:800; }
.portfolio-submit:hover { color:#fff; filter:brightness(1.04); }
.portfolio-cancel { width:100%; margin-top:.45rem; color:var(--muted-text); font-size:.64rem; }
.portfolio-overview { min-width:0; }
.portfolio-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-bottom:.8rem; }
.portfolio-stat { min-width:0; padding:1rem 1.1rem; border-radius:16px; }
.portfolio-stat span,.portfolio-stat small,.portfolio-stat strong { display:block; }
.portfolio-stat>span { color:var(--muted-text); font-size:.58rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.portfolio-stat strong { margin:.25rem 0 .08rem; overflow:hidden; color:var(--text-color); font-size:1.22rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.portfolio-stat small { color:var(--muted-text); font-size:.56rem; }
.portfolio-stat .portfolio-total-usd { margin:.08rem 0 .18rem; color:color-mix(in srgb,var(--text-color) 76%,var(--muted-text)); font-size:.63rem; font-weight:750; }
.portfolio-stat.primary { border-color:rgba(16,185,129,.27); background:linear-gradient(140deg,color-mix(in srgb,#10b981 8%,var(--card-bg)),var(--card-bg)); }
.portfolio-stat.primary strong,.portfolio-stat.positive strong { color:#00a77d; }
.portfolio-stat.negative strong { color:#dc4b52; }
.portfolio-list-card { overflow:hidden; border-radius:19px; }
.portfolio-chart-card { margin-bottom:.8rem; overflow:hidden; border:1px solid var(--card-border); border-radius:19px; background:var(--card-bg); box-shadow:0 14px 38px rgba(8,30,44,.055); }
.portfolio-chart-currency { padding:.34rem .5rem; border-radius:8px; color:#008d75; background:rgba(16,185,129,.11); font-size:.57rem; font-weight:800; }
.portfolio-chart-toggle { display:inline-flex; align-items:center; gap:.4rem; padding:0; border:0; color:var(--muted-text); background:transparent; font-size:.6rem; }
.portfolio-chart-toggle i { transition:transform .2s ease; }
.portfolio-chart-card.collapsed .portfolio-chart-body { display:none; }
.portfolio-chart-card.collapsed .portfolio-chart-toggle i { transform:rotate(180deg); }
.portfolio-chart-body { position:relative; display:flex; height:260px; padding:.65rem .7rem .35rem; flex-direction:column; }
.portfolio-chart-canvas { position:relative; min-height:0; flex:1; }
.portfolio-chart-body canvas { display:block; width:100%!important; height:100%!important; }
.portfolio-chart-ranges { display:flex; z-index:2; align-items:center; justify-content:flex-end; gap:.3rem; padding:0 .15rem .35rem; }
.portfolio-chart-ranges button { min-width:40px; min-height:27px; padding:.28rem .48rem; border:1px solid var(--card-border); border-radius:8px; color:var(--muted-text); background:var(--hover-bg); font-size:.58rem; font-weight:800; transition:border-color .15s,color .15s,background-color .15s,opacity .15s; }
.portfolio-chart-ranges button:hover { border-color:color-mix(in srgb,var(--color-primary) 55%,var(--card-border)); color:var(--text-color); }
.portfolio-chart-ranges button.active { border-color:color-mix(in srgb,var(--color-primary) 55%,var(--card-border)); color:#007f73; background:color-mix(in srgb,var(--color-primary) 13%,var(--card-bg)); }
.portfolio-chart-ranges.loading button { cursor:wait; opacity:.55; pointer-events:none; }
.portfolio-chart-start { position:absolute; top:50%; left:50%; display:flex; align-items:center; gap:.45rem; padding:.55rem .7rem; border:1px solid var(--card-border); border-radius:10px; color:var(--muted-text); background:color-mix(in srgb,var(--card-bg) 91%,transparent); font-size:.6rem; transform:translate(-50%,-50%); white-space:nowrap; }
.portfolio-list-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; border-bottom:1px solid var(--card-border); }
.portfolio-updated { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted-text); font-size:.57rem; }
.portfolio-price-warning { display:flex; align-items:center; gap:.45rem; padding:.65rem 1.25rem; color:#9a6700; background:rgba(245,158,11,.09); font-size:.6rem; }
.portfolio-table-wrap { overflow-x:auto; }
.portfolio-table { width:100%; border-collapse:collapse; }
.portfolio-table th { padding:.72rem .85rem; color:var(--muted-text); background:var(--table-header-bg,var(--hover-bg)); font-size:.54rem; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; }
.portfolio-table td { padding:.85rem; border-top:1px solid var(--card-border); color:var(--text-color); font-size:.66rem; vertical-align:middle; }
.portfolio-table tbody tr:first-child td { border-top:0; }
.portfolio-table td>strong,.portfolio-table td>small { display:block; white-space:nowrap; }
.portfolio-table td>strong { font-size:.68rem; }
.portfolio-table td>small { margin-top:.18rem; color:var(--muted-text); font-size:.53rem; }
.portfolio-table td>.portfolio-usd-price { color:color-mix(in srgb,var(--text-color) 74%,var(--muted-text)); font-size:.57rem; font-weight:700; }
.portfolio-asset { display:flex; align-items:center; gap:.55rem; }
.portfolio-asset>span { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; color:#fff; background:linear-gradient(145deg,#0da7a0,#075f70); font-size:.68rem; font-weight:850; }
.portfolio-asset>img { width:34px; height:34px; flex:none; border-radius:50%; object-fit:cover; background:var(--hover-bg); }
.portfolio-asset strong,.portfolio-asset small { display:block; }
.portfolio-asset strong { font-size:.72rem; }
.portfolio-asset small { color:var(--muted-text); font-size:.53rem; }
.portfolio-result { display:inline-block!important; padding:.32rem .45rem; border-radius:8px; }
.portfolio-result.positive { color:#008d6b; background:rgba(16,185,129,.11); }
.portfolio-result.negative { color:#c63f49; background:rgba(239,68,68,.09); }
.portfolio-table small.positive { color:#008d6b; }.portfolio-table small.negative { color:#c63f49; }
.portfolio-table .unavailable { color:var(--muted-text); font-size:.6rem; }
.portfolio-actions { display:flex; justify-content:flex-end; gap:.25rem; }
.portfolio-actions form { display:inline-flex; }
.portfolio-actions .btn { display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid var(--card-border); border-radius:8px; color:var(--muted-text); background:var(--card-bg); font-size:.58rem; }
.portfolio-actions .btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.portfolio-empty { padding:3.3rem 1.5rem; text-align:center; }
.portfolio-empty>div { display:grid; place-items:center; width:52px; height:52px; margin:0 auto .8rem; border-radius:16px; color:#008d82; background:rgba(16,185,129,.11); }
.portfolio-empty h3 { margin:0; color:var(--text-color); font-size:.9rem; }.portfolio-empty p { max-width:360px; margin:.35rem auto 0; color:var(--muted-text); font-size:.64rem; }
.portfolio-disclaimer { display:flex; align-items:flex-start; gap:.4rem; padding:.75rem 1.25rem; border-top:1px solid var(--card-border); color:var(--muted-text); background:var(--table-header-bg,var(--hover-bg)); font-size:.54rem; line-height:1.5; }
.portfolio-page .tick-up { color:#00a77d!important; background:transparent!important; box-shadow:none!important; }.portfolio-page .tick-down { color:#dc4b52!important; background:transparent!important; box-shadow:none!important; }
@media (max-width:991.98px) { .exchange-choice-grid { grid-template-columns:repeat(3,1fr); } .exchange-settings-summary { grid-template-columns:1fr 1fr; } .exchange-settings-summary>p { grid-column:1/-1; } .password-layout { grid-template-columns:1fr; } }
@media (max-width:991.98px) { .portfolio-layout { grid-template-columns:1fr; } .portfolio-form-card { position:static; } }
@media (max-width:767.98px) { .exchange-choice-grid { grid-template-columns:repeat(2,1fr); } .admin-page-hero { align-items:flex-start; flex-direction:column; } .admin-user-stats { grid-template-columns:repeat(3,1fr); } .admin-users-toolbar { align-items:stretch; flex-direction:column; } .admin-user-search { width:100%; } .admin-users-table th:nth-child(2),.admin-users-table td:nth-child(2) { display:none; } .admin-form-grid { grid-template-columns:1fr; } }
@media (max-width:767.98px) { .portfolio-hero { align-items:flex-start; flex-direction:column; padding:1.25rem; } .portfolio-stats { grid-template-columns:1fr 1fr; } .portfolio-stat.primary { grid-column:1/-1; } .portfolio-table thead { display:none; } .portfolio-table,.portfolio-table tbody,.portfolio-table tr,.portfolio-table td { display:block; width:100%; } .portfolio-table tr { display:grid; grid-template-columns:1fr 1fr; padding:.8rem; border-top:1px solid var(--card-border); } .portfolio-table tbody tr:first-child { border-top:0; } .portfolio-table td { padding:.48rem; border:0; } .portfolio-table td:before { content:attr(data-label); display:block; margin-bottom:.2rem; color:var(--muted-text); font-size:.52rem; font-weight:750; letter-spacing:.035em; text-transform:uppercase; } .portfolio-table .portfolio-actions { grid-column:1/-1; justify-content:flex-end; padding-top:.25rem; } .portfolio-table .portfolio-actions:before { display:none; } .portfolio-actions .btn { width:38px; height:34px; } }
@media (max-width:767.98px) { .portfolio-pull-refresh { display:flex; } }
@media (max-width:767.98px) { .portfolio-table-wrap { padding:.65rem; background:var(--hover-bg); } .portfolio-table tbody { display:flex; flex-direction:column; gap:.65rem; } .portfolio-table tr { position:relative; gap:.35rem .65rem; border:1px solid var(--card-border)!important; border-radius:15px; background:var(--card-bg); box-shadow:0 8px 22px rgba(8,30,44,.055); } .portfolio-table td:first-child { grid-column:1/-1; margin-bottom:.15rem; padding-right:5.5rem; padding-bottom:.65rem; border-bottom:1px solid var(--card-border); } .portfolio-table td:first-child:before { display:none; } .portfolio-table .portfolio-actions { position:absolute; top:.65rem; right:.65rem; display:flex!important; width:auto; padding:0; } .portfolio-table td>strong { font-size:.79rem; } .portfolio-table td>small,.portfolio-asset small { font-size:.59rem; } .portfolio-result { padding:.3rem .42rem; } }
@media (max-width:767.98px) { .portfolio-switcher { align-items:stretch; flex-direction:column; } .portfolio-select-wrap select { width:100%; } .portfolio-management-actions { align-items:stretch; flex-direction:column; } .portfolio-management-actions>form,.portfolio-create-form input { width:100%; } .portfolio-management-actions .btn { width:100%; } .portfolio-create-form { width:100%; } .portfolio-create-form .btn { width:auto; } .portfolio-chart-body { height:210px; padding-left:.2rem; } }
@media (max-width:575.98px) { .exchange-settings-summary { grid-template-columns:1fr 1fr; } .exchange-settings-summary>div { grid-template-columns:30px 1fr auto; padding:.45rem; } .summary-icon { width:29px; height:29px; } .exchange-preference-card { padding:1rem; } .preference-card-header { flex-direction:column; } .exchange-choice-grid { grid-template-columns:1fr 1fr; gap:.45rem; } .exchange-choice { padding:.6rem .5rem; gap:.45rem; } .exchange-choice-mark { width:29px; height:29px; } .exchange-choice-copy small { display:none; } .sticky-save-bar { align-items:stretch; flex-direction:column; bottom:.6rem; } .sticky-save-bar .btn { width:100%; justify-content:center; } .admin-user-stats { gap:.45rem; } .admin-user-stats>div { padding:.75rem; } .admin-users-table th:nth-child(3),.admin-users-table td:nth-child(3) { display:none; } .admin-users-table thead th,.admin-users-table tbody td { padding:.7rem .55rem; } .admin-user-cell strong { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .admin-row-actions .btn span { display:none; } .admin-edit-card { padding:1rem; } .admin-form-actions { flex-direction:column; } .admin-form-actions .btn { justify-content:center; width:100%; } }

/* Top-50 prijsfeed per exchange */
.exchange-price-control { min-width:240px; }
.price-exchange-selector { margin-bottom:.65rem; padding:.45rem .6rem; border:1px solid var(--card-border); border-radius:12px; background:var(--card-bg); box-shadow:0 6px 18px rgba(8,30,44,.04); }
.price-exchange-selector .exchange-price-control { display:grid; grid-template-columns:auto minmax(0,1fr); width:100%; align-items:center; gap:.65rem; }
.price-exchange-selector .exchange-price-control label { margin:0; color:var(--muted-text); font-size:.65rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.price-exchange-selector .exchange-price-control select { min-height:38px!important; padding-top:.3rem; padding-bottom:.3rem; border-color:var(--card-border)!important; border-radius:9px; color:var(--text-color)!important; background-color:var(--hover-bg)!important; -webkit-text-fill-color:var(--text-color); font-size:.82rem; font-weight:800; }
.price-feed-explainer { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin:-.25rem 0 1rem; }
.price-feed-explainer span { display:inline-flex; align-items:center; gap:.42rem; padding:.55rem .8rem; border:1px solid var(--card-border); border-radius:999px; background:var(--card-bg); color:var(--muted-text); font-size:.72rem; }
.price-feed-explainer i { color:var(--primary-color); }
.price-ranking-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; max-width:520px; margin:0 0 1rem; padding:.32rem; border:1px solid var(--card-border); border-radius:13px; background:color-mix(in srgb,var(--card-bg) 72%,var(--hover-bg)); }
.price-ranking-tab { display:flex; min-height:42px; align-items:center; justify-content:center; gap:.45rem; padding:.55rem .75rem; border:0; border-radius:10px; color:var(--muted-text); background:transparent; font-size:.72rem; font-weight:800; transition:color .18s ease,background .18s ease,box-shadow .18s ease; }
.price-ranking-tab:hover { color:var(--text-color); }
.price-ranking-tab.active { color:#007f76; background:var(--card-bg); box-shadow:0 5px 16px rgba(8,30,44,.08); }
.price-ranking-tab.active i { color:var(--color-primary); }
.selected-exchange-card { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; margin-bottom:1rem; padding:1rem 1.2rem; border:1px solid var(--card-border); border-radius:18px; background:var(--card-bg); box-shadow:0 12px 32px rgba(8,30,44,.06); }
.selected-exchange-identity { display:flex; align-items:center; gap:.8rem; }
.selected-exchange-identity img { width:46px; height:46px; padding:7px; border:1px solid var(--card-border); border-radius:13px; background:#fff; object-fit:contain; }
.selected-exchange-identity div,.selected-exchange-metrics div { display:flex; flex-direction:column; }
.selected-exchange-identity span,.selected-exchange-metrics span { color:var(--muted-text); font-size:.65rem; }
.selected-exchange-identity strong { color:var(--text-color); font-size:1.08rem; }
.selected-exchange-metrics { display:grid; grid-template-columns:repeat(3,minmax(110px,auto)); gap:1.6rem; text-align:right; }
.selected-exchange-metrics strong { color:var(--text-color); font-size:.84rem; font-variant-numeric:tabular-nums; }
.top-volume-table thead th { white-space:nowrap; }
.top-volume-table tbody td { padding:.78rem 1rem; }
.market-rank { display:inline-grid; place-items:center; width:27px; height:27px; border-radius:9px; background:var(--hover-bg); color:var(--muted-text); font-size:.68rem; font-weight:800; }
.market-coin-identity { display:flex; align-items:center; gap:.65rem; }
.market-coin-avatar,.market-mobile-rank,.market-mobile-pair { display:none; }
.market-coin-logo { position:relative; display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; }
.market-coin-logo>span { display:grid; width:100%; height:100%; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#00b8aa,#087b91); font-size:.78rem; font-weight:850; }
.market-coin-logo.has-image>span { visibility:hidden; }
.market-coin-logo>img { position:absolute; inset:0; width:100%; height:100%; background:transparent; object-fit:contain; }
.market-inline-rank,.market-mobile-usd,.market-mobile-volume-label { display:none; }
.market-symbol { color:var(--text-color); font-size:.86rem; }
.market-pair { display:inline-flex; padding:.32rem .55rem; border-radius:8px; background:var(--hover-bg); color:var(--muted-text); font-size:.7rem; font-weight:700; }
.price-number,.volume-number { color:var(--text-color); font-variant-numeric:tabular-nums; white-space:nowrap; }
.price-number>span { font-size:.78rem; font-weight:750; }
.price-number small { display:block; color:var(--muted-text); font-size:.58rem; }
.market-price-row { display:flex; align-items:center; justify-content:flex-end; gap:.38rem; }
.market-price-value { font-size:.78rem; font-weight:800; }
.market-change-badge { display:inline-flex; align-items:center; gap:.2rem; padding:.22rem .38rem; border-radius:7px; font-size:.58rem; font-weight:850; line-height:1; }
.market-change-badge.positive { color:#057255; background:rgba(16,185,129,.16); box-shadow:inset 0 0 0 1px rgba(16,185,129,.18); }
.market-change-badge.negative { color:#b8323d; background:rgba(239,68,68,.14); box-shadow:inset 0 0 0 1px rgba(239,68,68,.16); }
.market-change-badge i { font-size:.48rem; }
.volume-number strong { color:var(--primary-color); font-size:.78rem; }
.spread-badge { display:inline-flex; justify-content:center; min-width:54px; padding:.28rem .48rem; border-radius:8px; background:rgba(0,180,155,.1); color:var(--primary-color); font-size:.68rem; font-weight:800; }
.price-source-note { display:flex; align-items:flex-start; gap:.45rem; padding:.8rem 1rem; border-top:1px solid var(--card-border); color:var(--muted-text); font-size:.65rem; }
.price-source-note i { margin-top:.12rem; color:var(--primary-color); }
.empty-price-feed { display:flex; min-height:260px; align-items:center; justify-content:center; flex-direction:column; gap:.45rem; padding:2rem; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); color:var(--muted-text); text-align:center; }
.empty-price-feed i { margin-bottom:.35rem; color:var(--primary-color); font-size:2rem; }
.empty-price-feed strong { color:var(--text-color); font-size:1rem; }
.empty-price-feed span { max-width:520px; font-size:.75rem; }
.empty-price-retry { display:inline-flex; align-items:center; gap:.4rem; margin-top:.55rem; padding:.62rem .9rem; border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--card-border)); border-radius:10px; color:var(--color-primary); background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); font-size:.72rem; font-weight:800; }
.empty-price-retry:hover { border-color:var(--color-primary); color:#fff; background:var(--color-primary); }

@media (max-width:767.98px) {
    .top-prices-page { padding-top:.75rem!important; }
    .top-prices-page .page-hero { gap:1.1rem; padding:1.2rem; border-radius:18px; }
    .top-prices-page .page-hero h1 { font-size:1.55rem; }
    .top-prices-page .page-hero p { font-size:.82rem; line-height:1.55; }
    .exchange-price-control { min-width:0; width:100%; }
    .exchange-price-control label { font-size:.7rem; }
    .exchange-price-control select { min-height:48px; font-size:.9rem; font-weight:750; }
    .price-feed-explainer { display:flex; flex-wrap:nowrap; gap:.5rem; margin-bottom:.85rem; padding-bottom:.15rem; overflow-x:auto; scrollbar-width:none; }
    .price-feed-explainer::-webkit-scrollbar { display:none; }
    .price-feed-explainer span { flex:0 0 auto; padding:.52rem .72rem; border-radius:999px; font-size:.72rem; }
    .price-ranking-tabs { max-width:none; margin-bottom:.8rem; padding:.28rem; border-radius:12px; }
    .price-ranking-tab { min-height:44px; padding:.45rem; font-size:.73rem; }
    .top-prices-page .search-box { margin-bottom:1rem!important; border-radius:15px; box-shadow:0 8px 22px rgba(8,30,44,.045); }
    .top-prices-page .search-box input { min-height:54px; font-size:.95rem; }
    .selected-exchange-card { align-items:stretch; flex-direction:column; padding:1rem; border-radius:17px; }
    .selected-exchange-identity img { width:50px; height:50px; border-radius:15px; }
    .selected-exchange-identity span { font-size:.7rem; }
    .selected-exchange-identity strong { font-size:1.16rem; }
    .selected-exchange-metrics { grid-template-columns:repeat(3,1fr); gap:.5rem; text-align:left; }
    .selected-exchange-metrics div { min-width:0; padding:.65rem; border-radius:11px; background:var(--hover-bg); }
    .selected-exchange-metrics span { font-size:.68rem; }
    .selected-exchange-metrics strong { overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
    .top-volume-table { overflow:visible!important; border-radius:0!important; background:transparent; box-shadow:none; }
    .top-volume-table .table-caption { margin-bottom:.7rem; padding:1rem; border:1px solid var(--card-border); border-radius:16px; background:var(--card-bg); }
    .top-volume-table .table-caption strong { font-size:1rem; }
    .top-volume-table .table-caption>div span { font-size:.7rem; }
    .top-volume-table .calculation-note { font-size:.67rem; white-space:nowrap; }
    .top-volume-table .table-responsive { overflow:visible; }
    .top-volume-table table,.top-volume-table tbody { display:block; width:100%; }
    .top-volume-table thead { display:none; }
    .top-volume-table tbody { display:flex; flex-direction:column; gap:.72rem; }
    .top-volume-table tbody tr { display:grid; grid-template-columns:1fr 1fr; gap:.7rem .9rem; padding:1rem; border:1px solid var(--card-border); border-radius:17px; background:var(--card-bg); box-shadow:0 10px 26px rgba(8,30,44,.06); }
    .top-volume-table tbody td { display:block; min-width:0; padding:0; border:0; text-align:left!important; }
    .top-volume-table tbody td::before { content:attr(data-label); display:block; margin-bottom:.22rem; color:var(--muted-text); font-size:.63rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
    .top-volume-table .market-rank-cell,.top-volume-table .market-pair-cell { display:none; }
    .top-volume-table .market-coin-cell { grid-column:1/-1; padding-bottom:.75rem; border-bottom:1px solid var(--card-border); }
    .top-volume-table .market-coin-cell::before { display:none; }
    .market-coin-identity { position:relative; gap:.72rem; }
    .market-coin-avatar { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:13px; color:#fff; background:linear-gradient(145deg,#00b8aa,#087b91); font-size:1rem; font-weight:850; box-shadow:0 7px 18px rgba(0,166,156,.2); }
    .market-mobile-rank { position:absolute; top:-.15rem; right:0; display:inline-flex; padding:.25rem .48rem; border-radius:999px; color:var(--muted-text); background:var(--hover-bg); font-size:.67rem; font-weight:800; }
    .market-mobile-pair { display:block; margin-top:.12rem; color:var(--muted-text); font-size:.72rem; font-weight:650; }
    .market-symbol { font-size:1.04rem; }
    .price-number>span,.volume-number strong { font-size:.94rem; line-height:1.25; }
    .price-number small { margin-top:.1rem; font-size:.66rem; }
    .volume-number strong { display:block; overflow:hidden; text-overflow:ellipsis; }
    .spread-badge { min-width:62px; padding:.36rem .55rem; font-size:.78rem; }
    .price-source-note { margin-top:.8rem; padding:.9rem 1rem; border:1px solid var(--card-border); border-radius:15px; background:var(--card-bg); font-size:.7rem; line-height:1.5; }
}

@media (max-width:480px) {
    .selected-exchange-metrics { grid-template-columns:1fr 1fr; }
    .selected-exchange-metrics div:last-child { display:none; }
    .top-volume-table tbody tr { padding:.9rem; }
}
@media (max-width:575.98px) { .portfolio-page { padding-top:.7rem!important; } .portfolio-hero { border-radius:17px; } .portfolio-live-badge { width:100%; } .portfolio-form-card,.portfolio-list-card { border-radius:16px; } .portfolio-form-card { padding:1rem; } .portfolio-stats { gap:.55rem; } .portfolio-stat { padding:.85rem; } .portfolio-stat strong { font-size:1.05rem; } .portfolio-list-header { padding:1rem; } .portfolio-updated { font-size:.52rem; } .portfolio-table tr { gap:.15rem; padding:.65rem; } .portfolio-table td>strong { font-size:.76rem; } .portfolio-table td>small,.portfolio-asset small { font-size:.58rem; } .portfolio-asset strong { font-size:.8rem; } }
@media (max-width:575.98px) { .portfolio-position-dialog { width:calc(100vw - 1.25rem); max-height:calc(100dvh - 1.25rem); } .portfolio-dialog-panel { padding:1rem; border-radius:17px; } .portfolio-switcher { margin-bottom:.7rem; padding:.8rem; } .portfolio-management-actions { display:grid; grid-template-columns:1fr 1fr; } .portfolio-management-actions .portfolio-add-trigger { grid-column:1/-1; } .portfolio-management-actions .portfolio-create-form { grid-column:1/-1; } .portfolio-management-actions>form:not(.portfolio-create-form) { width:100%; } .portfolio-list-card { border:0; background:transparent; box-shadow:none; } .portfolio-list-card>.portfolio-list-header { border:1px solid var(--card-border); border-radius:15px 15px 0 0; background:var(--card-bg); } .portfolio-disclaimer { border:1px solid var(--card-border); border-top:0; border-radius:0 0 15px 15px; } }
@media (max-width:767.98px) { .portfolio-page .portfolio-hero p { font-size:.82rem; } .portfolio-select-wrap label { font-size:.66rem; } .portfolio-select-wrap select { font-size:.82rem; } .portfolio-management-actions .btn,.portfolio-create-form input { font-size:.74rem; } .portfolio-stat>span { font-size:.65rem; } .portfolio-stat strong { font-size:1.2rem; } .portfolio-stat small { font-size:.66rem; } .portfolio-stat .portfolio-total-usd { font-size:.72rem; } .portfolio-list-header h2 { font-size:1.04rem; } .portfolio-list-header p { font-size:.7rem; line-height:1.45; } .portfolio-updated { font-size:.62rem; } .portfolio-table td:before { font-size:.61rem; } .portfolio-table td>strong { font-size:.88rem; } .portfolio-table td>small,.portfolio-table td>.portfolio-usd-price,.portfolio-asset small { font-size:.67rem; line-height:1.45; } .portfolio-asset strong { font-size:.9rem; } .portfolio-result { font-size:.84rem!important; } .portfolio-disclaimer { font-size:.63rem; } .portfolio-chart-start { font-size:.68rem; } .portfolio-chart-toggle { font-size:.7rem; } }

/* Compact portfolio: waarde eerst, daarna één scanbare regel per positie. */
.portfolio-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.portfolio-stat.primary { grid-column:1/-1; }
.portfolio-primary-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,.85fr); align-items:center; gap:1.2rem; }
.portfolio-current-summary>span { color:var(--muted-text); font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.portfolio-current-summary { position:relative; min-width:0; }
.portfolio-value-line { display:flex; min-width:0; align-items:center; gap:.45rem; }
.portfolio-value-line>strong { display:block; min-width:0; margin:.25rem 0 .08rem; overflow:visible; font-size:clamp(1.15rem,4vw,1.55rem); white-space:nowrap; }
.portfolio-privacy-toggle { position:static; display:grid; width:28px; height:28px; flex:0 0 28px; place-items:center; padding:0; border:0; border-radius:8px; color:#00a99c; background:transparent; font-size:.72rem; line-height:1; }
.portfolio-privacy-toggle i { display:block; line-height:1; }
.portfolio-privacy-toggle:hover { color:#25d8c8; background:color-mix(in srgb,var(--color-primary) 10%,transparent); }
.portfolio-sensitive { position:relative; }
.portfolio-privacy-hidden .portfolio-sensitive { color:transparent!important; text-shadow:none!important; user-select:none; }
.portfolio-privacy-hidden .portfolio-sensitive::after { content:"••••"; position:absolute; inset:0 auto auto 0; color:var(--text-color); letter-spacing:.08em; }
.portfolio-current-summary>small { font-size:.7rem; }
.portfolio-current-summary>.portfolio-total-usd { font-size:.75rem; }
.portfolio-value-meta { display:flex; min-width:0; align-items:center; flex-wrap:wrap; gap:.2rem .55rem; margin:.08rem 0 .18rem; }
.portfolio-value-meta small { font-size:.7rem; line-height:1.35; }
.portfolio-value-meta .portfolio-total-usd { margin:0; color:color-mix(in srgb,var(--text-color) 76%,var(--muted-text)); font-size:.75rem; font-weight:750; }
.portfolio-day-change { font-weight:800; white-space:nowrap; }
.portfolio-day-change.positive { color:#008d6b; }
.portfolio-day-change.negative { color:#c63f49; }
.portfolio-inline-manager { min-width:0; padding:.75rem; border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--card-border)); border-radius:13px; background:color-mix(in srgb,var(--card-bg) 86%,transparent); }
.portfolio-inline-manager .portfolio-select-wrap label { font-size:.65rem; }
.portfolio-inline-manager .portfolio-select-wrap select { width:100%; min-width:0; min-height:42px; font-size:.78rem; }
.portfolio-inline-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.45rem; }
.portfolio-inline-actions form { min-width:0; margin:0; }
.portfolio-inline-actions .btn,.portfolio-inline-manager .portfolio-create-form .btn { display:flex; align-items:center; justify-content:center; gap:.35rem; width:100%; min-height:37px; padding:.4rem .55rem; border:1px solid var(--card-border); border-radius:9px; color:var(--text-color); background:var(--card-bg); font-size:.67rem; font-weight:800; }
.portfolio-inline-actions .btn:hover,.portfolio-inline-manager .portfolio-create-form .btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.portfolio-inline-actions .btn.danger { color:#bd3943; }
.portfolio-inline-actions .btn:disabled { cursor:not-allowed; opacity:.42; }
.portfolio-inline-manager .portfolio-create-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem; margin-top:.45rem; }
.portfolio-inline-manager .portfolio-create-form input { width:100%; min-width:0; min-height:39px; font-size:.72rem; }
.portfolio-inline-manager .portfolio-create-form .btn { width:auto; }
.portfolio-compact-table th:nth-child(1) { width:24%; }
.portfolio-compact-table th:nth-child(2) { width:32%; }
.portfolio-compact-table th:nth-child(3) { width:32%; }
.portfolio-compact-table th:last-child { width:90px; }
.portfolio-compact-table td { padding:1rem .9rem; }
.portfolio-asset-logo { position:relative; display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; overflow:visible; border-radius:0; background:transparent; }
.portfolio-asset-logo>span { display:grid; width:100%; height:100%; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#0da7a0,#075f70); font-size:.78rem; font-weight:850; }
.portfolio-asset-logo.has-image>span { visibility:hidden; }
.portfolio-asset-logo>img { position:absolute; inset:0; width:100%; height:100%; border-radius:0; background:transparent; object-fit:contain; }
.portfolio-compact-table .portfolio-asset { gap:.65rem; }
.portfolio-compact-table .portfolio-asset strong { font-size:1rem; }
.portfolio-compact-table .portfolio-current-price>strong,
.portfolio-compact-table .portfolio-holding-value>strong { font-size:1.02rem; font-variant-numeric:tabular-nums; }
.portfolio-compact-table td>small,.portfolio-compact-table td>.portfolio-usd-price { font-size:.75rem; line-height:1.45; }
.portfolio-compact-table .portfolio-actions { align-self:flex-start; padding-top:.05rem; }
.portfolio-price-change { font-weight:800; }
.portfolio-price-change.positive { color:#008d6b; }
.portfolio-price-change.negative { color:#c63f49; }
.portfolio-add-footer { padding:1rem 1.2rem 1.2rem; border-top:1px solid var(--card-border); background:var(--card-bg); }
.portfolio-add-footer .portfolio-add-trigger { display:flex; align-items:center; justify-content:center; gap:.45rem; width:100%; min-height:46px; border-radius:12px; font-size:.72rem; font-weight:800; }

@media (max-width:767.98px) {
    .portfolio-page { padding-top:.65rem!important; }
    .portfolio-primary-card { grid-template-columns:minmax(0,1fr) minmax(245px,.95fr); gap:.8rem; padding:1rem; }
    .portfolio-current-summary>span { font-size:.72rem; }
    .portfolio-value-line>strong { font-size:1.5rem; }
    .portfolio-privacy-toggle { width:28px; height:28px; flex-basis:28px; font-size:.72rem; }
    .portfolio-current-summary>small { font-size:.75rem; line-height:1.5; }
    .portfolio-current-summary>.portfolio-total-usd { font-size:.8rem; }
    .portfolio-value-meta small { font-size:.75rem; }
    .portfolio-value-meta .portfolio-total-usd { font-size:.8rem; }
    .portfolio-stat>span { font-size:.72rem; }
    .portfolio-stat>strong { font-size:1.3rem; }
    .portfolio-stat>small { font-size:.75rem; line-height:1.45; }
    .portfolio-inline-manager { padding:.65rem; }
    .portfolio-inline-manager .portfolio-select-wrap label { font-size:.7rem; }
    .portfolio-inline-manager .portfolio-select-wrap select { min-height:44px; font-size:.85rem; }
    .portfolio-inline-actions .btn { min-height:39px; font-size:.7rem; }
    .portfolio-inline-manager .portfolio-create-form input { min-height:42px; font-size:.78rem; }
    .portfolio-list-header h2 { font-size:1.16rem; }
    .portfolio-list-header p { font-size:.78rem; }
    .portfolio-updated { font-size:.7rem; }
    .portfolio-compact-table tbody tr { display:grid; grid-template-columns:minmax(76px,.9fr) minmax(74px,1fr) minmax(74px,1fr) 62px; align-items:start; gap:.32rem; padding:.92rem .7rem; }
    .portfolio-compact-table tbody td { display:block; width:auto; min-width:0; padding:0; border:0; }
    .portfolio-compact-table tbody td::before { display:none; }
    .portfolio-compact-table tbody td:first-child { grid-column:auto; margin:0; padding:0; border:0; }
    .portfolio-compact-table .portfolio-asset { gap:.42rem; }
    .portfolio-asset-logo { width:36px; height:36px; flex-basis:36px; }
    .portfolio-compact-table .portfolio-asset strong { font-size:1.02rem; line-height:1.3; }
    .portfolio-compact-table .portfolio-current-price>strong,
    .portfolio-compact-table .portfolio-holding-value>strong { overflow:hidden; font-size:.95rem; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
    .portfolio-compact-table td>small,
    .portfolio-compact-table td>.portfolio-usd-price { overflow:hidden; margin-top:.18rem; font-size:.74rem; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
    .portfolio-compact-table .portfolio-actions { position:static; display:flex!important; grid-column:4; grid-row:1; align-self:start; justify-content:flex-end; width:auto; padding:0; transform:translateY(-.12rem); }
    .portfolio-compact-table .portfolio-actions .btn { width:29px; height:32px; border-radius:8px; font-size:.7rem; }
    .portfolio-add-footer { margin-top:.7rem; padding:.75rem; border:1px solid var(--card-border); border-radius:15px; }
    .portfolio-add-footer .portfolio-add-trigger { min-height:50px; font-size:.86rem; }
    .portfolio-disclaimer { font-size:.7rem; }
    .portfolio-card-heading h2 { font-size:1.12rem; }
    .portfolio-card-heading p { font-size:.76rem; line-height:1.45; }
    .portfolio-field label { font-size:.8rem; }
    .portfolio-field input { min-height:48px; font-size:16px; }
    .portfolio-position-dialog input,
    .portfolio-position-dialog select,
    .portfolio-position-dialog textarea { font-size:16px!important; }
    .portfolio-position-dialog button { touch-action:manipulation; }
    .portfolio-field small,.portfolio-validation { font-size:.72rem; }
    .portfolio-submit { min-height:48px; font-size:.86rem; }
    .portfolio-cancel { font-size:.78rem; }
}

@media (max-width:575.98px) {
    .portfolio-position-dialog { width:calc(100vw - 1rem); max-height:calc(100dvh - 1rem); }
    .portfolio-dialog-panel { max-height:calc(100dvh - 1rem); padding:.9rem; }
    .portfolio-primary-card { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
    .portfolio-inline-actions .btn span { display:none; }
    .portfolio-inline-actions .btn { padding:.35rem; font-size:.78rem; }
    .portfolio-inline-manager .portfolio-create-form .btn span { display:none; }
}

/* Portfolio selector, beheer-pop-up en Chart.js visualisaties. */
.portfolio-topbar { display:grid; grid-template-columns:minmax(0,1fr) 30px; align-items:end; gap:.45rem; margin-bottom:.8rem; padding:.75rem .85rem; border:1px solid var(--card-border); border-radius:15px; background:var(--card-bg); box-shadow:0 10px 26px rgba(8,30,44,.045); }
.portfolio-current-summary .portfolio-topbar { margin:0 0 .85rem; padding:0 0 .75rem; border:0; border-bottom:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--card-border)); border-radius:0; background:transparent; box-shadow:none; }
.portfolio-topbar .portfolio-select-wrap label { display:block; margin-bottom:.28rem; color:var(--muted-text); font-size:.62rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.portfolio-topbar .portfolio-select-wrap select { width:100%; min-width:0; min-height:42px; padding:.55rem .75rem; border:1px solid var(--card-border); border-radius:10px; color:var(--text-color); background:var(--hover-bg); font-size:.82rem; font-weight:800; }
.portfolio-manage-trigger { display:grid; width:30px; height:42px; align-self:end; place-items:center; padding:0; border:0; border-radius:8px; color:#00a99c; background:transparent; font-size:.68rem; line-height:1; }
.portfolio-manage-trigger i { display:block; line-height:1; }
.portfolio-manage-trigger:hover { color:#25d8c8; background:color-mix(in srgb,var(--color-primary) 10%,transparent); }
.portfolio-primary-card { grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr); }
.portfolio-allocation-panel { display:grid; grid-template-columns:auto minmax(0,1fr); min-width:0; align-items:center; gap:.5rem; min-height:160px; padding:.4rem .55rem .4rem .7rem; border-left:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--card-border)); }
.portfolio-allocation-heading span,.portfolio-allocation-heading small { display:block; }
.portfolio-allocation-heading span { color:var(--text-color); font-size:.72rem; font-weight:850; }
.portfolio-allocation-heading small { margin-top:.12rem; color:var(--muted-text); font-size:.58rem; }
.portfolio-allocation-chart { position:relative; min-width:0; height:160px; }
.portfolio-allocation-chart canvas { width:100%!important; height:100%!important; }
.portfolio-allocation-empty { display:flex; min-height:130px; align-items:center; justify-content:center; flex-direction:column; gap:.35rem; color:var(--muted-text); font-size:.64rem; }
.portfolio-allocation-empty i { color:var(--color-primary); font-size:1.5rem; opacity:.72; }
.portfolio-chart-body { height:260px; padding:.7rem 1rem .8rem; }

.portfolio-manager-dialog { width:min(500px,calc(100vw - 1.5rem)); max-width:none; max-height:calc(100dvh - 1.5rem); padding:0; overflow:auto; border:0; border-radius:20px; color:var(--text-color); background:transparent; box-shadow:0 32px 90px rgba(2,12,22,.55); }
.portfolio-manager-dialog::backdrop { background:rgba(2,14,24,.72); backdrop-filter:blur(6px); }
body:has(.portfolio-manager-dialog[open]) { overflow:hidden; }
.portfolio-manager-panel { padding:1.2rem; border:1px solid color-mix(in srgb,var(--text-color) 20%,var(--card-bg)); border-radius:20px; background:color-mix(in srgb,var(--card-bg) 94%,var(--text-color)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.portfolio-manager-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.portfolio-manager-header>div { display:flex; align-items:center; gap:.7rem; }
.portfolio-manager-header h2 { margin:0; color:var(--text-color); font-size:1.05rem; }
.portfolio-manager-header p { margin:.18rem 0 0; color:color-mix(in srgb,var(--text-color) 72%,var(--muted-text)); font-size:.68rem; }
.portfolio-manager-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border-radius:12px; color:#19d4c1; background:rgba(16,185,129,.16); }
.portfolio-manager-close { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; padding:0; border:1px solid color-mix(in srgb,var(--text-color) 24%,var(--card-bg)); border-radius:10px; color:color-mix(in srgb,var(--text-color) 88%,var(--muted-text)); background:color-mix(in srgb,var(--card-bg) 88%,var(--text-color)); }
.portfolio-manager-close:hover { border-color:color-mix(in srgb,var(--color-primary) 55%,var(--card-border)); color:var(--text-color); background:color-mix(in srgb,var(--color-primary) 14%,var(--card-bg)); }
.portfolio-manager-section { margin:0; padding:.9rem; border:1px solid color-mix(in srgb,var(--text-color) 18%,var(--card-bg)); border-radius:13px; background:color-mix(in srgb,var(--card-bg) 90%,var(--text-color)); }
.portfolio-manager-section.portfolio-create-form { display:block; }
.portfolio-manager-section+ .portfolio-manager-section { margin-top:.65rem; }
.portfolio-manager-section label { display:block; margin-bottom:.4rem; color:color-mix(in srgb,var(--text-color) 82%,var(--muted-text)); font-size:.66rem; font-weight:800; }
.portfolio-manager-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.45rem; }
.portfolio-manager-input-row input { width:100%; min-width:0; min-height:43px; padding:.55rem .7rem; border:1px solid color-mix(in srgb,var(--text-color) 30%,var(--card-bg)); border-radius:10px; color:var(--text-color); background:color-mix(in srgb,var(--card-bg) 97%,var(--text-color)); font-size:.78rem; }
.portfolio-manager-input-row input::placeholder { color:color-mix(in srgb,var(--text-color) 54%,var(--muted-text)); opacity:1; }
.portfolio-manager-input-row input:focus { border-color:var(--color-primary); outline:3px solid color-mix(in srgb,var(--color-primary) 22%,transparent); }
.portfolio-manager-input-row .btn,.portfolio-manager-actions .btn { display:flex; min-height:43px; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .8rem; border:1px solid color-mix(in srgb,var(--color-primary) 24%,var(--card-border)); border-radius:10px; color:#008d82; background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); font-size:.7rem; font-weight:800; }
#renamePortfolioForm .btn,#createPortfolioForm .btn { border-color:#00a694; color:#fff; background:linear-gradient(135deg,#00ae9a,#008f84); box-shadow:0 6px 16px rgba(0,143,132,.2); }
#renamePortfolioForm .btn:hover,#createPortfolioForm .btn:hover { border-color:#18c7b4; background:linear-gradient(135deg,#00bea7,#009b8f); }
.portfolio-manager-actions { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:.65rem 0; }
.portfolio-manager-actions form { margin:0; }
.portfolio-manager-actions .btn { width:100%; }
.portfolio-manager-actions .btn:not(.danger) { border-color:color-mix(in srgb,var(--color-primary) 52%,var(--card-border)); color:color-mix(in srgb,var(--color-primary) 78%,var(--text-color)); background:color-mix(in srgb,var(--color-primary) 12%,var(--card-bg)); }
.portfolio-manager-actions .btn.danger { border-color:rgba(239,68,68,.42); color:#ef5f69; background:rgba(239,68,68,.12); }
.portfolio-manager-actions .btn:disabled { cursor:not-allowed; opacity:.6; filter:saturate(.8); }

@media (max-width:767.98px) {
    .portfolio-topbar { grid-template-columns:minmax(0,1fr) 30px; padding:.75rem; }
    .portfolio-topbar .portfolio-select-wrap label { font-size:.7rem; }
    .portfolio-topbar .portfolio-select-wrap select { min-height:46px; height:46px; font-size:.9rem; }
    .portfolio-manage-trigger { width:30px; min-height:46px; height:46px; font-size:.7rem; }
    .portfolio-primary-card { grid-template-columns:minmax(0,.95fr) minmax(210px,1.05fr); align-items:center; }
    .portfolio-allocation-panel { grid-template-columns:1fr; min-height:175px; padding:.2rem 0 .2rem .65rem; }
    .portfolio-allocation-heading { display:none; }
    .portfolio-allocation-chart { height:175px; }
    .portfolio-chart-body { height:245px; padding:.6rem .45rem .75rem; }
}

@media (max-width:480px) {
    .portfolio-primary-card { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding:.7rem .85rem 0; }
    .portfolio-allocation-panel { min-height:165px; margin-top:0; padding:.15rem 0 .15rem .85rem; border-top:0; border-left:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--card-border)); }
    .portfolio-allocation-chart { height:165px; }
    .portfolio-current-summary .portfolio-topbar { margin-bottom:.65rem; padding-bottom:.6rem; }
    .portfolio-topbar .portfolio-select-wrap select { padding-right:1.8rem; font-size:.82rem; }
    .portfolio-manager-panel { padding:1rem; }
    .portfolio-manager-input-row { grid-template-columns:1fr; }
    .portfolio-manager-input-row input { font-size:16px; }
    .portfolio-manager-input-row .btn { width:100%; }
}

/* Compacte mobiele prijsfeed: coin, prijs en volume op één regel. */
@media (max-width:767.98px) {
    .selected-exchange-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.8rem; padding:.8rem; }
    .selected-exchange-identity { gap:.55rem; }
    .selected-exchange-identity img { width:40px; height:40px; padding:6px; border-radius:12px; }
    .selected-exchange-identity span { font-size:.62rem; }
    .selected-exchange-identity strong { font-size:.96rem; }
    .selected-exchange-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }
    .selected-exchange-metrics div { padding:.45rem .5rem; }
    .selected-exchange-metrics div:last-child { display:none; }
    .selected-exchange-metrics span { font-size:.58rem; }
    .selected-exchange-metrics strong { font-size:.72rem; }
    .top-volume-table tbody { gap:.5rem; }
    .top-volume-table tbody tr { display:grid; grid-template-columns:minmax(108px,1.15fr) minmax(88px,1fr) minmax(82px,.9fr); align-items:center; gap:.45rem; padding:.72rem .75rem; border-radius:14px; }
    .top-volume-table tbody td { min-width:0; padding:0; text-align:left!important; }
    .top-volume-table tbody td::before { display:none; }
    .top-volume-table .market-rank-cell,
    .top-volume-table .market-pair-cell,
    .top-volume-table .market-usd-price,
    .top-volume-table .market-spread-cell { display:none; }
    .top-volume-table .market-coin-cell { grid-column:auto; padding:0; border:0; }
    .market-coin-identity { gap:.5rem; min-width:0; }
    .market-coin-logo { width:36px; height:36px; flex-basis:36px; }
    .market-symbol { display:flex; align-items:baseline; gap:.25rem; overflow:hidden; font-size:.92rem; line-height:1.2; white-space:nowrap; }
    .market-inline-rank { display:inline; color:var(--muted-text); font-size:.58rem; font-weight:750; }
    .market-mobile-pair { overflow:hidden; margin-top:.1rem; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
    .top-volume-table .market-native-price>span { display:block; overflow:hidden; font-size:.88rem; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
    .top-volume-table .market-price-row { align-items:flex-start; justify-content:flex-start; flex-direction:column; gap:.18rem; }
    .top-volume-table .market-price-value { overflow:hidden; max-width:100%; font-size:.88rem; line-height:1.2; text-overflow:ellipsis; }
    .top-volume-table .market-change-badge { display:inline-flex; padding:.2rem .34rem; font-size:.58rem; }
    .top-volume-table .market-native-price>small { display:block; margin-top:.06rem; font-size:.58rem; line-height:1.2; }
    .top-volume-table .market-native-price>.market-mobile-usd { display:block; color:var(--muted-text); font-size:.62rem; font-weight:700; }
    .top-volume-table .volume-number { text-align:right!important; }
    .top-volume-table .volume-number strong { display:block; overflow:hidden; font-size:.82rem; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
    .market-mobile-volume-label { display:block; margin-top:.12rem; color:var(--muted-text); font-size:.58rem; }
}

@media (max-width:390px) {
    .top-volume-table tbody tr { grid-template-columns:minmax(96px,1.1fr) minmax(78px,.95fr) minmax(72px,.85fr); gap:.35rem; padding:.68rem .62rem; }
    .market-coin-logo { width:32px; height:32px; flex-basis:32px; }
    .market-symbol { font-size:.84rem; }
    .top-volume-table .market-native-price>span { font-size:.8rem; }
    .top-volume-table .volume-number strong { font-size:.76rem; }
}

/* BTC marktanalyse: prijs, RSI en sentiment in één responsieve grafiek. */
.market-analysis-page { max-width:1180px; margin:0 auto; }
.market-analysis-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:1rem; padding:1.35rem 1.5rem; border:1px solid var(--card-border); border-radius:20px; color:var(--text-color); background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 10%,var(--card-bg)),var(--card-bg)); box-shadow:0 14px 38px rgba(8,30,44,.055); }
.market-analysis-eyebrow { display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.45rem; color:#008f84; font-size:.68rem; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.market-analysis-hero h1 { margin:0; color:var(--text-color); font-size:clamp(1.45rem,3vw,2rem); font-weight:850; }
.market-analysis-hero p { margin:.4rem 0 0; color:var(--muted-text); font-size:.82rem; }
.market-analysis-status { display:inline-flex; flex:0 0 auto; align-items:center; gap:.45rem; padding:.48rem .7rem; border:1px solid color-mix(in srgb,var(--color-primary) 20%,var(--card-border)); border-radius:999px; color:var(--muted-text); background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); font-size:.65rem; font-weight:750; white-space:nowrap; }
.market-analysis-live-dot { width:7px; height:7px; border-radius:50%; background:#00a783; box-shadow:0 0 0 4px rgba(0,167,131,.12); }
.market-analysis-card { overflow:hidden; border:1px solid var(--card-border); border-radius:20px; background:var(--card-bg); box-shadow:0 16px 42px rgba(8,30,44,.065); }
.market-analysis-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; padding:1.2rem 1.35rem .85rem; border-bottom:1px solid var(--card-border); }
.market-analysis-toolbar h2 { margin:0; color:var(--text-color); font-size:1.05rem; font-weight:850; }
.market-analysis-toolbar p { margin:.22rem 0 0; color:var(--muted-text); font-size:.66rem; }
.market-analysis-heading { display:grid; min-width:260px; gap:.35rem; }
.market-analysis-asset-picker { display:flex; width:max-content; align-items:center; gap:.5rem; margin-bottom:.2rem; color:var(--muted-text); font-size:.58rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.market-analysis-asset-picker select { min-width:170px; height:38px; padding:.38rem 2rem .38rem .7rem; border:1px solid color-mix(in srgb,var(--color-primary) 35%,var(--card-border)); border-radius:10px; color:var(--text-color); background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); font:inherit; font-size:.72rem; font-weight:850; letter-spacing:0; text-transform:none; cursor:pointer; }
.market-analysis-panel header h3 small { margin-left:.25rem; color:var(--muted-text); font-size:.55rem; font-weight:650; }
.market-analysis-controls { display:flex; min-width:min(100%,690px); align-items:flex-end; flex-direction:column; gap:.48rem; }
.market-analysis-ranges { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.35rem; }
.market-analysis-ranges button { min-width:43px; min-height:31px; padding:.34rem .55rem; border:1px solid var(--card-border); border-radius:9px; color:var(--muted-text); background:var(--hover-bg); font-size:.62rem; font-weight:850; transition:border-color .15s,color .15s,background-color .15s,opacity .15s; }
.market-analysis-ranges button:hover { border-color:color-mix(in srgb,var(--color-primary) 55%,var(--card-border)); color:var(--text-color); }
.market-analysis-ranges button.active { border-color:color-mix(in srgb,var(--color-primary) 55%,var(--card-border)); color:#007f73; background:color-mix(in srgb,var(--color-primary) 13%,var(--card-bg)); }
.market-analysis-ranges button:disabled { cursor:wait; opacity:.65; }
.market-analysis-date-filter { display:flex; align-items:flex-end; justify-content:flex-end; gap:.45rem; }
.market-analysis-date-filter label { display:grid; gap:.2rem; color:var(--muted-text); font-size:.56rem; font-weight:750; }
.market-analysis-date-filter input { width:142px; height:34px; padding:.35rem .55rem; border:1px solid var(--card-border); border-radius:9px; color:var(--text-color); background:var(--card-bg); font:inherit; font-size:.66rem; color-scheme:light dark; }
.market-analysis-date-filter button { display:inline-flex; min-height:34px; align-items:center; justify-content:center; gap:.38rem; padding:.4rem .7rem; border:1px solid color-mix(in srgb,var(--color-primary) 45%,var(--card-border)); border-radius:9px; color:#007f73; background:color-mix(in srgb,var(--color-primary) 10%,var(--card-bg)); font-size:.64rem; font-weight:850; }
.market-analysis-date-filter button:hover { background:color-mix(in srgb,var(--color-primary) 16%,var(--card-bg)); }
.market-analysis-filter-error { color:#dc4b55; font-size:.58rem; font-weight:750; }
.market-analysis-card.is-refreshing { cursor:progress; }
.market-analysis-card .market-signal-card,.market-analysis-card .market-pullback-card,.market-analysis-card .market-analysis-hover-values,.market-analysis-card .market-analysis-charts,.market-analysis-card .market-analysis-history { transition:opacity .24s ease,filter .24s ease; }
.market-analysis-card.is-refreshing .market-signal-card,.market-analysis-card.is-refreshing .market-pullback-card,.market-analysis-card.is-refreshing .market-analysis-hover-values,.market-analysis-card.is-refreshing .market-analysis-history { opacity:.58; filter:saturate(.75); }
.market-signal-card { --signal-color:#64748b; --signal-soft:rgba(100,116,139,.1); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; margin:.9rem 1rem 0; padding:1rem 1.1rem; border:1px solid color-mix(in srgb,var(--signal-color) 28%,var(--card-border)); border-radius:14px; background:linear-gradient(110deg,var(--signal-soft),color-mix(in srgb,var(--card-bg) 94%,transparent)); }
.market-signal-card.is-buy { --signal-color:#059669; --signal-soft:rgba(5,150,105,.1); }
.market-signal-card.is-continuation { --signal-color:#0891b2; --signal-soft:rgba(8,145,178,.09); }
.market-signal-card.is-watch { --signal-color:#e69500; --signal-soft:rgba(245,158,11,.11); }
.market-signal-card.is-sell-warning { --signal-color:#e69500; --signal-soft:rgba(245,158,11,.11); }
.market-signal-card.is-sell { --signal-color:#e04b55; --signal-soft:rgba(224,75,85,.09); }
.market-signal-card.is-strong { box-shadow:0 8px 24px color-mix(in srgb,var(--signal-color) 12%,transparent); }
.market-signal-icon { display:grid; width:44px; height:44px; place-items:center; border-radius:12px; color:#fff; background:var(--signal-color); font-size:1rem; box-shadow:0 6px 14px color-mix(in srgb,var(--signal-color) 25%,transparent); }
.market-signal-copy { min-width:0; }
.market-signal-copy>span { color:var(--signal-color); font-size:.64rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.market-signal-copy h3 { margin:.16rem 0 .12rem; color:var(--text-color); font-size:1rem; font-weight:850; }
.market-signal-copy p { margin:0; color:var(--muted-text); font-size:.72rem; line-height:1.45; }
.market-signal-scores { display:grid; width:370px; gap:.5rem; padding-left:1rem; border-left:1px solid color-mix(in srgb,var(--signal-color) 18%,var(--card-border)); }
.market-signal-score { display:grid; min-height:54px; grid-template-columns:36px minmax(90px,1fr) 32px; grid-template-rows:auto auto; align-items:center; gap:.32rem .6rem; padding:.58rem .68rem; border:1px solid color-mix(in srgb,currentColor 12%,var(--card-border)); border-radius:11px; background:color-mix(in srgb,var(--card-bg) 78%,transparent); }
.market-signal-score-icon { display:grid; grid-column:1; grid-row:1/3; width:36px; height:36px; align-self:center; place-items:center; border-radius:9px; color:currentColor; background:color-mix(in srgb,currentColor 10%,var(--card-bg)); font-size:.82rem; line-height:1; }
.market-signal-score>span { grid-column:2; grid-row:1; color:var(--muted-text); font-size:.67rem; font-weight:800; }
.market-signal-score>strong { grid-column:3; grid-row:1; color:var(--text-color); font-size:.82rem; font-weight:900; text-align:right; font-variant-numeric:tabular-nums; }
.market-signal-score-track { overflow:hidden; height:5px; border-radius:99px; background:color-mix(in srgb,#94a3b8 16%,var(--card-bg)); }
.market-signal-score>.market-signal-score-track { grid-column:2/4; grid-row:2; }
.market-signal-score-track i { display:block; width:0; height:100%; border-radius:inherit; transition:width .25s ease; }
.market-signal-score.is-buy>span,.market-signal-score.is-buy>strong { color:#059669; }
.market-signal-score.is-buy>.market-signal-score-icon { color:#059669; }
.market-signal-score.is-buy .market-signal-score-track i { background:#059669; }
.market-signal-score.is-sell>span,.market-signal-score.is-sell>strong { color:#dc4b55; }
.market-signal-score.is-sell>.market-signal-score-icon { color:#dc4b55; }
.market-signal-score.is-sell .market-signal-score-track i { background:#dc4b55; }
.market-signal-scores>small { color:var(--muted-text); font-size:.6rem; line-height:1.35; text-align:right; }
.market-signal-scores>small b { color:var(--text-color); font-weight:800; }
.market-pullback-card { margin:.65rem 1rem 0; border:1px solid color-mix(in srgb,#f59e0b 25%,var(--card-border)); border-radius:13px; background:color-mix(in srgb,#f59e0b 4%,var(--card-bg)); }
.market-pullback-card[hidden] { display:none; }
.market-pullback-summary { display:grid; grid-template-columns:minmax(0,2fr) minmax(400px,1fr); align-items:stretch; gap:1rem; padding:1rem 1.15rem .9rem; }
.market-pullback-main { display:flex; min-width:0; flex-direction:column; justify-content:center; }
.market-pullback-main>span { color:#c47c00; font-size:.62rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.market-pullback-probabilities { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:.45rem 0 .55rem; }
.market-pullback-probability { display:grid; min-height:58px; grid-template-columns:auto 1fr; align-items:baseline; gap:.12rem .45rem; padding:.6rem .7rem; border:1px solid var(--card-border); border-radius:10px; background:color-mix(in srgb,var(--card-bg) 82%,transparent); }
.market-pullback-probability small { grid-column:1/-1; color:var(--muted-text); font-size:.52rem; font-weight:800; text-transform:uppercase; }
.market-pullback-probability strong { color:#d97706; font-size:1.3rem; font-weight:900; line-height:1; font-variant-numeric:tabular-nums; }
.market-pullback-probability span { color:var(--muted-text); font-size:.55rem; line-height:1.35; }
.market-pullback-probability.is-up strong { color:#059669; }
.market-pullback-headline { display:flex; align-items:baseline; flex-wrap:wrap; gap:.18rem .42rem; margin:.2rem 0 .36rem; }
.market-pullback-headline strong { color:#c47c00; font-size:1.4rem; font-weight:900; line-height:1.05; }
.market-pullback-headline p { max-width:430px; margin:0; color:var(--text-color); font-size:.65rem; font-weight:650; line-height:1.4; }
.market-pullback-pattern { margin:0; color:var(--muted-text); font-size:.57rem; line-height:1.45; }
.market-pullback-pattern span { margin-right:.35rem; color:#a96b00; font-size:.49rem; font-weight:850; letter-spacing:.025em; text-transform:uppercase; }
.market-pullback-pattern b { color:var(--text-color); font-weight:550; }
.market-pullback-current { display:flex; gap:.45rem; padding:0; border:0; background:transparent; flex-direction:column; justify-content:flex-start; }
.market-pullback-current-label { color:#a96b00; font-size:.62rem; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.market-pullback-current-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:.55rem; padding:0; border:0; border-radius:0; background:transparent; }
.market-current-value { display:flex; min-width:0; min-height:58px; align-items:center; gap:.48rem; padding:.6rem .7rem; border:1px solid var(--card-border); border-radius:10px; background:color-mix(in srgb,var(--card-bg) 82%,transparent); }
.market-current-value>i { display:grid; width:29px; height:29px; flex:0 0 29px; place-items:center; border-radius:7px; color:#64748b; background:rgba(100,116,139,.09); font-size:.76rem; }
.market-current-value.is-btc>i { color:#d97706; background:rgba(245,158,11,.1); }
.market-current-value.is-rsi>i { color:#7c3aed; background:rgba(139,92,246,.09); }
.market-current-value.is-fear>i { color:#059669; background:rgba(16,185,129,.09); }
.market-current-value>span { display:flex; min-width:0; flex-direction:column; }
.market-current-value small { color:var(--muted-text); font-size:.6rem; font-weight:750; line-height:1.1; }
.market-current-value strong { overflow:hidden; margin-top:.12rem; color:var(--text-color); font-size:.82rem; font-weight:850; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.market-pullback-main>small { margin-top:.28rem; color:var(--muted-text); font-size:.53rem; line-height:1.4; }
.market-pullback-outcomes { display:grid; grid-template-columns:.8fr 1.35fr .85fr; border-top:1px solid color-mix(in srgb,#f59e0b 20%,var(--card-border)); background:color-mix(in srgb,var(--card-bg) 75%,transparent); }
.market-pullback-outcome { display:flex; min-width:0; min-height:92px; padding:.72rem 1.15rem; flex-direction:column; justify-content:center; }
.market-pullback-outcome+.market-pullback-outcome { border-left:1px solid var(--card-border); }
.market-pullback-outcome>small { color:var(--muted-text); font-size:.54rem; font-weight:700; line-height:1.3; }
.market-pullback-outcome>strong { margin:.16rem 0 .08rem; color:var(--text-color); font-size:.96rem; font-weight:900; font-variant-numeric:tabular-nums; }
.market-pullback-outcome>span { color:var(--muted-text); font-size:.51rem; }
.market-pullback-outcome.is-depth>strong { color:#d97706; }
.market-pullback-outcome.is-recovery>strong.is-positive { color:#059669; }
.market-pullback-outcome.is-recovery>strong.is-negative { color:#dc4b55; }
.market-pullback-extremes { display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin-top:.45rem; padding-top:.4rem; border-top:1px solid var(--card-border); }
.market-pullback-extremes span { color:var(--muted-text); font-size:.49rem; }
.market-pullback-extremes b { margin-left:.18rem; color:var(--text-color); font-size:.58rem; font-variant-numeric:tabular-nums; }
.market-pullback-extremes b.is-positive { color:#059669; }
.market-pullback-extremes b.is-negative { color:#dc4b55; }
.market-analysis-hover-values { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem 1.2rem; min-height:50px; padding:.72rem 1.35rem; border-bottom:1px solid var(--card-border); color:var(--muted-text); background:color-mix(in srgb,var(--hover-bg) 55%,var(--card-bg)); font-size:.72rem; }
.market-analysis-hover-values strong { margin-right:auto; color:var(--text-color); font-size:.76rem; }
.market-analysis-hover-values span { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.market-analysis-hover-values b { color:var(--text-color); font-variant-numeric:tabular-nums; }
.market-analysis-hover-values i,.market-analysis-panel header i { display:inline-block; width:18px; height:3px; border-radius:99px; }
.market-analysis-hover-values i.btc,.market-analysis-panel header i.btc { background:#00a783; }
.market-analysis-hover-values i.rsi,.market-analysis-panel header i.rsi { background:#8b5cf6; }
.market-analysis-hover-values i.sentiment,.market-analysis-panel header i.sentiment { background:#f59e0b; }
.market-analysis-charts { position:relative; padding:.85rem 1rem 1rem; background:color-mix(in srgb,var(--hover-bg) 32%,var(--card-bg)); }
.market-analysis-panel { overflow:hidden; border:1px solid var(--card-border); border-radius:14px; background:var(--card-bg); }
.market-analysis-panel+.market-analysis-panel { margin-top:.65rem; }
.market-analysis-panel>header { display:flex; min-height:38px; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem .8rem; border-bottom:1px solid var(--card-border); }
.market-analysis-panel>header>div { display:flex; align-items:center; gap:.45rem; }
.market-analysis-panel h3 { margin:0; color:var(--text-color); font-size:.72rem; font-weight:850; }
.market-analysis-panel header small { display:flex; align-items:center; gap:.65rem; color:var(--muted-text); font-size:.56rem; }
.fear-greed-legend { flex-wrap:wrap; justify-content:flex-end; }
.fear-greed-legend span,.rsi-legend span { display:inline-flex; align-items:center; gap:.28rem; font-weight:750; white-space:nowrap; }
.fear-greed-legend span::before,.rsi-legend span::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.fear-greed-legend .extreme-fear { color:#ef4444; }
.fear-greed-legend .fear { color:#f97316; }
.fear-greed-legend .neutral { color:#94a3b8; }
.fear-greed-legend .greed { color:#22c55e; }
.fear-greed-legend .extreme-greed { color:#00a783; }
.rsi-legend .oversold { color:#10b981; }
.rsi-legend .overbought { color:#ef4444; }
.market-analysis-canvas { position:relative; height:170px; padding:.45rem .55rem .25rem; }
.market-analysis-panel.price-panel .market-analysis-canvas { height:300px; }
.market-analysis-canvas canvas { display:block; width:100%!important; height:100%!important; }
.market-analysis-loading,.market-analysis-error { position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:center; gap:.55rem; color:var(--muted-text); background:color-mix(in srgb,var(--card-bg) 88%,transparent); font-size:.74rem; font-weight:750; backdrop-filter:blur(2px); }
.market-analysis-error { flex-direction:column; color:#c63f49; text-align:center; }
.market-analysis-error[hidden],.market-analysis-loading[hidden] { display:none; }
.market-analysis-error button { min-height:34px; padding:.4rem .7rem; border:1px solid color-mix(in srgb,#ef4444 35%,var(--card-border)); border-radius:9px; color:#c63f49; background:rgba(239,68,68,.08); font-size:.65rem; font-weight:800; }
.market-analysis-history { margin:.85rem 1rem 1rem; overflow:hidden; border:1px solid var(--card-border); border-radius:14px; background:var(--card-bg); }
.market-analysis-history>header { display:flex; min-height:64px; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem .9rem; border-bottom:1px solid var(--card-border); background:color-mix(in srgb,var(--hover-bg) 55%,var(--card-bg)); }
.market-analysis-history>header>div { display:flex; align-items:center; gap:.65rem; }
.market-analysis-history-icon { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border-radius:10px; color:#008f84; background:color-mix(in srgb,var(--color-primary) 11%,var(--card-bg)); }
.market-analysis-history h3 { margin:0; color:var(--text-color); font-size:.86rem; font-weight:850; }
.market-analysis-history header p { margin:.16rem 0 0; color:var(--muted-text); font-size:.61rem; }
.market-analysis-history>header>span { padding:.35rem .55rem; border-radius:999px; color:#007f73; background:color-mix(in srgb,var(--color-primary) 10%,var(--card-bg)); font-size:.59rem; font-weight:800; white-space:nowrap; }
.market-analysis-table-wrap,.market-hourly-table-wrap { max-height:520px; overflow:auto; }
.market-analysis-table { width:100%; min-width:900px; border-collapse:separate; border-spacing:0; color:var(--text-color); font-size:.64rem; }
.market-analysis-table th { position:sticky; z-index:2; top:0; padding:.65rem .7rem; border-bottom:1px solid var(--card-border); color:var(--muted-text); background:var(--table-header-bg,var(--hover-bg)); font-size:.56rem; font-weight:850; text-align:left; text-transform:uppercase; white-space:nowrap; }
.market-analysis-table td { padding:.65rem .7rem; border-bottom:1px solid color-mix(in srgb,var(--card-border) 72%,transparent); vertical-align:middle; white-space:nowrap; }
.market-analysis-table th:first-child { z-index:4; left:0; }
.market-analysis-table td:first-child { position:sticky; z-index:1; left:0; background:var(--card-bg); }
.market-analysis-table tbody tr { cursor:pointer; outline:none; transition:background-color .15s ease; }
.market-analysis-table tbody tr:hover,.market-analysis-table tbody tr:focus-visible { background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); }
.market-analysis-table tbody tr:hover td:first-child,.market-analysis-table tbody tr:focus-visible td:first-child { background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); }
.market-analysis-table tbody tr:last-child td { border-bottom:0; }
.market-table-date,.market-table-price { font-weight:800; }
.market-table-score { display:inline-flex; min-width:38px; justify-content:center; padding:.25rem .42rem; border-radius:7px; font-weight:900; font-variant-numeric:tabular-nums; }
.market-table-score.is-buy { color:#059669; background:rgba(5,150,105,.10); }
.market-table-score.is-sell { color:#dc4b55; background:rgba(220,75,85,.09); }
.market-table-status { display:inline-flex; padding:.28rem .48rem; border-radius:999px; color:#64748b; background:rgba(100,116,139,.1); font-size:.57rem; font-weight:800; }
.market-table-status.is-buy { color:#047857; background:rgba(5,150,105,.1); }
.market-table-status.is-continuation { color:#0e7490; background:rgba(8,145,178,.1); }
.market-table-status.is-watch { color:#b66e00; background:rgba(245,158,11,.12); }
.market-table-status.is-sell-warning { color:#b66e00; background:rgba(245,158,11,.12); }
.market-table-status.is-sell { color:#c63f49; background:rgba(224,75,85,.1); }
.market-analysis-table-empty { padding:1.25rem; color:var(--muted-text); font-size:.68rem; text-align:center; }
.market-hourly-dialog { width:min(1120px,calc(100vw - 2rem)); max-width:none; padding:0; border:0; border-radius:17px; color:var(--text-color); background:transparent; box-shadow:0 24px 80px rgba(8,30,44,.28); }
.market-hourly-dialog::backdrop { background:rgba(8,24,36,.54); backdrop-filter:blur(3px); }
.market-hourly-dialog-card { display:flex; max-height:84vh; overflow:hidden; border:1px solid var(--card-border); border-radius:17px; background:var(--card-bg); flex-direction:column; }
.market-hourly-dialog-card>header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border-bottom:1px solid var(--card-border); background:color-mix(in srgb,var(--color-primary) 7%,var(--card-bg)); }
.market-hourly-dialog-card>header>div { display:flex; align-items:center; gap:.75rem; }
.market-hourly-dialog-card>header>div>span { display:grid; width:40px; height:40px; flex:0 0 40px; place-items:center; border-radius:11px; color:#008f84; background:color-mix(in srgb,var(--color-primary) 12%,var(--card-bg)); }
.market-hourly-dialog h2 { margin:0; color:var(--text-color); font-size:1rem; font-weight:850; text-transform:capitalize; }
.market-hourly-dialog header p { margin:.18rem 0 0; color:var(--muted-text); font-size:.62rem; }
.market-hourly-dialog header button { display:grid; width:36px; height:36px; flex:0 0 36px; place-items:center; border:1px solid var(--card-border); border-radius:9px; color:var(--muted-text); background:var(--card-bg); }
.market-hourly-loading,.market-hourly-error { display:flex; min-height:190px; align-items:center; justify-content:center; gap:.55rem; color:var(--muted-text); font-size:.72rem; font-weight:750; }
.market-hourly-error { color:#c63f49; }
.market-hourly-table-wrap { flex:1; max-height:none; }
.market-hourly-table tbody tr { cursor:default; }
.market-signal-details { border-top:1px solid var(--card-border); background:var(--card-bg); }
.market-signal-details summary { display:flex; min-height:45px; align-items:center; justify-content:space-between; gap:.75rem; padding:.7rem 1.35rem; color:var(--text-color); cursor:pointer; font-size:.66rem; font-weight:800; list-style:none; }
.market-signal-details summary::-webkit-details-marker { display:none; }
.market-signal-details summary span { display:inline-flex; align-items:center; gap:.42rem; }
.market-signal-details summary i { color:#00a783; }
.market-signal-details summary small { color:var(--muted-text); font-size:.56rem; font-weight:650; }
.market-signal-details[open] summary { border-bottom:1px solid var(--card-border); }
.market-signal-factors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; padding:.8rem 1.35rem .7rem; }
.market-signal-factor { position:relative; display:flex; min-width:0; padding:.65rem .72rem; border:1px solid var(--card-border); border-radius:11px; background:var(--hover-bg); flex-direction:column; }
.market-signal-factor::before { position:absolute; top:.65rem; right:.65rem; width:7px; height:7px; border-radius:50%; background:#94a3b8; content:""; }
.market-signal-factor.is-positive::before { background:#10b981; }
.market-signal-factor.is-negative::before { background:#ef4444; }
.market-signal-factor span { color:var(--muted-text); font-size:.56rem; font-weight:750; }
.market-signal-factor strong { margin:.18rem 1rem .12rem 0; color:var(--text-color); font-size:.8rem; font-variant-numeric:tabular-nums; }
.market-signal-factor small { color:var(--muted-text); font-size:.57rem; line-height:1.4; }
.market-signal-note { margin:0; padding:0 1.35rem .8rem; color:var(--muted-text); font-size:.54rem; line-height:1.45; }
.market-analysis-sources { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.72rem 1.35rem; border-top:1px solid var(--card-border); color:var(--muted-text); background:var(--table-header-bg,var(--hover-bg)); font-size:.58rem; }
.market-analysis-sources span { display:inline-flex; align-items:center; gap:.35rem; }
.market-analysis-sources a { color:#008f84; font-weight:800; }
.price-signal-legend { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.38rem .7rem; }
.price-signal-legend span { display:inline-flex; align-items:center; gap:.28rem; color:var(--muted-text); font-size:.54rem; font-weight:750; white-space:nowrap; }
.price-signal-legend b { display:grid; width:17px; height:17px; place-items:center; border-radius:50%; color:#fff; font-size:.48rem; line-height:1; }
.price-signal-legend .is-buy b { background:#059669; }
.price-signal-legend .is-sell-warning b { background:#f59e0b; }
.price-signal-legend .is-top-zone b { background:#7c3aed; }
.price-signal-legend .is-sell b { background:#ef4444; }
.price-signal-legend .is-watch b { width:9px; height:9px; margin:0 4px; border-radius:2px; background:#f59e0b; transform:rotate(45deg); }

@media (max-width:767.98px) {
    .market-analysis-page { padding-top:.25rem!important; }
    .market-analysis-hero { align-items:center; flex-direction:row; gap:.55rem; margin-bottom:.45rem; padding:.4rem .65rem; border:0; border-radius:0; background:transparent; box-shadow:none; }
    .market-analysis-hero>div:first-child { min-width:0; }
    .market-analysis-eyebrow,.market-analysis-hero p { display:none; }
    .market-analysis-hero h1 { overflow:hidden; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
    .market-analysis-status { margin-left:auto; padding:.34rem .48rem; font-size:.66rem; }
    .market-analysis-live-dot { width:6px; height:6px; box-shadow:0 0 0 3px rgba(0,167,131,.11); }
    .market-analysis-toolbar { align-items:stretch; flex-direction:column; gap:.8rem; padding:1rem .85rem .8rem; }
    .market-analysis-toolbar h2 { font-size:1.14rem; }
    .market-analysis-toolbar p { font-size:.78rem; }
    .market-analysis-heading { min-width:0; }
    .market-analysis-asset-picker { width:100%; justify-content:space-between; font-size:.7rem; }
    .market-analysis-asset-picker select { width:min(72%,230px); height:42px; font-size:.82rem; }
    .market-analysis-controls { width:100%; min-width:0; align-items:stretch; }
    .market-analysis-ranges { display:grid; grid-template-columns:repeat(6,1fr); gap:.25rem; }
    .market-analysis-ranges button { min-width:0; min-height:36px; padding:.3rem .2rem; font-size:.72rem; }
    .market-analysis-date-filter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; padding-top:.15rem; }
    .market-analysis-date-filter label { font-size:.72rem; }
    .market-analysis-date-filter input { width:100%; height:40px; font-size:.78rem; }
    .market-analysis-date-filter button { grid-column:1/-1; min-height:40px; font-size:.78rem; }
    .market-analysis-filter-error { font-size:.72rem; }
    .market-signal-card { grid-template-columns:auto minmax(0,1fr); gap:.7rem; margin:.6rem .6rem 0; padding:.85rem; }
    .market-signal-icon { width:40px; height:40px; }
    .market-signal-copy>span { font-size:.72rem; }
    .market-signal-copy h3 { font-size:1.06rem; }
    .market-signal-copy p { font-size:.84rem; line-height:1.48; }
    .market-signal-scores { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); width:auto; gap:.45rem; padding:.65rem 0 0; border-top:1px solid color-mix(in srgb,var(--signal-color) 18%,var(--card-border)); border-left:0; }
    .market-signal-score { grid-template-columns:28px minmax(0,1fr) 25px; padding:.55rem; }
    .market-signal-score-icon { width:28px; height:28px; font-size:.68rem; }
    .market-signal-score>span { font-size:.78rem; }
    .market-signal-score>strong { font-size:.84rem; }
    .market-signal-scores>small { display:none; }
    .market-pullback-card { margin:.5rem .6rem 0; }
    .market-pullback-summary { grid-template-columns:1fr; gap:.65rem; padding:.8rem; }
    .market-pullback-main>span { font-size:.74rem; }
    .market-pullback-current { order:-1; margin:0 0 .15rem; padding:0 0 .75rem; border:0; border-bottom:1px solid color-mix(in srgb,#f59e0b 22%,var(--card-border)); border-radius:0; background:transparent; }
    .market-pullback-current-values { padding:0; }
    .price-signal-legend { gap:.3rem .48rem; }
    .price-signal-legend span { font-size:.68rem; }
    .price-signal-legend b { width:18px; height:18px; font-size:.52rem; }
    .price-signal-legend .is-watch { display:none; }
    .market-pullback-probabilities { gap:.45rem; margin:.5rem 0 .65rem; }
    .market-pullback-probability { display:flex; min-width:0; padding:.65rem; flex-direction:column; align-items:flex-start; gap:.2rem; }
    .market-pullback-probability small { font-size:.72rem; }
    .market-pullback-probability strong { font-size:1.42rem; }
    .market-pullback-probability span { font-size:.74rem; line-height:1.4; }
    .market-pullback-headline { align-items:flex-start; flex-direction:column; gap:.14rem; }
    .market-pullback-headline strong { font-size:1.22rem; }
    .market-pullback-headline p { font-size:.82rem; line-height:1.45; }
    .market-pullback-pattern { font-size:.78rem; line-height:1.5; }
    .market-pullback-pattern span { font-size:.7rem; }
    .market-pullback-current-label { font-size:.78rem; }
    .market-current-value { gap:.38rem; padding:.48rem .42rem; }
    .market-current-value>i { width:25px; height:25px; flex-basis:25px; font-size:.7rem; }
    .market-current-value small { font-size:.72rem; }
    .market-current-value strong { font-size:.88rem; }
    .market-pullback-main>small { font-size:.8rem; line-height:1.45; }
    .market-pullback-outcomes { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .market-pullback-outcome { min-height:0; padding:.62rem .8rem; }
    .market-pullback-outcome>small { font-size:.78rem; }
    .market-pullback-outcome>strong { font-size:1.14rem; }
    .market-pullback-outcome>span { font-size:.74rem; line-height:1.4; }
    .market-pullback-outcome+.market-pullback-outcome { border-left:1px solid var(--card-border); }
    .market-pullback-outcome.is-depth { grid-column:1; grid-row:1/3; border-right:1px solid var(--card-border); border-left:0; }
    .market-pullback-outcome:not(.is-depth):first-child { grid-column:2; grid-row:1; border-left:0; }
    .market-pullback-outcome.is-recovery { grid-column:2; grid-row:2; border-top:1px solid var(--card-border); border-left:0; }
    .market-pullback-extremes { margin-top:.35rem; padding-top:.35rem; }
    .market-pullback-extremes span { font-size:.72rem; }
    .market-pullback-extremes b { font-size:.8rem; }
    .market-analysis-hover-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; padding:.9rem .8rem; font-size:.9rem; }
    .market-analysis-hover-values strong { grid-column:1/-1; margin:0; font-size:1rem; }
    .market-analysis-hover-values span { min-width:0; align-items:flex-start; flex-direction:column; gap:.18rem; white-space:normal; }
    .market-analysis-hover-values span b { font-size:.94rem; }
    .market-analysis-hover-values span i { margin-bottom:.05rem; }
    .market-analysis-charts { padding:.6rem; }
    .market-analysis-panel+.market-analysis-panel { margin-top:.5rem; }
    .market-analysis-panel>header { padding:.48rem .62rem; }
    .market-analysis-panel h3 { font-size:.92rem; }
    .market-analysis-panel header small { gap:.4rem; font-size:.76rem; }
    .market-analysis-panel.sentiment-panel>header { align-items:flex-start; flex-direction:column; }
    .fear-greed-legend { justify-content:flex-start; gap:.3rem .55rem!important; line-height:1.25; }
    .market-analysis-panel.price-panel .market-analysis-canvas { height:245px; }
    .market-analysis-canvas { height:145px; padding:.35rem .25rem .2rem; }
    .market-analysis-history { margin:.65rem .6rem; }
    .market-analysis-history>header { align-items:flex-start; padding:.75rem; }
    .market-analysis-history-icon { width:34px; height:34px; flex-basis:34px; }
    .market-analysis-history h3 { font-size:.92rem; }
    .market-analysis-history header p { font-size:.74rem; line-height:1.4; }
    .market-analysis-history>header>span { font-size:.7rem; }
    .market-analysis-table-wrap { max-height:430px; }
    .market-analysis-table { min-width:820px; font-size:.76rem; }
    .market-analysis-table th { padding:.62rem; font-size:.68rem; }
    .market-analysis-table td { padding:.62rem; }
    .market-table-status { font-size:.68rem; }
    .market-hourly-dialog { width:calc(100vw - 1rem); margin:auto; }
    .market-hourly-dialog-card { max-height:90dvh; }
    .market-hourly-dialog-card>header { align-items:flex-start; padding:.85rem; }
    .market-hourly-dialog h2 { font-size:1rem; }
    .market-hourly-dialog header p { font-size:.74rem; line-height:1.4; }
    .market-hourly-table-wrap { max-height:none; }
    .market-signal-details summary { padding:.65rem .85rem; font-size:.8rem; }
    .market-signal-details summary small { font-size:.7rem; }
    .market-signal-factors { grid-template-columns:1fr; gap:.45rem; padding:.65rem .85rem .55rem; }
    .market-signal-factor { padding:.58rem .65rem; }
    .market-signal-factor span { font-size:.72rem; }
    .market-signal-factor small { font-size:.74rem; }
    .market-signal-note { padding:0 .85rem .7rem; font-size:.72rem; }
    .market-analysis-sources { align-items:flex-start; flex-direction:column; padding:.7rem .85rem; font-size:.78rem; }
}