/* =========================================================
   TRADER-OPTION — MAIN STYLES
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root { 
    --bg: #0b1020;
    --panel: #121a2d;
    --panel-2: #18223a;
    --border: #263451;
    --text: #f4f7fb;
    --muted: #8d9ab3;
    --accent: #4f8cff;
    --accent-2: #6c5ce7;
    --green: #20c997;
    --red: #ff5c70;
    --yellow: #f6c344;
    --shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

input,
select {
    width: 100%;
    border: 1px solid var(--border);
    background: #0d1527;
    color: var(--text);
    border-radius: 8px;
    padding: 12px;
    outline: none;
}

input:focus,
select:focus {
    border-color: var(--accent);
}

/* =========================================================
   AUTH
   ========================================================= */

#authScreen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    background: #06090d;
    position: relative;
    overflow: hidden;
}

#authScreen::before,
#authScreen::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

#authScreen::before {
    top: -220px;
    right: -170px;
    background: rgba(57, 229, 140, .10);
}

#authScreen::after {
    bottom: -240px;
    left: -190px;
    background: rgba(79, 140, 255, .08);
}

.auth-shell {
    width: min(100%, 455px);
    position: relative;
    z-index: 1;
}

.auth-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
}

.auth-logo-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(57,229,140,.45);
    border-radius: 12px;
    color: #39e58c;
    background: rgba(57,229,140,.07);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
}

.auth-brand-name {
    color: #f7faf8;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: .12em;
}

.auth-brand-tag {
    color: #637081;
    font-size: 8px;
    letter-spacing: .18em;
    margin-top: 5px;
}

.auth-card {
    background: rgba(12,17,24,.96);
    border: 1px solid #202b36;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 28px 80px rgba(0,0,0,.42);
}

.auth-heading {
    margin-bottom: 24px;
}

.auth-heading h1 {
    color: #f5f8fb;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: -.035em;
    margin: 0 0 8px;
}

.auth-heading p {
    color: #748190;
    font-size: 12px;
    line-height: 1.6;
    margin: 0;
}

.auth-field {
    margin-top: 15px;
}

.auth-container label, .auth-field label {
    display: block;
    margin: 0 0 7px;
    color: #b9c3ce;
    font-size: 11px;
    font-weight: 700;
}

.auth-container input, .auth-field input {
    width: 100%;
    height: 48px;
    border: 1px solid #263341;
    background: #080d13;
    color: #f5f8fb;
    border-radius: 10px;
    padding: 0 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.auth-container input::placeholder, .auth-field input::placeholder {
    color: #566474;
}

.auth-container input:focus, .auth-field input:focus {
    border-color: #39e58c;
    box-shadow: 0 0 0 3px rgba(57,229,140,.08);
}

.primary-btn {
    width: 100%;
    height: 48px;
    margin-top: 22px;
    border: 0;
    border-radius: 10px;
    color: #04130b;
    background: #39e58c;
    font-weight: 900;
    font-size: 13px;
    transition: transform .15s, opacity .15s;
}

.primary-btn:hover {
    opacity: .92;
    transform: translateY(-1px);
}

.auth-switch {
    text-align: center;
    color: #697787;
    margin: 21px 0 0;
    font-size: 11px;
}

.link-button {
    border: 0;
    background: transparent;
    color: #39e58c;
    font-weight: 800;
    padding: 0 2px;
}

.auth-footer {
    text-align: center;
    color: #4f5c6a;
    font-size: 9px;
    letter-spacing: .1em;
    margin-top: 17px;
    text-transform: uppercase;
}

.auth-footer span { margin: 0 6px; color: #39e58c; }

@media (max-width: 480px) {
    #authScreen { padding: 20px 14px; }
    .auth-card { padding: 24px 19px; border-radius: 16px; }
    .auth-brand-name { font-size: 17px; }
    .auth-heading h1 { font-size: 24px; }
}

/* =========================================================
   HEADER
   ========================================================= */

.top-header {
    min-height: 72px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid var(--border);
    background: #0d1425;
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.platform-label {
    color: var(--muted);
    font-size: 13px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.connection-status {
    font-size: 13px;
    font-weight: 700;
}

.connection-status.offline {
    color: var(--red);
}

.connection-status.online {
    color: var(--green);
}

.icon-btn,
.secondary-btn {
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    border-radius: 8px;
    padding: 9px 13px;
}

.icon-btn {
    position: relative;
}

.icon-btn span {
    color: var(--yellow);
    font-weight: 700;
}

/* =========================================================
   MAIN DASHBOARD
   ========================================================= */

.dashboard {
    width: min(1500px, 94%);
    margin: 25px auto 60px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.panel-header h2 {
    font-size: 19px;
}

.panel-header p {
    color: var(--muted);
    font-size: 13px;
    margin-top: 5px;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.summary-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
}

.summary-card > span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 10px;
}

.summary-card strong {
    font-size: 25px;
}

.summary-actions {
    display: flex;
    gap: 8px;
    margin-top: 15px;
}

.summary-actions button {
    flex: 1;
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    padding: 9px;
    border-radius: 7px;
}

/* =========================================================
   MARKET SELECTOR
   ========================================================= */

.market-selector {
    max-width: 450px;
}

.market-selector label,
.trading-layout label {
    display: block;
    color: #c5cede;
    font-size: 13px;
    margin-bottom: 7px;
}

.market-status,
.live-indicator {
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}

/* Compact volatility market button */
.vol-market-button {
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--green);
    border-radius: 7px;
    padding: 5px 8px;
    min-width: 42px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
}

.vol-market-button:active,
.vol-market-button:focus-visible {
    outline: 1px solid var(--green);
    outline-offset: 1px;
}

/* =========================================================
   MARKET OVERVIEW
   ========================================================= */

.market-overview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.price-panel {
    min-height: 430px;
}

.live-price {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 15px 0 4px;
}

.price-time {
    color: var(--muted);
    font-size: 12px;
}

.direction {
    font-size: 24px;
    font-weight: 700;
}

.direction.up {
    color: var(--green);
}

.direction.down {
    color: var(--red);
}

.chart-wrapper {
    width: 100%;
    height: 280px;
    min-height: 0;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    flex: 0 1 auto;
}

#volatilityChart {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* =========================================================
   VOLATILITY
   ========================================================= */

.volatility-panel {
    min-height: 430px;
}

.volatility-score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 30px;
}

.volatility-score strong {
    font-size: 58px;
}

.volatility-score span {
    color: var(--muted);
}

.volatility-level {
    display: inline-block;
    margin: 12px 0 25px;
    padding: 7px 12px;
    border-radius: 20px;
    background: var(--panel-2);
    color: var(--yellow);
    font-weight: 700;
    font-size: 12px;
}

.volatility-meter {
    height: 10px;
    background: #0b1222;
    border-radius: 10px;
    overflow: hidden;
}

.volatility-meter-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--yellow), var(--red));
    transition: width 0.3s ease;
}

.volatility-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
}

.volatility-details div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.volatility-details span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 5px;
}

/* =========================================================
   WALLET ACTIONS
   ========================================================= */

.summary-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.summary-actions button {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 11px 14px;
    color: var(--text);
    background: var(--panel-2);
    font-weight: 700;
}

.summary-actions #depositBtn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
}

.summary-actions #withdrawBtn {
    background: linear-gradient(135deg, #1f2937, #263451);
}

.summary-actions button:hover {
    transform: translateY(-1px);
}

/* =========================================================
   ENTRY SCANNER
   ========================================================= */

.entry-scanner-panel {
    scroll-margin-top: 18px;
}

.entry-scan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0;
}

.entry-scan-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-2);
}

.entry-scan-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 7px;
}

.entry-scan-card strong {
    display: block;
    font-size: 17px;
}

.entry-scan-message {
    color: var(--muted);
    margin-bottom: 14px;
}

/* =========================================================
   DIGITS
   ========================================================= */

.digit-stream {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
}

.digit-stream span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    font-size: 14px;
    font-weight: 700;
    padding: 0;
    box-sizing: boder-box;
    margin: auto;
}
.digit-stat {
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px 7px;
    text-align: center;
    background: var(--panel-2);
}

.digit-stat strong {
    display: block;
    font-size: 18px;
}

.digit-stat span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 5px;
}

.digit-bar {
    height: 5px;
    background: #0b1222;
    border-radius: 5px;
    margin-top: 9px;
    overflow: hidden;
}

.digit-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.even-odd-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 18px;
}

.stat-box {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 15px;
}

.stat-box span {
    display: block;
    color: var(--muted);
    font-size: 13px;
}

.stat-box strong {
    display: block;
    font-size: 23px;
    margin-top: 6px;
}

/* =========================================================
   TRADING
   ========================================================= */

.trading-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
}

.mode-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.mode-btn {
    flex: 1;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    color: var(--muted);
}

.mode-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.form-group {
    margin-top: 15px;
}

.trading-layout label:not(:first-child) {
    margin-top: 15px;
}

.input-with-prefix {
    display: flex;
    align-items: center;
    background: #0d1527;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.input-with-prefix span {
    padding-left: 12px;
    color: var(--muted);
}

.input-with-prefix input {
    border: none;
    background: transparent;
}

.trade-buttons {
    display: grid;
    grid-template-columns: repeat(2, minimax(0, 120px));
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.trade-btn {
    padding: 5px 8px;
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 800;
    font-size: 12px;
}

.even-btn {
    background: #176f57;
}

.odd-btn {
    background: #8b3040;
}

.primary-trade-btn {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: white;
    font-weight: 800;
}

.trade-btn:hover,
.primary-trade-btn:hover,
.auto-start-btn:hover,
.auto-stop-btn:hover,
.ai-scan-btn:hover {
    opacity: 0.88;
}

/* =========================================================
   AUTO TRADING
   ========================================================= */

.auto-panel {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #0d1527;
}

.auto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.auto-status {
    color: var(--red);
    font-size: 12px;
    font-weight: 800;
}

.auto-status.active {
    color: var(--green);
}

.range-value {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 15px;
    color: var(--muted);
    font-size: 12px;
}

.range-value strong {
    color: var(--text);
}

.auto-start-btn,
.auto-stop-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 12px;
    color: white;
    font-weight: 700;
}

.auto-start-btn {
    background: var(--green);
}

.auto-stop-btn {
    background: var(--red);
}

/* =========================================================
   MARKET ANALYSIS
   ========================================================= */

.ai-panel {
    background:
        radial-gradient(circle at top right, rgba(108, 92, 231, 0.13), transparent 40%),
        var(--panel);
}

.ai-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    font-weight: 800;
}

.ai-header h2 {
    font-size: 19px;
}

.ai-header p {
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.ai-score-box {
    margin: 25px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-2);
}

.ai-score-box span {
    color: var(--muted);
    font-size: 12px;
}

.ai-score-box strong {
    font-size: 42px;
    margin-left: 12px;
}

.ai-score-box small {
    color: var(--muted);
}

.ai-analysis {
    min-height: 100px;
}

.ai-analysis h3 {
    font-size: 14px;
    margin-bottom: 8px;
}

.ai-analysis p {
    color: #b7c1d4;
    line-height: 1.6;
    font-size: 13px;
}

.ai-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 20px 0;
}

.ai-metrics div {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
}

.ai-metrics span {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.ai-metrics strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
}

.ai-scan-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    font-weight: 800;
}

.ai-disclaimer {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
    margin-top: 12px;
}

/* =========================================================
   POSITIONS / NOTIFICATIONS
   ========================================================= */

.positions-container,
.notifications-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.empty-state {
    padding: 25px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 9px;
}

.position-card,
.notification-card {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel-2);
}

.position-card {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    align-items: center;
}

.position-card span,
.notification-card span {
    color: var(--muted);
    font-size: 11px;
}

.position-card strong {
    display: block;
    margin-top: 5px;
}

.notification-card strong {
    display: block;
    margin-bottom: 5px;
}

/* =========================================================
   TABLE
   ========================================================= */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

th,
td {
    padding: 13px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

td {
    font-size: 13px;
}

.win {
    color: var(--green);
}

.loss {
    color: var(--red);
}

.pending {
    color: var(--yellow);
}

/* =========================================================
   ADMIN
   ========================================================= */

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.admin-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.admin-card span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 10px;
}

.admin-card strong {
    font-size: 24px;
}

.admin-platform-balance {
    padding: 25px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
}

