:root{
  --bg0:#050712;
  --bg1:#070a14;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.10);

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.52);

  --good:#2ef2a7;
  --bad:#ff4d7d;

  --a1:#7c5cff;
  --a2:#22d3ee;
  --a3:#f97316;

  --shadow: 0 18px 80px rgba(0,0,0,.55);
  --r: 18px;
  --r2: 26px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji";

  /* stronger dark glass to separate controls from background */
  --glass-dark: rgba(0,0,0,.28);
  --glass-darker: rgba(0,0,0,.40);
  --glass-border: rgba(255,255,255,.14);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);

  /* 1) robot-bg.png — сверху (hero)
     2) space-bg.png — бесконечный фон при скролле (repeat-y) */
  background-color: var(--bg0);
  background-image:
    url("assets/robot-bg.png"),
    url("assets/space-bg.png"),
    radial-gradient(1200px 700px at 10% -10%, rgba(124,92,255,.26), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(700px 500px at 70% 120%, rgba(249,115,22,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-position:
    center top,
    center top,
    10% -10%,
    110% 10%,
    70% 120%,
    0 0;
  background-size:
    cover,
    clamp(860px, 110vw, 1440px) auto,
    auto,
    auto,
    auto,
    auto;
  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;

  overflow-x:hidden;
}

/* subtle grain */
.grain{
  pointer-events:none;
  position:fixed; inset:-30%;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  transform:rotate(8deg);
  animation: grainMove 10s linear infinite;
  mix-blend-mode: overlay;
}
@keyframes grainMove{
  0%{ transform:translate3d(-2%, -2%, 0) rotate(8deg); }
  50%{ transform:translate3d(2%, 1%, 0) rotate(8deg); }
  100%{ transform:translate3d(-2%, -2%, 0) rotate(8deg); }
}

.app{
  min-height:100%;
  padding: calc(14px + var(--safe-top)) calc(14px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(14px + var(--safe-left));
  max-width: 1080px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  position: sticky;
  top: 0;
  z-index: 20;

  padding: 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

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

.langSwitch{
  display:flex;
  align-items:center;
  gap:8px;
}

.langBtn{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .7px;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 80px at 20% 30%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(220px 70px at 80% 30%, rgba(124,92,255,.12), transparent 60%),
    var(--glass-dark);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 70px rgba(0,0,0,.38);
  color: rgba(255,255,255,.80);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.langBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.34);
}
.langBtn:active{ transform: translateY(0px) scale(.99); }
.langBtn.active{
  color: rgba(255,255,255,.92);
  border-color: rgba(34,211,238,.34);
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(124,92,255,.18)), rgba(0,0,0,.34);
}

.clockChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 80px at 20% 30%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(220px 70px at 80% 30%, rgba(124,92,255,.16), transparent 60%),
    var(--glass-dark);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 70px rgba(0,0,0,.38);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255,255,255,.86);
  letter-spacing: .8px;
  font-variant-numeric: tabular-nums;
  position:relative;
  overflow:hidden;
}
.clockChip::after{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%);
  transform: rotate(18deg);
  opacity:.9;
  animation: clockSheen 4.6s ease-in-out infinite;
}
@keyframes clockSheen{
  0%,100%{ transform:translateX(-10%) rotate(18deg); opacity:.55; }
  50%{ transform:translateX(10%) rotate(18deg); opacity:.18; }
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  color: var(--text);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;

  /* darker glass so buttons don't merge with background */
  background:
    radial-gradient(220px 90px at 20% 20%, rgba(255,255,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.18));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 70px rgba(0,0,0,.42);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
  font-weight: 800;
  letter-spacing: .15px;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
  filter: brightness(1.08);
}
.btn:active{ transform: translateY(0px) scale(.99); }
.btn[disabled]{ cursor:not-allowed; opacity:.55; transform:none !important; }

.btnPrimary{
  background:
    radial-gradient(360px 140px at 20% 20%, rgba(124,92,255,.24), transparent 60%),
    radial-gradient(360px 140px at 80% 30%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.16));
  border-color: rgba(34,211,238,.30);
  box-shadow: 0 22px 90px rgba(34,211,238,.12), 0 22px 90px rgba(124,92,255,.12), 0 16px 70px rgba(0,0,0,.42);
}
.btnPrimary:hover{ border-color: rgba(34,211,238,.42); }

