/* =========================================================================
   THE DESK THEME - app-wide, in DARK and LIGHT (his order, 2026-09-29)

   He tried Option A on the profile, kept it, and asked for it "everywhere",
   with the Classic option replaced by an ordinary dark / light switch.

   HOW IT IS BUILT, so nothing old is lost:
   - styles.css is the base and is NOT edited. The classic look still lives
     there, whole; this file and theme-desk-map.css sit on top.
   - theme-desk-map.css is GENERATED (scratchpad/colormap.py): every colour
     styles.css hard-codes, mapped to one of the tokens below. That is what
     makes light mode possible at all - a hard-coded light-grey text is
     invisible on white, and ~390 of them had to follow the theme.
   - This file loads last and wins: tokens per mode, the app's own variables
     re-pointed at them, and the hand-written component rules.
   - <html data-theme="dark|light"> is set in <head> before first paint.

   THE RULES OF THE LOOK: sections separate by a step in shade, never by a
   border. Only money carries colour (green / red). Amber is the one accent,
   used on purpose: the main button, leverage, the hold bar, the order
   ticket's selected state, and warnings. Warnings keep their own tinted
   panels in both modes - a lighter page must never make a failure quieter.
   ========================================================================= */

/* ---- tokens --------------------------------------------------------------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --dk-page:#0b0e11; --dk-panel:#161a1e; --dk-row:#1e2329; --dk-hover:#2b3139;
  --dk-line:#2b3139; --dk-line-strong:#474d57;
  --dk-text:#eaecef; --dk-text-2:#b7bdc6; --dk-muted:#848e9c; --dk-faint:#5e6673;
  --dk-green:#0ecb81; --dk-red:#f6465d; --dk-amber:#f0b90b; --dk-blue:#3d9ee6;
  --dk-amber-fill:#f0b90b; --dk-amber-fill-hover:#f8d12f; --dk-on-amber:#1e2329;
  --dk-green-bg:rgba(14,203,129,.12);  --dk-green-line:rgba(14,203,129,.35);
  --dk-red-bg:rgba(246,70,93,.12);     --dk-red-line:rgba(246,70,93,.40);
  --dk-amber-bg:rgba(240,185,11,.12);  --dk-amber-line:rgba(240,185,11,.35);
  --dk-blue-bg:rgba(61,158,230,.12);   --dk-blue-line:rgba(61,158,230,.35);
  --dk-wash-hi:rgba(255,255,255,.05); --dk-wash-lo:rgba(0,0,0,.25);
  --dk-wash-line:rgba(255,255,255,.10);
  --dk-shadow:none;
  --dk-field-line:#2b3139; --dk-btn-line:transparent;
  --dk-map-land:#161a1e; --dk-map-border:#474d57; --dk-map-dot:#5e6673; --dk-map-lake-line:#2b3139;
}
html[data-theme="light"]{
  color-scheme:light;
  /* LIGHT MODE IS GREY, NOT WHITE (his order, 2026-10-12: "change the white
     color that it has to gray especially in this hex code: BEBDB8").
     The page AND the panels are exactly #BEBDB8 - whichever of them he meant
     by "the white", it is now his colour, and nothing on screen is white.
     With page and panel the same shade a panel is told apart by a thin edge
     (--dk-shadow), and the rows and fields inside it by a step LIGHTER.

     EVERY INK HAD TO GET DARKER WITH IT. #BEBDB8 is a mid grey (luminance
     0.51): the old muted grey read 2.3:1 on it and the old green 1.6:1 -
     a profit you cannot read. Each ink below clears 4.5:1 on the page
     (text 9:1), and more on the lighter rows where the money figures sit. */
  --dk-page:#bebdb8; --dk-panel:#bebdb8; --dk-row:#cac9c5; --dk-hover:#acaba6;
  --dk-line:#a9a8a3; --dk-line-strong:#989792;
  --dk-text:#171a1e; --dk-text-2:#343941; --dk-muted:#434850; --dk-faint:#585e68;
  --dk-green:#00573a; --dk-red:#980f27; --dk-amber:#634800; --dk-blue:#0d4c8a;
  --dk-amber-fill:#fcd535; --dk-amber-fill-hover:#f0c419; --dk-on-amber:#1e2329;
  --dk-green-bg:rgba(0,87,58,.14);     --dk-green-line:rgba(0,87,58,.45);
  --dk-red-bg:rgba(152,15,39,.12);     --dk-red-line:rgba(152,15,39,.45);
  --dk-amber-bg:rgba(240,185,11,.24);  --dk-amber-line:rgba(99,72,0,.45);
  --dk-blue-bg:rgba(13,76,138,.12);    --dk-blue-line:rgba(13,76,138,.40);
  --dk-wash-hi:rgba(0,0,0,.05); --dk-wash-lo:rgba(0,0,0,.05);
  --dk-wash-line:rgba(0,0,0,.12);
  /* the edge that tells a panel from the page now that both are one grey */
  --dk-shadow:0 0 0 1px rgba(0,0,0,.13), 0 1px 2px rgba(0,0,0,.08);
  --dk-field-line:#8f8e89; --dk-btn-line:rgba(0,0,0,.10);
  --dk-map-land:#cdccc8; --dk-map-border:#7d7c77; --dk-map-dot:#686762; --dk-map-lake-line:#979691;
  /* the browser draws a WHITE scrollbar track in a light page - the last white
     thing left on screen. Inherited, so this one line covers every list. */
  scrollbar-color:var(--dk-line-strong) var(--dk-page);
}

/* ---- the app's own variables, re-pointed ---------------------------------
   Set on body AND on every screen: styles.css gives each screen its own
   --gold by id, and an id beats anything set higher up. Every component that
   already reads these follows without a rule of its own. */
html[data-theme] body,
html[data-theme] #screen-welcome, html[data-theme] #screen-login,
html[data-theme] #screen-signup, html[data-theme] #screen-profile,
html[data-theme] #screen-market, html[data-theme] #screen-exchange,
html[data-theme] #screen-forex-sessions, html[data-theme] #screen-setup,
html[data-theme] #screen-dash{
  --bg:var(--dk-page); --panel:var(--dk-panel); --panel-2:var(--dk-row);
  --border:var(--dk-line); --border-strong:var(--dk-line-strong);
  --text:var(--dk-text); --text-dim:var(--dk-muted); --text-faint:var(--dk-muted);
  --dim:var(--dk-muted); --ink:var(--dk-text);
  --green:var(--dk-green); --red:var(--dk-red);
  /* --gold is the app's accent and sits on dozens of things. Pointed at
     amber it leaked amber everywhere; neutral here, and amber is asked for
     by name (--dk-amber) only where it is meant. */
  --gold:var(--dk-text-2); --gold-dim:var(--dk-wash-line);
}

