:root{
  --bg0:#06070d;
  --bg1:#090a12;
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --muted2: rgba(255,255,255,.44);
  --acc:#7c5cff;
  --acc2:#00b2ff;
  --gold:#f5d38a;
  --good:#77f3b2;
  --bad:#ff5a6e;
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);
  --r:18px;
  --r2:14px;
  --r3:22px;
  --pad:16px;
  --shadowHard: 0 26px 90px rgba(0,0,0,.58);
  --shadow: 0 18px 60px rgba(0,0,0,.44);
  --shadowSoft: 0 12px 34px rgba(0,0,0,.28);
  --ease: cubic-bezier(.2,.9,.2,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --font: ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Arial;
  --grid: 22px;
  --tap: transparent;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--txt);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 900px at 18% 8%, rgba(124,92,255,.14), transparent 55%),
    radial-gradient(980px 760px at 82% 16%, rgba(0,178,255,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 105%, rgba(245,211,138,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
  -webkit-tap-highlight-color: var(--tap);
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.hidden{ display:none !important; }
::selection{ background: rgba(124,92,255,.26); }

/* BACKGROUND */
.bg{ position:fixed; inset:0; z-index:-10; pointer-events:none; }
.bgAura{
  position:absolute; inset:-25%;
  background:
    radial-gradient(circle at 22% 16%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(circle at 78% 22%, rgba(0,178,255,.14), transparent 60%),
    radial-gradient(circle at 52% 92%, rgba(245,211,138,.14), transparent 62%);
  filter: blur(60px) saturate(1.06);
  opacity:.95;
  animation: auraFloat 9s var(--ease) infinite alternate;
}
@keyframes auraFloat{
  from{ transform: translate3d(-1.2%, -1.1%, 0) scale(1.02); opacity:.86; }
  to  { transform: translate3d( 1.5%,  1.2%, 0) scale(1.05); opacity:.98; }
}
.bgGrid{
  position:absolute; inset:0; opacity:.18;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px calc(var(--grid) + 4px));
  mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1) 0 58%, rgba(0,0,0,0) 84%);
}
.bgNoise{
  position:absolute; inset:0; opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.bgVignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 20%, transparent 40%, rgba(0,0,0,.40) 92%);
  opacity:.7;
}

/* GATE */
.gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px; }
.gateCard{
  width:min(680px, 100%);
  border-radius:26px;
  border:1px solid var(--stroke2);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
  box-shadow: var(--shadowHard);
  backdrop-filter: blur(18px);
  position:relative;
  overflow:hidden;
  padding:20px;
  transform: translateZ(0);
  animation: popIn .75s var(--ease2) both;
}
@keyframes popIn{
  0%{ opacity:0; transform: translate3d(0,18px,0) scale(.985); filter: blur(10px); }
  100%{ opacity:1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
}
@keyframes sheen{ from{ transform: translateX(-70%) rotate(12deg); } to{ transform: translateX(70%) rotate(12deg); } }
.gateCard::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(120deg, transparent 44%, rgba(255,255,255,.16), transparent 62%);
  transform: translateX(-70%) rotate(12deg);
  opacity:.45;
  pointer-events:none;
  animation: sheen 3.2s linear infinite;
}
.gateCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(circle at 90% 18%, rgba(0,178,255,.14), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(245,211,138,.12), transparent 65%);
  opacity:.65;
}
.gateCard > *{ position:relative; z-index:2; }

.gateHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brandText .brandName{ font-weight:1000; letter-spacing:.14em; font-size:14px; }
.brandText .brandSub{ margin-top:3px; color:var(--muted); font-size:12px; }

.brandMark{
  width:52px; height:52px;
  border-radius:18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,178,255,.55));
  box-shadow: 0 18px 60px rgba(124,92,255,.24), 0 12px 34px rgba(0,178,255,.12);
  position:relative; overflow:hidden;
}
.brandMark.sm{ width:38px; height:38px; border-radius:14px; }
.brandMarkInner{ font-weight:1000; letter-spacing:.08em; text-shadow: 0 10px 30px rgba(0,0,0,.35); }
.brandMarkShine{
  position:absolute; inset:-70%;
  background: linear-gradient(120deg, transparent 44%, rgba(255,255,255,.20), transparent 62%);
  transform: translateX(-70%) rotate(12deg);
  opacity:.65; pointer-events:none;
  animation: sheen 2.7s linear infinite;
}