main{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card{
  border-radius: var(--r2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.cardInner{
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* =========================
   HOME — максимально трейдинг
   ========================= */
.homeTerminal{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  padding: 16px;
  background:
    radial-gradient(1200px 560px at 15% 15%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(760px 520px at 70% 120%, rgba(46,242,167,.10), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.10));
}

/* trading grid + scanline */
.homeTerminal::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(900px 520px at 10% 15%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(900px 520px at 95% 10%, rgba(124,92,255,.14), transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.homeTerminal::after{
  content:"";
  position:absolute; left:-10%; right:-10%;
  height: 44%;
  top:-60%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.10), transparent);
  filter: blur(10px);
  opacity:.22;
  transform: skewY(-8deg);
  animation: scan 5.4s linear infinite;
  pointer-events:none;
}
@keyframes scan{
  0%{ top:-60%; }
  100%{ top:120%; }
}

.homeTerminal > *{ position:relative; z-index:1; }

.homeHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.homeTitle{
  margin:0;
  font-weight: 950;
  letter-spacing: -1.2px;
  font-size: clamp(40px, 7.6vw, 68px);
  line-height: .92;
  text-transform: lowercase;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.62));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 18px 80px rgba(0,0,0,.45);
}

.ticker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tickerPill{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(16px);
  color: rgba(255,255,255,.80);
  box-shadow: 0 18px 70px rgba(0,0,0,.34);
  white-space:nowrap;
}
.tickerPill.good{ border-color: rgba(46,242,167,.28); }
.tickerPill.bad{ border-color: rgba(255,77,125,.28); }

.homeSub{
  margin: 10px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.35;
  max-width: 74ch;
}

.homeMenuGrid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.menuCard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);

  /* darkened so card is clearly separated from background */
  background:
    radial-gradient(520px 220px at 10% 15%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.16));

  box-shadow: 0 22px 100px rgba(0,0,0,.50);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, filter .16s ease;
  min-height: 118px;
}
.menuCard:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.06);
}
.menuCard:active{ transform: translateY(0px) scale(.99); }

.menuCard::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(360px 260px at 30% 30%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(340px 240px at 80% 25%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(300px 220px at 60% 120%, rgba(46,242,167,.14), transparent 60%);
  filter: blur(18px);
  opacity:.90;
  transform: translate3d(0,0,0);
  animation: floatGlow 5.2s ease-in-out infinite;
  pointer-events:none;
}
.menuCard::after{
  /* a subtle dark veil to prevent blending with busy background */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.08));
  opacity:.55;
  pointer-events:none;
}
@keyframes floatGlow{
  0%,100%{ transform: translate3d(-1.5%, -1%, 0); opacity:.74; }
  50%{ transform: translate3d(1.5%, 1%, 0); opacity:.92; }
}

.menuCardInner{
  position:relative;
  z-index:1;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.menuIcon{
  width: 48px; height: 48px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  font-size: 20px;
  flex: 0 0 auto;
  position:relative;
  overflow:hidden;
}
.menuIcon::after{
  content:"";
  position:absolute; inset:-45%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), transparent 52%);
  transform: rotate(16deg);
  opacity:.9;
}

.menuText{ min-width:0; flex: 1 1 auto; }
.menuTitle{
  font-weight: 950;
  letter-spacing: .25px;
  font-size: 18px;
}
.menuDesc{
  margin-top: 6px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  line-height: 1.25;
  max-width: 52ch;
}

.menuCTA{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
}
.menuPills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.miniPill{
  font-family: var(--mono);
  font-size: 11px;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.82);
  white-space:nowrap;
  box-shadow: 0 14px 54px rgba(0,0,0,.26);
}
.menuArrow{
  width: 42px; height: 42px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  box-shadow: 0 18px 70px rgba(0,0,0,.36);
  font-family: var(--mono);
  font-size: 16px;
  opacity:.92;
}

.menuCard[data-cat="currencies"]{ border-color: rgba(34,211,238,.18); }
.menuCard[data-cat="crypto"]{ border-color: rgba(124,92,255,.20); }
.menuCard[data-cat="stocks"]{ border-color: rgba(46,242,167,.16); }

/* Instruction block (minimal) */
.infoLine{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 80px rgba(0,0,0,.34);
}
.infoText{
  color: rgba(255,255,255,.80);
  font-size: 13px;
  line-height: 1.25;
  max-width: 70ch;
}
.infoTag{
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.84);
  white-space:nowrap;
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:space-between;
}

