:root{
  /* Core palette */
  --bg0:#050710;
  --bg1:#070A12;

  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.44);

  --acc: rgba(124,92,255,1);
  --acc2: rgba(0,178,255,1);
  --good: rgba(120,255,180,1);
  --bad: rgba(255,90,110,1);

  /* Glass */
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.14);

  /* Depth */
  --shadowHard: 0 26px 80px rgba(0,0,0,.55);
  --shadow: 0 20px 60px rgba(0,0,0,.42);
  --shadowSoft: 0 14px 40px rgba(0,0,0,.28);
  --inner: inset 0 0 0 1px rgba(0,0,0,.25);

  /* Radius / spacing */
  --r:18px;
  --r2:14px;
  --r3:22px;
  --pad:16px;

  /* Typography */
  --font: ui-sans-serif, -apple-system, system-ui, Segoe UI, Roboto, Arial;

  /* Motion */
  --ease: cubic-bezier(.2,.9,.2,1);
  --ease2: cubic-bezier(.25,1,.3,1);

  /* Accent “energy” */
  --glowA: rgba(124,92,255,.55);
  --glowB: rgba(0,178,255,.35);

  /* Fine grid scale */
  --grid: 22px;
}

/* =======================
   Base
======================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font);
  background: radial-gradient(1200px 900px at 18% 8%, rgba(124,92,255,.14), transparent 60%),
              radial-gradient(900px 700px at 78% 22%, rgba(0,178,255,.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
::selection{ background: rgba(124,92,255,.32); }

/* Reduce tap flash */
*{ -webkit-tap-highlight-color: transparent; }

/* =======================
   Ultra background stack
   (safe: no pointer events)
======================= */
.bg{ position:fixed; inset:0; z-index:-5; pointer-events:none; }

.bgGlow{
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 35% 18%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(circle at 74% 26%, rgba(0,178,255,.13), transparent 58%),
    radial-gradient(circle at 50% 85%, rgba(124,92,255,.10), transparent 60%);
  filter: blur(60px) saturate(1.08);
  opacity:.95;
}

.bgGrid{
  position:absolute; inset:0;
  opacity:.20;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px var(--grid)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px calc(var(--grid) + 4px));
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 85%);
  filter:saturate(1.05);
}

/* Soft aurora “threads” */
.bgThreads{
  position:absolute; inset:-10%;
  opacity:.55;
  background:
    radial-gradient(closest-side at 20% 50%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(closest-side at 80% 55%, rgba(0,178,255,.14), transparent 60%);
  filter: blur(45px);
  mix-blend-mode: screen;
  animation: threads 7.5s var(--ease) infinite alternate;
}
@keyframes threads{
  0%{ transform: translate3d(-1.5%, -1.2%, 0) scale(1.02); opacity:.45; }
  100%{ transform: translate3d(1.8%, 1.4%, 0) scale(1.05); opacity:.62; }
}

/* Film grain */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-4;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:-3;
  opacity:.08;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.20), transparent 55%);
  mix-blend-mode: overlay;
}

/* =======================
   Utilities
======================= */
.hidden{ display:none !important; }

/* =======================
   Gate
======================= */
.gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.gateCard{
  width:min(580px, 100%);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid var(--stroke2);
  border-radius:24px;
  box-shadow:var(--shadowHard);
  padding:22px;
  backdrop-filter: blur(18px);
  position:relative;
  overflow:hidden;
}

.gateCard::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 0%, rgba(124,92,255,.24), transparent 55%),
    radial-gradient(circle at 90% 20%, rgba(0,178,255,.14), transparent 60%);
  opacity:.6;
}

.gateCard::after{
  content:"";
  position:absolute; inset:-70%;
  background:linear-gradient(120deg, transparent 42%, rgba(255,255,255,.18), transparent 62%);
  transform:translateX(-70%) rotate(12deg);
  animation:holoSweep 2.8s linear infinite;
  opacity:.75;
  pointer-events:none;
}

.brandRow{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }

.brandLogo{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  font-weight:1000;
  letter-spacing:.06em;
  background:linear-gradient(135deg, rgba(124,92,255,.98), rgba(0,178,255,.66));
  box-shadow:
    0 18px 60px rgba(124,92,255,.28),
    0 0 30px rgba(0,178,255,.14);
  position:relative;
  overflow:hidden;
}
.brandLogo::after{
  content:"";
  position:absolute; inset:-70%;
  background:linear-gradient(120deg, transparent 45%, rgba(255,255,255,.22), transparent 65%);
  transform:translateX(-70%) rotate(10deg);
  animation:holoSweep 3.1s linear infinite;
  opacity:.7;
}

