/* =============================================================
   Spreadnix — Phase 2: Dashboard, Signal Generator,
   elevated auth micro-interactions, Settings / Support / FAQ.
   ============================================================= */

/* ===========================================================
   App shell (authenticated area)
   =========================================================== */
.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100vh - var(--header-h)); }
.app-side {
  border-right: 1px solid var(--surface-line);
  background: var(--bg-elev);
  padding: var(--sp-5);
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h));
}
.app-side__user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--r-md); background: var(--bg-sunken);
  margin-bottom: var(--sp-5);
}
.app-side__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--grad-primary); color: var(--on-primary); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700;
}
.app-side__user strong { display: block; font-family: var(--font-head); font-size: var(--fs-sm); }
.app-side__user span { font-size: var(--fs-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; display: block; }
.app-nav { display: grid; gap: 4px; }
.app-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-md);
  color: var(--text-muted); font-family: var(--font-head); font-weight: 500; font-size: var(--fs-sm);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.app-nav a svg { width: 18px; height: 18px; }
.app-nav a:hover { background: var(--bg-sunken); color: var(--text); transform: translateX(3px); }
.app-nav a.is-active { background: var(--c-primary-100); color: var(--c-primary-700); }
.app-nav a.danger:hover { color: var(--c-down); }
.app-main { padding: var(--sp-6); min-width: 0; }
.app-main__head { margin-bottom: var(--sp-6); }
.app-main__head h1 { font-size: clamp(1.55rem, 6vw, var(--fs-2xl)); }
.app-main__head p { margin-top: 6px; }

@media (max-width: 860px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-side {
    position: static; height: auto; border-right: none; border-bottom: 1px solid var(--surface-line);
    padding: var(--sp-3) var(--sp-4);
  }
  .app-side__user { display: none; }
  /* Tab bar: horizontal scroll, no visible scrollbar, edge-to-edge feel. */
  .app-nav {
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; gap: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav a { white-space: nowrap; padding: 9px 13px; }
  .app-nav a span.lbl { display: inline; }
  .app-main { padding: var(--sp-5) var(--sp-4); }
}

/* ---- KPI cards -------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
@media (max-width: 980px){ .kpi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.kpi {
  background: var(--bg-elev); border: 1px solid var(--surface-line);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.kpi:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
@media (max-width: 560px){ .kpi { padding: var(--sp-4); } .kpi .v { font-size: var(--fs-lg); } }
.kpi__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--c-primary-100); color: var(--c-primary-600); margin-bottom: 14px; }
.kpi__ic svg { width: 20px; height: 20px; }
.kpi .v { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); }
.kpi .k { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.kpi--accent .kpi__ic { background: var(--c-accent-100); color: var(--c-accent-700); }

.dash-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-6); align-items: start; }
@media (max-width: 1040px){ .dash-grid { grid-template-columns: 1fr; } }
.dash-aside { display: grid; gap: var(--sp-5); align-content: start; }

/* ---- Live markets widget ---------------------------------- */
.live-markets__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.live-markets__head h3 { font-size: var(--fs-md); }
.live-list { display: grid; gap: 2px; }
.live-row {
  display: grid; grid-template-columns: 1fr 80px auto; align-items: center; gap: 12px;
  padding: 11px 8px; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.live-row:hover { background: var(--bg-sunken); }
.live-row__pair { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); }
.live-row__pair svg { color: var(--text-subtle); }
.live-row .spark { width: 80px; height: 28px; }
.live-row__px { text-align: right; display: grid; gap: 2px; }
.live-row__px .px { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); }
.live-row__px .chg { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.live-row__px .chg.up { color: var(--c-up); }
.live-row__px .chg.down { color: var(--c-down); }
@media (max-width: 420px){ .live-row { grid-template-columns: 1fr auto; } .live-row .spark { display: none; } }

/* ===========================================================
   Signal Generator widget
   =========================================================== */
.generator {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--surface-line);
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(233,188,85,.10), transparent 55%),
    radial-gradient(600px 320px at 0% 100%, rgba(47,226,151,.07), transparent 55%),
    var(--bg-elev);
  box-shadow: var(--sh-md);
  padding: var(--sp-6);
}
@media (max-width: 560px){ .generator { padding: var(--sp-5) var(--sp-4); } }
.generator__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.generator__head h2 { font-size: var(--fs-lg); }
.generator__body { display: grid; gap: var(--sp-5); }

.gen-controls { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: end; }
@media (max-width: 560px){ .gen-controls { grid-template-columns: 1fr; } }

/* Custom premium dropdown */
.pair-select { position: relative; }
.pair-select__btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1.5px solid var(--surface-line); background: var(--bg-elev);
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pair-select__btn:hover { border-color: var(--c-primary-400); }
.pair-select.is-open .pair-select__btn { border-color: var(--c-primary-500); box-shadow: 0 0 0 4px var(--c-primary-100); }
.pair-select__btn .chev { margin-left: auto; transition: transform var(--t-fast); color: var(--text-muted); }
.pair-select.is-open .pair-select__btn .chev { transform: rotate(180deg); }
.pair-select__menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-elev); border: 1px solid var(--surface-line);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: min(440px, 64vh);
  opacity: 0; visibility: hidden; transform: translateY(8px); transform-origin: top;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.pair-select.is-open .pair-select__menu { opacity: 1; visibility: visible; transform: none; }

/* The picker field is capped at 460px (.gen-pair), so on wide screens the
   menu breaks out of it, centered under the button, to fit 2–3 columns. */
@media (min-width: 720px) {
  .pair-select__menu {
    left: 50%; right: auto; width: min(700px, calc(100vw - 48px));
    transform: translate(-50%, 8px);
  }
  .pair-select.is-open .pair-select__menu { transform: translate(-50%, 0); }
}

/* Fixed header inside the menu: search bar, then category tabs */
.pair-select__find {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--surface-line);
  color: var(--text-muted);
}
.pair-select__find svg { flex: none; }
.pair-select__find input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
  color: var(--text); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm);
}
.pair-select__find input::placeholder { color: var(--text-subtle); font-weight: 500; }