.admin-platform-balance strong {
    font-size: 38px;
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .market-overview-grid,
    .trading-layout {
        grid-template-columns: 1fr;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .top-header {
        padding: 13px 15px;
        position: static;
    }

    .top-header .brand {
        font-size: 21px;
    }

    .platform-label {
        display: none;
    }

    .header-actions {
        gap: 6px;
    }

    .connection-status {
        display: none;
    }

    .secondary-btn {
        padding: 8px 9px;
        font-size: 12px;
    }

    .dashboard {
        width: 94%;
        margin-top: 15px;
    }

    .panel {
        padding: 16px;
        border-radius: 11px;
    }

    .summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .summary-card {
        padding: 14px;
    }

    .summary-card strong {
        font-size: 20px;
    }

    .summary-actions {
        flex-direction: column;
    }

    .market-overview-grid {
        gap: 10px;
    }

    .live-price {
        font-size: 38px;
    }

    .chart-wrapper {
        height: 220px;
    }

    .digit-stream {
        grid-template-columns: repeat(5, 1fr);
    }

    .digit-stream span {
        height: 42px;
    }

    .even-odd-summary {
        grid-template-columns: 1fr 1fr;
    }

    .ai-metrics {
        grid-template-columns: 1fr;
    }

    .entry-scan-grid {
        grid-template-columns: 1fr 1fr;
    }

    .position-card {
        grid-template-columns: 1fr 1fr;
    }

    .admin-stats {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .admin-card {
        padding: 14px;
    }

    .admin-card strong {
        font-size: 20px;
    }

    .auth-container {
        padding: 25px 20px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .entry-scan-grid {
        grid-template-columns: 1fr;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }
.digit-stream {
        grid-template-columns: repeat(5, 1fr);
    }

    .trade-buttons {
        grid-template-columns: 1fr;
    }

    .panel-header {
        align-items: flex-start;
    }
}
/* Live 0-9 digit row */
.live-digits-panel { overflow: hidden; }
.live-digits-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 4px;
    width:100%;
    max-width: 100%;
    margin: 12px 0;
    box-sizing: border-box;
}
.live-digits-row .live-digit-circle {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;

}
.live-digit-circle {
    aspect-ratio: 1;
    min-width: 0px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.035);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.live-digit-number { font-size: 17px; font-weight: 900; }
.live-digit-circle small { font-size: 9px; opacity: .72; }
.live-digit-circle.current-even { border-color: #20c997; box-shadow: 0 0 20px rgba(32,201,151,.42); background: rgba(32,201,151,.14); transform: scale(1.08); animation: liveEvenBlink .65s infinite; }
.live-digit-circle.current-odd { border-color: #ff5c70; box-shadow: 0 0 20px rgba(255,92,112,.42); background: rgba(255,92,112,.14); transform: scale(1.08); animation: liveOddBlink .65s infinite; }
@keyframes liveEvenBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes liveOddBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 760px) {
    .live-digits-row {
        grid-template-columns: repeat(10, 52px);
        overflow-x: auto;
        padding: 4px 2px 10px;
    }
}

/* =========================================================
   TRADER-OPTION — CLEAR TRADE WORKFLOW
   ========================================================= */
.trade-section-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 14px 0 8px;
}

.trade-section-label span {
    font-weight: 700;
}

.trade-section-label small,
.field-help,
.trade-note,
.auto-header small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.trade-buttons .trade-btn.selected {
    transform: translateY(-1px);
    outline: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 0 0 4px rgba(79,140,255,.15);
}

.trade-btn strong,
.trade-btn small {
    display: block;
}

.trade-btn small {
    margin-top: 4px;
    opacity: .85;
}

.selected-direction,
.entry-selected,
.risk-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 10px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    font-size: 13px;
}

.risk-summary strong {
    font-size: 15px;
}

.trade-note {
    display: block;
    margin-top: 8px;
}

.ai-choice-row,
.entry-choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.ai-choice-row button,
.entry-choice-row button {
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 12px;
    font-weight: 700;
}

.ai-choice-row button:hover,
.entry-choice-row button:hover {
    border-color: var(--accent);
}

.auto-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.auto-header > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


/* =========================================================
   DEMO / REAL ACCOUNT SWITCHER
   ========================================================= */
.account-switcher { margin-bottom: 18px; }
.account-switcher-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.account-switcher-head h2 { margin:0 0 4px; }
.account-switcher-head p { color:var(--muted); font-size:13px; }
.account-mode-status { padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; background:rgba(32,201,151,.12); color:var(--green); border:1px solid rgba(32,201,151,.3); }
.account-mode-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.account-mode-btn { border:1px solid var(--border); background:#0d1527; color:var(--text); border-radius:12px; padding:14px; text-align:left; display:flex; flex-direction:column; gap:5px; }
.account-mode-btn small { color:var(--muted); }
.account-mode-btn.active { border-color:var(--accent); box-shadow:0 0 0 1px rgba(79,140,255,.18); }
.account-notice { margin-top:12px; padding:10px 12px; border-radius:8px; color:var(--muted); background:rgba(246,195,68,.07); border:1px solid rgba(246,195,68,.2); font-size:12px; }
@media (max-width:760px) { .account-mode-buttons { grid-template-columns:1fr; } .account-switcher-head { align-items:flex-start; } }


/* =========================================================
   CLIENT SETTINGS / CUSTOMER CARE
========================================================= */
.settings-btn { white-space: nowrap; }
.settings-modal { position: fixed; inset: 0; display: none; z-index: 5000; }
.settings-modal.open { display: block; }
.settings-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.settings-card { position: relative; width: min(620px, calc(100% - 28px)); max-height: calc(100vh - 40px); overflow-y: auto; margin: 20px auto; padding: 24px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; background: #0b1620; box-shadow: 0 24px 80px rgba(0,0,0,.45); color: #edf5f8; }
.settings-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.settings-kicker { font-size:11px; letter-spacing:1.5px; color:#7fd8b1; font-weight:800; }
.settings-card h2 { margin:5px 0 6px; }
.settings-card-head p { margin:0; color:#8fa4af; }
.settings-close { flex:0 0 auto; }
.customer-care-card { display:flex; gap:16px; margin-top:22px; padding:18px; border:1px solid rgba(69,214,154,.18); border-radius:14px; background:rgba(18,39,48,.72); }
.customer-care-avatar { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:#173d37; color:#65e3b1; font-weight:800; }
.customer-care-main h3 { margin:3px 0 6px; }
.customer-care-main p { margin:0; color:#a0b1b9; line-height:1.5; }
.customer-care-label { font-size:10px; letter-spacing:1.3px; color:#72d8ae; font-weight:800; }
.customer-care-status { margin-top:10px; color:#71d9ac; font-size:12px; }
.customer-care-status span { display:inline-block; width:7px; height:7px; border-radius:50%; background:#43d996; margin-right:6px; }
.support-message-box { margin-top:16px; padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:#0e1d28; }
.support-message-box label { display:block; margin-bottom:8px; color:#d9e5e9; font-weight:700; }
.support-message-box textarea { width:100%; min-height:110px; resize:vertical; padding:12px; border-radius:10px; border:1px solid #2a414e; background:#08131b; color:#fff; font:inherit; }
.support-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }
.support-actions small { color:#758b97; line-height:1.4; }
.primary-btn { border:0; border-radius:9px; padding:11px 16px; background:#19b77a; color:#fff; font-weight:800; cursor:pointer; }
@media(max-width:600px){ .settings-card { margin:10px auto; max-height:calc(100vh - 20px); padding:18px; } .customer-care-card { align-items:flex-start; } .support-actions { align-items:stretch; flex-direction:column; } .primary-btn { width:100%; } .settings-btn { font-size:12px; padding:9px 10px; } }


.market-type-panel { padding: 10px; }
.market-type-tabs { display:flex; gap:10px; flex-wrap:wrap; }
.market-type-tab { flex:1; min-width:150px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:inherit; border-radius:12px; padding:12px 14px; cursor:pointer; font-weight:700; }
.market-type-tab.active { border-color:rgba(32,201,151,.95); background:rgba(32,201,151,.16); color:#fff; box-shadow:0 0 0 2px rgba(32,201,151,.28) inset, 0 0 14px rgba(32,201,151,.14); transform:translateY(-1px); }
.market-type-tab:disabled { opacity:.55; cursor:not-allowed; }

.customer-care-email{color:#72d8ae;font-weight:800;text-decoration:none}.customer-care-email:hover{text-decoration:underline}
.help-caution{margin:14px 0;padding:12px 14px;border:1px solid rgba(255,193,7,.35);border-radius:12px;background:rgba(255,193,7,.08);display:flex;gap:10px;align-items:flex-start;color:#e7edf2;line-height:1.45}.help-caution strong{white-space:nowrap;color:#f5c542;font-size:12px}.help-caution span{font-size:12px;color:#c8d0d6}


/* Deterministic screen switching: hidden always wins over inherited/layout styles. */
[hidden] { display: none !important; }
.boot-error {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999;
    padding: 14px 16px; border-radius: 10px; background: #3a1520; color: #ffd9df;
    border: 1px solid #7d3040; font: 14px/1.45 Arial, sans-serif;
}
.boot-error-static {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 99999;
    padding: 14px 16px; border-radius: 10px; background: #3a1520; color: #ffd9df;
    border: 1px solid #7d3040; font: 14px/1.45 Arial, sans-serif;
}

/* =========================================================
   TRADER-OPTION — SCREENSHOT-ALIGNED TRADING TERMINAL
   ========================================================= */
html, body { background:#0d111b; }
body { overflow-x:hidden; }

.top-header {
    min-height:72px;
    padding:10px 22px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;
    background:#111722;
    border-bottom:1px solid rgba(255,255,255,.07);
    position:sticky;
    top:0;
    z-index:100;
}
.header-brand { justify-self:start; }
.header-brand .brand { font-size:20px; letter-spacing:1.5px; }
.header-account-pill {
    justify-self:center;
    display:flex;
    align-items:center;
    gap:7px;
    min-width:166px;
    padding:6px 9px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:28px;
    background:#1a202c;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.header-account-mode {
    width:34px;
    height:34px;
    border:0;
    border-radius:50%;
    background:#202a35;
    color:#6c7685;
    font-weight:900;
    cursor:pointer;
}
.header-account-mode.active {
    background:#075e52;
    color:#15d0a0;
    box-shadow:0 0 0 1px rgba(15,209,160,.22);
}
.header-account-balance {
    min-width:88px;
    color:#f1f3f6;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.header-account-chevron { color:#778191; font-size:18px; }
.header-actions { justify-self:end; gap:8px; }
.connection-status { display:none; }
.wallet-btn {
    border:0;
    border-radius:24px;
    padding:11px 18px;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}
.deposit-btn { background:#00bd83; }
.withdraw-btn { background:#253043; }
.wallet-btn:hover { filter:brightness(1.08); }
.settings-btn { padding:10px 12px; }
.top-header .secondary-btn { background:#1b2330; }

.wallet-source { display:none !important; }

.dashboard {
    width:100%;
    max-width:none;
    margin:0;
    padding:0 0 35px;
}
.dashboard > .panel {
    border-radius:0;
    border-left:0;
    border-right:0;
    margin:0;
}
.dashboard > .panel.market-type-panel {
    background:#111722;
    padding:9px 20px;
}
.market-type-tabs {
    display:flex;
    justify-content:center;
    gap:12px;
}
.market-type-tab {
    border:0;
    background:transparent;
    color:#667184;
    padding:11px 19px;
    border-radius:26px;
    font-weight:800;
}
.market-type-tab.active {
    background:#1c2431;
    color:#f1f4f8;
    box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
.market-type-tab:first-child::before { content:"◎ "; }
.market-type-tab:nth-child(2)::before { content:"▦ "; color:#00c993; }
.market-type-tab:nth-child(3)::before { content:"↕ "; }

.dashboard > section:not(.market-type-panel):not(.live-digits-panel):not(.wallet-source) {
    margin-left:14px;
    margin-right:14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.06);
    background:#121925;
}
.live-digits-panel {
    margin:0 !important;
    padding:10px 14px !important;
    border:0 !important;
    border-radius:0 !important;
    background:#0e141e !important;
}
.live-digits-panel .panel-header { margin-bottom:7px; }
.live-digits-panel .panel-header h2 { font-size:12px; text-transform:uppercase; color:#7d8796; }
.live-digits-panel .panel-header p { display:none; }
.live-digits-panel .live-indicator { font-size:10px; }

.live-digits-row {
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:8px;
    margin:4px 0;
}
.live-digit-circle {
    min-width:0;
    width:100%;
    aspect-ratio:1/1;
    border-radius:50%;
    background:#101824;
    border:2px solid #1d2a40;
    box-sizing:border-box;
}
.live-digit-number { font-size:17px; }
.live-digit-circle small { font-size:10px; color:#8993a3; }
.live-digit-circle.current-even,
.live-digit-circle.current-odd {
    transform:translateY(-2px) scale(1.06);
    animation:none;
}
.live-digit-circle.current-even { border-color:#00cf94; background:rgba(0,207,148,.12); box-shadow:0 0 0 2px rgba(0,207,148,.08); }
.live-digit-circle.current-odd { border-color:#ff3861; background:rgba(255,56,97,.12); box-shadow:0 0 0 2px rgba(255,56,97,.08); }

.market-overview-grid {
    grid-template-columns:minmax(0,1fr);
    gap:0;
}
.market-overview-grid .volatility-panel { display:none; }
.price-panel {
    min-height:410px;
    border:0 !important;
    background:#121925 !important;
}
.chart-wrapper { height:330px; }

.trading-layout {
    grid-template-columns:1fr;
    gap:0;
}
.trading-layout > .panel:first-child {
    border-radius:0 !important;
    margin:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    background:#0d131d !important;
}
.trading-layout > .ai-panel {
    margin:0 !important;
    border-radius:0 !important;
}
.mode-selector {
    margin:0 -22px 12px;
    gap:0;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.mode-btn {
    border:0;
    border-radius:0;
    padding:18px;
    background:#0d131d;
}
.mode-btn.active { background:rgba(0,196,141,.10); color:#00ce94; }

.trade-section-label { display:none; }
.trade-buttons { margin-top:8px; }
.trade-btn {
    min-height:112px;
    border-radius:0;
    padding:15px;
}
.even-btn { background:#00c58b; }
.odd-btn { background:#ff2454; }
.trade-btn.selected { outline:none !important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }

.trading-layout label[for="stake"] { display:block; margin-top:16px; color:#9ba5b4; }
.input-with-prefix { height:58px; border-radius:0; }
.primary-trade-btn { border-radius:0; }

.ai-scan-btn { border-radius:0; }
.entry-scanner-panel { margin-top:12px !important; }

@media (max-width:760px) {
    .top-header {
        grid-template-columns:auto 1fr auto;
        padding:8px 10px;
        gap:8px;
    }
    .header-brand .brand { font-size:14px; }
    .header-account-pill {
        min-width:112px;
        justify-self:center;
        padding:4px 6px;
        gap:4px;
    }
    .header-account-mode { width:28px; height:28px; font-size:11px; }
    .header-account-balance { min-width:58px; font-size:12px; }
    .header-account-chevron { display:none; }
    .header-actions { gap:4px; }
    .header-actions .settings-btn { display:none; }
    .wallet-btn { padding:9px 10px; font-size:11px; }
    #logoutBtn { padding:8px 8px; font-size:10px; }
    .market-type-tabs { justify-content:space-between; gap:2px; }
    .market-type-tab { padding:10px 8px; font-size:11px; }
    .dashboard > section:not(.market-type-panel):not(.live-digits-panel):not(.wallet-source) {
        margin-left:0;
        margin-right:0;
    }
    .live-digits-row { gap:5px; }
    .live-digit-number { font-size:14px; }
    .live-digit-circle small { font-size:8px; }
    .price-panel { min-height:350px; }
    .chart-wrapper { height:285px; }
}
@media (max-width:480px) {
    .top-header { grid-template-columns:auto auto 1fr; }
    .header-account-pill { margin-left:2px; }
    .wallet-btn.withdraw-btn { display:none; }
    .wallet-btn.deposit-btn { padding:9px 12px; }
    #logoutBtn { max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}


/* =========================================================
   FINAL MOBILE TERMINAL / SLIDE MENU
   ========================================================= */
#appScreen { min-height:100vh; height:100vh; overflow:hidden; }
.menu-btn {
    width:38px; height:38px; border:0; border-radius:10px;
    background:#1a2432; color:#f4f7fb; font-size:22px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
}
.header-brand { display:flex; align-items:center; gap:9px; }
.side-menu { position:fixed; inset:0; z-index:6000; visibility:hidden; pointer-events:none; }
.side-menu.open { visibility:visible; pointer-events:auto; }
.side-menu-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.62); opacity:0; transition:opacity .2s ease; }
.side-menu.open .side-menu-backdrop { opacity:1; }
.side-menu-panel {
    position:absolute; top:0; left:0; bottom:0; width:min(88vw,360px);
    background:#0e141e; border-right:1px solid rgba(255,255,255,.08);
    padding:18px 14px; overflow-y:auto; transform:translateX(-102%);
    transition:transform .22s ease; box-shadow:18px 0 45px rgba(0,0,0,.35);
}
.side-menu.open .side-menu-panel { transform:translateX(0); }
.side-menu-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.side-menu-head h2 { margin-top:3px; font-size:22px; }
.side-nav-btn {
    width:100%; display:flex; align-items:center; gap:12px; border:0;
    border-radius:12px; padding:13px 14px; margin:5px 0; background:transparent;
    color:#9aa6b8; text-align:left; font-weight:800;
}
.side-nav-btn.active { background:#182331; color:#f4f7fb; }
.side-menu-view { display:none; margin-top:16px; padding-top:15px; border-top:1px solid rgba(255,255,255,.07); }
.side-menu-view.active { display:block; }
.side-menu-hint { color:#8e99aa; line-height:1.5; font-size:13px; }
.side-menu-panel .table-wrapper { overflow-x:auto; }
.side-menu-panel .customer-care-card { margin-top:0; }

@media (max-width:760px) {
    html, body { width:100%; height:100%; overflow:hidden; }
    #appScreen { height:100dvh; min-height:0; }
    .top-header { height:56px; min-height:56px; padding:7px 9px; }
    .header-brand .brand { font-size:12px; letter-spacing:1px; }
    .menu-btn { width:34px; height:34px; font-size:19px; }
    .header-account-pill { min-width:98px; }
    .header-account-mode { width:25px; height:25px; }
    .header-account-balance { min-width:48px; font-size:11px; }
    .header-actions { display:flex; }
    .wallet-btn { padding:8px 9px; font-size:10px; }
    #logoutBtn { display:none; }

    .dashboard {
        height:calc(100dvh - 56px); min-height:0; padding:0;
        display:flex; flex-direction:column; overflow:hidden;
    }
    .dashboard > .panel.market-type-panel { flex:0 0 40px; padding:3px 6px; }
    .market-type-tabs { height:34px; gap:1px; }
    .market-type-tab { padding:7px 4px; font-size:9px; min-width:0; }
    .market-type-tab:first-child::before, .market-type-tab:nth-child(2)::before, .market-type-tab:nth-child(3)::before { display:none; }

    .market-selector { display:none; }
    .dashboard > section.market-overview-grid { flex:0 0 35%; min-height:190px; margin:0; border:0; border-radius:0; }
    .price-panel { min-height:0; height:100%; padding:8px 10px !important; }
    .price-panel .panel-header { margin-bottom:2px; }
    .price-panel .panel-header h2 { font-size:12px; }
    .price-panel .panel-header p { font-size:9px; }
    .live-price { font-size:24px; line-height:1.05; }
    .price-time { font-size:8px; }
    .chart-wrapper { flex:1 1 auto; height:auto !important; min-height:130px; margin-top:6px; overflow:hidden; }

    .live-digits-panel { flex:0 0 74px; padding:5px 7px !important; }
    .live-digits-panel .panel-header { margin-bottom:2px; height:14px; }
    .live-digits-panel .panel-header h2 { font-size:9px; }
    .live-digits-row { gap:3px; margin:2px 0; }
    .live-digit-number { font-size:11px; }
    .live-digit-circle small { font-size:7px; }
    .live-digit-circle.current-even, .live-digit-circle.current-odd { transform:translateY(-1px) scale(1.08); }

    .dashboard > .trading-layout { flex:1 1 auto; min-height:0; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px; margin:0; }
    .trading-layout > .panel { min-height:0; overflow:hidden; padding:8px !important; }
    .trading-layout > .panel:first-child { display:flex; flex-direction:column; }
    .mode-selector { margin:0 -8px 5px; }
    .mode-btn { padding:7px 5px; font-size:9px; }
    .trade-buttons { gap:4px; }
    .trade-btn { min-height:52px; padding:6px; }
    .trade-btn strong { font-size:11px; }
    .trade-btn small { font-size:8px; }
    .trading-layout label[for="stake"], .trading-layout label[for="takeProfit"], .trading-layout label[for="stopLoss"], .trading-layout label[for="multiplier"] { margin-top:5px; font-size:8px; }
    .input-with-prefix { height:30px; font-size:10px; }
    .input-with-prefix input { padding:5px; font-size:10px; }
    .field-help, .trade-note, .risk-summary, .auto-panel { font-size:7px; }
    .primary-trade-btn { padding:9px 4px; font-size:9px; margin-top:6px; }
    .ai-panel { display:flex; flex-direction:column; }
    .ai-header { margin-bottom:5px; }
    .ai-icon { width:26px; height:26px; font-size:9px; }
    .ai-header h2 { font-size:10px; }
    .ai-header p { font-size:7px; }
    .ai-score-box { padding:7px; }
    .ai-score-box strong { font-size:20px; }
    .ai-analysis h3 { font-size:8px; }
    .ai-analysis p { font-size:7px; line-height:1.3; }
    .ai-metrics { padding:4px; }
    .ai-metrics strong { font-size:10px; }
    .ai-scan-btn, .ai-choice-row button { min-height:29px; padding:5px; font-size:7px; }
    .ai-disclaimer { font-size:6px; margin-top:4px; }

    /* Secondary panels live in the slide menu on phones, keeping the trading screen one viewport tall. */
    .dashboard > section.panel:not(.market-type-panel):not(.live-digits-panel):not(.market-overview-grid):not(.trading-layout) { display:none; }
}

/* =========================================================
   FINAL MOBILE TERMINAL POLISH — TRADER-OPTION
   ========================================================= */
.live-digits-panel {
    order: 10;
}
.live-digits-row {
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:7px;
    width:100%;
}
.live-digit-card {
    position:relative;
    min-width:0;
    width:100%;
    min-height:82px;
    padding:10px 5px 8px;
    border:1px solid #243248;
    border-radius:12px;
    background:#101824;
    color:#f4f7fb;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
    transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.live-digit-card:hover { transform:translateY(-1px); }
.live-digit-number {
    font-size:19px;
    line-height:1;
    font-weight:900;
}
.live-digit-percent {
    font-size:10px;
    line-height:1;
    color:#8e9aac;
    font-weight:800;
}
.live-digit-bar {
    width:76%;
    height:3px;
    border-radius:5px;
    overflow:hidden;
    background:#202b3c;
}
.live-digit-bar > span {
    display:block;
    width:0;
    height:100%;
    background:#39e58c;
    border-radius:inherit;
    transition:width .25s ease;
}
.live-digit-current {
    min-height:10px;
    font-size:7px;
    line-height:1;
    letter-spacing:.08em;
    color:transparent;
    font-weight:900;
}
.live-digit-card.current {
    transform:translateY(-1px);
}

/* Idle state: parity is visible but intentionally faded before a trade starts. */
.live-digit-card.current-even {
    border-color:rgba(57,229,140,.28);
    background:rgba(57,229,140,.035);
    box-shadow:0 0 0 1px rgba(57,229,140,.06);
    opacity:.48;
}
.live-digit-card.current-odd {
    border-color:rgba(255,107,122,.28);
    background:rgba(255,107,122,.035);
    box-shadow:0 0 0 1px rgba(255,107,122,.06);
    opacity:.48;
}
.live-digit-card.current-even .live-digit-number { color:rgba(57,229,140,.65); }
.live-digit-card.current-odd .live-digit-number { color:rgba(255,107,122,.65); }
.live-digit-card.current-even .live-digit-bar > span { background:#39e58c; opacity:.55; }
.live-digit-card.current-odd .live-digit-bar > span { background:#ff6b7a; opacity:.55; }

/* Active trade: the latest digit becomes the clear green EVEN / red ODD light. */
.live-digits-panel.trade-active .live-digit-card.current-even {
    border-color:#39e58c;
    background:rgba(57,229,140,.14);
    box-shadow:0 0 0 1px rgba(57,229,140,.25),0 0 22px rgba(57,229,140,.45);
    opacity:1;
    transform:translateY(-2px) scale(1.05);
    animation:liveEvenBlink .65s infinite;
}
.live-digits-panel.trade-active .live-digit-card.current-odd {
    border-color:#ff5c70;
    background:rgba(255,92,112,.14);
    box-shadow:0 0 0 1px rgba(255,92,112,.25),0 0 22px rgba(255,92,112,.45);
    opacity:1;
    transform:translateY(-2px) scale(1.05);
    animation:liveOddBlink .65s infinite;
}
.live-digits-panel.trade-active .live-digit-card.current-even .live-digit-number {
    color:#39e58c;
}
.live-digits-panel.trade-active .live-digit-card.current-odd .live-digit-number {
    color:#ff6b7a;
}
.live-digits-panel.trade-active .live-digit-card.current-even .live-digit-bar > span {
    background:#39e58c;
    opacity:1;
}
.live-digits-panel.trade-active .live-digit-card.current-odd .live-digit-bar > span {
    background:#ff5c70;
    opacity:1;
}
.live-digits-panel.trade-active .live-digit-card.current .live-digit-current {
    color:#fff;
}

/* Feature tabs sit directly below the live digits and use equal-sized boxes. */
.dashboard > .panel.market-type-panel {
    margin:0 14px 14px;
    padding:8px !important;
    border-radius:14px !important;
    background:#121925 !important;
    border:1px solid rgba(255,255,255,.06) !important;
}
.market-type-tabs {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    width:100%;
}
.market-type-tab {
    width:100%;
    min-width:0 !important;
    height:46px;
    padding:0 8px !important;
    border:1px solid #263248 !important;
    border-radius:10px !important;
    background:#151d2a !important;
    color:#8b96a8 !important;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}
.market-type-tab.active {
    color:#f4f7fb !important;
    border-color:#39e58c !important;
    background:#17251f !important;
    box-shadow:inset 0 0 0 1px rgba(57,229,140,.16) !important;
}

/* Keep every primary feature/action control visually consistent. */
.mode-selector,
.trade-buttons,
.ai-choice-row {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}
.mode-btn,
.trade-btn,
.ai-choice-row button,
.auto-start-btn,
.auto-stop-btn,
.ai-scan-btn,
.primary-trade-btn {
    min-height:46px;
    height:46px;
    border-radius:10px;
}
.mode-btn { width:100%; }
.trade-btn { width:100%; }
.ai-choice-row button { width:100%; }

/* Cleaner mobile terminal spacing. */
.trading-layout { gap:14px; }
.trading-layout > .panel { min-width:0; }
@media (max-width: 760px) {
    .top-header {
        min-height:auto;
        padding:10px 12px;
        grid-template-columns:1fr auto;
        gap:8px;
    }
    .header-brand .brand { font-size:15px; }
    .header-account-pill { min-width:145px; }
    .header-account-balance { min-width:74px; font-size:13px; }
    .header-actions {
        grid-column:1 / -1;
        justify-self:stretch;
        display:grid;
        grid-template-columns:1fr 1fr auto;
        gap:7px;
    }
    .wallet-btn,.top-header .secondary-btn {
        width:100%;
        padding:10px 8px;
        font-size:11px;
    }
    .live-digits-panel { padding:9px 8px !important; }
    .live-digits-row { gap:5px; }
    .live-digit-card {
        min-height:70px;
        border-radius:9px;
        padding:7px 2px;
    }
    .live-digit-number { font-size:16px; }
    .live-digit-percent { font-size:9px; }
    .live-digit-bar { width:70%; }
    .dashboard > .panel.market-type-panel {
        margin-left:8px;
        margin-right:8px;
    }
    .market-type-tab {
        height:44px;
        font-size:9px;
        padding:0 4px !important;
    }
    .trading-layout {
        grid-template-columns:1fr !important;
    }
}
@media (max-width: 390px) {
    .live-digits-row { gap:3px; }
    .live-digit-card { min-height:64px; }
    .live-digit-number { font-size:14px; }
    .live-digit-percent { font-size:8px; }
    .live-digit-current { font-size:6px; }
    .market-type-tab { font-size:8px; }
}
/* =========================================================
   LIVE DIGIT ENGINE — PARITY MARKET TICK INDICATOR
   ========================================================= */
.live-digit-card .live-digit-bar > span {
    background:#526176;
}
.live-digit-card.digit-even .live-digit-bar > span {
    background:#20c997;
}
.live-digit-card.digit-odd .live-digit-bar > span {
    background:#ff5c70;
}
.live-digit-card.current-even {
    border-color:#20c997;
    background:rgba(32,201,151,.12);
    animation:liveEvenPulse .7s ease-in-out infinite alternate;
}
.live-digit-card.current-odd {
    border-color:#ff5c70;
    background:rgba(255,92,112,.12);
    animation:liveOddPulse .7s ease-in-out infinite alternate;
}
.live-digit-card.current-even .live-digit-bar > span,
.live-digit-card.current-odd .live-digit-bar > span {
    animation:liveBarPulse .55s ease-in-out infinite alternate;
}
@keyframes liveEvenPulse {
    from { box-shadow:0 0 0 1px rgba(32,201,151,.25),0 0 7px rgba(32,201,151,.12); }
    to { box-shadow:0 0 0 2px rgba(32,201,151,.60),0 0 18px rgba(32,201,151,.34); }
}
@keyframes liveOddPulse {
    from { box-shadow:0 0 0 1px rgba(255,92,112,.25),0 0 7px rgba(255,92,112,.12); }
    to { box-shadow:0 0 0 2px rgba(255,92,112,.60),0 0 18px rgba(255,92,112,.34); }
}
@keyframes liveBarPulse {
    from { opacity:.55; transform:scaleX(.96); transform-origin:center; }
    to { opacity:1; transform:scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
    .live-digit-card.current-even,
    .live-digit-card.current-odd,
    .live-digit-card.current-even .live-digit-bar > span,
    .live-digit-card.current-odd .live-digit-bar > span { animation:none; }
}


/* FINAL CUSTOMER SLIDE MENU — requested mobile arrangement */
.side-nav-list { display:flex; flex-direction:column; gap:2px; }
.side-nav-btn { cursor:pointer; }
.side-menu-view h3 { margin:0 0 12px; color:#f4f7fb; }
.profile-card { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:#121b28; }
.profile-avatar { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#075e52; color:#15d0a0; font-weight:900; }
.profile-card strong,.profile-card small { display:block; }
.profile-card strong { margin-top:3px; color:#f4f7fb; }
.profile-card small { margin-top:3px; color:#8995a7; }
.profile-details { display:grid; grid-template-columns:1fr; gap:7px; margin-top:10px; }
.profile-details > div { display:flex; justify-content:space-between; gap:10px; padding:10px 11px; border-radius:10px; background:#111a26; }
.profile-details span { color:#8995a7; font-size:11px; }.profile-details strong { color:#f4f7fb; font-size:11px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; margin:6px 0; border-radius:11px; background:#111a26; color:#dfe5ee; font-size:12px; }
.setting-row input { width:18px; height:18px; accent-color:#15d0a0; }
.settings-action { width:100%; margin-top:8px; padding:11px; }
.live-digit-card.current-even { border-color:#39e58c; box-shadow:0 0 0 1px rgba(57,229,140,.35),0 0 20px rgba(57,229,140,.2); animation:digitPulseGreen .7s ease-in-out infinite alternate; }
.live-digit-card.current-odd { border-color:#ff5b6e; background:#28151b; box-shadow:0 0 0 1px rgba(255,91,110,.35),0 0 20px rgba(255,91,110,.18); animation:digitPulseRed .7s ease-in-out infinite alternate; }
.live-digit-card.current-odd .live-digit-current { color:#ff6b7a; }
@keyframes digitPulseGreen { from { transform:translateY(-1px) scale(1); } to { transform:translateY(-2px) scale(1.045); } }
@keyframes digitPulseRed { from { transform:translateY(-1px) scale(1); } to { transform:translateY(-2px) scale(1.045); } }

/* Crypto wallet */
.crypto-wallet-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:18px}.crypto-wallet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.crypto-wallet-card{position:relative;width:min(620px,100%);max-height:92vh;overflow:auto;background:#0b1721;border:1px solid #263a48;border-radius:22px;box-shadow:0 24px 80px rgba(0,0,0,.5);padding:22px}.crypto-wallet-head{display:flex;justify-content:space-between;gap:16px}.crypto-wallet-head h2{margin:4px 0;font-size:25px}.crypto-wallet-head p,.crypto-note{color:#8ea4b2;font-size:13px;line-height:1.5}.crypto-tabs{display:grid;grid-template-columns:1fr 1fr;background:#071018;border-radius:12px;padding:4px;margin:18px 0}.crypto-tab{border:0;background:transparent;color:#8ea4b2;padding:11px;border-radius:9px;font-weight:700;cursor:pointer}.crypto-tab.active{background:#173142;color:#fff}.crypto-panel{display:none}.crypto-panel.active{display:block}.crypto-panel>label,.crypto-grid label{display:grid;gap:7px;color:#a9bbc5;font-size:13px;margin:12px 0}.crypto-panel input,.crypto-panel select{width:100%;padding:13px;border-radius:10px;border:1px solid #2a404e;background:#08131b;color:#fff;outline:none}.crypto-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wallet-address-card{display:flex;align-items:center;gap:10px;padding:14px;background:#101f2b;border:1px solid #284252;border-radius:13px;margin:14px 0}.wallet-address-card div{min-width:0;flex:1}.wallet-address-card span{display:block;color:#8298a6;font-size:11px;margin-bottom:5px}.wallet-address-card strong{display:block;font-size:12px;word-break:break-all}.wallet-address-card button{border:1px solid #365160;background:#182b38;color:#fff;border-radius:8px;padding:9px 11px}.crypto-balance{display:flex;justify-content:space-between;padding:15px;border-radius:13px;background:#101f2b;border:1px solid #284252;margin-bottom:12px}.crypto-balance span{color:#8ea4b2}.crypto-wallet-status{min-height:20px;margin-top:14px;padding:10px;border-radius:9px;font-size:13px}.crypto-wallet-status.success{background:rgba(25,183,122,.12);color:#42d69a}.crypto-wallet-status.error{background:rgba(220,70,80,.12);color:#ff8c96}.wallet-network-settings{display:grid;gap:10px}.wallet-network-settings input{margin-top:6px}
@media(max-width:600px){.crypto-grid{grid-template-columns:1fr}.crypto-wallet-card{padding:17px;border-radius:18px}.crypto-wallet-modal{padding:8px}.wallet-address-card{align-items:flex-start}}

.wallet-method-tabs{display:flex;gap:8px;margin:10px 0}.wallet-method{flex:1;padding:10px;border:1px solid #2a404e;border-radius:10px;background:#0d1b24;color:#a9bac5}.wallet-method.active{background:#173646;color:#fff;border-color:#3c728c}.crypto-panel label{display:block;margin:10px 0}.crypto-panel input,.crypto-panel select{width:100%;box-sizing:border-box}

/* =========================================================
   COMPACT AI VOLATILITY SCANNER
   ========================================================= */
.trading-layout { grid-template-columns: minmax(0,1fr) minmax(220px,280px); align-items:start; }
.trade-controls-panel { min-width:0; }
.compact-ai-scanner { min-width:0; height:max-content; position:relative; overflow:hidden; padding:14px !important; }
.compact-ai-scanner .ai-header { gap:8px; margin-bottom:10px; }
.compact-ai-scanner .ai-icon { width:30px; height:30px; border-radius:8px; font-size:10px; flex:0 0 auto; }
.compact-ai-scanner .ai-header h2 { margin:0; font-size:13px; }
.compact-ai-scanner .ai-header p { margin:2px 0 0; font-size:9px; color:var(--muted); }
.compact-ai-score { display:flex; align-items:baseline; gap:4px; padding:10px !important; margin-bottom:8px; }
.compact-ai-score span { font-size:8px; color:var(--muted); }
.compact-ai-score strong { font-size:28px !important; line-height:1; }
.compact-ai-score small { color:var(--muted); font-size:9px; }
.compact-ai-row { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); margin:7px 1px; }
.compact-ai-row strong { color:var(--text); }
.compact-ai-meter { height:6px; background:#0b1222; border-radius:8px; overflow:hidden; }
.compact-ai-meter i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--green),var(--yellow),var(--red)); transition:width .3s ease; }
.compact-ai-message { min-height:28px; margin:8px 0; font-size:9px; line-height:1.35; color:var(--muted); }
.compact-ai-scan { width:100%; min-height:32px !important; padding:7px !important; font-size:9px !important; }
.compact-ai-scanner .ai-disclaimer { display:block; margin-top:6px; font-size:7px; line-height:1.3; color:var(--muted); }
.wallet-method-tabs.hidden { display:none; }
.wallet-method-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0 14px; }
.wallet-method { cursor:pointer; font-weight:700; }
.secure-card-box { padding:14px; border:1px solid #284252; background:#101f2b; border-radius:12px; display:grid; gap:5px; margin:12px 0; }
.secure-card-box strong { font-size:13px; }
.secure-card-box span { color:#8ea4b2; font-size:11px; line-height:1.45; }
@media(max-width:760px){
  .trading-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:5px; }
  .compact-ai-scanner { padding:8px !important; }
  .compact-ai-scanner .ai-header h2 { font-size:10px; }
  .compact-ai-scanner .ai-header p { font-size:7px; }
  .compact-ai-score strong { font-size:20px !important; }
  .compact-ai-message { font-size:7px; min-height:24px; }
  .compact-ai-scanner .ai-disclaimer { font-size:6px; }
}


/* =========================================================
   FINAL UI FIX — MOBILE HEADER + SLIDE MENU LOGOUT
   Keep wallet controls visible without crowding the phone header.
   ========================================================= */
.side-menu-panel {
    display:flex;
    flex-direction:column;
}
.side-menu-footer {
    margin-top:auto;
    padding-top:16px;
}
.side-logout-btn {
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid rgba(255,92,112,.28);
    border-radius:12px;
    background:rgba(255,92,112,.08);
    color:#ff7081;
    font-weight:900;
    font-size:13px;
}
.side-logout-btn:hover {
    background:rgba(255,92,112,.14);
}

@media (max-width:760px) {
    /* One clean phone header row for brand/account; wallet actions sit directly below it. */
    .top-header {
        min-height:102px;
        height:auto;
        grid-template-columns:auto 1fr auto;
        grid-template-rows:54px 40px;
        padding:5px 9px 7px;
        gap:3px 7px;
    }
    .header-brand .brand {
        font-size:12px;
        letter-spacing:1px;
        white-space:nowrap;
    }
    .menu-btn {
        width:34px;
        height:34px;
        font-size:19px;
        border-radius:9px;
    }
    .header-account-pill {
        min-width:104px;
        justify-self:end;
        padding:3px 5px;
        gap:3px;
    }
    .header-account-mode {
        width:27px;
        height:27px;
        font-size:10px;
    }
    .header-account-balance {
        min-width:58px;
        font-size:11px;
    }
    .header-actions {
        grid-column:1 / -1;
        grid-row:2;
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:6px;
        justify-self:stretch;
    }
    .header-actions .connection-status,
    .header-actions #logoutBtn {
        display:none !important;
    }
    .wallet-btn {
        width:100%;
        min-height:36px;
        padding:7px 9px;
        border-radius:10px;
        font-size:10px;
    }

    /* Let the complete terminal remain reachable by normal phone scrolling. */
    #appScreen {
        min-height:100dvh;
        height:auto;
        overflow:visible;
    }
    html, body {
        height:auto;
        min-height:100%;
        overflow-x:hidden;
        overflow-y:auto;
    }
    .dashboard {
        height:auto;
        min-height:calc(100dvh - 102px);
        overflow:visible;
    }

    /* Keep the compact AI scanner inside its own box and never over another control. */
    .trading-layout {
        align-items:start;
    }
    .compact-ai-scanner {
        position:relative;
        z-index:1;
        max-width:100%;
        overflow:hidden;
    }
}

@media (max-width:430px) {
    .top-header {
        grid-template-columns:auto 1fr auto;
        padding-left:7px;
        padding-right:7px;
    }
    .header-brand .brand {
        font-size:11px;
    }
    .header-account-pill {
        min-width:98px;
    }
    .wallet-btn {
        font-size:10px;
        min-height:35px;
    }
    .side-menu-panel {
        width:min(90vw,350px);
    }
}


/* =========================================================
   FINAL RESPONSIVE LAYOUT / GRAPH SAFETY OVERRIDES
   2026-09-19
   ========================================================= */

/* The chart must size from its container, never from a hard-coded canvas size. */
.chart-wrapper {
    width: 100%;
    min-width: 0;
    height: clamp(220px, 30vw, 360px);
    position: relative;
    overflow: hidden;
    contain: layout paint;
}
.chart-wrapper canvas,
#volatilityChart {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
}

/* Prevent long labels/controls from forcing a desktop-width layout. */
.dashboard,
.panel,
.market-overview-grid,
.trading-layout,
.summary-grid,
.trade-controls-panel,
.compact-ai-scanner {
    min-width: 0;
}
.panel,
.summary-card,
.trade-controls-panel,
.compact-ai-scanner {
    overflow-wrap: anywhere;
}

/* Tablet: keep the market area readable and trade controls full width. */
@media (max-width: 1100px) {
    .dashboard {
        width: min(96%, 980px);
    }
    .market-overview-grid {
        grid-template-columns: minmax(0, 1.6fr) minmax(260px, .9fr);
    }
    .trading-layout {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    }
}

/* Phone: one reliable vertical flow. Nothing is squeezed over another
   control, and the AI scanner stays in its own compact box. */
@media (max-width: 760px) {
    .top-header {
        min-height: 102px;
        height: auto;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: 54px 40px;
        gap: 3px 7px;
        padding: 5px 9px 7px;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .header-brand,
    .header-account-pill,
    .header-actions {
        min-width: 0;
    }

    .header-account-pill {
        justify-self: end;
        max-width: 45vw;
    }

    .header-actions {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .header-actions .connection-status,
    .header-actions #logoutBtn {
        display: none !important;
    }

    .wallet-btn {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        padding: 7px 8px;
        white-space: nowrap;
    }

    #appScreen {
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    html, body {
        width: 100%;
        min-height: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .dashboard {
        width: 100%;
        margin: 0 auto;
        min-height: calc(100dvh - 102px);
        padding: 10px;
        display: block;
        overflow: visible;
    }

    .dashboard > .panel,
    .dashboard > .market-overview-grid,
    .dashboard > .trading-layout {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .market-overview-grid,
    .trading-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px;
    }

    .price-panel,
    .volatility-panel,
    .trade-controls-panel,
    .compact-ai-scanner {
        width: 100%;
        min-width: 0;
    }

    .chart-wrapper {
        height: 230px !important;
        min-height: 180px;
        margin-top: 10px;
    }

    .live-price {
        font-size: clamp(28px, 9vw, 40px);
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-actions,
    .trade-buttons,
    .mode-selector {
        width: 100%;
    }

    .summary-actions {
        flex-direction: column;
    }

    .summary-actions button,
    .trade-btn,
    .mode-btn,
    .primary-trade-btn,
    .auto-start-btn,
    .auto-stop-btn {
        min-height: 44px;
        width: 100%;
    }

    .entry-scan-grid,
    .volatility-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-digits-row {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compact-ai-scanner {
        order: 2;
        padding: 12px !important;
    }

    .compact-ai-scanner .ai-header h2 {
        font-size: 13px;
    }

    .compact-ai-scanner .ai-header p,
    .compact-ai-message {
        font-size: 10px;
    }

    .compact-ai-scanner .ai-disclaimer {
        font-size: 8px;
    }

    .compact-ai-score strong {
        font-size: 28px !important;
    }

    .side-menu-panel {
        width: min(88vw, 360px);
        max-width: 360px;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .side-logout-btn {
        min-height: 48px;
    }
}

/* Small phones: prevent two-column cards from becoming unusably narrow. */
@media (max-width: 430px) {
    .dashboard {
        padding: 8px;
    }

    .panel {
        padding: 13px;
    }

    .summary-grid,
    .entry-scan-grid,
    .volatility-details {
        grid-template-columns: 1fr;
    }

    .chart-wrapper {
        height: 210px !important;
        min-height: 170px;
    }

    .market-type-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .market-type-tab {
        min-width: 0;
        font-size: 10px;
        padding: 9px 4px;
    }

    .header-brand .brand {
        font-size: 11px;
    }

    .header-account-pill {
        min-width: 0;
    }

    .wallet-btn {
        font-size: 10px;
    }
}

/* Phone: keep EVEN / ODD as the bottom trading action bar. */
@media (max-width:760px) {
    .direction-controls {
        position:fixed;
        left:8px;
        right:8px;
        bottom:8px;
        z-index:1000;
        padding:7px;
        border:1px solid #243248;
        border-radius:14px;
        background:rgba(10,15,24,.97);
        box-shadow:0 -8px 24px rgba(0,0,0,.35);
    }
    .direction-controls .trade-section-label {
        display:none;
    }
    .direction-controls .trade-buttons {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
        margin:0;
    }
    .direction-controls .trade-btn {
        min-height:52px;
        margin:0;
    }
    .direction-controls .selected-direction {
        display:none;
    }
    .trading-layout > .trade-controls-panel {
        padding-bottom:78px !important;
    }
}

@media (max-width:390px) {
    .direction-controls {
        left:6px;
        right:6px;
        bottom:6px;
        padding:6px;
    }
    .direction-controls .trade-buttons {
        gap:5px;
    }
    .direction-controls .trade-btn {
        min-height:48px;
    }
}

/* =========================================================
   TRADING CONTROLS — USER REQUESTED PHONE/TERMINAL LAYOUT
   EVEN | MULTIPLIER + ODD
   STAKE | AI
   TAKE PROFIT | STOP LOSS
   ========================================================= */
.trade-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
.trade-buttons > .even-btn { min-height:112px; }
.odd-control-stack { display:flex; flex-direction:column; gap:6px; min-width:0; }
.multiplier-top-label { margin:0 !important; color:#9ba5b4; font-size:10px; font-weight:800; }
.multiplier-top-input { height:34px !important; min-height:34px; }
.multiplier-top-input input { min-width:0; }
.odd-control-stack .odd-btn { flex:1; min-height:62px; }
.risk-controls-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-top:12px; }
.risk-control-field { min-width:0; }
.risk-control-field label { display:block; margin:0 0 5px !important; color:#9ba5b4; font-size:10px; font-weight:800; }
.risk-control-field .input-with-prefix { height:44px; }
.risk-control-field .field-help { display:block; margin-top:3px; }
.ai-quick-btn { min-height:70px; border:1px solid rgba(0,207,148,.35); border-radius:10px; background:linear-gradient(145deg,rgba(0,207,148,.16),rgba(15,24,37,.95)); color:#fff; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; text-align:left; padding:9px; }
.ai-quick-btn:hover { border-color:#00cf94; transform:translateY(-1px); }
.ai-quick-btn strong { display:block; color:#00cf94; font-size:13px; }
.ai-quick-btn small { display:block; color:#9ba5b4; font-size:8px; margin-top:2px; }
.ai-quick-icon { width:28px; height:28px; display:grid; place-items:center; border:1px solid #00cf94; border-radius:8px; color:#00cf94; font-size:9px; font-weight:900; }
.risk-help { display:block; margin-top:5px; }

@media (max-width:760px) {
  .trade-buttons { gap:5px; }
  .trade-buttons > .even-btn { min-height:78px; }
  .odd-control-stack { gap:3px; }
  .multiplier-top-label { font-size:7px; }
  .multiplier-top-input { height:26px !important; min-height:26px; }
  .multiplier-top-input input { font-size:9px !important; padding:3px !important; }
  .odd-control-stack .odd-btn { min-height:48px; }
  .risk-controls-grid { gap:5px; margin-top:7px; }
  .risk-control-field label { font-size:7px; margin-bottom:3px !important; }
  .risk-control-field .input-with-prefix { height:29px; }
  .risk-control-field .input-with-prefix input { font-size:9px; padding:4px; }
  .risk-control-field .field-help { display:none; }
  .ai-quick-btn { min-height:52px; padding:5px; gap:5px; border-radius:7px; }
  .ai-quick-icon { width:22px; height:22px; font-size:7px; border-radius:6px; }
  .ai-quick-btn strong { font-size:9px; }
  .ai-quick-btn small { font-size:6px; }
  .risk-help { display:none; }
}


/* Chart-bottom live digits and balanced Even/Odd controls */
.chart-wrapper {
    height: auto;
    min-height: 280px;
    display: flex;
    flex-direction: column;
}
#volatilityChart {
    flex: 0 0 220px;
    height: 220px;
}
.chart-live-digits {
    width: 100%;
    padding: 12px 10px 8px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    background: rgba(0,0,0,.14);
    box-sizing: border-box;
}
.chart-digits-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.chart-digits-heading strong { font-size: 14px; }
.chart-digits-subtitle { margin: 4px 0 10px; color: var(--muted); font-size: 11px; }
.live-digits-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px;
    margin: 0;
}
.live-digit-circle { min-width: 0; width: 100%; box-sizing: border-box; }
.trade-buttons { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
.trade-buttons > .trade-btn { width: 100%; min-width: 0; min-height: 74px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; }
.multiplier-control { margin-top: 12px; max-width: 220px; }
@media (max-width: 520px) {
    .chart-live-digits { padding: 10px 5px 6px; }
    .live-digits-row { gap: 3px; }
    .live-digit-circle { border-radius: 7px; }
    #volatilityChart { flex-basis: 190px; height:190px; }
}


/* TraderJay requested mobile chart + live-digit fill and equal trade buttons */
@media (max-width: 760px) {
  .chart-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 250px !important;
    margin-top: 8px !important;
    background: #080d16;
  }
  #volatilityChart {
    flex: 1 1 auto !important;
    min-height: 100px !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  .chart-live-digits {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 5px 8px !important;
    background: #080d16 !important;
    box-sizing: border-box !important;
  }
  .chart-digits-subtitle { margin: 2px 0 5px !important; }
  .live-digits-row {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .live-digit-card, .live-digit-circle {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    padding: 3px 1px !important;
    box-sizing: border-box !important;
  }
  .direction-controls .trade-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }
  .direction-controls .trade-btn,
  .direction-controls .trade-buttons > .even-btn,
  .direction-controls .trade-buttons > .odd-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 390px) {
  .direction-controls .trade-btn,
  .direction-controls .trade-buttons > .even-btn,
  .direction-controls .trade-buttons > .odd-btn {
    min-height: 48px !important;
    height: 48px !important;
  }
}

/* Mobile viewport-fit pass: compact the chart/digit area and equalize actions. */
@media (max-width: 760px) {
  .price-panel { padding: 10px !important; }
  .price-panel .panel-header { margin-bottom: 4px !important; }
  .price-panel .panel-header h2 { font-size: 15px !important; }
  .live-price { font-size: clamp(23px, 7vw, 31px) !important; line-height: 1.05 !important; }
  .price-time { font-size: 10px !important; margin: 2px 0 !important; }
  .chart-wrapper {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 5px !important;
  }
  #volatilityChart {
    flex: 0 1 26vh !important;
    height: 26vh !important;
    min-height: 105px !important;
    max-height: 210px !important;
  }
  .chart-live-digits { padding: 5px 3px !important; }
  .chart-digits-heading strong { font-size: 12px !important; }
  .chart-digits-subtitle { font-size: 9px !important; margin: 1px 0 4px !important; }
  .live-digits-row { gap: 2px !important; }
  .live-digit-card, .live-digit-circle {
    aspect-ratio: auto !important;
    height: clamp(36px, 8vh, 54px) !important;
    min-height: 0 !important;
    padding: 2px 0 !important;
  }
  .direction-controls .trade-buttons { gap: 6px !important; }
  .direction-controls .trade-btn,
  .direction-controls .trade-buttons > .even-btn,
  .direction-controls .trade-buttons > .odd-btn {
    height: clamp(44px, 7vh, 56px) !important;
    min-height: 44px !important;
    padding: 4px !important;
  }
  .multiplier-control { margin-top: 6px !important; }
}
@media (max-width: 390px) {
  .price-panel { padding: 8px !important; }
  #volatilityChart { flex-basis: 23vh !important; height: 23vh !important; }
  .live-digit-card, .live-digit-circle { height: 35px !important; }
}

/* =========================================================
   SIMPLE TRADER WORKFLOW — MOBILE
   Keep the existing trading logic/IDs; only simplify presentation.
   ========================================================= */
@media (max-width: 760px) {
    .dashboard {
        width: 100%;
        margin: 0;
        padding-bottom: 12px;
    }

    .dashboard > section.panel.market-type-panel {
        order: 2;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 7px 8px;
        background: #111722;
    }

    .market-type-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .market-type-tab {
        min-width: 0;
        padding: 10px 4px;
        border-radius: 9px;
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .market-overview-grid {
        display: block;
        margin: 0;
    }

    .price-panel {
        min-height: 0;
        margin: 0;
        padding: 8px 8px 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #0d111b;
    }

    .price-panel > .panel-header,
    .price-panel > .live-price,
    .price-panel > .price-time {
        display: none;
    }

    .chart-wrapper {
        height: 355px;
        margin: 0;
        border-radius: 10px;
        background: #111722;
    }

    .chart-live-digits {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 6px;
        padding: 5px 0 0;
        background: linear-gradient(to top, rgba(13,17,27,.96), rgba(13,17,27,.68), transparent);
    }

    .chart-digits-heading,
    .chart-digits-subtitle {
        display: none;
    }

    .live-digits-row {
        grid-template-columns: repeat(10, minmax(28px, 1fr));
        gap: 4px;
        margin: 0;
        padding: 0 2px 3px;
        overflow: hidden;
    }

    .live-digit-circle {
        min-width: 0;
        width: 100%;
        aspect-ratio: 1;
    }

    .live-digit-number { font-size: 13px; }
    .live-digit-circle small { font-size: 7px; }

    .volatility-panel {
        display: none !important;
    }

    .trading-layout {
        display: block;
        margin: 0;
    }

    .trade-controls-panel {
        margin: 0;
        padding: 10px 8px 12px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
        background: #0d111b;
    }

    .trade-controls-panel > .panel-header {
        display: none;
    }

    /* 1. Mode */
    .mode-selector {
        margin: 0 0 8px;
        gap: 4px;
        padding: 3px;
        background: #111722;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 10px;
    }

    .mode-btn {
        padding: 9px 6px;
        border-radius: 7px;
        font-size: 11px;
        font-weight: 800;
    }

    /* 2. Direction/pattern — the main decision */
    .direction-controls {
        display: flex;
        flex-direction: column;
    }

    .trade-section-label {
        margin: 5px 0 6px;
        gap: 0;
        align-items: center;
    }

    .trade-section-label span {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #9ca8ba;
    }

    .trade-section-label small,
    .selected-direction,
    .risk-help,
    .trade-note {
        display: none;
    }

    .multiplier-control {
        display: none;
    }

    .trade-buttons {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin: 0;
    }

    .trade-btn {
        min-height: 58px;
        padding: 9px 6px;
        border-radius: 9px;
        font-size: 16px;
    }

    .trade-btn small {
        margin-top: 2px;
        font-size: 10px;
    }

    /* 3. Money — one simple row */
    .risk-controls-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 5px;
        margin-top: 7px;
    }

    .risk-control-field {
        min-width: 0;
        padding: 7px;
        background: #111722;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 8px;
    }

    .risk-control-field label {
        margin: 0 0 4px !important;
        font-size: 8px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #7e899a;
    }

    .input-with-prefix {
        height: 31px;
        border-radius: 6px;
    }

    .input-with-prefix span {
        padding-left: 7px;
        font-size: 10px;
    }

    .input-with-prefix input {
        padding: 4px 5px;
        font-size: 12px;
        font-weight: 800;
    }

    .field-help { display: none; }

    .ai-quick-btn {
        min-width: 0;
        padding: 5px;
        border-radius: 8px;
        min-height: 45px;
    }

    .ai-quick-btn span:last-child small { display: none; }
    .ai-quick-btn span:last-child strong { font-size: 10px; }

    .risk-summary {
        margin: 6px 0 0;
        padding: 6px 8px;
        font-size: 9px;
        border-radius: 7px;
    }

    .risk-summary strong { font-size: 11px; }

    /* 4. One clear action */
    .primary-trade-btn {
        margin-top: 7px;
        min-height: 52px;
        padding: 11px;
        border-radius: 9px;
        font-size: 15px;
        letter-spacing: .02em;
    }

    .auto-panel {
        margin-top: 8px;
        padding: 9px;
        border-radius: 8px;
    }

    .compact-ai-scanner {
        display: none !important;
    }
}


/* =========================================================
   AI VOLATILITY SCANNER — LEARNING / DEMO MODE
   ========================================================= */
.compact-ai-scanner { display:block !important; }
.ai-demo-badge {
    display:inline-flex;
    align-items:center;
    margin:8px 0 10px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(33,215,160,.10);
    border:1px solid rgba(33,215,160,.25);
    color:#21d7a0;
    font-size:9px;
    font-weight:800;
    letter-spacing:.04em;
}
.ai-scan-progress-wrap { margin:10px 0; }
.ai-scan-progress-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; color:#7f92a0; font-size:9px; font-weight:800; }
.ai-scan-progress-label strong { color:#eaf5f1; font-size:10px; }
.ai-scan-progress { height:6px; border-radius:999px; overflow:hidden; background:#18232d; border:1px solid #263743; }
.ai-scan-progress i { display:block; width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#21d7a0,#5eead4); transition:width .05s linear; }
.ai-result-box { margin:10px 0; padding:9px 10px; border-radius:9px; background:#0b171f; border:1px solid #203540; }
.ai-result-box span { display:block; color:#6f8491; font-size:8px; font-weight:800; letter-spacing:.08em; margin-bottom:4px; }
.ai-result-box strong { display:block; color:#eef8f5; font-size:11px; line-height:1.35; }
.compact-ai-scan:disabled { opacity:.65; cursor:wait; }
@media (max-width:760px) {
    .compact-ai-scanner { display:block !important; order:2; }
    .compact-ai-scanner .ai-header { margin-bottom:5px; }
    .compact-ai-scanner .ai-header h2 { font-size:13px; }
    .compact-ai-scanner .ai-score-box strong { font-size:30px !important; }
}

/* =========================================================
   TRADER-OPTION — FINAL COMPACT EVEN/ODD TERMINAL LAYOUT
   User-requested order:
   STAKE | TAKE PROFIT
   AI    | STOP LOSS
   MULTIPLIER directly under AI
   EVEN  | ODD are the final primary actions
   ========================================================= */
.compact-risk-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
    margin-top:12px;
    align-items:start;
}
.ai-multiplier-stack {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.ai-multiplier-stack .ai-quick-btn {
    width:100%;
    min-height:44px;
}
.multiplier-bottom-control {
    margin-top:0 !important;
    max-width:none !important;
}
.multiplier-bottom-control .multiplier-top-input {
    width:100%;
}
.final-trade-buttons {
    margin-top:10px !important;
    padding-top:0;
}
.final-trade-buttons .trade-btn {
    min-height:62px;
}
.final-trade-buttons .trade-btn:active {
    transform:translateY(1px);
}
/* Removed controls remain harmless if referenced by older JS. */
#tradeBtn, #riskSummary, #selectedDirectionText, .trade-note, #autoTradingPanel, .risk-help {
    display:none !important;
}
@media (max-width:760px) {
    .compact-risk-grid { gap:5px; margin-top:7px; }
    .ai-multiplier-stack { gap:4px; }
    .ai-multiplier-stack .ai-quick-btn { min-height:38px; }
    .multiplier-bottom-control .multiplier-top-input { height:29px !important; min-height:29px; }
    .final-trade-buttons { gap:5px; margin-top:7px !important; }
    .final-trade-buttons .trade-btn { min-height:58px; }
}


/* =========================================================
   FINAL MOBILE AI / NO-SCROLL FIX
   The AI button above Multiplier is the only scanner control.
   The lower standalone AI scanner has been removed.
   ========================================================= */
.trading-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}
.ai-multiplier-stack .ai-quick-btn {
    cursor: pointer;
}
.ai-multiplier-stack .ai-quick-btn.scanning {
    opacity: .72;
    cursor: wait;
}
@media (max-width:760px) {
    html, body {
        width:100%;
        height:100%;
        min-height:0;
        overflow:hidden !important;
    }
    #appScreen {
        width:100%;
        height:100dvh !important;
        min-height:0 !important;
        overflow:hidden !important;
    }
    .dashboard {
        width:100%;
        height:calc(100dvh - 56px) !important;
        min-height:0 !important;
        overflow:hidden !important;
    }
    .dashboard > section.market-overview-grid {
        flex:0 0 31% !important;
        min-height:0 !important;
    }
    .chart-wrapper {
        min-height:105px !important;
    }
    .live-digits-panel {
        flex:0 0 64px !important;
    }
    .dashboard > .trading-layout {
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow:hidden !important;
        grid-template-columns:1fr !important;
    }
    .trading-layout > .trade-controls-panel {
        min-height:0 !important;
        overflow:hidden !important;
    }
    .compact-risk-grid {
        margin-top:4px !important;
        gap:4px !important;
    }
    .ai-multiplier-stack .ai-quick-btn {
        min-height:34px !important;
    }
    .multiplier-bottom-control .multiplier-top-input {
        height:27px !important;
        min-height:27px !important;
    }
    .final-trade-buttons .trade-btn {
        min-height:50px !important;
    }
}

/* =========================================================
   VERIFIED AI SCANNER — compact, visible, functional
   ========================================================= */
.ai-quick-btn {
    position:relative;
    overflow:hidden;
    text-align:left;
}
.ai-quick-copy { min-width:0; flex:1; }
.ai-quick-copy strong,
.ai-quick-copy small,
.ai-quick-result { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-quick-result {
    color:#d9e2ef;
    font-size:8px;
    margin-top:2px;
    max-width:100%;
}
.ai-quick-progress {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:rgba(255,255,255,.08);
}
.ai-quick-progress > span {
    display:block;
    width:0;
    height:100%;
    background:#00cf94;
    transition:width .05s linear;
}
.ai-quick-btn.scanning .ai-quick-progress > span {
    box-shadow:0 0 8px rgba(0,207,148,.8);
}
@media (max-width:760px) {
    .ai-quick-result { font-size:6px; }
    .ai-quick-progress { height:2px; }
}

/* =========================================================
   FINAL PHONE FIT — compact header, market row, chart and controls
   ========================================================= */
@media (max-width:760px) {
    .top-header {
        height:56px;
        min-height:56px;
        padding:6px 8px;
        gap:6px;
        display:grid;
        grid-template-columns:minmax(0,1fr) auto auto;
    }
    .header-brand { min-width:0; gap:6px; grid-column:1; }
    .header-actions { grid-column:2; grid-row:1; }
    .header-account-pill { grid-column:3; grid-row:1; }
    .menu-btn { width:30px; height:30px; padding:0; }
    .brand { font-size:11px !important; letter-spacing:.08em; white-space:nowrap; }
    .header-account-pill {
        min-width:0;
        height:34px;
        padding:3px 6px !important;
        gap:3px !important;
    }
    .header-account-mode { width:24px !important; height:24px !important; font-size:9px !important; }
    .header-account-balance { font-size:9px !important; min-width:66px; text-align:right; }
    .header-account-chevron { display:none; }
    .header-actions { gap:4px; }
    .header-actions .withdraw-btn { display:none; }
    .deposit-btn {
        height:34px !important;
        padding:0 9px !important;
        font-size:9px !important;
        border-radius:7px !important;
    }
    .connection-status { display:none; }

    .dashboard {
        height:calc(100dvh - 56px) !important;
        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;
        margin:0 !important;
        padding:0 !important;
    }
    .dashboard > .market-selector-panel {
        flex:0 0 42px !important;
        min-height:42px !important;
        margin:0 !important;
        padding:4px 8px !important;
        border-radius:0 !important;
        border-left:0 !important;
        border-right:0 !important;
        overflow:hidden !important;
    }
    .market-selector-panel .panel-header {
        display:none !important;
    }
    .market-selector {
        display:grid !important;
        grid-template-columns:54px minmax(0,1fr) !important;
        align-items:center;
        gap:5px !important;
        margin:0 !important;
    }
    .market-selector label {
        font-size:8px !important;
        margin:0 !important;
    }
    .market-selector .vol-market-button {
        min-width:0 !important;
        width:54px !important;
        height:30px !important;
        padding:4px 5px !important;
        font-size:8px !important;
        border-radius:7px !important;
    }
    .market-selector select {
        height:30px !important;
        padding:4px 7px !important;
        font-size:9px !important;
        border-radius:7px !important;
    }

    .dashboard > .market-type-panel {
        flex:0 0 42px !important;
        min-height:42px !important;
        padding:4px 6px !important;
    }
    .market-type-tabs { height:34px !important; gap:4px !important; }
    .market-type-tab {
        padding:5px 2px !important;
        font-size:8px !important;
        border-radius:7px !important;
    }

    .dashboard > .market-overview-grid {
        flex:0 0 29vh !important;
        min-height:0 !important;
        display:block !important;
        overflow:hidden !important;
    }
    .price-panel { height:100% !important; padding:4px 6px 0 !important; }
    .chart-wrapper {
        height:100% !important;
        min-height:0 !important;
        border-radius:7px !important;
    }
    #volatilityChart {
        flex:1 1 auto !important;
        min-height:0 !important;
        height:auto !important;
    }
    .chart-live-digits {
        bottom:3px !important;
        left:5px !important;
        right:5px !important;
        padding:3px 0 0 !important;
    }
    .live-digits-row { gap:2px !important; padding:0 1px 2px !important; }
    .live-digit-card {
        height:34px !important;
        min-height:34px !important;
        border-radius:5px !important;
    }
    .live-digit-number { font-size:10px !important; }
    .live-digit-percent { font-size:6px !important; }

    .dashboard > .trading-layout {
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow:hidden !important;
    }
    .trade-controls-panel {
        height:100% !important;
        min-height:0 !important;
        padding:5px 6px 6px !important;
        overflow:hidden !important;
    }
    .mode-selector {
        margin:0 0 4px !important;
        height:32px !important;
    }
    .mode-btn { padding:5px !important; font-size:9px !important; }

    .compact-risk-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:4px !important;
        margin-top:3px !important;
    }
    .risk-control-field {
        padding:4px !important;
        border-radius:6px !important;
    }
    .risk-control-field label {
        font-size:7px !important;
        margin-bottom:2px !important;
    }
    .risk-control-field .input-with-prefix {
        height:27px !important;
        min-height:27px !important;
    }
    .risk-control-field .input-with-prefix input {
        font-size:10px !important;
        padding:2px 3px !important;
    }
    .ai-multiplier-stack { gap:3px !important; }
    .ai-multiplier-stack .ai-quick-btn {
        min-height:44px !important;
        height:44px !important;
        padding:4px !important;
    }
    .ai-quick-icon { width:19px !important; height:19px !important; font-size:6px !important; }
    .ai-quick-copy strong { font-size:8px !important; }
    .ai-quick-copy small { display:block !important; font-size:6px !important; }
    .ai-quick-result { font-size:5px !important; }
    .multiplier-bottom-control .multiplier-top-input {
        height:25px !important;
        min-height:25px !important;
    }
    .multiplier-top-label { font-size:7px !important; }
    .final-trade-buttons {
        margin-top:4px !important;
        gap:4px !important;
    }
    .final-trade-buttons .trade-btn {
        min-height:44px !important;
        height:44px !important;
        padding:4px !important;
    }
    .final-trade-buttons .trade-btn strong { font-size:12px !important; }
    .final-trade-buttons .trade-btn small { font-size:7px !important; }
}


/* =========================================================
   CHART VOLATILITY + COMPACT MULTIPLIER BUTTON
   ========================================================= */
.chart-volatility-overlay {
    position:absolute;
    top:10px;
    left:10px;
    z-index:4;
    width:150px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:rgba(8,13,22,.86);
    backdrop-filter:blur(5px);
    box-shadow:0 8px 20px rgba(0,0,0,.22);
    pointer-events:none;
}
.chart-volatility-title {
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#aab5c7;
}
.chart-volatility-value {
    display:flex;
    align-items:baseline;
    gap:3px;
    margin-top:1px;
}
.chart-volatility-value strong { font-size:25px; line-height:1; }
.chart-volatility-value span { font-size:9px; color:var(--muted); }
.chart-volatility-level {
    display:inline-block;
    margin-top:3px;
    padding:2px 6px;
    border-radius:999px;
    background:var(--panel-2);
    color:var(--yellow);
    font-size:8px;
    font-weight:800;
}
.chart-volatility-meter {
    height:4px;
    margin-top:5px;
    border-radius:99px;
    background:#0b1222;
    overflow:hidden;
}
.chart-volatility-meter .volatility-meter-fill {
    width:0;
    height:100%;
}

.multiplier-btn {
    width:100%;
    min-height:38px;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--panel-2);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-weight:800;
}
.multiplier-btn:active { transform:translateY(1px); }
.multiplier-btn-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.multiplier-btn strong { font-size:13px; }
@media (max-width:760px) {
    .chart-volatility-overlay { top:7px; left:7px; width:128px; padding:6px 8px; }
    .chart-volatility-value strong { font-size:21px; }
    .chart-volatility-title { font-size:8px; }
    .chart-volatility-level { font-size:7px; }
    .multiplier-btn { min-height:29px; padding:4px 7px; }
    .multiplier-btn strong { font-size:11px; }
    .multiplier-btn-label { font-size:8px; }
}


/* =========================================================
   FINAL MOBILE/FULL-SCREEN LAYOUT FIX
   Keep existing functionality; only tighten the presentation.
   ========================================================= */
.dashboard > .market-type-panel {
    order: 0 !important;
    width: 100% !important;
    margin: 0 0 8px !important;
}
.dashboard > .market-selector-panel { order: 1 !important; }
.dashboard > .market-overview-grid { order: 2 !important; }
.dashboard > .trading-layout { order: 3 !important; }

/* Make the chart the dominant visual area. */
.dashboard > section.market-overview-grid {
    width: 100% !important;
}
.dashboard > section.market-overview-grid .price-panel {
    width: 100% !important;
}
.chart-wrapper {
    height: clamp(360px, 58vh, 680px) !important;
    min-height: 360px !important;
}

/* Replace the heavy black volatility card with the lighter chart indicator. */
.chart-volatility-overlay {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.12) !important;
}

/* Multiplier must remain visible and large enough to tap. */
.ai-multiplier-stack {
    min-width: 0 !important;
}
.multiplier-bottom-control,
.multiplier-bottom-control .multiplier-btn {
    width: 100% !important;
}
.multiplier-btn {
    min-height: 44px !important;
    font-size: 14px !important;
}
.multiplier-btn-label { font-size: 11px !important; }
.multiplier-btn strong { font-size: 15px !important; }

@media (max-width: 760px) {
    html, body { height: 100%; overflow: hidden !important; }
    #appScreen { height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; }
    .dashboard {
        width: 100% !important;
        height: calc(100dvh - 58px) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 4px 5px !important;
        gap: 4px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .dashboard > .market-type-panel {
        flex: 0 0 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 3px 4px !important;
    }
    .market-type-tabs { height: 34px !important; gap: 3px !important; }
    .market-type-tab {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding: 6px 3px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }
    .dashboard > .market-selector-panel {
        flex: 0 0 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 4px 6px !important;
    }
    .market-selector-panel .panel-header { display:none !important; }
    .market-selector { margin:0 !important; }
    .market-selector label { font-size:8px !important; }
    .market-selector select { height:30px !important; font-size:10px !important; }
    .dashboard > .market-overview-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        display: block !important;
        overflow: hidden !important;
    }
    .price-panel {
        height: 100% !important;
        min-height: 0 !important;
        padding: 4px 5px !important;
        overflow: hidden !important;
    }
    .price-panel > .panel-header { margin-bottom:2px !important; }
    .price-panel > .panel-header h2 { font-size:12px !important; }
    .price-panel > .panel-header p { font-size:7px !important; }
    .live-price { font-size:18px !important; line-height:1 !important; }
    .price-time { font-size:7px !important; }
    .chart-wrapper {
        height: calc(100% - 50px) !important;
        min-height: 260px !important;
        margin-top: 3px !important;
    }
    .chart-volatility-overlay {
        width: 112px !important;
        top: 5px !important;
        left: 5px !important;
        padding: 5px 6px !important;
        background: rgba(255,255,255,.07) !important;
    }
    .chart-volatility-value strong { font-size:19px !important; }
    .chart-volatility-title { font-size:7px !important; }
    .chart-volatility-level { font-size:6px !important; }
    .dashboard > .trading-layout {
        flex: 0 0 154px !important;
        min-height: 154px !important;
        height:154px !important;
        margin:0 !important;
        overflow:hidden !important;
    }
    .trade-controls-panel {
        height:100% !important;
        padding:4px 5px !important;
        overflow:hidden !important;
    }
    .trade-controls-panel > .panel-header { display:none !important; }
    .mode-selector { height:27px !important; margin:0 0 3px !important; }
    .mode-btn { font-size:8px !important; padding:3px !important; }
    .compact-risk-grid { gap:3px !important; margin-top:0 !important; }
    .risk-control-field { padding:3px !important; }
    .risk-control-field label { font-size:6px !important; }
    .risk-control-field .input-with-prefix { height:24px !important; min-height:24px !important; }
    .risk-control-field .input-with-prefix input { font-size:9px !important; }
    .ai-multiplier-stack { gap:3px !important; }
    .ai-multiplier-stack .ai-quick-btn { height:39px !important; min-height:39px !important; }
    .multiplier-btn { min-height:32px !important; height:32px !important; padding:3px 6px !important; }
    .multiplier-btn-label { font-size:7px !important; }
    .multiplier-btn strong { font-size:11px !important; }
    .final-trade-buttons { margin-top:3px !important; gap:3px !important; }
    .final-trade-buttons .trade-btn { height:36px !important; min-height:36px !important; }
    .final-trade-buttons .trade-btn strong { font-size:11px !important; }
}


/* TRADER OPTION — FULL SCREEN / NO BLANK SPACE OVERRIDE */
html, body {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
*, *::before, *::after { box-sizing: border-box; }

#root, #app, .app, .App, main {
  width: 100% !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 900px) {
  #root, #app, .app, .App, main {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }

  .container, .dashboard, .page, .content, .main-content, .screen {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .chart, .chart-container, .graph, .graph-container {
    width: 100% !important;
    max-width: none !important;
  }

  /* Remove common spacer/adaptive blank-area elements */
  .spacer, .blank-space, .empty-space { display: none !important; }

  /* Prevent accidental bottom whitespace */
  section:last-child, main:last-child, .content:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}


/* =========================================================
   TRADER-OPTION — LARGE CONTROLS / LARGE CHART / NO BLANK
   Final presentation override: uses all available viewport space.
   ========================================================= */

/* Desktop/tablet: expand the dashboard naturally and let the chart
   take the main visual area while the trade controls use the lower area. */
.dashboard {
    width:100% !important;
    max-width:none !important;
    min-height:calc(100dvh - 64px) !important;
    height:calc(100dvh - 64px) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    overflow:hidden !important;
}

.dashboard > .market-type-panel {
    flex:0 0 58px !important;
    min-height:58px !important;
    margin:0 !important;
}

.market-type-tabs {
    height:100% !important;
    gap:8px !important;
}

.market-type-tab {
    min-height:48px !important;
    padding:10px 18px !important;
    font-size:15px !important;
    font-weight:800 !important;
}

.dashboard > .market-selector-panel {
    flex:0 0 60px !important;
    min-height:60px !important;
    margin:0 !important;
    padding:8px 14px !important;
}

.market-selector {
    min-height:42px !important;
}

.market-selector label {
    font-size:13px !important;
    font-weight:800 !important;
}

.market-selector select {
    min-height:42px !important;
    font-size:14px !important;
    padding:8px 12px !important;
}

.dashboard > .market-overview-grid {
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    margin:0 !important;
    overflow:hidden !important;
}

.price-panel {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
}

.chart-wrapper {
    width:100% !important;
    height:calc(100% - 62px) !important;
    min-height:300px !important;
    margin-top:6px !important;
}

#volatilityChart {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
}

.dashboard > .trading-layout {
    flex:0 0 260px !important;
    min-height:260px !important;
    width:100% !important;
    margin:0 !important;
    overflow:hidden !important;
}

.trade-controls-panel {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:12px !important;
    overflow:hidden !important;
}

.mode-selector {
    height:48px !important;
    margin:0 0 10px !important;
}

.mode-btn {
    min-height:44px !important;
    padding:8px 16px !important;
    font-size:14px !important;
    font-weight:800 !important;
}

.compact-risk-grid {
    gap:10px !important;
    margin-top:0 !important;
}

.risk-control-field {
    padding:9px !important;
    border-radius:9px !important;
}

.risk-control-field label {
    font-size:12px !important;
    font-weight:800 !important;
    margin-bottom:5px !important;
}

.risk-control-field .input-with-prefix {
    height:42px !important;
    min-height:42px !important;
}

.risk-control-field .input-with-prefix input {
    font-size:15px !important;
    font-weight:700 !important;
}

.ai-multiplier-stack {
    gap:7px !important;
}

.ai-multiplier-stack .ai-quick-btn {
    min-height:60px !important;
    height:60px !important;
    padding:8px !important;
}

.ai-quick-icon {
    width:30px !important;
    height:30px !important;
    font-size:10px !important;
}

.ai-quick-copy strong {
    font-size:13px !important;
}

.ai-quick-copy small {
    font-size:10px !important;
}

.ai-quick-result {
    font-size:9px !important;
}

.multiplier-btn {
    min-height:48px !important;
    height:48px !important;
    padding:8px 12px !important;
}

.multiplier-btn-label {
    font-size:11px !important;
}

.multiplier-btn strong {
    font-size:16px !important;
}

.final-trade-buttons {
    gap:10px !important;
    margin-top:10px !important;
}

.final-trade-buttons .trade-btn {
    min-height:72px !important;
    height:72px !important;
    padding:10px !important;
}

.final-trade-buttons .trade-btn strong {
    font-size:20px !important;
}

.final-trade-buttons .trade-btn small {
    font-size:11px !important;
}

/* =========================================================
   PHONE: LARGE, TOUCH-FRIENDLY, FULL-VIEWPORT LAYOUT
   ========================================================= */
@media (max-width:760px) {
    .dashboard {
        height:calc(100dvh - 56px) !important;
        min-height:0 !important;
        padding:5px !important;
        gap:5px !important;
    }

    .dashboard > .market-type-panel {
        flex:0 0 50px !important;
        min-height:50px !important;
    }

    .market-type-tabs {
        height:44px !important;
        gap:4px !important;
    }

    .market-type-tab {
        min-height:42px !important;
        padding:7px 3px !important;
        font-size:12px !important;
        font-weight:900 !important;
    }

    .dashboard > .market-selector-panel {
        flex:0 0 48px !important;
        min-height:48px !important;
        padding:5px 7px !important;
    }

    .market-selector {
        grid-template-columns:58px minmax(0,1fr) !important;
        gap:6px !important;
    }

    .market-selector label {
        font-size:10px !important;
    }

    .market-selector select {
        height:36px !important;
        min-height:36px !important;
        font-size:11px !important;
        padding:6px 8px !important;
    }

    /* Give the graph most of the screen, not a fixed small height. */
    .dashboard > .market-overview-grid {
        flex:1 1 auto !important;
        min-height:0 !important;
        height:auto !important;
    }

    .price-panel {
        height:100% !important;
        padding:5px !important;
    }

    .price-panel > .panel-header h2 {
        font-size:14px !important;
    }

    .price-panel > .panel-header p {
        font-size:9px !important;
    }

    .live-price {
        font-size:22px !important;
    }

    .price-time {
        font-size:8px !important;
    }

    .chart-wrapper {
        height:calc(100% - 57px) !important;
        min-height:0 !important;
        margin-top:4px !important;
        border-radius:9px !important;
    }

    .chart-volatility-overlay {
        width:130px !important;
        padding:7px 8px !important;
    }

    .chart-volatility-title {
        font-size:8px !important;
    }

    .chart-volatility-value strong {
        font-size:23px !important;
    }

    /* Use all remaining lower viewport space for the trading controls. */
    .dashboard > .trading-layout {
        flex:0 0 255px !important;
        min-height:255px !important;
        height:255px !important;
    }

    .trade-controls-panel {
        padding:7px !important;
    }

    .mode-selector {
        height:36px !important;
        margin:0 0 5px !important;
    }

    .mode-btn {
        min-height:34px !important;
        font-size:11px !important;
        padding:5px !important;
    }

    .compact-risk-grid {
        gap:5px !important;
    }

    .risk-control-field {
        padding:5px !important;
    }

    .risk-control-field label {
        font-size:8px !important;
        margin-bottom:3px !important;
    }

    .risk-control-field .input-with-prefix {
        height:34px !important;
        min-height:34px !important;
    }

    .risk-control-field .input-with-prefix input {
        font-size:12px !important;
    }

    .ai-multiplier-stack {
        gap:4px !important;
    }

    .ai-multiplier-stack .ai-quick-btn {
        height:52px !important;
        min-height:52px !important;
        padding:5px !important;
    }

    .ai-quick-icon {
        width:24px !important;
        height:24px !important;
        font-size:8px !important;
    }

    .ai-quick-copy strong {
        font-size:10px !important;
    }

    .ai-quick-copy small {
        font-size:7px !important;
    }

    .ai-quick-result {
        font-size:6px !important;
    }

    .multiplier-btn {
        height:39px !important;
        min-height:39px !important;
        padding:5px 8px !important;
    }

    .multiplier-btn-label {
        font-size:9px !important;
    }

    .multiplier-btn strong {
        font-size:13px !important;
    }

    .final-trade-buttons {
        gap:5px !important;
        margin-top:5px !important;
    }

    .final-trade-buttons .trade-btn {
        height:54px !important;
        min-height:54px !important;
        padding:6px !important;
        border-radius:9px !important;
    }

    .final-trade-buttons .trade-btn strong {
        font-size:16px !important;
    }

    .final-trade-buttons .trade-btn small {
        font-size:9px !important;
    }
}

/* Very short phones: shrink only spacing, never the main controls. */
@media (max-width:760px) and (max-height:700px) {
    .dashboard > .market-type-panel {
        flex-basis:44px !important;
        min-height:44px !important;
    }
    .market-type-tabs { height:38px !important; }
    .market-type-tab { min-height:36px !important; font-size:10px !important; }
    .dashboard > .market-selector-panel {
        flex-basis:43px !important;
        min-height:43px !important;
    }
    .dashboard > .trading-layout {
        flex-basis:235px !important;
        min-height:235px !important;
        height:235px !important;
    }
}

/* =========================================================
   BETA-MATCH MOBILE LAYOUT — FINAL OVERRIDES
   Matches the supplied Beta reference: full-height phone,
   large chart, large controls, zero blank space.
   ========================================================= */
@media (max-width:760px) {
  html, body { background:#0d111b !important; }
  body { overflow:hidden !important; }
  #appScreen { height:100dvh !important; min-height:0 !important; overflow:hidden !important; }

  .top-header {
    height:66px !important;
    min-height:66px !important;
    padding:8px 12px !important;
    grid-template-columns:auto 1fr auto !important;
    gap:9px !important;
    background:#111722 !important;
  }
  .header-brand { gap:8px !important; min-width:0; }
  .menu-btn { width:38px !important; height:38px !important; background:transparent !important; font-size:25px !important; }
  .header-brand .brand {
    font-size:17px !important;
    letter-spacing:.2px !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .header-account-pill {
    justify-self:center !important;
    min-width:118px !important;
    padding:5px 8px !important;
    gap:6px !important;
  }
  .header-account-mode { width:31px !important; height:31px !important; font-size:13px !important; }
  .header-account-balance { min-width:51px !important; font-size:13px !important; }
  .header-actions { gap:5px !important; }
  .wallet-btn.deposit-btn { padding:11px 15px !important; font-size:13px !important; border-radius:25px !important; }
  .wallet-btn.withdraw-btn, .connection-status { display:none !important; }

  .dashboard {
    width:100% !important;
    height:calc(100dvh - 66px) !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  /* Contract selector */
  .dashboard > .panel.market-type-panel {
    flex:0 0 52px !important;
    height:52px !important;
    padding:5px 9px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 !important;
    background:#111722 !important;
  }
  .market-type-tabs { height:42px !important; gap:4px !important; }
  .market-type-tab {
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:10px 5px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    border-radius:24px !important;
  }
  .market-type-tab:first-child::before,
  .market-type-tab:nth-child(2)::before,
  .market-type-tab:nth-child(3)::before { display:inline !important; }

  /* Hide the desktop market selector and extra cards. */
  .market-selector-panel { display:none !important; }
  .dashboard > section.panel:not(.market-type-panel):not(.market-overview-grid):not(.trading-layout):not(.live-digits-panel) { display:none !important; }

  /* Chart block */
  .dashboard > section.market-overview-grid {
    order:2 !important;
    flex:1 1 0 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    display:block !important;
    background:#111722 !important;
  }
  .price-panel {
    height:100% !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#111722 !important;
    position:relative !important;
    overflow:hidden !important;
  }
  .price-panel .panel-header {
    position:absolute !important;
    top:10px !important;
    left:10px !important;
    z-index:8 !important;
    margin:0 !important;
    width:170px !important;
    padding:9px 11px !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:17px !important;
    background:rgba(14,20,31,.94) !important;
  }
  .price-panel .panel-header h2 { font-size:14px !important; line-height:1.1 !important; }
  .price-panel .panel-header p { display:none !important; }
  .price-panel .direction { display:none !important; }
  .price-panel::after {
    content:"75%";
    position:absolute;
    top:10px;
    right:12px;
    z-index:8;
    min-width:54px;
    padding:15px 8px;
    text-align:center;
    border:1px solid #263451;
    border-radius:9px;
    background:#182235;
    color:#aebbd0;
    font-size:14px;
    font-weight:800;
  }
  .live-price, .price-time { display:none !important; }
  .chart-wrapper {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#121925 0%,#0e141e 100%) !important;
  }
  #volatilityChart { width:100% !important; height:100% !important; }
  .chart-wrapper::before {
    content:"";
    position:absolute;
    left:10px; right:68px; top:55px; bottom:30px;
    background-image:linear-gradient(rgba(100,120,150,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(100,120,150,.10) 1px,transparent 1px);
    background-size:25% 20%;
    pointer-events:none;
    z-index:1;
  }
  .chart-volatility-overlay {
    top:10px !important;
    left:10px !important;
    width:170px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }
  .chart-volatility-title { display:none !important; }
  .chart-volatility-value { margin:42px 0 0 !important; display:block !important; }
  .chart-volatility-value strong { font-size:11px !important; color:#8e9aae !important; }
  .chart-volatility-value span { display:none !important; }
  .chart-volatility-level { display:none !important; }
  .chart-volatility-meter { display:none !important; }
  .volatility-details { display:none !important; }

  /* Digit probability row */
  .live-digits-panel {
    order:3 !important;
    flex:0 0 82px !important;
    height:82px !important;
    min-height:82px !important;
    margin:0 !important;
    padding:7px 8px !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 !important;
    background:#0e141e !important;
  }
  .live-digits-panel .panel-header { display:none !important; }
  .live-digits-row { height:100% !important; gap:4px !important; margin:0 !important; align-items:center !important; }
  .live-digit-card {
    min-height:64px !important;
    height:64px !important;
    padding:7px 2px !important;
    border-radius:50% !important;
    border:2px solid #1d2a40 !important;
    background:#101824 !important;
  }
  .live-digit-number { font-size:16px !important; line-height:1 !important; }
  .live-digit-percent, .live-digit-card small { font-size:8px !important; }
  .live-digit-current { font-size:0 !important; }

  /* Trading controls */
  .dashboard > .trading-layout {
    order:4 !important;
    flex:0 0 350px !important;
    height:350px !important;
    min-height:350px !important;
    display:block !important;
    margin:0 !important;
    overflow:hidden !important;
    background:#0d131d !important;
  }
  .trading-layout > .trade-controls-panel {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#0d131d !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }
  .trade-controls-panel > .panel-header { display:none !important; }
  .mode-selector {
    flex:0 0 58px !important;
    height:58px !important;
    margin:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:0 !important;
    border:0 !important;
  }
  .mode-btn {
    min-height:58px !important;
    border:0 !important;
    border-radius:0 !important;
    padding:10px !important;
    font-size:15px !important;
    font-weight:800 !important;
    background:#0b111b !important;
    color:#6c7687 !important;
  }
  .mode-btn.active { background:rgba(0,196,141,.12) !important; color:#00cf94 !important; }

  .compact-risk-grid {
    flex:0 0 126px !important;
    height:126px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1.15fr 1fr !important;
    grid-template-rows:1fr 1fr !important;
    gap:0 !important;
    background:#0b111b !important;
  }
  .risk-control-field {
    margin:0 !important;
    padding:8px 12px !important;
    border:1px solid rgba(255,255,255,.05) !important;
    border-radius:0 !important;
    background:#0b111b !important;
  }
  .risk-control-field label { font-size:10px !important; color:#9ba5b4 !important; margin:0 0 4px !important; text-transform:uppercase; }
  .risk-control-field .input-with-prefix { height:34px !important; min-height:34px !important; border:0 !important; background:transparent !important; }
  .risk-control-field .input-with-prefix span { font-size:15px !important; padding-left:0 !important; }
  .risk-control-field .input-with-prefix input { font-size:19px !important; font-weight:800 !important; padding:0 5px !important; background:transparent !important; border:0 !important; }
  .risk-control-field .field-help { display:none !important; }

  /* Stake becomes the left top card, AI becomes the right top card. */
  .compact-risk-grid .risk-control-field:nth-child(1) { grid-column:1; grid-row:1; }
  .compact-risk-grid .risk-control-field:nth-child(2) { grid-column:1; grid-row:2; }
  .compact-risk-grid .ai-multiplier-stack { grid-column:2; grid-row:1 / span 2; display:flex !important; flex-direction:column !important; gap:0 !important; }
  .compact-risk-grid .risk-control-field:nth-child(4) { display:none !important; }
  .ai-multiplier-stack .ai-quick-btn {
    flex:1 !important;
    min-height:0 !important;
    height:auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:#241d55 !important;
    padding:10px !important;
  }
  .ai-quick-icon { width:27px !important; height:27px !important; border:0 !important; background:rgba(120,100,255,.25) !important; }
  .ai-quick-copy strong { font-size:13px !important; color:#b8adff !important; }
  .ai-quick-copy small { font-size:8px !important; }
  .ai-quick-result { font-size:7px !important; }
  .multiplier-control { margin:0 !important; }
  .multiplier-btn {
    min-height:52px !important;
    height:52px !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    border-radius:0 !important;
    background:#0b111b !important;
  }
  .multiplier-btn-label { font-size:10px !important; color:#f6c344 !important; }
  .multiplier-btn strong { font-size:17px !important; }

  /* Bottom risk row + huge Even/Odd buttons */
  .final-trade-buttons {
    flex:0 0 166px !important;
    height:166px !important;
    margin:0 !important;
    gap:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    grid-template-rows:74px 92px !important;
  }
  .final-trade-buttons::before {
    content:"TAKE PROFIT   $200        STOP LOSS   $999        MULTIPLIER   × 2";
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0b111b;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#aab4c4;
    font-size:9px;
    font-weight:800;
    white-space:pre;
  }
  .final-trade-buttons .trade-btn {
    min-height:92px !important;
    height:92px !important;
    border-radius:0 !important;
    padding:8px !important;
  }
  .final-trade-buttons .trade-btn strong { font-size:28px !important; }
  .final-trade-buttons .trade-btn small { font-size:12px !important; margin-top:3px; }
  .final-trade-buttons .even-btn { background:#00c58b !important; }
  .final-trade-buttons .odd-btn { background:#ff2454 !important; }
}

@media (min-width:761px) {
  /* Keep desktop/tablet behavior unchanged. */
}

@media (max-width:760px) {
  #appScreen { display:flex !important; flex-direction:column !important; }
  .top-header { flex:0 0 66px !important; }
  .dashboard { flex:1 1 auto !important; height:auto !important; min-height:0 !important; }
  .brand-badge {
    display:inline-grid; place-items:center; width:34px; height:34px; margin-right:5px;
    border-radius:9px; background:#00c993; color:#fff; font-weight:900; vertical-align:middle;
  }
  .brand-accent { color:#00c993; }
  .header-bell { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; color:#9da9bb; font-size:22px; }
  .beta-bottom-nav {
    flex:0 0 48px; height:48px; display:grid; grid-template-columns:1fr 1fr;
    background:#111722; border-top:1px solid rgba(255,255,255,.08); z-index:20;
  }
  .beta-nav-item {
    border:0; background:transparent; color:#5f697b; font-weight:800; font-size:12px;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .beta-nav-item span { font-size:20px; }
  .beta-nav-item.active { color:#00cf94; box-shadow:inset 0 -2px 0 #00cf94; }
}
@media (min-width:761px) { .beta-bottom-nav { display:none; } }


/* Beta matched compact header and controls refinements */
@media (max-width: 700px) {
  .top-header {
    min-height: unset;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand actions" "account account";
    gap: 8px;
    align-items: center;
  }
  .header-brand { grid-area: brand; min-width: 0; gap: 6px; }
  .header-account-pill {
    grid-area: account;
    justify-self: center;
    order: initial;
    margin: 0 auto;
  }
  .header-actions {
    grid-area: actions;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
  }
  .header-actions .connection-status { display: none; }
  .header-actions .withdraw-btn, .header-bell { display: none; }
  .header-actions .deposit-btn { margin-left: auto; }
  .dashboard { width: calc(100% - 12px); margin: 8px auto 12px; }
  .compact-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .risk-control-field, .ai-multiplier-stack { min-width: 0; }
  .risk-control-field input { min-width: 0; }
  .ai-multiplier-stack .risk-control-field { width: 100%; }
  .multiplier-btn { width: 100%; }
}

/* =========================================================
   USER REQUEST — DASHBOARD HEADER / MULTIPLIER PLACEMENT
   ========================================================= */
.top-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    padding: 7px 10px !important;
    min-height: 54px !important;
    height: 54px !important;
}
.header-brand {
    min-width: 0 !important;
    overflow: visible !important;
}
.header-brand .brand {
    white-space: nowrap !important;
    font-size: 15px !important;
}
.header-account-pill {
    min-width: 0 !important;
    width: auto !important;
    padding: 3px !important;
    gap: 3px !important;
    border-radius: 18px !important;
}
.header-account-mode {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
}
.header-account-balance,
.header-account-chevron {
    display: none !important;
}
.header-actions {
    justify-self: end !important;
    min-width: 0 !important;
}
.header-actions .connection-status,
.header-actions .withdraw-btn,
.header-actions .header-bell {
    display: none !important;
}
.header-actions .deposit-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 7px 11px !important;
    min-height: 30px !important;
    font-size: 11px !important;
    border-radius: 16px !important;
}

/* Replace the old Matches/Differs / Even/Odd / Over/Under bar with Multiplier. */
.dashboard > .panel.market-type-panel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    min-height: 46px !important;
    height: 46px !important;
}
.dashboard-multiplier-slot {
    width: min(210px, 55vw);
    display: flex;
    justify-content: center;
}
.dashboard-multiplier-btn {
    width: 100% !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 10px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
}
.dashboard-multiplier-btn .multiplier-btn-label {
    font-size: 9px !important;
}
.dashboard-multiplier-btn strong {
    font-size: 12px !important;
}

/* The multiplier is now in the top dashboard slot, not beside the trade inputs. */
.multiplier-bottom-control {
    display: none !important;
}

@media (max-width:760px) {
    .top-header {
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
        min-height: 50px !important;
        height: 50px !important;
        padding: 5px 7px !important;
    }
    .header-brand .brand {
        font-size: 13px !important;
    }
    .header-account-mode {
        width: 25px !important;
        height: 25px !important;
        font-size: 10px !important;
    }
    .header-actions .deposit-btn {
        padding: 6px 9px !important;
        min-height: 28px !important;
        font-size: 10px !important;
    }
    .dashboard > .panel.market-type-panel {
        flex: 0 0 40px !important;
        min-height: 40px !important;
        height: 40px !important;
        padding: 3px 7px !important;
    }
    .dashboard-multiplier-slot {
        width: 150px;
    }
    .dashboard-multiplier-btn {
        min-height: 30px !important;
        height: 30px !important;
        padding: 3px 8px !important;
    }
}


/* =========================================================
   USER REQUEST — RESTORE MARKET CHOICES + MOVE MULTIPLIER
   ========================================================= */
.header-actions .header-bell {
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    margin-left:2px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
}

.dashboard > .panel.market-type-panel {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    padding:8px 8px !important;
    margin:0 0 8px !important;
    background:#111722 !important;
}
.market-type-tabs {
    display:flex !important;
    width:100%;
    justify-content:space-between !important;
    align-items:center;
    gap:6px !important;
}
.market-type-tab {
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:10px 7px !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:26px !important;
    background:#151e2b !important;
    color:#aeb7c7 !important;
    font-size:11px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    text-align:center;
}
.market-type-tab::before { content:"" !important; }

/* The multiplier belongs immediately above the EVEN / ODD actions. */
.final-trade-buttons::before { display:none !important; content:none !important; }
.final-trade-buttons {
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto 92px !important;
}
.final-multiplier-control {
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:7px 10px;
    background:#0b111b;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.final-multiplier-control .multiplier-btn {
    width:min(300px, 78vw) !important;
    min-height:42px !important;
    height:42px !important;
    padding:7px 14px !important;
    border:1px solid #00cf94 !important;
    border-radius:24px !important;
    background:#0d1a22 !important;
    color:#00e0a3 !important;
    box-shadow:0 0 0 1px rgba(0,207,148,.08);
}
.final-multiplier-control .multiplier-btn-label {
    color:#00e0a3 !important;
    font-size:13px !important;
    letter-spacing:.02em;
}
.final-multiplier-control .multiplier-btn strong {
    color:#00e0a3 !important;
    font-size:15px !important;
}

/* The old top multiplier slot no longer exists; keep legacy selectors harmless. */
.dashboard-multiplier-slot { display:none !important; }

@media (max-width:700px) {
    .header-actions .header-bell {
        display:inline-flex !important;
        width:28px;
        height:28px;
        font-size:19px;
        margin-left:1px;
    }
    .header-actions .withdraw-btn { display:none !important; }
    .dashboard > .panel.market-type-panel {
        flex:0 0 auto !important;
        min-height:0 !important;
        height:auto !important;
        padding:7px 5px !important;
        margin:0 !important;
    }
    .market-type-tabs { gap:4px !important; }
    .market-type-tab {
        padding:9px 4px !important;
        font-size:9px !important;
        border-radius:22px !important;
    }
    .final-trade-buttons {
        grid-template-rows:58px 92px !important;
    }
    .final-multiplier-control {
        min-height:58px;
        padding:6px 8px;
    }
    .final-multiplier-control .multiplier-btn {
        min-height:42px !important;
        height:42px !important;
        width:min(300px, 82vw) !important;
    }
}


/* =========================================================
   FINAL HEADER FIX — TRADER-OPTION
   Order: TraderOption | Demo/Real + Balance | Deposit | Bell
   Keep everything on one line and prevent the account control
   from covering the project name.
   ========================================================= */
.top-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 7px 12px !important;
    overflow: visible !important;
}
.header-brand {
    grid-column: 1 !important;
    min-width: 0 !important;
    justify-self: start !important;
    overflow: hidden !important;
}
.header-brand .brand {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 16px !important;
}
.header-account-pill {
    grid-column: 2 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 156px !important;
    max-width: 220px !important;
    padding: 4px 7px !important;
    gap: 5px !important;
    border-radius: 22px !important;
}
.header-account-mode {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 11px !important;
}
.header-account-balance {
    display: block !important;
    min-width: 82px !important;
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}
.header-account-chevron {
    display: none !important;
}
.header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: max-content !important;
}
.header-actions .connection-status,
.header-actions .withdraw-btn {
    display: none !important;
}
.header-actions .deposit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 8px 13px !important;
    border-radius: 19px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}
.header-actions .header-bell {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 34px !important;
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 21px !important;
    line-height: 1 !important;
}

/* Phone-sized screens: still one row, with compact controls. */
@media (max-width: 700px) {
    .top-header {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        gap: 5px !important;
        min-height: 52px !important;
        height: 52px !important;
        padding: 5px 7px !important;
    }
    .header-brand .brand {
        font-size: 13px !important;
        letter-spacing: .8px !important;
    }
    .header-account-pill {
        min-width: 118px !important;
        max-width: 145px !important;
        padding: 3px 5px !important;
        gap: 3px !important;
    }
    .header-account-mode {
        width: 27px !important;
        height: 27px !important;
        flex-basis: 27px !important;
        font-size: 10px !important;
    }
    .header-account-balance {
        min-width: 58px !important;
        max-width: 78px !important;
        font-size: 11px !important;
    }
    .header-actions {
        gap: 2px !important;
    }
    .header-actions .deposit-btn {
        min-height: 29px !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
    .header-actions .header-bell {
        width: 28px !important;
        height: 29px !important;
        flex-basis: 28px !important;
        font-size: 18px !important;
    }
}


/* FINAL USER FIX: header, bot status, equal EVEN/ODD buttons and STOP state */
.top-header{grid-template-columns:minmax(0,1fr) auto auto !important;gap:7px !important;align-items:center !important;}
.header-brand{min-width:0 !important;max-width:100% !important;}
.header-account-pill{justify-self:end !important;min-width:0 !important;max-width:44vw !important;overflow:hidden !important;}
.header-actions{justify-self:end !important;min-width:max-content !important;display:flex !important;align-items:center !important;}
.header-account-balance{overflow:hidden !important;text-overflow:ellipsis !important;}
.bot-status-strip{display:flex !important;align-items:center !important;justify-content:space-between !important;height:34px !important;min-height:34px !important;margin:0 0 6px !important;padding:0 12px !important;border-top:1px solid rgba(255,255,255,.06) !important;border-bottom:1px solid rgba(255,255,255,.06) !important;background:#101824 !important;box-sizing:border-box !important;}
.bot-status-main,.bot-status-record{display:flex !important;align-items:center !important;gap:6px !important;font-size:11px !important;font-weight:800 !important;}
.bot-status-dot{width:7px !important;height:7px !important;border-radius:50% !important;background:#00cf94 !important;box-shadow:0 0 8px rgba(0,207,148,.65) !important;}
.bot-status-record{gap:4px !important;color:#91a0b2 !important;}
.bot-status-record strong:first-child{color:#00cf94 !important}.bot-status-record strong:last-child{color:#ff5b72 !important}
.final-trade-buttons .trade-btn{width:100% !important;min-width:0 !important;min-height:40px !important;height:45px !important;border-radius:14px !important;border:0 !important;box-sizing:border-box !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:8px !important;position:relative !important;overflow:hidden !important;transition:background .18s ease,transform .12s ease,box-shadow .18s ease !important;}
.final-trade-buttons .even-btn{background:#00c58b !important}.final-trade-buttons .odd-btn{background:#ff2454 !important}
.final-trade-buttons .trade-btn .trade-default-content,.final-trade-buttons .trade-btn .trade-running-content{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:6px !important;width:100% !important;}
.final-trade-buttons .trade-running-content{display:none !important}
.final-trade-buttons .trade-btn.trading{background:#f59e0b !important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35) !important;}
.final-trade-buttons .trade-btn.trading .trade-default-content{display:none !important}
.final-trade-buttons .trade-btn.trading .trade-running-content{display:flex !important}
.final-trade-buttons .trade-btn .trade-running-content>strong{font-size:14px !important;letter-spacing:.08em !important}
.trade-stop-inner{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-width:74px !important;min-height:34px !important;padding:7px 13px !important;border-radius:9px !important;background:#fff !important;color:#c46a00 !important;font-size:12px !important;font-weight:900 !important;letter-spacing:.05em !important;box-shadow:0 2px 7px rgba(0,0,0,.18) !important;cursor:pointer !important;}
@media(max-width:760px){
.top-header{grid-template-columns:minmax(0,1fr) auto auto !important;gap:4px !important;min-height:52px !important;height:52px !important;padding:5px 6px !important;}
.header-brand .brand{font-size:12px !important}.header-account-pill{max-width:39vw !important;min-width:86px !important;padding:3px 4px !important;}
.header-account-mode{width:25px !important;height:25px !important;flex-basis:25px !important}.header-account-balance{min-width:0 !important;max-width:70px !important;font-size:10px !important;}
.header-actions{gap:2px !important}.header-actions .deposit-btn{min-height:29px !important;padding:6px 8px !important;font-size:10px !important}.header-actions .header-bell{width:28px !important;height:29px !important;flex-basis:28px !important;font-size:18px !important;}
.bot-status-strip{height:30px !important;min-height:30px !important;margin-bottom:4px !important;padding:0 9px !important}.bot-status-main,.bot-status-record{font-size:10px !important;}
.final-trade-buttons{grid-template-columns:1fr 1fr !important;grid-template-rows:58px 92px !important}.final-trade-buttons .trade-btn{min-height:92px !important;height:92px !important;border-radius:12px !important;}
.final-trade-buttons .trade-btn strong{font-size:24px !important}.final-trade-buttons .trade-btn small{font-size:10px !important}
}
@media(max-width:390px){.header-account-pill{max-width:37vw !important;min-width:80px !important}.header-account-balance{max-width:57px !important;font-size:9px !important}.header-actions .deposit-btn{padding-left:6px !important;padding-right:6px !important}.final-trade-buttons .trade-btn{height:82px !important;min-height:82px !important}}


/* =========================================================
   FINAL PHONE LAYOUT FIX — 2026-09-24
   - No Bolt control/icon.
   - Keep Demo/Real + balance directly beside Deposit/Bell.
   - Never let header controls overlap contract/trade buttons.
   - Keep EVEN/ODD fully visible and equal width.
   - Give the live graph more vertical space.
   ========================================================= */
@media (max-width:760px) {
    .top-header {
        box-sizing:border-box !important;
        width:100% !important;
        grid-template-columns:minmax(0,1fr) auto auto !important;
        gap:4px !important;
        padding:5px 6px !important;
        overflow:hidden !important;
    }
    .header-brand {
        min-width:0 !important;
        max-width:100% !important;
    }
    .header-account-pill {
        grid-column:2 !important;
        min-width:86px !important;
        max-width:40vw !important;
        margin:0 !important;
        flex-shrink:1 !important;
    }
    .header-account-balance {
        display:block !important;
        min-width:0 !important;
        max-width:68px !important;
    }
    .header-actions {
        grid-column:3 !important;
        min-width:0 !important;
        max-width:max-content !important;
        overflow:visible !important;
    }
    .header-actions .deposit-btn {
        flex:0 0 auto !important;
    }

    /* Contract tabs stay below the header; no overlay. */
    .dashboard > .panel.market-type-panel {
        position:relative !important;
        z-index:1 !important;
        clear:both !important;
        margin-top:0 !important;
    }

    /* Multiplier is a single control; no Bolt slot/control. */
    .final-multiplier-control {
        grid-column:1 / -1 !important;
        min-width:0 !important;
        overflow:hidden !important;
    }
    .final-multiplier-control .multiplier-btn {
        width:min(260px,82vw) !important;
        max-width:100% !important;
    }

    /* EVEN and ODD occupy the two lower columns only. */
    .final-trade-buttons {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        grid-template-rows:58px minmax(82px,92px) !important;
        gap:5px !important;
        width:100% !important;
        box-sizing:border-box !important;
        overflow:visible !important;
    }
    .final-trade-buttons .trade-btn {
        grid-row:2 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }
    .final-trade-buttons .even-btn { grid-column:1 !important; }
    .final-trade-buttons .odd-btn { grid-column:2 !important; }

    /* Larger live chart without pushing the trade buttons over it. */
    .chart-wrapper {
        height:320px !important;
        min-height:320px !important;
    }
}
@media (max-width:390px) {
    .header-account-pill { max-width:38vw !important; min-width:78px !important; }
    .header-account-balance { max-width:56px !important; font-size:9px !important; }
    .chart-wrapper { height:300px !important; min-height:300px !important; }
    .final-trade-buttons .trade-btn { height:82px !important; min-height:82px !important; }
}

/* Bolt is intentionally absent from the customer dashboard. */
.bolt-btn, #boltBtn, [data-control="bolt"], [aria-label*="Bolt" i] {
    display:none !important;
}

/* FINAL BALANCE BUTTON FIX — replace any former Bolt control with Balance. */
.balance-btn {
    appearance:none !important;
    -webkit-appearance:none !important;
    border:1px solid rgba(255,255,255,.14) !important;
    background:#101b27 !important;
    color:#fff !important;
    cursor:pointer !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;
    min-width:96px !important;
    min-height:36px !important;
    padding:4px 9px !important;
    border-radius:9px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    white-space:nowrap !important;
}
.balance-btn:hover { background:#162534 !important; }
.balance-btn-label { font-size:9px !important; line-height:1 !important; color:#8fa3b3 !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.05em !important; }
.balance-btn strong { font-size:12px !important; line-height:1.15 !important; color:#fff !important; font-weight:900 !important; }
.bolt-btn, #boltBtn, [data-control="bolt"], [aria-label*="Bolt" i], .bolt-control, .bolt-button { display:none !important; }
@media(max-width:760px){
  .balance-btn { min-width:78px !important; max-width:88px !important; min-height:29px !important; padding:3px 6px !important; border-radius:8px !important; }
  .balance-btn-label { font-size:7px !important; }
  .balance-btn strong { font-size:10px !important; }
}
@media(max-width:390px){
  .balance-btn { min-width:70px !important; max-width:76px !important; }
  .balance-btn strong { font-size:9px !important; }
}

/* FINAL HEADER ORDER FIX — Trader Option | Demo/Real Balance | Deposit/Bell */
@media (max-width:760px) {
    .top-header {
        grid-template-columns:minmax(0,1fr) auto auto !important;
        grid-template-rows:56px !important;
        min-height:56px !important;
        height:56px !important;
        align-items:center !important;
    }

    .header-brand {
        grid-column:1 !important;
        grid-row:1 !important;
        min-width:0;
    }

    /* Demo/Real + balance stays in the middle, between Trader Option and Deposit. */
    .header-account-pill {
        grid-column:2 !important;
        grid-row:1 !important;
        justify-self:center !important;
        min-width:104px !important;
        height:34px !important;
        margin:0 2px !important;
    }

    .header-actions {
        grid-column:3 !important;
        grid-row:1 !important;
        width:auto !important;
        justify-self:end !important;
        display:flex !important;
        align-items:center !important;
        gap:4px !important;
        margin:0 !important;
    }

    .header-actions .deposit-btn {
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        width:auto !important;
        min-width:54px !important;
        height:34px !important;
        padding:0 8px !important;
    }

    .header-actions .header-bell {
        display:inline-flex !important;
        align-items:center;
        justify-content:center;
        width:30px !important;
        height:34px !important;
        padding:0 !important;
    }
}

/* FINAL TARGET LABEL COLORS */
.risk-control-field label[for="takeProfit"] {
  color: #22c55e !important;
}
.risk-control-field label[for="stopLoss"] {
  color: #ef4444 !important;
}
.multiplier-btn-label,
.final-multiplier-control .multiplier-btn-label {
  color: #f59e0b !important;
}

/* Live stake calculation in the small quick-action box. */
.ai-trade-live-summary {
    display:block;
    margin-top:3px;
    color:#d9e4ee;
    font-size:8px;
    font-weight:900;
    letter-spacing:.02em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ai-trade-live-summary.live-profit { color:#19e39a !important; }
.ai-trade-live-summary.live-loss { color:#ff5b6e !important; }
.ai-quick-btn.trade-live-mode {
    border-color:rgba(255,193,7,.55);
}
@media(max-width:390px){
    .ai-trade-live-summary { font-size:7px; }
}


/* =========================================================
   RESTORED WALLET + LIVE CHAT UI
   ========================================================= */
.wallet-modal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:14px}.wallet-modal[hidden],.live-chat-panel[hidden]{display:none}.wallet-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.wallet-modal-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:#0b121c;border:1px solid rgba(66,95,112,.55);border-radius:20px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.55);color:#f4f7fb}.wallet-modal-head{display:flex;justify-content:space-between;gap:16px}.wallet-modal-head h2{margin:4px 0;font-size:24px}.wallet-modal-head p{margin:0;color:#8793a4;font-size:13px;line-height:1.45}.wallet-kicker{font-size:10px;letter-spacing:1.5px;color:#16c892;font-weight:800}.wallet-close{width:36px;height:36px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#131c28;color:#fff;font-size:16px;cursor:pointer}.wallet-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#080e16;padding:4px;border-radius:12px;margin:18px 0}.wallet-tab{border:0;background:transparent;color:#8793a4;padding:11px 6px;border-radius:9px;font-weight:800;cursor:pointer}.wallet-tab.active{background:#173c38;color:#fff}.wallet-panel{display:none}.wallet-panel.active{display:block}.wallet-panel label,.wallet-modal-card>label{display:grid;gap:7px;color:#aeb8c7;font-size:13px;margin:12px 0}.wallet-panel input,.wallet-panel select,.wallet-modal-card>label input,.wallet-modal-card>label select{width:100%;box-sizing:border-box;padding:13px;border-radius:10px;border:1px solid #2a3948;background:#0a141f;color:#fff;outline:none}.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wallet-primary{width:100%;border:0;border-radius:11px;background:#14b981;color:#fff;font-weight:800;padding:13px 15px;cursor:pointer;margin-top:8px}.wallet-primary:disabled{opacity:.55;cursor:not-allowed}.wallet-address-box{padding:13px;border-radius:10px;background:#111e2a;border:1px solid #2b4050;color:#b8c5d2;font-size:12px;word-break:break-all;margin:12px 0}.wallet-status{min-height:18px;margin-top:12px;padding:10px;border-radius:9px;font-size:13px}.wallet-status.success{background:rgba(20,185,129,.12);color:#45dda9}.wallet-status.error{background:rgba(244,67,87,.12);color:#ff8997}.live-chat-fab{position:fixed;right:14px;bottom:82px;z-index:8000;border:1px solid rgba(20,185,129,.45);border-radius:999px;background:#102c2a;color:#fff;padding:12px 16px;font-weight:800;box-shadow:0 10px 28px rgba(0,0,0,.35);cursor:pointer}.live-chat-fab span{color:#20d79d;margin-right:5px}.live-chat-panel{position:fixed;inset:0;z-index:9400;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:flex-end;padding:18px}.live-chat-card{width:min(390px,100%);height:min(610px,82vh);display:flex;flex-direction:column;background:#0b121c;border:1px solid #2a3c4b;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden}.live-chat-card>header{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.08)}.live-chat-card>header span{font-size:10px;color:#20d79d;letter-spacing:1px;font-weight:800}.live-chat-card>header h2{margin:3px 0;font-size:19px}.live-chat-card>header small{color:#8290a0}.live-chat-card>header button{border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer}.live-chat-messages{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}.chat-bubble{max-width:82%;padding:10px 12px;border-radius:13px;font-size:13px;line-height:1.4}.chat-bubble strong{display:block;font-size:10px;margin-bottom:3px;color:#86a0ad}.chat-bubble p{margin:0}.chat-bubble.support{align-self:flex-start;background:#16232e}.chat-bubble.client{align-self:flex-end;background:#104a3d}.live-chat-compose{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,.08)}.live-chat-compose textarea{flex:1;resize:none;border:1px solid #2a3c4b;border-radius:10px;background:#08121c;color:#fff;padding:10px;outline:none}.live-chat-compose button{border:0;border-radius:10px;background:#14b981;color:#fff;font-weight:800;padding:0 14px}
@media(max-width:600px){.wallet-modal{padding:8px}.wallet-modal-card{padding:16px;border-radius:17px}.wallet-grid{grid-template-columns:1fr}.live-chat-panel{padding:8px}.live-chat-card{width:100%;height:78vh}.live-chat-fab{right:10px;bottom:76px;padding:10px 13px;font-size:12px}}

/* =========================================================
   TRADE RESULT OVERLAY — WIN / LOSS
   ========================================================= */
.trade-result-overlay{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,8,15,.86);backdrop-filter:blur(9px)}
.trade-result-overlay[hidden]{display:none!important}
body.trade-result-open{overflow:hidden}
.trade-result-card{width:min(430px,100%);padding:30px 24px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.12);background:#0d1622;box-shadow:0 28px 100px rgba(0,0,0,.65);text-align:center;animation:tradeResultIn .22s ease-out}
@keyframes tradeResultIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.trade-result-kicker{color:#8b99a8;font-size:10px;font-weight:900;letter-spacing:1.8px;margin-bottom:9px}
.trade-result-card h2{margin:0;font-size:26px;line-height:1.15;font-weight:900}
.trade-result-overlay.is-profit .trade-result-card h2,.trade-result-overlay.is-profit .trade-result-amount,.trade-result-overlay.is-profit .profit-stat strong{color:#39e58c}
.trade-result-card h2 .target-hit-green{color:#00d69a}.trade-result-card h2 .target-hit-red{color:#ff5c70}
.trade-result-overlay.is-loss .trade-result-card h2,.trade-result-overlay.is-loss .trade-result-amount,.trade-result-overlay.is-loss .loss-stat strong{color:#ff5c70}
.trade-result-amount{margin:12px 0 4px;font-size:38px;font-weight:900;letter-spacing:.4px}
.trade-result-type{color:#8e9bab;font-size:12px;font-weight:700}
.trade-result-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}
.trade-result-stat{padding:13px 10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.035)}
.trade-result-stat span{display:block;color:#84909e;font-size:10px;margin-bottom:6px}
.trade-result-stat strong{display:block;font-size:12px;font-weight:900}
.loss-stat strong{color:#ff5c70}.profit-stat strong{color:#39e58c}
.trade-result-continue{width:100%;min-height:50px;border:0;border-radius:11px;background:#00b978;color:#fff;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 0 0 1px rgba(0,214,154,.18),0 8px 24px rgba(0,185,120,.16)}
.trade-result-continue:hover{background:#00c985}
.trade-result-continue:active{transform:translateY(1px)}
@media(max-width:480px){.trade-result-card{padding:26px 17px 17px}.trade-result-card h2{font-size:23px}.trade-result-amount{font-size:34px}.trade-result-stats{gap:8px}}

/* Bolt status button removed; remaining layout uses available space. */

/* =========================================================
   AUTH REMEMBER-ME ROW
========================================================= */
.remember-row {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 14px !important;
    color: #8d9ab3 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
.remember-row input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: #39e58c;
    cursor: pointer;
}
.remember-row span {
    color: #8d9ab3;
}

/* Account settings — mobile-friendly rows and functional dialogs */
.account-settings-list { display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.account-setting-btn { width:100%; display:grid; grid-template-columns:42px 1fr 18px; align-items:center; gap:10px; padding:14px 12px; border:1px solid rgba(255,255,255,.05); border-radius:12px; background:#121b29; color:#f4f7fb; text-align:left; }
.account-setting-btn:hover { background:#172334; }
.account-setting-btn strong,.account-setting-btn small { display:block; }
.account-setting-btn strong { font-size:13px; }
.account-setting-btn small { margin-top:4px; color:#8794a7; font-size:10px; line-height:1.35; }
.account-setting-btn>b { color:#728098; font-size:24px; font-weight:400; text-align:right; }
.account-setting-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#182536; color:#b9c5d6; font-size:20px; }
.settings-preferences { margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
.account-settings-modal { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:14px; }
.account-settings-modal[hidden] { display:none; }
.account-settings-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.account-settings-card { position:relative; width:min(440px,100%); max-height:90vh; overflow:auto; background:#0e141e; border:1px solid #273548; border-radius:18px; padding:18px; box-shadow:0 24px 70px rgba(0,0,0,.5); }
.account-settings-card header { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:18px; }
.account-settings-card header span { color:#15d0a0; font-size:9px; letter-spacing:.15em; font-weight:800; }
.account-settings-card h2 { margin:5px 0 0; font-size:21px; }
.account-settings-card header button { border:0; background:#182333; color:#fff; width:34px; height:34px; border-radius:9px; }
.account-settings-card label { display:grid; gap:7px; color:#aeb9c8; font-size:11px; font-weight:700; margin:12px 0; }
.account-settings-card input,.account-settings-card select { width:100%; padding:12px; border-radius:10px; border:1px solid #2b3a4e; background:#09111c; color:#fff; }
.settings-modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.settings-modal-actions button { flex:1; }
.settings-status { min-height:20px; margin-top:8px; color:#8fa0b5; font-size:11px; line-height:1.45; }
.settings-note { color:#8fa0b5; font-size:12px; line-height:1.55; margin-bottom:12px; }
.settings-secret { padding:13px; border:1px dashed #31506a; border-radius:10px; background:#091522; color:#38dfab; font-size:15px; letter-spacing:.08em; word-break:break-all; text-align:center; margin:10px 0 14px; }
.settings-success-card { padding:12px; border-radius:10px; background:rgba(21,208,160,.08); color:#52ddb4; border:1px solid rgba(21,208,160,.18); font-size:12px; line-height:1.45; margin-bottom:12px; }
.danger-btn { width:100%; padding:12px; border:1px solid rgba(255,91,110,.4); border-radius:10px; background:#34151d; color:#ff8090; font-weight:800; }

/* =========================================================
   REFER & EARN - SIDE MENU
========================================================= */
.referral-view { padding-top: 0; border-top: 0; }
.referral-card { overflow: hidden; border-radius: 22px; background:#121824; border:1px solid rgba(255,255,255,.08); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.referral-hero { position:relative; padding:24px 20px 22px; background:linear-gradient(110deg,#a20cff 0%,#8c1cff 35%,#4f43ff 100%); color:#fff; }
.referral-close { position:absolute; top:14px; right:14px; border:0; background:transparent; color:#fff; font-size:30px; line-height:1; cursor:pointer; opacity:.9; }
.referral-title { display:flex; align-items:center; gap:12px; padding-right:34px; font-size:26px; }
.referral-gift { font-size:31px; }
.referral-hero p { margin:14px 0 0; font-size:16px; line-height:1.45; color:rgba(255,255,255,.92); }
.referral-body { padding:20px; }
.referral-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.referral-stat { min-height:112px; padding:18px; border-radius:16px; background:#1a2438; display:flex; flex-direction:column; justify-content:space-between; }
.referral-stat span { color:#b9c2d3; font-size:15px; }
.referral-stat strong { color:#f7fbff; font-size:32px; line-height:1; }
.referral-stat .referral-earned-label { color:#21e78b; }
.referral-stat:nth-child(2) strong { color:#21e78b; }
.referral-link-label { display:block; margin:24px 0 10px; color:#b9c2d3; font-size:15px; }
.referral-link-row { display:flex; gap:10px; align-items:center; padding:8px 8px 8px 14px; border-radius:14px; background:#1a2438; border:1px solid rgba(255,255,255,.04); }
.referral-link-row input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:#fff; font:inherit; font-size:14px; }
.referral-link-row input::placeholder { color:#78869e; }
.referral-copy-btn { width:50px; height:50px; flex:0 0 50px; border:0; border-radius:13px; background:linear-gradient(135deg,#8f35ff,#6847e9); color:#fff; font-size:25px; cursor:pointer; }
.referral-share-btn { width:100%; margin-top:18px; padding:15px 18px; border:0; border-radius:14px; background:linear-gradient(100deg,#b33cff,#5950f4); color:#fff; font-size:17px; font-weight:800; cursor:pointer; }
.referral-dashboard-link { display:block; width:100%; margin:22px 0 0; border:0; background:transparent; color:#bb75ff; font-size:15px; cursor:pointer; }
.referral-status { min-height:18px; margin-top:12px; text-align:center; color:#8290a8; font-size:12px; }
.referral-status.success { color:#21e78b; }
.referral-status.error { color:#ff718d; }
@media(max-width:520px){ .referral-title{font-size:23px}.referral-hero p{font-size:14px}.referral-stat{min-height:98px;padding:14px}.referral-stat strong{font-size:27px}.referral-body{padding:15px} }

/* Full-width, functional session summary matching the reference strip. */
.final-multiplier-control.session-control {
    padding: 7px 14px;
    justify-content: stretch;
}
.final-multiplier-control .session-display {
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px !important;
    border: 1px solid rgba(128, 143, 164, .28) !important;
    border-radius: 9px !important;
    background: #111722 !important;
    color: #9ba6b8 !important;
    box-shadow: none !important;
    cursor: pointer;
    text-align: left;
}
.final-multiplier-control .session-display:hover,
.final-multiplier-control .session-display:focus-visible {
    border-color: rgba(0, 207, 148, .65) !important;
    outline: none;
}
.session-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #8490a2;
}
.session-title {
    color: #aab3c2;
    font-size: 14px;
    font-weight: 700;
}
.session-trade-summary {
    min-width: 0;
    overflow: hidden;
    color: #8b96a8;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.final-multiplier-control .session-display .session-profit-summary {
    margin-left: auto;
    color: #00dca0;
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}
.session-profit-summary.session-positive { color: #19e39a !important; }
.session-profit-summary.session-negative { color: #ff4d78 !important; }
.session-profit-summary .session-sign-positive { color: #19e39a !important; }
.session-profit-summary .session-sign-negative { color: #ff4d78 !important; }
@media (max-width: 420px) {
    .final-multiplier-control .session-display { gap: 8px; padding: 9px 10px !important; }
    .session-title, .session-trade-summary { font-size: 12px; }
    .final-multiplier-control .session-display .session-profit-summary { font-size: 15px; }
}


/* AI quick action directly beneath Stop Loss. */
.ai-multiplier-stack .ai-quick-btn { display:block; width:100%; min-height:42px; margin-top:7px; border-radius:8px; font-weight:800; }


/* Compact scrollable volatility picker anchored to the left of the live chart. */
.chart-wrapper { position: relative; }
.chart-vol-market-picker { position:absolute; z-index:30; left:7px; top:8px; width:76px; }
#chartVolToggle { width:100%; border:1px solid rgba(32,215,157,.65); border-radius:7px; padding:7px 5px; background:#102c2a; color:#35e0ad; font-size:10px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.25); }
.chart-vol-market-list { margin-top:4px; max-height:116px; overflow-y:auto; overscroll-behavior:contain; border:1px solid #29463f; border-radius:7px; background:#08131d; box-shadow:0 8px 20px rgba(0,0,0,.4); scrollbar-width:thin; }
.chart-vol-market-list[hidden] { display:none; }
.chart-vol-market-list button { display:block; width:100%; min-height:27px; padding:6px 5px; border:0; border-bottom:1px solid rgba(255,255,255,.06); background:transparent; color:#e5edf2; text-align:left; white-space:nowrap; font-size:9px; font-weight:700; cursor:pointer; }
.chart-vol-market-list button:hover,.chart-vol-market-list button:focus-visible { background:#164438; color:#fff; outline:none; }


/* Compact multiplier control directly below AI. */
.ai-multiplier-stack .ai-multiplier-btn {
    width:100% !important;
    min-height:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
    margin-top:3px !important;
    padding:3px 6px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:5px !important;
    border-radius:6px !important;
}
.ai-multiplier-stack .ai-multiplier-btn .multiplier-btn-label { font-size:8px !important; }
.ai-multiplier-stack .ai-multiplier-btn strong { font-size:11px !important; }


/* FINAL FIX: keep Multiplier directly below AI with a small clear gap. */
.ai-multiplier-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    min-width: 0 !important;
}
.ai-multiplier-stack .ai-quick-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
}
.ai-multiplier-stack #multiplierBtn {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    border-radius: 7px !important;
}
.ai-multiplier-stack #multiplierBtn .multiplier-btn-label {
    font-size: 9px !important;
}
.ai-multiplier-stack #multiplierBtn strong {
    font-size: 12px !important;
}


/* Compact AI volatility line: live loading status plus separate EVEN / ODD scores. */
.ai-multiplier-stack .ai-quick-btn { min-height:46px !important; padding:4px 7px !important; justify-content:flex-start !important; text-align:left !important; }
.ai-quick-copy { display:flex; flex-direction:column; gap:2px; min-width:0; width:100%; }
.ai-multiplier-stack .ai-quick-btn #aiQuickLabel { font-size:10px !important; line-height:1.1; }
.ai-multiplier-stack .ai-quick-btn #aiQuickStatus { display:block !important; font-size:8px !important; line-height:1.2; color:#b4c1ce !important; margin:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-multiplier-stack .ai-quick-btn #aiQuickResult { display:block !important; font-size:8px !important; line-height:1.2; color:#21d7a0 !important; margin:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ai-multiplier-stack .ai-quick-btn.scanning #aiQuickStatus { color:#f6c453 !important; }
@media (max-width:760px) { .ai-multiplier-stack .ai-quick-btn { min-height:42px !important; } .ai-multiplier-stack .ai-quick-btn #aiQuickLabel { font-size:9px !important; } .ai-multiplier-stack .ai-quick-btn #aiQuickStatus, .ai-multiplier-stack .ai-quick-btn #aiQuickResult { font-size:7px !important; } }

/* USER REQUEST: remove the old Bolt slot at the top of the graph and let the chart use that space. */
.bolt-btn, #boltBtn, [data-control="bolt"], [aria-label*="Bolt" i], .bolt-control, .bolt-button, .bolt-status-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.chart-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    /* Do not reserve any space for the removed Bolt control. */
    margin-inline-start: 0 !important;
}


/* Multiplier tap feedback and reliable touch interaction. */
.ai-multiplier-stack #multiplierBtn {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation;
}
.ai-multiplier-stack #multiplierBtn.multiplier-changed {
    border-color: #21d7a0 !important;
    box-shadow: 0 0 0 2px rgba(33,215,160,.22), 0 0 12px rgba(33,215,160,.18) !important;
}


/* EVEN/ODD changes visibly to STOP while a trade is active. */
.final-trade-buttons .trade-btn .trade-default-content {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.final-trade-buttons .trade-btn .trade-default-content strong {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.final-trade-buttons .trade-btn .trade-default-content small {
    display: none !important;
}
.final-trade-buttons .trade-btn.trading .trade-default-content {
    display: flex !important;
}
.final-trade-buttons .trade-btn .trade-running-content {
    display: none !important;
}
.final-trade-buttons .trade-btn.trading .trade-running-content {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}
.final-trade-buttons .trade-btn .trade-running-content > strong {
    display: none !important;
}
.final-trade-buttons .trade-btn .trade-stop-inner {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}


/* Slightly reduce the EVEN/ODD buttons while keeping them comfortably sized. */
.final-trade-buttons .trade-btn {
    width: 94% !important;
    min-height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* EVEN/ODD button automatically becomes STOP while active. */
.final-trade-buttons .trade-btn.trading .trade-default-content{display:none!important}
.final-trade-buttons .trade-btn.trading .trade-running-content{display:flex!important;pointer-events:none!important}
.final-trade-buttons .trade-btn.trading .trade-stop-inner{pointer-events:auto!important}


/* Medium-sized full live tick quote above the Volatility market selector. */
.live-tick-digit {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0 0 3px;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, inherit);
}


/* FINAL FIX: active EVEN/ODD action immediately shows a visible STOP label. */
.final-trade-buttons .trade-btn.trading {
    background: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35) !important;
}
.final-trade-buttons .trade-btn.trading .trade-default-content {
    display: none !important;
}
.final-trade-buttons .trade-btn.trading .trade-running-content {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
}
.final-trade-buttons .trade-btn.trading .trade-stop-inner {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}
@media (max-width: 480px) {
    .final-trade-buttons .trade-btn.trading .trade-stop-inner { font-size: 20px !important; }
}


/* Live EVEN/ODD majority tally for the active trade. */


/* Live EVEN/ODD majority edge indicator.
   A "10% edge" means 10 percentage points between the two observed parities,
   not a guarantee of a future winning trade. */


/* FINAL EVEN/ODD LIGHT STATE FIX
   Idle: current parity is visible but faded.
   Trading: latest live digit becomes a clear green EVEN or red ODD light.
*/
.live-digits-panel .live-digit-card.current-even,
.live-digits-panel .live-digit-card.current-odd {
    opacity: .42;
    transform: none;
}
.live-digits-panel.trade-active .live-digit-card.current-even {
    opacity: 1 !important;
    border-color: #39e58c !important;
    background: rgba(57,229,140,.16) !important;
    box-shadow: 0 0 0 2px rgba(57,229,140,.30), 0 0 20px rgba(57,229,140,.42) !important;
    transform: translateY(-2px) scale(1.04) !important;
    animation: liveEvenBlink .65s infinite !important;
}
.live-digits-panel.trade-active .live-digit-card.current-odd {
    opacity: 1 !important;
    border-color: #ff5c70 !important;
    background: rgba(255,92,112,.16) !important;
    box-shadow: 0 0 0 2px rgba(255,92,112,.30), 0 0 20px rgba(255,92,112,.42) !important;
    transform: translateY(-2px) scale(1.04) !important;
    animation: liveOddBlink .65s infinite !important;
}
.live-digits-panel.trade-active .live-digit-card.current-even .live-digit-number {
    color: #39e58c !important;
}
.live-digits-panel.trade-active .live-digit-card.current-odd .live-digit-number {
    color: #ff6b7a !important;
}
/* Keep EVEN/ODD percentage visible */
#evenTradePct,
#oddTradePct {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    color: white !important;
}/* Fix EVEN button overlaping text */
#evenTradeBtn:not(.trading) .trade-running-content {
    display:none !important;
}
    #evenTradeBtn.trading.trade-default-content {
        display: none !important
    }
    #evenTradeBtn.trading.trade-running-content {  
        display: flex !important;
    }
/* Fix EVEN button text overlapping */
.trade-btn.even-btn.trading.trade-label,
.trade-btn.even-btn.trading.trade-default-content {
    display: none !important;
}
.trade-btn.even-btn.trading.trade-stop-inner,
.trade-btn.even-btn.trading.trade-running-content {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
/* Prediction digits layout fix */
#digitSelector {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 !important;
    box-sizing: border-box !important;
    clear: both;
}
#digitOptions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr))!
    important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}
#digitOptions button {
    min-width: 0 !important;
    position: relative !important;
}
/* Fix EVEN button text overlap */
#evenTradeBtn:not(.trading) .trade-running-content {
    display: none !important;
}
#evenTradeBtn:not(.trading) .trade-default-content {
    display: flex !important;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}
#evenTradeBtn.trading.trade-default-content {
    display: none !important;
}
#evenTradeBtn.trading .trade-running-content {
    display: flex !important;
    align-items: center;
    justify-content: center;
}
/* Hide other trading modes */
#digitOptions,
.match-btn,
.differ-btn,
.over-btn,
.under-btn {
    display: none !important;
}
.market-type-tab[data-contract-group="match_differ"],
.market-type-tab[data-contract-group="over_under"] {
    display: none !important;
}
/* EVEN button - Green */
#evenTradeBtn:not(.trading) {
    background: #00c58b !important;
}
/* EVEN button text fix */
#evenTradeBtn .trade-default-content {
    display: none !important;
}
#evenTradeBtn .trade-label,
#evenTradeBtn #evenTradePct {
    display: block !important;
    color: white;
    text-align: center;
}
#evenTradeBtn .trade-label {
    font-size: 28px;
    font-weight: 800;
}
#evenTradeBtn #evenTradePct {
    font-size: 16px;
    font-weight: 700;
}
#evenTradeBtn.trading {
    background: orange !important;
}
#evenTradeBtn.trading .trade-label {
    display: none !important;
}
#evenTradeBtn.trading #evenTradePct {
    display: none !important;
}
#evenTradeBtn.trading .trade-default-content {
    display: block !important;
}

/* STOP button: white square and matching text */
#eventTradeBtn.trading {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
}
#eventTradeBtn.trading .stop-icon {
    display: none !important;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 2px;
    flex-shrink: 0;
}