/* ═══════════════════════════════════════════════════════
   DV MOTION — APP · app.dvmotion.com
   Design v2 — épuré, lisible par tous, actif mis en vedette
═══════════════════════════════════════════════════════ */

:root {
  --bg-void:    #000000;
  --bg-space:   #05050f;
  --bg-card:    #0b0b1a;
  --bg-elev:    #12122a;
  --bg-elev2:   #171734;
  --border:     rgba(255,255,255,0.06);
  --border-2:   rgba(255,255,255,0.11);
  --accent-red: #E01414;
  --accent-red2:#CC1111;
  --glow-red:   rgba(224,20,20,0.30);
  --bull:       #12D18E;
  --bull-bg:    rgba(18,209,142,0.10);
  --bear:       #F0384B;
  --bear-bg:    rgba(240,56,75,0.10);
  --neutral:    #F5B33C;
  --neutral-bg: rgba(245,179,60,0.10);
  --text-1:     #FFFFFF;
  --text-2:     #9A9AB4;
  --text-3:     #5A5A76;
  --font-d:     'Orbitron', monospace;
  --font-b:     'Exo 2', sans-serif;
  --nav-h:      66px;
  --r-lg:       22px;
  --r-md:       16px;
  --r-sm:       12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  background: var(--bg-void);
  color: var(--text-1);
  font-family: var(--font-b);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; max-width: 100%; overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
#app { max-width: 100%; overflow-x: hidden; }

.bull    { color: var(--bull); }
.bear    { color: var(--bear); }
.neutral { color: var(--neutral); }
.hidden  { display: none !important; }

/* ═══════════════ LOGIN / NFC ═══════════════ */
#login-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 26px; text-align: center;
  background:
    radial-gradient(900px 500px at 50% -5%, rgba(224,20,20,0.12), transparent 62%),
    var(--bg-void);
}
.login-logo { font-family: var(--font-d); font-size: 1.7rem; font-weight: 800; letter-spacing: 0.01em; }
.login-logo .dv { color: var(--accent-red); }
.login-logo .mo { color: var(--text-1); font-weight: 300; }
.login-sub {
  font-family: var(--font-d); font-size: 0.5rem; font-weight: 500;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-3);
  margin: 8px 0 46px;
}
.nfc-ring {
  width: 138px; height: 138px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 30px;
  border: 1px solid var(--border-2);
  background: radial-gradient(circle at 50% 40%, rgba(224,20,20,0.14), transparent 70%);
  position: relative; cursor: pointer; transition: transform 0.25s;
}
.nfc-ring:active { transform: scale(0.95); }
.nfc-ring::before, .nfc-ring::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--accent-red); opacity: 0;
  animation: nfcpulse 2.6s ease-out infinite;
}
.nfc-ring::after { animation-delay: 1.3s; }
@keyframes nfcpulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.55); opacity: 0; } }
.nfc-icon { font-size: 2.7rem; }
.login-title { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.login-text { font-size: 0.95rem; font-weight: 300; line-height: 1.65; color: var(--text-2); max-width: 340px; margin: 0 auto 32px; }
.code-field { width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.code-input {
  width: 100%; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border-2);
  color: var(--text-1); font-family: var(--font-d); font-size: 0.95rem; letter-spacing: 0.28em;
  text-align: center; text-transform: uppercase; border-radius: var(--r-sm); transition: border-color 0.2s;
}
.code-input:focus { outline: none; border-color: var(--accent-red); }
.code-input::placeholder { color: var(--text-3); letter-spacing: 0.15em; }
.btn-primary {
  width: 100%; padding: 16px; background: var(--accent-red); color: #fff;
  font-family: var(--font-d); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; border-radius: var(--r-sm); transition: background 0.2s, transform 0.1s;
}
.btn-primary:hover { background: #f01a1a; }
.btn-primary:active { transform: scale(0.98); }
.login-hint { margin-top: 24px; font-size: 0.74rem; color: var(--text-3); }
.login-hint code { font-family: var(--font-d); color: var(--neutral); background: var(--neutral-bg); padding: 2px 8px; border-radius: 5px; }
.login-error { color: var(--bear); font-size: 0.8rem; min-height: 18px; }

/* ═══════════════ APP SHELL ═══════════════ */
#app { display: none; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
#app.ready { display: block; }

/* Ticker tape live */
.app-ticker { background: var(--bg-void); border-bottom: 1px solid var(--border); min-height: 40px; }
.app-ticker .tradingview-widget-container { width: 100%; }

/* Topbar */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(5,5,15,0.9); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.topbar-main { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 10px; }
.tb-logo { font-family: var(--font-d); font-size: 1rem; font-weight: 800; flex-shrink: 0; }
.tb-logo .dv { color: var(--accent-red); }
.tb-logo .mo { color: var(--text-1); font-weight: 300; }
.tb-right { display: flex; align-items: center; gap: 14px; }
.tb-date { font-family: var(--font-d); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); text-align: right; line-height: 1.5; white-space: nowrap; }
.tb-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border-2); font-size: 0.9rem; }