.pair-select__markets,
.pair-select__cats {
  flex: none; display: flex; gap: 6px; padding: 9px 10px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--surface-line);
}
.pair-select__markets { padding-bottom: 7px; }
.pair-select__markets::-webkit-scrollbar,
.pair-select__cats::-webkit-scrollbar { display: none; }
.pair-market,
.pair-cat {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--surface-line); background: var(--bg);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  color: var(--text-muted);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.pair-market {
  padding: 8px 14px;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  min-width: 94px;
  justify-content: center;
}
.pair-market:hover,
.pair-cat:hover { border-color: var(--c-primary-400); color: var(--text); }
.pair-market.is-active,
.pair-cat.is-active { background: var(--grad-primary); color: var(--on-primary); border-color: transparent; }
.pair-market i,
.pair-cat i { font-style: normal; font-size: 10px; opacity: .65; }

/* Scrollable pair list — multi-column on wide screens */
.pair-select__list {
  overflow-y: auto; padding: 6px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 2px 8px; align-content: start;
}

.pair-select__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border-radius: var(--r-sm); font-family: var(--font-head); font-weight: 600;
  color: var(--text); transition: background var(--t-fast);
}
.pair-select__opt:hover, .pair-select__opt.is-active { background: var(--c-primary-100); color: var(--c-primary-700); }
.pair-select__opt .tag-otc { margin-left: auto; font-size: var(--fs-xs); color: var(--text-subtle); font-weight: 500; }
.pair-select__opt-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Category headers inside the pair picker */
.pair-select__grp {
  grid-column: 1 / -1;
  position: sticky; top: -6px; z-index: 1;
  padding: 8px 12px 5px; margin: 4px 0 2px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle);
  background: var(--bg-elev);
}
.pair-select__grp:first-child { margin-top: 0; }

/* Per-pair expiration badge (in the menu option) */
.pair-exp {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-primary-600); background: var(--c-primary-100);
  padding: 3px 8px; border-radius: var(--r-pill);
}
.pair-select__opt svg { flex: none; }

/* Expiration badge on the picker button */
.pair-btn-exp {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
  color: var(--c-up); background: var(--c-up-soft);
  padding: 4px 10px; border-radius: var(--r-pill);
}
.pair-select.is-open .pair-select__btn .chev { transform: rotate(180deg); }

/* Expiry chips — the pair's recommended time carries a gold star */
.chip--exp { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; }
.chip--exp .chip-rec { font-style: normal; font-size: 10px; line-height: 1; color: var(--c-primary-600); }
.chip--exp.is-active .chip-rec { color: var(--on-primary); }
.chip--exp.is-rec:not(.is-active) { border-color: color-mix(in srgb, var(--c-primary-600) 45%, transparent); }

/* Expiration caption above the live countdown on the signal card */
.expiry__cap { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; }
.expiry__cap b { color: var(--text); font-family: var(--font-mono); }

.gen-btn { position: relative; }
.gen-btn .btn { min-width: 190px; }

/* Stage */
.gen-stage {
  min-height: 300px; border-radius: var(--r-lg);
  border: 1px dashed var(--surface-line);
  display: grid; place-items: center; text-align: center;
  padding: var(--sp-6); position: relative; overflow: hidden;
  background: var(--bg-sunken);
}

/* Idle */
.gen-idle .pulse-orb {
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; color: var(--c-primary-600);
  background: var(--c-primary-100); animation: pulseRing 2.4s infinite;
}
.gen-idle .pulse-orb svg { width: 46px; height: 46px; }

/* Analyzing */
.analyzing { display: grid; gap: var(--sp-5); place-items: center; width: 100%; }
.scanner {
  width: 220px; max-width: 80%; height: 92px; border-radius: var(--r-md);
  position: relative; overflow: hidden; background: var(--bg-elev);
  border: 1px solid var(--surface-line);
}
.scanner__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 5px; padding: 12px; }
.scanner__bars i {
  flex: 1; background: var(--grad-primary); border-radius: 3px; opacity: .85;
  animation: barPulse 1s ease-in-out infinite;
}
@keyframes barPulse { 0%,100% { height: 22%; } 50% { height: 92%; } }
.scanner__beam {
  position: absolute; top: 0; bottom: 0; width: 36%;
  background: linear-gradient(90deg, transparent, rgba(233,188,85,.20), transparent);
  animation: beam 1.3s var(--ease-out) infinite;
}
@keyframes beam { 0% { left: -40%; } 100% { left: 100%; } }
.analyzing__steps { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); min-height: 1.4em; }
.analyzing__steps b { color: var(--c-primary-600); }

