/* ============================================================
   DESIGN TOKENS
   Konsep: terminal trading malam hari — gelap, presisi, data-first.
   Warna hijau/merah HANYA dipakai untuk makna harga (naik/turun),
   bukan dekorasi. Aksen signature: amber (emas/crypto).
   ============================================================ */
:root {
    --bg: #0A0D13;
    --panel: #12161F;
    --panel-alt: #171C27;
    --border: #232A38;
    --text-primary: #E7E9EE;
    --text-secondary: #7C879C;
    --amber: #E8A33D;
    --amber-dim: #6B4F22;
    --bull: #33D690;
    --bear: #F0546B;
    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --font-body: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* ---------- TICKER TAPE (signature element) ---------- */
.ticker-tape {
    background: #05070B;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.ticker-tape__inner {
    display: inline-block;
    animation: ticker-scroll 30s linear infinite;
    font-family: var(--font-mono);
    font-size: 13px;
}
.ticker-tape:hover .ticker-tape__inner { animation-play-state: paused; }
@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item { display: inline-block; padding: 0 24px; color: var(--text-secondary); }
.ticker-item .up { color: var(--bull); }
.ticker-item .down { color: var(--bear); }

/* ---------- HEADER ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
}
.brand {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.brand .dot { color: var(--amber); }
.mode-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid var(--amber-dim);
    color: var(--amber);
    letter-spacing: 0.06em;
}
.mode-badge.live { border-color: var(--bear); color: var(--bear); }

.topbar-right { display: flex; gap: 12px; align-items: center; }
select#symbolSelect, select#intervalSelect {
    background: var(--panel-alt);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ---------- LAYOUT ---------- */
.grid {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 16px;
    padding: 16px 28px;
    align-items: start;
}
@media (max-width: 1100px) {
    .grid { grid-template-columns: 1fr; }
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px;
}
.panel-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 0 0 14px 0;
    display: flex;
    justify-content: space-between;
}

/* ---------- SIGNAL GAUGE (signature element #2) ---------- */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; padding: 12px 0 4px; }
.gauge {
    width: 220px;
    height: 120px;
    position: relative;
}
.gauge svg { width: 100%; height: 100%; }
.gauge-needle {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 110px 110px;
}
.gauge-score {
    font-family: var(--font-mono);
    font-size: 32px;
    font-weight: 700;
    margin-top: -8px;
}
.gauge-action {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 16px;
    border-radius: 4px;
    margin-top: 6px;
}
.gauge-action.BUY { color: var(--bull); background: rgba(51,214,144,0.1); }
.gauge-action.SELL { color: var(--bear); background: rgba(240,84,107,0.1); }
.gauge-action.HOLD { color: var(--amber); background: rgba(232,163,61,0.1); }

.reasons-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reasons-list li {
    padding-left: 14px;
    border-left: 2px solid var(--border);
}

/* ---------- PRICE HEADER ---------- */
.price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.price-main { font-family: var(--font-mono); font-size: 34px; font-weight: 700; }
.price-change { font-family: var(--font-mono); font-size: 15px; padding: 2px 8px; border-radius: 4px; }
.price-change.up { color: var(--bull); background: rgba(51,214,144,0.1); }
.price-change.down { color: var(--bear); background: rgba(240,84,107,0.1); }
.price-meta { color: var(--text-secondary); font-size: 12px; font-family: var(--font-mono); }

/* ---------- CHART ---------- */
.chart-container { height: 320px; margin-top: 14px; position: relative; }
.chart-container canvas { width: 100%; height: 100%; display: block; }
.chart-crosshair-label {
    position: absolute; font-family: var(--font-mono); font-size: 11px;
    background: var(--panel-alt); border: 1px solid var(--border);
    padding: 3px 7px; border-radius: 4px; pointer-events: none; color: var(--text-primary);
    display: none;
}

/* ---------- INDICATOR TABLE ---------- */
.indicator-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; }
.indicator-table td { padding: 8px 0; border-bottom: 1px solid var(--border); }
.indicator-table td:first-child { color: var(--text-secondary); }
.indicator-table td:last-child { text-align: right; }
.indicator-table tr:last-child td { border-bottom: none; }

/* ---------- TRADE PANEL ---------- */
.balance-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; padding: 6px 0; }
.trade-buttons { display: flex; gap: 10px; margin-top: 14px; }
.btn {
    flex: 1;
    padding: 12px;
    border-radius: 6px;
    border: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}