/* Rates strip — slim, discret */
.rates-strip { display: flex; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--border); }
.rates-strip::-webkit-scrollbar { display: none; }
.rate-item { flex: 1; min-width: 104px; padding: 7px 16px; display: flex; align-items: baseline; gap: 8px; border-right: 1px solid var(--border); }
.rate-label { font-family: var(--font-d); font-size: 0.44rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.rate-val { font-family: var(--font-d); font-size: 0.72rem; font-weight: 600; margin-left: auto; }
.rate-chg { font-size: 0.62rem; font-weight: 600; }

/* ═══════════════ COIN SELECTOR ═══════════════ */
.asset-scroller { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 18px 16px 8px; -webkit-overflow-scrolling: touch; }
.asset-scroller::-webkit-scrollbar { display: none; }
.coin {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 76px; padding: 6px 2px 4px; border-radius: var(--r-md);
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1); position: relative;
}
.coin-badge {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.35rem; background: var(--bg-elev); border: 2px solid var(--border-2);
  position: relative; transition: all 0.22s;
}
.coin-badge.bull    { border-color: rgba(18,209,142,0.55); }
.coin-badge.bear    { border-color: rgba(240,56,75,0.55); }
.coin-badge.neutral { border-color: rgba(245,179,60,0.55); }
.coin-dot {
  position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--bg-void); display: grid; place-items: center; font-size: 0.5rem; color: #000; font-weight: 800;
}
.coin-dot.bull { background: var(--bull); }
.coin-dot.bear { background: var(--bear); }
.coin-dot.neutral { background: var(--neutral); }
.coin-name { font-family: var(--font-d); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); }
.coin.active { transform: translateY(-2px) scale(1.06); }
.coin.active .coin-badge {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 4px var(--glow-red), 0 8px 22px rgba(224,20,20,0.28);
  background: var(--bg-elev2);
}
.coin.active .coin-name { color: var(--text-1); }

/* ═══════════════ VIEWS ═══════════════ */
.view { padding: 8px 18px 30px; max-width: 1120px; margin: 0 auto; }
.view.hidden { display: none; }

.eyebrow { font-family: var(--font-d); font-size: 0.46rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-red); margin: 26px 4px 12px; }
.eyebrow:first-child { margin-top: 12px; }

.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; }
.card + .card { margin-top: 14px; }