/* Result card */
.signal-card {
  width: 100%; max-width: 420px; margin: 0 auto;
  border-radius: var(--r-xl); padding: var(--sp-6);
  color: #fff; position: relative; overflow: hidden;
  animation: cardReveal .6s var(--ease-spring);
  box-shadow: var(--sh-lg);
}
@keyframes cardReveal { 0% { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(24px); } 100% { opacity: 1; transform: none; } }
.signal-card.up   { background: linear-gradient(150deg, #0f9d6b, #12b886 55%, #0c8f7a); }
.signal-card.down { background: linear-gradient(150deg, #e0364b, #f0455a 55%, #c92a3d); }
.signal-card::after {
  content:""; position: absolute; inset: 0;
  background: radial-gradient(420px 200px at 80% -10%, rgba(255,255,255,.28), transparent 60%);
  pointer-events: none;
}
.signal-card__top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.signal-card__pair { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; }
.signal-card__badge { font-size: var(--fs-xs); font-weight: 700; background: rgba(255,255,255,.2); padding: 5px 12px; border-radius: var(--r-pill); }
.signal-card__dir {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: var(--sp-5) 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 5.4vw, 2.6rem); letter-spacing: 0;
}
.signal-card__dir .arrow {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: grid; place-items: center; animation: arrowBob 1.4s ease-in-out infinite;
}
.signal-card.up .arrow { animation: arrowBob 1.4s ease-in-out infinite; }
@keyframes arrowBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.signal-card.down .arrow { animation: arrowBobDown 1.4s ease-in-out infinite; }
@keyframes arrowBobDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.signal-card__dir .arrow svg { width: 34px; height: 34px; }
.signal-card__meta { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; position: relative; }
.signal-card__meta div { display: flex; flex-direction: column; gap: 7px; background: rgba(255,255,255,.14); border-radius: var(--r-md); padding: 14px 12px; text-align: center; }
.signal-card__meta .k { font-size: var(--fs-xs); opacity: .85; }
.signal-card__meta .v { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); }

/* Expiry ring */
.expiry { display: flex; align-items: center; gap: 14px; margin-top: var(--sp-5); position: relative; }
.expiry__ring { width: 58px; height: 58px; position: relative; flex: none; }
.expiry__ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.expiry__ring .bg { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 6; }
.expiry__ring .fg { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.expiry__num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; }
.expiry__txt strong { display: block; font-family: var(--font-head); }
.expiry__txt span { font-size: var(--fs-sm); opacity: .85; }
.signal-card.is-expired { filter: saturate(.55) brightness(.9); }
.signal-card__actions { display: flex; gap: 10px; margin-top: var(--sp-5); position: relative; }
.signal-card__actions .btn { flex: 1; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); box-shadow: none; }
.signal-card__actions .btn:hover { background: rgba(255,255,255,.26); }
.signal-card__actions .btn--solid { background: #fff; color: #1c160a; }
.signal-card__actions .btn--solid:hover { background: #fff; }

/* ===========================================================
   Elevated auth — floating labels & micro-interactions
   =========================================================== */
.auth__card {
  background: var(--bg-elev);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: clamp(1.75rem, 4vw, var(--sp-7));
  animation: authIn .55s var(--ease-out);
}
@keyframes authIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.ff { position: relative; margin-bottom: var(--sp-3); }
.ff__control { position: relative; }
.ff__input {
  width: 100%; padding: 22px 16px 8px;
  font-size: var(--fs-base); background: var(--bg-elev);
  border: 1.5px solid var(--surface-line); border-radius: var(--r-md); color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ff--icon .ff__input { padding-left: 46px; }
.ff--eye .ff__input { padding-right: 46px; }
.ff__input:focus { outline: none; border-color: var(--c-primary-500); box-shadow: 0 0 0 4px var(--c-primary-100); }
.ff__label {
  position: absolute; left: 16px; top: 15px; pointer-events: none;
  color: var(--text-subtle); font-size: var(--fs-base);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast), font-size var(--t-fast);
  transform-origin: left top;
}
.ff--icon .ff__label { left: 46px; }
.ff__input:focus + .ff__label,
.ff__input:not(:placeholder-shown) + .ff__label {
  transform: translateY(-11px) scale(.78);
  color: var(--c-primary-600);
}
.ff__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); transition: color var(--t-fast);
}
.ff__icon svg { width: 20px; height: 20px; }
.ff__input:focus ~ .ff__icon { color: var(--c-primary-600); }
.ff__eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); padding: 4px;
}
.ff__eye:hover { color: var(--c-primary-600); }
.ff__eye svg { width: 20px; height: 20px; }

/* valid / invalid states + animated check */
.ff__check {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(.4);
  width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent-600); color: #fff;
  display: grid; place-items: center; opacity: 0; transition: all var(--t-fast) var(--ease-spring);
}
.ff--eye .ff__check { right: 42px; }
.ff__check svg { width: 14px; height: 14px; }
.ff.is-valid .ff__check { opacity: 1; transform: translateY(-50%) scale(1); }
.ff.is-valid .ff__input { border-color: var(--c-accent-600); }
.ff.is-invalid .ff__input { border-color: var(--c-down); animation: shake .4s; }
.ff.is-invalid .ff__input:focus { box-shadow: 0 0 0 4px var(--c-down-soft); }
.ff.is-invalid .ff__label { color: var(--c-down); }

/* Collapse the error row until the field is actually invalid, so empty
   fields don't reserve dead vertical space (was inflating the gaps). */
.ff .error-msg { position: static; height: 0; min-height: 0; margin-top: 0; overflow: hidden; }
.ff.is-invalid .error-msg { opacity: 1; transform: none; height: auto; min-height: 1em; margin-top: 6px; }
.ff__input::placeholder { color: transparent; }
.ff textarea.ff__input { padding-top: 24px; resize: vertical; min-height: 110px; }

/* ===========================================================
   Settings
   =========================================================== */
.settings-card { display: grid; gap: var(--sp-5); }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--surface-line);
}
.setting-row:last-child { border-bottom: none; }
.setting-row__info strong { display: block; font-family: var(--font-head); }
.setting-row__info span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Toggle switch */
.switch { position: relative; width: 50px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .slider {
  position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--c-ink-300);
  transition: background var(--t-fast);
}
.switch .slider::before {
  content:""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  top: 3px; left: 3px; transition: transform var(--t-med) var(--ease-spring); box-shadow: var(--sh-xs);
}
.switch input:checked + .slider { background: var(--c-primary-600); }
.switch input:checked + .slider::before { transform: translateX(22px); }

/* ===========================================================
   Support
   =========================================================== */
.support-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
@media (max-width: 820px){ .support-grid { grid-template-columns: 1fr; } }
.support-card { text-align: center; }
.support-card .card__icon { margin-inline: auto; }
.support-channels { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
@media (max-width: 620px){ .support-channels { grid-template-columns: 1fr; } }
.channel {
  display: flex; align-items: center; gap: 14px; padding: var(--sp-4);
  border: 1px solid var(--surface-line); border-radius: var(--r-md); background: var(--bg-elev);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.channel:hover { transform: translateY(-3px); border-color: var(--c-primary-400); }
.channel .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--c-primary-100); color: var(--c-primary-600); display: grid; place-items: center; flex: none; }
.channel strong { display: block; font-family: var(--font-head); font-size: var(--fs-sm); }
.channel span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ===========================================================
   Signal-type selector (Standard / Advanced / Elite)
   =========================================================== */