.search{
  flex: 1 1 220px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 70px rgba(0,0,0,.34);
}
.search input{
  width:100%;
  border:none;
  outline:none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
.search input::placeholder{ color: rgba(255,255,255,.45); }

.list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.item{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(420px 160px at 10% 20%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.14));
  padding: 14px 14px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  box-shadow: 0 18px 70px rgba(0,0,0,.38);
  transition: transform .15s ease, border-color .15s ease, filter .15s ease;
}
.item:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); filter: brightness(1.06); }
.item:active{ transform: translateY(0px) scale(.99); }

.item .name{
  font-weight: 900;
  letter-spacing: .2px;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.item .meta{
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
}
.badge{
  flex:0 0 auto;
  border-radius: 999px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.82);
  font-family: var(--mono);
  font-size: 12px;
}

.pageTitle{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .15px;
}
.pageHint{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.pairHeader{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.pairRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.signalBox{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 200px at 20% 20%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(520px 200px at 80% 30%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.14));
  box-shadow: 0 18px 90px rgba(0,0,0,.45);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  overflow:hidden;
  position:relative;
}
.signalTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.signalLabel{
  font-family: var(--mono);
  color: var(--muted2);
  font-size: 12px;
  letter-spacing: .8px;
}
.signalValue{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .2px;
}
.signalValue.good{ color: var(--good); text-shadow: 0 0 22px rgba(46,242,167,.25); }
.signalValue.bad{ color: var(--bad); text-shadow: 0 0 22px rgba(255,77,125,.22); }

.cooldown{
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.82);
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing: .8px;
  font-variant-numeric: tabular-nums;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 70px rgba(0,0,0,.32);
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 42px rgba(0,0,0,.34);
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  font-family: var(--mono);
  letter-spacing: .6px;
}

.tfRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.tfLabel{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .8px;
  color: rgba(255,255,255,.72);
}
.tfPills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tfPill{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .7px;

  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  color: rgba(255,255,255,.82);
  box-shadow: 0 14px 54px rgba(0,0,0,.26);
  transition: transform .15s ease, border-color .15s ease, filter .15s ease, background .15s ease;
}
.tfPill:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); filter: brightness(1.06); }
.tfPill:active{ transform: translateY(0px) scale(.99); }
.tfPill.active{
  border-color: rgba(34,211,238,.38);
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(124,92,255,.16)), rgba(0,0,0,.26);
}

.canvasWrap{
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  overflow:hidden;
  position:relative;
  height: min(38vh, 320px);
}
canvas{ width:100%; height:100%; display:block; }
.canvasGlow{
  pointer-events:none;
  position:absolute; inset:-30%;
  background:
    radial-gradient(420px 240px at 15% 30%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(380px 220px at 85% 25%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(420px 240px at 75% 110%, rgba(249,115,22,.14), transparent 60%);
  filter: blur(16px);
  opacity:.9;
}

.toast{
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  transform: translateX(-50%) translateY(20px);
  opacity:0;
  pointer-events:none;
  z-index: 999;
  border-radius: 999px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,20,45,.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 80px rgba(0,0,0,.45);
  color: rgba(255,255,255,.88);
  font-size: 13px;
  max-width: min(92vw, 560px);
  text-align:center;
  transition: opacity .18s ease, transform .18s ease;
  font-family: var(--sans);
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0px); }

.fadeIn{ animation: fadeIn .18s ease both; }
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0px); }
}

@media (min-width: 860px){
  header{ padding: 14px 0; }
  .app{
    padding: calc(18px + var(--safe-top)) calc(18px + var(--safe-right)) calc(22px + var(--safe-bottom)) calc(18px + var(--safe-left));
  }
  .list{ grid-template-columns: 1fr 1fr; }
  .homeMenuGrid{ grid-template-columns: 1fr 1fr 1fr; }
  .menuCard{ min-height: 170px; }
  .menuCardInner{ height: 100%; align-items:flex-start; }
  .menuCTA{ align-self:stretch; justify-content:space-between; }
}


/* =========================
   AUTH (login/register/wait)
   ========================= */
.authWrap{
  min-height: calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 0 26px;
}