.brandLogo.sm{ width:36px;height:36px;border-radius:14px; }
.brandName{ font-weight:1000; letter-spacing:.14em; }
.brandName.sm{ font-size:12px; }
.brandSub{ font-size:12px; color:var(--muted); margin-top:3px; }
.brandSub.sm{ font-size:11px; color:var(--muted2); }

.gateTitle{
  margin:14px 0 8px;
  font-size:22px;
  letter-spacing:.02em;
}
.gateText{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.5;
}

.gateActions{ display:flex; flex-direction:column; gap:12px; }

.checkRow{
  display:flex; gap:10px;
  align-items:center;
  color:var(--muted);
  user-select:none;
}
.checkRow input{ transform: scale(1.15); }
.tiny{
  color:var(--muted2);
  font-size:12px;
  line-height:1.45;
}

/* =======================
   App shell + topbar
======================= */
.app{ min-height:100vh; }

.topbar{
  position:sticky;
  top:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(5,7,16,.88), rgba(5,7,16,.18));
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:25;
}

.brandMini{ display:flex; gap:10px; align-items:center; }

.iconBtn{
  height:38px;
  min-width:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--txt);
  cursor:pointer;
  transition: transform .12s var(--ease), background .15s ease, border-color .15s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.iconBtn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18); }
.iconBtn:active{ transform:translateY(1px) scale(.99); }

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

/* =======================
   Panels (Premium)
======================= */
.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.055));
  border:1px solid var(--stroke);
  border-radius:var(--r3);
  padding:var(--pad);
  box-shadow:var(--shadow);
  backdrop-filter: blur(18px);
  position:relative;
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.30;
  background:
    radial-gradient(circle at 12% -10%, rgba(124,92,255,.26), transparent 55%),
    radial-gradient(circle at 92% 18%, rgba(0,178,255,.16), transparent 60%),
    radial-gradient(circle at 50% 120%, rgba(124,92,255,.14), transparent 60%);
}

/* “micro-border” internal */
.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:.9;
}

.panelTitle{
  font-weight:1000;
  letter-spacing:.18em;
  font-size:12px;
  color:rgba(255,255,255,.86);
  margin-bottom:10px;
  text-transform:uppercase;
}

/* Row */
.row{ display:flex; gap:10px; flex-wrap:wrap; }

/* Hint */
.hint{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.42;
}
.hint b{ color:rgba(255,255,255,.92); }

/* =======================
   Select buttons (premium)
======================= */
.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);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.selectValue{
  font-weight:1000;
  letter-spacing:.04em;
}

.chev{ color:var(--muted2); }

/* =======================
   Buttons (super premium)
======================= */
.actions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.btn{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  padding:13px 14px;
  font-weight:1000;
  letter-spacing:.16em;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.06);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:
    transform .12s var(--ease),
    filter .2s var(--ease),
    background .18s var(--ease),
    border-color .18s var(--ease),
    box-shadow .22s var(--ease);
  user-select:none;
  box-shadow: 0 16px 46px rgba(0,0,0,.30);
}

.btnWide{ width:100%; }
.btnIcon{ opacity:.92; }

.btn:disabled{
  opacity:.56;
  cursor:not-allowed;
  filter:saturate(.8) contrast(.95);
}

.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); }

.btnPrimary{
  background: linear-gradient(135deg, rgba(124,92,255,.96), rgba(0,178,255,.62));
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 20px 70px rgba(124,92,255,.26),
    0 10px 38px rgba(0,178,255,.12);
}

/* “gloss highlight” */
.btn::after{
  content:"";
  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;
}
.btn:hover::after{ opacity:.65; animation:holoSweep 2.6s linear infinite; }

.btnGlass{ background:rgba(255,255,255,.06); }
.btnGhost{ background:rgba(255,255,255,.05); }

/* Glow pulse (attention) */
.glowPulse{ animation:btnPulse 1.35s var(--ease2) infinite; }
@keyframes btnPulse{
  0%,100%{
    box-shadow:
      0 0 20px rgba(124,92,255,.25),
      0 20px 70px rgba(124,92,255,.18),
      0 10px 38px rgba(0,178,255,.10);
  }
  50%{
    box-shadow:
      0 0 40px rgba(124,92,255,.65),
      0 24px 86px rgba(124,92,255,.22),
      0 12px 46px rgba(0,178,255,.16);
  }
}

