/* Pere web: the design of the Pere app for Android, in the browser.
   Glass over a deep ground with a soft teal glow; Inter; teal for Pere and
   for gains, a calm rose for losses, red only for what cannot be undone.
   Every colour comes from a token below, so Dark and Light are the same
   page. On a phone-sized screen the console becomes the app: a bar at the
   top, the sections at the bottom, campaigns side by side. */

@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* Pere brand. Charcoal and bone are the brand's own. The mark is drawn in
     Pere's teal, as in the app; motion uses the mark's colour, never the
     profit/loss colours below. */
  --pere-charcoal: #151817;
  --pere-bone: #F1EEE5;
  --pere-mark: #3EE0BB;
  --pere-signal: rgba(167,243,208,.13);

  /* The page: a deep green-black ground with a soft teal glow. */
  --bg: #090D0C;
  --glow: rgba(62,224,187,.14);
  --glow-accent: rgba(31,181,211,.10);

  /* Grounds, lowest to highest. Translucent: glass over the backdrop. */
  --sunken: rgba(0,0,0,.30);
  --surface: rgba(255,255,255,.059);
  --surface-2: rgba(255,255,255,.078);
  --surface-3: rgba(255,255,255,.12);
  --glass-top: rgba(255,255,255,.078);
  --glass-bottom: rgba(255,255,255,.031);
  --glass-edge: rgba(255,255,255,.12);
  --glass-rim: rgba(255,255,255,.07);
  --sheet: #121816;
  --field: rgba(0,0,0,.26);
  --scrim: rgba(0,0,0,.72);

  /* Lines and ink. */
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.17);
  --text: #F3F1EA;
  --muted: #A9B1AB;
  --muted-2: #9DA59F;

  /* Signals. Never the only carrier of meaning: amounts also carry +/− and
     words, states also carry labels. */
  --accent: #3EE0BB;
  --accent-ink: #03130F;
  --accent-soft: rgba(62,224,187,.12);
  --accent-line: rgba(62,224,187,.36);
  --good: #3EE0BB;
  --bad: #F7B5BD;
  --bad-soft: rgba(247,181,189,.10);
  --bad-line: rgba(247,181,189,.32);
  --danger: #FF7474;
  --danger-ink: #1A0503;
  --danger-soft: rgba(255,116,116,.12);
  --danger-line: rgba(255,116,116,.38);
  --attention: #FF8C75;
  --attention-soft: rgba(255,140,117,.12);
  --attention-line: rgba(255,140,117,.36);
  --warn: #FFC24D;
  --warn-soft: rgba(255,194,77,.10);
  --warn-line: rgba(255,194,77,.38);
  --blue: #7CB4FF;
  --blue-soft: rgba(124,180,255,.12);
  --blue-line: rgba(124,180,255,.36);
  --live: #FF9E68;
  --live-soft: rgba(255,158,104,.10);
  --live-line: rgba(255,158,104,.40);
  --held: #93D0D2;
  --held-soft: rgba(147,208,210,.12);
  --held-line: rgba(147,208,210,.34);

  /* What floats: bars, menus, dialogs. */
  --bar: rgba(14,19,18,.86);
  --bar-edge: rgba(255,255,255,.12);
  --bar-pill: rgba(62,224,187,.18);
  --shadow: 0 18px 44px rgba(0,0,0,.28);
  --shadow-float: 0 24px 60px rgba(0,0,0,.5);

  --radius: 22px;
  --radius-tile: 16px;
  --radius-control: 14px;
  --radius-sheet: 28px;
  --gutter: 20px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Light: warm paper, white glass, deep greens for ink. */
html[data-theme="light"] {
  color-scheme: light;
  --pere-mark: #0A6D66;
  --pere-signal: rgba(10,109,102,.14);
  --bg: #F1EFE8;
  --glow: rgba(64,207,192,.16);
  --glow-accent: rgba(63,169,216,.09);
  --sunken: rgba(0,0,0,.04);
  --surface: rgba(255,255,255,.62);
  --surface-2: rgba(255,255,255,.80);
  --surface-3: rgba(255,255,255,.96);
  --glass-top: rgba(255,255,255,.82);
  --glass-bottom: rgba(255,255,255,.56);
  --glass-edge: rgba(0,0,0,.08);
  --glass-rim: rgba(255,255,255,.9);
  --sheet: #FAF9F5;
  --field: rgba(255,255,255,.86);
  --scrim: rgba(0,0,0,.42);
  --border: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.15);
  --text: #111614;
  --muted: #4A534E;
  --muted-2: #545E58;
  --accent: #0A6D66;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(10,109,102,.10);
  --accent-line: rgba(10,109,102,.34);
  --good: #0A6D66;
  --bad: #8F4257;
  --bad-soft: rgba(143,66,87,.08);
  --bad-line: rgba(143,66,87,.30);
  --danger: #BA2418;
  --danger-ink: #FFFFFF;
  --danger-soft: rgba(186,36,24,.08);
  --danger-line: rgba(186,36,24,.34);
  --attention: #A43A20;
  --attention-soft: rgba(164,58,32,.08);
  --attention-line: rgba(164,58,32,.32);
  --warn: #7F5000;
  --warn-soft: rgba(127,80,0,.08);
  --warn-line: rgba(127,80,0,.32);
  --blue: #2458C4;
  --blue-soft: rgba(36,88,196,.08);
  --blue-line: rgba(36,88,196,.30);
  --live: #A23F15;
  --live-soft: rgba(162,63,21,.07);
  --live-line: rgba(162,63,21,.34);
  --held: #2B5A64;
  --held-soft: rgba(43,90,100,.08);
  --held-line: rgba(43,90,100,.30);
  --bar: rgba(255,255,255,.86);
  --bar-edge: rgba(0,0,0,.09);
  --bar-pill: rgba(10,109,102,.14);
  --shadow: 0 16px 40px rgba(32,40,36,.07);
  --shadow-float: 0 24px 60px rgba(32,40,36,.18);
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: relative; margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* The glow behind the glass: at the top, and faintly at the side. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(1100px 760px at 30% -140px, var(--glow), transparent 72%),
  radial-gradient(900px 720px at 108% 58%, var(--glow-accent), transparent 72%); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button svg, a svg { pointer-events: none; }
::selection { background: var(--accent-soft); color: var(--text); }
.hidden { display: none !important; }
.icon { display: block; flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.14; letter-spacing: -.026em; font-weight: 620; }
h2 { margin-bottom: 10px; font-size: 20px; line-height: 1.25; letter-spacing: -.012em; font-weight: 600; }
h3 { font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
p { color: var(--muted); line-height: 1.5; }
strong { font-weight: 600; }
.eyebrow { display: inline-block; margin-bottom: 8px; color: var(--accent); font-size: 11.5px; line-height: 1.3; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.section-label { margin: 0; color: var(--muted); font-size: 11.5px !important; line-height: 1.3; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.subtle { color: var(--muted-2); font-size: 12.5px; }
.good { color: var(--good) !important; }
.bad { color: var(--bad) !important; }
.warning-text { color: var(--warn); }
.danger-text { color: var(--danger); }
.wide { width: 100%; }

/* ---------------------------------------------------------------- the Pere mark */
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-lockup.compact { gap: 10px; }
.brand-mark { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: transparent; color: var(--pere-mark); font-weight: 700; font-size: 22px; }
.brand-mark.small { width: 36px; height: 36px; border-radius: 11px; font-size: 18px; }
.brand-mark-image { display:block; width:100%; height:100%; padding:3px; object-fit:contain; }
.pere-mark { display:grid; place-items:center; overflow:hidden; background:transparent; color:var(--pere-mark); }
.pere-mark-svg { display:block; width:100%; height:100%; padding:2px; overflow:visible; }
.pere-silhouette, .pere-eye-core { fill:var(--pere-mark); }
.pere-visor-glow { fill:var(--pere-signal); opacity:0; }
.pere-eye { transform-box:view-box; transform-origin:207px 114px; }
[data-pere-state="idle"] .pere-eye { animation:pere-look 17s ease-in-out infinite; }
[data-pere-state="idle"] .pere-eye-core { animation:pere-breath 17s ease-in-out infinite; }
[data-pere-state="scanning"] .pere-eye { animation:pere-sweep 1.6s cubic-bezier(.45,0,.25,1) 1; }
[data-pere-state="scanning"] .pere-visor-glow { animation:pere-glow 1.6s ease-in-out 1; }
[data-pere-state="working"] .pere-eye { animation:pere-work 5.2s ease-in-out infinite; }
[data-pere-state="working"] .pere-visor-glow { animation:pere-glow-soft 5.2s ease-in-out infinite; }
[data-pere-state="ready"] .pere-eye { animation:none; transform:none; }
/* Mostly still; now and then a short look along the visor and back. */
@keyframes pere-look { 0%, 84%, 100% { transform:translateX(0); } 88%, 91% { transform:translateX(-30px); } 95% { transform:translateX(0); } }
@keyframes pere-breath { 0%, 80%, 100% { opacity:1; } 90% { opacity:.82; } }
/* One controlled sweep to the back of the visor and home again. */
@keyframes pere-sweep { 0% { transform:translateX(0); } 45% { transform:translateX(-86px); } 100% { transform:translateX(0); } }
@keyframes pere-work { 0%, 100% { transform:translateX(0); } 50% { transform:translateX(-14px); } }
@keyframes pere-glow { 0%, 100% { opacity:0; } 50% { opacity:1; } }
@keyframes pere-glow-soft { 0%, 100% { opacity:0; } 50% { opacity:.6; } }
@media (prefers-reduced-motion: reduce) {
  .pere-mark .pere-eye, .pere-mark .pere-eye-core, .pere-mark .pere-visor-glow { animation:none !important; transform:none !important; opacity:revert; }
  .pere-mark .pere-visor-glow { opacity:0 !important; }
}
.brand-name { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.brand-sub, .demo-label { margin-top: 2px; color: var(--muted); font-size: 13px; }
.demo-label { font-weight: 450; }

/* ---------------------------------------------------------------- controls */
.primary-button, .secondary-button, .icon-button, .text-button { border: 0; border-radius: 14px; transition: transform .15s ease, background .15s ease, opacity .15s ease, border-color .15s ease, color .15s ease; }
.primary-button, .secondary-button, .caution-button, .danger-button, .drain-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; font-size: 15px; line-height: 1.2; text-align: center; }
.primary-button { padding: 12px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 8px 24px -12px var(--accent); }
.primary-button:hover { filter: brightness(1.05); }
.secondary-button { padding: 12px 20px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); font-weight: 600; }
.secondary-button:hover { background: var(--surface-3); }
.caution-button { border: 1px solid var(--warn-line); border-radius: 14px; padding: 12px 20px; background: transparent; color: var(--warn); font-weight: 600; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.caution-button:hover { transform: translateY(-1px); background: var(--warn-soft); border-color: var(--warn); }
.danger-button { border: 1px solid var(--danger-line); border-radius: 14px; padding: 12px 20px; background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.danger-button:hover { background: var(--danger); color: var(--danger-ink); }
.drain-button { border: 1px solid var(--warn-line); border-radius: 14px; padding: 12px 20px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.drain-button:hover { border-color: var(--warn); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-1px); }
.primary-button:active, .secondary-button:active, .caution-button:active, .danger-button:active { transform: translateY(0); }
.primary-button:disabled, .secondary-button:disabled, .caution-button:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }
.danger-button:disabled, .drain-button:disabled { opacity: .45; cursor: not-allowed; }
.icon-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 12px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; }
.icon-button:hover, .text-button:hover { background: var(--surface-2); color: var(--text); }
.text-button:disabled, .icon-button:disabled { opacity: .5; cursor: not-allowed; }
.link-button { border: 0; padding: 2px 4px; border-radius: 8px; background: transparent; color: var(--accent); font-weight: 600; }
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }
.small-button { min-height: 36px; padding: 8px 13px; border-radius: 12px; font-size: 13px; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

input, select, textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--field); color: var(--text); padding: 13px 15px; outline: none; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder, textarea::placeholder { color: var(--muted-2); opacity: .8; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[aria-invalid="true"] { border-color: var(--danger); }
textarea { resize:vertical; min-height:96px; line-height:1.5; }
select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select option { background: var(--sheet); color: var(--text); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
.form-error, .form-message { min-height: 18px; color: var(--attention); font-size: 13.5px; line-height: 1.45; }
.form-message:empty, .form-error:empty { min-height: 0; }
.field-label { font-size: 13.5px; color: var(--text); font-weight: 600; }
.label-optional { margin-left:4px; color:var(--muted-2); font-size:12px; font-weight:450; }
.field-hint { margin: -12px 0 0; color: var(--muted); font-size: 12.5px; }
.password-row { position: relative; display: flex; gap: 8px; }
.password-row input { padding-right: 76px; }
.password-row .icon-button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: 13px; }

/* Toggles: a real checkbox behind a switch. */
.toggle-row { position:relative; display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:15px; cursor:pointer; }
.toggle-row > div strong,.toggle-row > div span { display:block; }
.toggle-row > div strong { color: var(--text); font-size:15px; font-weight: 600; }
.toggle-row > div span { margin-top:4px; color:var(--muted); font-size:13px; font-weight: 400; line-height:1.45; }
.toggle-row input { position:absolute; opacity:0; pointer-events:none; }
.toggle-ui { position:relative; width:48px; height:28px; border-radius:999px; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--border-strong); transition:.18s ease; }
.toggle-ui::after { content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:var(--muted); transition:.18s ease; }
.toggle-row input:checked + .toggle-ui { background:var(--accent); box-shadow:none; }
.toggle-row input:checked + .toggle-ui::after { transform:translateX(20px); background:var(--accent-ink); }
.toggle-row input:focus-visible + .toggle-ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-row input:disabled + .toggle-ui { opacity: .45; }

/* Segmented choice: appearance, access states. */
.segmented { display:inline-flex; padding:3px; border:1px solid var(--border-strong); border-radius:14px; background:var(--sunken); }
.segment { min-height: 36px; padding:7px 14px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-size:13.5px; font-weight:600; }
.segment:hover { color: var(--text); }
.segment.selected { background:var(--accent-soft); color:var(--text); box-shadow:inset 0 0 0 1px var(--accent-line); }

/* Pills. */
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--blue-line); border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 600; white-space: nowrap; }
.status-pill.running, .status-pill.starting { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.status-pill.recovering, .status-pill.reconciling, .status-pill.checking_worker, .status-pill.managing, .status-pill.scheduled, .status-pill.no_run, .status-pill.stopped { border-color: var(--border-strong); background: var(--surface); color: var(--muted); }
.status-pill.draining { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.status-pill.closing, .status-pill.action_required { border-color: var(--attention-line); background: var(--attention-soft); color: var(--attention); }
.environment-badge { display:inline-flex; align-items:center; gap:6px; width:max-content; margin-bottom:10px; padding:5px 11px; border:1px solid var(--blue-line); border-radius:999px; background: var(--blue-soft); color: var(--blue); font-size:12.5px; line-height:1.2; font-weight:600; }
.environment-badge.demo { color:var(--blue); background:var(--blue-soft); border-color: var(--blue-line); }
/* Live is said once, quietly: an outline, not a banner. */
.environment-badge.live { color:var(--live); background:transparent; border-color: var(--live-line); }
.account-badge { flex:0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding:5px 11px; border: 1px solid var(--border-strong); border-radius:999px; background: var(--surface); color:var(--muted); font-size:12.5px; font-weight:600; white-space: nowrap; }
.account-badge.active { border-color: var(--accent-line); background: var(--accent-soft); color:var(--accent); }
.account-badge.attention { border-color: var(--warn-line); background: var(--warn-soft); color:var(--warn); }
.account-badge .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 10px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 13.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- glass */
.card, .status-panel, .balance-panel, .account-card, .strategy-card, .position-card, .report-section, .wizard-card, .login-card, .admin-user, .account-balance-summary, .account-runs-list, .session-chip, .modal-card, .report-advanced, .console-details {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--glass-top), var(--glass-bottom));
  box-shadow: inset 1px 1px 0 var(--glass-rim), var(--shadow);
}
.card { padding: 24px; }
.loading-card { padding: 28px; border: 1px dashed var(--border-strong); border-radius: var(--radius-tile); color: var(--muted); text-align: center; font-size: 14px; }