/* ---- light mode: nothing may be dimmed into the grey ----------------------
   The base look fades small labels, notes, idle chips and switched-off things
   with `opacity` - 64 rules of it, tuned for a near-black page. On a MID grey
   the same fade drops a 12px label under 3:1 (measured: 2.8, and a closed
   exchange's hours 1.7). So in light mode:
     - words that are simply secondary are full strength (their colour already
       says "secondary");
     - things that are OFF - a closed market, a disabled button, an idle worker
       - stay visibly fainter than what is on, but never past readable.
   Dark mode is untouched. */
html[data-theme="light"] .nt-demo, html[data-theme="light"] .brk-pnl span,
html[data-theme="light"] .bot-tf, html[data-theme="light"] .wk-sub,
html[data-theme="light"] .wk-count, html[data-theme="light"] .bstat-l,
html[data-theme="light"] .bstat-v.muted, html[data-theme="light"] .bot-new-title,
html[data-theme="light"] .nb-field label, html[data-theme="light"] .tf-measured,
html[data-theme="light"] .pc-sec, html[data-theme="light"] .pc-n,
html[data-theme="light"] .pc-cell-k, html[data-theme="light"] .pc-lock-k,
html[data-theme="light"] .pc-more > summary, html[data-theme="light"] .bt-box > summary,
html[data-theme="light"] .bt-when, html[data-theme="light"] .cr-head .cr-sub,
html[data-theme="light"] .cr-foot, html[data-theme="light"] .mw-lvl b,
html[data-theme="light"] .mw-lvl.total span, html[data-theme="light"] .mw-dust,
html[data-theme="light"] .screen .panel-title, html[data-theme="light"] .screen .step-heading,
html[data-theme="light"] .screen .pcard-title,
html[data-theme="light"] .trade-hub .hub-part > .pcard-title,
html[data-theme="light"] #screen-profile .conn-sub, html[data-theme="light"] #screen-profile .mw-sub,
html[data-theme="light"] #screen-profile .mw-plan{ opacity:1; }
html[data-theme="light"] .fut-order-row, html[data-theme="light"] .bot-caret,
html[data-theme="light"] details.bot-new > summary .bot-caret,
html[data-theme="light"] #screen-profile .foldable > .pcard-title::after{ opacity:.9; }
html[data-theme="light"] .mw-lvl span, html[data-theme="light"] .mw-guard,
html[data-theme="light"] .mw-cansell, html[data-theme="light"] .cr-none,
html[data-theme="light"] .bt-none, html[data-theme="light"] .pc-empty,
html[data-theme="light"] .mw-lvl em, html[data-theme="light"] .bot-dot{ opacity:.85; }
/* switched off, and it still has to be read */
html[data-theme="light"] .global-row.disabled, html[data-theme="light"] .pc-locked,
html[data-theme="light"] .wk.stalled{ opacity:.85; }
html[data-theme="light"] .exchange-card.disabled, html[data-theme="light"] .session-card.disabled,
html[data-theme="light"] .inv-row.inv-dead, html[data-theme="light"] .wk.idle,
html[data-theme="light"] .pc-lock .btn{ opacity:.78; }
html[data-theme="light"] .btn.primary:disabled, html[data-theme="light"] .fut-buy:disabled,
html[data-theme="light"] .fut-sell:disabled, html[data-theme="light"] .connect-opt:disabled,
html[data-theme="light"] .acc-btn:disabled, html[data-theme="light"] .mw-sell[disabled],
html[data-theme="light"] .bsize-sep{ opacity:.65; }

/* ---- the page ------------------------------------------------------------- */
html[data-theme] body{ background:var(--dk-page); color:var(--dk-text);
  font-family:Inter, system-ui, sans-serif; }
html[data-theme] .screen{ background:var(--dk-page); }        /* no grid texture */
/* the particle wave and the map's radar sweep are the HUD's signature; an
   exchange is plain */
html[data-theme] #waveBg,
html[data-theme] .fm-scan{ display:none; }

/* ---- sections: panels by shade, no borders ------------------------------- */
html[data-theme] .pcard,
html[data-theme] #screen-profile .pcard{
  background:var(--dk-panel); border:0; border-radius:8px; box-shadow:var(--dk-shadow);
  padding:20px 22px 22px; margin:0 0 12px; }
html[data-theme] #screen-profile .pcard:first-of-type{ border-top:0; }
html[data-theme] .pcard.globe-card,
html[data-theme] #screen-profile .pcard.globe-card{ background:transparent; box-shadow:none; padding:8px 0 0; }
html[data-theme] .pcard-title,
html[data-theme] #screen-profile .pcard-title{
  font-family:Inter, system-ui, sans-serif; font-size:15px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--dk-text); opacity:1; margin-bottom:14px; }

/* ---- type: sentence case and readable sizes, everywhere ------------------
   Every title in the markup is already written in sentence case; the old
   look only FORCED capitals with CSS. Undoing that is all it takes. */
html[data-theme] .pcard-title, html[data-theme] .stat-label, html[data-theme] .bstat-l,
html[data-theme] .tr-title, html[data-theme] .tr-count, html[data-theme] .mw-sub,
html[data-theme] .slot-head, html[data-theme] .bot-new-title, html[data-theme] .bot-state,
html[data-theme] .conn-sub, html[data-theme] .wk, html[data-theme] .wk-name,
html[data-theme] .wk-count, html[data-theme] label, html[data-theme] .nb-field > span,
html[data-theme] .nb-row > span, html[data-theme] .btn, html[data-theme] .back-link,
html[data-theme] .section-title, html[data-theme] .screen-title, html[data-theme] .kicker,
html[data-theme] .eyebrow, html[data-theme] .tag, html[data-theme] .demo-tag,
html[data-theme] .mode-badge, html[data-theme] .fut-label, html[data-theme] .fut-type,
html[data-theme] .tv-tf, html[data-theme] .market-card .mc-sub,
html[data-theme] .setup-label, html[data-theme] .form-label{
  text-transform:none; letter-spacing:0; }

/* ---- header ---------------------------------------------------------------- */
html[data-theme] .profile-welcome,
html[data-theme] #screen-profile .profile-welcome{
  font-family:Inter, system-ui, sans-serif; font-style:normal; font-weight:500;
  font-size:22px; color:var(--dk-text); letter-spacing:0; }
html[data-theme] .profile-name{ color:var(--dk-text); font-weight:500; }
html[data-theme] .profile-email{ color:var(--dk-muted); }
html[data-theme] .profile-avatar{
  background:var(--dk-hover); color:var(--dk-text); border-color:var(--dk-hover);
  font-family:Inter, system-ui, sans-serif; font-weight:500; }

/* ---- headline numbers ------------------------------------------------------ */
html[data-theme] #screen-profile .stat-grid{
  gap:12px; border:0; padding:0; margin:0 0 12px; background:transparent; }
