/* ============================================================
   DeepMind Crypto — Dashboard Styles v2
   Compact, data-dense dark theme inspired by 3Commas.
   ============================================================ */

/* PWA install affordances are intentionally hidden.
   The real product is the native app — the browser still surfaces its built-in
   install prompts (Chrome address-bar icon, Safari Share menu) so users who
   actively want the PWA can still add it. These !important rules also defend
   against any stale cached app.js that might recreate the buttons. */
#pwa-install-btn,
#pwa-ios-hint { display: none !important; }

:root {
    --bg-primary:    #0b0e11;
    --bg-secondary:  #12161c;
    --bg-card:       #161a21;
    --bg-input:      #0d1017;
    --bg-hover:      #1c2029;
    --border:        #222630;
    --border-light:  #2a2e38;
    --text-primary:  #eaecef;
    --text-secondary:#848e9c;
    --text-muted:    #5e6673;
    --accent:        #00c076;
    --accent-hover:  #00a868;
    --blue:          #3b82f6;
    --blue-hover:    #2563eb;
    --green:         #0ecb81;
    --green-dim:     rgba(14, 203, 129, 0.12);
    --red:           #f6465d;
    --red-dim:       rgba(246, 70, 93, 0.12);
    --yellow:        #f0b90b;
    --yellow-dim:    rgba(240, 185, 11, 0.12);
    --font-mono:     'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Top Navigation Bar ── */
.top-nav {
    display: flex;
    align-items: center;
    height: 52px;
    background: #000;
    border-bottom: 1px solid var(--border);
    padding: 0 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    gap: 0;
}

.top-nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 20px;
    border-right: 1px solid var(--border);
    margin-right: 4px;
    flex-shrink: 0;
}

.top-nav-logo img {
    height: 32px;
    width: auto;
}

.top-nav-logo h1 {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* Price Tickers in top nav */
.nav-prices {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: 4px;
}

.price-ticker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 4px 14px;
    height: 52px;
    border-right: 1px solid var(--border);
    cursor: default;
    transition: background 0.15s;
}

.price-ticker:hover {
    background: var(--bg-hover);
}

.price-ticker .ticker-symbol {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.price-ticker .ticker-data {
    display: flex;
    align-items: center;
    gap: 6px;
}

.price-ticker .ticker-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.price-ticker .ticker-change {
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.price-ticker .ticker-change.up { color: var(--green); }
.price-ticker .ticker-change.down { color: var(--red); }

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    height: 52px;
    margin-left: auto;
    gap: 0;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 0 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.nav-links a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.nav-links .nav-icon {
    font-size: 14px;
    line-height: 1;
}
.nav-links .nav-icon-svg {
    vertical-align: middle;
    margin-right: 2px;
}

/* Account section in top nav */
.nav-account {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    height: 52px;
    flex-shrink: 0;
}

.nav-balance {
    text-align: right;
}

.nav-balance .balance-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.nav-balance .balance-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-mono);
    line-height: 1.2;
}

.nav-account-type {
    display: flex;
    align-items: center;
    gap: 6px;
}

.account-badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.account-badge.demo {
    background: var(--yellow-dim);
    color: var(--yellow);
}

.account-badge.live {
    background: var(--green-dim);
    color: var(--green);
}

.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.nav-user-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

/* Account Switcher Dropdown */
.account-switcher {
    position: relative;
}

.account-switcher-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.account-switcher-btn:hover {
    border-color: var(--accent);
}

.account-switcher-btn .switcher-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.account-switcher-btn .switcher-dot.demo { background: var(--yellow); }
.account-switcher-btn .switcher-dot.live { background: var(--green); box-shadow: 0 0 4px var(--green); }

.account-switcher-btn .switcher-arrow {
    font-size: 8px;
    color: var(--text-muted);
    margin-left: 2px;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 1001;
    display: none;
    overflow: hidden;
}

.account-dropdown.open {
    display: block;
}

.account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}

.account-dropdown-item:last-child {
    border-bottom: none;
}

.account-dropdown-item:hover {
    background: var(--bg-hover);
}

.account-dropdown-item.active {
    background: rgba(0, 192, 118, 0.06);
    color: var(--accent);
}

.account-dropdown-item .item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.account-dropdown-item .item-balance {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}

.account-dropdown-sep {
    height: 1px;
    background: var(--border);
}

.account-dropdown-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.1s;
}

.account-dropdown-action:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* ── Main Layout ── */
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 52px;
}

.main-content {
    flex: 1;
    padding: 12px;
    max-width: 100%;
}