/* ---------------------------------------------------------------- sign in */
.login-shell { min-height: 100svh; display: grid; place-items: center; padding: 32px 20px; }
.login-card { width: min(100%, 470px); padding: 34px; border-radius: var(--radius-sheet); }
.login-copy { padding: 48px 0 30px; }
.login-copy h1 { font-size: clamp(28px, 6vw, 34px); }
.login-copy p { margin-bottom: 0; }
.login-form, .control-form { display: grid; gap: 18px; }
.login-form { gap: 12px; }
.login-form label, .control-form label > span { font-size: 13.5px; color: var(--text); font-weight: 600; }
.login-form label { margin-top: 6px; }
.login-form .primary-button { margin-top: 12px; min-height: 52px; font-size: 16px; }
/* Sign in / create account: a quiet secondary route beneath the main form. */
.auth-legal { margin: 4px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-legal a, .auth-footnote a { color: var(--accent); }
.auth-footnote { margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.auth-switch { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 14px; }
/* The result heading receives focus only programmatically, to announce the new state. */
#registerDone h1:focus { outline: none; }
#registerDone .login-copy { padding-bottom: 22px; }

/* ---------------------------------------------------------------- top bars */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 66px; padding: 10px max(20px, calc((100vw - 1180px) / 2)); padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--bar-edge); background: var(--bar); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.platform-topbar { padding-left: max(20px, calc((100vw - 1080px) / 2)); padding-right: max(20px, calc((100vw - 1080px) / 2)); }
.platform-topbar .mobile-menu { right: max(12px, calc((100vw - 1080px) / 2)); }
.brand-button { appearance:none; display: inline-flex; align-items: center; padding:0; border:0; border-radius: 12px; background:transparent; color:inherit; cursor:pointer; text-align:left; }
.brand-button:hover .brand-name { color:var(--accent); }
.brand-button .brand-name,.brand-button .demo-label { display:block; }
.identity-button { display:flex; align-items:center; gap:10px; max-width:280px; margin-right:4px; padding:6px 10px 6px 6px; border:0; border-radius:14px; background:transparent; color:var(--text); cursor:pointer; text-align:left; }
.identity-button:hover { background:var(--surface-2); }
.identity-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); }
.identity-avatar .icon { width: 26px; height: 26px; stroke-width: 1.6; }
.identity-text { display: grid; min-width: 0; }
.identity-text > span { overflow:hidden; font-size:13.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.identity-text small { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.eye-toggle { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.eye-toggle .icon { width: 22px; height: 22px; }
.eye-toggle .eye-closed, .eye-toggle[aria-pressed="true"] .eye-open { display: none; }
.eye-toggle[aria-pressed="true"] .eye-closed { display: block; }
.mobile-menu-button { display:none; width:44px; height:44px; padding:0; border-radius: 50%; }
.menu-icon { position:relative; display:grid; gap:5px; width:20px; }
.menu-icon i { display:block; width:20px; height:2px; border-radius:999px; background:currentColor; transition:transform .2s ease,opacity .16s ease; }
.mobile-menu-button.menu-open .menu-icon i:first-child { transform:translateY(7px) rotate(45deg); }
.mobile-menu-button.menu-open .menu-icon i:nth-child(2) { opacity:0; }
.mobile-menu-button.menu-open .menu-icon i:last-child { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { position:absolute; top:calc(100% + 8px); right:max(12px,calc((100vw - 1180px)/2)); z-index:30; display:grid; min-width:210px; padding:6px; border:1px solid var(--border-strong); border-radius:18px; background:var(--sheet); box-shadow:var(--shadow-float); animation: pere-pop .16s ease-out; }
.mobile-menu .text-button { display:flex; justify-content: flex-start; width:100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; color: var(--text); text-align:left; font-size: 15px; }
.live-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--muted-2); margin-right: 7px; box-shadow: 0 0 0 4px var(--surface); }
.live-dot.ok { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.live-dot.pending { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.live-dot.warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.online-label { display:flex; align-items:center; gap:2px; padding:0 10px; color:var(--muted); font-size:13.5px; font-weight:500; white-space: nowrap; }
.refresh-action { display:inline-flex; align-items:center; gap:7px; min-width:98px; justify-content:center; }
.refresh-action:disabled { opacity:.72; cursor:wait; }
.refresh-icon { display:inline-grid; place-items: center; line-height:1; transform-origin:50% 50%; }
.refresh-icon .icon { width: 18px; height: 18px; }
.refresh-icon.spinning { animation:pere-spin .8s linear infinite; }
@keyframes pere-spin { to { transform:rotate(360deg); } }
@keyframes pere-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes pere-rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- the workspace */
.platform-page { width:min(1080px,calc(100% - 40px)); margin:0 auto; padding:44px 0 88px; }
.platform-page > section:not(.hidden), .tabpage.active { animation: pere-rise .28s cubic-bezier(.2,.7,.2,1); }
.platform-intro { display:grid; grid-template-columns:minmax(0,720px); gap:18px; align-items:end; margin-bottom:34px; }
.platform-intro h1 { margin-bottom:10px; }
.platform-intro p { max-width:660px; margin-bottom:0; font-size: 16px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.section-heading.inside { margin: 0 0 16px; align-items: center; }
.section-heading h2 { margin: 0; }
.section-heading > div { min-width: 0; }
.section-note { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.section-trailing { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.platform-heading { align-items:center; margin-bottom:16px; }
.platform-heading p { margin:6px 0 0; }
.heading-actions { display:flex; align-items:center; gap:8px; }
.heading-actions .icon { width: 18px; height: 18px; }
.access-note { margin:4px 0 0; color:var(--muted); font-size:13.5px; line-height:1.45; }
.access-note:empty { display:none; }
.platform-empty { grid-column:1 / -1; padding:36px 24px; border:1px dashed var(--border-strong); border-radius:var(--radius); text-align:center; }
.platform-empty h3 { margin:0 0 8px; }
.platform-empty p { margin:0; font-size:14px; }
.platform-back { display: inline-flex; margin:0 0 22px -12px; }
.message-center { display:grid; gap:10px; margin:14px 0; }
.platform-message-center { margin:0 0 26px; }

/* Accounts. */
.account-list,.strategy-list { display:grid; gap:14px; }
.account-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
.account-card { display:grid; gap:16px; padding:24px; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.account-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.account-card.live-account, .account-card.demo-account { border-color: var(--glass-edge); }
.account-card-head,.strategy-card-head,.account-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.account-card h3,.strategy-card h3 { margin:0 0 6px; font-size:18px; }
.account-card p,.strategy-card p { margin:0; font-size:13.5px; }
.account-brand-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
.account-brand-row .environment-badge { margin-bottom:0; }
.account-card-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.account-card-metrics div { display:grid; gap:3px; min-width: 0; }
.account-card-metrics div:first-child { grid-column: 1 / -1; }
.account-card-metrics span, .account-balance-summary span { color:var(--muted); font-size:13.5px; }
.account-card-metrics strong { font-size:16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.account-card-metrics div:first-child strong { font-size: 30px; line-height: 1.15; letter-spacing: -.025em; }
.account-card-foot,.strategy-card-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:16px; border-top:1px solid var(--border); }
.account-card-foot span,.strategy-card-foot span { color:var(--muted); font-size:13px; line-height:1.4; }
.account-card-foot button,.strategy-card-foot button { flex:0 0 auto; }
.account-open { margin-right: -10px; color: var(--accent); font-weight: 600; }
.account-open .icon { width: 18px; height: 18px; }

/* One account. */
.compact-breadcrumb { display:flex; align-items:center; gap:7px; margin-bottom:18px; color:var(--muted-2); font-size:13px; }
.compact-breadcrumb .text-button { padding-left:6px; margin-left: -6px; }
.back-link .icon { width: 18px; height: 18px; }
.account-detail-head { align-items:flex-start; margin-bottom:26px; }
.account-detail-head h1 { margin:0; }
.account-detail-head p { margin:6px 0 0; font-size:14px; }
.account-name-row { display:flex; align-items:center; gap:6px; }
.rename-button { width: auto; padding: 8px 10px; border-radius: 12px; }
.rename-button .icon { width: 18px; height: 18px; }
.connection-state { display: flex; align-items: center; color: var(--muted) !important; }
.inline-rename { display:flex; align-items:center; gap:8px; margin:10px 0; }
.inline-rename input { min-width:min(360px,70vw); }
.account-balance-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 20px; margin:0 0 30px; padding:24px; }
.account-balance-summary div { display:grid; gap:4px; min-width: 0; }
.account-balance-summary strong { font-size:17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.account-balance-summary .balance-lead { grid-column: 1 / -1; }
.account-balance-summary .balance-lead strong { font-size: clamp(32px, 4vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
.account-runs { margin:0 0 30px; }
.account-runs .section-label { margin-bottom: 10px; }
.account-runs-list { display:grid; gap:0; padding:6px 22px; }
.account-run-row { display:flex; justify-content:space-between; gap:14px; padding:16px 0; }
.account-run-row + .account-run-row { border-top:1px solid var(--border); }
.account-run-row > div { display:grid; gap:3px; align-content: start; }
.account-run-row > div:last-child { text-align:right; }
.account-run-row strong { font-variant-numeric: tabular-nums; }
.account-run-row span { color:var(--muted); font-size:13px; }
.account-run-row.remaining strong { font-weight: 600; }

/* Strategies: a strategy and its experimental line are related cards; the
   experimental one is marked quietly, never with warnings. */
.strategy-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); }
.strategy-card { display:grid; gap:16px; padding:24px; grid-template-columns:minmax(0,1fr); }
.strategy-card .strategy-tone { margin-bottom: 12px; color:var(--muted); }
.strategy-card.experimental { border-color:var(--accent-line); }
.strategy-card.experimental .strategy-tone { color:var(--accent); }
.strategy-card .strategy-description { margin:0 0 10px; color:var(--muted); font-size:14px; }
.strategy-card .strategy-context { color: var(--text); font-size: 14px; }
.strategy-allocation { color:var(--text) !important; font-weight:600; }
.console-unavailable { color:var(--muted-2) !important; }

/* Connecting an exchange account. */
.product-view-head { max-width:680px; margin-bottom:28px; }
.product-view-head h1 { margin:6px 0 10px; }
.product-view-head p { margin:0; font-size: 15.5px; }
.wizard-card { max-width:760px; padding:28px; }
.wizard-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:26px; }
.wizard-progress button { display: flex; align-items: center; justify-content: center; gap: 7px; padding:10px 6px; border:0; border-bottom:2px solid var(--border-strong); background:transparent; color:var(--muted); font-size:12.5px; font-weight:600; text-align:center; }
.wizard-progress button span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: 11px; }
.wizard-progress button.active { border-color:var(--accent); color:var(--text); }
.wizard-progress button.active span { background: var(--accent); color: var(--accent-ink); }
.connection-form { display:grid; gap:17px; }
.connection-panel { display:none; gap:17px; }
.connection-panel.active { display:grid; animation: pere-rise .22s ease-out; }
.environment-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.connection-choice { display:grid; gap:6px; min-height:96px; padding:18px; border:1px solid var(--border-strong); border-radius:var(--radius-tile); background:var(--surface); color:var(--text); text-align:left; transition: border-color .15s ease, background .15s ease; }
.connection-choice:hover { border-color: var(--accent-line); }
.connection-choice strong { font-size: 16px; }
.connection-choice span { color:var(--muted); font-size:13px; line-height:1.45; }
.connection-choice.selected { border-color:var(--accent); background:var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.connection-choice.locked { opacity:.5; cursor:not-allowed; }
.environment-lock { color:var(--warn); font-size:12px; font-weight:600; }
.environment-lock:empty { display:none; }
.connection-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.connection-form label { display:grid; gap:8px; color:var(--text); font-size:13.5px; font-weight:600; }
.connection-form small { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.45; }
.connection-instructions { display:grid; gap:7px; padding:18px; border:1px solid var(--accent-line); border-radius:var(--radius-tile); background:var(--accent-soft); }
.connection-instructions strong { font-size:14px; }
.connection-instructions span { color:var(--muted); font-size:13px; line-height:1.55; }
.connection-help { margin-top:6px; padding-top:10px; border-top:1px solid var(--border); }
.connection-help summary { cursor:pointer; color:var(--text); font-size:13px; font-weight:600; }
.connection-help ul { display:grid; gap:7px; margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:13px; line-height:1.5; }
.egress-label { margin-top:4px; font-weight:600; }
.egress-list { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:center; }
.egress-list code { overflow:auto; padding:9px 11px; border-radius:10px; background:var(--sunken); color:var(--text); font-size:13px; }
.pending-headline { margin:6px 0 10px; font-size:13px; font-weight: 600; color:var(--warn); text-transform:uppercase; letter-spacing:.08em; }
.step-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; padding-top:6px; }
.step-actions > :only-child { grid-column:2; }

/* Exchange brands. Bybit's wordmark is made for dark grounds, so in Light it
   sits on a small charcoal tile with clear space around it. */
.exchange-logo { display:block; width:auto; height:15px; max-width:100%; flex:0 0 auto; }
.exchange-logo-md { height:20px; }
.exchange-logo-lg { height:26px; }
.exchange-name { font-weight:600; font-size:14px; }
.exchange-mark { display:inline-flex; align-items:center; min-height:24px; }
.exchange-choice .exchange-mark { min-height:28px; }
html[data-theme="light"] .exchange-logo { box-sizing: content-box; padding: 5px 8px; border-radius: 8px; background: var(--pere-charcoal); }
html[data-theme="light"] .exchange-logo-md { padding: 6px 9px; }
html[data-theme="light"] .exchange-logo-lg { padding: 7px 11px; border-radius: 10px; }

/* Account standing, profile and access copy. */
.account-status-card { max-width:620px; padding:28px; }
.account-status-card h2 { margin:6px 0 4px; }
.account-status-text { margin:0 0 8px; color:var(--text); line-height:1.55; }
.account-status-actions { margin-top:18px; }
.profile-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; max-width:760px; }
.profile-grid .card { padding:24px; }
.profile-grid h2 { margin:0 0 16px; font-size: 18px; }
.profile-details { display:grid; gap:0; margin:0; }
.profile-details div { display:flex; justify-content:space-between; align-items: center; gap:18px; padding:14px 0; border-top:1px solid var(--border); }
.profile-details div:first-child { border-top: 0; padding-top: 4px; }
.profile-details dt { color:var(--muted); font-size:14px; }
.profile-details dd { display: flex; align-items: center; gap: 6px; margin:0; font-weight:600; text-align:right; }
.profile-details dd .unset, #profileDisplayName.unset { color:var(--muted); font-weight:450; }
.inline-edit { margin-left:4px; padding:6px 10px; color: var(--accent); font-size:14px; font-weight: 600; }
.display-name-form { margin-top:14px; padding-top:16px; border-top:1px solid var(--border); }
.display-name-form small { color:var(--muted-2); font-size:12.5px; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:end; }
.checkbox-row { display:flex !important; align-items:center; gap:10px; min-height:48px; color:var(--text) !important; font-weight:600 !important; }
.checkbox-row input { width:18px; height:18px; margin:0; accent-color:var(--accent); }
.preferences-card { display: grid; gap: 0; }
.preference { border-top: 1px solid var(--border); }
.preferences-card h2 + .preference { border-top: 0; }
.preference:not(:has(.toggle-row)) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 0; }
.preference .toggle-row { padding: 14px 0; }
.preference-text { display: grid; gap: 4px; }
.preference-text small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.profile-signout { display: flex; justify-content: flex-start; }
.profile-signout .secondary-button { min-width: 180px; }
.profile-signout .icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- the console */
.app-shell { min-height: 100vh; }
.console-topbar { justify-content: flex-start; gap: 6px; }
.console-topbar .brand-mark.small { width: 38px; height: 38px; }
.back-button { gap: 6px; padding: 9px 12px 9px 8px; border-radius: 12px; color: var(--text); }
.back-button .icon { width: 20px; height: 20px; }
.console-titles { display: grid; min-width: 0; margin-left: 2px; }
.console-title { overflow: hidden; font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.console-titles .demo-label { overflow: hidden; margin-top: 0; text-overflow: ellipsis; white-space: nowrap; }
.page { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 88px; }

.hero-grid { display: grid; grid-template-columns: minmax(0,1.62fr) minmax(0,1fr); gap: 16px; align-items: start; }
.status-panel { min-height: 280px; padding: 30px; display: flex; flex-direction: column; justify-content: flex-start; }
.status-panel h1 { max-width: 760px; margin: 22px 0 8px; font-size: clamp(28px, 3.4vw, 40px); }
.status-panel p { max-width: 700px; margin-bottom: 4px; font-size: 16px; }
.status-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-topline .subtle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* Freshness: a small pulse while checking; old figures dim until fresh ones arrive. */
.status-topline .subtle.is-checking::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pere-fresh-pulse 1.1s ease-in-out infinite; }
@keyframes pere-fresh-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.freshness-retry { margin-left: 8px; font-size: 13px; }
#app[data-switching="true"] #overviewTab, #app[data-switching="true"] #controlsTab { visibility: hidden; }
#app[data-stale="true"] .status-topline .subtle::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: var(--warn); }
.worker-health-note { margin: 4px 0 2px; color: var(--text); font-size: 14px !important; font-weight: 600; }
.worker-recovery-history { margin: 0 0 2px; color: var(--muted-2); font-size: 13px !important; }
.hero-result { display: grid; gap: 2px; margin-top: 22px; }
.hero-result .metric-label { margin-bottom: 0; }
.hero-figure { font-size: clamp(40px, 5vw, 54px); line-height: 1.08; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.run-clock { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.run-progress { display: block; width: 100%; max-width: 560px; height: 5px; margin: 10px 0 0; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--muted); overflow: hidden; appearance: none; -webkit-appearance: none; }
.run-progress::-webkit-progress-bar { border-radius: 999px; background: var(--surface-3); }
.run-progress::-webkit-progress-value { border-radius: 999px; background: var(--muted); transition: width .6s ease; }
.run-progress::-moz-progress-bar { border-radius: 999px; background: var(--muted); }
.status-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.status-actions:not(:has(button:not(.hidden))) { display: none; }
.status-actions button { min-width: 180px; }

.balance-panel { padding: 26px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.balance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.metric-label { display: block; color: var(--muted); font-size: 13.5px; margin-bottom: 6px; }
.hero-metric { display: block; font-size: clamp(32px, 3.6vw, 42px); line-height: 1.1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mini-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 20px 0; }
.mini-metrics > div { display: grid; gap: 3px; min-width: 0; }
.mini-metrics span { display: block; color: var(--muted); font-size: 13px; }
.mini-metrics strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.account-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.balance-subline { display:flex; justify-content:space-between; align-items: baseline; gap:16px; padding: 14px 0; border-top: 1px solid var(--border); color:var(--muted); font-size:14px; }
.balance-subline strong { color:var(--text); font-size:16px; font-variant-numeric: tabular-nums; }
.result-stack,.complete-result-stack { display:grid; justify-items:end; gap:3px; }
/* Finality copy is its own line: two inline <small> siblings previously
   rendered as one run-on string such as "...confirmed2 closed - 100.0% wins". */
.result-finality { display:block; color:var(--muted-2); font-size:12px; font-weight:450; letter-spacing:0; }
.demo-note { color: var(--muted-2); font-size: 12.5px; line-height: 1.45; }

.run-complete { margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; }
.run-complete h2 { margin:0 0 6px; }
.run-complete p { margin:0; font-size:13.5px; }
.complete-result { font-size:34px; font-weight: 600; letter-spacing:-.03em; font-variant-numeric: tabular-nums; }
.complete-actions { grid-column:1 / -1; display:flex; gap:10px; }

/* Sections: a segmented bar on a large screen, the app's bottom bar on a
   phone. */
.tabbar { position: sticky; top: 78px; z-index: 15; display: flex; gap: 4px; margin: 26px 0; padding: 4px; width: max-content; border: 1px solid var(--bar-edge); border-radius: 16px; background: var(--bar); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.tab { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 12px; padding: 10px 16px; color: var(--muted); background: transparent; font-weight: 600; font-size: 14.5px; }
.tab .icon { width: 19px; height: 19px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); background: var(--bar-pill); }
.tabpage { display: none; }
.tabpage.active { display: block; }

/* Campaigns. */
.position-grid, .position-carousel { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.position-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px; transition: border-color .25s ease, background .25s ease; }
.coin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.coin-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #8FC4AE; color: #151817; font-size: 12px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; }
.coin-avatar.small { width: 30px; height: 30px; font-size: 9.5px; }
.coin-avatar.long { font-size: 10px; }
.coin-avatar.small.long { font-size: 8px; }
.coin-tone-0 { background: #8FC4AE; } .coin-tone-1 { background: #9DB4DE; } .coin-tone-2 { background: #D2B07D; } .coin-tone-3 { background: #C0A3D2; }
.coin-tone-4 { background: #E09C8A; } .coin-tone-5 { background: #86C0CF; } .coin-tone-6 { background: #B7C47E; } .coin-tone-7 { background: #DDAEC0; }
.coin-name { min-width: 0; }
.coin-name strong { display: block; font-size: 17px; font-weight: 600; }
.coin-name span { color: var(--muted); font-size: 13.5px; }
.position-pills { flex-basis: 100%; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top: 4px; }
.position-pnl { margin: 18px 0 16px; }
.position-pnl strong { display: block; font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.position-pnl span { color: var(--muted); font-size: 13.5px; }
.position-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.position-facts span, .position-details span { display: block; color: var(--muted); font-size: 13px; }
.position-facts strong, .position-details strong { display: block; margin-top: 2px; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.position-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; }
.position-details div { min-width: 0; }
.safety-block { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 2px 10px; align-items: start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.safety-block .icon { grid-row: span 2; width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.safety-block span,.safety-block small { display:block; color:var(--muted-2); font-size:12.5px; line-height:1.4; }
.safety-block strong { display:block; color:var(--text); font-size:13.5px; font-weight: 500; line-height: 1.4; }
.position-more { margin-top: 12px; }
.position-more > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; list-style: none; }
.position-more > summary::-webkit-details-marker { display: none; }
.position-more > summary .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.position-more[open] > summary .icon { transform: rotate(180deg); }
.position-more > summary:hover { color: var(--text); }
.recovery-section { margin-top: 30px; }
.recovery-badge, .recovery-pill { border: 1px solid var(--held-line); background: var(--held-soft); color: var(--held); }
.recovery-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.recovery-pill .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.recovery-card { border-color: var(--held-line); }
.empty-state { display: grid; place-items: center; text-align: center; padding: 42px 20px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty-state h3 { margin: 0 0 6px; font-size: 16px; }
.empty-state p { max-width: 460px; margin: 0; font-size: 14px; }
.empty-tray { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 18px; border:1px solid var(--border-strong); border-radius:16px; background:var(--surface); color:var(--muted); }
.empty-tray svg { width:27px; height:27px; display:block; }
.carousel-dots { display: none; }
/* Secondary action: present, but visually quieter than the position itself. */
.campaign-close-button { position: relative; z-index: 1; display: block; width: auto; margin: 14px 0 0 auto; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.campaign-close-button:hover { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.campaign-close-button:focus-visible { outline: 2px solid var(--danger-line); outline-offset: 2px; color: var(--danger); }
.campaign-close-button:disabled { opacity: .55; cursor: wait; }

/* Smart Rebalance is an active process, so its pill uses one restrained loop. */
.rebalance-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border:1px solid var(--accent-line); border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; }
.rebalance-loop { width:13px; height:13px; flex:0 0 13px; border-radius:50%; border:1.8px solid var(--accent-line); border-top-color:currentColor; border-right-color:currentColor; animation:pere-rebalance-loop 2.35s cubic-bezier(.55,.08,.45,.92) infinite; }
.rebalancing-card { border-color:var(--accent-line); }
@keyframes pere-rebalance-loop { 0% { transform:rotate(0deg); opacity:.72; } 50% { opacity:1; } 100% { transform:rotate(360deg); opacity:.72; } }

/* Activity and the Run at a glance. */
.two-column { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr); gap: 14px; margin-top: 30px; align-items: start; }
.timeline { display: grid; }
.timeline-item { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 2px 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--border); }
.timeline-item:first-child { border-top: 0; padding-top: 2px; }
.timeline-mark { display: grid; place-items: center; width: 30px; height: 30px; }
.timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.timeline-item.tone-good .timeline-dot { background: var(--good); }
.timeline-item.tone-bad .timeline-dot { background: var(--muted-2); }
.timeline-item.tone-warning .timeline-dot { background: var(--warn); }
.timeline-item.tone-attention .timeline-dot { background: var(--attention); }
.timeline-item.tone-held .timeline-dot { background: var(--held); }
.timeline-item strong { display: block; font-size: 15px; font-weight: 600; }
.timeline-item p { margin: 3px 0 4px; font-size: 14px; line-height: 1.45; }
.timeline-item small, .timeline-item time { color: var(--muted-2); font-size: 12.5px; }
.timeline-amount { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* A closed trade: its heading and its result in the result's colour. */
.timeline-item.trade-gain strong, .timeline-item.trade-gain .timeline-amount { color: var(--good); }
.timeline-item.trade-loss strong, .timeline-item.trade-loss .timeline-amount { color: var(--bad); }
.glance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.glance-grid div { min-width: 0; }
.glance-grid span { display: block; color: var(--muted); font-size: 13px; }
.glance-grid strong { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.technical { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.technical summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.technical-body { padding-top: 10px; color: var(--muted-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; word-break: break-word; }
.console-details { display: none; }

/* Activity: bounded inline feed, quiet filter, full list in a scrollable sheet. */
.activity-card .section-heading.inside { align-items: center; }
.activity-filter { position: relative; flex: 0 0 auto; }
.activity-filter-button { padding: 7px 10px; font-size: 13.5px; }
.activity-filter-button.active { color: var(--accent); }
.activity-filter-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--sheet); box-shadow: var(--shadow-float); animation: pere-pop .14s ease-out; }
.activity-chip { display:flex; align-items:center; gap:10px; padding: 9px 11px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; text-align: left; }
.activity-chip:hover { background: var(--surface-2); color: var(--text); }
.activity-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.activity-filter-chips .activity-chip { padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 999px; }
.activity-filter-chips .activity-chip.active { border-color: var(--accent-line); background: var(--accent-soft); }
.activity-more { display: inline-flex; margin: 8px 0 0 -12px; color: var(--accent); font-size: 14px; font-weight: 600; }
/* Activity filter: an explicit check state on every option. */
.activity-check { position:relative; flex:0 0 auto; width:16px; height:16px; border:1.5px solid var(--muted-2); border-radius:5px; transition:background .12s ease, border-color .12s ease; }
.activity-chip.active .activity-check { border-color:var(--accent); background:var(--accent); }
.activity-chip.active .activity-check::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
.activity-chip.mixed .activity-check { border-color:var(--muted); }
.activity-chip.mixed .activity-check::after { content:""; position:absolute; left:3px; right:3px; top:6px; height:2px; border-radius:1px; background:var(--muted); }
.activity-chip.active { color:var(--text); }
.activity-chip:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.activity-filter-chips .activity-chip.active { color:var(--text); }
.activity-modal-card { display: flex; flex-direction: column; width: min(100%, 580px); max-height: min(84vh, 760px); }
.activity-modal-card h2 { margin-right: 40px; }
.activity-modal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
.activity-older { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 6px 0 4px; border-top: 1px solid var(--border); }
.activity-older p, p.activity-older-end { margin: 0; color: var(--muted); font-size: 13px; }
p.activity-older-end { padding-top: 14px; }
.activity-older .activity-more { margin: 4px 0 0 -12px; }

/* Messages are communication and sit apart from the readiness notice. */
.message { position: relative; display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:4px 12px; align-items:start; padding:16px 16px 16px 18px; border:1px solid var(--blue-line); border-radius:var(--radius-tile); background:linear-gradient(135deg, var(--glass-top), var(--glass-bottom)); overflow: hidden; }
.message::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--blue); }
/* The app's glyph beside the title: information, or a warning. */
.message::after { content: ""; grid-column: 1; grid-row: 1; width: 20px; height: 20px; margin-top: 1px; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") center / 20px no-repeat; }
.message-warning::after, .message-critical::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.message-warning::after { background: var(--warn); }
.message-critical::after { background: var(--attention); }
.connection-preview::after { display: none; }
.message > strong, .message > span, .message > small { display:block; grid-column:2; }
.message > strong { font-size: 15px; }
.message > span { color:var(--muted); font-size:14px; line-height:1.5; white-space:pre-line; }
.message > small { color:var(--muted-2); font-size:12.5px; }
.message > button { grid-column:3; grid-row:1 / span 3; align-self:start; }
.message-dismiss { width: 36px; height: 36px; margin: -6px -6px 0 0; padding: 0; border-radius: 50%; }
.message-warning { border-color:var(--warn-line); }
.message-warning::before { background: var(--warn); }
.message-critical { border-color:var(--attention-line); }
.message-critical::before { background: var(--attention); }
.maintenance-notice { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; margin:14px 0 0; padding:16px; border:1px solid var(--warn-line); border-radius:var(--radius-tile); background:var(--warn-soft); }
.maintenance-notice strong,.maintenance-notice span,.maintenance-notice small { display:block; }
.maintenance-notice span { color:var(--muted); font-size:13.5px; }
.maintenance-notice small { color:var(--warn); font-size:11.5px; font-weight: 600; text-transform:uppercase; letter-spacing: .06em; }
.maintenance-actions { grid-column:2; grid-row:1 / span 3; display:flex; flex-direction:column; gap:4px; align-items:flex-end; justify-content:center; }
.status-panel .message-center { margin-bottom: 0; }

/* ---------------------------------------------------------------- history */
.session-strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.session-strip::-webkit-scrollbar { display: none; }
.session-chip { min-width: 210px; padding: 16px 18px; scroll-snap-align: start; }
.session-chip span { display: block; color: var(--muted); font-size: 13.5px; }
.session-chip small { display: block; }
.session-chip strong { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.session-chip > small:last-child { color: var(--muted); font-size: 13px; }
.session-chip { appearance: none; text-align: left; color: var(--text); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.session-chip:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.session-chip.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.session-chip .result-finality { margin-top:-12px; margin-bottom: 10px; }
.history-run-meta { margin:8px 0 12px; padding:0 2px; }
.history-run-meta p { margin:0; color:var(--muted); font-size:13.5px; line-height:1.5; }
.history-report-action { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; }
.history-report-action .history-run-meta { margin:0; }
/* Share and View report stay side by side, including on phones. */
.history-report-buttons { display: flex; align-items: center; gap: 6px; }
.quiet-report-action { color:var(--accent); font-weight: 600; }
.history-list { display: grid; gap: 0; margin-top: 4px; }
.history-row { display: grid; grid-template-columns: minmax(0,1.5fr) .7fr .55fr; gap: 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s ease; }
.history-row:first-child { border-top: 1px solid var(--border); }
.history-row:hover { background: var(--surface); }
.history-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.history-row.expanded { background: var(--surface); }
.history-coin { display: flex; align-items: center; gap: 12px; min-width: 0; }
.history-coin > div { min-width: 0; }
.history-coin > div > strong,.history-coin > div > span,.history-time span,.history-time strong,.history-result span,.history-result strong { display:block; }
.history-coin > div > strong { font-size: 15.5px; }
.history-coin > div > span,.history-time span,.history-result span { margin-top:3px; color:var(--muted); font-size:13px; }
.history-time strong { margin-top:3px; font-size:14px; font-weight: 500; }
.history-result { text-align:right; }
.history-result strong { font-size:16px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* History cards expand in place to a short, plain-language trade story. */
.history-detail { grid-column: 1 / -1; display: grid; gap: 8px; margin: 2px 0 4px; padding: 12px 0 0 54px; border-top: 1px solid var(--border); cursor: text; }
.history-detail[hidden] { display: none; }
.history-detail > div { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 10px; align-items: baseline; }
.history-detail dt { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.history-detail dd { margin: 0; color: var(--text); font-size: 14px; line-height: 1.45; }
.history-more { display: flex; width: min(100%, 420px); margin: 18px auto 0; }

/* ---------------------------------------------------------------- Run report */
.session-report { display:grid; gap:16px; min-width:0; }
.report-title,.report-title-result,.report-actions { min-width:0; }
.report-title { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin:4px 0 10px; }
.report-title h1 { margin:6px 0 4px; }
.report-title p { margin:0; }
.report-total { font-size:44px; line-height: 1.08; font-weight: 600; letter-spacing:-.035em; font-variant-numeric: tabular-nums; }
.report-result-finality { color:var(--muted-2); font-size:12.5px; font-weight:450; }
.report-title-result { display:grid; justify-items:end; gap:8px; }
.report-actions { display:flex; align-items:center; gap:6px; }
.report-return { font-size:14px; font-weight:600; }
.export-menu { position:relative; }
.export-menu > summary { list-style:none; cursor:pointer; }
.export-menu > summary::-webkit-details-marker { display:none; }
.export-menu > div { position:absolute; right:0; top:calc(100% + 8px); z-index:8; display:grid; min-width:260px; padding:6px; border:1px solid var(--border-strong); border-radius:16px; background:var(--sheet); box-shadow:var(--shadow-float); }
.export-menu > div button { display:grid; gap:3px; justify-items: start; min-height:52px; text-align:left; color: var(--text); }
.export-menu > div span { color:var(--muted); font-size:12.5px; font-weight:450; }
.report-section { padding:26px; }
.report-section-head { margin-bottom:18px; }
.report-section-head .eyebrow { color: var(--muted); }
.report-section-head h2 { margin:4px 0 0; font-size:20px; }
/* The report's cards stand apart, as everywhere else. */
#sessionReportContent { display:grid; gap:16px; min-width:0; }
.report-title { margin-bottom:0; }
/* A part that folds: its heading opens and closes it. */
.report-fold > .report-fold-head { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:end; cursor:pointer; list-style:none; }
.report-fold > .report-fold-head::-webkit-details-marker { display:none; }
.report-fold-head > .eyebrow, .report-fold-head > h2 { grid-column:1; }
.report-fold-count { grid-column:2; grid-row:1 / span 2; align-self:center; display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; font-weight:500; white-space:nowrap; }
.report-fold-count .icon { width:20px; height:20px; transition:transform .2s ease; }
.report-fold[open] > .report-fold-head .report-fold-count .icon { transform:rotate(180deg); }
.report-fold > .report-fold-head:hover .report-fold-count { color:var(--text); }
.report-fold:not([open]) > .report-fold-head { margin-bottom:0; }
.report-subfold { margin-top:26px; }
.report-more { justify-self:start; margin:4px 0 0 -12px; color:var(--accent); font-weight:600; }
.report-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 14px; }
.report-metrics > div,.observation-grid > div { display:grid; gap:4px; min-width: 0; }
.report-metrics span,.observation-grid span { color:var(--muted); font-size:13px; }
.report-metrics strong, .observation-grid strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.observation-grid span { text-transform:capitalize; }
.report-dates { display:grid; gap:4px; margin-top:18px; color:var(--muted); font-size:13px; }
.pnl-waterfall { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.pnl-waterfall div { display:grid; gap:5px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-tile); background: var(--surface); }
.pnl-waterfall span { color:var(--muted); font-size:13px; }
.pnl-waterfall strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.pnl-waterfall .net { border-color:var(--accent-line); background:var(--accent-soft); }
.report-chart-wrap { margin-top:20px; }
.report-chart { width:100%; height:160px; overflow:visible; }
.report-chart line { stroke:var(--border-strong); stroke-width:.5; }
.report-chart polyline { fill:none; stroke:var(--accent); stroke-width:2; vector-effect:non-scaling-stroke; }
.report-chart-wrap > div { display:flex; justify-content:space-between; color:var(--muted); font-size:12.5px; }
.report-chart-wrap > div strong { color:var(--text); }
.symbol-breakdown { display:grid; gap:7px; margin-top:18px; }
.symbol-breakdown div { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-top:1px solid var(--border); font-size:13px; }
.contribution-heading { margin-top:26px; }
.contribution-visual { margin-top:8px; }
.contribution-donut { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; align-items:center; }
.donut-svg { width:170px; height:170px; overflow:visible; }
.donut-svg text { fill:var(--text); font-size:3.8px; font-weight:600; }
.donut-svg .donut-track { stroke: var(--surface-3); }
.donut-svg .donut-hole { fill: var(--sheet); }
.contribution-legend { display:grid; gap:9px; }
.contribution-legend div { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:14px; }
.contribution-legend i { width:10px; height:10px; border-radius:50%; }
.donut-svg .palette-stroke-0 { stroke:#3EE0BB; }.donut-svg .palette-stroke-1 { stroke:#7CB4FF; }.donut-svg .palette-stroke-2 { stroke:#FFC24D; }.donut-svg .palette-stroke-3 { stroke:#C0A3D2; }.donut-svg .palette-stroke-4 { stroke:#93D0D2; }.donut-svg .palette-stroke-5 { stroke:#FF9E68; }
.contribution-legend .palette-0 { background:#3EE0BB; }.contribution-legend .palette-1 { background:#7CB4FF; }.contribution-legend .palette-2 { background:#FFC24D; }.contribution-legend .palette-3 { background:#C0A3D2; }.contribution-legend .palette-4 { background:#93D0D2; }.contribution-legend .palette-5 { background:#FF9E68; }
.contribution-bars { display:grid; gap:10px; }
.contribution-bar-row { display:grid; grid-template-columns:70px minmax(120px,1fr) 100px; gap:12px; align-items:center; font-size:13.5px; }
.contribution-bar-row > strong { text-align:right; font-variant-numeric: tabular-nums; }
.bar-axis-svg { width:100%; height:18px; overflow:visible; }
.bar-axis-svg .bar-axis { stroke: var(--border-strong); }
.bar-axis-svg .bar-gain { fill: var(--good); }
.bar-axis-svg .bar-loss { fill: var(--bad); }
.report-chart-details { margin-top:20px; }
.report-campaigns { display:grid; gap:8px; }
.report-campaign { padding:0 16px; border:1px solid var(--border); border-radius:var(--radius-tile); background:var(--surface); }
.report-campaign summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; cursor:pointer; list-style:none; }
.report-campaign summary::-webkit-details-marker { display:none; }
.report-campaign summary span { display:grid; gap:3px; }
.report-campaign summary small { color:var(--muted); font-size: 13px; }
.campaign-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 0 16px; }
.campaign-detail-grid div { display:grid; gap:4px; padding:11px 12px; border-radius:12px; background:var(--sunken); }
.campaign-detail-grid span { color:var(--muted); font-size:12px; }
.report-two-column { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.report-lifecycle { display:grid; gap:12px; }
.report-lifecycle div { padding-left:12px; border-left:2px solid var(--accent); }
.report-lifecycle span { color:var(--muted); font-size:12px; }
.report-lifecycle p { margin:4px 0 0; color:var(--text); font-size:13.5px; }
.lifecycle-list { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.lifecycle-list li { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--border); }
.lifecycle-list li:first-child { border-top: 0; }
.lifecycle-list span { color:var(--muted); font-size:13px; }
.observation-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.report-advanced { padding:18px 22px; }
.report-advanced > summary { cursor:pointer; font-weight:600; }
.report-chart-details.report-advanced { box-shadow: none; }
.advanced-events { display:grid; gap:0; margin-top:16px; }
.advanced-events > div { display:grid; grid-template-columns:130px 190px minmax(0,1fr); gap:12px; padding:10px 0; border-top:1px solid var(--border); font-size:12px; }
.advanced-events span { color:var(--muted); }
.advanced-events p { margin:0; font-size:12px; }
.report-empty { padding:24px; color:var(--muted); text-align:center; }
.report-beta { margin-top: 16px; }
.report-note { margin: 12px 0 0; font-size: 13px; }
.report-integrity-warning { display:grid; gap:5px; padding:16px 18px; border:1px solid var(--attention-line); border-radius:var(--radius-tile); background:var(--attention-soft); }
.report-integrity-warning strong { color:var(--attention); }
.report-integrity-warning span { color:var(--muted); font-size:13px; line-height:1.5; }

/* ---------------------------------------------------------------- setting up a Run */
.control-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 16px; align-items: start; }
.body-copy { font-size: 14.5px; }
.control-form { margin-top: 22px; }
.control-form label { display: grid; gap: 8px; }
.control-form small { color: var(--muted); font-size: 12.5px; line-height: 1.45; font-weight: 400; }
.run-builder { overflow:hidden; }
/* While a Run is going: what it runs with, read-only. */
.active-run-settings .body-copy { margin-bottom: 0; }
.run-settings-list { display: grid; margin: 20px 0 0; padding: 2px 18px; border: 1px solid var(--border); border-radius: var(--radius-tile); background: var(--surface); }
.run-settings-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--border); }
.run-settings-list > div:first-child { border-top: 0; }
.run-settings-list dt { color: var(--muted); font-size: 14px; }
.run-settings-list dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.run-line-summary { margin-top: 14px; }
.setup-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:22px 0 4px; padding:4px; border:1px solid var(--border); border-radius:16px; background:var(--sunken); }
.setup-step { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-weight:600; font-size:13.5px; }
.setup-step span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--surface-3); color:var(--muted); font-size:11.5px; }
.setup-step.active { background:var(--bar-pill); color:var(--text); }
.setup-step.active span { background:var(--accent); color:var(--accent-ink); }
.setup-step:disabled { opacity: .5; cursor: not-allowed; }
.setup-panel { display:none; gap:18px; padding-top:18px; scroll-margin-top:140px; }
.setup-panel.active { display:grid; animation: pere-rise .22s ease-out; }
.allocation-boundaries { display:grid; gap:10px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-tile); background:var(--surface); }
.allocation-head { display:flex; justify-content:space-between; align-items:end; gap:14px; }
.allocation-head + .allocation-head { padding-top:10px; border-top:1px solid var(--border); }
.allocation-head .field-label { display:block; margin-bottom:4px; color: var(--muted); font-weight: 500; }
.allocation-value { font-size:26px; font-weight: 600; letter-spacing:-.025em; font-variant-numeric: tabular-nums; }
.allocation-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.allocation-summary > div { padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-tile); background:var(--surface); }
.allocation-summary span { display:block; color:var(--muted); font-size:13px; }
.allocation-summary strong { display:block; margin-top:4px; font-size:17px; font-variant-numeric: tabular-nums; }
.field-with-unit { display: flex; align-items: center; gap: 9px; padding: 0 15px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--field); color: var(--muted); }
.field-with-unit:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field-with-unit input { border: 0; background: transparent; padding-left: 0; padding-right: 0; box-shadow: none; }
.risk-control { display:grid; gap:10px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-tile); background:var(--surface); }
.risk-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; }
.risk-heading .field-label { display:block; margin-bottom:4px; }
.risk-heading strong { font-size:15px; font-variant-numeric: tabular-nums; }
/* Larger, finger-friendly sliders. Visible track + 44px interaction lane. */
.risk-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  cursor: grab;
}
.risk-slider:focus { box-shadow: none; }
.risk-slider:active { cursor: grabbing; }
.risk-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--warn)); box-shadow: inset 0 0 0 1px var(--border); }
.risk-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--text); border: 6px solid var(--sheet); box-shadow: 0 3px 14px rgba(0,0,0,.35), 0 0 0 1px var(--border-strong); }
.risk-slider::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--warn)); }
.risk-slider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--text); border: 6px solid var(--sheet); box-shadow: 0 3px 14px rgba(0,0,0,.35); }
.risk-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent-line); }
.risk-slider:disabled { opacity: .5; cursor: not-allowed; }
.risk-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;color:var(--muted-2);font-size:11.5px}.risk-scale span{text-align:center}.risk-scale span:first-child{text-align:left}.risk-scale span:last-child{text-align:right}.compact-scale{grid-template-columns:1fr 1fr 1fr}
.setting-block{display:grid;gap:10px}
.choice-pills{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--border);border-radius:14px;background:var(--sunken)}
.choice-pill{min-height:40px;border:0;border-radius:11px;padding:10px 12px;background:transparent;color:var(--muted);font-weight:600;font-size:14px}.choice-pill.active{background:var(--bar-pill);color:var(--text)}
.value-unit-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px}.value-unit-grid select{width:100%}
.hold-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hold-option { padding:16px; border:1px solid var(--border-strong); border-radius:var(--radius-tile); background:var(--surface); cursor: pointer; text-align: left; color: var(--text); font: inherit; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.hold-option:hover { transform: translateY(-1px); border-color: var(--accent-line); }
.hold-option.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.hold-option.disabled { opacity:.45; }
.hold-option strong { display:block; font-size:14.5px; }
.hold-option strong em { margin-left:6px; color:var(--accent); font-size:10.5px; text-transform:uppercase; font-style:normal; letter-spacing:.08em; font-weight: 600; }
.hold-option span { display:block; margin-top:6px; color:var(--muted); font-size:13px; line-height:1.45; }
.run-summary { padding:16px 18px; border:1px solid var(--accent-line); border-radius:var(--radius-tile); background:var(--accent-soft); }
.run-summary span { display:block; color:var(--accent); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.run-summary strong { display:block; font-size:16px; line-height:1.45; }
.automation-choice { border:1px solid var(--border); border-radius:var(--radius-tile); background:var(--surface); overflow:hidden; }
.schedule-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:16px; border:1px solid var(--blue-line); border-radius:var(--radius-tile); background:var(--blue-soft); }
.schedule-fields label { display:grid; gap:7px; }
.schedule-fields select,.schedule-fields input { width:100%; min-height:44px; }
.schedule-fields small { grid-column:1 / -1; }
.automation-note,.review-note { padding:13px 15px; border-radius:var(--radius-tile); background:var(--warn-soft); color:var(--muted); font-size:13px; line-height:1.5; }
.review-summary { margin-top:0; }
.review-lines { display:grid; gap:8px; }
.review-lines div { padding:11px 13px; border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--muted); font-size:13px; line-height:1.5; }
.control-info .strategy-settings { margin-top: 18px; }
.strategy-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.strategy-settings > div { padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-tile); background:var(--surface); }
.strategy-settings > div:first-child { grid-column: span 2; }
.strategy-settings span,.strategy-settings small { display:block; color:var(--muted); font-size:12.5px; line-height:1.4; }
.strategy-settings strong { display:block; margin:5px 0; font-size:15px; }
.reserve-line { margin-top:14px; color:var(--muted); font-size:12.5px; }
.capability-list { display: grid; gap: 16px; margin-top: 24px; }
.capability { display: grid; grid-template-columns: 30px 1fr; gap: 12px; opacity: .56; }
.capability.enabled { opacity: 1; }
.cap-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; }
.capability.enabled .cap-icon { background: var(--accent-soft); color: var(--accent); }
.capability strong { font-size: 14.5px; }
.capability p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
.automation-list-wrap { margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.automation-list-wrap h3 { margin:0 0 12px; font-size:17px; }
.automation-list { display:grid; gap:8px; }
.automation-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px; border:1px solid var(--border); border-radius:14px; background:var(--surface); }
.automation-item strong,.automation-item span,.automation-item small { display:block; }
.automation-item strong { font-size:13.5px; }
.automation-item span,.automation-item small { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.4; }