.btn:hover { opacity: 0.85; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-buy { background: var(--bull); color: #06140D; }
.btn-sell { background: var(--bear); color: #1A0508; }

.auto-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.switch { position: relative; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--panel-alt); border: 1px solid var(--border);
    border-radius: 24px; transition: 0.2s;
}
.slider::before {
    content: ""; position: absolute; width: 18px; height: 18px;
    left: 2px; bottom: 2px; background: var(--text-secondary);
    border-radius: 50%; transition: 0.2s;
}
input:checked + .slider { background: rgba(232,163,61,0.25); border-color: var(--amber); }
input:checked + .slider::before { transform: translateX(20px); background: var(--amber); }

.risk-note {
    font-size: 11.5px;
    color: var(--text-secondary);
    margin-top: 10px;
    line-height: 1.5;
}
.risk-note b { color: var(--amber); }

/* ---------- LOG TABLE ---------- */
.log-table { width: 100%; font-family: var(--font-mono); font-size: 12.5px; border-collapse: collapse; }
.log-table th { text-align: left; color: var(--text-secondary); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--border); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; }
.log-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.tag { padding: 2px 8px; border-radius: 3px; font-size: 11px; }
.tag.BUY, .tag.SUCCESS { background: rgba(51,214,144,0.12); color: var(--bull); }
.tag.SELL { background: rgba(240,84,107,0.12); color: var(--bear); }
.tag.FAILED { background: rgba(240,84,107,0.12); color: var(--bear); }

.toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--panel-alt); border: 1px solid var(--border);
    padding: 14px 18px; border-radius: 8px; font-size: 13px;
    max-width: 340px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transform: translateY(20px); opacity: 0; transition: 0.25s;
    pointer-events: none; z-index: 200;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: var(--bear); }
.toast.success { border-color: var(--bull); }

.empty-note { color: var(--text-secondary); font-size: 12.5px; text-align: center; padding: 20px 0; }

/* ---------- ECONOMIC CALENDAR ---------- */
.calendar-warning-banner {
    background: rgba(232,163,61,0.1);
    border: 1px solid var(--amber);
    color: var(--amber);
    font-size: 12.5px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    line-height: 1.5;
}
.calendar-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.calendar-table th {
    text-align: left; color: var(--text-secondary); font-weight: 400;
    padding: 6px 8px; border-bottom: 1px solid var(--border);
    text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em;
}
.calendar-table td { padding: 8px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); }
.calendar-table td.event-name { font-family: var(--font-body); }
.impact-badge {
    display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.impact-badge.high { background: rgba(240,84,107,0.15); color: var(--bear); }
.impact-badge.medium { background: rgba(232,163,61,0.15); color: var(--amber); }
.impact-badge.low { background: rgba(124,135,156,0.15); color: var(--text-secondary); }
.calendar-not-configured {
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
    padding: 8px 0;
}
.calendar-not-configured code {
    background: var(--panel-alt); padding: 2px 6px; border-radius: 3px; color: var(--amber);
}

/* ---------- FREEZE STATUS & MODAL ---------- */
.freeze-status-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; margin-top: 10px; padding: 8px 10px;
    background: rgba(240,84,107,0.08); border: 1px solid var(--bear);
    border-radius: 6px; color: var(--bear); display: none;
}
.freeze-status-row.show { display: flex; }
.freeze-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--bear);
    animation: freeze-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes freeze-pulse {
    0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}