/* ── Two Column Layout (Chart + Panel) ── */
.layout-split {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    min-height: calc(100vh - 76px);
}

.layout-split > .panel-left {
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
}

.layout-split > .panel-right {
    background: var(--bg-card);
    overflow-y: auto;
    max-height: calc(100vh - 72px);
}

/* ── Panel Headers ── */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    min-height: 36px;
}

.panel-header h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

/* ── Chart Container ── */
.chart-container {
    flex: 1;
    min-height: 300px;
    position: relative;
    overflow: hidden;
}

.chart-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    opacity: 0.06;
}
.chart-watermark img {
    width: 400px;
    height: auto;
    filter: grayscale(100%) brightness(2);
}

.chart-container #tv-chart {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
}
/* Hide Lightweight Charts TV attribution logo */
.chart-container #tv-chart a[href*="tradingview"],
#rsi-chart a[href*="tradingview"] {
    display: none !important;
}

/* Chart toolbar */
.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.chart-toolbar .tf-btn {
    padding: 3px 8px;
    background: transparent;
    border: none;
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.chart-toolbar .tf-btn:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.chart-toolbar .tf-btn.active {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.chart-toolbar .toolbar-sep {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 4px;
}

/* Chart toggle buttons (eye icon) */
.chart-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0.5;
}
.chart-toggle-btn:hover {
    background: var(--bg-hover);
    opacity: 0.8;
}
.chart-toggle-btn.active {
    color: var(--text-secondary);
    opacity: 1;
}
.chart-toggle-btn.active svg {
    stroke: var(--accent);
}
.chart-toggle-btn:not(.active) svg {
    opacity: 0.4;
}

.chart-pair-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 8px;
}

.chart-pair-price {
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-mono);
    margin-right: 12px;
}

/* ── Bot Config Panel (Right Side) ── */
.bot-config {
    padding: 0;
}

.config-section {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.config-section:last-child {
    border-bottom: none;
}

.config-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    min-height: 28px;
}

.config-row .config-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.config-row .config-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    font-family: var(--font-mono);
    text-align: right;
}

.config-input {
    width: 120px;
    padding: 4px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-mono);
    text-align: right;
    transition: border-color 0.15s;
}

.config-input:focus {
    outline: none;
    border-color: var(--accent);
}

.config-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.config-input-group .input-suffix {
    font-size: 11px;
    color: var(--text-muted);
}

/* ── Stats Row (compact horizontal stats) ── */
.stats-row {
    display: flex;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
}

.stats-row .stat-item {
    flex: 1;
    background: var(--bg-card);
    padding: 8px 12px;
    text-align: center;
}

.stats-row .stat-item .stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.stats-row .stat-item .stat-value {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-mono);
}

/* ── Cards (compact) ── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.card-header h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-body {
    padding: 12px;
}

/* ── Stats grid (legacy compat, now compact) ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.stat-card {
    background: var(--bg-card);
    padding: 10px 12px;
}

.stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.stat-value.positive { color: var(--green); }
.stat-value.negative { color: var(--red); }

/* ── Tables (compact) ── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.data-table th {
    text-align: left;
    padding: 6px 10px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
}

.data-table tr:hover td {
    background: var(--bg-hover);
}

.data-table td.positive { color: var(--green); }
.data-table td.negative { color: var(--red); }

/* ── Forms (compact) ── */
.form-group {
    margin-bottom: 10px;
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-control {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-mono);
    transition: border-color 0.15s;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
}

select.form-control {
    font-family: 'Inter', sans-serif;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* ── Buttons (compact) ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--blue);
    color: #fff;
}
.btn-primary:hover { background: var(--blue-hover); }

.btn-success {
    background: var(--accent);
    color: #fff;
}
.btn-success:hover { background: var(--accent-hover); }

.btn-danger {
    background: var(--red);
    color: #fff;
}
.btn-danger:hover { background: #d93048; }

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-sm { padding: 3px 10px; font-size: 11px; }
.btn-xs { padding: 2px 6px; font-size: 10px; border-radius: 3px; }

.btn-group {
    display: flex;
    gap: 4px;
}

/* ── Badges ── */
.badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.badge-green  { background: var(--green-dim); color: var(--green); }
.badge-red    { background: var(--red-dim); color: var(--red); }
.badge-yellow { background: var(--yellow-dim); color: var(--yellow); }
.badge-blue   { background: rgba(59, 130, 246, 0.12); color: var(--blue); }

/* ── Alerts ── */
.alert {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 12px;
}

.alert-danger  { background: var(--red-dim); border: 1px solid rgba(246,70,93,0.3); color: var(--red); }
.alert-success { background: var(--green-dim); border: 1px solid rgba(14,203,129,0.3); color: var(--green); }
.alert-warning { background: var(--yellow-dim); border: 1px solid rgba(240,185,11,0.3); color: var(--yellow); }

/* ── Toggle switch (compact) ── */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.toggle input { display: none; }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-light);
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: var(--text-primary);
    border-radius: 50%;
    transition: 0.2s;
}