/* Strategy lines and experimental settings. */
.beta-panel { display: grid; gap: 14px; margin-bottom: 18px; padding: 18px; border: 1px solid var(--accent-line); border-radius: var(--radius-tile); background: var(--surface); }
.beta-head { display: grid; gap: 4px; }
.beta-head small, .beta-section small { color: var(--muted); font-size: 13px; line-height: 1.5; }
.beta-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.beta-preset { display: grid; align-content: start; gap: 6px; text-align: left; padding: 13px 14px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); color: var(--text); }
.beta-preset span { color: var(--muted); font-size: 13px; line-height: 1.45; font-weight: 400; }
.beta-preset.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
/* Built-in and saved presets: two labelled groups in one choice. */
.beta-preset-group { display: grid; gap: 8px; min-width: 0; }
.beta-preset-group + .beta-preset-group { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.beta-preset-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.beta-preset-heading { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.beta-preset-heading-row small { color: var(--muted); font-size: 12.5px; }
.beta-preset.user-preset { min-width: 0; border-style: dashed; }
.beta-preset.user-preset.selected { border-style: solid; }
.beta-preset.user-preset strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.beta-preset.user-preset.needs-review { opacity: .7; }
.beta-preset.user-preset.needs-review span { color: var(--warn); }
.preset-modified { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); vertical-align: 1px; }
.preset-empty { color: var(--muted); font-size: 13px; line-height: 1.45; }
.preset-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.preset-actions .preset-status { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; font-weight: 600; }
.beta-smart-hold { margin-top: 2px; }
.review-preset { display: flex; justify-content: flex-end; }
.preset-name-card { display: grid; gap: 12px; max-width: 440px; }
.preset-name-card label { display: grid; gap: 7px; font-size: 13.5px; font-weight: 600; }
.preset-name-card small { color: var(--muted); line-height: 1.45; }
.beta-summary { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.beta-advanced > summary, .beta-advanced-limits > summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.beta-section { display: grid; gap: 10px; margin-top: 14px; }
.beta-ladder { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.beta-ladder th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 4px 6px; }
.beta-ladder td { padding: 4px 6px; vertical-align: top; }
.beta-ladder input[type="number"] { padding: 8px 9px; border-radius: 10px; min-width: 64px; }
.beta-ladder small { display: block; margin-top: 3px; color: var(--muted-2); font-size: 11.5px; }
.beta-check, .control-form .beta-check { display: inline-flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; }
.beta-check input { width: auto; }
.beta-status { font-size: 13px; color: var(--muted); }
.beta-status-active { color: var(--accent); }
.beta-status-withheld_by_escape { color: var(--warn); }
.beta-errors { margin: 0; }
.beta-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.beta-worst { display: grid; gap: 6px; font-size: 13.5px; }
.beta-worst-row { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr 2fr; gap: 8px; padding: 9px 11px; border-radius: 10px; background: var(--surface-2); }
/* What an experimental configuration can commit. */
.beta-demand { display:grid; gap:8px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; }
.beta-demand > small { color:var(--muted); font-size:12.5px; }
.beta-demand-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:8px; }
.beta-demand-grid div { display:grid; gap:2px; padding:9px 11px; border-radius:10px; background:var(--surface-2); }
.beta-demand-grid span { color:var(--muted); font-size:12px; }
.beta-demand-grid small { color:var(--muted-2); font-size:11.5px; }

/* ---------------------------------------------------------------- dialogs */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: pere-fade .18s ease-out; }
.modal-card { position: relative; width: min(100%, 460px); max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px; border-radius: 26px; background: var(--sheet); box-shadow: var(--shadow-float); animation: pere-pop .2s ease-out; }
.modal-card h2 { margin-right: 36px; }
.modal-close { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: 21px; line-height: 1; }
.modal-close:hover { color: var(--text); background: var(--surface-3); }
@keyframes pere-fade { from { opacity: 0; } }
.session-action { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10px; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-tile); background: var(--surface); color: var(--text); text-align: left; }
.session-action:hover { border-color: var(--accent-line); background: var(--surface-2); }
.session-action strong, .session-action small { display: block; }
.session-action strong { font-size: 15px; }
.session-action small { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.session-action.danger-option { border-color: var(--danger-line); }
.session-action.danger-option strong { color: var(--danger); }
.live-start-card > h2 { margin-bottom:6px; }
.live-start-summary { display:grid; gap:0; margin:22px 0; }
.live-start-summary div { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; border-top:1px solid var(--border); }
.live-start-summary div:last-child { border-bottom:1px solid var(--border); }
.live-start-summary dt { color:var(--muted); font-size:14px; }
.live-start-summary dd { margin:0; color:var(--text); font-weight:600; font-variant-numeric: tabular-nums; }
.campaign-close-card { width:min(100%,520px); }
.campaign-close-policies { display:grid; gap:9px; margin:20px 0 4px; padding:0; border:0; }
.campaign-close-policies legend { margin-bottom:10px; color:var(--text); font-size:14px; font-weight:600; }
.campaign-close-policy { display:flex; align-items:flex-start; gap:12px; padding:14px; border:1px solid var(--border-strong); border-radius:var(--radius-tile); background:var(--surface); cursor:pointer; }
.campaign-close-policy:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.campaign-close-policy input { flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); }
.campaign-close-policy strong, .campaign-close-policy small { display:block; }
.campaign-close-policy strong { color:var(--text); font-size:14px; }
.campaign-close-policy small { margin-top:4px; color:var(--muted); font-size:13px; line-height:1.4; }
.campaign-close-delay { margin:2px 0 4px 30px; }
/* Confirmation */
.confirm-card { width:min(100%, 480px); }
.confirm-card h2 { margin:6px 0 12px; }
.confirm-body p { margin:0 0 10px; font-size:14px; }
.confirm-reason { display:grid; gap:7px; margin:6px 0 4px; color:var(--muted); font-size:13px; font-weight:600; }
.confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
/* Sharing a completed Run: the image, and what it includes. */
.share-result-card { width: min(100%, 720px); }
.share-result-card > p { font-size: 14px; }
.share-layout { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 20px; align-items: start; margin: 16px 0 6px; }
.share-preview { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border: 1px solid var(--border-strong); border-radius: 16px; background: #090D0C; }
.share-options { display: grid; gap: 0; }
.share-options .toggle-row { padding: 14px 0; border-top: 1px solid var(--border); }
.share-options .toggle-row:first-child { border-top: 0; }
.toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); max-width: min(90vw, 480px); padding: 13px 18px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--sheet); color: var(--text); box-shadow: var(--shadow-float); opacity: 0; pointer-events: none; transition: .22s ease; font-size: 14px; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- administration */
.admin-tabs { display:flex; gap:4px; width:max-content; max-width:100%; margin:0 0 22px; padding:4px; border:1px solid var(--border); border-radius:16px; background:var(--sunken); }
.admin-tabs button { padding:10px 16px; border:0; border-radius:12px; background:transparent; color:var(--muted); font-weight:600; font-size:14px; }
.admin-tabs button[aria-selected="true"] { background:var(--bar-pill); color:var(--text); }
.admin-pending-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:12px 16px; border:1px solid var(--warn-line); border-radius:var(--radius-tile); background:var(--warn-soft); color:var(--warn); font-size:14px; font-weight:600; }
.admin-pending-banner .text-button { color:var(--warn); font-weight:600; }
.admin-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.admin-filter { display:flex; flex-wrap:wrap; gap:6px; }
.filter-chip { min-height: 36px; padding:7px 13px; border:1px solid var(--border-strong); border-radius:999px; background:transparent; color:var(--muted); font-size:13.5px; font-weight:600; }
.filter-chip .count { margin-left:4px; color:var(--muted-2); font-weight:500; }
.filter-chip.selected { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); }
.admin-search { position: relative; flex:0 1 280px; }
.admin-search .icon { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--muted); }
.admin-search input { padding:10px 14px 10px 38px; font-size:14px; }
.admin-user-list { display:grid; gap:10px; }
.admin-user { overflow:hidden; box-shadow: inset 1px 1px 0 var(--glass-rim); }
.admin-user.pending { border-color:var(--warn-line); }
.admin-user.expanded { border-color:var(--border-strong); }
.admin-user-summary { display:flex; align-items:center; gap:10px; padding-right:14px; }
.admin-user-toggle { flex:1 1 auto; min-width:0; display:grid; grid-template-columns:40px minmax(0,1.4fr) auto minmax(0,1.6fr) 18px; align-items:center; gap:14px; padding:14px 16px; border:0; background:transparent; color:var(--text); text-align:left; }
.admin-user-toggle:hover { background:var(--surface); }
.admin-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface-3); color:var(--text); font-size:13px; font-weight:600; letter-spacing:.02em; }
.admin-identity { min-width:0; display:grid; gap:3px; }
.admin-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.admin-identity strong.unset { color:var(--muted); font-weight:500; }
.admin-identity span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:13px; }
.admin-status { display:flex; flex-wrap:wrap; gap:6px; }
.admin-chips { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.access-chip { padding:4px 9px; border:1px solid var(--border); border-radius:999px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; }
.access-chip.demo { color:var(--blue); border-color:var(--blue-line); }
.access-chip.live { color:var(--live); border-color:var(--live-line); }
.access-chip.strategy { color:var(--accent); border-color:var(--accent-line); }
.access-chip.none { color:var(--muted-2); }
.admin-chevron { width:9px; height:9px; justify-self:end; border-right:2px solid var(--muted-2); border-bottom:2px solid var(--muted-2); transform:rotate(45deg) translateY(-3px); transition:transform .15s ease; }
.admin-user.expanded .admin-chevron { transform:rotate(225deg) translateY(-2px); }
.lifecycle-badge, .role-badge { display:inline-flex; padding:4px 10px; border:1px solid transparent; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.lifecycle-active { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.lifecycle-pending-activation { color:var(--warn); border-color:var(--warn-line); background:var(--warn-soft); }
.lifecycle-registered { color:var(--muted); border-color:var(--border-strong); }
.lifecycle-suspended { color:var(--live); border-color:var(--live-line); background:var(--live-soft); }
.lifecycle-deactivated { color:var(--danger); border-color:var(--danger-line); background:var(--danger-soft); }
.role-badge { color:var(--blue); border-color:var(--blue-line); background:var(--blue-soft); }
.admin-user-details { padding:4px 18px 20px; border-top:1px solid var(--border); }
.admin-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.admin-section { padding:18px; border:1px solid var(--border); border-radius:var(--radius-tile); background:var(--surface); }
.admin-section h3 { margin:0 0 8px; font-size:11.5px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.admin-section p { margin:0 0 10px; font-size:14px; line-height:1.5; }
.admin-meta { color:var(--muted-2); font-size:12.5px !important; }
.admin-hint { color:var(--muted-2); font-size:12.5px !important; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.admin-toggle-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--border); }
.admin-toggle-row strong, .admin-toggle-row span { display:block; }
.admin-toggle-row div span { color:var(--muted); font-size:12.5px; }
.admin-toggle-row.live strong { color:var(--live); }
.state-text { color:var(--muted); font-size:13px; font-weight:600; }
.state-text.on { color:var(--accent); }
.admin-strategy { padding:10px 0; border-top:1px solid var(--border); }
.admin-strategy-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.admin-channels { display:grid; gap:6px; margin-top:10px; padding-left:12px; border-left:2px solid var(--border); }
.admin-channel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.admin-channel-row strong, .admin-channel-row span { display:block; }
.admin-channel-row div span { color:var(--muted-2); font-size:12px; }
.admin-account { padding:10px 0; border-top:1px solid var(--border); }
.admin-account-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.admin-account-head .environment-badge { margin-bottom:0; }
.admin-account-head strong { font-size:14px; }
.admin-execution-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; background:var(--surface-2); }
.admin-execution-row strong,.admin-execution-row span { display:block; }
.admin-execution-row span { margin-top:3px; color:var(--muted); font-size:12.5px; }
.admin-audit { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.admin-audit li { display:grid; gap:2px; padding:9px 0; border-top:1px solid var(--border); }
.admin-audit li:first-child { border-top:0; }
.admin-audit strong { font-size:14px; }
.admin-audit span { color:var(--muted-2); font-size:12.5px; }
/* Admin: one row per strategy line. */
.admin-line { padding:11px 0; border-top:1px solid var(--border); }
.admin-line .admin-strategy-head > div:first-child { display:grid; gap:3px; }
.admin-line .admin-strategy-head span { color:var(--muted-2); font-size:12.5px; }
.admin-line.secondary { padding-left:12px; }
/* Composer */
.admin-composer { padding:26px; margin-bottom:14px; }
.admin-composer h2 { margin:4px 0 4px; }
.admin-messages-panel .card, #adminMessagesPanel > .card + .card { margin-top: 14px; }
.message-type-picker { margin:18px 0; padding:0; border:0; }
.message-type-picker legend { margin-bottom:8px; color:var(--muted); font-size:13px; font-weight:600; }
.message-type-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.message-type { position:relative; display:flex; gap:10px; padding:14px; border:1px solid var(--border-strong); border-radius:var(--radius-tile); background:var(--surface); cursor:pointer; }
.message-type input { width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent); }
.message-type strong, .message-type small { display:block; }
.message-type strong { font-size:14px; }
.message-type small { margin-top:3px; color:var(--muted-2); font-size:12px; }
.message-type.selected { border-color:var(--accent); background:var(--accent-soft); }
.message-type:focus-within { box-shadow:0 0 0 3px var(--accent-soft); }
.composer-explainer { margin:0; padding:13px 15px; border:1px solid var(--warn-line); border-radius:14px; background:var(--warn-soft); color:var(--muted); font-size:13px; line-height:1.5; }
.composer-explainer strong { color:var(--warn); }
#messageFields, #maintenanceFields { display:grid; gap:17px; }
#messageFields.hidden, #maintenanceFields.hidden { display:none !important; }
.composer-preview { display:grid; gap:8px; }
.composer-preview .message-center { margin:0; }
.connection-preview { grid-template-columns:1fr; }
.connection-preview > strong, .connection-preview > span, .connection-preview > small { grid-column: 1; }
.connection-preview .egress-list { display:flex; flex-wrap:wrap; gap:6px; }
.connection-preview code { padding:3px 7px; border-radius:7px; background:var(--surface-2); font-size:12px; }
.admin-recent-messages, .maintenance-targets { margin-top:12px; }
.admin-message-list { display:grid; margin:0; padding:0; list-style:none; }
.admin-message-list li { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--border); }
.admin-message-list li:first-child { border-top:0; }
.admin-message-list strong, .admin-message-list span { display:block; }
.admin-message-list div span { margin-top:3px; color:var(--muted-2); font-size:12.5px; }
.admin-message-list li.message-warning strong { color:var(--warn); }
.admin-message-list li.message-critical strong { color:var(--attention); }
.message-state, .readiness { flex:0 0 auto; padding:4px 10px; border:1px solid var(--border-strong); border-radius:999px; color:var(--muted); font-size:12px; font-weight:600; }
.message-state.state-active, .readiness-ready { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.readiness-needs-update, .readiness-unable-to-verify { color:var(--warn); border-color:var(--warn-line); background:var(--warn-soft); }
/* Form controls in the composer and the profile read as values, not labels. */
.admin-composer input, .admin-composer select, .admin-composer textarea,
.display-name-form input, .confirm-reason input { font-weight:400; font-size:15px; }
.admin-composer small, .admin-composer .field-hint { color:var(--muted-2); font-size:12.5px; font-weight:400; }

/* Preserve the Start new run navigation offset beneath sticky controls. */
#controlsTab { scroll-margin-top: 140px; }

/* ---------------------------------------------------------------- balances hidden */
.sensitive-mask { letter-spacing: .06em; }

/* ---------------------------------------------------------------- medium screens */
@media (max-width: 1099px) {
  .position-grid, .position-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .message-type-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 959px) {
  .hero-grid, .two-column, .control-layout { grid-template-columns: 1fr; }
  .platform-intro { grid-template-columns:1fr; align-items:start; }
  .profile-grid,.report-two-column { grid-template-columns:1fr; }
  .report-metrics,.campaign-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pnl-waterfall,.observation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-sections { grid-template-columns:1fr; }
  .admin-user-toggle { grid-template-columns:40px minmax(0,1fr) 18px; }
  .admin-user-toggle .admin-status { grid-column:2; grid-row:2; }
  .admin-user-toggle .admin-chips { grid-column:2; grid-row:3; justify-content:flex-start; }
  .admin-user-toggle .admin-chevron { grid-column:3; grid-row:1; }
  .account-balance-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .status-panel { min-height: 0; }
}

/* ---------------------------------------------------------------- a phone: the app */
@media (max-width: 719px) {
  :root { --gutter: 20px; }
  body { font-size: 15px; }
  h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
  h2 { font-size: 18px; }
  .card { padding: 20px; }
  .card, .status-panel, .balance-panel, .account-card, .strategy-card, .position-card, .report-section, .wizard-card, .admin-user, .account-balance-summary, .account-runs-list, .session-chip, .console-details { box-shadow: inset 1px 1px 0 var(--glass-rim); }

  /* Bars. */
  .topbar { min-height: 60px; padding: 8px 12px 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); }
  .platform-topbar .identity-text, .platform-topbar #platformLogoutButton, .platform-topbar #adminNavButton, .app-shell .topbar #logoutButton, .app-shell .topbar .online-label { display:none; }
  .identity-button { max-width: none; margin: 0; padding: 4px; border-radius: 50%; }
  .mobile-menu-button { display:inline-flex; }
  .mobile-menu { right: 12px; }
  .console-topbar { gap: 2px; padding-left: 6px; }
  .back-button { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .back-button .back-text { display: none; }
  .console-topbar .brand-mark.small { width: 34px; height: 34px; }
  .console-title { font-size: 17px; }
  .topbar .refresh-action { min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .topbar .refresh-action #refreshText { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .topbar .refresh-icon .icon { width: 21px; height: 21px; }

  /* The workspace. */
  .platform-page { width: calc(100% - 40px); padding: 26px 0 64px; }
  .platform-intro { margin-bottom: 24px; }
  .platform-intro p { font-size: 15px; }
  .platform-heading { align-items:flex-start; flex-direction:column; gap: 12px; }
  .heading-actions { width:100%; justify-content:space-between; }
  .account-list { grid-template-columns:1fr; }
  .account-card { padding: 22px 20px; }
  .account-card-metrics div:first-child strong { font-size: 28px; }
  .strategy-card-foot { align-items:stretch; flex-direction:column; }
  .strategy-card-foot button { width:100%; }
  .strategy-card { padding: 22px 20px; }
  .compact-breadcrumb .breadcrumb-trail { display: none; }
  .account-detail-head { flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .account-balance-summary { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 16px; padding: 22px 20px; }
  .account-balance-summary .balance-lead strong { font-size: 36px; }
  .account-runs-list { padding: 4px 20px; }
  .account-run-row { gap: 12px; }
  .inline-rename { align-items:stretch; flex-direction:column; }
  .wizard-card { padding: 22px 20px; }
  .wizard-progress { grid-template-columns:repeat(2,1fr); }
  .connection-grid,.environment-cards { grid-template-columns:1fr; }
  .step-actions { grid-template-columns:1fr; }
  .step-actions > :only-child { grid-column:auto; }
  .step-actions > span:empty { display: none; }
  .form-row { grid-template-columns:1fr; }
  .profile-details div { align-items: flex-start; }
  .profile-signout .secondary-button { width: 100%; }
  .preference:not(:has(.toggle-row)) { flex-direction: column; align-items: stretch; }
  .appearance-choice { display: grid; grid-template-columns: repeat(3, 1fr); }

  /* The console: an app bar, the hero on the page itself, the sections at
     the bottom. */
  .app-shell { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .page { width: calc(100% - 40px); padding: 18px 0 32px; }
  .hero-grid { gap: 0; }
  .status-panel { min-height: 0; padding: 4px 0 8px; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .status-panel h1 { margin: 18px 0 6px; font-size: 26px; }
  .status-panel p { font-size: 15px; }
  .hero-figure { font-size: 40px; }
  .status-actions { flex-direction: column; }
  .status-actions button { width: 100%; min-width: 0; }
  .run-progress { max-width: none; }
  .balance-panel { padding: 22px 20px; }
  .run-complete { grid-template-columns:1fr; padding: 20px; }
  .run-complete .complete-result-stack { justify-items: start; }
  .complete-result { font-size: 30px; }
  .complete-actions { display:grid; grid-template-columns:1fr; }
  .tabbar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: auto; margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--bar-edge); border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18); }
  .tab { flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 0 4px 2px; border-radius: 16px; font-size: 13px; font-weight: 500; background: transparent !important; }
  .tab .icon { width: 58px; height: 32px; padding: 6px 19px; border-radius: 999px; box-sizing: border-box; transition: background .2s ease; }
  .tab.active { font-weight: 600; }
  .tab.active .icon { background: var(--bar-pill); color: var(--accent); }
  .tab.active .icon rect, .tab.active .icon path { stroke: currentColor; }
  .tabpage { padding-top: 22px; }
  body[data-console-tab="history"] #heroGrid, body[data-console-tab="controls"] #heroGrid,
  body[data-console-tab="history"] #runCompleteCard, body[data-console-tab="controls"] #runCompleteCard { display: none; }
  body[data-console-tab="history"] .tabpage.active, body[data-console-tab="controls"] .tabpage.active { padding-top: 4px; }
  .section-heading { align-items: flex-start; }
  .section-heading .count-badge { height: auto; padding: 0; min-width: 0; }
  #overviewTab > .section-heading { margin-top: 6px; }

  /* Campaigns side by side: each row swipes and snaps; with more than one,
     a card leaves room for the next at the edge. */
  .position-carousel { display: flex; gap: 12px; margin: 0 -20px; padding: 2px 20px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; }
  .position-carousel::-webkit-scrollbar { display: none; }
  .position-carousel .position-card { flex: 0 0 calc(100% - 28px); max-width: 440px; scroll-snap-align: start; padding: 20px; }
  .position-carousel .position-card:only-child { flex-basis: 100%; max-width: none; }
  .carousel-dots:not(.hidden) { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .carousel-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong); transition: width .2s ease, background .2s ease; }
  .carousel-dots i.active { width: 18px; background: var(--accent); }
  .position-pnl strong { font-size: 28px; }

  /* Activity on the page, then the details. */
  .two-column { margin-top: 26px; }
  .activity-card { padding: 0; border: 0; background: none; box-shadow: none; }
  .two-column #runGlanceCard { display: none; }
  .console-details:not(.hidden) { display: block; margin-top: 22px; padding: 0; overflow: hidden; }
  .console-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; cursor: pointer; list-style: none; }
  .console-details > summary::-webkit-details-marker { display: none; }
  .console-details > summary strong { display: block; color: var(--accent); font-size: 15px; }
  .console-details > summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
  .console-details > summary .icon { color: var(--accent); transition: transform .2s ease; }
  .console-details[open] > summary .icon { transform: rotate(180deg); }
  .console-details-body { display: grid; gap: 14px; padding: 0 12px 12px; }
  .console-details-body .balance-panel, .console-details-body #runGlanceCard { display: flex; flex-direction: column; margin: 0; padding: 18px; border: 1px solid var(--border); background: var(--surface); box-shadow: none; }
  .console-details-body #runGlanceCard.hidden { display: none; }

  /* History. */
  .session-strip { margin: 0 -20px; padding: 2px 20px 10px; scroll-padding: 0 20px; }
  .session-chip { min-width: 250px; }
  .history-report-action { align-items:flex-start; flex-direction:column; }
  .history-report-action .history-report-buttons { width: 100%; }
  .history-report-action .history-report-buttons button { flex: 1 1 0; width: auto; }
  .history-row { grid-template-columns:1fr auto; padding: 14px 2px; }
  .history-row .hide-mobile { display:none; }
  .history-detail { padding-left: 0; }
  .history-detail > div { grid-template-columns: 62px minmax(0,1fr); gap: 8px; }

  /* Report. */
  .report-title { align-items:flex-start; flex-direction:column; gap: 16px; }
  .report-title-result { width:100%; justify-items:start; }
  .report-total { font-size: 40px; }
  .report-actions { width:100%; align-items:stretch; }
  .report-actions > button { flex:1; }
  .export-menu { margin-left:auto; }
  .export-menu > div { right:0; left:auto; width:min(280px,calc(100vw - 28px)); min-width:0; max-width:calc(100vw - 28px); }
  .report-section { padding: 22px 20px; }
  #sessionReportContent { gap: 12px; }
  .report-metrics,.campaign-detail-grid,.pnl-waterfall,.observation-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contribution-donut { grid-template-columns:1fr; justify-items:center; }
  .contribution-legend { width:100%; }
  .contribution-bar-row { grid-template-columns:55px minmax(80px,1fr) 80px; gap:7px; }
  .advanced-events > div { grid-template-columns:1fr; gap:3px; }

  /* Setting up a Run: the form is the page itself, as in the app, so the
     choices inside it keep the full width. */
  .run-builder, .active-run-settings { padding: 0; overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
  /* While a Run is going a phone shows just what it runs with, as the app. */
  #activeRunSettings:not(.hidden) ~ .control-info { display: none; }
  .active-run-settings .run-settings-list { padding: 2px 20px; border-color: var(--glass-edge); border-radius: var(--radius); background: linear-gradient(135deg, var(--glass-top), var(--glass-bottom)); box-shadow: inset 1px 1px 0 var(--glass-rim); }
  .setup-steps { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .setup-step { flex-direction: column; gap:4px; padding:7px 3px; font-size:11.5px; }
  .setup-step span { width:20px; height:20px; }
  .allocation-summary,.schedule-fields { grid-template-columns:1fr; }
  .schedule-fields small { grid-column:auto; }
  .strategy-settings { grid-template-columns: 1fr; }
  .strategy-settings > div:first-child { grid-column: auto; }
  .risk-slider { height: 50px; }
  .risk-slider::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -13px; }
  .risk-slider::-moz-range-thumb { width: 34px; height: 34px; }
  .value-unit-grid{grid-template-columns:minmax(0,1fr) 120px}
  .hold-choice{grid-template-columns:1fr}
  .risk-scale{font-size:10.5px}
  .automation-item { align-items:flex-start; }
  .beta-ladder thead { display: none; }
  .beta-ladder tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .beta-ladder td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--muted); font-size: 11.5px; }
  .beta-worst-row { grid-template-columns: 1fr 1fr; }

  /* Dialogs become sheets from the bottom. */
  .modal { align-items: end; padding: 12px 0 0; }
  .modal-card { width: 100%; max-height: 92vh; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; animation: pere-sheet .26s cubic-bezier(.2,.8,.2,1); }
  .activity-modal-card { width: 100%; max-height: 88vh; }
  /* The full list's filters stay small on a phone, leaving the room to the activity. */
  .activity-filter-chips { gap: 4px; margin: 0 0 8px; }
  .activity-filter-chips .activity-chip { gap: 5px; padding: 4px 9px; font-size: 12px; line-height: 1.2; }
  .activity-filter-chips .activity-check { width: 11px; height: 11px; border-width: 1.25px; border-radius: 3.5px; }
  .activity-filter-chips .activity-chip.active .activity-check::after { left: 2.75px; top: 0.25px; width: 3px; height: 6px; border-width: 0 1.5px 1.5px 0; }
  .activity-filter-chips .activity-chip.mixed .activity-check::after { left: 2px; right: 2px; top: 3.75px; height: 1.5px; }
  .confirm-actions { flex-direction:column-reverse; }
  .confirm-actions button { width:100%; }
  .share-layout { grid-template-columns: 1fr; justify-items: center; }
  .share-preview { width: min(260px, 70vw); }
  .share-options { width: 100%; }
  /* Above the console's bottom bar; elsewhere at the foot of the screen. */
  .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  body:not(:has(#app:not(.hidden))) .toast { bottom: max(24px, env(safe-area-inset-bottom)); }

  /* Messages and notices. */
  .maintenance-notice { grid-template-columns:1fr; }
  .maintenance-actions { grid-column:auto; grid-row:auto; flex-direction:row; align-items:flex-start; justify-self:start; }

  /* Administration. */
  .admin-user-summary { flex-wrap:wrap; padding:0 0 12px; }
  .admin-user-summary > .primary-button { margin-left:70px; }
  .message-type-options { grid-template-columns:1fr; }
  .admin-toggle-row { grid-template-columns:minmax(0,1fr) auto; }
  .admin-toggle-row .state-text { display:none; }
  .admin-search { flex:1 1 100%; }
  .admin-tabs { width:100%; }
  .admin-tabs button { flex:1 1 0; }
  .admin-execution-row { align-items:flex-start; flex-direction:column; }
  /* Signing in on a phone is the page itself, as in the app. */
  .login-shell { place-items: start center; padding-top: max(56px, env(safe-area-inset-top)); }
  .login-card { padding: 8px 2px; border: 0; background: none; box-shadow: none; }
  .login-copy { padding-top: 38px; }
}
@keyframes pere-sheet { from { transform: translateY(30px); opacity: .4; } }
@media (max-width: 380px) {
  .page, .platform-page { width: calc(100% - 32px); }
  .position-carousel, .session-strip { margin: 0 -16px; padding-left: 16px; padding-right: 16px; scroll-padding: 0 16px; }
  .hero-figure { font-size: 36px; }
}

/* Motion is presentation only; with reduced motion nothing slides or pops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rebalance-loop { animation:none !important; border-color:var(--accent); }
  .refresh-icon.spinning { animation: pere-spin .8s linear infinite !important; }
}