html[data-theme] #screen-profile .stat-box,
html[data-theme] #screen-profile .stat-box:first-child{
  background:var(--dk-panel); border:0; border-radius:8px; padding:16px 18px; box-shadow:var(--dk-shadow); }
html[data-theme] .stat-label,
html[data-theme] #screen-profile .stat-label{
  font-family:Inter, system-ui, sans-serif; font-size:12px; opacity:1;
  color:var(--dk-muted); margin-bottom:8px; text-transform:none; letter-spacing:0; }
html[data-theme] .stat-val,
html[data-theme] #screen-profile .stat-val{
  font-family:Inter, system-ui, sans-serif; font-variant-numeric:tabular-nums;
  font-size:22px; font-weight:500; color:var(--dk-text); }      /* 22, his call */
html[data-theme] .stat-val.red{ color:var(--dk-red); }
html[data-theme] .stat-val.green{ color:var(--dk-green); }
html[data-theme] .stat-sub,
html[data-theme] #screen-profile .stat-sub{
  font-family:Inter, system-ui, sans-serif; font-size:12px; color:var(--dk-muted); opacity:1; }

/* ---- money: the only colour ---------------------------------------------- */
html[data-theme] .pos, html[data-theme] .up, html[data-theme] .pnl.up,
html[data-theme] .bstat-v.pos, html[data-theme] .bstat-v .pos,
html[data-theme] .green{ color:var(--dk-green); }
html[data-theme] .neg, html[data-theme] .down, html[data-theme] .pnl.down,
html[data-theme] .bstat-v.neg, html[data-theme] .bstat-v .neg,
html[data-theme] .red{ color:var(--dk-red); }

/* ---- buttons: filled and quiet; amber only for the main action ----------- */
html[data-theme] .btn{
  background:var(--dk-hover); border:0; color:var(--dk-text); border-radius:6px;
  font-family:Inter, system-ui, sans-serif; font-size:13px; font-weight:500;
  padding:8px 14px; }
html[data-theme] .btn:hover{ background:var(--dk-line-strong); color:var(--dk-text); border:0; }
html[data-theme] .btn.primary{ background:var(--dk-hover); color:var(--dk-text); }
html[data-theme] #chooseInvestmentBtn,
html[data-theme] .btn.cta{ background:var(--dk-amber-fill); color:var(--dk-on-amber); }
html[data-theme] #chooseInvestmentBtn:hover,
html[data-theme] .btn.cta:hover{ background:var(--dk-amber-fill-hover); color:var(--dk-on-amber); }
html[data-theme] .btn.danger, html[data-theme] .bot-btn.danger{ color:var(--dk-red); }
html[data-theme] .conn-btn, html[data-theme] .conn-btn.primary{
  background:var(--dk-hover); border:0; color:var(--dk-text); border-radius:6px; }
html[data-theme] .conn-btn:hover{ background:var(--dk-line-strong); }
html[data-theme] .back-link{ color:var(--dk-muted); }
html[data-theme] .back-link:hover{ color:var(--dk-text); }

/* ---- open positions -------------------------------------------------------- */
html[data-theme] .profile-pos-row{
  background:var(--dk-row); border:0; border-radius:6px; padding:12px 14px;
  font-size:13px; margin-bottom:6px; }
html[data-theme] .profile-pos-row:hover{ background:var(--dk-hover); border:0; }
html[data-theme] .profile-pos-row .pp-sym{ color:var(--dk-text); font-size:14px; font-weight:500; }
html[data-theme] .profile-pos-row .pp-cell{
  font-family:Inter, system-ui, sans-serif; font-variant-numeric:tabular-nums;
  color:var(--dk-muted); font-size:12px; }
html[data-theme] .profile-pos-row .pnl{
  font-family:Inter, system-ui, sans-serif; font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:500; }
html[data-theme] .profile-pos-row .pp-go{ color:var(--dk-muted); font-size:12px; }
html[data-theme] .dir-tag{ font-size:12px; border-radius:4px; }
html[data-theme] .dir-tag.long{ background:var(--dk-green-bg); color:var(--dk-green); }
html[data-theme] .dir-tag.short{ background:var(--dk-red-bg); color:var(--dk-red); }
html[data-theme] .lev-badge{
  font-family:Inter, system-ui, sans-serif; font-size:12px; color:var(--dk-amber);
  background:var(--dk-amber-bg); border:0; }
html[data-theme] .pp-clock{ font-size:12px; color:var(--dk-muted); }
html[data-theme] .pp-clock b{ color:var(--dk-text); font-weight:500; }
html[data-theme] .pp-clock-bar{ background:var(--dk-hover); flex-basis:90px; height:3px; }
html[data-theme] .pp-clock-bar i{ background:var(--dk-amber); }

/* ---- bots ------------------------------------------------------------------ */
html[data-theme] .bot-row, html[data-theme] .mw-row,
html[data-theme] #screen-profile .bot-row, html[data-theme] #screen-profile .mw-row{
  background:var(--dk-row); border:0; border-radius:8px; padding:16px 18px; margin-bottom:10px; }
html[data-theme] .bot-name{ color:var(--dk-text); font-family:Inter, system-ui, sans-serif; font-weight:500; }
html[data-theme] .bot-what{ color:var(--dk-muted); }
html[data-theme] .bot-state{ font-size:12px; }
html[data-theme] .bot-state.live{ color:var(--dk-green); }
html[data-theme] .bot-dot.live{ background:var(--dk-green); box-shadow:none; }
html[data-theme] .bot-stats{
  background:transparent; border:0; border-radius:0; gap:18px 26px; margin:14px 0 12px; }
html[data-theme] .bstat{ background:transparent; padding:0; }
html[data-theme] .bstat-l{ font-family:Inter, system-ui, sans-serif; font-size:12px; color:var(--dk-muted); }
html[data-theme] .bstat-v{
  font-family:Inter, system-ui, sans-serif; font-variant-numeric:tabular-nums;
  font-size:17px; font-weight:500; color:var(--dk-text); }
html[data-theme] .bstat-v.muted{ color:var(--dk-faint); }
html[data-theme] .bstat-note{
  font-family:Inter, system-ui, sans-serif; font-size:11px; color:var(--dk-faint); opacity:1; }
html[data-theme] .bot-new-title{
  font-family:Inter, system-ui, sans-serif; font-size:14px; font-weight:500; color:var(--dk-text); }
html[data-theme] .wk{ background:var(--dk-hover); border:0; color:var(--dk-muted); border-radius:4px; font-size:12px; }
html[data-theme] .wk .wk-name{ color:var(--dk-text-2); }
html[data-theme] .wk-box{ background:transparent; border:0; padding:0; }