/* ── HERO : actif en vedette ── */
.focus-hero {
  border-radius: 26px; padding: 24px 22px 22px; position: relative; overflow: hidden;
  border: 1px solid var(--border-2);
  background:
    radial-gradient(420px 220px at 50% 0%, rgba(224,20,20,0.12), transparent 62%),
    linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-card) 60%);
}
.fh-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.fh-emoji {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 1.7rem; background: var(--bg-void); border: 1px solid var(--border-2);
}
.fh-titles { flex: 1; min-width: 0; }
.fh-name { font-family: var(--font-d); font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.fh-cat  { font-size: 0.78rem; color: var(--text-2); margin-top: 3px; }
.fh-price { text-align: right; flex-shrink: 0; }
.fh-price-v { font-family: var(--font-d); font-size: 0.95rem; font-weight: 600; }
.fh-price-c { font-size: 0.8rem; font-weight: 700; margin-top: 2px; }

/* Jauge demi-cercle */
.gauge { position: relative; width: 100%; max-width: 300px; margin: 10px auto 4px; }
.gauge-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gz { fill: none; stroke-width: 13; stroke-linecap: round; }
.gz-bear { stroke: var(--bear); }
.gz-neu  { stroke: var(--neutral); }
.gz-bull { stroke: var(--bull); }
.gz-track { stroke: rgba(255,255,255,0.05); stroke-width: 13; }
.gauge-needle-line { stroke-width: 3.4; stroke-linecap: round; }
.gauge-needle-line.bull { stroke: var(--bull); }
.gauge-needle-line.bear { stroke: var(--bear); }
.gauge-needle-line.neutral { stroke: var(--neutral); }
.gauge-hub { fill: #fff; }
.gauge-center { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; pointer-events: none; }
.gauge-word { font-family: var(--font-d); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.gauge-score { font-family: var(--font-d); font-size: 0.66rem; font-weight: 500; color: var(--text-2); margin-top: 5px; }
.gauge-score b { color: var(--text-1); font-weight: 700; }
.gauge-ends { display: flex; justify-content: space-between; font-family: var(--font-d); font-size: 0.44rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: -6px 6px 0; }

/* En clair */
.plain {
  margin-top: 16px; padding: 15px 17px; border-radius: var(--r-md); font-size: 0.95rem; line-height: 1.55;
  color: var(--text-1); background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  display: flex; gap: 11px;
}
.plain-ic { font-size: 1.05rem; flex-shrink: 0; opacity: 0.9; }
.plain b { font-family: var(--font-d); font-size: 0.82em; }

/* 3 mini-stats */
.qstats { display: flex; gap: 8px; margin-top: 14px; }
.qstat { flex: 1; text-align: center; padding: 12px 6px; border-radius: var(--r-sm); background: var(--bg-void); border: 1px solid var(--border); }
.qstat-k { font-family: var(--font-d); font-size: 0.42rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.qstat-v { font-family: var(--font-d); font-size: 0.9rem; font-weight: 700; }
.qstat-s { font-size: 0.6rem; font-weight: 600; margin-top: 2px; }

/* Bouton détail / lien */
.detail-btn {
  width: 100%; margin-top: 14px; padding: 14px; border-radius: var(--r-md);
  background: var(--bg-void); border: 1px solid var(--border-2); color: var(--text-1);
  font-family: var(--font-d); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.detail-btn:hover { border-color: var(--accent-red); background: rgba(224,20,20,0.06); }

/* Accordéon "Pourquoi ?" */
.accordion { margin-top: 12px; border-radius: var(--r-md); border: 1px solid var(--border); overflow: hidden; }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-family: var(--font-d); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-1); background: var(--bg-void); }
.acc-head .chev { transition: transform 0.25s; color: var(--text-3); }
.accordion.open .acc-head .chev { transform: rotate(180deg); }
.acc-body { display: none; padding: 4px 16px 16px; }
.accordion.open .acc-body { display: block; }
.why-row { display: flex; gap: 10px; padding: 9px 0; font-size: 0.86rem; line-height: 1.45; color: var(--text-2); }
.why-row .wr-ic { flex-shrink: 0; font-size: 0.9rem; }
.why-row.pos .wr-ic { color: var(--bull); }
.why-row.neg .wr-ic { color: var(--bear); }

/* ── Marché en un coup d'œil ── */
.mkt-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--border); cursor: pointer; transition: padding-left 0.15s; }
.mkt-row:last-child { border-bottom: none; }
.mkt-row:hover { padding-left: 5px; }
.mkt-row.active { padding-left: 5px; }
.mkt-emoji { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; background: var(--bg-void); border: 1px solid var(--border); flex-shrink: 0; }
.mkt-info { flex: 1; min-width: 0; }
.mkt-name { font-family: var(--font-d); font-size: 0.62rem; font-weight: 600; }
.mkt-price { font-size: 0.72rem; color: var(--text-2); }
.mkt-bar { width: 44px; height: 5px; border-radius: 100px; background: var(--border); overflow: hidden; flex-shrink: 0; }
.mkt-bar-fill { height: 100%; border-radius: 100px; }
.mkt-bar-fill.bull { background: var(--bull); } .mkt-bar-fill.bear { background: var(--bear); } .mkt-bar-fill.neutral { background: var(--neutral); }
.mkt-sig { text-align: right; flex-shrink: 0; min-width: 30px; }
.mkt-score { font-family: var(--font-d); font-size: 0.82rem; font-weight: 700; line-height: 1; }
.mkt-word { font-size: 0.56rem; font-weight: 600; margin-top: 2px; }

/* ── Focus macro (slim) ── */
.macro-card { display: flex; gap: 13px; }
.macro-ic { font-size: 1.5rem; flex-shrink: 0; }
.macro-body { flex: 1; }
.macro-title { font-family: var(--font-d); font-size: 0.72rem; font-weight: 700; margin-bottom: 6px; }
.macro-text { font-size: 0.86rem; line-height: 1.55; color: var(--text-2); }
.macro-next { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 100px; font-size: 0.74rem; font-weight: 600; background: var(--neutral-bg); color: var(--neutral); }

/* ═══════════════ FONDA / TECHNIQUE ═══════════════ */
.detail-head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.detail-head .fh-emoji { width: 46px; height: 46px; font-size: 1.4rem; border-radius: 13px; }
.detail-head .dh-name { font-family: var(--font-d); font-size: 0.95rem; font-weight: 700; }
.detail-head .dh-cat { font-size: 0.74rem; color: var(--text-2); }

.verdict-line { padding: 15px 17px; border-radius: var(--r-md); font-size: 0.9rem; line-height: 1.55; border: 1px solid var(--border); }
.verdict-line.bull { background: var(--bull-bg); border-color: rgba(18,209,142,0.25); }
.verdict-line.bear { background: var(--bear-bg); border-color: rgba(240,56,75,0.25); }
.verdict-line.neutral { background: var(--neutral-bg); border-color: rgba(245,179,60,0.25); }
.verdict-line strong { font-family: var(--font-d); }

.factors-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.factor-box { border-radius: var(--r-md); padding: 16px; border: 1px solid var(--border); }
.factor-box.bull { background: var(--bull-bg); border-color: rgba(18,209,142,0.2); }
.factor-box.bear { background: var(--bear-bg); border-color: rgba(240,56,75,0.2); }
.factor-head { font-family: var(--font-d); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.factor-box.bull .factor-head { color: var(--bull); }
.factor-box.bear .factor-head { color: var(--bear); }
.factor-box li { font-size: 0.84rem; line-height: 1.5; color: var(--text-2); padding-left: 16px; position: relative; margin-bottom: 9px; }
.factor-box li:last-child { margin-bottom: 0; }
.factor-box li::before { content: "›"; position: absolute; left: 2px; color: var(--text-3); }

.tf-trend { display: flex; gap: 8px; }
.tf-tf { flex: 1; text-align: center; padding: 13px 6px; border-radius: var(--r-sm); background: var(--bg-void); border: 1px solid var(--border); }
.tf-tf-k { font-family: var(--font-d); font-size: 0.46rem; letter-spacing: 0.1em; color: var(--text-3); margin-bottom: 8px; }
.tf-arrow { font-size: 1rem; }

.levels-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.lvl { text-align: center; padding: 12px 4px; border-radius: 10px; background: var(--bg-void); border: 1px solid var(--border); }
.lvl-k { font-family: var(--font-d); font-size: 0.42rem; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 5px; }
.lvl-v { font-family: var(--font-d); font-size: 0.62rem; font-weight: 600; }
.lvl.r .lvl-k { color: var(--bull); }
.lvl.s .lvl-k { color: var(--bear); }
.lvl.pp { background: var(--bg-elev); }

.ict-item { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.ict-item:last-child { border-bottom: none; padding-bottom: 0; }
.ict-tag { font-family: var(--font-d); font-size: 0.46rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; height: fit-content; flex-shrink: 0; background: rgba(224,20,20,0.12); color: var(--accent-red); border: 1px solid var(--border-2); }
.ict-body { flex: 1; }
.ict-zone { font-family: var(--font-d); font-size: 0.72rem; font-weight: 600; margin-bottom: 3px; }
.ict-note { font-size: 0.82rem; line-height: 1.45; color: var(--text-2); }

.kv-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.kv-row:last-child { border-bottom: none; }
.kv-k { color: var(--text-3); flex-shrink: 0; }
.kv-v { text-align: right; color: var(--text-1); font-weight: 500; }

.chart-wrap { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); height: 320px; background: var(--bg-space); }
.chart-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ═══════════════ NEWS ═══════════════ */
.news-item { padding: 15px 0; border-bottom: 1px solid var(--border); }
.news-item:last-child { border-bottom: none; padding-bottom: 0; }
.news-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.news-date { font-family: var(--font-d); font-size: 0.5rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-1); background: var(--bg-void); padding: 5px 9px; border-radius: 6px; flex-shrink: 0; }
.news-time { font-family: var(--font-d); font-size: 0.5rem; color: var(--neutral); }
.imp-badge { margin-left: auto; font-size: 0.58rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em; }
.imp-badge.high { background: var(--bear-bg); color: var(--bear); }
.imp-badge.medium { background: var(--neutral-bg); color: var(--neutral); }
.news-event { font-size: 0.9rem; font-weight: 500; line-height: 1.4; margin-bottom: 5px; }
.news-meta { font-size: 0.8rem; color: var(--text-2); line-height: 1.4; }
.news-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.tag { font-family: var(--font-d); font-size: 0.48rem; font-weight: 600; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 5px; background: var(--bg-void); color: var(--text-2); border: 1px solid var(--border); }
.impact-pill { font-size: 0.72rem; font-weight: 700; }
.impact-pill.bearish { color: var(--bear); }
.impact-pill.bullish { color: var(--bull); }

/* ═══════════════ CONTENU ═══════════════ */
.content-card { display: flex; gap: 15px; }
.content-icon { width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.45rem; background: var(--bg-void); border: 1px solid var(--border-2); }
.content-body { flex: 1; }
.content-tag { font-family: var(--font-d); font-size: 0.44rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-red); margin-bottom: 6px; }
.content-title { font-family: var(--font-d); font-size: 0.82rem; font-weight: 700; margin-bottom: 8px; }
.content-text { font-size: 0.86rem; line-height: 1.55; color: var(--text-2); }

