: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;
}