/* ---- rows, chips, forms --------------------------------------------------- */
html[data-theme] .conn-row{ background:var(--dk-row); border:0; border-radius:6px; padding:12px 14px; }
html[data-theme] .conn-sub{ font-size:12px; color:var(--dk-muted); }
html[data-theme] .tr-chip{
  background:var(--dk-row); border:0; color:var(--dk-muted); border-radius:4px; font-size:12px; }
html[data-theme] .tr-chip.on, html[data-theme] .tr-chip.active{ background:var(--dk-hover); color:var(--dk-text); }
html[data-theme] .tr-title{ font-size:14px; font-weight:500; color:var(--dk-text); }
html[data-theme] .tr-count{ color:var(--dk-muted); }
html[data-theme] input, html[data-theme] select, html[data-theme] textarea{
  background:var(--dk-row); border:1px solid var(--dk-line); color:var(--dk-text); border-radius:6px; }
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder{ color:var(--dk-faint); }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus{
  border-color:var(--dk-amber); outline:none; }

/* ---- the map: quieter lines ---------------------------------------------- */
html[data-theme] .fm-country{ stroke:var(--dk-map-border); fill:var(--dk-map-land); }
html[data-theme] .fm-lake{ stroke:var(--dk-map-lake-line); fill:var(--dk-page); }
html[data-theme] .fm-city-dot{ fill:var(--dk-map-dot); }
/* light mode: pale land on a pale page with hairline grey borders all but
   vanished (his report, 2026-09-30). The land takes a real grey step off the
   page and the borders a mid grey, drawn at a steady screen width so they
   stay visible at the whole-world zoom, where the map is scaled down most. */
/* markers: a tinted ring in the market's colour with a solid centre dot, and
   the centre follows the market too - the generated map had made every centre
   green, so a CLOSED market showed a red ring with a green heart. Labels get a
   page-coloured halo so they stay readable over borders in both modes. */
html[data-theme] .fm-marker{ fill:var(--dk-green); fill-opacity:.3; stroke:var(--dk-green);
  stroke-width:1.5px; vector-effect:non-scaling-stroke; }
html[data-theme] .fm-marker.selected{ stroke-width:2.5px; }
html[data-theme] .fm-marker.closed{ fill:var(--dk-red); fill-opacity:.3; stroke:var(--dk-red); }
html[data-theme] .fm-marker-core{ fill:var(--dk-green); }
html[data-theme] .fm-marker.closed + .fm-marker-core{ fill:var(--dk-red); }
html[data-theme] .fm-label{ fill:var(--dk-text-2); stroke:var(--dk-page); }
html[data-theme] .fm-label.market{ fill:var(--dk-text); }
html[data-theme] .fm-leader{ stroke:var(--dk-map-border); }
html[data-theme="light"] .fm-country{ stroke-width:0.8px; vector-effect:non-scaling-stroke; }
html[data-theme="light"] .fm-lake{ stroke-width:0.6px; vector-effect:non-scaling-stroke; opacity:1; }
html[data-theme="light"] .fm-city-dot{ opacity:0.9; }
html[data-theme] .fm-label, html[data-theme] .fm-label text{ fill:var(--dk-muted); }

/* ---- the chart area ------------------------------------------------------- */
html[data-theme] .tv-chart{ background:var(--dk-panel); }
/* "Loading earlier candles..." / "First candle on record" - a quiet line at the
   chart's left edge, where he is looking when he scrolls back */
.tv-hist-note{ display:none; position:absolute; left:10px; bottom:38px; z-index:6;
  pointer-events:none; white-space:nowrap;
  font:500 11px/1.3 Inter, system-ui, sans-serif; color:var(--dk-text-2);
  background:var(--dk-row); border-radius:4px; padding:4px 9px;
  box-shadow:inset 0 0 0 1px var(--dk-btn-line); }
.tv-hist-note.show{ display:block; }
/* FULL SCREEN MUST BE SOLID. The generated colour map turned the full-screen
   panel's navy into a see-through blue tint (--dk-blue-bg), so the page behind
   showed through the frame around the candles. It went unnoticed while the
   page behind was plain; once light mode's boxes got an outline (2026-10-12)
   their edges showed through as ghost lines under the chart. Full screen is
   one solid surface in the chart's own shade - nothing behind it, no edge. */
html[data-theme] .screen .chart-panel.is-full{
  background:var(--dk-panel); box-shadow:none; border-radius:0; }

/* ---- every other screen: the same surfaces --------------------------------
   The profile was themed first. These are the reading surfaces on the other
   screens - forms, market / exchange / session cards, the trade panel, the
   chart panel, modals, search results - given the same panel shade, so light
   mode reads as outlined grey cards on a grey page and dark as grey on black. */
html[data-theme] .welcome-auth, html[data-theme] .form-card,
html[data-theme] .market-card, html[data-theme] .exchange-card,
html[data-theme] .session-card, html[data-theme] .side-panel,
html[data-theme] .positions-panel, html[data-theme] .chart-panel,
html[data-theme] .modal-card, html[data-theme] .global-results,
html[data-theme] .setup-card, html[data-theme] .pnl-calendar{
  background:var(--dk-panel); border:0; border-radius:8px; box-shadow:var(--dk-shadow);
  backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-theme] .market-card:hover, html[data-theme] .exchange-card:hover,
html[data-theme] .session-card:hover{ background:var(--dk-row); }
html[data-theme] input, html[data-theme] select, html[data-theme] textarea{
  border-color:var(--dk-field-line); font-family:Inter, system-ui, sans-serif; }
html[data-theme] .btn{ box-shadow:inset 0 0 0 1px var(--dk-btn-line); }
html[data-theme] #chooseInvestmentBtn, html[data-theme] .btn.cta{ box-shadow:none; }

/* navigation and titles in the app's one typeface; numbers keep theirs */
html[data-theme] .back-link, html[data-theme] .back-inline, html[data-theme] .home-link,
html[data-theme] .profile-link, html[data-theme] .auth-link, html[data-theme] .athens-clock,
html[data-theme] .badge, html[data-theme] .tf-btn, html[data-theme] .zoom-hint,
html[data-theme] .chart-full-btn, html[data-theme] .panel-title, html[data-theme] .wa-title,
html[data-theme] .status, html[data-theme] .mw-sub, html[data-theme] .avatar-remove{
  font-family:Inter, system-ui, sans-serif; letter-spacing:0; }
html[data-theme] .form-title, html[data-theme] .modal-title{
  font-family:Inter, system-ui, sans-serif; font-style:normal; font-weight:600;
  font-size:22px; color:var(--dk-text); }
html[data-theme] .home-link, html[data-theme] .profile-link, html[data-theme] .auth-link{
  color:var(--dk-muted); }
html[data-theme] .home-link:hover, html[data-theme] .profile-link:hover,
html[data-theme] .auth-link:hover{ color:var(--dk-text); }