.statusPills{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.86);
  font-weight:900; letter-spacing:.10em; font-size:11px;
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}
.pillGold{ border-color: rgba(245,211,138,.28); background: linear-gradient(90deg, rgba(245,211,138,.16), rgba(255,255,255,.05)); }
.pillGold::before{ content:"✦"; color: var(--gold); }

.gateHero{ padding:6px 2px 10px; }
.gateTitle{ margin:8px 0 8px; font-size:22px; letter-spacing:.02em; }
.gateText{ margin:0 0 14px; color:var(--muted); line-height:1.65; }

.gateSteps{ display:grid; grid-template-columns: 1fr; gap:10px; margin:12px 0 2px; }
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px; border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  transition: transform .14s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.step:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.stepNum{
  width:32px; height:32px; border-radius:12px;
  display:grid; place-items:center; font-weight:1000;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.stepTitle{ font-weight:1000; letter-spacing:.06em; }
.stepDesc{ margin-top:4px; color:var(--muted); font-size:13px; line-height:1.45; }

.gateActions{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.gateHint{
  color:var(--muted); font-size:13px; line-height:1.4;
  padding:10px 12px; border-radius:16px;
  background: rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.08);
}
.legal{ color:var(--muted2); font-size:12px; line-height:1.45; }
.gateFooter{ margin-top:12px; }

.meter{ height:10px; border-radius:999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.10); overflow:hidden; }
.meterFill{
  height:100%; width:14%;
  background: linear-gradient(90deg, rgba(124,92,255,.75), rgba(0,178,255,.48), rgba(245,211,138,.40));
  transition: width .25s var(--ease);
}
.meterText{ margin-top:10px; color:var(--muted2); font-size:12px; letter-spacing:.18em; text-transform:uppercase; }

/* TOPBAR / LAYOUT */
.app{ min-height:100vh; }
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(7,8,12,.88), rgba(7,8,12,.16));
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
}
.topLeft, .topRight{ display:flex; align-items:center; gap:10px; }
.brandMini{ display:flex; align-items:center; gap:10px; }
.brandName.sm{ font-size:12px; letter-spacing:.14em; }
.brandSub.sm{ font-size:11px; color:var(--muted2); margin-top:2px; }

.content{ padding:16px; display:flex; flex-direction:column; gap:14px; }

/* HERO */
.hero{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  padding: 14px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  pointer-events:none; opacity:.22;
  background:
    radial-gradient(circle at 10% -10%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(circle at 92% 18%, rgba(0,178,255,.12), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(245,211,138,.12), transparent 65%);
}
.heroLeft{ position:relative; z-index:1; }
.heroTitle{ font-weight:1000; letter-spacing:.12em; font-size:12px; text-transform:uppercase; color:rgba(255,255,255,.86); }
.heroSub{ margin-top:6px; color:var(--muted); font-size:13px; line-height:1.4; }
.heroRight{ position:relative; z-index:1; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.heroChip{
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight:900; letter-spacing:.10em; font-size:11px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

/* BUTTONS */
.iconBtn{
  height:38px; min-width:38px; padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--txt);
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transition: transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  position:relative;
  z-index:40; /* FIX: чтобы "…" всегда кликабельно */
  pointer-events:auto;
}
.iconBtn:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.iconBtn:active{ transform: translateY(1px) scale(.99); }

.btn{
  position:relative; overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  padding:13px 14px;
  font-weight:1000; letter-spacing:.14em; font-size:13px;
  color:rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  user-select:none;
  box-shadow: 0 16px 46px rgba(0,0,0,.30);
  transition: transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .22s var(--ease), filter .18s var(--ease);
  -webkit-tap-highlight-color: var(--tap);
}
.btn:hover{
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.19);
  box-shadow: 0 18px 52px rgba(0,0,0,.34);
}
.btn:active{ transform: translateY(1px) scale(.995); }
.btn:disabled{ opacity:.55; cursor:not-allowed; filter:saturate(.8) contrast(.95); }
.btnWide{ width:100%; }
.btnIcon{ opacity:.92; }
.btnPrimary{
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(124,92,255,.96), rgba(0,178,255,.60));
  box-shadow: 0 20px 74px rgba(124,92,255,.22), 0 12px 44px rgba(0,178,255,.12);
}
.btnGlass{ background: rgba(255,255,255,.06); }
.btnGlow{
  position:absolute; inset:-60%;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.18), transparent 62%);
  transform: translateX(-75%) rotate(12deg);
  opacity:0; pointer-events:none;
}
.btnPrimary:hover .btnGlow{ opacity:.65; animation: sheen 2.3s linear infinite; }