.signal-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sig-type {
  --st: var(--c-primary-600); --st-soft: var(--c-primary-100);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 13px 14px; border-radius: var(--r-md); text-align: left;
  border: 1.5px solid var(--surface-line); background: var(--bg-elev);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.sig-type--blue { --st: var(--c-steel-600); --st-soft: var(--c-steel-100); }
.sig-type--teal { --st: var(--c-up); --st-soft: var(--c-up-soft); }
.sig-type--gold { --st: var(--c-primary-600); --st-soft: var(--c-primary-100); }
.sig-type__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--st-soft); color: var(--st); }
.sig-type__ic svg { width: 18px; height: 18px; }
.sig-type__name { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); }
.sig-type__meta { font-size: 0.72rem; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.sig-type:hover { border-color: var(--st); transform: translateY(-2px); }
.sig-type.is-active { border-color: var(--st); background: var(--st-soft); box-shadow: 0 6px 18px -8px var(--st); }
.sig-type.is-active .sig-type__ic { background: var(--st); color: var(--on-primary); }
@media (max-width: 560px) { .signal-types { grid-template-columns: 1fr; } .sig-type { flex-direction: row; align-items: center; } .sig-type__name { flex: 1; } }

/* ---- Generator settings panel ----------------------------- */
.gen-settings { border: 1px solid var(--surface-line); border-radius: var(--r-md); background: var(--bg-sunken); }
.gen-settings summary { cursor: pointer; padding: 13px 16px; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; list-style: none; user-select: none; }
.gen-settings summary::-webkit-details-marker { display: none; }
.gen-settings summary svg { color: var(--text-muted); }
.gen-settings[open] summary { border-bottom: 1px solid var(--surface-line); }
.gen-settings__body { padding: var(--sp-4) 16px 16px; display: grid; gap: var(--sp-4); }
.gen-settings__group > label { font-size: var(--fs-xs); color: var(--text-muted); display: block; margin-bottom: 8px; font-weight: 600; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 7px 15px; border-radius: var(--r-pill); border: 1px solid var(--surface-line); background: var(--bg-elev); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.chip:hover { border-color: var(--c-primary-400); color: var(--text); }
.chip.is-active { background: var(--grad-primary); color: var(--on-primary); border-color: transparent; }
.gen-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.gen-toggle > span:first-child { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; }
.gen-toggle > span:first-child svg { color: var(--text-muted); width: 16px; height: 16px; }

/* ---- Result card: tier ribbon, confidence bar, accents ---- */
.signal-card__ribbon { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--sp-4); padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em; }
.conf-bar { height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); overflow: hidden; margin-top: var(--sp-4); position: relative; }
.conf-bar span { display: block; height: 100%; border-radius: inherit; background: #fff; transform-origin: left; animation: confGrow .9s var(--ease-out) both; }
@keyframes confGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.signal-card[data-tier="elite"] { box-shadow: var(--sh-lg), 0 0 0 2px rgba(233,188,85,.55); }
.signal-card[data-tier="elite"] .signal-card__ribbon { background: var(--grad-gold-deep); color: var(--on-primary); }

/* Idle orb / scanner accent variants */
.pulse-orb--teal { background: var(--c-up-soft); color: var(--c-up); }
.pulse-orb--gold { background: var(--c-primary-100); color: var(--c-primary-600); }
.scanner--teal .scanner__bars i { background: linear-gradient(#3ce6a4, #0fb8b0); }
.scanner--gold .scanner__bars i { background: linear-gradient(#ffd277, #ed8f1c); }

/* ===========================================================
   TradingView live chart
   =========================================================== */
.tv-card { margin-top: var(--sp-6); }
.tv-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.tv-card__head h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.tv-card__head h3 svg { color: var(--c-primary-500); }
.tv-shell { height: 440px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--surface-line); background: var(--bg-sunken); }
.tv-shell #tv-chart, .tv-shell .tradingview-widget-container { height: 100%; width: 100%; }
@media (max-width: 560px) { .tv-shell { height: 340px; } }

/* ===========================================================
   Signals page — 3D level selector
   =========================================================== */
.signals-hero { position: relative; overflow: hidden; }
.signals-left {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-5);
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px); font-size: var(--fs-sm); color: var(--text-muted);
}
.signals-left svg { color: var(--c-primary-500); }
.signals-left strong { font-family: var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }

.level-select { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-6); }
@media (max-width: 900px) { .level-select { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.level-card {
  --lv: var(--c-primary-600); --lv-soft: var(--c-primary-100); --lv-grad: var(--grad-primary);
  position: relative; overflow: hidden; cursor: pointer; text-align: center;
  border: 1.5px solid var(--surface-line); border-radius: var(--r-xl);
  background: var(--bg-elev); color: var(--text);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  transform-style: preserve-3d; will-change: transform;
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
}
.level-card--blue { --lv: var(--c-steel-600); --lv-soft: var(--c-steel-100); --lv-grad: var(--grad-steel); }
.level-card--teal { --lv: var(--c-up); --lv-soft: var(--c-up-soft); --lv-grad: var(--grad-emerald); }
.level-card--gold { --lv: var(--c-primary-600); --lv-soft: var(--c-primary-100); --lv-grad: var(--grad-gold-deep); }
.level-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--lv-grad); z-index: 3; }
.level-card:hover { border-color: var(--lv); box-shadow: var(--sh-md); }
.level-card.is-selected {
  border-color: transparent;
  background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--lv-grad) border-box;
  box-shadow: 0 18px 50px -16px var(--lv), var(--glow-ring);
}
.level-card__check {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lv-grad); color: var(--on-primary);
  transform: scale(0) rotate(-90deg); opacity: 0;
  transition: transform var(--t-med) var(--ease-spring), opacity var(--t-fast);
}
.level-card.is-selected .level-card__check { transform: scale(1) rotate(0); opacity: 1; }
.level-card__body { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; }
.level-card__icon {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 8px;
  background: var(--lv-soft); color: var(--lv); transform: translateZ(30px);
  transition: background var(--t-med), color var(--t-med), transform var(--t-med);
}
.level-card.is-selected .level-card__icon { background: var(--lv-grad); color: var(--on-primary); }
.level-card__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); }
.level-card__signal { font-size: var(--fs-xs); font-weight: 700; color: var(--lv); text-transform: uppercase; letter-spacing: .05em; }
.level-card__deposit { margin: 10px 0 4px; font-size: var(--fs-sm); color: var(--text-muted); }
.level-card__deposit strong { font-family: var(--font-head); font-size: var(--fs-lg); color: var(--text); }
.level-card__stats { display: flex; gap: var(--sp-4); margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.level-card__stats > span { display: grid; font-size: 0.66rem; color: var(--text-subtle); line-height: 1.3; }
.level-card__stats b { font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text); }

