/* Pipsly: the app's layout and components.
   Colours, type, spacing, motion and the shared components (buttons, cards,
   chips, segmented controls, skeletons) come from shared/css/tokens.css
   and base.css. Motion only animates transform and opacity. */
:root {
  --hold-ms: 1000ms;                  /* must match the hold timer in app.js */
  --tabbar-h: calc(72px + var(--safe-b));
  --col: 640px;                       /* content column on wide screens */
  --gutter: max(var(--s4), calc(50% - var(--col) / 2));
}

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
.label, .section { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; }
.section { margin: var(--s5) 2px var(--s2); }
.danger-h { color: var(--bad); }

/* ---------- pressables (buttons themselves are in base.css) ---------- */
.act, .acct-row, .acct-switch, .tabbar button, .hold { position: relative;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out); }
.act::before, .acct-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: rgba(255, 255, 255, .06); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.act:active, .acct-row:active, .acct-switch:active, .tabbar button:active { transform: scale(var(--press)); transition-duration: 60ms; }
.act:active::before, .acct-row:active::before { opacity: 1; transition-duration: 0s; }
.act:disabled { opacity: .45; pointer-events: none; }
.hold.busy::after { display: none; }      /* CLOSE ALL shows its own fill, not the sending ring */

/* Tool cards: equal height, icon + title + one short subtitle. */
.act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 96px; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.act .ic { width: 20px; height: 20px; margin-bottom: 10px; fill: none; stroke: var(--silver); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.act b { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.act small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.act.primary { border-color: rgba(201, 204, 209, .42); background: linear-gradient(160deg, rgba(201, 204, 209, .11), rgba(201, 204, 209, 0) 62%), var(--surface); }
.act.primary .ic { stroke: var(--accent-2); }
.act.primary b { color: var(--accent); }
.act.sm { min-height: 92px; padding: 12px 6px; align-items: center; justify-content: center; text-align: center; }
.act.sm .ic { margin-bottom: 6px; }
.act.sm b { font-size: 16px; }
.ic.pie .wedge { fill: currentColor; stroke: none; color: var(--silver); opacity: .55; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 12px; font-weight: 600; color: var(--fg-2); }
/* 16px stops iOS zooming (and jumping) when a field is focused. */
.field input, .row-input input, .big-input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-btn);
  border: 1px solid var(--line-2); background: var(--bg-sunk); font-size: 16px; outline: none; }
.field input:focus, .row-input input:focus, .big-input:focus { border-color: rgba(201, 204, 209, .65); }
.big-input { font-size: 22px; font-weight: 600; text-align: center; }
.form-err { color: var(--bad); font-size: 13px; min-height: 1.2em; margin: 0; }
.row-input { display: flex; gap: var(--s2); margin-top: var(--s3); }
.row-input input { flex: 1; min-width: 0; }

/* ---------- segmented controls (the control itself is in base.css) ---------- */
.tpsl .seg { margin-bottom: var(--s3); }

/* ---------- layout ---------- */
#main { height: 100%; display: flex; flex-direction: column; }
.topbar { flex: none; display: flex; align-items: center; gap: var(--s3); z-index: 5;
  padding: calc(10px + var(--safe-t)) var(--gutter) 10px;
  background: rgba(10, 10, 10, .9); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line); }