.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

/* ── Trading Terminal (Pairs List) ── */
.terminal-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.terminal-search {
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.terminal-search input {
    width: 100%;
    padding: 5px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-primary);
    font-size: 12px;
}

.terminal-search input:focus {
    outline: none;
    border-color: var(--accent);
}

.terminal-tabs {
    display: flex;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.terminal-tabs button {
    flex: 1;
    padding: 5px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.terminal-tabs button:hover {
    color: var(--text-secondary);
}

.terminal-tabs button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.pairs-list {
    max-height: 300px;
    overflow-y: auto;
}

.pair-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--border);
}

.pair-row:hover {
    background: var(--bg-hover);
}

.pair-row.selected {
    background: rgba(0, 192, 118, 0.06);
}

.pair-row .pair-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.pair-row .pair-name span {
    color: var(--text-muted);
    font-weight: 400;
}

.pair-row .pair-price {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.pair-row .pair-change {
    font-size: 11px;
    font-family: var(--font-mono);
    min-width: 55px;
    text-align: right;
}

.pair-row .pair-change.up { color: var(--green); }
.pair-row .pair-change.down { color: var(--red); }

/* ── Bot Status Indicator ── */
.bot-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bot-status .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
}

.bot-status .status-dot.active {
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Orders section in bot panel ── */
.orders-mini-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-mini-table th {
    text-align: left;
    padding: 4px 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
}

.orders-mini-table td {
    padding: 3px 8px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

/* ── Backtest Section ── */
.backtest-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}

.backtest-bar .backtest-period {
    font-size: 11px;
    color: var(--text-muted);
}

.backtest-progress {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.backtest-progress .progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s;
}

/* ── Auth pages ── */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-top: 0;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
}

.auth-card h2 {
    text-align: center;
    margin-bottom: 4px;
    color: var(--accent);
    font-size: 18px;
}

.auth-card .subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 20px;
}

.auth-link {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.auth-link a { color: var(--accent); text-decoration: none; }

/* ── Loading spinner ── */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ── Page header (for non-dashboard pages) ── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 0;
}

.page-header h2 {
    font-size: 16px;
    font-weight: 600;
}

/* ── Tab navigation within pages ── */
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

.tab-nav button {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.tab-nav button:hover {
    color: var(--text-secondary);
}

.tab-nav button.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ── Terminal Layout ── */
.terminal-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    min-height: calc(100vh - 76px);
}

.terminal-pairs-panel {
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 76px);
}

.terminal-main {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1px;
    background: var(--border);
}

.terminal-chart-panel {
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
}

.terminal-config-panel {
    background: var(--bg-card);
    overflow-y: auto;
    max-height: calc(100vh - 76px);
}

/* ── Dashboard Widget Grid ── */
.dashboard-widgets {
    display: grid;
    grid-template-columns: 0.5fr 1.3fr 1.2fr;
    gap: 8px;
    margin-bottom: 8px;
}

/* ── Mobile Menu Button (hidden by default) ── */
.mobile-menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 18px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1004;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    touch-action: manipulation;
}

.mobile-menu-btn:hover {
    background: var(--bg-hover);
}
.mobile-menu-btn:active {
    background: var(--accent);
    color: #000;
    transform: scale(0.95);
}

/* ── Mobile Nav Drawer (created via JS at ≤1024px) ── */
.mobile-nav-drawer {
    /* Hidden by default — only relevant on mobile widths */
    display: none;
}

/* Backdrop dim layer — visible when drawer is open */
.mobile-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.mobile-nav-open .mobile-nav-backdrop {
    display: block;
    opacity: 1;
}

/* ── Responsive ── */

/* Narrow desktops / vertical monitors — hide price tickers, tighten nav */
@media (max-width: 1200px) {
    .nav-prices {
        display: none;
    }
    .terminal-main {
        grid-template-columns: 1fr 320px;
    }
}