/* ---- Per-level decorative FX layers ----------------------- */
.level-card__fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; transition: opacity var(--t-med); }
.level-card:hover .level-card__fx, .level-card.is-selected .level-card__fx { opacity: 1; }
.lvl-fx { position: absolute; }

/* Blue — radar sweep + faint grid */
.lvl-fx--grid { inset: 0; background-image: linear-gradient(var(--surface-line) 1px, transparent 1px), linear-gradient(90deg, var(--surface-line) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 70%); opacity: .5; }
.lvl-fx--radar { top: -40%; left: 50%; width: 180%; aspect-ratio: 1; transform: translateX(-50%); }
.lvl-fx--radar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(169,188,214,.30) 30deg, transparent 70deg); animation: lvlRadar 4s linear infinite; }
@keyframes lvlRadar { to { transform: rotate(360deg); } }

/* Teal — equalizer bars at the bottom */
.lvl-fx--bars { left: 0; right: 0; bottom: 0; height: 46%; display: flex; align-items: flex-end; gap: 6px; padding: 0 18px; mask-image: linear-gradient(transparent, #000); }
.lvl-fx--bars i { flex: 1; height: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(var(--c-up), transparent); transform-origin: bottom; transform: scaleY(.3); animation: lvlBar 1.4s var(--ease-out) infinite; animation-delay: var(--d); opacity: .55; }
@keyframes lvlBar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* Gold — aurora glow + shine sweep + twinkling sparks */
.lvl-fx--aurora { inset: -30%; background: radial-gradient(40% 40% at 30% 30%, rgba(255,210,119,.35), transparent 70%), radial-gradient(40% 40% at 70% 60%, rgba(237,143,28,.3), transparent 70%); filter: blur(8px); animation: lvlAurora 7s ease-in-out infinite; }
.lvl-fx--shine { top: -20%; bottom: -20%; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); animation: lvlShine 3.4s var(--ease-out) infinite; }
@keyframes lvlAurora { 0%, 100% { transform: translate(-6%, -4%); } 50% { transform: translate(6%, 4%); } }
@keyframes lvlShine { 0% { transform: translateX(-160%) skewX(-18deg); } 60%, 100% { transform: translateX(360%) skewX(-18deg); } }
.lvl-spark { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 8px #e9bc55; opacity: 0; animation: lvlSpark 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes lvlSpark { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .lvl-fx--radar i, .lvl-fx--bars i, .lvl-fx--aurora, .lvl-fx--shine, .lvl-spark { animation: none; }
}

/* ===========================================================
   Dashboard — signals promo banner
   =========================================================== */
.dash-grid--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1040px) { .dash-grid--even { grid-template-columns: 1fr; } }

.signals-promo {
  position: relative; overflow: hidden; margin-bottom: var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  border: 1px solid var(--surface-line); border-radius: var(--r-xl);
  padding: var(--sp-6);
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(233,188,85,.13), transparent 60%),
    radial-gradient(520px 260px at 0% 100%, rgba(47,226,151,.09), transparent 55%),
    var(--bg-elev);
  box-shadow: var(--sh-md);
}
.signals-promo__fx { position: absolute; inset: 0; background-image: linear-gradient(var(--surface-line) 1px, transparent 1px), linear-gradient(90deg, var(--surface-line) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(80% 120% at 80% 0%, #000, transparent 70%); opacity: .4; pointer-events: none; }
.signals-promo__body { position: relative; max-width: 60ch; }
.signals-promo__body h2 { font-size: var(--fs-xl); margin: 10px 0 8px; }
.signals-promo__body p { color: var(--text-muted); margin-bottom: var(--sp-5); }
.signals-promo__art { position: relative; flex: none; }
.signals-promo__art .pulse-orb { width: 96px; height: 96px; }
.signals-promo__art .pulse-orb svg { width: 40px; height: 40px; }
@media (max-width: 760px) { .signals-promo { padding: var(--sp-5) var(--sp-4); } .signals-promo__art { display: none; } }

/* ===========================================================
   Signal settings — detailed, capability-based panel
   =========================================================== */
.set-panel { --sp-accent: var(--c-primary-600); border: 1px solid var(--surface-line); border-radius: var(--r-lg); background: var(--bg-sunken); overflow: hidden; }
.set-panel--blue { --sp-accent: var(--c-steel-600); }
.set-panel--teal { --sp-accent: var(--c-up); }
.set-panel--gold { --sp-accent: var(--c-primary-600); }
.set-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: 14px 16px; border-bottom: 1px solid var(--surface-line); background: color-mix(in srgb, var(--sp-accent) 8%, transparent); }
.set-panel__head strong { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: var(--fs-sm); }
.set-panel__head strong svg { color: var(--sp-accent); }
.set-panel__head > div > span { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; }
.set-panel__tier { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--surface-line); font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-head); color: var(--sp-accent); white-space: nowrap; }
.set-panel__tier svg { color: var(--sp-accent); }
.set-panel__body { display: grid; }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 13px 16px; border-bottom: 1px solid var(--surface-line); flex-wrap: wrap; }
.set-row:last-child { border-bottom: none; }
.set-row__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.set-row__ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--sp-accent) 14%, transparent); color: var(--sp-accent); }
.set-row__info strong { display: block; font-family: var(--font-head); font-size: var(--fs-sm); }
.set-row__info span { font-size: var(--fs-xs); color: var(--text-muted); }
.set-row__ctrl { flex: none; }
@media (max-width: 520px) { .set-row__ctrl { width: 100%; } }