.authCard{
  width: min(520px, 100%);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 300px at 15% 10%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(700px 300px at 90% 25%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,.16));
  box-shadow: 0 26px 120px rgba(0,0,0,.58);
  padding: 16px;
  overflow:hidden;
  position:relative;
}

.authCard::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0));
  pointer-events:none;
  opacity:.55;
}

.authCard > *{ position:relative; z-index:1; }

.authHeader{
  margin-bottom: 12px;
}
.authTitle{
  margin: 0;
  font-weight: 950;
  letter-spacing: -0.9px;
  font-size: 28px;
  line-height: 1.05;
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.66));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 18px 80px rgba(0,0,0,.42);
}
.authSub{
  margin: 8px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  line-height: 1.35;
}

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

.authTab{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.80);

  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(240px 80px at 20% 30%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(220px 70px at 80% 30%, rgba(124,92,255,.10), transparent 60%),
    rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 70px rgba(0,0,0,.36);
  transition: transform .15s ease, border-color .15s ease, filter .15s ease, color .15s ease;
}
.authTab:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.06);
}
.authTab:active{ transform: translateY(0px) scale(.99); }
.authTab.active{
  color: rgba(255,255,255,.92);
  border-color: rgba(34,211,238,.34);
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(124,92,255,.16)), rgba(0,0,0,.28);
}

.authForm{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top: 8px;
}

.fieldLabel{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  letter-spacing: .3px;
}

.fieldInput{
  width:100%;
  border: 1px solid rgba(255,255,255,.12);
  outline:none;
  border-radius: 16px;
  padding: 13px 14px;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(480px 140px at 20% 20%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.54), rgba(0,0,0,.20));
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 70px rgba(0,0,0,.40);
  font-size: 14px;
}
.fieldInput::placeholder{ color: rgba(255,255,255,.40); }
.fieldInput:focus{
  border-color: rgba(34,211,238,.32);
  box-shadow: 0 20px 80px rgba(34,211,238,.10), 0 20px 80px rgba(124,92,255,.10), 0 18px 70px rgba(0,0,0,.40);
}

.authBtn{
  margin-top: 10px;
  border-radius: 18px;
  padding: 14px 14px;
  font-weight: 950;
}

.authNote{
  margin-top: 6px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.3;
  min-height: 20px;
}

.waitBox{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 70px rgba(0,0,0,.34);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.waitRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.waitLabel{
  color: rgba(255,255,255,.64);
  font-size: 12px;
  letter-spacing: .3px;
}
.waitValue{
  color: rgba(255,255,255,.88);
  font-family: var(--mono);
  font-size: 12px;
  text-align:right;
}

.waitActions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}


/* =========================
   2026 REDESIGN + LEADERBOARD
   ========================= */
:root{
  --bg0:#080304;
  --bg1:#130508;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.1);
  --stroke:rgba(255,255,255,.12);

  --a1:#ff4d6d;
  --a2:#ff7a59;
  --a3:#ffb36b;

  --shadow: 0 22px 90px rgba(0,0,0,.56);
  --glass-dark: rgba(14,4,6,.52);
  --glass-darker: rgba(10,2,4,.66);
  --glass-border: rgba(255,255,255,.15);
}