/* the chart screen's labels, in sentence case like the profile */
html[data-theme] .badge, html[data-theme] .fut-market-tag, html[data-theme] .panel-title{
  text-transform:none; letter-spacing:0; }
html[data-theme] .sym, html[data-theme] #dashSymbol{
  font-family:Inter, system-ui, sans-serif; font-weight:600; letter-spacing:0; }

/* the news ticker: a plain bar, each story's market named in its own colour */
html[data-theme] .news-ticker{
  background:var(--dk-panel); border-bottom:1px solid var(--dk-line); box-shadow:none; }
html[data-theme] .nt-live, html[data-theme] .nt-cat, html[data-theme] .nt-src,
html[data-theme] .nt-demo{ font-family:Inter, system-ui, sans-serif; letter-spacing:0; }
html[data-theme] .nt-live{ color:var(--dk-text-2); font-size:11px; font-weight:600; }
html[data-theme] .nt-cat{ text-transform:capitalize; font-size:11px; font-weight:500; opacity:1; }
html[data-theme] .nt-cat.crypto{ background:var(--dk-amber-bg); color:var(--dk-amber); }
html[data-theme] .nt-cat.stock{ background:var(--dk-blue-bg); color:var(--dk-blue); }
html[data-theme] .nt-cat.forex{ background:var(--dk-green-bg); color:var(--dk-green); }
html[data-theme] .nt-cat.macro{ background:var(--dk-row); color:var(--dk-text-2); }
/* world news, now that the bar carries the first page's stories (2026-10-15) */
html[data-theme] .nt-cat.world{ background:var(--dk-row); color:var(--dk-text-2); }
html[data-theme] .nt-text{ color:var(--dk-text); }
html[data-theme] .nt-src, html[data-theme] .nt-demo{ color:var(--dk-muted); font-size:11px; opacity:1; }

/* text ON a coloured fill stays white (or dark on amber) in BOTH modes - the
   generated map turns plain whites into the mode's text colour, which is right
   on a panel and unreadable on a green or red button */
html[data-theme] .fut-buy, html[data-theme] .fut-sell,
html[data-theme] .tv-tag-tp, html[data-theme] .tv-tag-sl,
html[data-theme] .brk-tag.live, html[data-theme] .mode-banner .mb-kill.on,
html[data-theme] .bot-tag.real, html[data-theme] .bot-btn.on,
html[data-theme] .mw-sell, html[data-theme] .mw-stopwatch.hit, html[data-theme] .mw-wrong,
html[data-theme] #screen-profile .btn.mw-sell, html[data-theme] .screen .btn.mw-sell,
html[data-theme] .mw-lvl.stop.hit{ color:#fff; }
html[data-theme] .mode-badge.is-real, html[data-theme] .brk-tag,
html[data-theme] .tv-tag-liq{ color:var(--dk-on-amber); }
html[data-theme] .fut-buy, html[data-theme] .fut-sell{ font-family:Inter, system-ui, sans-serif; font-weight:600; }

/* the typed greeting on the welcome screen */
html[data-theme] .welcome-line, html[data-theme] .welcome-title{
  font-family:Inter, system-ui, sans-serif; font-style:normal; font-weight:600;
  letter-spacing:-0.01em; color:var(--dk-text); }

/* ---- the profile's own older rules are scoped #screen-profile, which
   outranks a plain class. Each one the theme changes is repeated here. ---- */
html[data-theme] #screen-profile .btn{
  background:var(--dk-hover); border:0; color:var(--dk-text); border-radius:6px;
  font-family:Inter, system-ui, sans-serif; font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; padding:8px 14px;
  box-shadow:inset 0 0 0 1px var(--dk-btn-line); }
html[data-theme] #screen-profile .btn:hover{ background:var(--dk-line-strong); color:var(--dk-text); border:0; }
html[data-theme] #screen-profile .btn.primary{ background:var(--dk-hover); color:var(--dk-text); border:0; }
html[data-theme] #screen-profile .btn.primary:hover{ background:var(--dk-line-strong); color:var(--dk-text); }
html[data-theme] #screen-profile #chooseInvestmentBtn{
  background:var(--dk-amber-fill); color:var(--dk-on-amber); box-shadow:none; }
html[data-theme] #screen-profile #chooseInvestmentBtn:hover{ background:var(--dk-amber-fill-hover); }
html[data-theme] #screen-profile .btn.danger,
html[data-theme] #screen-profile .bot-btn.danger{ color:var(--dk-red); }
html[data-theme] #screen-profile .btn.mw-sell{ background:var(--dk-red); color:#fff; box-shadow:none; }
html[data-theme] #screen-profile .conn-row{
  background:var(--dk-row); border:0; border-radius:6px; padding:12px 14px; }
html[data-theme] #screen-profile .conn-sub, html[data-theme] #screen-profile .mw-sub{
  font-family:Inter, system-ui, sans-serif; font-size:12px; letter-spacing:0;
  text-transform:none; color:var(--dk-muted); opacity:1; }
html[data-theme] #screen-profile .foldable > .pcard-title:hover{ color:var(--dk-text); }

/* ---- the dark / light switch ---------------------------------------------- */
.look-switch{ display:inline-flex; border-radius:6px; overflow:hidden; background:var(--dk-row, rgba(255,255,255,.06)); }
.look-switch button{ background:transparent; border:0; color:var(--dk-muted, #8c8a82); cursor:pointer;
  font:500 12px Inter, system-ui, sans-serif; padding:6px 10px; display:inline-flex; align-items:center; gap:5px; }
.look-switch button.on{ background:var(--dk-hover, rgba(255,255,255,.12)); color:var(--dk-text, #fff); }
.look-switch button svg{ width:13px; height:13px; }

/* ---- getting around: Back, Profile and Home are real buttons ---------------
   (his order, 2026-10-12: "the profile and the home button boxes make it a
   little bit bigger and much visible like how it is in my profile ... the
   back arrow ... more clearly to be seen and with big letters to say BACK").
   They were 12px grey words in the corners. Now they are the SAME button the
   profile uses for "Log out" - one look for every control that takes him
   somewhere - and Back is in capitals and bolder, on every page. */
html[data-theme] .back-link, html[data-theme] .back-inline,
html[data-theme] .home-link, html[data-theme] .profile-link,
html[data-theme] #dashHeaderBadges .badge.home-btn,
html[data-theme] #dashHeaderBadges .badge.nav-profile-link{
  background:var(--dk-hover); color:var(--dk-text); border:0; border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--dk-btn-line);
  font:500 13px/1.2 Inter, system-ui, sans-serif; letter-spacing:0; text-transform:none;
  padding:8px 14px; cursor:pointer; white-space:nowrap; opacity:1;
  -webkit-user-select:none; user-select:none; }
html[data-theme] .back-link:hover, html[data-theme] .back-inline:hover,
html[data-theme] .home-link:hover, html[data-theme] .profile-link:hover,
html[data-theme] #dashHeaderBadges .badge.home-btn:hover,
html[data-theme] #dashHeaderBadges .badge.nav-profile-link:hover{
  background:var(--dk-line-strong); color:var(--dk-text); }
