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

html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #131722; color: #d1d4dc;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

#app {
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
}

#chart-wrap { flex: 1; min-height: 0; position: relative; }
#chart-container { width: 100%; height: 100%; }

/* ── Candle overlay ──────────────────────────── */
#candle-overlay {
    position: absolute; top: 4px; left: 8px; z-index: 10;
    display: none; gap: 10px; align-items: center;
    font-size: 12px; color: #d1d4dc;
    background: rgba(19,23,34,0.85); padding: 4px 10px;
    border-radius: 4px; white-space: nowrap;
    pointer-events: none;
}
#candle-overlay span { display: inline-flex; align-items: center; gap: 2px; }
#ov-chg.up { color: #26a69a; }
#ov-chg.dn { color: #ef5350; }
#ov-date { color: #787b86; }
#ov-time { color: #787b86; }
#ov-vol  { color: #787b86; }

/* ── Timeframe bar ────────────────────────────── */
#tf-bar {
    display: flex; gap: 4px;
    padding: 5px 12px;
    background: #1e222d; border-top: 1px solid #2a2e39;
    flex-shrink: 0;
}
.tf-btn, .reset-btn {
    padding: 4px 14px; border: 1px solid #2a2e39; border-radius: 4px;
    background: transparent; color: #787b86; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: all 0.1s; user-select: none;
}
.tf-btn:hover, .reset-btn:hover { color: #d1d4dc; border-color: #555; }
.tf-btn:active, .reset-btn:active { transform: scale(0.95); }
.tf-btn.active { background: #2962ff; color: #fff; border-color: #2962ff; }
.reset-btn { font-size: 16px; padding: 4px 10px; line-height: 1; }

/* ── Indicator bar ───────────────────────────── */
#indicator-bar {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    padding: 4px 12px;
    background: #1e222d; border-top: 1px solid #2a2e39;
    flex-shrink: 0;
}
.ind-add-btn {
    padding: 3px 10px; border: 1px solid #2a2e39; border-radius: 4px;
    background: transparent; color: #787b86; font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.1s; user-select: none;
}
.ind-add-btn:hover { color: #d1d4dc; border-color: #555; }
.ind-add-btn:active { transform: scale(0.95); }

#active-indicators {
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ind-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    background: rgba(255,255,255,0.06); cursor: default;
}
.ind-chip .dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ind-chip .remove {
    cursor: pointer; color: #787b86; font-size: 13px; line-height: 1;
    margin-left: 2px; user-select: none;
}
.ind-chip .remove:hover { color: #ef5350; }

/* ── Indicator panel ─────────────────────────── */
#indicator-panel {
    background: #1e222d; border-top: 1px solid #2a2e39;
    padding: 8px 12px; flex-shrink: 0;
}
.ind-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; font-size: 12px;
}
.ind-row label { color: #787b86; white-space: nowrap; min-width: 40px; }
.ind-row select {
    padding: 4px 8px; border: 1px solid #2a2e39; border-radius: 4px;
    background: #131722; color: #d1d4dc; font-size: 12px; outline: none;
    cursor: pointer;
}
.ind-row select:focus { border-color: #2962ff; }
.ind-row input[type="number"] {
    width: 60px; padding: 4px 6px; border: 1px solid #2a2e39;
    border-radius: 4px; background: #131722; color: #d1d4dc;
    font-size: 12px; outline: none;
}
.ind-row input[type="number"]:focus { border-color: #2962ff; }
.ind-actions { display: flex; gap: 8px; margin-top: 8px; }
.ind-actions button {
    padding: 5px 16px; border: none; border-radius: 4px;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
#ind-add { background: #2962ff; color: #fff; }
#ind-add:hover { background: #1e53e5; }
#ind-close { background: #363a45; color: #d1d4dc; }
#ind-close:hover { background: #4a4e59; }

/* ── Info bar ─────────────────────────────── */
#info-bar {
    display: flex; align-items: center; gap: 16px;
    padding: 6px 14px;
    background: #1e222d; border-top: 1px solid #2a2e39;
    font-size: 13px; flex-shrink: 0;
    overflow-x: auto; white-space: nowrap;
}
#info-bar .label { color: #787b86; margin-right: 2px; }
#current-price { font-size: 17px; font-weight: 700; }
#price-change  { font-weight: 600; }
.price-up   { color: #26a69a; }
.price-down { color: #ef5350; }

#force-indicator {
    font-size: 11px; color: #787b86; padding: 2px 8px;
    border-radius: 4px; background: rgba(255,255,255,0.04);
    white-space: nowrap; flex-shrink: 0;
}
#force-indicator.active { color: #ffeb3b; background: rgba(255,235,59,0.1); }

/* ── Controls ─────────────────────────────── */
#controls {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #1e222d; border-top: 1px solid #2a2e39;
    flex-shrink: 0;
}

.btn {
    padding: 12px 0; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    transition: all 0.1s ease; min-width: 72px;
    user-select: none; letter-spacing: 0.5px; flex-shrink: 0;
}
.btn.buy { background: #26a69a; color: #fff; width: 49%; }
.btn.buy:active { background: #1e9a8f; transform: scale(0.96); }
.btn.sell { background: #ef5350; color: #fff; width: 49%; }
.btn.sell:active { background: #d84040; transform: scale(0.96); }

#slider-container {
    flex: 1; display: flex; align-items: center; gap: 8px;
    min-width: 0;
}
#slider-container label {
    font-size: 13px; color: #787b86; white-space: nowrap;
}

#weight-slider {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 5px; border-radius: 3px; background: #2a2e39; outline: none;
    min-width: 60px;
}
#weight-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 44px; border-radius: 6px;
    background: #2962ff; cursor: pointer;
}
#weight-slider::-moz-range-thumb {
    width: 24px; height: 44px; border-radius: 6px; border: none;
    background: #2962ff; cursor: pointer;
}

#weight-value {
    font-size: 15px; font-weight: 700; color: #2962ff;
    min-width: 38px; text-align: right; flex-shrink: 0;
}

/* ── Desktop hover ────────────────────────── */
@media (hover: hover) {
    .btn.buy:hover  { background: #2cc5a8; }
    .btn.sell:hover { background: #f77; }
}

/* ── Small screens ────────────────────────── */
@media (max-width: 480px) {
    #tf-bar { padding: 4px 8px; gap: 3px; }
    .tf-btn, .reset-btn { padding: 3px 10px; font-size: 11px; }
    .reset-btn { font-size: 14px; padding: 3px 8px; }
    #indicator-bar { padding: 3px 8px; gap: 3px; }
    .ind-add-btn { padding: 2px 7px; font-size: 10px; }
    .ind-chip { font-size: 10px; padding: 2px 6px; }
    #indicator-panel { padding: 6px 8px; }
    .ind-row input[type="number"] { width: 50px; }
    #info-bar { gap: 10px; padding: 5px 10px; font-size: 12px; }
    #current-price { font-size: 15px; }
    #controls { gap: 8px; padding: 8px 10px; }
    .btn { padding: 10px 0; font-size: 15px; min-width: 64px; }
    #weight-slider::-webkit-slider-thumb { width: 22px; height: 38px; }
    #weight-value { font-size: 14px; }
    #candle-overlay { font-size: 11px; gap: 6px; padding: 3px 6px; }
}