body{
  background-color: var(--bg0);
  background-image:
    linear-gradient(180deg, rgba(8,3,4,.2), rgba(8,3,4,.75)),
    url("/assets/robot-bg.png"),
    radial-gradient(1100px 620px at 0% 0%, rgba(255,77,109,.24), transparent 58%),
    radial-gradient(980px 660px at 100% 6%, rgba(255,122,89,.18), transparent 55%),
    radial-gradient(760px 560px at 50% 100%, rgba(255,179,107,.1), transparent 60%),
    linear-gradient(180deg, #050203 0%, #130508 42%, #1a070c 100%);
  background-position:center top, center top, 0 0, 100% 0, 50% 100%, 0 0;
  background-size:cover, cover, auto, auto, auto, auto;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.grain{ opacity:.085; }

header{
  padding: 8px 0;
}

header::before{
  content:"";
  position:absolute;
  inset:-6px -10px;
  z-index:-1;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(17,5,8,.58), rgba(17,5,8,.18));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(22px);
  box-shadow: 0 20px 80px rgba(0,0,0,.28);
}

.langBtn, .clockChip, .btn, .search, .infoLine, .chip, .cooldown, .tfPill, .fieldInput, .authTab{
  border-color: rgba(255,255,255,.14);
  background:
    radial-gradient(260px 90px at 20% 20%, rgba(255,77,109,.12), transparent 58%),
    radial-gradient(260px 90px at 80% 20%, rgba(255,122,89,.1), transparent 60%),
    linear-gradient(180deg, rgba(16,5,8,.72), rgba(16,5,8,.34));
}

.langBtn.active, .tfPill.active, .authTab.active{
  border-color: rgba(255,122,89,.42);
  background:
    linear-gradient(135deg, rgba(255,77,109,.16), rgba(255,122,89,.14)),
    rgba(14,4,6,.56);
}

.btnPrimary{
  background:
    radial-gradient(360px 140px at 20% 20%, rgba(255,77,109,.26), transparent 60%),
    radial-gradient(360px 140px at 80% 30%, rgba(255,122,89,.18), transparent 60%),
    linear-gradient(180deg, rgba(29,8,12,.88), rgba(18,5,8,.48));
  border-color: rgba(255,122,89,.38);
  box-shadow: 0 22px 90px rgba(255,77,109,.13), 0 22px 90px rgba(255,122,89,.12), 0 16px 70px rgba(0,0,0,.42);
}

.card, .authCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color: rgba(255,255,255,.11);
}

.homeTerminal{
  background:
    radial-gradient(1100px 540px at 12% 10%, rgba(255,77,109,.16), transparent 58%),
    radial-gradient(860px 520px at 100% 10%, rgba(255,122,89,.18), transparent 52%),
    radial-gradient(760px 540px at 70% 120%, rgba(255,179,107,.12), transparent 58%),
    linear-gradient(180deg, rgba(10,3,5,.78), rgba(10,3,5,.32));
  border-color: rgba(255,255,255,.12);
}

.homeTerminal::before{
  background:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(900px 520px at 10% 15%, rgba(255,77,109,.12), transparent 60%),
    radial-gradient(900px 520px at 95% 10%, rgba(255,122,89,.14), transparent 60%);
}

.homeTitle{
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,196,180,.84));
  -webkit-background-clip:text;
  background-clip:text;
}

.tickerPill.good,
.menuCard[data-cat="currencies"],
.menuCard[data-cat="crypto"],
.menuCard[data-cat="stocks"]{
  border-color: rgba(255,122,89,.22);
}

.menuCard{
  background:
    radial-gradient(520px 220px at 10% 15%, rgba(255,77,109,.1), transparent 55%),
    linear-gradient(180deg, rgba(14,4,7,.82), rgba(14,4,7,.38));
}

.menuCard::before{
  background:
    radial-gradient(360px 260px at 30% 30%, rgba(255,77,109,.2), transparent 60%),
    radial-gradient(340px 240px at 80% 25%, rgba(255,122,89,.18), transparent 60%),
    radial-gradient(300px 220px at 60% 120%, rgba(255,179,107,.12), transparent 60%);
}

.item{
  background:
    radial-gradient(420px 160px at 10% 20%, rgba(255,77,109,.09), transparent 60%),
    linear-gradient(180deg, rgba(15,4,7,.82), rgba(15,4,7,.38));
}

.signalBox{
  background:
    radial-gradient(520px 200px at 20% 20%, rgba(255,77,109,.18), transparent 60%),
    radial-gradient(520px 200px at 80% 30%, rgba(255,122,89,.12), transparent 60%),
    linear-gradient(180deg, rgba(15,4,7,.86), rgba(15,4,7,.34));
}

.canvasGlow{
  background:
    radial-gradient(420px 240px at 15% 30%, rgba(255,77,109,.24), transparent 60%),
    radial-gradient(380px 220px at 85% 25%, rgba(255,122,89,.18), transparent 60%),
    radial-gradient(420px 240px at 75% 110%, rgba(255,179,107,.14), transparent 60%);
}

.authCard{
  background:
    radial-gradient(700px 300px at 15% 10%, rgba(255,77,109,.16), transparent 60%),
    radial-gradient(700px 300px at 90% 25%, rgba(255,122,89,.12), transparent 60%),
    linear-gradient(180deg, rgba(14,4,7,.88), rgba(14,4,7,.4));
}

.fieldInput:focus{
  border-color: rgba(255,122,89,.34);
  box-shadow: 0 20px 80px rgba(255,77,109,.1), 0 20px 80px rgba(255,122,89,.1), 0 18px 70px rgba(0,0,0,.4);
}