/* Tablets */
@media (max-width: 1024px) {
    .layout-split {
        grid-template-columns: 1fr;
    }
    .panel-right {
        max-height: none !important;
    }
    .terminal-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .terminal-pairs-panel {
        max-height: 300px;
    }
    .terminal-main {
        grid-template-columns: 1fr;
    }
    .terminal-config-panel {
        max-height: none;
    }
    .dashboard-widgets {
        grid-template-columns: 1fr 1fr;
    }
    .stats-row {
        flex-wrap: wrap;
    }
    .stats-row .stat-item {
        flex: 1 1 30%;
        min-width: 0;
    }
}

/* ════════════════════════════════════════════════════════════════ */
/* Mobile / tablet nav drawer (≤1024px)                              */
/* The hamburger button toggles `.mobile-nav-open` on <body>. JS in   */
/* header.php wraps .nav-links + .nav-account in #mobile-nav-drawer   */
/* below this breakpoint, so they slide in together as one unit.      */
/* ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .top-nav {
        height: 64px;
        min-height: 64px;
        flex-wrap: nowrap;
        padding: 0 12px;
        gap: 0;
    }
    .top-nav-logo {
        padding-right: 12px;
        border-right: none;
        margin-right: 0;
    }
    /* Bumped from desktop's 32px so the wordmark is legible on small
       screens, but kept under the nav-bar height so it doesn't dominate. */
    .top-nav-logo img {
        height: 48px;
    }
    .app-wrapper {
        padding-top: 64px;
    }
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The drawer panel itself — fixed, slides in from the right.
       When closed, `visibility: hidden` + `pointer-events: none` ensure it
       can never intercept a tap that's meant for the hamburger button.   */
    .mobile-nav-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 64px;
        right: 0;
        bottom: 0;
        width: 300px;
        max-width: 85vw;
        background: var(--bg-secondary);
        border-left: 1px solid var(--border);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(100%);
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
        z-index: 1001;
        box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
        visibility: hidden;
        pointer-events: none;
    }
    body.mobile-nav-open .mobile-nav-drawer {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.25s ease, visibility 0s linear 0s;
    }
    /* Lock body scroll while drawer is open */
    body.mobile-nav-open {
        overflow: hidden;
    }

    /* Inside the drawer: nav-account block on top, then nav links list. */
    .mobile-nav-drawer .nav-account {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        height: auto;
        padding: 16px;
        margin-left: 0;
        border-left: none;
        border-bottom: 1px solid var(--border);
        background: var(--bg-primary);
    }
    .mobile-nav-drawer .nav-account .nav-balance {
        text-align: left;
        padding: 0;
        border-bottom: none;
    }
    .mobile-nav-drawer .nav-account .nav-balance .balance-label {
        font-size: 11px;
    }
    .mobile-nav-drawer .nav-account .nav-balance .balance-value {
        font-size: 18px;
    }
    .mobile-nav-drawer .nav-account .account-switcher,
    .mobile-nav-drawer .nav-account .account-switcher-btn,
    .mobile-nav-drawer .nav-account .nav-user-btn {
        width: 100%;
        justify-content: center;
    }
    .mobile-nav-drawer .nav-account .nav-user-btn {
        height: 40px;
        padding: 0 12px;
        font-size: 13px;
    }

    /* Nav links: full-width 48px rows with icon+label */
    .mobile-nav-drawer .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 4px 0 16px 0;
        gap: 0;
    }
    .mobile-nav-drawer .nav-links a {
        display: flex;
        align-items: center;
        height: 48px;
        width: 100%;
        justify-content: flex-start;
        padding: 0 20px;
        font-size: 14px;
        gap: 12px;
        border-bottom: 1px solid var(--border);
        border-left: 3px solid transparent;
    }
    .mobile-nav-drawer .nav-links a.active {
        background: var(--bg-hover);
        color: var(--accent);
        border-bottom-color: var(--border);
        border-left-color: var(--accent);
    }
    .mobile-nav-drawer .nav-links a .nav-icon,
    .mobile-nav-drawer .nav-links a .nav-icon-svg {
        font-size: 16px;
        flex-shrink: 0;
    }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
    .top-nav {
        padding: 0 8px;
    }
    .main-content {
        padding: 8px;
    }
    .stats-row {
        flex-wrap: wrap;
    }
    .stats-row .stat-item {
        flex: 1 1 45%;
        min-width: 0;
    }
    .stats-row .stat-item .stat-value {
        font-size: 12px;
    }
    .dashboard-widgets {
        grid-template-columns: 1fr;
    }
    .page-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .page-header h2 {
        font-size: 14px;
    }
    .terminal-pairs-panel {
        max-height: 250px;
    }
    .terminal-config-panel {
        max-height: none;
    }
    .chart-toolbar {
        flex-wrap: wrap;
        gap: 4px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .data-table {
        font-size: 11px;
    }
    .data-table th,
    .data-table td {
        padding: 6px 4px;
    }
    .bots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phones */
@media (max-width: 480px) {
    .top-nav {
        padding: 0 6px;
    }
    /* Slightly smaller on narrow phones than on tablets — keeps the
       wordmark readable but leaves room for the hamburger button. */
    .top-nav-logo img {
        height: 40px;
    }
    .main-content {
        padding: 4px;
    }
    .stats-row .stat-item {
        flex: 1 1 100%;
        padding: 6px 10px;
    }
    .stats-row .stat-item .stat-label {
        font-size: 9px;
    }
    .stats-row .stat-item .stat-value {
        font-size: 11px;
    }
    .card-header {
        padding: 6px 8px;
    }
    .card-header h3 {
        font-size: 11px;
    }
    .card-body {
        padding: 8px;
    }
    .panel-header {
        padding: 6px 8px;
    }
    .panel-header h3 {
        font-size: 11px;
    }
    .config-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .config-input {
        width: 100% !important;
    }
    .orders-mini-table {
        font-size: 10px;
    }
    .orders-mini-table th,
    .orders-mini-table td {
        padding: 4px 3px;
    }
    .exchange-row {
        padding: 6px 8px;
    }
    .bots-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════ */
/* SETTINGS TABS                                                   */
/* ══════════════════════════════════════════════════════════════ */
.settings-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    margin-bottom: -1px;
}

.settings-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.settings-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.settings-tab svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.settings-tab.active svg {
    opacity: 1;
}

.settings-tab-pane {
    display: none;
}

.settings-tab-pane.active {
    display: block;
    animation: fadeInPane 0.2s ease;
}

@keyframes fadeInPane {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Settings rows (toggle list) */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 4px;
    margin-bottom: 8px;
    gap: 12px;
}

.settings-row-info {
    flex: 1;
    min-width: 0;
}

.settings-row-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.settings-row-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Liveness indicators (dashboard) ── */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: rgba(14, 203, 129, 0.08);
    border: 1px solid rgba(14, 203, 129, 0.3);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--green);
    user-select: none;
}
.live-pill .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.7);
    animation: live-pulse 1.6s ease-out infinite;
}
.live-pill .live-text { font-weight: 700; }
.live-pill .live-sep { opacity: 0.5; margin: 0 1px; }
.live-pill .live-age {
    color: var(--text-secondary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.live-pill.stale {
    background: rgba(240, 185, 11, 0.08);
    border-color: rgba(240, 185, 11, 0.4);
    color: #f0b90b;
}
.live-pill.stale .live-dot {
    background: #f0b90b;
    animation: none;
    box-shadow: none;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(14, 203, 129, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(14, 203, 129, 0); }
    100% { box-shadow: 0 0 0 0   rgba(14, 203, 129, 0); }
}

/* ── Flash on numeric change ── */
.flash-up   { animation: flash-up   0.7s ease-out; }
.flash-down { animation: flash-down 0.7s ease-out; }
@keyframes flash-up {
    0%   { background-color: rgba(14, 203, 129, 0.35); }
    100% { background-color: transparent; }
}
@keyframes flash-down {
    0%   { background-color: rgba(246, 70, 93, 0.35); }
    100% { background-color: transparent; }
}

/* ── Active bot card breathing border (signals "alive & processing") ── */
.bot-card-live {
    position: relative;
}
.bot-card-live::before {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.6);
    animation: live-pulse 2s ease-out infinite;
    pointer-events: none;
}

/* ── Text flash for tight rows (terminal pairs list) ── */
.flash-text-up {
    animation: flash-text-up 0.6s ease-out;
}
.flash-text-down {
    animation: flash-text-down 0.6s ease-out;
}
@keyframes flash-text-up {
    0%   { color: var(--green); text-shadow: 0 0 8px rgba(14, 203, 129, 0.6); }
    100% { color: inherit; text-shadow: none; }
}
@keyframes flash-text-down {
    0%   { color: var(--red); text-shadow: 0 0 8px rgba(246, 70, 93, 0.6); }
    100% { color: inherit; text-shadow: none; }
}

/* Slightly smaller LIVE pill variant for use inside panel headers */
.panel-header .live-pill {
    padding: 2px 7px;
    font-size: 9px;
}