.brand-mark { flex: none; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: #000; }
/* the logo is the Home button: back to pipsly.app */
.home-link { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 40px; min-height: 44px;
  margin: -4px 0; color: var(--muted); text-decoration: none; font-size: 10px; font-weight: 650; letter-spacing: .03em; line-height: 1;
  -webkit-tap-highlight-color: transparent; transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.home-link .brand-mark { width: 28px; height: 28px; border-radius: 7px; }
.home-link:hover, .home-link:focus-visible { color: var(--accent); }
.home-link:active { transform: scale(var(--press)); }
.acct-switch { flex: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 44px; justify-content: center;
  background: none; border: 0; padding: 0; text-align: left; }
.acct-row-1 { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.acct-name { font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
/* LIVE / DEMO / PRACTICE: next to the account on every tab, and in every command toast. */
.mode-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-2);
  color: var(--muted); font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: .1em; line-height: 1.3; vertical-align: middle; }
.mode-badge.live { color: var(--accent-ink); background: linear-gradient(180deg, #F4F5F6, var(--accent-2)); border-color: transparent; }
.mode-badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 6px rgba(217, 68, 58, .8); }
.mode-badge.demo { color: #fff; background: transparent; border-color: #8D9198; }   /* graphite outline: DEMO never looks like LIVE */
.mode-badge.practice { color: var(--accent-ink); background: repeating-linear-gradient(135deg, var(--accent-2) 0 6px, var(--accent) 6px 12px); border-color: transparent; }
.acct-name::after { content: " ▾"; color: var(--muted); font-size: 11px; }
.acct-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pill { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.pill i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pill.on i { background: var(--good); }
.pill.on i::after, .pill.warn i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--good); animation: pp-ping 2.2s var(--ease-out) infinite; }
.pill.warn i, .pill.warn i::after { background: var(--warn); }
.pill.warn i::after { animation-duration: 1.6s; }
.pill.off i { background: var(--bad); }
/* EA offline: the tools dim (they still work: a tap waits up to 15 s for the EA) */
.offline .view[data-view="trade"] .act, .offline .hold, .offline .tpsl { opacity: .45; }
.view[data-view="trade"] .act, .hold, .tpsl { transition: transform var(--t-fast) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.pill b { font-weight: 600; }
button.pill { color: var(--fg); font: inherit; font-size: 12px; min-height: 32px; transition: transform var(--t-fast) var(--ease-out); }
button.pill:active { transform: scale(var(--press)); }
.pill.chip i::after { animation-duration: 3.2s; }                 /* a slow, soft breath when healthy */
.pill.chip.off i::after { animation: none; }
.chip-ms { display: inline-block; min-width: 2ch; text-align: right; }
.acct-name { white-space: nowrap; }
/* Phones: "London" sits small above "3.2 ms to broker", so the account label keeps its room. */
@media (max-width: 480px) {
  .pill.chip { padding: 4px 10px; }
  .pill.chip b { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
  .pill.chip .chip-region { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
  .pill.chip .chip-dot { display: none; }
}
/* Server status sheet: the tall globe on phones (cropped to the sheet's width), the wide one from 768 px */
.ss-video { position: relative; margin: -2px 0 var(--s3); height: min(32vh, 260px); border-radius: var(--r-card); overflow: hidden; background: #000; }
@media (min-width: 768px) { .ss-video { height: auto; aspect-ratio: 16 / 9; } }
.ss-video > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ss-video video { opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.ss-video video.on { opacity: 1; }
.ss-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ss-row span { color: var(--fg-2); }
.ss-row b { font-weight: 650; text-align: right; }
.ss-card { margin-top: var(--s3); padding: 4px 12px; border-radius: var(--r-btn); background: var(--bg-sunk); border: 1px solid var(--line); }
.ss-card.on { border-color: rgba(201, 204, 209, .45); }
.ss-card .ss-row:last-child { border-bottom: 0; }
.ss-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 0 2px; }
.ss-head small { color: var(--muted); font-size: 12px; }
.ss-note { margin: var(--s3) 0 var(--s3) !important; font-size: 13px !important; color: var(--muted) !important; }
@media (max-width: 380px) { .pill { padding: 6px 9px; gap: 6px; } }

.views { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.view { max-width: calc(var(--col) + 2 * var(--s4)); margin: 0 auto; padding: var(--s4) var(--s4) calc(var(--tabbar-h) + var(--s5)); }
.view.enter { animation: pp-rise-sm var(--t-slow) var(--ease-out) both; }
.spacer { height: var(--s2); }
.card + .card { margin-top: var(--s3); }
.grid { display: grid; gap: var(--s2); }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
.card .grid { margin-top: var(--s3); }
.empty { text-align: center; color: var(--muted); padding: 40px 0; margin: 0; }

/* ---------- equity card ---------- */
.hero { position: relative; overflow: hidden; padding: 18px var(--s4) var(--s4);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 60%), var(--surface); }
.hero > * { position: relative; }
.hero-main { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); }
.hero-figs { min-width: 0; }
/* Today's equity: green when up on the day, red when down (it is P/L). */
.spark { flex: none; width: 38%; max-width: 180px; height: 44px; color: var(--silver); overflow: visible; }
.spark.up { color: var(--good); } .spark.down { color: var(--bad); }
.spark-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-area { fill: currentColor; opacity: .1; }
.spark.empty { opacity: .3; }
/* Margin level: a bar that fills with a scaleX (0–1000%); amber under 300%, red under 150%. */
.gauge { margin-top: 14px; }
.gauge-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.gauge-top b { font-size: 14px; font-weight: 600; }
.gauge-bar { position: relative; height: 6px; margin-top: 6px; border-radius: 3px; overflow: hidden; background: var(--bg-sunk); border: 1px solid var(--line); }
.gauge-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--g, 0)); border-radius: inherit;
  background: linear-gradient(90deg, #8E949E, var(--silver)); transition: transform 600ms var(--ease-out); }
.gauge.warn .gauge-fill { background: var(--warn); } .gauge.warn b { color: var(--warn); }
.gauge.danger .gauge-fill { background: var(--bad); } .gauge.danger b { color: var(--bad); }
.gauge-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .16); }
.hero-top { display: flex; justify-content: space-between; align-items: center; min-height: 22px; }
.mode-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
.mode-tag:empty { display: none; }
.mode-tag.real { color: var(--silver); }
.hero-equity { font-size: 36px; font-weight: 650; letter-spacing: -.025em; line-height: 1.15; margin-top: 6px; }
.hero-pnl { font-size: 15px; font-weight: 600; margin-top: 2px; }
.hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s4); padding-top: 14px; border-top: 1px solid var(--line); }
.hero-grid div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-grid .label { white-space: nowrap; letter-spacing: .05em; font-size: 10.5px; }
.hero-grid b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A changed number counts to its new value with a brief tint. */
.tick-up { animation: tickUp 600ms var(--ease-out); }
.tick-down { animation: tickDown 600ms var(--ease-out); }
@keyframes tickUp { from { color: var(--good); } }
@keyframes tickDown { from { color: var(--bad); } }

.banner { margin-top: var(--s3); padding: 11px 13px; border-radius: var(--r-btn); font-size: 14px; }
.banner.bad { background: rgba(217, 68, 58, .1); border: 1px solid rgba(217, 68, 58, .4); color: #FFB4AE; }
.banner.warn { background: rgba(201, 204, 209, .08); border: 1px solid rgba(201, 204, 209, .32); color: #E9EAEC; }

/* ---------- skeletons (first load; the shimmer itself is in base.css) ---------- */
.hero-equity.skel { display: inline-block; min-width: 9ch; }
.hero-pnl.skel { display: inline-block; min-width: 14ch; }
.hero-grid b.skel { min-width: 5ch; }

/* ---------- hold to close: the fill is a scaleX, linear over the hold ---------- */
.hold { overflow: hidden; width: 100%; height: 68px; border-radius: var(--r-card); border: 1px solid rgba(217, 68, 58, .5);
  background: rgba(217, 68, 58, .1); color: #FFD6D2; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #A8231C, var(--danger)); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-slow) var(--ease-out); will-change: transform; }
.hold.holding .hold-fill { transform: scaleX(1); transition: transform var(--hold-ms) linear; }
.hold-text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hold-text b { font-size: 16px; letter-spacing: .03em; }
.hold-text small { font-size: 12px; opacity: .75; }

/* ---------- positions ---------- */
.pos-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.sym-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3); }
.sym-card b { font-size: 15px; }
.sym-card .row { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-2); margin-top: var(--s1); }
/* Layers: one row per price area (app.js renderLayers) */
.layers { margin-bottom: var(--s3); }
.layers-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: 0 2px var(--s2); flex-wrap: wrap; }
.layers-head b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.layers-head-r { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.how-btn { font: inherit; font-size: 12px; font-weight: 600; color: var(--accent, #FFFFFF); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* one-time "New" card (app.js areaTip) */
.area-tip { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; padding: 14px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .45); background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 70%), var(--surface); }
.area-tip p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
.area-tip p b { color: var(--fg); }
.area-tip-new { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0A0A0A; background: #FFFFFF; border-radius: 999px; padding: 2px 8px; }
.area-tip-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.area-tip-btns .btn { padding: 8px 14px; }
.guide-steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.guide-steps b { color: var(--fg); }
.area-hold { height: 60px; margin-top: 2px; }
.area-hold small { font-size: 11.5px; }
/* chart: one-time hint over the first layer line (chart.js) */
.ch-hint { position: absolute; left: 12px; z-index: 6; max-width: 70%; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: #0A0A0A;
  background: #FFFFFF; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); pointer-events: auto; cursor: pointer; animation: chHint 1.6s ease-in-out infinite; }
.ch-hint::after { content: ""; position: absolute; left: 18px; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #FFFFFF; }
.ch-hint.below::after { bottom: auto; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #FFFFFF; }
@keyframes chHint { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ch-hint { animation: none; } }
.layers-list { display: flex; flex-direction: column; gap: 6px; }
.layer { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  padding: 10px 12px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid #EF5350; border-radius: 12px;
  transition: border-color 150ms, background 150ms; }
.layer.buy { border-left-color: #26A69A; }
.layer:hover { border-color: var(--line-2); }
.layer.on { border-color: #FFFFFF; border-left-color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.ly-top { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.ly-top b { font-size: 14px; }
.ly-at { font-size: 14px; font-weight: 600; }
.ly-be { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 5px; letter-spacing: .08em; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .45); }
.ly-pnl { margin-left: auto; font-weight: 650; font-size: 15px; }
.ly-pnl.pos { color: var(--good); } .ly-pnl.neg { color: var(--bad); }
.ly-row { display: flex; justify-content: space-between; gap: var(--s2); font-size: 12.5px; color: var(--muted); }
.ly-row b { color: var(--fg); font-weight: 600; }
.pos-card[hidden] { display: none; }
.pos-list { display: flex; flex-direction: column; gap: var(--s2); }
/* trade list sort chips (app.js POS_SORTS) */
.pos-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--s2); }
.pos-sort .label { margin-right: 2px; }
.pos-sort button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.pos-sort button.on { color: #0A0A0A; background: var(--accent, #FFFFFF); border-color: transparent; }
/* "Layer 3 of 12 · #50112345 · opened 14:32" */
.pc-meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.pc-meta:empty { display: none; }
/* One card per position, updated in place (only changed text is touched). */
.pos-card { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s3); padding: var(--s3) 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card);
  /* each card lays out on its own, and cards scrolled out of view skip rendering */
  contain: layout paint style; content-visibility: auto; contain-intrinsic-size: auto 104px; }
.hero-figs, .hero-grid b { contain: layout style; }
.pos-card.enter { animation: pp-rise-sm var(--t-slow) var(--ease-out) both; }
.pc-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.pc-sym { font-weight: 650; font-size: 15px; letter-spacing: -.005em; }
.pc-lots { font-size: 13px; color: var(--fg-2); }
.side { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; letter-spacing: .08em; border: 1px solid var(--line-2); color: var(--fg-2); }
.pc-pnl { font-weight: 650; font-size: 16px; text-align: right; }
.pc-px { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--muted); }
.pc-px b { color: var(--fg); font-weight: 600; }
.pc-px .arrow { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lvl { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  background: var(--bg-sunk); font-size: 12px; color: var(--muted); }
.lvl b { color: var(--fg-2); font-weight: 600; }
.lvl.none b { color: var(--muted); font-weight: 500; }
.pc-note { font-size: 12px; color: var(--muted); }
.pos-card.unmanaged { opacity: .55; }

/* ---------- activity ---------- */
.quick { margin-bottom: var(--s3); }
.feed { display: flex; flex-direction: column; gap: var(--s2); }
.msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 11px 13px; font-size: 14px;
  white-space: pre-wrap; word-break: break-word; }
.msg.alert { border-color: rgba(201, 204, 209, .35); }
.msg time { display: block; font-size: 11px; color: var(--muted); margin-bottom: var(--s1); font-variant-numeric: tabular-nums; }
.msg b { color: var(--fg); }
.msg code, .toast code { background: var(--bg-sunk); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.msg pre { white-space: pre-wrap; margin: var(--s1) 0 0; font-size: 12.5px; }

/* ---------- more ---------- */
.acct-list { display: flex; flex-direction: column; gap: 6px; }
.acct-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 12px;
  border-radius: var(--r-btn); background: var(--bg-sunk); border: 1px solid var(--line); text-align: left; }
.acct-row.on { border-color: rgba(201, 204, 209, .55); }
.acct-row b { font-variant-numeric: tabular-nums; }
.acct-row small { color: var(--muted); display: block; }
.meta { display: flex; flex-direction: column; gap: var(--s2); margin: var(--s5) 0 var(--s3); }
.meta div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.meta b { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; }
/* install guide (install.js): numbered steps, each with a picture of the button to look for */
.ins h3 { margin: 0 0 var(--s2); }
.ins > p { margin: 0 0 var(--s4); color: var(--fg-2); }
.ins .btn + .btn { margin-top: var(--s2); }
.ins-steps { display: grid; gap: var(--s3); margin: 0 0 var(--s4); padding: 0; list-style: none; counter-reset: none; }
.ins-steps li { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
  animation: pp-rise var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--k) * 70ms + 80ms); }
