/* Visual cards (cards.js): every section a Sea Side-style holo card with a small live chart, a mini legend, and a
   sub-page with the big chart and the full breakdown. Colours come from each page's world (worlds.css). */
@property --vc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

section.slp.vc { position: relative; isolation: isolate; border-radius: 18px; border-color: transparent;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tide) 9%, transparent), color-mix(in srgb, var(--panel) 92%, transparent) 38%, color-mix(in srgb, var(--w2, var(--tide)) 7%, transparent)), var(--bg2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tide) 14%, transparent), 0 10px 30px -14px rgba(0, 0, 0, .7), 0 0 28px -12px color-mix(in srgb, var(--glow) 45%, transparent);
  animation: vcPulse 6s ease-in-out infinite; }
body[data-world] section.slp.vc::before, section.slp.vc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; z-index: -1; pointer-events: none; display: block; height: auto;
  background: conic-gradient(from var(--vc-a), var(--tide), transparent 22%, var(--w2, var(--tide)) 38%, transparent 55%, var(--glow) 70%, transparent 86%, var(--tide));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .7; animation: vcSpin 10s linear infinite; }
section.slp.vc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: linear-gradient(105deg, transparent 40%, rgba(230, 255, 250, .06) 50%, transparent 60%); background-size: 250% 100%; animation: vcShine 8s ease-in-out infinite; }
section.slp.vc > .vc-body { display: none; }
section.slp.vc.min > .vc-face { display: none; }

.vc-face { cursor: pointer; display: flex; flex-direction: column; gap: 8px; border-radius: 12px; min-width: 0; outline: none; -webkit-tap-highlight-color: transparent; }
.vc-face:focus-visible { outline: 2px solid var(--tide); outline-offset: 4px; }
.vc-face:active { transform: scale(.985); transition: transform .12s; }
.vc-top, .vc-hk { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.vc-kpi { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: .02em; color: var(--tide);
  text-shadow: 0 0 18px color-mix(in srgb, var(--glow) 55%, transparent); }
.vc-cap { font-size: 13px; color: var(--muted); line-height: 1.35; min-width: 0; flex: 1 1 140px; }
.vc-viz { min-width: 0; }
.vc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.vc-leg { display: flex; flex-wrap: wrap; gap: 3px 12px; font: 500 10.5px var(--f-mono); letter-spacing: .02em; color: var(--muted); }
.vc-leg span { display: inline-flex; align-items: center; white-space: nowrap; }
.vc-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; box-shadow: 0 0 6px -1px currentColor; }
.vc-foot { display: flex; justify-content: space-between; align-items: center; }
.vc-live { font: 600 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.vc-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--bull); box-shadow: 0 0 8px var(--bull); animation: vcBlink 2s ease-in-out infinite; }
.vc-more { font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tide); }

/* chart marks */
.vc-t { font: 500 9px var(--f-mono); fill: var(--muted); }
.vc-t.b { fill: var(--ink); }
.vc-t.dk { fill: var(--bg); font-weight: 700; }
.vc-t.xl { font: 800 34px var(--f-display); fill: var(--ink); }
.vc-svg .vc-t.xl { font-size: 34px; }
.vc-viz .vc-t.xl { font-size: 13px; }
.vc-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.vc-trk { fill: none; stroke: color-mix(in srgb, var(--line) 80%, transparent); }
.vc-empty { fill: none; stroke: var(--line); stroke-dasharray: 4 4; animation: vcBreathe 3s ease-in-out infinite; }
.vc-outline { fill: none; stroke-width: 1.5; }
.vc-shape { fill-opacity: .28; stroke-width: 1.5; }
.vc-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: vcGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
.vc-growx { transform-box: fill-box; transform-origin: 0 50%; animation: vcGrowX .7s cubic-bezier(.2, .8, .2, 1) both; }
.vc-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: vcPop .55s cubic-bezier(.2, .9, .3, 1.2) both; }
/* live redraws after the first one don't replay the grow-in (cards.js · putViz) */
.vc-settled :is(.vc-grow, .vc-growx, .vc-pop, .vc-fade, .vc-draw, .vc-needle) { animation: none !important; }
.vc-fade { animation: vcFade .8s ease both; }
.vc-draw { animation: vcDraw 1.1s cubic-bezier(.2, .8, .2, 1) both; }
polyline.vc-draw, path.vc-draw { stroke-dasharray: 100 100; }
.vc-blink { animation: vcBlink 1.8s ease-in-out infinite; }
.vc-pulse { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; animation: vcRing 2.4s ease-out infinite; }
.vc-hand { filter: drop-shadow(0 0 4px var(--warn)); }
.vc-needle { animation: vcNeedle 1.2s cubic-bezier(.2, .8, .2, 1.1) both; }

