/* H2 Softbotics — Charts Live common styles (v4, 2025-10-03) */
:root{
  --bg:#0b0f19; --fg:#d7e1ff; --muted:#9aa4c2;
  --neon:#67e8f9; --neon2:#a78bfa; --accent:#22d3ee;
  --border:rgba(255,255,255,.15); --glass:rgba(255,255,255,.06);
  --radius:14px; --maxw:1180px; --space:clamp(16px,2.5vw,28px);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --tile-bg: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  --tile-inset: inset 0 1px 0 rgba(255,255,255,.04);
  --header-h:72px; --header-clear:22px;
}
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; color:var(--fg);
  background: radial-gradient(1200px 700px at 70% -10%, #0f1630 0%, #0b0f19 50%, #070a12 100%);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  overflow-x:hidden;
}
a{ color:var(--accent); text-decoration:none } a:hover{ text-decoration:underline }
.container{ width:min(100% - 2*var(--space), var(--maxw)); margin-inline:auto }
header{ position:fixed; inset:0 0 auto 0; z-index:100; backdrop-filter: blur(8px);
  background:linear-gradient(to bottom, rgba(8,12,22,.85), rgba(8,12,22,.35)); border-bottom:1px solid var(--border); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--fg) } .brand span{ font-weight:700 }
#header-spacer{ height:var(--header-h) } @media (min-width:1000px){ #header-spacer{ height:calc(var(--header-h) + var(--header-clear)) } }
.menu-toggle{ display:none; align-items:center; gap:.5rem; padding:.5rem .9rem; border:1px solid var(--border); border-radius:999px; }
@media (max-width:900px){ .menu-toggle{ display:inline-flex } header nav{ display:none } }
.mobile-menu{ display:none; position:absolute; right:0; top:calc(100% + 8px); width:max-content; max-width:95vw; border:1px solid var(--border);
  border-radius:12px; background:rgba(8,12,22,.95); padding:10px 12px; box-shadow:var(--shadow); }
.mobile-menu.open{ display:block } .mobile-menu a{ display:block; padding:.6rem .8rem; color:var(--accent) }
.card{ background:var(--tile-bg); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(14px,1.6vw,18px);
  backdrop-filter: blur(6px); box-shadow:var(--tile-inset); position:relative; }
section{ padding:clamp(30px,4.8vw,64px) 0 }
footer{ padding:40px 0; color:var(--muted); border-top:1px solid var(--border) } footer a{ color:var(--accent) }
footer .disclaimer{ text-align:center; font-size:.85rem; margin-top:8px } footer .copyright{ text-align:left }
.search-row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin:.75rem 0 }
.search-row input[type=search]{ width:min(560px,100%); padding:.65rem .9rem; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:var(--fg) }
.badge{ border:1px solid var(--border); border-radius:999px; padding:.25rem .55rem; background:rgba(255,255,255,.06); color:var(--muted); font-size:.86rem }
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.04) }
table{ width:100%; border-collapse:collapse } th,td{ padding:.55rem .6rem; border-bottom:1px solid rgba(255,255,255,.06) }
th{ position:sticky; top:0; background:rgba(8,12,22,.85); backdrop-filter: blur(5px) } tr:hover{ background:rgba(255,255,255,.03) }
th.sortable{ cursor:pointer } .small{ font-size:.88rem; color:var(--muted) }
.status-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; box-shadow:0 0 0 2px rgba(0,0,0,.25) inset }
.status-green{ background:#10B981 } .status-red{ background:#EF4444 }
.fresh{ color:#9aa4c2; font-size:.85rem }
.grid{ display:grid; gap:clamp(14px,2.2vw,22px) } @media (min-width:780px){ .cols-2{ grid-template-columns:repeat(2,1fr) } }
.chart-card{ position:relative; border:1px solid var(--border); border-radius:14px; background:var(--tile-bg); box-shadow:var(--tile-inset); padding:10px }
.chart-title{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.4rem }
.chart-title .tf{ font-weight:700; font-size:.95rem } .chart-status{ display:flex; gap:.5rem; align-items:center }
.chart-canvas{ position:relative; width:100%; height:0; padding-bottom:56.25% } .chart-canvas > div{ position:absolute; inset:0 }
.btn{ display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.42rem .65rem; border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--fg); cursor:pointer }
.btn:hover{ border-color:var(--accent) } .btn[data-active=true]{ border-color:var(--accent); background:rgba(34,211,238,.12) }
.chart-card.fullscreen{ position:fixed; inset:0; z-index:999; border-radius:0; margin:0; background:#0b0f19; padding:10px 12px }
.chart-card.fullscreen .chart-canvas{ padding-bottom:0; height:calc(100vh - 78px) }
.indicator-menu{ position:absolute; left:10px; top:38px; z-index:3; background:rgba(8,12,22,.96); border:1px solid var(--border); border-radius:12px; padding:8px 10px; box-shadow:var(--shadow); max-height:60vh; overflow:auto; display:none }
.indicator-menu.open{ display:block } .indicator-item{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.25rem 0 }
.indicator-item .help{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--border); color:#9aa4c2; font-size:.8rem; background:rgba(255,255,255,.06) }
pre.csv{ background:rgba(0,0,0,.35); padding:.6rem .7rem; border-radius:8px; border:1px solid rgba(255,255,255,.07); overflow:auto; max-height:240px }
.share-fab{ position:fixed; left:16px; bottom:16px; width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#001014; background:linear-gradient(90deg,#67e8f9,#a78bfa); box-shadow:0 10px 30px rgba(0,0,0,.45) }
.share-fab svg{ width:24px; height:24px }