.ins-ic { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(201, 204, 209, .12); color: var(--accent); }
.ins-ic b { position: absolute; top: -6px; left: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-2); color: var(--accent-ink, #0A0A0A); font-size: 11.5px; font-weight: 800; box-shadow: 0 0 0 3px var(--surface); }
.ins-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-tx b { font-size: 15.5px; font-weight: 650; }
.ins-tx small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.ins-note { margin: calc(var(--s2) * -1) 0 var(--s4); }
.ins-copied:empty { display: none; }
.ins-copied { margin: var(--s2) 0 0; text-align: center; word-break: break-all; }
.ins-one { --btn-h: 54px; margin-bottom: var(--s2); }
.ins .ins-never { display: table; margin: var(--s3) auto 0; color: var(--muted); font-size: 13.5px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ins-steps li { animation: none; } }
/* install-guide scenes: one 2.8 s loop each, steps a beat apart (--k); still with reduce-motion */
.ins-sc { width: 44px; height: 44px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  --sc-d: calc(var(--k, 0) * 350ms); }
.ins-sc .sc-dim { stroke: rgba(236, 237, 239, .32); }
.ins-sc .sc-fill { fill: rgba(236, 237, 239, .12); }
.ins-sc .sc-hi { fill: currentColor; stroke: none; }
.ins-sc .sc-dot { fill: currentColor; stroke: none; }
.ins-sc .sc-row { fill: rgba(201, 204, 209, .16); stroke: none; animation: scRow 2.8s ease-in-out var(--sc-d) infinite; }
.ins-sc .sc-tap { fill: currentColor; stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: scTap 2.8s ease-out var(--sc-d) infinite; }
.ins-sc .sc-late { animation-delay: calc(var(--sc-d) + 700ms); }
.ins-sc .sc-bob { animation: scBob 2.8s ease-in-out var(--sc-d) infinite; }
.ins-sc .sc-slide { animation: scSlide 2.8s cubic-bezier(.2, .8, .2, 1) var(--sc-d) infinite; }
.ins-sc .sc-drop { transform-box: fill-box; transform-origin: top right; animation: scDrop 2.8s cubic-bezier(.2, .8, .2, 1) var(--sc-d) infinite; }
.ins-sc .sc-pop { transform-box: fill-box; transform-origin: center; animation: scPop 2.8s cubic-bezier(.34, 1.56, .64, 1) var(--sc-d) infinite; }
.ins-sc .sc-spin { transform-origin: 24px 24px; animation: scSpin 2.8s ease-in-out var(--sc-d) infinite; }
@keyframes scTap { 0%, 38% { opacity: 0; transform: scale(.2); } 46% { opacity: .5; } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes scBob { 0%, 100% { transform: none; } 25% { transform: translateY(-2.5px); } 42% { transform: translateY(1px); } }
@keyframes scSlide { 0%, 10% { opacity: 0; transform: translateY(9px); } 30%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes scDrop { 0%, 40% { opacity: 0; transform: scale(.6); } 58%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes scPop { 0%, 30% { opacity: 0; transform: scale(0); } 50%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes scSpin { 0%, 15% { transform: rotate(-70deg); } 45%, 85% { transform: rotate(45deg); } 100% { transform: rotate(-70deg); } }
@keyframes scRow { 0%, 45% { fill: rgba(201, 204, 209, .16); } 55%, 80% { fill: rgba(201, 204, 209, .45); } 100% { fill: rgba(201, 204, 209, .16); } }
@media (prefers-reduced-motion: reduce) {
  .ins-sc *, .ins-sc .sc-tap { animation: none !important; }
  .ins-sc .sc-tap { opacity: 0; }
  .ins-sc .sc-spin { transform: rotate(45deg); }
}

.security .sec-row { display: flex; align-items: center; gap: var(--s3); }
.security .sec-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.security .sec-row b { font-size: 15px; font-weight: 600; }
.security small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.security .btn.block { margin-top: var(--s3); }

/* ---------- locked: Face ID / passcode / password before anything else ---------- */
.lock { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3);
  padding: calc(var(--safe-t) + var(--s5)) max(var(--s5), var(--safe-r)) calc(var(--safe-b) + var(--s5)) max(var(--s5), var(--safe-l));
  overflow-y: auto; text-align: center; background: var(--bg-deep); animation: pp-fade var(--t-base) var(--ease-out); }
.lock-glow { position: absolute; left: 50%; top: 40%; width: 110vmin; height: 110vmin; margin: -55vmin 0 0 -55vmin; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 204, 209, .2), rgba(201, 204, 209, .06) 48%, transparent 74%); }
.lock > * { position: relative; }
.lock-mark { width: 140px; height: auto; margin-bottom: var(--s2); }
.lock h2 { margin: 0; font-size: var(--fs-h3); letter-spacing: -.01em; }
.lock p { margin: 0; max-width: 320px; color: var(--fg-2); font-size: var(--fs-body); }
.lock-acct { font-size: 13px; color: var(--muted); }
.lock .btn.block, .lock-pw { width: 100%; max-width: 360px; }
.lock .btn.prime { --btn-h: 52px; --btn-fs: 16px; }
.lock-pw { display: flex; flex-direction: column; gap: var(--s3); text-align: left; }
.lock .form-err { max-width: 360px; }
body.locked #main { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lock { animation: none; } }

/* ---------- tab bar ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 6px max(6px, calc(var(--gutter) - 10px)) calc(6px + var(--safe-b));
  background: rgba(10, 10, 10, .92); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line); transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; padding: 4px 0;
  background: none; border: 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.tabbar svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.on { color: var(--accent); }
.tab-ind { --i: 0; position: absolute; top: -1px; left: max(6px, calc(var(--gutter) - 10px)); width: calc((100% - 2 * max(6px, calc(var(--gutter) - 10px))) / 7); height: 2px;
  transform: translateX(calc(var(--i) * 100%)); transition: transform var(--t-slow) var(--ease-out); pointer-events: none; }
.tab-ind::after { content: ""; display: block; width: 28px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--accent-2); }
.tabbar .badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--fg); font-size: 10.5px; font-style: normal; line-height: 15px; }
.tabbar .dot { position: absolute; top: 6px; left: calc(50% + 10px); width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
/* Phone keyboard open: the bar steps aside instead of riding the keyboard. */
.kb .tabbar { transform: translate3d(0, 100%, 0); opacity: 0; pointer-events: none; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + 10px); z-index: 20; display: flex; flex-direction: column;
  align-items: center; gap: var(--s2); padding: 0 var(--s3); pointer-events: none; transition: opacity var(--t-fast) var(--ease-out); }
/* Moved under the top bar whenever the bottom spot would cover CLOSE ALL or the TP/SL box. */
.toasts.top { bottom: auto; top: calc(var(--safe-t) + 66px); flex-direction: column-reverse; }
.toasts.swap { opacity: 0; }
.toast { pointer-events: auto; width: 100%; max-width: 520px; padding: 12px 14px; border-radius: var(--r-card);
  background: rgba(27, 31, 37, .96); border: 1px solid var(--line-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transform: translate3d(0, 14px, 0); transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.toasts.top .toast { transform: translate3d(0, -14px, 0); }
.toast.in, .toasts.top .toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; }
.toast.dragging { transition: none; }
.toast-head { display: flex; align-items: center; gap: 10px; }
.t-title { flex: 1; font-size: 14px; font-weight: 600; }
.t-ms { font-size: 12px; color: var(--muted); }
.t-body { font-size: 13.5px; color: var(--fg-2); margin-top: 6px; white-space: pre-wrap; max-height: 34vh; overflow-y: auto; overscroll-behavior: contain; }
.t-body:empty { display: none; }
.t-acct { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.t-acct:empty { display: none; }
.t-acct b { color: var(--fg-2); font-weight: 600; }
/* Spinner → check / ! crossfade in place. */
.t-ic { position: relative; flex: none; width: 18px; height: 18px; }
.t-ic > * { position: absolute; inset: 0; opacity: 0; transform: scale(.6);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.t-spin::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14);
  border-top-color: var(--accent-2); animation: pp-spin .7s linear infinite; }
.t-ok, .t-err { width: 18px; height: 18px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.t-ok { stroke: var(--good); } .t-err { stroke: var(--bad); }
.toast[data-state="busy"] .t-spin, .toast[data-state="done"] .t-ok, .toast[data-state="fail"] .t-err { opacity: 1; transform: none; }

/* ---------- sheet ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet-wrap::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out); }
.sheet-wrap.in::before { opacity: var(--scrim, 1); }
/* glass: the app shows softly through the sheet */
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 18px calc(22px + var(--safe-b)); border: 1px solid var(--line-2); border-bottom: 0;
  background: rgba(21, 24, 29, .84); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-radius: 16px 16px 0 0; transform: translate3d(0, 100%, 0); transition: transform var(--t-slow) var(--ease-out); }
.sheet-wrap.in .sheet { transform: none; }
.sheet-wrap.out .sheet { transition-timing-function: var(--ease-in-out); }
.sheet-wrap.dragging::before, .sheet.dragging { transition: none; }
.sheet::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 16px; }
.sheet h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.sheet p { margin: 0 0 14px; color: var(--fg-2); font-size: 14px; }
.sheet .grid { margin-top: 14px; }
.host-form { display: flex; flex-direction: column; gap: var(--s3); }
.pair-code { font: 700 38px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .18em; color: var(--fg); text-align: center;
  padding: 18px 0; border: 1px dashed var(--line-2); border-radius: var(--r-card); background: var(--bg-sunk); user-select: all; -webkit-user-select: all; }
.steps { margin: 14px 0 0; padding-left: 20px; color: var(--fg-2); font-size: 14px; }
.steps li { margin-bottom: 6px; }

/* ---------- sign in / create account ---------- */
/* The still monument, the Pipsly mark + wordmark, and one glass card that fits a
   390x844 phone without scrolling. Motion is transform/opacity only. */
.auth { position: fixed; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #0A0A0A;
  overflow-anchor: none; }   /* the card growing (Create account) must not scroll the page */
.auth-bg { position: fixed; inset: 0; pointer-events: none; }
.auth-bg > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.auth-bg-poster, .auth-bg-video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.auth-bg-poster.on, .auth-bg-video.on { opacity: .45; }
/* darkens the middle and bottom so every text stays readable (contrast >= 4.5:1) */
.auth-shade { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0, rgba(10, 10, 10, .15), rgba(10, 10, 10, .6) 55%, rgba(10, 10, 10, .92)); }
.auth-body { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 20px) 16px calc(var(--s5) + var(--safe-b)); }
.auth-first { min-height: calc(100svh - var(--safe-t) - var(--safe-b) - 20px - var(--s5));
  display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.auth-brand { text-align: center; }
.auth-mark { display: block; width: 72px; height: 72px; margin: 0 auto 10px; filter: drop-shadow(0 6px 24px rgba(201, 204, 209, .25));
  animation: auth-mark 400ms var(--ease-out) 120ms both; }
.auth-word { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .02em; color: #fff;
  animation: pp-fade 400ms var(--ease-out) 200ms both; }
.auth-tag { margin: 6px 0 0; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #8A8F98;
  animation: pp-fade 400ms var(--ease-out) 260ms both; }
.auth-tag span { color: #FFFFFF; text-shadow: 0 0 14px rgba(255, 255, 255, .6); }
@media (min-width: 768px) { .auth-mark { width: 96px; height: 96px; } .auth-word { font-size: 26px; } }
@keyframes auth-mark { from { opacity: 0; transform: scale(.96); } }

.auth-form { width: 100%; max-width: 400px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 24px;
  background: rgba(21, 24, 29, .72); border: 1px solid #23272E; border-radius: 16px;
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  animation: auth-card 450ms var(--ease-out) 260ms both; }
@keyframes auth-card { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
.auth-form > * { animation: auth-item 360ms var(--ease-out) both; animation-delay: calc(320ms + var(--i, 0) * 40ms); }
@keyframes auth-item { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.auth-form.shake { animation: auth-shake 300ms var(--ease-out); }
@keyframes auth-shake { 20% { transform: translate3d(-6px, 0, 0); } 45% { transform: translate3d(5px, 0, 0); } 70% { transform: translate3d(-3px, 0, 0); } 90% { transform: translate3d(1px, 0, 0); } }
.auth.leaving .auth-body { opacity: 0; transform: scale(.985); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }

/* one field style for every input on this page */
.af { display: flex; flex-direction: column; gap: 6px; }
.af > span:first-child { font-size: 13px; font-weight: 600; color: #8A8F98; }
.af em { font-style: normal; font-weight: 400; opacity: .8; }
.af input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid #2A2F37; background: #0A0A0A;
  color: var(--fg); font: inherit; font-size: 16px;   /* 16px+ so iPhones never zoom in on tap */ outline: none;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.af input::placeholder { color: #5F6570; }
.af input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(201, 204, 209, .25); }
.af input[aria-invalid="true"] { border-color: var(--bad); }
/* browsers' autofill tint would make some inputs another colour: keep them all identical */
.af input:-webkit-autofill, .af input:-webkit-autofill:hover, .af input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg); caret-color: var(--fg); -webkit-box-shadow: 0 0 0 1000px #0A0A0A inset; transition: background-color 9999s; }
.af input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #0A0A0A inset, 0 0 0 3px rgba(201, 204, 209, .25); border-color: var(--accent-2); }
.af-wrap { position: relative; display: block; }
.af-wrap input { padding-right: 48px; }
.af-eye { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; color: #8A8F98; border-radius: 10px; cursor: pointer; }
.af-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.af-eye .af-eye-x { opacity: 0; transition: opacity 180ms var(--ease-out); }
.af-eye[aria-pressed="true"] .af-eye-x { opacity: 1; }
.af-eye:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.af-tg b { position: absolute; left: 14px; top: 0; line-height: 48px; font-weight: 600; color: #8A8F98; pointer-events: none; }
.af-tg input { padding-left: 30px; padding-right: 14px; }
.af-help { font-size: 12px; color: #8A8F98; transition: color 180ms var(--ease-out); }
.af-help.err { color: #FF8A80; }
.af-code { text-transform: uppercase; letter-spacing: .12em; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; }
/* create-account fields: open and close smoothly (height via grid rows, the rest is opacity/transform) */
.af-extra { display: grid; grid-template-rows: 0fr; margin-top: -14px; transition: grid-template-rows 320ms var(--ease-out), margin-top 320ms var(--ease-out); }
.af-extra-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 2px 3px 3px; margin: -2px -3px -3px; }
.af-extra .af { opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.auth.reg .af-extra { grid-template-rows: 1fr; margin-top: 0; }
.auth.reg .af-extra .af { opacity: 1; transform: none; transition-delay: calc(80ms + (var(--i) - 2) * 40ms); }
.af-go { position: relative; height: 48px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #0A0A0A;
  transition: transform 120ms var(--ease-out), filter 180ms var(--ease-out); }
.af-go:active { transform: scale(.98); }
.af-go .af-spin { position: absolute; left: calc(50% - 9px); top: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(10, 10, 10, .25); border-top-color: #0A0A0A; opacity: 0; animation: idleSpin 700ms linear infinite; }
.af-go.busy .af-spin { opacity: 1; }
.af-go.busy #authSubmitText { opacity: 0; }
.af-switch { margin: 0; text-align: center; font-size: 14px; color: #8A8F98; }
.af-switch .link-btn { min-height: 44px; font-weight: 600; }
.auth-form .legal-links { margin: 0; }
/* an empty error line takes no room (no gap above the button) */
.auth-form .form-err:empty { margin-top: -14px; min-height: 0; }
/* ---- motion: slow, chrome, never in the way (transform/opacity only) ---- */
/* breathing halo behind the mark */
.auth-mark-wrap { position: relative; display: block; width: 72px; height: 72px; margin: 0 auto 10px; }
.auth-mark-wrap .auth-mark { margin: 0; }
.auth-mark-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220%; height: 220%; margin: -110% 0 0 -110%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 204, 209, .28), rgba(201, 204, 209, 0));
  animation: auth-halo 6s ease-in-out 600ms infinite; pointer-events: none; z-index: -1; opacity: .6; }
@keyframes auth-halo { 50% { opacity: 1; transform: scale(1.12); } }
/* a light sweep across the letters only (masked by the mark itself) */
.auth-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url(img/pipsly/mark-chrome-256.png) center / contain no-repeat; mask: url(img/pipsly/mark-chrome-256.png) center / contain no-repeat; }
.auth-sheen::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 248, 225, .75), rgba(255, 255, 255, 0));
  transform: translate3d(0, 0, 0) skewX(-18deg); animation: auth-sweep 7s cubic-bezier(.45, 0, .2, 1) 1.1s infinite; }
@keyframes auth-sweep { 0% { transform: translate3d(0, 0, 0) skewX(-18deg); } 22%, 100% { transform: translate3d(420%, 0, 0) skewX(-18deg); } }
/* a thin chrome line that draws in under the tagline, then softly shimmers */
.auth-line { display: block; width: 120px; height: 1px; margin: 12px auto 0; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(201, 204, 209, 0), var(--accent-2), rgba(201, 204, 209, 0));
  animation: auth-draw 900ms var(--ease-out) 420ms both, auth-shimmer 4s ease-in-out 1.4s infinite; }
@keyframes auth-draw { from { transform: scaleX(0); opacity: 0; } }
@keyframes auth-shimmer { 50% { opacity: .45; } }
/* a chrome hairline gliding along the top edge of the card */
.auth-form { position: relative; overflow: hidden; }
.auth-form::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(201, 204, 209, 0), rgba(255, 255, 255, .9), rgba(201, 204, 209, 0));
  animation: auth-glide 6s ease-in-out 900ms infinite; opacity: 0; }
