/* === Grid layout === */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 20px; }
.grid-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .grid-2col { grid-template-columns: 1fr; } }

/* === Signal box === */
.signal-box {
    text-align: center;
    padding: 22px;
    border-radius: 10px;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 12px;
    transition: all 0.5s;
}
.STRONG_BUY  { background: linear-gradient(135deg, #0d4f1c, #0a3a14); color: #00e676; border: 2px solid #00e676; box-shadow: 0 0 25px rgba(0, 230, 118, 0.15); }
.BUY         { background: linear-gradient(135deg, #1a3a1a, #122812); color: #69f0ae; border: 2px solid #69f0ae; box-shadow: 0 0 15px rgba(105, 240, 174, 0.1); }
.TREND_BUY   { background: linear-gradient(135deg, #1a2e1a, #122012); color: #a5d6a7; border: 2px solid #a5d6a7; }
.WEAK_BUY    { background: linear-gradient(135deg, #1a2a1a, #121e12); color: #c8e6c9; border: 2px solid #c8e6c9; }
.NEUTRAL     { background: linear-gradient(135deg, #1c1c24, #14141c); color: #6e7a8a; border: 2px solid #2a3444; }
.WEAK_SELL   { background: linear-gradient(135deg, #2a1a1a, #201212); color: #ffcc80; border: 2px solid #ffcc80; }
.TREND_SELL  { background: linear-gradient(135deg, #3a1a1a, #2c1010); color: #ffa726; border: 2px solid #ffa726; }
.SELL        { background: linear-gradient(135deg, #4a1a1a, #380e0e); color: #ff7043; border: 2px solid #ff7043; box-shadow: 0 0 15px rgba(255, 112, 67, 0.1); }
.STRONG_SELL { background: linear-gradient(135deg, #5a0d0d, #3e0808); color: #ff1744; border: 2px solid #ff1744; box-shadow: 0 0 25px rgba(255, 23, 68, 0.15); }

/* === Score bars === */
.score-label { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px; }
.bar-bg { background: #151c26; border-radius: 6px; height: 10px; margin-bottom: 12px; overflow: hidden; }
.bar-fill { height: 10px; border-radius: 6px; transition: width 0.5s ease; }
.bar-buy  { background: linear-gradient(90deg, #00e676, #69f0ae); }
.bar-sell { background: linear-gradient(90deg, #ff1744, #ff7043); }

/* === Metrics === */
.metric { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #151c26; font-size: 13px; }
.metric:last-child { border-bottom: none; }
.metric-name { color: #6e7a8a; }
.metric-value { color: #c9d1d9; font-weight: bold; }

/* === Section dividers === */
.section-divider { border-top: 1px solid #1e2736; margin: 8px 0; padding-top: 8px; }
.section-divider .metric-name { color: #f7931a; font-weight: bold; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }

/* === Signal / warning items === */
.signal-item {
    background: linear-gradient(90deg, rgba(0, 230, 118, 0.08), transparent);
    border-left: 3px solid #00e676;
    padding: 7px 12px;
    margin-bottom: 6px;
    font-size: 12px;
    border-radius: 0 6px 6px 0;
    transition: transform 0.2s;
}
.signal-item:hover { transform: translateX(4px); }
.warning-item {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.08), transparent);
    border-left: 3px solid #ffc107;
    padding: 7px 12px;
    margin-bottom: 6px;
    font-size: 12px;
    border-radius: 0 6px 6px 0;
}

/* === Price display === */
.price-big {
    font-size: 36px;
    font-weight: bold;
    color: #f7931a;
    text-align: center;
    margin: 10px 0;
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.3);
}

/* === Status bar === */
.status-bar { text-align: center; color: #6e7a8a; font-size: 11px; margin-top: 10px; }
#last-update { color: #00e676; }

/* === Chart === */
#tv-chart-container { width: 100%; height: 550px; }
.chart-legend { display: flex; gap: 20px; justify-content: center; margin-top: 8px; font-size: 12px; color: #6e7a8a; flex-wrap: wrap; }
.chart-legend span { display: flex; align-items: center; gap: 4px; }
.legend-line { width: 20px; height: 2px; display: inline-block; }

/* === Responsive === */
@media (max-width: 768px) {
    #tv-chart-container { height: 380px; }
    .price-big { font-size: 28px; }
}

/* === Light mode === */
body.light .metric { border-bottom-color: #e8e8e8; }
body.light .metric-name { color: #555; font-weight: bold; }
body.light .metric-value { color: #1a1a2e; }
body.light .section-divider { border-top-color: #d0d0d0; }
body.light .section-divider .metric-name { color: #c77a0a; font-weight: bold; }
body.light .bar-bg { background: #e0e0e0; }
body.light .section-divider { border-top-color: #d0d0d0; }
body.light .status-bar { color: #888; }
body.light .signal-item { background: linear-gradient(90deg, rgba(0, 180, 90, 0.1), transparent); }
body.light .warning-item { background: linear-gradient(90deg, rgba(255, 170, 0, 0.1), transparent); }
body.light .chart-legend { color: #888; }
body.light #chart-ohlc { color: #888 !important; }

/* Signal boxes */
body.light .STRONG_BUY  { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #1b5e20; border-color: #43a047; box-shadow: 0 0 15px rgba(67, 160, 71, 0.15); }
body.light .BUY         { background: linear-gradient(135deg, #e8f5e9, #dcedc8); color: #2e7d32; border-color: #66bb6a; box-shadow: 0 0 10px rgba(102, 187, 106, 0.1); }
body.light .TREND_BUY   { background: linear-gradient(135deg, #f1f8e9, #e8f5e9); color: #558b2f; border-color: #9ccc65; }
body.light .WEAK_BUY    { background: linear-gradient(135deg, #f9fbe7, #f1f8e9); color: #689f38; border-color: #aed581; }
body.light .NEUTRAL     { background: linear-gradient(135deg, #f5f5f5, #eeeeee); color: #616161; border-color: #bdbdbd; }
body.light .WEAK_SELL   { background: linear-gradient(135deg, #fff8e1, #fff3e0); color: #e65100; border-color: #ffb74d; }
body.light .TREND_SELL  { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #e65100; border-color: #ffa726; }
body.light .SELL        { background: linear-gradient(135deg, #fbe9e7, #ffccbc); color: #bf360c; border-color: #ff7043; box-shadow: 0 0 10px rgba(255, 112, 67, 0.1); }
body.light .STRONG_SELL { background: linear-gradient(135deg, #ffebee, #ffcdd2); color: #b71c1c; border-color: #ef5350; box-shadow: 0 0 15px rgba(239, 83, 80, 0.15); }

/* Score bars */
body.light .bar-buy  { background: linear-gradient(90deg, #43a047, #66bb6a); }
body.light .bar-sell { background: linear-gradient(90deg, #e53935, #ff7043); }