.settings-locked { display: flex; align-items: center; gap: var(--sp-4); padding: 18px 16px; flex-wrap: wrap; }
.settings-locked__lk { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--c-primary-100); color: var(--c-primary-500); }
.settings-locked__txt { flex: 1; min-width: 180px; }
.settings-locked__txt strong { display: block; font-family: var(--font-head); font-size: var(--fs-sm); }
.settings-locked__txt p { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 3px; max-width: 48ch; }

/* ---- Result card: strength meter + tags ------------------- */
.signal-card__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--sp-4); position: relative; }
.strength { display: inline-flex; align-items: center; gap: 8px; }
.strength__lbl { font-size: var(--fs-xs); opacity: .85; }
.strength__dots { display: inline-flex; gap: 4px; }
.strength__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.32); transform: scale(0); animation: strPop .4s var(--ease-spring) forwards; }
.strength__dots i:nth-child(2){ animation-delay: .07s } .strength__dots i:nth-child(3){ animation-delay: .14s } .strength__dots i:nth-child(4){ animation-delay: .21s } .strength__dots i:nth-child(5){ animation-delay: .28s }
.strength__dots i.on { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6); }
@keyframes strPop { to { transform: scale(1); } }
.signal-card__foot .chip-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.18); }

/* ===========================================================
   Generation animations — one per level
   =========================================================== */
/* Standard — calm concentric pulse */
.an-pulse { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.an-pulse span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c-primary-500); opacity: 0; animation: anPulse 2.2s var(--ease-out) infinite; }
.an-pulse span:nth-child(2) { animation-delay: .73s; } .an-pulse span:nth-child(3) { animation-delay: 1.46s; }
.an-pulse i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-100); color: var(--c-primary-500); position: relative; z-index: 1; animation: anCore 2.2s ease-in-out infinite; }
@keyframes anPulse { 0% { transform: scale(.42); opacity: .85; } 100% { transform: scale(1); opacity: 0; } }
@keyframes anCore { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Elite — orbiting AI confluence */
.an-orbit { position: relative; width: 152px; height: 152px; display: grid; place-items: center; }
.an-orbit__core { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; z-index: 3; color: var(--on-primary); background: radial-gradient(circle at 32% 28%, #ffd27a, #ed8f1c); box-shadow: 0 0 26px rgba(233,188,85,.6); animation: anCore 1.9s ease-in-out infinite; }
.an-orbit__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(233,188,85,.28); }
.an-orbit__ring.r1 { inset: 16px; animation: anSpin 3s linear infinite; }
.an-orbit__ring.r2 { inset: 2px; animation: anSpin 5.5s linear infinite reverse; }
.an-orbit__ring.r3 { inset: 32px; animation: anSpin 2.1s linear infinite; }
.an-orbit__ring i { position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #ffe7a8; box-shadow: 0 0 10px #e9bc55; }
.an-orbit__scan { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(233,188,85,.28), transparent 42%); animation: lvlRadar 2.6s linear infinite; }
@keyframes anSpin { to { transform: rotate(360deg); } }

/* ===========================================================
   Wide result card (fills the stage; no empty side gutters)
   =========================================================== */
.signal-card--wide {
  max-width: none; width: 100%; margin: 0;
  display: grid; grid-template-columns: 1.12fr .88fr; gap: var(--sp-6); align-items: stretch;
}
.signal-card--wide .signal-card__main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.signal-card--wide .signal-card__main .signal-card__dir { justify-content: flex-start; margin: var(--sp-4) 0; }
.signal-card--wide .signal-card__side {
  display: flex; flex-direction: column; gap: var(--sp-5); justify-content: center;
  padding-left: var(--sp-6); border-left: 1px solid rgba(255,255,255,.18);
}
.signal-card--wide .signal-card__meta { grid-template-columns: repeat(3, 1fr); }
.signal-card--wide .expiry { margin-top: 0; }
.signal-card--wide .signal-card__actions { margin-top: 0; }
@media (max-width: 760px) {
  .signal-card--wide { grid-template-columns: 1fr; gap: var(--sp-5); }
  .signal-card--wide .signal-card__side { padding-left: 0; border-left: none; padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.18); }
  .signal-card--wide .signal-card__main .signal-card__dir { justify-content: center; }
}

/* Chart appears (post-generation) with a soft entrance. */
.tv-card--in { animation: tvIn .5s var(--ease-out) both; }
@keyframes tvIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ===========================================================
   Signals flow — chooser screen <-> per-level generator screen
   =========================================================== */
.signals-flow[data-view="chooser"] .sig-gen { display: none; }
.signals-flow[data-view="gen"] .sig-chooser,
.signals-flow[data-view="gen"] .sig-chooser__hero { display: none; }
.signals-flow[data-view="gen"] .sig-gen { animation: genScreenIn .55s var(--ease-out) both; }
@keyframes genScreenIn { from { opacity: 0; transform: translateY(20px) scale(.99); } to { opacity: 1; transform: none; } }

.level-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--lv); opacity: .85; transition: gap var(--t-fast), opacity var(--t-fast); }
.level-card:hover .level-card__cta { gap: 10px; opacity: 1; }