@keyframes auth-glide { 0% { transform: translate3d(-100%, 0, 0); opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 70%, 100% { transform: translate3d(250%, 0, 0); opacity: 0; } }
/* a slow sheen across the chrome button (and once more on hover) */
.af-go { overflow: hidden; }
.af-go #authSubmitText { position: relative; z-index: 1; }    /* the sheen passes behind the words */
.af-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
  transform: translate3d(0, 0, 0) skewX(-18deg); animation: auth-btn 6s ease-in-out 2.2s infinite; }
@keyframes auth-btn { 0% { transform: translate3d(0, 0, 0) skewX(-18deg); } 18%, 100% { transform: translate3d(520%, 0, 0) skewX(-18deg); } }
@media (hover: hover) { .af-go:hover { filter: brightness(1.06); } }
/* the background drifts a few pixels with the pointer (laptops; set by app.js) */
.auth-bg { transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.04); transition: transform 1200ms var(--ease-out); }
@media (min-width: 768px) { .auth-mark-wrap { width: 96px; height: 96px; } }

@media (max-height: 760px) { .auth-first { gap: 14px; } .auth-mark-wrap, .auth-mark { width: 56px; height: 56px; } .auth-mark-wrap { margin-bottom: 6px; } .auth-form { padding: 20px; gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .auth-mark, .auth-word, .auth-tag, .auth-form, .auth-form > * { animation: pp-fade 200ms linear both !important; transform: none !important; }
  .auth-form.shake { animation: none !important; }
  .af-extra .af { transform: none !important; }
  .auth-mark-wrap::before, .auth-sheen::after, .auth-form::before, .af-go::after, .auth-line { animation: none !important; }
  .auth-sheen, .auth-form::before, .af-go::after { display: none; }
  .auth-bg { transform: none; transition: none; }
}

/* What the manager does: swipeable on phones, three columns on wide screens. */
.showcase { width: 100%; max-width: 960px; margin: 48px auto 0; }
.showcase .section { text-align: center; margin-top: 0; }
.sc-row { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--s3); margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s4) var(--s1);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--s4); scrollbar-width: none; }
.sc-row::-webkit-scrollbar { display: none; }
.sc-card { margin: 0; scroll-snap-align: start; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.sc-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #050505; }
.sc-card figcaption { padding: var(--s3) 14px var(--s4); }
.sc-card b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.sc-card span { font-size: 13px; color: var(--muted); }
@media (min-width: 720px) {
  .sc-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; }
}