/* Scan sweep inside button */
.scan{
  position:absolute;
  top:-60%;
  left:-60%;
  width:70%;
  height:220%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22), transparent 65%);
  transform: rotate(10deg);
  opacity:0;
  pointer-events:none;
}
.scanning .scan{
  opacity:1;
  animation:sweep 1.05s linear infinite;
}
@keyframes sweep{
  0%{ left:-85%; }
  100%{ left:135%; }
}

/* =======================
   Trending badge (HOT)
======================= */
.trendingBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:.18em;
  font-size:11px;
  color:rgba(255,255,255,.92);
  background:linear-gradient(90deg, rgba(124,92,255,.24), rgba(0,178,255,.18));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 12px 34px rgba(124,92,255,.18),
    0 0 24px rgba(0,178,255,.08);
  margin:12px 0 8px;
  position:relative;
  overflow:hidden;
}
.trendingBadge::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:rgba(120,255,180,.95);
  box-shadow:0 0 18px rgba(120,255,180,.85);
  animation:pulseDot 1.2s var(--ease) infinite;
}
.trendingBadge::after{
  content:"";
  position:absolute;
  inset:-70%;
  background:linear-gradient(120deg, transparent 42%, rgba(255,255,255,.16), transparent 62%);
  transform:translateX(-70%) rotate(12deg);
  animation:holoSweep 3.2s linear infinite;
  opacity:.65;
  pointer-events:none;
}
@keyframes pulseDot{
  0%,100%{ transform:scale(1); opacity:.75 }
  50%{ transform:scale(1.55); opacity:1 }
}

/* =======================
   Holographic status bar
======================= */
.holoStatus{
  position:relative;
  height:36px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(90deg,
    rgba(124,92,255,.12),
    rgba(0,178,255,.10),
    rgba(124,92,255,.12)
  );
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  margin-top:8px;
}

.holoFill{
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(90deg,
    rgba(124,92,255,.40),
    rgba(0,178,255,.24),
    rgba(124,92,255,.40)
  );
  transition:width .25s var(--ease);
}

.holoText{
  position:relative;
  z-index:2;
  height:36px;
  display:flex;
  align-items:center;
  padding:0 12px;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.20em;
  color:rgba(255,255,255,.86);
  text-transform:uppercase;
}

.holoStatus::after{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.16), transparent 60%);
  transform:translateX(-60%) rotate(10deg);
  animation:holoSweep 2.35s linear infinite;
  pointer-events:none;
  opacity:.88;
}
@keyframes holoSweep{
  0%{ transform:translateX(-70%) rotate(10deg) }
  100%{ transform:translateX(70%) rotate(10deg) }
}

/* =======================
   Analyzing line
======================= */
.analyzingLine{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:rgba(255,255,255,.88);
  font-size:13px;
  letter-spacing:.02em;
}

.analyzingDot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(124,92,255,.95);
  box-shadow:0 0 18px rgba(124,92,255,.7);
  animation:dotPulse 1s var(--ease) infinite;
}
@keyframes dotPulse{
  0%,100%{ transform:scale(1); opacity:.65 }
  50%{ transform:scale(1.55); opacity:1 }
}

/* =======================
   Chart (insane premium)
======================= */
.panelChart{ padding-bottom:14px; }

.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);
}

/* Digital grid overlay (only when .gridOn) */
.chartWrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s var(--ease);
  z-index:1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.065) 0px, rgba(255,255,255,.065) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0px, rgba(255,255,255,.055) 1px, transparent 1px, transparent 22px);
  mix-blend-mode:screen;
}
.chartWrap.gridOn::before{ opacity:.38; }

/* Vignette + chroma aura */
.chartWrap::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.34) 100%),
    radial-gradient(circle at 20% 25%, rgba(124,92,255,.10), transparent 55%),
    radial-gradient(circle at 80% 35%, rgba(0,178,255,.08), transparent 55%);
  opacity:.95;
}

/* Canvas */
#chart{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:0;
  filter: saturate(1.05) contrast(1.03);
}

/* Animated “scanline” ONLY when gridOn (doesn't block clicks) */
.chartWrap.gridOn .scanline{
  opacity:.75;
  animation: scanline 1.2s linear infinite;
}
.scanline{
  position:absolute;
  left:0;
  top:-30%;
  width:100%;
  height:30%;
  background:linear-gradient(180deg, transparent, rgba(124,92,255,.12), rgba(0,178,255,.10), transparent);
  opacity:0;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
  filter: blur(.2px);
}
@keyframes scanline{
  0%{ transform: translateY(-40%); }
  100%{ transform: translateY(380%); }
}