/* ---- Per-level generator top bar -------------------------- */
.gen-topbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.gen-back { display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--surface-line); background: var(--bg-elev); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.gen-back:hover { color: var(--text); border-color: var(--c-primary-400); transform: translateX(-3px); }
.gen-back svg { width: 16px; height: 16px; }
.gen-topbar__lvl { --tc: var(--c-primary-600); display: inline-flex; align-items: center; gap: 11px; padding: 8px 15px 8px 9px; border-radius: var(--r-md); border: 1px solid var(--surface-line); background: var(--bg-elev); }
.gen-topbar__lvl--blue { --tc: var(--c-steel-600); }
.gen-topbar__lvl--teal { --tc: var(--c-up); }
.gen-topbar__lvl--gold { --tc: var(--c-primary-600); }
.gen-topbar__lvl .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--tc) 16%, transparent); color: var(--tc); }
.gen-topbar__lvl strong { display: block; font-family: var(--font-head); font-size: var(--fs-sm); }
.gen-topbar__lvl span { font-size: var(--fs-xs); color: var(--text-muted); }
.gen-topbar__left { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-muted); }
.gen-topbar__left svg { color: var(--c-primary-500); }
.gen-topbar__left strong { color: var(--text); font-family: var(--font-head); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .gen-topbar__left { margin-left: 0; width: 100%; } }

/* ===========================================================
   Full-screen 3D level transition
   =========================================================== */
.lvl-transition { --tc: var(--c-primary-500); --tg: var(--grad-primary); position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; perspective: 1300px; opacity: 0; transition: opacity .3s var(--ease-out); }
.lvl-transition--blue { --tc: var(--c-steel-500); --tg: var(--grad-steel); }
.lvl-transition--teal { --tc: var(--c-up); --tg: var(--grad-emerald); }
.lvl-transition--gold { --tc: var(--c-primary-500); --tg: var(--grad-gold-deep); }
.lvl-transition.is-on { opacity: 1; }
.lvl-transition.is-off { opacity: 0; }
.lvl-transition__bg { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--tc) 32%, transparent), transparent 70%), rgba(8, 6, 3, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lvl-transition__rings { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.lvl-transition__rings i { position: absolute; width: 220px; height: 220px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--tc) 55%, transparent); opacity: 0; animation: ringExp 1.5s var(--ease-out) infinite; }
.lvl-transition__rings i:nth-child(2) { animation-delay: .35s; }
.lvl-transition__rings i:nth-child(3) { animation-delay: .7s; }
@keyframes ringExp { 0% { transform: scale(.3); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.lvl-transition__stage { position: relative; z-index: 2; transform-style: preserve-3d; }
.lvl-transition__card { position: relative; display: grid; justify-items: center; gap: 10px; padding: 42px 60px; border-radius: var(--r-xl); border: 1.5px solid transparent; background: linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box, var(--tg) border-box; box-shadow: 0 30px 90px -18px var(--tc), var(--glow-ring); overflow: hidden; transform-style: preserve-3d; animation: lvlTransCard 1.05s var(--ease-out) both; }
@keyframes lvlTransCard { 0% { transform: rotateY(-78deg) rotateX(10deg) scale(.7); opacity: 0; } 38% { opacity: 1; } 62% { transform: rotateY(0) rotateX(0) scale(1.05); } 100% { transform: rotateY(0) scale(1.08); opacity: 1; } }
.lvl-transition__orb { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: var(--on-primary); background: var(--tg); box-shadow: 0 0 44px color-mix(in srgb, var(--tc) 60%, transparent); transform: translateZ(50px); animation: orbPop .6s .22s var(--ease-spring) both; }
.lvl-transition__orb svg { width: 46px; height: 46px; }
@keyframes orbPop { from { transform: translateZ(50px) scale(0) rotate(-90deg); opacity: 0; } to { transform: translateZ(50px) scale(1) rotate(0); opacity: 1; } }
.lvl-transition__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); letter-spacing: 0; color: var(--text); animation: fadeUp .5s .38s var(--ease-out) both; }
.lvl-transition__sig { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .07em; color: var(--tc); animation: fadeUp .5s .48s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.lvl-transition__shine { position: absolute; top: -25%; bottom: -25%; left: -30%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent); transform: skewX(-18deg); animation: lvlShine 1.5s .35s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .lvl-transition__card, .lvl-transition__orb, .lvl-transition__name, .lvl-transition__sig, .lvl-transition__shine, .lvl-transition__rings i { animation: none; }
}

/* ===========================================================
   Generator screen — centered pair, prettier settings, big CTA
   =========================================================== */
.gen-pair { max-width: 460px; margin: 0 auto; width: 100%; }

/* Settings rendered as a responsive grid of tiles */
.set-panel__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 14px; }
.set-panel.is-locked .set-panel__body { grid-template-columns: 1fr; }
.set-panel__body .set-row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--surface-line); border-radius: var(--r-md); background: var(--bg-elev); transition: border-color var(--t-fast), transform var(--t-fast); }
.set-panel__body .set-row:hover { border-color: color-mix(in srgb, var(--sp-accent) 45%, var(--surface-line)); transform: translateY(-2px); }
.set-panel__body .set-row__ctrl { width: 100%; margin-top: auto; }
.set-panel__body .chip-row { flex-wrap: wrap; }

/* Fixed, non-configurable parameter shown as a static ON badge */
.set-on {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--sp-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sp-accent) 42%, transparent);
  color: var(--sp-accent);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
}
.set-on svg { color: var(--sp-accent); }

/* Big, centered "Get Signal" button */
.gen-action { display: flex; justify-content: center; margin-top: var(--sp-2); }
.gen-go { position: relative; overflow: hidden; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); padding: 18px 54px; border-radius: var(--r-pill); min-width: 300px; box-shadow: var(--sh-glow); animation: goPulse 2.4s var(--ease-out) infinite; }
.gen-go svg { width: 20px; height: 20px; }
/* Pulsing ring via box-shadow so it shows outside the clipped (overflow:hidden) button. */
.gen-go__ring { display: none; }
@keyframes goPulse {
  0%   { box-shadow: var(--sh-glow), 0 0 0 0 rgba(233,188,85,.45); }
  70%  { box-shadow: var(--sh-glow), 0 0 0 16px rgba(233,188,85,0); }
  100% { box-shadow: var(--sh-glow), 0 0 0 0 rgba(233,188,85,0); }
}
@media (max-width: 520px) { .gen-go { width: 100%; min-width: 0; padding: 18px 24px; } }