/* PANELS */
.panel{
  border-radius:var(--r3);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  padding: var(--pad);
  position:relative; overflow:hidden;
  transform: translateZ(0);
}
.panel::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background:
    radial-gradient(circle at 10% -10%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(circle at 92% 18%, rgba(0,178,255,.12), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(245,211,138,.12), transparent 65%);
}
.panel::after{
  content:""; position:absolute; inset:1px;
  border-radius:calc(var(--r3) - 1px);
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  opacity:.95;
}
.panelHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; position:relative; z-index:2; }
.panelTitle{ font-weight:1000; letter-spacing:.18em; font-size:12px; color:rgba(255,255,255,.86); text-transform:uppercase; }
.panelRight{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.chip{
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight:900; letter-spacing:.10em; font-size:11px;
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.chipBtn{
  padding:8px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight:900; letter-spacing:.12em; font-size:11px;
  cursor:pointer;
  transition: transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.chipBtn:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.chipBtn:active{ transform: translateY(1px) scale(.99); }

/* SELECTS */
.row{ display:flex; gap:10px; flex-wrap:wrap; position:relative; z-index:2; }
.select{
  flex:1;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  color:var(--txt);
  cursor:pointer;
  min-width: 160px;
  transition: transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.select:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.17); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.select:active{ transform: translateY(1px) scale(.995); }
.select.compact{ flex:0 0 auto; min-width:120px; }
.selectLeft{ display:flex; gap:10px; align-items:center; }
.badge{
  width:28px; height:28px;
  border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}
.selectValue{ font-weight:1000; letter-spacing:.06em; }
.chev{ color:var(--muted2); }

/* HINT / ACTIONS */
.hint{ margin-top:10px; color:var(--muted); font-size:13px; line-height:1.45; position:relative; z-index:2; }
.actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; position:relative; z-index:2; width:100%; }

/* CHARTS */
.chartWrap{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: 0 18px 55px rgba(0,0,0,.34), inset 0 0 0 1px rgba(0,0,0,.22);
  transform: translateZ(0);
}
#chart{
  display:block;
  width:100%;
  height:auto;
  filter: saturate(1.12) contrast(1.10);
}
.chartOverlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px;
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(12px);
  z-index:3;
  pointer-events:none;
}
.overlayTitle{ font-weight:1000; letter-spacing:.24em; font-size:12px; opacity:.92; text-transform:uppercase; text-shadow: 0 0 18px rgba(124,92,255,.22); }
.overlayLine{ color:var(--muted); font-size:13px; text-align:center; padding:0 14px; line-height:1.35; }
.overlayBar{
  width:72%; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
}
.overlayFill{ width:0%; height:100%; background: linear-gradient(90deg, rgba(124,92,255,.75), rgba(0,178,255,.48)); transition: width .18s var(--ease); }

/* SIGNAL CARD */
.signalCard{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius:20px;
  padding:12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
}
.signalCard::before{
  content:"";
  position:absolute; inset:-60%;
  background: linear-gradient(120deg, transparent 44%, rgba(255,255,255,.08), transparent 66%);
  transform: translateX(-70%) rotate(12deg);
  animation: sheen 4.3s linear infinite;
  opacity:.50;
  pointer-events:none;
}
.signalCard > *{ position:relative; z-index:2; }

.label{ color:var(--muted2); font-size:12px; letter-spacing:.12em; font-weight:1000; text-transform:uppercase; }
.signalLine{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }

.dirArrow{
  width:34px; height:34px; border-radius:14px;
  display:grid; place-items:center;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.dirText{ font-weight:1000; letter-spacing:.08em; font-size:15px; }

.dirArrow.up, .dirText.up{ color: var(--good); text-shadow: 0 0 18px rgba(119,243,178,.25); }
.dirArrow.down, .dirText.down{ color: var(--bad); text-shadow: 0 0 18px rgba(255,90,110,.22); }

.signalMeta{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.metaDot{ width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.25); box-shadow: 0 0 14px rgba(255,255,255,.12); }
.metaSep{ opacity:.55; }

.vipBadge{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(245,211,138,.28);
  background: linear-gradient(90deg, rgba(245,211,138,.18), rgba(255,255,255,.06));
  font-weight:1000; letter-spacing:.14em; font-size:11px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.vipBadge::before{ content:"✦"; color: var(--gold); }

.miniMetrics{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.m{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius:16px;
  padding:10px 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.m .k{ color:var(--muted2); font-size:12px; letter-spacing:.12em; font-weight:1000; text-transform:uppercase; }
.m .v{ margin-top:6px; font-weight:1000; letter-spacing:.08em; }

.miniChart{
  margin-top:8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,.26);
  position:relative;
}
#signalChart{ display:block; width:100%; height:auto; filter: saturate(1.05) contrast(1.05); }
.miniChartHint{
  position:absolute;
  left:12px; bottom:10px;
  font-size:12px;
  color: rgba(255,255,255,.62);
  letter-spacing:.04em;
  background: rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:6px 10px;
  backdrop-filter: blur(8px);
}

/* MODALS */
.backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.50); backdrop-filter: blur(12px); z-index:60; }
.modal{
  position:fixed; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(640px, calc(100% - 26px));
  max-height:min(78vh, 720px);
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: var(--shadowHard);
  z-index:70;
  backdrop-filter: blur(18px);
}
.modalTop{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.modalTitle{ font-weight:1000; letter-spacing:.18em; font-size:12px; color:rgba(255,255,255,.86); text-transform:uppercase; }
.search{
  width:calc(100% - 24px);
  margin:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:var(--txt);
  outline:none;
}
.search::placeholder{ color:rgba(255,255,255,.35); }
.tabs{ display:flex; gap:8px; padding:0 12px 10px; overflow:auto; -webkit-overflow-scrolling: touch; }
.list{ padding:0 12px 14px; overflow:auto; -webkit-overflow-scrolling: touch; max-height: calc(78vh - 140px); }
.item{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  margin-bottom:8px;
  cursor:pointer;
  transition: transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .2s var(--ease);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.item:hover{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); box-shadow: 0 14px 34px rgba(0,0,0,.26); }
.item:active{ transform: translateY(1px) scale(.995); }

.footnote{ margin-top:10px; color:var(--muted2); font-size:12px; line-height:1.45; }

/* NOTIFY + SOFTLOCK */
.notify{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background: rgba(0,0,0,.46);
  backdrop-filter: blur(14px);
}
.notifyCard{
  width:min(560px, 100%);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow: var(--shadowHard);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.notifyCard::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(120deg, transparent 44%, rgba(245,211,138,.12), transparent 66%);
  transform: translateX(-70%) rotate(12deg);
  animation: sheen 4.2s linear infinite;
  opacity:.55;
  pointer-events:none;
}
.notifyTitle{
  position:relative; z-index:1;
  font-weight:1000;
  letter-spacing:.10em;
  font-size:16px;
  margin-bottom:8px;
}
.notifyText{
  position:relative; z-index:1;
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
}
.notifyActions{
  position:relative; z-index:1;
  margin-top:14px;
  display:flex; gap:10px; flex-wrap:wrap;
}

.softLock{
  position:fixed;
  inset:0;
  z-index:95;
  pointer-events:auto;
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 520px){
  .signalCard{ grid-template-columns: 1fr; }
  .miniMetrics{ grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* CLICK SAFETY */
.bg, .bgAura, .bgGrid, .bgNoise, .bgVignette,
.brandMarkShine, .btnGlow,
.panel::before, .panel::after,
.gateCard::before, .gateCard::after,
.signalCard::before,
.chartOverlay{ pointer-events:none !important; }