.toast{
  background: rgba(22,7,10,.82);
}

.leaderboardSection{
  margin-top: 16px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(720px 300px at 10% 0%, rgba(255,77,109,.15), transparent 60%),
    radial-gradient(720px 320px at 100% 0%, rgba(255,122,89,.12), transparent 56%),
    linear-gradient(180deg, rgba(15,4,7,.86), rgba(15,4,7,.42));
  box-shadow: 0 24px 100px rgba(0,0,0,.44);
  overflow:hidden;
  position:relative;
  padding: 16px;
}

.leaderboardSection::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 44px 44px;
  opacity:.55;
  pointer-events:none;
}

.leaderboardSection > *{ position:relative; z-index:1; }

.leaderboardHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 14px;
}

.leaderboardEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,89,.28);
  background: rgba(255,77,109,.12);
  color: rgba(255,225,214,.9);
  font-size: 11px;
  font-family: var(--mono);
  letter-spacing: .8px;
  margin-bottom: 10px;
}

.leaderboardTitle{
  margin:0;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1;
  letter-spacing: -.7px;
  font-weight: 950;
}

.leaderboardSub{
  margin: 8px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  max-width: 56ch;
}

.leaderboardGlowOrb{
  width: 88px;
  height: 88px;
  border-radius: 999px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.24), transparent 18%),
    radial-gradient(circle at 40% 40%, rgba(255,77,109,.7), rgba(255,77,109,0) 65%),
    radial-gradient(circle at 70% 30%, rgba(255,122,89,.52), rgba(255,122,89,0) 52%);
  filter: blur(2px);
  opacity:.9;
  animation: orbFloat 6s ease-in-out infinite;
}

@keyframes orbFloat{
  0%,100%{ transform: translateY(0px) scale(1); }
  50%{ transform: translateY(-6px) scale(1.03); }
}

.leaderboardTableWrap{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  overflow:hidden;
  background: rgba(9,2,4,.52);
  backdrop-filter: blur(16px);
}

.leaderboardTable{
  width:100%;
  border-collapse: collapse;
}

.leaderboardTable thead th{
  text-align:left;
  padding: 13px 14px;
  font-size: 11px;
  letter-spacing: .9px;
  font-family: var(--mono);
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.03);
}

.leaderboardTable tbody td{
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}

.leaderboardRow{
  opacity: 0;
  transform: translateY(14px);
  animation: leaderboardIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes leaderboardIn{
  to{ opacity:1; transform: translateY(0); }
}

.leaderboardRow:hover{
  background: linear-gradient(90deg, rgba(255,77,109,.08), rgba(255,122,89,.04));
}

.leaderboardRankWrap{
  display:flex;
  align-items:center;
}

.leaderboardRankNum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 56px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,89,.2);
  background: rgba(255,255,255,.03);
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,235,229,.88);
}

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

.leaderboardNick{
  font-weight: 900;
  letter-spacing: .2px;
}

.leaderboardHot{
  display:inline-flex;
  align-items:center;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,122,89,.26);
  background: rgba(255,77,109,.14);
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: .7px;
  color: rgba(255,232,226,.92);
}

.leaderboardProfitCell{
  text-align:right;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(255,219,208,.95);
  font-weight: 700;
}

.skeleton{
  display:block;
  border-radius: 999px;
  position:relative;
  overflow:hidden;
  background: rgba(255,255,255,.06);
}

.skeleton::after{
  content:"";
  position:absolute; inset:0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation: shimmer 1.25s linear infinite;
}

@keyframes shimmer{
  100%{ transform: translateX(100%); }
}

.skeletonRank{ width: 56px; height: 32px; }
.skeletonNick{ width: min(210px, 44vw); height: 16px; }
.skeletonProfit{ width: 110px; height: 16px; margin-left:auto; }

.leaderboardError{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  padding: 14px;
  color: rgba(255,255,255,.76);
}

@media (max-width: 720px){
  .leaderboardHeader{
    flex-direction: column;
  }

  .leaderboardGlowOrb{
    width: 64px;
    height: 64px;
  }

  .leaderboardTable thead th,
  .leaderboardTable tbody td{
    padding: 12px 10px;
  }

  .leaderboardRankNum{
    min-width: 46px;
    padding: 7px 8px;
  }
}