html[data-theme] .back-link, html[data-theme] .back-inline{
  font-weight:700; letter-spacing:.06em; }
html[data-theme] .back-link{ top:18px; left:24px; }
html[data-theme] .back-inline{ display:inline-block; flex:none; }
/* Profile + Home, one row in the top right corner (built in navigation.js) */
.top-nav{ position:absolute; top:18px; right:24px; z-index:2; display:flex; gap:8px;
  align-items:center; }
.top-nav > .home-link, .top-nav > .profile-link{ position:static; }
@media (max-width:520px){
  html[data-theme] .back-link{ top:max(12px, env(safe-area-inset-top)); left:16px; }
  .top-nav{ top:max(12px, env(safe-area-inset-top)); right:16px; gap:6px; }
  html[data-theme] .back-link, html[data-theme] .home-link, html[data-theme] .profile-link{
    padding:7px 11px; }
  /* On a phone the three buttons span the whole top edge, so a page's first
     line (the Athens clock on the exchange page) ran underneath them. Every
     page that has a Back button starts below the row instead. */
  html[data-theme] .screen:has(> .back-link){
    padding-top:calc(max(12px, env(safe-area-inset-top)) + 46px); }
}

/* ---- THE LOGO ON EVERY PAGE (his order, 2026-10-12) -----------------------
   Top centre of each page, on one line with Back (left) and Profile / Home
   (right). The page's own content starts below it. It is a picture, not a
   button - Home is already one press away, and a logo that leaves the page on
   a stray click costs more than it gives.
   This block is laptop-wide windows; phones have their own rules just below
   (the logo on its own line at the top, since 2026-10-23). */
.page-logo, .dash-logo{ display:none; }
@media (min-width:701px){
  .page-logo{ display:flex; justify-content:center; position:absolute; top:12px; left:50%;
    transform:translateX(-50%); z-index:1; pointer-events:none; }
  .page-logo .brand-logo{ height:64px; }
  html[data-theme] .screen.has-page-logo{ padding-top:100px; }
  /* Back, Profile and Home move down to sit level with the middle of the logo */
  html[data-theme] .screen.has-page-logo > .back-link{ top:28px; }
  .screen.has-page-logo > .top-nav{ top:28px; }
  /* the profile already kept room at its top for the old back link */
  html[data-theme] #screen-profile.has-page-logo .profile-wrap{ padding-top:0.5rem; }
}
/* On a phone, the PROFILE keeps its logo (his report, 2026-10-19: "in my phone
   in my profile page the logo isnt visible"). Its top row holds only Back, so
   the logo fits in the middle of that row, level with Back - as it sits on a
   laptop - and adds no height. Pressing it refreshes, as everywhere. */
@media (max-width:700px){
  #screen-profile .page-logo{ display:flex; justify-content:center; position:absolute;
    top:calc(max(12px, env(safe-area-inset-top)) - 8px); left:50%; transform:translateX(-50%);
    z-index:1; }
  #screen-profile .page-logo .brand-logo{ height:46px; }
}
/* ...and so does every other phone page now (his order, 2026-10-23). Those
   pages have Back, Profile AND Home across the top row - signed in, the room
   left between them is about 117px and off-centre, too little for the logo.
   So on a phone the logo takes the very top, centred, in the SAME place and
   size as on the profile, and the three buttons sit on the line just under it.
   Every page's content starts below both. Pressing the logo refreshes, which
   matters most here: the phone's Home Screen app has no refresh button. */
