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

:root {
  --bg:#08080d; --panel:#10101a; --card:#161622;
  --gold:#d4a843; --gold-dim:#8b7355; --border:#1e1e30;
  --text:#e8e8ec; --text-dim:#6a6a7a;
  --green:#22c55e; --red:#ef4444; --yellow:#eab308;
}

html,body{height:100%;overflow:hidden;font-family:'Inter','Noto Sans SC',sans-serif;background:var(--bg);color:var(--text)}

/* ─── Header ─── */
.header{display:flex;align-items:center;gap:16px;padding:10px 24px;background:linear-gradient(135deg,#0c0c14,#12121f);border-bottom:1px solid var(--border);position:relative}
.header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.header-logo{width:42px;height:42px;border-radius:8px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(212,168,67,.15))}
.header-title{font-size:20px;font-weight:700;letter-spacing:1px;background:linear-gradient(135deg,#f0d78c,#d4a843,#a67c2e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-sub{font-size:11px;color:var(--text-dim);font-weight:300;letter-spacing:2px;margin-top:1px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:20px}
.header-clock{font-size:13px;color:var(--gold-dim);font-weight:500;font-variant-numeric:tabular-nums}
.header-live{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--green)}
.header-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── Ticker ─── */
.ticker{height:46px;border-bottom:1px solid var(--border);background:var(--panel);overflow:hidden;position:relative}
.ticker-track{display:flex;align-items:center;height:100%;gap:0;animation:tickScroll 30s linear infinite;white-space:nowrap}
.ticker-track:hover{animation-play-state:paused}
.tick-item{display:flex;align-items:center;gap:10px;padding:0 24px;flex-shrink:0;border-right:1px solid var(--border);height:100%}
.tick-name{font-size:11px;color:var(--text-dim);font-weight:500;letter-spacing:.5px}
.tick-price{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.tick-change{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums}
.tick-up{color:var(--green)}.tick-down{color:var(--red)}
@keyframes tickScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ─── Main Grid ─── */
.main{display:grid;grid-template-columns:1fr 320px 300px;gap:0;height:calc(100vh - 56px - 46px - 220px - 42px);min-height:320px}
.col{border-right:1px solid var(--border);position:relative;overflow:hidden}
.col:last-child{border-right:none}
.col-label{position:absolute;top:0;left:0;right:0;z-index:5;padding:8px 14px;font-size:11px;font-weight:600;letter-spacing:1.5px;color:var(--gold);background:linear-gradient(180deg,rgba(16,16,26,.95) 0%,rgba(16,16,26,.7) 70%,transparent);pointer-events:none;display:flex;align-items:center;gap:6px}
.col-label .d{width:5px;height:5px;border-radius:50%;background:var(--gold)}

.col-wrapper { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; }
.col-wrapper .col { border-right: none; }
.col-top { border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.col-bottom { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hero-panel { padding-bottom: 16px; overflow: visible; height: auto; }

/* ─── Mini Charts ─── */
.mini-grid{display:grid;grid-template-rows:repeat(4,1fr);height:100%;padding-top:28px}
.mini-item{border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.mini-item:last-child{border-bottom:none}
.mini-label{position:absolute;top:4px;left:10px;font-size:10px;color:var(--gold-dim);z-index:3;letter-spacing:.5px;font-weight:500;pointer-events:none}
.mini-chart{width:100%;height:100%}

/* ─── Technical Analysis Panel ─── */
.ta-panel{padding:36px 12px 8px;height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.ta-panel::-webkit-scrollbar{width:4px}
.ta-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.ta-gauge-wrap{text-align:center;padding:8px 0;flex-shrink:0}
.ta-verdict{font-size:16px;font-weight:700;letter-spacing:1px;margin-top:4px}
.ta-sections{flex:1;overflow-y:auto;min-height:0}
.ta-section{margin-bottom:6px;flex-shrink:0}
.ta-section-title{font-size:10px;font-weight:600;color:var(--gold);letter-spacing:1.5px;padding:4px 6px;border-bottom:1px solid var(--border);text-transform:uppercase}

/* ─── TA Hero (New) ─── */
.ta-hero { display: flex; flex-direction: column; align-items: center; padding: 4px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.ta-hero-price { text-align: center; margin-bottom: 18px; }
.hero-val { font-size: 38px; font-weight: 700; font-variant-numeric: tabular-nums; display: block; color: var(--text); line-height: 1.1; letter-spacing: -0.5px; }
.hero-pct { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 4px; display: inline-block; margin-top: 6px; }
.ta-hero-bands { display: flex; width: 100%; justify-content: space-between; gap: 6px; }
.band-item { flex: 1; text-align: center; background: rgba(30, 30, 48, 0.4); padding: 8px 2px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); }
.band-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; padding: 2px 4px; border-radius: 3px; display: inline-block; }
.band-val { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.ta-rows{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;padding:4px 0}
.ta-row{display:flex;justify-content:space-between;align-items:center;padding:2px 0;font-size:11px;border-bottom:1px solid rgba(30,30,48,.3)}
.ta-row .name{color:var(--text-dim)}
.ta-row .val{font-variant-numeric:tabular-nums;font-weight:500;margin-left:auto;margin-right:6px}
.ta-row .signal{font-size:10px;font-weight:600;padding:1px 4px;border-radius:3px}
.sig-buy{color:#22c55e;background:rgba(34,197,94,.1)}
.sig-sell{color:#ef4444;background:rgba(239,68,68,.1)}
.sig-neutral{color:#eab308;background:rgba(234,179,8,.1)}
.ta-summary{display:flex;justify-content:space-around;padding:8px 4px;border-top:1px solid var(--border);font-size:11px;font-weight:600;flex-shrink:0}
.ta-summary .s-item{text-align:center}
.ta-summary .s-label{font-size:9px;color:var(--text-dim);letter-spacing:1px;margin-bottom:2px}

/* ─── Sentiment & Volume Panel ─── */
.vix-wrap, .vol-wrap { text-align: center; padding: 8px 0 12px; }
.vix-val { font-size: 28px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.vix-bar-bg { width: 80%; margin: 0 auto 8px; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; position: relative; overflow: hidden; }
.vix-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #22c55e, #eab308, #ef4444); border-radius: 3px; transition: width 0.3s; }
.vix-labels { display: flex; justify-content: space-between; width: 80%; margin: 0 auto; font-size: 10px; color: var(--text-dim); }
.vol-val { font-size: 28px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.vol-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

/* ─── Bottom: Calendar ─── */
.bottom{height:220px;border-top:1px solid var(--border);background:var(--panel);position:relative}
.bottom-panel{position:relative;overflow:hidden;height:100%}
.bottom-label{position:absolute;top:0;left:0;right:0;z-index:5;padding:8px 14px;font-size:11px;font-weight:600;letter-spacing:1.5px;color:var(--gold);background:linear-gradient(180deg,rgba(16,16,26,.95) 0%,transparent);pointer-events:none;display:flex;align-items:center;gap:6px}
.bottom-label .d{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.calendar-wrap{padding-top:32px;height:100%;overflow-y:auto}
.calendar-wrap::-webkit-scrollbar{width:4px}
.calendar-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.calendar-table{width:100%;border-collapse:collapse;font-size:12px}
.calendar-table th{position:sticky;top:0;background:var(--panel);color:var(--gold-dim);font-size:10px;font-weight:600;letter-spacing:1px;text-align:left;padding:6px 10px;border-bottom:1px solid var(--border)}
.calendar-table td{padding:5px 10px;border-bottom:1px solid rgba(30,30,48,.4);color:var(--text-dim)}
.calendar-table tr:hover td{background:rgba(212,168,67,.03);color:var(--text)}
.impact-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.impact-high{background:var(--red)}.impact-medium{background:var(--yellow)}.impact-low{background:#6a6a7a}
.flag{font-size:14px;margin-right:4px}

/* ─── News Ticker ─── */
.news-ticker{height:42px;border-top:1px solid var(--border);background:linear-gradient(90deg,#0d0d18,#111120);position:relative;overflow:hidden;display:flex;align-items:center}
.news-ticker .news-label{flex-shrink:0;padding:0 18px;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--bg);background:linear-gradient(135deg,#f0d78c,#d4a843,#a67c2e);height:100%;display:flex;align-items:center;gap:6px;z-index:3;text-transform:uppercase;position:relative}
.news-ticker .news-label::after{content:'';position:absolute;right:-12px;top:0;width:24px;height:100%;background:linear-gradient(90deg,#a67c2e,transparent);z-index:2}
.news-track-wrap{flex:1;overflow:hidden;height:100%;display:flex;align-items:center;position:relative;mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.news-track{display:flex;white-space:nowrap;animation:marquee var(--dur,80s) linear infinite;will-change:transform}
.news-track:hover{animation-play-state:paused}
.news-item{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 32px;font-size:13px;color:var(--text-dim);cursor:default;transition:color .2s}
.news-item:hover{color:var(--text)}
.news-item .sep{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6;flex-shrink:0}
.news-item .headline{letter-spacing:.3px}
.news-item .src{font-size:10px;color:var(--gold-dim);margin-left:4px;opacity:.7}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ������ Mobile Responsiveness ������ */

/* ─── Mobile Responsiveness ─── */

/* ─── Mobile Responsiveness ─── */
@media (max-width: 1024px) {
  html, body { height: auto; overflow-y: auto; overflow-x: hidden; }
  body { display: flex; flex-direction: column; }
  .main { display: contents; }
  
  .header { order: 1; flex-wrap: wrap; padding: 10px 16px; }
  .ticker { order: 2; }
  .col:first-child { order: 3; height: 450px; flex: none; border-right: none; border-bottom: 1px solid var(--border); }
  .bottom { order: 4; height: auto; min-height: 300px; border-bottom: 1px solid var(--border); }
  .col-wrapper { order: 5; border-right: none; border-bottom: 1px solid var(--border); }
  .col:nth-child(3) { order: 6; height: 600px; border-right: none; }
  .news-ticker { order: 7; }

  .col { height: auto; min-height: auto; }
  .col-bottom { height: auto; }
  .ta-panel { height: auto; overflow: visible; padding-top: 40px; }
  .mini-grid { height: 100%; }
  .calendar-wrap { height: auto; overflow-y: visible; padding-bottom: 20px; }
  .header-right { width: 100%; justify-content: space-between; margin-top: 8px; }
  .ticker-track { animation-duration: 20s; }
}

/* ������ Timeframe Selector ������ */
.chart-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.chart-header .title { display: flex; align-items: center; gap: 6px; }
.timeframes { display: flex; gap: 4px; pointer-events: auto; }
.tf-btn { background: rgba(30, 30, 48, 0.6); border: 1px solid var(--border); color: var(--text-dim); padding: 3px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; transition: 0.2s; font-weight: 600; outline: none; font-family: inherit; }
.tf-btn:hover { background: rgba(212, 168, 67, 0.1); color: var(--gold); border-color: rgba(212, 168, 67, 0.3); }
.tf-btn.active { background: rgba(212, 168, 67, 0.2); color: var(--gold); border-color: rgba(212, 168, 67, 0.6); }