/* ---- Settings click feedback: chip pop + ripple, switch bump */
.chip { position: relative; transition: transform .12s var(--ease-spring), border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.chip:active { transform: scale(.92); }
.chip--pop { animation: chipPop .4s var(--ease-spring); }
@keyframes chipPop { 0% { transform: scale(.9); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
.chip--pop::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid currentColor; opacity: .6; pointer-events: none; animation: chipRing .5s var(--ease-out) forwards; }
@keyframes chipRing { from { transform: scale(1); opacity: .55; } to { transform: scale(1.55); opacity: 0; } }
.switch.is-bumped .slider { animation: swBump .45s var(--ease-spring); }
@keyframes swBump { 0% { transform: scale(1); } 40% { transform: scale(1.13); } 100% { transform: scale(1); } }

/* ===========================================================
   Full-screen analyze / result overlay
   =========================================================== */
.sig-overlay { --oc: var(--c-primary-500); --og: var(--grad-primary); position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: max(18px, 3vh) 16px; opacity: 0; transition: opacity .3s var(--ease-out); }
.sig-overlay--blue { --oc: var(--c-steel-500); --og: var(--grad-steel); }
.sig-overlay--teal { --oc: var(--c-up); --og: var(--grad-emerald); }
.sig-overlay--gold { --oc: var(--c-primary-500); --og: var(--grad-gold-deep); }
.sig-overlay.is-on { opacity: 1; }
.sig-overlay.is-off { opacity: 0; }
.sig-overlay__bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 28%, color-mix(in srgb, var(--oc) 22%, transparent), transparent 70%), rgba(8, 6, 3, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sig-overlay__close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); backdrop-filter: blur(10px); transition: transform var(--t-fast), border-color var(--t-fast); }
.sig-overlay__close:hover { transform: rotate(90deg); border-color: var(--oc); }
.sig-overlay__inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; max-height: 94vh; display: grid; place-items: center; animation: ovIn .42s var(--ease-out) both; }
@keyframes ovIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

.sig-result { width: 100%; display: grid; gap: var(--sp-5); }
.sig-result--split { grid-template-columns: minmax(320px, 400px) 1fr; align-items: stretch; }
.sig-result--solo { place-items: center; }
.sig-result--solo .sig-result__card { max-width: 460px; width: 100%; }
.sig-result__card { min-width: 0; }
.sig-result__card .signal-card { margin: 0; max-width: none; }
.sig-result__chart { min-width: 0; display: flex; }
.sig-result__chart .tv-card { width: 100%; margin: 0; display: flex; flex-direction: column; }
.sig-result__chart .tv-shell { flex: 1; height: auto; min-height: 380px; }
@media (max-width: 900px) {
  .sig-result--split { grid-template-columns: 1fr; }
  .sig-overlay__inner { max-height: 100%; overflow-y: auto; align-content: start; }
  .sig-result__chart .tv-shell { min-height: 300px; }
}

.sig-limit { text-align: center; max-width: 420px; display: grid; justify-items: center; gap: 10px; color: var(--text); }
.sig-limit .pulse-orb { width: 92px; height: 92px; margin: 0 auto 6px; }
.sig-limit h3 { font-size: var(--fs-lg); }
.sig-limit p { color: var(--text-muted); max-width: 40ch; }
.sig-limit .btn { margin-top: 10px; }

/* ===== Deposit gate (signals locked until funded) ===================== */
.dep-tier--blue { --lv: var(--c-steel-600); --lv-soft: var(--c-steel-100); --lv-grad: var(--grad-steel); }
.dep-tier--teal { --lv: var(--c-up); --lv-soft: var(--c-up-soft); --lv-grad: var(--grad-emerald); }
.dep-tier--gold { --lv: var(--c-primary-600); --lv-soft: var(--c-primary-100); --lv-grad: var(--grad-gold-deep); }

.dep-gate {
  max-width: 760px; margin: 0 auto;
  background: var(--bg-elev); border: 1px solid var(--surface-line);
  border-radius: var(--r-xl); padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--sh-md);
}
.dep-gate__status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px; margin-bottom: 22px;
  background: var(--bg-sunken); border: 1px solid var(--surface-line); border-radius: var(--r-md);
}
.dep-gate__id { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.dep-gate__id svg { color: var(--text-muted); }
.dep-gate__dep { color: var(--text-muted); font-size: var(--fs-sm); }
.dep-gate__dep strong { color: var(--c-accent-600); font-size: var(--fs-md); }

.dep-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 560px) { .dep-tiers { grid-template-columns: 1fr; } }

.dep-tier {
  position: relative; display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 22px 14px 18px; border-radius: var(--r-md);
  border: 1px solid var(--surface-line); background: var(--bg-sunken);
  transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s, opacity .2s;
}
.dep-tier.is-locked { opacity: .62; }
.dep-tier.is-unlocked {
  border-color: color-mix(in srgb, var(--lv) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--lv) 30%, transparent), 0 10px 30px -16px var(--lv);
  opacity: 1;
}
.dep-tier__state {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--surface-line); color: var(--text-muted);
}
.dep-tier.is-unlocked .dep-tier__state { background: var(--lv-grad); color: var(--on-primary); border-color: transparent; }
.dep-tier__ic {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
  background: var(--lv-soft); color: var(--lv);
}
.dep-tier__name { font-weight: 700; color: var(--text); }
.dep-tier__amt { font-size: var(--fs-sm); color: var(--text-muted); }
.dep-tier__amt strong { color: var(--text); font-size: var(--fs-md); }
.dep-tier__sig { font-size: var(--fs-xs); color: var(--text-muted); }

.dep-gate__hint {
  margin: 20px auto 0; max-width: 56ch; text-align: center;
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5;
}
.dep-gate__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px;
}
.dep-gate__actions .btn { flex: 1 1 240px; max-width: 320px; }