/* ---------- panels (headers, chart placeholder) ---------- */
.left-switch, .gutter, .panel-head { display: none; }
.panel-head { align-items: center; gap: var(--s2); min-height: 40px; margin: -4px 0 var(--s2); }
.panel-head b { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .09em; color: var(--fg-2); }
.panel-toggle { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.panel-toggle svg { width: 16px; height: 16px; fill: none; stroke: var(--fg-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-base) var(--ease-out); }
.act-collapsed .panel-toggle svg { transform: rotate(180deg); }
.chart-ph { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s5) var(--s4); }
.chart-ph-art { position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 10px; width: 100%; height: 42vh; max-height: 420px; min-height: 180px;
  padding: 0 var(--s4); border-radius: var(--r-btn); background: var(--bg-sunk); border: 1px solid var(--line); }
.chart-ph-art i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(201, 206, 214, .2), rgba(201, 206, 214, .02)); }
.chart-ph-art::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent); animation: pp-shimmer 1.8s var(--ease-in-out) infinite; }

/* ---------- chart tab ---------- */
.chart-mode { margin-bottom: var(--s3); }
.chart-wrap { display: flex; flex-direction: column; gap: var(--s2); }
.chart-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.sym-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-btn);
  border: 1px solid var(--line-2); background: var(--surface); font-weight: 650; font-size: 15px; }