/* Overlay while scanning */
.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);
  opacity:0;
  pointer-events:none;
  z-index:3;
  transition:opacity .2s var(--ease);
}
.chartOverlay.show{ opacity:1; }

.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,.70), rgba(0,178,255,.48));
  transition:width .18s var(--ease);
}

/* =======================
   Factors
======================= */
.factors{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}

.factor{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:10px 12px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.factor::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(circle at 100% 40%, rgba(0,178,255,.12), transparent 60%);
}
.factor::after{
  content:"";
  position:absolute; inset:-60%;
  background:linear-gradient(120deg, transparent 44%, rgba(255,255,255,.08), transparent 66%);
  transform:translateX(-70%) rotate(12deg);
  animation:holoSweep 3.6s linear infinite;
  opacity:.55;
  pointer-events:none;
}
.factorLabel{
  color:var(--muted2);
  font-size:12px;
  letter-spacing:.12em;
  font-weight:1000;
  text-transform:uppercase;
}
.factorValue{
  font-weight:1000;
  letter-spacing:.10em;
  margin-top:4px;
}

/* =======================
   Result cards
======================= */
.panelResult .cardGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}

.card{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  border-radius:16px;
  padding:10px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    radial-gradient(circle at 10% 0%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(circle at 90% 30%, rgba(0,178,255,.10), transparent 60%);
}
.card.wide{ grid-column:1 / -1; }

.label{
  color:var(--muted2);
  font-size:12px;
  letter-spacing:.12em;
  font-weight:1000;
  text-transform:uppercase;
}

.value{
  font-weight:1000;
  letter-spacing:.10em;
  margin-top:6px;
}

.value.big{ font-size:18px; }

.dir{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
}

.dirDot{
  width:10px;height:10px;border-radius:50%;
}
.dirDot.up{
  background:var(--good);
  box-shadow:0 0 18px rgba(120,255,180,.55);
}
.dirDot.down{
  background:var(--bad);
  box-shadow:0 0 18px rgba(255,90,110,.55);
}

.dirUntil{
  color:var(--muted);
  font-size:13px;
}

/* Progress */
.progress{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  margin-top:8px;
}
.progressBar{
  width:0%;
  height:100%;
  background:linear-gradient(90deg, rgba(124,92,255,.78), rgba(0,178,255,.50));
  transition:width .2s linear;
}

.timer{
  margin-top:8px;
  color:var(--muted);
  font-weight:1000;
  letter-spacing:.12em;
  font-size:12px;
}

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

/* =======================
   Backdrop + Modals
   IMPORTANT: do NOT break clicks
======================= */
.backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.46);
  backdrop-filter: blur(12px);
  z-index:60;
}

.modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(580px, calc(100% - 26px));
  max-height:min(78vh, 720px);
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.11), 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;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.20);
}
.search::placeholder{ color:rgba(255,255,255,.35); }

.tabs{
  display:flex;
  gap:8px;
  padding:0 12px 10px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.tab{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-weight:1000;
  letter-spacing:.12em;
  font-size:11px;
  cursor:pointer;
  white-space:nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.tab:hover{ background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.16); }
.tab:active{ transform: translateY(1px) scale(.99); }
.tab.active{
  background:linear-gradient(135deg, rgba(124,92,255,.48), rgba(0,178,255,.18));
  color:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 26px rgba(124,92,255,.12);
}

.list{
  padding:0 12px 14px;
  overflow:auto;
  max-height: calc(78vh - 140px);
  -webkit-overflow-scrolling: touch;
}

.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: background .18s var(--ease), border-color .18s var(--ease), transform .12s 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); }

.itemLeft{ display:flex; flex-direction:column; gap:2px; }
.itemSym{ font-weight:1000; letter-spacing:.10em; }
.itemCat{ color:var(--muted2); font-size:12px; letter-spacing:.12em; font-weight:1000; text-transform:uppercase; }

/* =======================
   Responsive
======================= */
@media (max-width: 420px){
  .select{ min-width: 140px; }
  .panel{ padding:14px; }
  .panelResult .cardGrid{ grid-template-columns: 1fr; }
  .factors{ grid-template-columns: 1fr; }
}

/* =======================
   Reduced motion
======================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}