/* ═══════════════ NAV ═══════════════ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; background: rgba(5,5,15,0.96); backdrop-filter: blur(16px); border-top: 1px solid var(--border);
}
.nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-3); transition: color 0.15s; }
.nav-btn .nb-icon { font-size: 1.15rem; line-height: 1; }
.nav-btn .nb-label { font-family: var(--font-d); font-size: 0.42rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-btn.active { color: var(--accent-red); }
.side-nav { display: none; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (min-width: 720px) {
  .factors-grid { grid-template-columns: 1fr 1fr; }
  .coin { width: 84px; }
  .coin-badge { width: 58px; height: 58px; font-size: 1.5rem; }
}

@media (min-width: 1024px) {
  :root { --nav-h: 0px; }
  #app { padding-left: 240px; padding-bottom: 0; }
  .bottom-nav { display: none; }
  .side-nav {
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: 240px; z-index: 70;
    background: var(--bg-space); border-right: 1px solid var(--border); padding: 24px 16px;
  }
  .sn-logo { font-family: var(--font-d); font-size: 1.1rem; font-weight: 800; padding: 0 10px 6px; }
  .sn-logo .dv { color: var(--accent-red); }
  .sn-logo .mo { color: var(--text-1); font-weight: 300; }
  .sn-sub { font-family: var(--font-d); font-size: 0.42rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); padding: 0 10px 28px; }
  .sn-btn { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: var(--r-sm); color: var(--text-2); margin-bottom: 5px; font-family: var(--font-d); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.15s; }
  .sn-btn .sn-icon { font-size: 1.1rem; }
  .sn-btn:hover { background: var(--bg-card); color: var(--text-1); }
  .sn-btn.active { background: rgba(224,20,20,0.1); color: var(--accent-red); border: 1px solid var(--border-2); }
  .sn-foot { margin-top: auto; padding: 15px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 11px; }
  .sn-foot .tb-avatar { width: 38px; height: 38px; }
  .sn-foot-txt { font-size: 0.72rem; color: var(--text-2); line-height: 1.4; }
  .sn-foot-txt strong { color: var(--text-1); font-family: var(--font-d); font-size: 0.62rem; }

  .topbar-main .tb-logo { display: none; }
  .view { padding: 14px 36px 44px; }
  .dash-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }
  .dash-grid .eyebrow:first-child { margin-top: 0; }
  .tech-grid, .fonda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .col-span-2 { grid-column: 1 / -1; }
  .chart-wrap { height: 460px; }
  .gauge { max-width: 320px; }
}

@media (min-width: 1280px) { .view { max-width: 1200px; } }