/* the sub-page (Sea Side style): slides in from the right */
.vc-sub { position: fixed; inset: 0; z-index: 2147483000; background: rgba(1, 4, 13, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; justify-content: flex-end; }
.vc-sub[hidden] { display: none; }
.page.world-in > .vc-sub { animation: none; }
.vc-pane { width: min(760px, 100vw); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--bg2); border-left: 1px solid var(--line); box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px calc(env(safe-area-inset-bottom, 0px) + 28px); animation: vcSlide .35s cubic-bezier(.2, .8, .2, 1); box-sizing: border-box; }
.vc-pane:focus { outline: none; }
.vc-pane h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 6vw, 36px); line-height: 1.02; margin: 14px 0 6px; letter-spacing: .02em; text-wrap: balance;
  background: linear-gradient(180deg, var(--ink), var(--tide)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc-pane h4 { font-family: var(--f-mono); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tide); margin: 22px 0 10px; }
.vc-hk { margin-bottom: 12px; }
.vc-hk .vc-kpi { font-size: 40px; }
.vc-big { border-radius: 16px; padding: 14px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 0 34px -16px color-mix(in srgb, var(--glow) 70%, transparent); }
.vc-big .vc-t { font-size: 10px; }
.vc-big .vc-leg { font-size: 12px; gap: 4px 14px; }
.vc-big .vc-leg i { width: 10px; height: 10px; }
.vc-key { flex-basis: 100%; list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 4px; }
.vc-key li { display: grid; grid-template-columns: 20px 1fr auto; align-items: baseline; gap: 8px; color: var(--ink); border-bottom: 1px dashed var(--line); padding-bottom: 3px; }
.vc-key li b { color: var(--tide); text-align: right; }
.vc-key li span { min-width: 0; overflow-wrap: anywhere; }
.vc-key li em { font-style: normal; text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; }
.vc-tally li { grid-template-columns: 12px 1fr auto; }
.vc-tally li i { width: 12px; height: 12px; margin: 0; align-self: center; }
.vc-tally li em { color: var(--ink); text-transform: none; font-size: 12px; }
.vc-lists { flex-basis: 100%; display: grid; gap: 12px; margin-top: 8px; }
.vc-list { min-width: 0; }
.vc-list b { display: flex; align-items: center; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.vc-list > div { display: flex; flex-wrap: wrap; gap: 4px; }
.vc-list span { border: 1px solid; border-left-width: 3px; border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--ink); white-space: nowrap; }
.vc-list em { font-style: normal; color: var(--muted); }
.vc-read { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.vc-host > .vc-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vc-host .vc-foldbody { padding: 0; }
html.vc-lock, html.vc-lock body { overflow: hidden; }
html.vc-lock :is(.aud-gear, .iv-mic, .rd-bar, .iv-orb, .iv-cap) { visibility: hidden; }

/* the selected tab and its underline take the page's own colour (user 2026-10-24); the others stay muted.
   Only the tab changes: each page keeps its own look. */
body[data-world="command"] { --tab: #80e2d4; }
body[data-world="bloom"] { --tab: #ffa8cf; }
body[data-world="reef"] { --tab: #ff8a3d; }
body[data-world="seaside"] { --tab: #2b5bff; }
body[data-world="lab"] { --tab: #c3b1ff; }
body[data-world] .pgtab[aria-selected="true"] { color: var(--tab, var(--tide)); -webkit-text-fill-color: var(--tab, var(--tide)); background: none;
  border-bottom-color: var(--tab, var(--tide)); text-shadow: 0 0 12px color-mix(in srgb, var(--tab, var(--tide)) 60%, transparent); animation: none; filter: none; }
body[data-world] .pgtab:not([aria-selected="true"]) { color: var(--muted); -webkit-text-fill-color: var(--muted); }

@keyframes vcSpin { to { --vc-a: 360deg; } }
@keyframes vcShine { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
@keyframes vcPulse { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tide) 14%, transparent), 0 10px 30px -14px rgba(0, 0, 0, .7), 0 0 26px -14px color-mix(in srgb, var(--glow) 40%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tide) 22%, transparent), 0 10px 30px -14px rgba(0, 0, 0, .7), 0 0 34px -10px color-mix(in srgb, var(--glow) 55%, transparent); } }
@keyframes vcGrow { from { transform: scaleY(0); } }
@keyframes vcGrowX { from { transform: scaleX(0); } }
@keyframes vcPop { from { transform: scale(0); opacity: 0; } }
@keyframes vcFade { from { opacity: 0; } }
@keyframes vcDraw { from { stroke-dasharray: 0 100; } }
@keyframes vcBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes vcRing { from { transform: scale(1); opacity: .7; } to { transform: scale(1.25); opacity: 0; } }
@keyframes vcNeedle { from { transform: rotate(-90deg); } }
@keyframes vcBreathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes vcSlide { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  section.slp.vc, section.slp.vc::before, section.slp.vc::after, .vc-grow, .vc-growx, .vc-pop, .vc-fade, .vc-draw, .vc-blink, .vc-pulse, .vc-needle, .vc-pane, .vc-live i, .vc-empty { animation: none !important; }
}

/* Market environment triangle (user 2026-10-24): the market dots glow in their own colours and breathe, and the inner
   shape pulses softly. They hold still with the other glows while you scroll or change pages (worlds.css). */
.vc-mdot { filter: drop-shadow(0 0 3px currentColor); animation: vcMGlow 2.6s ease-in-out infinite; }
.vc-tglow { filter: drop-shadow(0 0 6px currentColor); animation: vcTGlow 3.2s ease-in-out infinite; }
@keyframes vcMGlow { 0%, 100% { filter: drop-shadow(0 0 2px currentColor); opacity: .85; } 50% { filter: drop-shadow(0 0 7px currentColor) drop-shadow(0 0 2px currentColor); opacity: 1; } }
@keyframes vcTGlow { 0%, 100% { fill-opacity: .2; filter: drop-shadow(0 0 3px currentColor); } 50% { fill-opacity: .42; filter: drop-shadow(0 0 10px currentColor); } }
@media (prefers-reduced-motion: reduce) { .vc-mdot, .vc-tglow { animation: none !important; } }

/* Speed (user 2026-10-25: "the glows and shimmers make the app load the data slow"). Every card ran three endless
   effects that repaint the whole card each frame (spinning border = an animated custom property, pulsing shadow,
   sweeping shine): ~36 full-card repaints a frame on Home, keeping the phone busy ~63% of the time while idle, so
   arriving data waited in line. The glows stay, standing still: the border keeps its colours at a fixed angle, the
   shadow keeps its aura, the shine is gone. The only motion left is cheap (opacity). */
section.slp.vc { animation: none !important; }
body[data-world] section.slp.vc::before, section.slp.vc::before { animation: none !important; --vc-a: 35deg; }
section.slp.vc::after { animation: none !important; background: none; }
/* chart dots and shapes: the glow is fixed; they breathe with opacity only (no animated blur) */
.vc-mdot { filter: drop-shadow(0 0 4px currentColor); animation: vcMBreathe 2.6s ease-in-out infinite; }
.vc-tglow { filter: drop-shadow(0 0 7px currentColor); animation: vcTBreathe 3.2s ease-in-out infinite; }
@keyframes vcMBreathe { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes vcTBreathe { 0%, 100% { fill-opacity: .24; } 50% { fill-opacity: .4; } }

/* chart marks: a soft, still glow (user 2026-10-25) */
.vc-mdot { filter: drop-shadow(0 0 3px currentColor); animation: none !important; opacity: 1; }
.vc-tglow { filter: drop-shadow(0 0 5px currentColor); animation: none !important; fill-opacity: .32; }

/* Settings: System status & data quality */
.aud-sys .vc-big { margin: 6px 0 10px; } .aud-sys .vc-svg { width: 100%; height: auto; display: block; }
.aud-sys-k { margin: 2px 0 6px; font: 800 22px var(--f-display); color: var(--tide); }

/* Settings: Apex Omni accounts + bot switches (user 2026-10-26) */
.apx-row{border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0;background:#06131c}
.apx-row.cur{border-color:#80e2d4;box-shadow:0 0 12px -4px #80e2d4}
.apx-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.apx-name{font:700 15px var(--f-mono);color:#80e2d4}
.apx-st{font-size:12px;color:var(--muted)}.apx-st.bad{color:var(--bear)}
.apx-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.apx-act input{flex:1 1 160px;min-width:0;background:#000;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 10px;font:500 13px var(--f-mono)}
.apx-in{color:#80e2d4;font-size:13px}.apx-use.on{font:600 12px var(--f-mono);color:#03141a;background:#80e2d4;border-radius:999px;padding:3px 9px}
.set-botlist{display:grid;gap:6px}
.set-bot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 0 0;border:1px solid var(--line);border-radius:10px}
.set-bot-name{flex:1;min-width:0;text-align:left;background:none;border:0;color:inherit;font:inherit;padding:10px 12px;cursor:pointer}
.set-bot-go{color:#80e2d4;margin-left:4px}
.set-bot-sw{display:flex;cursor:pointer;padding:6px 0}
#lq-panel .set-log-back{display:inline-flex;width:auto;justify-content:flex-start;gap:6px;padding:6px 14px;margin-bottom:12px}
.set-log-k{color:#80e2d4;margin:0 0 8px;font-size:13px}
.set-log-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.set-log-day{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#8a9aa0);margin:10px 0 2px}
.set-log-e{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:7px 10px;border-left:2px solid var(--line);background:rgba(255,255,255,.02);border-radius:0 8px 8px 0;font-size:13px;line-height:1.35}
.set-log-e time{white-space:nowrap;color:var(--muted,#8a9aa0);font-variant-numeric:tabular-nums}
.set-log-e b{color:#80e2d4;font-weight:600}.set-log-e em{color:var(--muted,#8a9aa0);font-style:normal}
.set-log-e.ok{border-left-color:#80e2d4}.set-log-e.bad{border-left-color:var(--bear,#ff7a6b)}.set-log-e.warn{border-left-color:#e8c46a}.set-log-e.step{border-left-color:#9b8cff}
.set-bot.b7{border-color:color-mix(in srgb,var(--bear) 40%,var(--line))}
.set-bot input{position:absolute;opacity:0;pointer-events:none}
.set-bot i{width:42px;height:24px;border-radius:999px;background:#1d2a30;position:relative;flex:none;transition:background .15s}
.set-bot i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#c8d4d8;transition:transform .15s}
.set-bot input:checked+i{background:#80e2d4;box-shadow:0 0 10px -2px #80e2d4}.set-bot input:checked+i::after{transform:translateX(18px);background:#03141a}
.set-bot input:focus-visible+i{outline:2px solid #80e2d4;outline-offset:2px}

/* Bot 4's SSS risk mode (owner 2026-10-26) */
.set-mode{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.set-mode-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.set-mode .note{margin:6px 0 0}
.set-mode-h{flex-wrap:wrap}
.set-mode .itog{max-width:100%;min-width:0}
.set-mode .itog button{padding-left:12px;padding-right:12px}
/* Lab · Bots' logs */
.bl-tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:10px}
.bl-tabs .chip{min-width:40px}
.bl-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0 0 8px}
.bl-h b{color:#80e2d4}.bl-h span{color:var(--muted,#8a9aa0);font-size:13px}
#botlogs-sec .bl-h b,#botlogs-sec .set-log-e b{color:var(--tide,#80e2d4)}

/* Back / forward arrows (nav-arrows.js): small, 35% opaque, tucked against the screen edges, above card sub-pages */
.nav-arws[hidden], .nav-arw[hidden] { display: none !important; }
.nav-arw { position: fixed; top: 58%; z-index: 2147483100; width: 22px; height: 44px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line, #123a48); background: var(--panel, #04111c); color: var(--tide, #80e2d4); opacity: .35; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: opacity .15s ease; }
.nav-back { left: env(safe-area-inset-left, 0px); border-left: 0; border-radius: 0 12px 12px 0; }
.nav-fwd { right: env(safe-area-inset-right, 0px); border-right: 0; border-radius: 12px 0 0 12px; }
.nav-arw svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nav-arw:active, .nav-arw:focus-visible { opacity: .8; outline: none; }
html.sp-lock .nav-arws, body:has(#cc-wrap.full) .nav-arws { display: none; }