@media (max-width:700px){
  .screen.has-page-logo:not(#screen-profile) > .page-logo{ display:flex; justify-content:center;
    position:absolute; top:calc(max(12px, env(safe-area-inset-top)) - 8px); left:50%;
    transform:translateX(-50%); z-index:1; }
  .screen.has-page-logo:not(#screen-profile) > .page-logo .brand-logo{ height:46px; }
  html[data-theme] .screen.has-page-logo:not(#screen-profile) > .back-link,
  .screen.has-page-logo:not(#screen-profile) > .top-nav{
    top:calc(max(12px, env(safe-area-inset-top)) + 46px); }
  html[data-theme] .screen.has-page-logo:not(#screen-profile){
    padding-top:calc(max(12px, env(safe-area-inset-top)) + 92px); }
}
/* The chart page below laptop width: there is no room in the middle of its top
   row (pair, price, Profile, Home), so the logo is a row of its own at the top
   of the header, centred - the same size as on the other phone pages. */
@media (max-width:900px){
  html[data-theme] .dash-header{ flex-wrap:wrap; }
  .dash-logo{ display:flex; justify-content:center; order:-1; width:100%; flex:none;
    margin:0 0 2px; }
  .dash-logo .brand-logo{ height:46px; }
}
/* The chart's timeframe row on a phone (2026-10-23). It held six timeframes,
   the "scroll to zoom · drag to pan" hint, B/S, VP and full screen on one line
   that could not wrap: the hint squeezed into a tall column, B/S and full
   screen were pushed past the edge (cut off), and the whole page could be
   dragged sideways. On a phone the hint goes (a finger pinches, it does not
   scroll a wheel), the buttons are a little narrower, and the row may wrap -
   the chart's own buttons (B/S, VP, full screen) move as ONE group, always at
   the right. The same below laptop width, where the chart shares the row
   with the order panel and the hint was squeezed into a tall column too. */
.tf-tools{ display:inline-flex; align-items:center; gap:6px; flex:none; }
@media (max-width:900px){
  .timeframes{ flex-wrap:wrap; gap:6px 5px; }
  .timeframes .zoom-hint{ display:none; }
  .timeframes .tf-btn{ padding:6px 8px; }
  .timeframes .tf-tools{ margin-left:auto; gap:5px; }
  .timeframes .tf-tools .chart-full-btn{ margin-left:0; }
}
/* The chart page: the logo is the MIDDLE of the top row - pair and price on its
   left, Profile / Home on its right - in three columns, so it is centred on
   the page whatever the pair's name is long. It adds no height (the negative
   margin lets it reach into the gaps above and below the row): this page has
   Buy and Sell at the bottom and no room to push them down. A very long pair
   name is cut short with "..." rather than run under the logo. */
@media (min-width:901px){
  html[data-theme] .dash-header{ display:grid;
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; column-gap:18px; }
  html[data-theme] .dash-header > :first-child{ min-width:0; }
  html[data-theme] .dash-header .sym{ min-width:0; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
  html[data-theme] .dash-header .chart-price{ flex:none; }
  html[data-theme] #dashHeaderBadges{ justify-self:end; }
  .dash-logo{ display:flex; justify-content:center; margin:-14px 0; pointer-events:none; }
  .dash-logo .brand-logo{ height:60px; }
}

/* ---- a symbol beside each box's name (his order, 2026-10-13) ---------------
   "can we add symbols side by side their names to each box to get know even
   better what is exactly each one". One small line drawing before the name of
   every box on the profile, and before the label of the four number boxes.

   PURE CSS, ON PURPOSE. Most of these titles are rebuilt by their own cards
   several times a minute; a symbol put in by script would be wiped each time,
   and one written into each card's own markup would mean touching nine files.
   A ::before on the title survives every rebuild. The fold arrow uses ::after,
   so the two never meet.

   Each drawing is a MASK filled with the colour of the words beside it, so it
   follows dark and light mode by itself. A new box needs two lines here: its
   selector in the list below, and which drawing it gets. */
html[data-theme]{
  --ico-globe: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='M3 12h18'/%3E%3Cpath d='M12 3c3 3.2 3 14.8 0 18c-3-3.2-3-14.8 0-18z'/%3E%3C/svg%3E");
  --ico-chart: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='M4 4v16h16'/%3E%3Cpath d='M7.5 15.5l3.5-4 3 2.5 5-6.5'/%3E%3Cpath d='M15.5 7.5H19V11'/%3E%3C/svg%3E");
  --ico-link: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 13.5a4 4 0 0 0 5.7.3l3-3a4 4 0 0 0-5.7-5.6l-1.2 1.2'/%3E%3Cpath d='M14 10.5a4 4 0 0 0-5.7-.3l-3 3a4 4 0 0 0 5.7 5.6l1.2-1.2'/%3E%3C/svg%3E");
  --ico-candles: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='M7 3v4M7 15v4M17 5v3M17 17v3'/%3E%3Crect x='5' y='7' width='4' height='8' rx='1'/%3E%3Crect x='15' y='8' width='4' height='9' rx='1'/%3E%3C/svg%3E");
  --ico-robot: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%3Crect x='5' y='8' width='14' height='11' rx='2'/%3E%3Cpath d='M12 8V5'/%3E%3Ccircle cx='12' cy='4' r='1'/%3E%3Cpath d='M9.5 12.5v2M14.5 12.5v2'/%3E%3Cpath d='M2.5 12.5v3M21.5 12.5v3'/%3E%3C/svg%3E");
  --ico-bank: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='M3 10l9-6 9 6z'/%3E%3Cpath d='M6 10v7M10 10v7M14 10v7M18 10v7'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");
  --ico-briefcase: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%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E");
  --ico-coins: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='9' cy='9' r='6'/%3E%3Cpath d='M15 9a6 6 0 1 1-6 6'/%3E%3C/svg%3E");
  --ico-key: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='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9'/%3E%3Cpath d='M17 6l3 3'/%3E%3Cpath d='M14.5 8.5l2 2'/%3E%3C/svg%3E");
  --ico-wallet: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='M19 7V6a1 1 0 0 0-1-1H6a2 2 0 0 0 0 4h13a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H6a2 2 0 0 1-2-2V7'/%3E%3Cpath d='M16.5 14h.01'/%3E%3C/svg%3E");
  --ico-plusminus: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='M5 7h6M8 4v6'/%3E%3Cpath d='M13 17h6'/%3E%3Cpath d='M18 5L6 19'/%3E%3C/svg%3E");
  --ico-target: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%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
  --ico-rewind: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='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-swap: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='M4 8h15'/%3E%3Cpath d='M16 5l3 3-3 3'/%3E%3Cpath d='M20 16H5'/%3E%3Cpath d='M8 13l-3 3 3 3'/%3E%3C/svg%3E");
  --ico-copy: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%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");
  --ico-chat: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='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H10l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E");
}
html[data-theme] #screen-profile .globe-card > .pcard-title::before,
html[data-theme] #screen-profile .pcard-wide > .pcard-title::before,
html[data-theme] #screen-profile #connectionsCard .pcard-title::before,
html[data-theme] #screen-profile #paperControlCard > .pcard-title::before,
html[data-theme] #screen-profile #botsCard > .pcard-title::before,
html[data-theme] #screen-profile #brokerCard .pcard-title::before,
html[data-theme] #screen-profile #openPositionsCard > .pcard-title::before,
html[data-theme] #screen-profile #memeCard > .pcard-title::before,
html[data-theme] #screen-profile #copyCard > .pcard-title::before,
html[data-theme] #screen-profile #invitesCard .pcard-title::before,
html[data-theme] #screen-profile #chatCard > .pcard-title::before,
html[data-theme] #screen-profile #backtestCard > .pcard-title::before,
html[data-theme] #screen-profile .stat-box:has(#stMoneyLeft) .stat-label::before,
html[data-theme] #screen-profile .stat-box:has(#stNetPnl) .stat-label::before,
html[data-theme] #screen-profile .stat-box:has(#stWinRate) .stat-label::before,
html[data-theme] #screen-profile .stat-box:has(#stTrades) .stat-label::before{
  content:''; display:inline-block; flex:none; width:18px; height:18px; margin-right:9px;
  vertical-align:-3px; background-color:currentColor; opacity:.9;
  -webkit-mask:center / contain no-repeat; mask:center / contain no-repeat; }
/* a box that folds lays its title out in a row with its own gap */
html[data-theme] #screen-profile .foldable > .pcard-title::before{ margin-right:1px !important; }
/* the four number boxes: a size smaller, beside a smaller label */
html[data-theme] #screen-profile .stat-box:has(#stMoneyLeft) .stat-label::before,
html[data-theme] #screen-profile .stat-box:has(#stNetPnl) .stat-label::before,
html[data-theme] #screen-profile .stat-box:has(#stWinRate) .stat-label::before,
html[data-theme] #screen-profile .stat-box:has(#stTrades) .stat-label::before{ width:14px; height:14px; margin-right:6px; vertical-align:-2px; }
html[data-theme] #screen-profile .globe-card > .pcard-title::before{ -webkit-mask-image:var(--ico-globe); mask-image:var(--ico-globe); }
html[data-theme] #screen-profile .pcard-wide > .pcard-title::before{ -webkit-mask-image:var(--ico-chart); mask-image:var(--ico-chart); }
html[data-theme] #screen-profile #connectionsCard .pcard-title::before{ -webkit-mask-image:var(--ico-link); mask-image:var(--ico-link); }
html[data-theme] #screen-profile #paperControlCard > .pcard-title::before{ -webkit-mask-image:var(--ico-candles); mask-image:var(--ico-candles); }
html[data-theme] #screen-profile #botsCard > .pcard-title::before{ -webkit-mask-image:var(--ico-robot); mask-image:var(--ico-robot); }
html[data-theme] #screen-profile #brokerCard .pcard-title::before{ -webkit-mask-image:var(--ico-bank); mask-image:var(--ico-bank); }
html[data-theme] #screen-profile #openPositionsCard > .pcard-title::before{ -webkit-mask-image:var(--ico-briefcase); mask-image:var(--ico-briefcase); }
html[data-theme] #screen-profile #memeCard > .pcard-title::before{ -webkit-mask-image:var(--ico-coins); mask-image:var(--ico-coins); }
html[data-theme] #screen-profile #copyCard > .pcard-title::before{ -webkit-mask-image:var(--ico-copy); mask-image:var(--ico-copy); }
html[data-theme] #screen-profile #invitesCard .pcard-title::before{ -webkit-mask-image:var(--ico-key); mask-image:var(--ico-key); }
html[data-theme] #screen-profile #chatCard > .pcard-title::before{ -webkit-mask-image:var(--ico-chat); mask-image:var(--ico-chat); }
html[data-theme] #screen-profile #backtestCard > .pcard-title::before{ -webkit-mask-image:var(--ico-rewind); mask-image:var(--ico-rewind); }
html[data-theme] #screen-profile .stat-box:has(#stMoneyLeft) .stat-label::before{ -webkit-mask-image:var(--ico-wallet); mask-image:var(--ico-wallet); }
html[data-theme] #screen-profile .stat-box:has(#stNetPnl) .stat-label::before{ -webkit-mask-image:var(--ico-plusminus); mask-image:var(--ico-plusminus); }
html[data-theme] #screen-profile .stat-box:has(#stWinRate) .stat-label::before{ -webkit-mask-image:var(--ico-target); mask-image:var(--ico-target); }
html[data-theme] #screen-profile .stat-box:has(#stTrades) .stat-label::before{ -webkit-mask-image:var(--ico-swap); mask-image:var(--ico-swap); }

/* ---- meme coins: each coin opens and closes (his order, 2026-10-13) --------
   "for each meme coin ... to can open and close for each the stats it shows me
   for profits so with that we reduce some space". The coin's own line is the
   handle. Shut, a coin is two lines: what he holds and SELL NOW. */
html[data-theme] .mw-top[data-fold]{ cursor:pointer; user-select:none; }
html[data-theme] .mw-top[data-fold]:focus-visible{ outline:2px solid var(--dk-line-strong); outline-offset:5px;
  border-radius:4px; }
/* the arrow is DRAWN, not a character: the code font this row uses has no
   triangle, and the one the browser borrowed came out as a dot */
html[data-theme] .mw-caret{ flex:none; align-self:center; width:7px; height:7px; margin:0 3px 2px 1px;
  border-right:2px solid var(--dk-muted); border-bottom:2px solid var(--dk-muted);
  transform:rotate(-45deg); font-size:0; }
html[data-theme] .mw-row.is-open .mw-caret{ transform:rotate(45deg); margin-bottom:4px; }
html[data-theme] .mw-top[data-fold]:hover .mw-caret{ border-color:var(--dk-text); }
html[data-theme] .mw-next{ font-size:12px; color:var(--dk-muted); font-variant-numeric:tabular-nums; }
/* what must be seen even on a shut coin: a level that has just been reached */
html[data-theme] .mw-firing{ margin-top:8px; padding:6px 10px; border-radius:6px; font-size:12px; font-weight:600;
  background:var(--dk-amber-bg); color:var(--dk-amber); }
html[data-theme] .mw-firing.stop{ background:var(--dk-red); color:#fff; }

/* ---- the X on each row under the chart (2026-10-28): close that position
   now. In the row's top-right corner, so it never shifts the figures; red only
   when the pointer is on it. -------------------------------------------------- */
html[data-theme] .position-row{ position:relative; padding-right:40px; }
html[data-theme] .pos-close{ position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:28px; height:28px; border-radius:6px; border:1px solid var(--dk-line-strong);
  background:var(--dk-row); color:var(--dk-text); font:600 17px/1 Inter, system-ui, sans-serif;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
html[data-theme] .pos-close:hover, html[data-theme] .pos-close:focus-visible{
  background:var(--dk-red); border-color:var(--dk-red); color:#fff; outline:none; }
html[data-theme] .pos-close:disabled{ opacity:.6; cursor:default; }
@media (max-width:700px){
  html[data-theme] .pos-close{ width:32px; height:32px; }   /* a finger, not a pointer */
  /* five columns of figures do not fit a phone beside the X: three that may
     shrink, so the row stays inside the screen and the X stays on it */
  html[data-theme] .position-row{ grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:6px 8px; font-size:12px; padding-right:44px; }
  html[data-theme] .position-row > span{ min-width:0; overflow-wrap:anywhere; }
}

/* ---- light mode: the browser's own white controls -------------------------
   A tick-box, a slider track, an open drop-down list and a field the browser
   filled in by itself are all drawn BY THE BROWSER, in white, whatever the
   page says. On a grey page they were the last white things left (his order,
   2026-10-12), so they are drawn here instead. Dark mode keeps the browser's.
   LAST in the file on purpose: several rules above tie with these. */
html[data-theme="light"] input[type="checkbox"],
html[data-theme="light"] input[type="radio"]{
  -webkit-appearance:none; appearance:none; box-sizing:border-box;
  width:14px; height:14px; padding:0; flex:none; cursor:pointer; vertical-align:-2px;
  background:var(--dk-row); border:1px solid var(--dk-field-line); border-radius:3px; }
html[data-theme="light"] input[type="radio"]{ border-radius:50%; }
html[data-theme="light"] input[type="checkbox"]:checked{
  border-color:var(--dk-text);
  background:var(--dk-text) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%23cac9c5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 10px 10px no-repeat; }
html[data-theme="light"] input[type="radio"]:checked{
  border-color:var(--dk-text);
  background:radial-gradient(circle, var(--dk-text) 0 38%, var(--dk-row) 44%); }
html[data-theme="light"] input[type="range"]{
  -webkit-appearance:none; appearance:none; height:16px; padding:0; border:0;
  background:transparent; }
html[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:2px; background:var(--dk-line-strong); }
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; margin-top:-5px;
  border:0; border-radius:50%; background:var(--dk-text); }
html[data-theme="light"] input[type="range"]::-moz-range-track{
  height:4px; border-radius:2px; background:var(--dk-line-strong); }
html[data-theme="light"] input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border:0; border-radius:50%; background:var(--dk-text); }
html[data-theme="light"] select option{ background:var(--dk-row); color:var(--dk-text); }
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--dk-row) inset;
  -webkit-text-fill-color:var(--dk-text); caret-color:var(--dk-text); }