.modal-overlay {
    position: fixed; inset: 0; background: rgba(5,7,11,0.72);
    display: none; align-items: center; justify-content: center;
    z-index: 300; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal-box {
    background: var(--panel); border: 1px solid var(--bear);
    border-radius: 10px; max-width: 440px; width: 100%;
    padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: modal-pop 0.25s ease-out;
}
@keyframes modal-pop {
    0% { transform: scale(0.94) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-icon {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(240,84,107,0.12); color: var(--bear);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 14px;
}
.modal-title {
    font-family: var(--font-display); font-size: 17px; font-weight: 600;
    margin: 0 0 8px;
}
.modal-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; }
.modal-body b { color: var(--text-primary); }
.modal-event-box {
    background: var(--panel-alt); border: 1px solid var(--border);
    border-radius: 6px; padding: 12px 14px; margin-bottom: 18px;
    font-family: var(--font-mono); font-size: 12.5px;
}
.modal-event-box div { padding: 3px 0; }
.modal-close-btn {
    width: 100%; padding: 12px; border-radius: 6px; border: none;
    background: var(--amber); color: #241a08; font-family: var(--font-display);
    font-weight: 600; font-size: 14px; cursor: pointer;
}
.modal-close-btn:hover { opacity: 0.9; }

/* ---------- CONVERT PANEL ---------- */
.convert-direction-toggle {
    display: flex; gap: 6px; margin-bottom: 14px;
    background: var(--panel-alt); border-radius: 6px; padding: 3px;
}
.convert-dir-btn {
    flex: 1; padding: 8px; border: none; background: transparent;
    color: var(--text-secondary); font-family: var(--font-body);
    font-size: 12.5px; font-weight: 500; border-radius: 5px; cursor: pointer;
    transition: 0.15s;
}
.convert-dir-btn.active { background: var(--panel); color: var(--amber); }
.convert-label {
    display: block; font-size: 11px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 6px;
}
.convert-select, .convert-input {
    width: 100%; background: var(--panel-alt); border: 1px solid var(--border);
    color: var(--text-primary); padding: 10px; border-radius: 6px;
    font-family: var(--font-mono); font-size: 13px;
}
.convert-amount-row { display: flex; gap: 8px; }
.convert-amount-row .convert-input { flex: 1; }
.convert-max-btn {
    background: var(--panel-alt); border: 1px solid var(--amber-dim); color: var(--amber);
    padding: 0 14px; border-radius: 6px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.convert-max-btn:hover { border-color: var(--amber); }
.convert-balance-hint { font-size: 11.5px; color: var(--text-secondary); margin-top: 6px; font-family: var(--font-mono); }

/* ---------- CHART LEGEND ---------- */
.chart-legend { color: var(--text-secondary); font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 10px; }
.legend-dot.bull { background: var(--bull); }
.legend-dot.bear { background: var(--bear); }
.legend-dot:first-child { margin-left: 0; }

.chart-indicator-legend {
    display: flex; gap: 16px; margin-top: 10px; font-size: 11.5px; color: var(--text-secondary);
}
.chart-indicator-legend span { display: flex; align-items: center; gap: 6px; }
.chart-indicator-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---------- POSITION PANEL ---------- */
.pos-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; padding: 6px 0; }
.pos-pnl { font-size: 15px; }
.pos-pnl.up { color: var(--bull); }
.pos-pnl.down { color: var(--bear); }
.pos-progress-wrap { margin-top: 14px; }
.pos-progress-labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; margin-bottom: 6px; }
.pos-progress-track {
    position: relative; height: 8px; border-radius: 4px;
    background: linear-gradient(90deg, rgba(240,84,107,0.25), rgba(124,135,156,0.15), rgba(51,214,144,0.25));
}
.pos-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px;
    background: var(--amber); transition: width 0.5s ease;
}
.pos-progress-marker {
    position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--text-primary); opacity: 0.4;
}
.pos-close-error {
    margin-top: 12px; padding: 10px; border-radius: 6px; font-size: 11.5px;
    background: rgba(240,84,107,0.1); border: 1px solid var(--bear); color: var(--bear);
}

.position-card {
    border: 1px solid var(--border); border-radius: 8px; padding: 14px;
    margin-bottom: 12px; background: var(--panel-alt);
}
.position-card:last-child { margin-bottom: 0; }
.position-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.position-card-symbol { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; }

/* ---------- TRADE PLAN PANEL ---------- */
.plan-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.plan-row:last-child { border-bottom: none; }
.plan-row .plan-sl { color: var(--bear); }
.plan-row .plan-tp { color: var(--bull); }
.plan-rr-badge {
    display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px;
    font-weight: 600; margin-top: 4px;
}
.plan-rr-badge.good { background: rgba(51,214,144,0.12); color: var(--bull); }
.plan-rr-badge.ok { background: rgba(232,163,61,0.12); color: var(--amber); }
.plan-rr-badge.poor { background: rgba(240,84,107,0.12); color: var(--bear); }
.plan-basis-note { font-size: 11px; color: var(--text-secondary); margin-top: 10px; line-height: 1.5; }
.use-plan-checkbox {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
    font-size: 11.5px; color: var(--text-secondary); cursor: pointer; line-height: 1.4;
}
.use-plan-checkbox input { margin-top: 2px; accent-color: var(--amber); }

/* ---------- DEPOSIT PANEL ---------- */
.deposit-warning {
    background: rgba(240,84,107,0.1); border: 1px solid var(--bear); color: var(--bear);
    font-size: 11.5px; padding: 10px; border-radius: 6px; margin-bottom: 14px; line-height: 1.5;
}
.deposit-address-box {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: var(--panel-alt); border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 12px; font-family: var(--font-mono); font-size: 12px;
    word-break: break-all; margin-bottom: 10px;
}
.deposit-copy-btn {
    flex-shrink: 0; background: var(--amber); color: #241a08; border: none;
    padding: 6px 12px; border-radius: 5px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.deposit-copy-btn:hover { opacity: 0.85; }