/* BTC Analyzer – front-end styles */
.btc-analyzer-wrap {
    --btc-orange:   #f7931a;
    --btc-orange-d: #d4780e;
    --btc-green:    #00c853;
    --btc-red:      #ff3d57;
    --btc-blue:     #2196f3;
    --btc-purple:   #9c27b0;
    --btc-teal:     #26c6da;
    --radius:       10px;
    --font:         'Segoe UI', system-ui, sans-serif;
    font-family:    var(--font);
    max-width:      1200px;
    margin:         0 auto;
    border-radius:  var(--radius);
    overflow:       hidden;
    box-shadow:     0 8px 40px rgba(0,0,0,.35);
}

/* ── DARK THEME ─────────────────────────────────────────────────────────── */
.btc-analyzer-wrap[data-theme="dark"] {
    --bg:         #0d1117;
    --bg2:        #161b22;
    --bg3:        #21262d;
    --border:     #30363d;
    --text:       #e6edf3;
    --text-muted: #8b949e;
    background:   var(--bg);
    color:        var(--text);
}

/* ── LIGHT THEME ────────────────────────────────────────────────────────── */
.btc-analyzer-wrap[data-theme="light"] {
    --bg:         #f6f8fa;
    --bg2:        #ffffff;
    --bg3:        #eaeef2;
    --border:     #d0d7de;
    --text:       #1f2328;
    --text-muted: #57606a;
    background:   var(--bg);
    color:        var(--text);
}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.btc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         18px 24px;
    background:      var(--bg2);
    border-bottom:   1px solid var(--border);
    gap:             12px;
    flex-wrap:       wrap;
}
.btc-title-group {
    display:     flex;
    align-items: center;
    gap:         14px;
}
.btc-logo {
    font-size:   2rem;
    color:       var(--btc-orange);
    line-height: 1;
    text-shadow: 0 0 20px rgba(247,147,26,.4);
}
.btc-title {
    margin:      0 0 2px;
    font-size:   1.2rem;
    font-weight: 700;
    letter-spacing: -.3px;
    color:       var(--text);
}
.btc-subtitle {
    margin:      0;
    font-size:   .78rem;
    color:       var(--text-muted);
}
.btc-header-right {
    display:     flex;
    align-items: center;
    gap:         16px;
}
.btc-price-display {
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
}
.btc-current-price {
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--btc-orange);
    font-variant-numeric: tabular-nums;
}
.btc-price-change {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--text-muted);
}
.btc-price-change.positive { color: var(--btc-green); }
.btc-price-change.negative { color: var(--btc-red); }

.btc-refresh-btn {
    background:    transparent;
    border:        1px solid var(--border);
    border-radius: 6px;
    color:         var(--text-muted);
    cursor:        pointer;
    padding:       7px 9px;
    display:       flex;
    align-items:   center;
    transition:    all .2s;
}
.btc-refresh-btn:hover { background: var(--bg3); color: var(--text); }
.btc-refresh-btn svg { width: 16px; height: 16px; }
.btc-refresh-btn.spinning svg { animation: btc-spin .8s linear infinite; }
@keyframes btc-spin { to { transform: rotate(360deg); } }

/* ── STATS BAR ──────────────────────────────────────────────────────────── */
.btc-stats-bar {
    display:       flex;
    gap:           0;
    background:    var(--bg2);
    border-bottom: 1px solid var(--border);
    overflow-x:    auto;
    scrollbar-width: none;
}
.btc-stats-bar::-webkit-scrollbar { display: none; }
.btc-stat {
    display:        flex;
    flex-direction: column;
    padding:        10px 18px;
    border-right:   1px solid var(--border);
    min-width:      max-content;
    gap:            2px;
}
.btc-stat:last-child { border-right: none; }
.btc-stat-label {
    font-size:      .68rem;
    font-weight:    600;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.btc-stat-value {
    font-size:   .9rem;
    font-weight: 600;
    color:       var(--text);
    font-variant-numeric: tabular-nums;
}

/* ── CONTROLS ───────────────────────────────────────────────────────────── */
.btc-controls {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 20px;
    background:      var(--bg2);
    border-bottom:   1px solid var(--border);
    gap:             12px;
    flex-wrap:       wrap;
}
.btc-range-tabs {
    display:       flex;
    gap:           4px;
    background:    var(--bg3);
    padding:       3px;
    border-radius: 8px;
}
.btc-range-tab {
    background:    transparent;
    border:        none;
    color:         var(--text-muted);
    cursor:        pointer;
    padding:       5px 14px;
    border-radius: 6px;
    font-size:     .82rem;
    font-weight:   600;
    transition:    all .15s;
}
.btc-range-tab:hover  { color: var(--text); }
.btc-range-tab.active {
    background: var(--btc-orange);
    color:      #fff;
    box-shadow: 0 2px 8px rgba(247,147,26,.4);
}
.btc-indicator-toggles {
    display:     flex;
    gap:         14px;
    align-items: center;
}
.btc-toggle {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   .82rem;
    color:       var(--text-muted);
    cursor:      pointer;
    user-select: none;
}
.btc-toggle input[type=checkbox] {
    accent-color: var(--btc-orange);
    width:  14px;
    height: 14px;
    cursor: pointer;
}
.btc-toggle span { transition: color .15s; }
.btc-toggle:hover span { color: var(--text); }

/* ── LOADING ────────────────────────────────────────────────────────────── */
.btc-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             14px;
    padding:         60px 20px;
    color:           var(--text-muted);
    font-size:       .9rem;
}
.btc-spinner {
    width:        28px;
    height:       28px;
    border:       3px solid var(--border);
    border-top:   3px solid var(--btc-orange);
    border-radius: 50%;
    animation:    btc-spin .7s linear infinite;
}

/* ── ERROR ──────────────────────────────────────────────────────────────── */
.btc-error {
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           14px;
    padding:       30px 20px;
    color:         var(--btc-red);
    font-size:     .9rem;
}
.btc-error button {
    background:    var(--btc-orange);
    border:        none;
    border-radius: 6px;
    color:         #fff;
    cursor:        pointer;
    font-size:     .82rem;
    font-weight:   600;
    padding:       5px 14px;
}

/* ── CHARTS GRID ────────────────────────────────────────────────────────── */
.btc-charts-grid {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg);
}
.btc-chart-panel {
    background:    var(--bg2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       16px;
}
.btc-chart-label {
    font-size:      .75rem;
    font-weight:    700;
    color:          var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom:  12px;
}
.btc-hint {
    font-weight: 400;
    font-size:   .72rem;
    color:       var(--text-muted);
    margin-left: 6px;
}
.btc-chart-main canvas  { height: 340px !important; }
.btc-chart-rsi  canvas  { height: 180px !important; }
.btc-chart-macd canvas  { height: 180px !important; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .btc-header { flex-direction: column; align-items: flex-start; }
    .btc-header-right { width: 100%; justify-content: space-between; }
    .btc-controls { flex-direction: column; align-items: flex-start; }
    .btc-chart-main canvas { height: 240px !important; }
}


.indicator {
    cursor:pointer;
    padding:8px;
    border-radius:6px;
    transition:all 0.2s ease;
}

.indicator:hover {
    background:#f5f5f5;
    transform:scale(1.02);
}

#btc-modal {
    display:none;
    position:fixed;
    top:20%;
    left:50%;
    transform:translateX(-50%);
    background:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    z-index:9999;
    max-width:300px;
}

#btc-modal-close {
    float:right;
    cursor:pointer;
    font-weight:bold;
}