.sym-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.chart-tools .tf { flex: 1 1 260px; min-width: 0; }
.chart-tools .tf button { min-height: 38px; font-size: 12px; padding: 0; }
.chart-toggles { display: flex; gap: 6px; margin-left: auto; }
.tog { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--muted); font-size: 12px; font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
.tog:active { transform: scale(var(--press)); }
.tog[aria-pressed="true"] { color: var(--accent); border-color: rgba(201, 204, 209, .55); }
.tog.icon { display: grid; place-items: center; padding: 0; }
.tog svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Phones: about 40% of the screen (Phase 8); pinch and pan stay inside the chart. */
.chart-stage { position: relative; height: 40svh; min-height: 250px; border-radius: var(--r-card); overflow: hidden;
  background: #000; border: 1px solid var(--line); touch-action: none; overscroll-behavior: contain; }
/* live price header: big number + % today; OHLC while scrubbing */
.chart-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-height: 40px; padding: 0 2px; }
.ch-price { font-size: clamp(24px, 6.4vw, 32px); font-weight: 750; letter-spacing: -.01em; transition: color var(--t-base) var(--ease-out); }
.ch-price.up { color: #26A69A; } .ch-price.down { color: #EF5350; }   /* the same green/red as the candles (config/chart.json) */
.ch-chg { font-size: 13px; font-weight: 650; color: var(--muted); }
.ch-chg.pos { color: var(--good); } .ch-chg.neg { color: var(--bad); }
.ch-ohlc { flex-basis: 100%; font-size: 12px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.chart-head.scrub .ch-chg { display: none; }
.chart-head.scrub .ch-ohlc { display: block; }
/* the glowing last-price line (moved with transform only) */
.ch-glow { position: absolute; left: 0; top: 0; height: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(255, 255, 255,0), rgba(255, 255, 255,.85) 30%, var(--accent));
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .55), 0 0 14px 2px rgba(201, 204, 209, .25); }
.mt5-chart { position: absolute; inset: 0; }
.tv-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg-sunk); }
.sess-layer { position: absolute; inset: 0 0 26px 0; pointer-events: none; }
.sess { position: absolute; top: 0; bottom: 0; }
.sess.ldn { background: rgba(201, 206, 214, .045); }
.sess.ny { background: rgba(158, 163, 171, .05); }
.chart-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s5); text-align: center; color: var(--muted); font-size: 14px; pointer-events: none; }
.chart-msg.tap { pointer-events: auto; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chart-note { margin: 0; font-size: 12px; color: var(--muted); }
/* full screen: the chart takes the whole screen (and the whole landscape) */
.chart-wrap.full { position: fixed; inset: 0; z-index: 40; padding: calc(var(--safe-t) + 8px) max(10px, var(--safe-r)) calc(var(--safe-b) + 8px) max(10px, var(--safe-l));
  background: var(--bg); animation: pp-fade var(--t-base) var(--ease-out); }
.chart-wrap.full .chart-stage { flex: 1; height: auto; }
.chart-full .tabbar { display: none; }
.chart-full .view[data-view="chart"] { contain: none !important; animation: none !important; }   /* let the fixed full-screen chart reach the viewport */
.pc-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.pc-sheet div { display: flex; flex-direction: column; gap: 2px; }
.pc-sheet b { font-size: 15px; font-weight: 600; }
/* TP / SL for one layer area (chart card + Layer areas section) */
.area-tpsl { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px;
  background: rgba(255, 255, 255, .04); }
.area-tpsl .big-input { margin: 0; }
.layer-tpsl { margin-top: 8px; }
.area-old { margin: 0 0 12px; }
/* chart: the layers of one price area (chart.js openLayerCard) */
.ly-items { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; margin: 0 0 12px; overscroll-behavior: contain; }
.ly-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; font: inherit; font-size: 13px;
  color: var(--fg); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.ly-item:hover { border-color: var(--line-2); }
.ly-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ly-main b { font-weight: 600; white-space: nowrap; }
.ly-n { display: inline-block; min-width: 26px; margin-right: 6px; padding: 0 5px; font-size: 10.5px; font-weight: 700; text-align: center; color: var(--accent, #FFFFFF);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 5px; vertical-align: 1px; }
.ly-main small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ly-pl { font-weight: 600; text-align: right; white-space: nowrap; }
/* the Close button is for a mouse (computer); phones swipe instead */
.ly-close { display: none; font: inherit; font-size: 12px; font-weight: 600; color: #FF8A80; background: transparent; border: 1px solid rgba(217, 68, 58, .55);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.ly-close:hover { background: rgba(217, 68, 58, .12); }
.ly-close.confirm { color: #fff; background: #D9443A; border-color: #D9443A; }
.tip-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ly-close { display: inline-block; }
  .tip-touch { display: none; } .tip-mouse { display: inline; }
}
/* sort chips + best/worst line + swipe-left-to-close rows (chart.js openLayerCard, app.js layerSwipe) */
.ly-sort { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.ly-sort button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.ly-sort button.on { color: #0A0A0A; background: var(--accent, #FFFFFF); border-color: transparent; }
.ly-best { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; color: var(--muted); }
.ly-wrap { position: relative; border-radius: 10px; overflow: hidden; flex-shrink: 0; transition: max-height .3s, opacity .3s; max-height: 60px; }
.ly-wrap .ly-item { position: relative; z-index: 1; touch-action: pan-y; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ly-wrap.swiping .ly-item { transition: none; }
.ly-under { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 16px; font-size: 13px; font-weight: 700;
  color: #fff; background: rgba(217, 68, 58, .55); border-radius: 10px; opacity: 0; transition: background .15s, opacity .15s; }
.ly-wrap.swiping .ly-under, .ly-wrap.closing .ly-under { opacity: 1; }
.ly-wrap.armed .ly-under { background: #D9443A; }
.ly-wrap.closing { max-height: 0; opacity: 0; }
.ly-tip { margin: -4px 0 12px; }
@media (orientation: landscape) and (max-height: 520px) { .chart-stage { height: 70svh; } .chart-wrap.full .chart-head { min-height: 0; } .chart-wrap.full .ch-price { font-size: 20px; } }
@media (max-width: 400px) { .chart-toggles { margin-left: 0; flex-wrap: wrap; } .chart-toggles .tog { padding: 0 9px; } }

/* ---------- laptops: the terminal ----------
   tools | chart | positions, activity along the bottom. Sizes come from
   --lw / --rw / --bh (dragged with the gutters, remembered per viewer). */
@media (min-width: 1024px) {
  :root { --tabbar-h: 0px; --gutter: var(--s4); }
  .tabbar { display: none; }
  .views { display: grid; overflow: hidden;
    grid-template-columns: var(--lw, 380px) 9px minmax(0, 1fr) 9px var(--rw, 380px);
    grid-template-rows: auto minmax(0, 1fr) 9px var(--bh, 240px);
    grid-template-areas:
      "lsw  gl chart gr pos"
      "left gl chart gr pos"
      "left gl gb    gb gb"
      "left gl act   act act"; }
  .act-collapsed .views { --bh: 52px; }
  .act-collapsed .view[data-view="activity"] > :not(.panel-head) { display: none; }
  .left-switch { display: grid; grid-area: lsw; margin: var(--s3) var(--s3) 0; }
  .view { max-width: none; margin: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s3) var(--s3) var(--s4);
    contain: strict; }   /* a change in one panel never re-lays out the others */
  .view[data-view="trade"], .view[data-view="more"] { grid-area: left; }
  .view[data-view="chart"] { grid-area: chart; }
  .view[data-view="positions"] { grid-area: pos; }
  .view[data-view="activity"] { grid-area: act; }
  .view[data-view="more"] .section:first-child { margin-top: var(--s2); }
  .panel-head { display: flex; }
  .view[data-view="chart"] { display: flex; flex-direction: column; }
  .view[data-view="chart"] .chart-wrap { flex: 1; min-height: 0; }
  .view[data-view="chart"] .chart-stage { flex: 1; height: auto; min-height: 240px; }
  .pos-summary { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .gutter { display: block; position: relative; touch-action: none; outline: none; }
  .gutter-l { grid-area: gl; cursor: col-resize; } .gutter-r { grid-area: gr; cursor: col-resize; } .gutter-b { grid-area: gb; cursor: row-resize; }
  .gutter::after { content: ""; position: absolute; background: var(--line); transition: opacity var(--t-base) var(--ease-out); }
  .gutter-l::after, .gutter-r::after { top: 0; bottom: 0; left: 4px; width: 1px; }
  .gutter-b::after { left: 0; right: 0; top: 4px; height: 1px; }
  .gutter::before { content: ""; position: absolute; inset: 0; background: rgba(201, 204, 209, .55); opacity: 0;
    transition: opacity var(--t-base) var(--ease-out); }
  .gutter-l::before, .gutter-r::before { left: 3px; right: 3px; }
  .gutter-b::before { top: 3px; bottom: 3px; }
  .gutter:hover::before, .gutter:focus-visible::before, .gutter.drag::before { opacity: 1; }
  .dragging-layout, .dragging-layout * { user-select: none; -webkit-user-select: none; }
  .toasts { bottom: var(--s4); }
}

/* ---------- sizes ---------- */
@media (min-width: 720px) { .hero-equity { font-size: 42px; } }
@media (max-width: 360px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- reduced motion: instant changes or short fades, no slides ---------- */
@media (prefers-reduced-motion: reduce) {
  .view.enter { animation: pp-fade var(--t-base) linear both; }
  /* (the CLOSE ALL fill keeps its linear progress: it tells you how long to hold) */
  .seg-pill, .tab-ind, .tabbar, .sheet, .toast { transition-property: opacity; animation: none; }
  .sheet, .sheet-wrap.in .sheet { transform: none; opacity: 0; transition: opacity var(--t-base) linear; }
  .sheet-wrap.in .sheet { opacity: 1; }
  .sheet-wrap.out .sheet { opacity: 0; }
  .toast, .toasts.top .toast { transform: none; }
  .tick-up, .tick-down, .pill.on i::after, .pill.warn i::after, .chart-ph-art::after, .pos-card.enter { animation: none; }
  .gauge-fill, .panel-toggle svg { transition: none; }
  .t-spin::before { animation-duration: 1.6s; }
}

/* ---------- gestures and phone rules (Phase 6) ---------- */
/* Full-screen areas use the dynamic viewport (the phone's toolbars never cut them off). */
#main { height: 100dvh; }
/* The browser keeps vertical scrolling; sideways swipes come to the app. */
@media (max-width: 1023px) {
  .views, .view { touch-action: pan-y; }
  .view { padding-left: max(var(--s4), var(--safe-l)); padding-right: max(var(--s4), var(--safe-r)); }
  .view.swiping { transition: none; will-change: transform, opacity; }
  .view.spring { transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .view.enter[data-from="r"] { animation: pp-in-r var(--t-slow) var(--ease-out) both; }
  .view.enter[data-from="l"] { animation: pp-in-l var(--t-slow) var(--ease-out) both; }
}
@keyframes pp-in-r { from { opacity: 0; transform: translate3d(32px, 0, 0); } }
@keyframes pp-in-l { from { opacity: 0; transform: translate3d(-32px, 0, 0); } }

/* Position cards slide over an action underneath: chrome Breakeven (right), red Close (left). */
.view[data-view="positions"] { position: relative; }
.pos-card { position: relative; z-index: 1; touch-action: pan-y; }
.pos-card.swiping { transition: none; will-change: transform; }
.pos-card.spring { transition: transform var(--t-base) var(--ease-out); }
.pc-under { --p: 0; position: absolute; z-index: 0; display: flex; align-items: center; padding: 0 18px; border-radius: var(--r-card);
  overflow: hidden; pointer-events: none; }
.pc-under::before { content: ""; position: absolute; inset: 0; background: rgba(201, 204, 209, .2); opacity: calc(.35 + var(--p) * .65); }
.pc-under[data-dir="x"]::before { background: rgba(217, 68, 58, .22); }
.pcu { position: relative; display: none; flex-direction: column; gap: 1px; opacity: calc(.4 + var(--p) * .6);
  transform: scale(.94); transition: transform var(--t-fast) var(--ease-out); }
.pcu b { font-size: 14px; font-weight: 700; } .pcu small { font-size: 11.5px; opacity: .8; }
.pcu-be { color: var(--accent); }
.pcu-x { color: var(--bad); margin-left: auto; text-align: right; }
.pc-under[data-dir="be"] .pcu-be, .pc-under[data-dir="x"] .pcu-x { display: flex; }
.pc-under.armed .pcu { transform: scale(1.06); }
.swipe-tip { margin: 0 0 var(--s2); padding: 10px 12px; border-radius: var(--r-btn); border: 1px solid rgba(201, 204, 209, .3);
  background: rgba(201, 204, 209, .08); font-size: 13px; color: var(--fg-2); }

/* Pull to refresh (Positions, Activity) */
.ptr { --p: 0; --y: 0px; position: fixed; left: 50%; top: calc(var(--safe-t) + 66px); z-index: 4; width: 38px; height: 38px; margin-left: -19px;
  display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-2); pointer-events: none;
  opacity: var(--p); transform: translate3d(0, calc(var(--y) - 30px), 0);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.ptr.pulling { transition: none; }
.ptr-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14); border-top-color: var(--accent-2);
  transform: rotate(calc(var(--p) * 300deg)); }
.ptr.ready .ptr-spin { border-top-color: var(--accent); }
.ptr.busy .ptr-spin { animation: pp-spin .7s linear infinite; }
@media (min-width: 1024px) { .ptr, .pc-under, .swipe-tip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .view.spring, .pos-card.spring, .ptr { transition-duration: 0s; }
  .ptr.busy .ptr-spin { animation-duration: 1.6s; }
}
/* touch screens: timeframe buttons are full 44 px targets too */
@media (pointer: coarse) { .chart-tools .tf button { min-height: 44px; } .panel-toggle { width: 44px; height: 44px; } }
/* Close one trade: the visible button for swipe left (only when the EA can do it) */
.pc-close { margin-left: auto; min-height: 36px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid rgba(217, 68, 58, .45);
  background: transparent; color: var(--bad); font-size: 13px; font-weight: 600; transition: transform var(--t-fast) var(--ease-out); }
.pc-close:active { transform: scale(var(--press)); }
@media (pointer: coarse) { .pc-close { min-height: 44px; } }
/* Derisk: how much? (the % buttons in the sheet) */
.dk-pcts .btn { min-height: 48px; font-size: 16px; font-variant-numeric: tabular-nums; }
.sheet .row-input + .form-err { margin-top: 6px; }

/* ---------- verification pills, banners, steps ---------- */
.field select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r-btn); border: 1px solid var(--line-2);
  background: var(--bg-sunk); color: inherit; font-size: 16px; }
.vf-banner { border: 1px solid rgba(201, 204, 209, .4); background: rgba(201, 204, 209, .07); color: var(--fg); }
.vf-banner p { margin: 0 0 10px; }
.vf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-actions .btn { flex: 1 1 140px; }
.acct-row-end { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.vf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 11px; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.vf-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.vf-pill.on i { background: var(--good); } .vf-pill.warn i { background: var(--warn); } .vf-pill.off i { background: var(--bad); }
.vf-sheet h3 { margin-bottom: 4px; }
.vf-one { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: var(--s3) 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.vf-acct { margin: var(--s3) 0; }
.vf-prog { height: 4px; margin-top: var(--s4); border-radius: 2px; background: var(--line-2); overflow: hidden; }
.vf-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform-origin: 0 50%;
  transition: transform var(--t-base) var(--ease-out); }
.vf-stepof { margin: 8px 0 2px !important; font-size: 11px !important; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) !important; }
.vf-step-t { margin: 0 0 4px; font-size: 17px; }
.vf-step-x { margin: 0 0 var(--s3) !important; color: var(--fg-2); }
.vf-fields { display: grid; gap: 10px; margin-bottom: var(--s3); }
.vf-fields input[readonly] { color: var(--muted); }
.vf-mail { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px; font-size: 13px; }
.vf-mail dt { color: var(--muted); } .vf-mail dd { margin: 0; overflow-wrap: anywhere; }
.vf-body { max-height: 30vh; overflow: auto; margin: 0 0 var(--s3); padding: 12px; border-radius: var(--r-btn); border: 1px solid var(--line-2);
  background: var(--bg-sunk); font: 13px/1.5 inherit; font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.vf-nav { margin-top: var(--s3); }
.vf-state { margin: var(--s3) 0; padding: 14px; border-radius: var(--r-btn); border: 1px solid var(--line-2); }
.vf-state.ok { border-color: rgba(60, 180, 110, .45); background: rgba(60, 180, 110, .07); }
.vf-state.pending { border-color: rgba(201, 204, 209, .4); background: rgba(201, 204, 209, .06); }
.vf-state p { margin: 4px 0 0 !important; color: var(--fg-2); }
.vf-under { margin-top: 10px; }
.vf-never { margin: var(--s4) 0 4px !important; font-size: 12.5px !important; color: var(--muted) !important; }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent);
  font-size: 14px; font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .vf-prog i { transition: none; } }

/* ---------- inactivity pause (Phase 6) ---------- */
.idle-banner p { margin: 0 0 10px; }
.idle-line { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.idle-line.paused { color: var(--bad); font-weight: 600; }
.idle-steps { list-style: none; display: grid; gap: 14px; margin: var(--s4) 0; padding: 0; }
.idle-steps li { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.idle-steps i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); position: relative; }
.idle-steps li.now { color: var(--fg); }
.idle-steps li.now i { border-color: var(--accent-2); }
.idle-steps li.now i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--accent); animation: idleSpin .9s linear infinite; }
.idle-steps li.done { color: var(--fg); }
.idle-steps li.done i { border-color: var(--good); background: var(--good); }
.idle-steps li.done i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #0A0A0A; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes idleSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .idle-steps li.now i::after { animation: none; border-top-color: var(--accent-2); } }
.vf-code { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--s3); padding: 12px 14px; border-radius: var(--r-btn); border: 1px solid rgba(201, 204, 209, .45); background: var(--bg-sunk); }
.vf-code span { font-size: 12px; color: var(--muted); }
.vf-code b { flex: 1; font-size: 22px; font-weight: 750; letter-spacing: .04em; color: var(--accent); user-select: all; }

/* Privacy / Terms / Risk links */
.legal-links { margin: 10px 0 0; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.legal-links a { color: var(--fg-2); }

/* MT5-style order texts at the left end of each line: small, no box, the line's colour */
.ch-orders { position: absolute; inset: 0 70px 0 0; overflow: hidden; pointer-events: none; z-index: 2; }
.ch-ord { position: absolute; left: 6px; top: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 10.5px/12px var(--font); letter-spacing: .01em; text-shadow: 0 0 3px #000, 0 0 2px #000; will-change: transform; }

/* the client's drawings (SVG over the chart) and the tool row */
.ch-draw { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; overflow: visible; }
.ch-draw.active { pointer-events: auto; cursor: crosshair; touch-action: none; }
.draw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.draw-tools .tog { min-height: 38px; padding: 0 10px; }
.draw-tools .tog:disabled { opacity: .4; }
.draw-hint { flex-basis: 100%; font-size: 12px; color: var(--muted); }

/* Open the client's own MT5 / TradingView app */
.app-open { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.app-btn, .app-btn:visited { color: var(--fg); text-decoration: none; }
.app-get { font-size: 12.5px; color: var(--fg-2); }
/* phones: the big Open-MT5 button (chart.js appButtons) */
.app-open.big { flex-direction: column; align-items: stretch; gap: 10px; }
.app-open.big .app-get { align-self: center; }
.app-btn.big { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; border-radius: 16px; text-align: left;
  color: #0A0A0A; background: linear-gradient(180deg, #FFFFFF, #C9CCD1); border: 0; box-shadow: 0 10px 28px -10px rgba(201, 204, 209, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.app-btn.big:visited { color: #0A0A0A; }
.app-btn.big:active { transform: scale(.98); }
.mt5-ic { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mt5-tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.mt5-tx b { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.mt5-tx small { font-size: 12px; font-weight: 600; opacity: .75; }
.mt5-go { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Risk rules sheet */
.rl-wait { position: relative; height: 56px; }
.rl-wait .t-spin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.rl-form { display: flex; flex-direction: column; gap: var(--s3); }
.rl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.rl-hint { font-size: 12px; color: var(--muted); line-height: 1.35; }
.rl-limit { display: flex; flex-direction: column; gap: 8px; }
.rl-pick { display: flex; gap: 6px; padding: 4px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--bg-sunk); }
.rl-pick button { flex: 1; min-height: 40px; padding: 6px 8px; border: 0; border-radius: calc(var(--r-btn) - 4px); background: none;
  color: var(--fg-2); font: 600 13.5px/1.2 var(--font); cursor: pointer; transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.rl-pick button[aria-checked="true"] { background: rgba(201, 204, 209, .16); color: var(--accent, var(--accent-2)); box-shadow: inset 0 0 0 1px rgba(201, 204, 209, .45); }
.rl-form .btn.block + .btn.block { margin-top: calc(var(--s2) * -1); }
.rl-done { margin: 0 0 var(--s3); padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--line-2); background: var(--bg-sunk);
  font-size: 14px; line-height: 1.55; color: var(--fg-2); white-space: pre-line; }
.rl-done b { color: var(--fg); }
@media (max-width: 340px) { .rl-grid { grid-template-columns: 1fr; } }
/* Owner: unlock a client */
.ul-head { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ul-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s4); }
.ul-item { display: flex; align-items: center; gap: var(--s3); padding: 10px 12px; border-radius: var(--r-card); border: 1px solid var(--line-2); background: var(--bg-sunk); }
.ul-item span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ul-item small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.ul-item .btn { flex: none; min-height: 40px; padding: 0 16px; }
/* Derisk sheet: side and unit choosers (bots with "derisk2") */
.dk-label { margin: 10px 0 6px; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.dk-seg { display: flex; gap: 6px; padding: 4px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--bg-sunk); }
.dk-seg button { flex: 1; min-width: 0; min-height: 44px; padding: 6px 8px; border: 0; border-radius: calc(var(--r-btn) - 4px); background: none; color: var(--fg-2);
  font: 600 13.5px/1.2 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.dk-seg button[aria-checked="true"] { background: rgba(201, 204, 209, .16); color: var(--accent, var(--accent-2)); box-shadow: inset 0 0 0 1px rgba(201, 204, 209, .45); }
.dk-pcts { margin-top: 12px; }
.dk-pcts .btn[aria-pressed="true"] { border-color: rgba(201, 204, 209, .6); color: var(--accent, var(--accent-2)); background: rgba(201, 204, 209, .12); }
#dkGo { margin-top: 4px; }

/* pinch zoom (js in app.js sets html.zoomed): no glass blurs while zoomed, so a phone does not re-render
   them at the zoomed resolution and run out of graphics memory */
.zoomed *, .zoomed *::before, .zoomed *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: auto !important; }

/* ---------- guides in the app (guides-help.js + shared/guides/*) ---------- */
.tut-q.inline { position: relative; top: auto; right: auto; margin: 0 0 0 8px; vertical-align: 1px; display: inline-grid; }
.gs { display: flex; flex-direction: column; gap: 14px; }
.gh-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gh-tabs button { min-height: 36px; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.gh-tabs button[aria-selected="true"] { color: #0A0A0A; background: var(--accent, #FFFFFF); border-color: transparent; }
.gs-list { display: flex; flex-direction: column; gap: 8px; }
.gs-quick { margin-bottom: 4px; }
.g-tip-pop { position: fixed; z-index: 90; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: var(--fg); background: #232831;
  border: 1px solid rgba(255, 255, 255,.45); box-shadow: 0 10px 28px rgba(0,0,0,.5); pointer-events: none; transform: translateY(-100%) translateY(6px); opacity: 0;
  transition: opacity .18s, transform .18s; }
.g-tip-pop.in { opacity: 1; transform: translateY(-100%); }
.g-tip-pop.below { transform: translateY(-6px); } .g-tip-pop.below.in { transform: none; }
/* Quick tour: full screen, 5 slides */
.qt { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; background: #0A0A0A; opacity: 0; transition: opacity .3s;
  padding: calc(var(--safe-t, 0px) + 10px) max(12px, var(--safe-r, 0px)) calc(var(--safe-b, 0px) + 10px) max(12px, var(--safe-l, 0px)); }
.qt.in { opacity: 1; } .qt.out { opacity: 0; }
.qt-in { width: min(480px, 100%); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; }
.qt-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.qt-count { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.qt-skip { min-height: 44px; padding: 0 12px; font: inherit; font-weight: 600; color: var(--fg-2); background: none; border: 0; cursor: pointer; }
.qt-slide { flex: 1; }
.qt-slide.go { animation: qtIn .4s cubic-bezier(.2,.8,.2,1); }
@keyframes qtIn { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 28px), 0, 0); } }
.qt-dots { display: flex; justify-content: center; gap: 6px; } .qt-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: width .25s, background .25s; }
.qt-dots i.on { width: 20px; border-radius: 4px; background: var(--accent, #FFFFFF); }
.qt-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 2px; background: linear-gradient(transparent, #0A0A0A 30%); }
.qt-nav .btn { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .qt, .qt-slide.go, .g-tip-pop { transition: none; animation: none; } }

/* Connect MT5: searchable server list (live first, then demo, then Other…) */
.srv-field { position: relative; }
.srv-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 6px 0 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto;
  border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.srv-list li[role=option] { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; cursor: pointer;
  font: 500 15px var(--font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.srv-list li[role=option]:hover, .srv-list li.on { background: rgba(255, 255, 255, .07); }
.srv-list li[aria-selected=true] { font-weight: 700; }
.srv-list .srv-head { padding: 8px 12px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.srv-list .srv-other { color: var(--fg-2); border-top: 1px solid var(--line-2); border-radius: 0 0 10px 10px; }

/* ---------- Pipsly additions ---------- */
/* seven tabs on a phone: smaller labels, icons stay 22 px */
.tabbar button { font-size: 11px; letter-spacing: -.01em; }
@media (max-width: 374px) { .tabbar button { font-size: 9.5px; letter-spacing: -.02em; } }
@media (max-width: 339px) { .tabbar button { font-size: 0; } .tabbar button svg { width: 28px; height: 28px; } }
.auth-word img { display: block; height: 30px; width: auto; margin: 4px auto 0; }
@media (min-width: 768px) { .auth-word img { height: 36px; } }
.af-access input { text-transform: uppercase; letter-spacing: .24em; font-family: var(--font-mono); }
.af-access input::placeholder { letter-spacing: 0; text-transform: none; font-family: var(--font); }
.sc-card svg { display: block; width: 44px; height: 44px; margin: 22px 14px 0; fill: none; stroke: var(--accent-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* Positions: Trades | Feed */
.pos-switch { margin-bottom: var(--s3); }
.pos-switch button { position: relative; }
.pos-switch .dot { position: absolute; top: 9px; right: 28%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (min-width: 1024px) { .pos-switch { display: none; } }
/* History / Analysis / Learn */
.tab-hero { display: grid; gap: var(--s3); padding: 0 0 var(--s4); overflow: hidden; }
.tab-hero img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 560; object-fit: cover; }
.tab-hero p, .tab-hero .btn { margin: 0 var(--s4); }
.an-feed { display: grid; gap: var(--s3); }
.an-head h2 { margin: 2px 0 8px; font: italic 400 28px/1.15 var(--font-display); color: var(--white); }
.an-head p, .an-item p { margin: 0 0 8px; color: var(--fg-2); line-height: 1.55; }
.an-from { font: 500 11px var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; }
.an-bias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.an-pill { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 13px; }
.an-pill b { font-family: var(--font-mono); font-weight: 600; }
.an-pill.up { border-color: rgba(63, 185, 80, .5); } .an-pill.up b { color: var(--good); }
.an-pill.down { border-color: rgba(240, 113, 107, .5); } .an-pill.down b { color: var(--bad); }
.an-pill small { flex-basis: 100%; color: var(--muted); }
.an-kind { display: inline-block; margin-bottom: 6px; font: 500 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.an-photo { margin: 0; padding: 0; overflow: hidden; } .an-photo img { display: block; width: 100%; height: auto; }
.an-photo figcaption { padding: var(--s3) var(--s4); font-size: 14px; color: var(--fg-2); }
.an-embed { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #000; }
.an-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.an-cal { padding: 0; overflow: hidden; } .an-cal iframe { display: block; width: 100%; height: 520px; border: 0; }
.an-cal p { padding: var(--s4); margin: 0; }
.an-empty { text-align: center; padding: var(--s5) var(--s4); } .an-empty b { display: block; margin-bottom: 4px; }
.an-fine { margin: var(--s3) 0 0; }
.learn-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--s2); scrollbar-width: none; }
.learn-chips::-webkit-scrollbar { display: none; }
.learn-group .section { margin-bottom: 2px; }
.learn-group > p { margin: 0 0 var(--s3); }
.learn-grid { display: grid; gap: 10px; }
.learn-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.learn-grid .g-card { width: 100%; }
#learnSheet { margin-bottom: var(--s3); }
@media (min-width: 1024px) {
  .view[data-view="analysis"], .view[data-view="learn"], .view[data-view="history"] { grid-area: left; }
  .left-switch button { font-size: 12px; }
}

/* Learn: the code's own lessons above the guides. Cards rise in one after another (reduced motion: no movement). */
.ls { margin-bottom: var(--s4); }
.ls-grid { display: grid; gap: 12px; }
/* as many columns as fit the space it's in (one in the laptop side panel, two on a tablet) */
.ls-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card.ls-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; animation: lsIn .6s var(--ease-out) both; animation-delay: calc(var(--i) * 70ms); }
.ls-body { padding: var(--s3) var(--s4) var(--s4); }
.ls-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--white); }
.ls-body p { margin: 0 0 12px; color: var(--fg-2); line-height: 1.55; font-size: 14px; }
.ls-tag { display: inline-block; margin-bottom: 6px; font: 500 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ls-img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.ls-embed { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ls-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ls-guides-h { margin-top: var(--s2); }
@keyframes lsIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .card.ls-card { animation: none; } }

/* The tab you open lifts its icon with a small spring (looks only). */
.tabbar button.on svg { animation: tabPop .5s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(0 0 6px rgba(233, 234, 236, .35)); }
@keyframes tabPop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabbar button.on svg { animation: none; } }

/* ---------- Economic calendar (calendar.js): black, a big countdown to the next event, live countdowns ---------- */
.card.an-cal { padding: 0; overflow: hidden; background: #000; border-color: #1c1d20; }
.cal-next { display: grid; gap: 6px; padding: var(--s4); border-bottom: 1px solid #16171a;
  background: radial-gradient(120% 140% at 0% 0%, rgba(233, 234, 236, .07), transparent 60%), #000; }
.cal-k { font: 500 10.5px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cal-next-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--white); }
.cal-big { font: 600 clamp(34px, 9vw, 46px)/1 var(--font-mono); letter-spacing: -.01em; color: var(--white); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #b9bcc2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cal-next small { color: var(--fg-2); font-size: 12.5px; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px var(--s4); border-bottom: 1px solid #16171a; }
.cal-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #0d0e10; border: 1px solid #1f2024; }
.cal-seg button { font: 600 12px var(--font); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 7px 11px; min-height: 34px; cursor: pointer; }
.cal-seg button[aria-pressed="true"] { background: var(--accent); color: #0a0a0a; }
.cal-cursel { min-height: 40px; padding: 0 12px; border-radius: 999px; background: #0d0e10; color: var(--fg); border: 1px solid #1f2024; font: 600 16px var(--font); }
.cal-list { padding: 0 var(--s4) 6px; }
.cal-day { margin: 16px 0 6px; font: 500 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cal-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid #121316; }
.cal-day + .cal-row { border-top: 0; }
.cal-time { font: 500 13px var(--font-mono); color: var(--fg-2); white-space: nowrap; }
.cal-what { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.cal-what b { font-size: 14px; font-weight: 600; color: var(--fg); overflow-wrap: anywhere; }
.cal-what small { flex-basis: 100%; color: var(--muted); font-size: 12px; padding-left: 2px; }
.cal-cur { font: 600 11px var(--font-mono); letter-spacing: .06em; color: var(--fg); padding: 2px 6px; border-radius: 6px; border: 1px solid #2a2b30; }
.cal-imp { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.cal-imp i { width: 3px; border-radius: 1px; background: #2a2b30; }
.cal-imp i:nth-child(1) { height: 5px; } .cal-imp i:nth-child(2) { height: 8px; } .cal-imp i:nth-child(3) { height: 12px; }
.cal-imp.i1 i:nth-child(1), .cal-imp.i2 i:nth-child(-n+2) { background: #c9ccd1; }
.cal-imp.i3 i { background: var(--bad); }
.cal-cd { font: 600 13px var(--font-mono); color: var(--fg); text-align: right; min-width: 64px; font-variant-numeric: tabular-nums; }
.cal-row.now .cal-cd { color: #0a0a0a; background: var(--accent); border-radius: 999px; padding: 3px 9px; text-align: center; animation: calPulse 1.4s ease-in-out infinite; }
.cal-row.past { opacity: .45; } .cal-row.past .cal-cd { color: var(--muted); font-weight: 500; }
.cal-empty { padding: var(--s4); margin: 0; }
.cal-src { margin: 0; padding: 10px var(--s4) 14px; font-size: 11px; color: #55585e; }
@keyframes calPulse { 50% { box-shadow: 0 0 0 6px rgba(233, 234, 236, .12); } }
@media (prefers-reduced-motion: reduce) { .cal-row.now .cal-cd { animation: none; } }

/* More › Notifications (push.js) */
.np-state { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 6px; }
.np-state.on { border-color: rgba(61, 190, 110, .45); }
.np-state small { color: var(--muted); font-size: 12.5px; }
.np-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.np-h { margin: 14px 2px 6px; }
.np-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 2px 12px; }
.np-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--line); font-size: 14px; }
.np-row:last-child { border-bottom: 0; }
.np-row input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.np-quiet { display: flex; gap: 12px; padding: 8px 0; font-size: 13px; color: var(--fg-2); flex-wrap: wrap; }
.np-quiet input { font: inherit; font-size: 16px; color: var(--fg); background: #08090B; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; }
.np-list > small { padding: 0 0 10px; font-size: 12px; }

/* Admin › Earnings and Send notification (admin.js) */
.adm-chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.adm-chipbtn { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.adm-chipbtn.on { color: #0a0a0a; background: var(--accent); border-color: transparent; }
.adm-earn { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.adm-earn-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.adm-earn-row.warn { border-color: rgba(232, 163, 61, .55); background: rgba(232, 163, 61, .06); }
.adm-earn-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.adm-earn-who small, .adm-earn-num small { color: var(--muted); font-size: 12px; }
.adm-earn-num { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.adm-earn-brokers { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--fg-2); margin: 0 0 8px; }
.adm-field select, .adm-field textarea { font: inherit; color: var(--fg); background: #08090B; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; width: 100%; font-size: 16px; }

/* Admin › Command history (admin.js historyCard) */
.adm-cmds { display: flex; flex-direction: column; gap: 6px; }
.adm-cmd { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-cmd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adm-cmd small { color: var(--muted); font-size: 12px; }
.adm-cmd code { font-size: 12px; color: var(--fg-2); overflow-wrap: anywhere; }
.adm-cmd p { margin: 4px 0 0; font-size: 12.5px; color: var(--fg-2); white-space: pre-line; overflow-wrap: anywhere; }