/* pages/models-dashboard/models-dashboard.css — lively design-lab styling.
   Mobile-first; widgets declare a span; the message is capped (>=2 per row on
   desktop). Goal: feel-good, bright, inspiring — numbers present but the feel leads. */

.md-head { padding: 14px 16px; }
.md-head-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.md-badge { font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#0b0f1a;
  background:linear-gradient(90deg,#00e5a0,#5ad1ff,#ff8fb1); padding:3px 9px; border-radius:999px; vertical-align:middle; }
.md-select { background:var(--bg3,#11151f); border:1px solid var(--border,#2a3140); border-radius:10px; padding:8px 12px;
  color:var(--text,#e8edf5); font-size:13px; min-width:170px; margin-left:auto; }
.md-status { margin-top:10px; font-size:12px; color:var(--text3,#8a93a6); font-family:'DM Mono',monospace;
  transition:background .4s; border-radius:8px; padding:4px 8px; }
.md-status.md-flash { background:rgba(0,229,160,.16); }
.md-live { color:#00e5a0; font-weight:800; }
.md-mocktag { color:#ffb020; font-weight:800; }
.md-hint { margin-top:6px; font-size:11px; color:var(--text3,#8a93a6); }

/* ── grid: variable-width widgets, dense packing, phone-friendly ───────── */
.md-grid { display:grid; gap:12px; margin-top:14px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-flow:dense; align-items:stretch; }
/* Real dashboard = adjustable 12-col grid (the Library keeps the auto-fill grid
   above). Rows are minmax(): a widget's height = its min (in row units) but
   grows to fit content. Desktop only — phone collapses to 1 col (media below). */
@media (min-width:521px){
  /* fixed row height → a widget's height is exactly what YOU set with the ▾▴
     arrows; the content scales to fill it (see the welcome scaling block lower
     in the file — it MUST come after the base .w-welcome-* px rules to win).
     min-height:0 so a short box isn't forced taller by the card's default floor. */
  .md-grid--g12 { grid-template-columns:repeat(12, 1fr); grid-auto-rows:88px; grid-auto-flow:row; }
  .md-grid--g12 .md-card { min-height:0; }
  /* Layout 2 — 6-col grid (owner 2026-06-08): a SEPARATE arrangement shown on
     smaller screens (≈521–1100px). Same fixed 88px rows; index.js sets a `zoom`
     so the whole grid scales like a picture between breakpoints. */
  .md-grid--g6 { grid-template-columns:repeat(6, 1fr); grid-auto-rows:88px; grid-auto-flow:row; }
  .md-grid--g6 .md-card { min-height:0; }
}
/* The grid is zoomed (index.js) within a band; anchor the scale to the top-left so
   it never drifts sideways as it shrinks. */
#md-grid { transform-origin:top left; }

/* View-preference buttons (Layout 1 / Layout 2 / Auto) next to Edit. The active
   one lights up; none lit = Auto (layout follows screen width). */
.md-prefs { display:inline-flex; align-items:center; gap:6px; }
.md-pref-on { background:linear-gradient(135deg,#00e5a0,#5ad1ff) !important; color:#06121a !important; border-color:transparent !important; }

/* ── card shell ───────────────────────────────────────────────────────── */
.md-card { position:relative; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid var(--border,#2a3140); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px;
  min-height:92px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px -16px rgba(0,0,0,.7);
  transition:transform .18s ease, box-shadow .18s ease; overflow:hidden; }
.md-card:hover { transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 16px 30px -16px rgba(0,0,0,.8); }
.md-card.md-locked { border-color:rgba(0,229,160,.4); box-shadow:0 0 0 1px rgba(0,229,160,.2) inset, 0 10px 26px -16px rgba(0,0,0,.7); }
.md-card-title { font-size:22px; font-weight:700; letter-spacing:.3px; color:var(--text3,#9aa3b5); display:flex; align-items:center; justify-content:space-between; gap:6px; text-transform:uppercase; }   /* 2026-06-12 owner: ALL widget titles 2x (was 11px) */
.md-card-body { flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; color:var(--text,#e8edf5); }
/* Content-heavy widgets (📋 Today feed, 🌐 My Platforms cards): fill from the
   top instead of vertically centering, and stretch full width. */
.md-card-body.md-body-top { justify-content:flex-start; }
.md-card-body.md-body-top > .m-platforms-section,
.md-card-body.md-body-top > .dnotif-feed,
.md-card-body.md-body-top > .w-np { width:100%; }
.md-pin { font-size:11px; }

/* ⏳ Next Payday widget (owner mockup) — CYAN days, WHITE "days", bright GREEN €.
   No header row (the card title already says NEXT PAYDAY). Bar (1×3)=horizontal
   (replicates mockup 170444, 2 rows tall); Card (2×2)=days+money side by side, Advance below. */
.w-np { display:flex; width:100%; height:100%; gap:10px; overflow:hidden; }
.w-np-body { display:flex; flex-direction:row; align-items:center; gap:12px; min-width:0; }
.w-np-dayblock { text-align:center; line-height:1; flex-shrink:0; }   /* fixed width per mode → 2-digit "16" fits + money pushed right */
.w-np-days { color:#4cc8ff; font-weight:900; line-height:.9; }
.w-np-dayword { color:#fff; font-weight:700; margin-top:2px; }
.w-np-moneyblock { min-width:0; }
.w-np-money { color:#19f08a; font-weight:900; line-height:1; }
.w-np-cap { color:#c4ccdb; font-weight:700; margin-top:2px; }            /* "estimated" — bigger + intense */
.w-np-total { color:var(--text3,#9aa3b5); margin-top:3px; line-height:1.3; }
.w-np-total span { display:block; }   /* "(€X total minus" / "fines and deductions)" on two rows */
.w-np-act { flex-shrink:0; display:flex; align-items:center; }
/* bar (1×3) — mirrors owner mockup 170444. KEY (owner, 2026-06-06): the card's
   default padding (14px) + the title row ate the height so the bar looked tiny;
   the mock has them REMOVED — so we zero the padding/gap here and the bar fills
   the FULL box. Sizes use cqh (container units) so the text scales to the box and
   mirrors 170444 at ANY box size — VERIFIED with a headless puppeteer render
   against the mock at 88/176/288px; fits any box, never clips. */
.md-card:has(.w-np--bar) { padding:2px 10px; gap:0; }
.md-card:has(.w-np--bar) > .md-card-title { font-size:20px; }   /* 2x (was 10px) */
.w-np--bar { container-type:size; flex-direction:row; align-items:center; gap:2cqw; }
.w-np--bar .w-np-body { flex:1; align-items:flex-start; gap:5cqw; min-width:0; }
.w-np--bar .w-np-dayblock { text-align:left; }
.w-np--bar .w-np-days  { font-size:clamp(22px,76cqh,240px); line-height:.8; }
.w-np--bar .w-np-dayword { font-size:clamp(11px,30cqh,96px); line-height:1; }
.w-np--bar .w-np-money { font-size:clamp(14px,46cqh,140px); line-height:.8; }  /* lh .8 → € top-aligns with "4" (was 42px low) */
.w-np--bar .w-np-cap   { font-size:clamp(9px,20cqh,60px); line-height:1; margin-top:1cqh; }
.w-np--bar .w-np-total { font-size:clamp(8px,14cqh,44px); line-height:1.05; margin-top:1cqh; }
/* the only button left in bar mode is the payslip "✓ I received it" ack — pin it
   to the bottom-right corner so it never covers the € (owner item 4, 2-row bar) */
.w-np--bar .w-np-act { position:absolute; right:10px; bottom:8px; }
.w-np--bar .w-np-btn { font-size:clamp(11px,14cqh,22px); padding:.4em .8em; }
/* card (2×2): body (days | money) then Advance CENTERED below */
.w-np--card { flex-direction:column; justify-content:center; }
.w-np--card .w-np-act { margin-top:8px; justify-content:center; }   /* Advance centered — alone in its row */
.w-np--card .w-np-dayblock { min-width:72px; }
.w-np--card .w-np-days { font-size:46px; } .w-np--card .w-np-dayword { font-size:18px; }
.w-np--card .w-np-money { font-size:36px; } .w-np--card .w-np-cap { font-size:14px; } .w-np--card .w-np-total { font-size:11px; }
.w-np-btn[data-act=adv] { background:#4cc8ff; border-color:#4cc8ff; color:#06121a; font-weight:700; }   /* blue, like the pay page */
/* 2026-06-12 owner item 4: title-less 1×1 widget holding ONLY the ⏩ Advance button
   (the button left the Next Payday card). regCard skips the title for reg.noTitle. */
.md-card.md-notitle { padding:6px; gap:0; }
.w-adv { display:flex; width:100%; height:100%; align-items:center; justify-content:center; }
.w-adv .w-np-btn { white-space:nowrap; }
@media (min-width:521px){
  .w-adv { container-type:size; }
  .w-adv .w-np-btn { font-size:clamp(11px, 22cqmin, 34px); padding:.4em .7em; max-width:98%; }
}
@media (max-width:520px){ .w-adv .w-np-btn { font-size:16px; padding:10px 18px; } }
/* on-behalf modal (advance / received) */
.w-np-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:9999; }
.w-np-dlg { background:var(--bg2,#161b24); border:1px solid var(--border,#2a3140); border-radius:12px; padding:16px; width:min(360px,92vw); display:flex; flex-direction:column; gap:8px; }
.w-np-dlg h4 { margin:0 0 4px; }
.w-np-dlg input, .w-np-dlg select, .w-np-dlg textarea { background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:8px; font:inherit; }
.w-np-mrow { display:flex; gap:6px; } .w-np-mrow input { flex:1; }
.w-np-mfoot { display:flex; justify-content:flex-end; gap:6px; margin-top:4px; }
.w-np-muted { color:var(--text3,#9aa3b5); font-size:12px; }
/* 💳 My Debt Status widget (owner 2026-06-12 r6) — 1:1 v1-replica panel port.
   Items list scrolls (≤10 rows); "Show more" pinned at the bottom → Pay & Money.
   The card body needs min-height:0 here or it grows past the card (flex
   min-height:auto) and the list never scrolls / the button gets clipped. */
.md-card:has(.w-debt) > .md-card-body { min-height:0; }
.w-debt { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; }
.w-debt-list { flex:1 1 auto; min-height:0; overflow-y:auto; }
.w-debt-more { flex-shrink:0; margin-top:10px; align-self:stretch; }
/* 🎯 Session bonus progress (owner 2026-06-12 r8) — 4 variants, min 3×2.
   Texts scale with the card height (cqh); ℹ button top-right opens the
   admin-written popup (bonus_progress_info, viewer's language). */
.w-bp { position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px; width:100%; height:100%; min-height:0; }
@media (min-width:521px){ .w-bp { container-type:size; } }
.w-bp-info { position:absolute; top:0; right:0; width:22px; height:22px; border-radius:50%; border:1px solid var(--border2,#3a4150); background:var(--bg3); color:var(--text2); font:700 12px/1 'DM Mono',monospace; cursor:pointer; z-index:3; }
.w-bp-info:hover { color:var(--accent); border-color:rgba(0,229,160,.4); }
.w-bp-stats { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding-right:26px; }
.w-bp-done { font-weight:900; font-family:'DM Mono',monospace; color:var(--accent); font-size:clamp(18px, 18cqh, 44px); line-height:1; }
.w-bp-of { font-weight:700; font-family:'DM Mono',monospace; color:var(--text2); font-size:clamp(13px, 12cqh, 30px); }
.w-bp-tier { color:var(--text3); font-size:clamp(10px, 8cqh, 20px); }
.w-bp-days { margin-left:auto; color:#f5b94d; font-weight:700; font-size:clamp(11px, 9cqh, 22px); white-space:nowrap; }
.w-bp-sub { color:var(--text3); font-size:clamp(10px, 8cqh, 20px); min-height:1em; }
.w-bp-maxed { color:var(--accent); font-weight:700; font-size:clamp(11px, 9cqh, 22px); }
.w-bp-track { position:relative; height:clamp(14px, 22cqh, 44px); background:var(--bg4); border-radius:999px; overflow:hidden; flex-shrink:0; }
.w-bp-fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, rgba(90,209,255,.9), rgba(0,229,160,.9)); }
.w-bp-fill.w-bp-full { background:linear-gradient(90deg, rgba(0,229,160,.95), rgba(0,229,160,.6)); }
.w-bp-mark { position:absolute; top:0; bottom:0; width:2px; background:#f5b94d; z-index:2; }
/* V2 race track */
.w-bp-track--race { background:none; overflow:visible; border-radius:0; }
.w-bp-line { position:absolute; left:0; right:0; top:50%; border-top:2px dashed var(--border2,#3a4150); }
.w-bp-dot { position:absolute; top:50%; transform:translate(-50%,-50%); width:clamp(12px,14cqh,26px); height:clamp(12px,14cqh,26px); border-radius:50%; background:var(--accent); box-shadow:0 0 10px rgba(0,229,160,.6); z-index:2; }
.w-bp-flag { width:2px; background:#f5b94d; }
.w-bp-finish { position:absolute; right:-4px; top:50%; transform:translateY(-58%); font-size:clamp(12px,16cqh,30px); }
/* V3 segment cells */
.w-bp-cells { display:flex; gap:4px; height:clamp(14px, 22cqh, 44px); flex-shrink:0; }
.w-bp-cell { flex:1; border-radius:4px; background:var(--bg4); }
.w-bp-cell.on { background:linear-gradient(180deg, rgba(0,229,160,.9), rgba(0,229,160,.45)); }
/* V4 ring + numbers */
.w-bp-siderow { display:flex; align-items:center; gap:12px; width:100%; min-height:0; flex:1; }
.w-bp-ring { position:relative; width:clamp(60px, 70cqh, 160px); flex-shrink:0; }
.w-bp-ring svg { display:block; width:100%; height:100%; }
.w-bp-ringpct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:900 clamp(13px,18cqh,34px)/1 'DM Mono',monospace; }
.w-bp-sidecol { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.md-raw { font-size:10px; color:var(--text3,#8a93a6); white-space:pre-wrap; word-break:break-word; margin:0; }
.md-err { color:#ff6b81; font-size:12px; }

/* (removed .md-card.md-locked{max-width:520px} — lock is now "freeze in place",
   so a pinned widget must KEEP the width/height you set, not get clamped. 2026-06-05) */
.w-msg-banner { font-size:16px; font-weight:700; line-height:1.35;
  background:linear-gradient(110deg, rgba(0,229,160,.16), rgba(90,209,255,.10), rgba(255,143,177,.12));
  border-radius:12px; padding:12px 14px; }
.w-msg-quote { font-size:18px; font-weight:600; font-style:italic; line-height:1.4; color:#fff; }

/* ── numbers ─────────────────────────────────────────────────────────── */
.w-amt { font-weight:900; letter-spacing:-.6px; line-height:1; }
.w-xl { font-size:clamp(26px,7vw,38px); } .w-lg { font-size:26px; } .w-md { font-size:20px; }
.w-sub { font-size:11px; color:var(--text3,#9aa3b5); font-weight:600; }
.w-row { display:flex; align-items:center; gap:12px; }
.w-between { justify-content:space-between; }
.w-pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:rgba(255,255,255,.10); }
.w-delta { font-size:12px; font-weight:800; }
.w-delta.up { color:#00e5a0; } .w-delta.down { color:#ff6b81; }
.w-ok { color:#00e5a0; font-weight:800; } .w-warn { color:#ffb020; font-weight:800; }

/* hero gradient blocks */
.w-hero { border-radius:13px; padding:14px; color:#06121a; }
.w-hero .w-sub { color:rgba(6,18,26,.7); }
.w-grad-mint { background:linear-gradient(135deg,#7ef0c6,#00e5a0); }
.w-grad-teal { background:linear-gradient(135deg,#5ad1ff,#2bd4c0); }
.w-grad-gold { background:linear-gradient(135deg,#ffe29a,#ffd166); }
.w-btn { margin-top:8px; width:100%; border:0; border-radius:10px; padding:9px; font-weight:800; font-size:13px; cursor:pointer;
  color:#06121a; background:linear-gradient(135deg,#7ef0c6,#00e5a0); }

/* progress bar */
.w-bar { height:9px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; margin-top:4px; }
.w-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#00e5a0,#5ad1ff); transition:width 1s cubic-bezier(.2,.8,.2,1); }
.w-bar-fill.alt { background:linear-gradient(90deg,#ff8fb1,#ffd166); }

/* svg helpers */
.md-ring-t { fill:var(--text,#e8edf5); font-size:15px; font-weight:800; }
.md-spark, .md-bars { display:block; margin-top:6px; width:100%; height:auto; }

/* badges / streak / rank */
.w-badge { display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; background:linear-gradient(90deg,#ffd166,#ff8fb1); color:#06121a; margin-bottom:6px; }
.w-streak { text-align:center; }
.w-streak-n { font-size:38px; font-weight:900; background:linear-gradient(135deg,#ff8a00,#ff3d6e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.w-rank { display:flex; align-items:center; gap:8px; font-size:30px; }
.w-rank-n { font-size:26px; font-weight:900; }
.w-pulse-ok, .w-pulse-warn { text-align:center; font-size:26px; }
.w-pulse-warn { animation:md-pulse 1.6s ease-in-out infinite; }
@keyframes md-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* variant switcher */
.md-vary { display:flex; gap:4px; justify-content:flex-end; margin-top:6px; }
.md-vbtn { width:22px; height:22px; border-radius:7px; border:1px solid var(--border,#2a3140); background:var(--bg3,#11151f);
  color:var(--text3,#9aa3b5); font-size:11px; font-weight:800; cursor:pointer; line-height:1; }
.md-vbtn.on { background:linear-gradient(135deg,#00e5a0,#5ad1ff); color:#06121a; border-color:transparent; }

/* entrance animation */
.md-anim { animation:md-in .4s ease both; }
@keyframes md-in { from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

@media (max-width:520px){
  /* phone = ONE widget per row, full phone width. Otherwise span-1 cards get
     crushed into a narrow ⅓–½ column and their text is cut / wraps per-letter.
     grid-column:1/-1 !important overrides each widget's inline desktop span. */
  .md-grid { grid-template-columns:1fr; gap:10px; }
  /* phone: full width + AUTO height (wrap to fit text) — override the desktop
     inline grid-column / grid-row span. */
  .md-grid > .md-card { grid-column:1 / -1 !important; grid-row:auto !important; }
  .md-select { margin-left:0; flex:1 1 100%; }
  .md-card.md-locked { max-width:none; }
}
@media (prefers-reduced-motion:reduce){ .md-anim,.w-pulse-warn,.w-mascot-face{ animation:none; } .w-bar-fill,.md-ring circle{ transition:none; } }

/* ── Stage B widgets ─────────────────────────────────────────────────── */
.w-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.w-chip { font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; display:inline-flex; gap:4px; align-items:center; }
.w-chip span { font-weight:600; opacity:.75; }
.w-chip.up { background:rgba(0,229,160,.16); color:#00e5a0; }
.w-chip.down { background:rgba(255,107,129,.16); color:#ff6b81; }
.w-cmp-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:3px 0; }

.w-sched { display:flex; gap:8px; }
.w-sched-day { flex:1; background:rgba(255,255,255,.05); border-radius:11px; padding:10px; }
.w-sched-day.today { background:linear-gradient(135deg, rgba(0,229,160,.18), rgba(90,209,255,.10)); }
.w-sched-lbl { font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--text3,#9aa3b5); }
.w-sched-time { font-size:16px; font-weight:800; margin-top:3px; }

.w-tl { display:flex; align-items:flex-end; gap:2px; height:46px; margin-bottom:4px; }
.w-tl-bar { flex:1; border-radius:3px 3px 0 0; min-height:8px; }
.w-tl-dots { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:4px; }
.w-dot { width:9px; height:9px; border-radius:50%; }

.w-heat { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:5px; }
.w-heat-c { aspect-ratio:1; border-radius:4px; }

.w-quote-grad { font-size:17px; font-weight:800; line-height:1.35; padding:14px; border-radius:13px; color:#06121a; background:linear-gradient(120deg,#ffe29a,#ff8fb1,#9b8cff); }
.w-quote-min { font-size:16px; font-style:italic; font-weight:600; line-height:1.4; }

.w-mascot { text-align:center; }
.w-mascot-face { font-size:46px; line-height:1; animation:md-float 3s ease-in-out infinite; }
.w-mascot-face.sm { font-size:34px; }
.w-bubble { background:rgba(255,255,255,.08); border-radius:12px 12px 12px 3px; padding:8px 12px; font-size:13px; }
@keyframes md-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.w-btn.alt { background:linear-gradient(135deg,#5ad1ff,#2bd4c0); }
.w-btn.alt2 { background:linear-gradient(135deg,#ffd166,#ff8fb1); }

/* ── Hall of Fame ────────────────────────────────────────────────────── */
.w-av { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:#06121a; font-weight:900; font-size:13px; flex-shrink:0; }
.w-av.big { width:42px; height:42px; font-size:17px; box-shadow:0 0 0 3px rgba(255,209,102,.55); }
.w-finish { display:flex; align-items:flex-end; justify-content:space-between; gap:4px; margin-bottom:6px; }
.w-finpos { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; min-width:0; }
.w-finrank { font-size:13px; }
.w-finval { font-size:11px; font-weight:800; }
.w-toplist { display:flex; flex-direction:column; gap:6px; margin-bottom:5px; }
.w-toprow { display:flex; align-items:center; gap:8px; font-size:13px; }
.w-toprank { width:22px; text-align:center; }
.w-topname { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── edit mode ───────────────────────────────────────────────────────── */
.md-grid.md-editing .md-card { cursor:grab; outline:1px dashed rgba(255,255,255,.20); }
.md-grid.md-editing .md-card.md-dragging { opacity:.5; cursor:grabbing; }
.md-editctl { display:flex; align-items:center; gap:5px; margin-bottom:4px; flex-wrap:wrap; }
.md-drag { cursor:grab; color:var(--text3,#9aa3b5); font-size:16px; }
.md-ectl { width:24px; height:24px; border-radius:7px; border:1px solid var(--border,#2a3140); background:var(--bg3,#11151f); color:var(--text,#e8edf5); cursor:pointer; font-size:12px; line-height:1; padding:0; }
.md-ectl.on { background:linear-gradient(135deg,#00e5a0,#5ad1ff); border-color:transparent; color:#04121a; }
.md-szlbl { font:700 11px/1 'DM Mono',monospace; color:var(--text2,#c7cedb); min-width:26px; text-align:center; }
/* empty placeholder box (Edit ➕): faint dashed cell that shapes free space. */
/* empty box = INVISIBLE when not editing (owner: "if the box is empty it needs to
   be invisible like there is no box") — strip the card bg/border/shadow so it only
   reserves grid space. The dashed outline + hint show ONLY in Edit mode. */
.md-box { background:none; border:none; box-shadow:none; min-height:0; display:flex; align-items:center; justify-content:center; }
.md-box:hover { transform:none; box-shadow:none; }
.md-grid.md-editing .md-box { background:rgba(255,255,255,.03); border:1px dashed var(--border2,#3a4150); }
.md-box-in { font:600 10px/1.3 'DM Mono',monospace; color:var(--text3,#8a93a5); text-transform:uppercase; letter-spacing:.08em; opacity:.7; }
.md-hiddencard { opacity:.42; }
#md-editbar { align-items:center; }
#md-editbar .btn { margin-left:2px; }

/* ── Hall of Fame redesign ───────────────────────────────────────────── */
.w-trophy { display:flex; align-items:center; gap:14px; }
.w-trophy-medal { font-size:40px; line-height:1; }
.w-trophy-rank { font-size:30px; font-weight:900; }
.w-podium { display:flex; align-items:flex-end; justify-content:center; gap:8px; margin-bottom:6px; }
.w-pod { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; max-width:34%; }
.w-pod::after { content:''; width:100%; border-radius:6px 6px 0 0; margin-top:2px; }
.w-pod.p1::after { height:42px; background:linear-gradient(180deg,#ffd166,#ff8a00); }
.w-pod.p2::after { height:30px; background:linear-gradient(180deg,#cfdcea,#8a93a6); }
.w-pod.p3::after { height:20px; background:linear-gradient(180deg,#e8b78a,#b87333); }
.w-pod-medal { font-size:15px; } .w-pod-val { font-size:11px; font-weight:800; }
.w-podium-rest { display:flex; gap:10px; justify-content:center; font-size:11px; color:var(--text3,#9aa3b5); margin-bottom:4px; }
.w-lb { display:flex; flex-direction:column; gap:6px; margin-bottom:5px; }
.w-lbrow { display:flex; align-items:center; gap:7px; font-size:12px; }
.w-lbrank { width:18px; text-align:center; }
.w-lbbarwrap { flex:1; height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.w-lbbar { height:100%; border-radius:999px; background:linear-gradient(90deg,#00e5a0,#5ad1ff); transition:width .8s cubic-bezier(.2,.8,.2,1); }
.w-lbval { min-width:44px; text-align:right; font-weight:800; }

/* ── Top platforms (3 medals stacked) ────────────────────────────────── */
.w-platlist { display:flex; flex-direction:column; gap:8px; }
.w-platrow { display:flex; align-items:center; gap:9px; font-size:14px; }
.w-platmedal { font-size:19px; }
.w-platname { font-weight:700; }

/* ── My Platforms (v1 port) ──────────────────────────────────────────── */
.w-plat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.w-plat-card { background:rgba(255,255,255,.05); border:1px solid var(--border,#2a3140); border-radius:10px; padding:10px 12px; cursor:pointer; transition:border-color .2s; }
.w-plat-card:hover { border-color:#00e5a0; }
.w-plat-top { display:flex; align-items:center; gap:7px; }
.w-plat-ico { font-size:18px; }
.w-plat-label { font-weight:700; font-size:13px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.w-plat-go { font-size:11px; color:var(--text3,#9aa3b5); }
.w-plat-cred { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text3,#9aa3b5); font-family:'DM Mono',monospace; margin-top:4px; cursor:pointer; }
.w-plat-cred span { color:var(--text,#e8edf5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:92px; }
.w-plat-stage { font-size:11px; color:var(--text3,#9aa3b5); font-family:'DM Mono',monospace; margin-top:5px; }

/* ── message lines + per-line action buttons ─────────────────────────── */
.w-lines { display:flex; flex-direction:column; gap:6px; }
.w-line { background:rgba(255,255,255,.06); border-radius:9px; padding:8px 10px; font-size:13px; font-weight:600; line-height:1.3; }
.w-line-btn { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.w-line-t { flex:1; min-width:120px; }
.w-linebtns { display:flex; gap:6px; }
.w-lbtn { border:0; border-radius:8px; padding:4px 9px; font-size:11px; font-weight:800; cursor:pointer; line-height:1; }
.w-lbtn.ok { background:linear-gradient(135deg,#00e5a0,#2bd4c0); color:#06121a; }
.w-lbtn.no { background:rgba(255,255,255,.12); color:var(--text,#e8edf5); }
.w-platamt { margin-left:auto; font-weight:800; }

/* ── 📚 Library gallery ──────────────────────────────────────────────── */
.md-libsection { grid-column:1/-1; font:700 12px/1.4 'DM Mono',monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--text3,#9aa3b5); margin:16px 2px 2px; padding-top:11px; border-top:1px solid rgba(255,255,255,.08); }
.md-libsection:first-child { border-top:none; padding-top:2px; margin-top:0; }
.md-libnote { font:500 10px/1.3 'DM Mono',monospace; color:var(--text3,#8a93a5); opacity:.75; text-transform:none; letter-spacing:0; margin-left:8px; }
.md-card-title .md-libnote { margin-left:auto; }
.md-av { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; font-weight:800; vertical-align:middle; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.md-listbox { display:flex; flex-direction:column; gap:5px; }
.md-listrow { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border-radius:9px; padding:7px 10px; font-size:12.5px; }
.md-listmain { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.md-listsub { color:var(--text3,#9aa3b5); font-size:11px; white-space:nowrap; }
.md-listamt { font-weight:700; white-space:nowrap; }

/* ── welcome greeting (first real widget) — "buddy/Carousel" look: a BIG moving */
/*    emoji at the front + the quote smaller beside it. The emoji floats         */
/*    continuously and pops on each change; solid text color (no gradient-clip,  */
/*    which washes out emoji glyphs). ──────────────────────────────────────────*/
.w-welcome { display:flex; align-items:center; justify-content:center; gap:16px; min-height:96px; padding:6px 8px; }
.w-welcome-emoji { flex:0 0 auto; font-size:54px; line-height:1; animation:wWelFloat 2.6s ease-in-out infinite; }
.w-welcome-emoji-in { display:inline-block; }
.w-welcome-emoji-in.pop { animation:wWelPop .55s ease; }
.w-welcome-quote { flex:0 1 auto; min-width:0; font-size:17px; font-weight:700; line-height:1.34; color:var(--text,#e8edf5); transition:opacity .28s ease; }
/* DESKTOP: welcome fills its (user-sized) card + scales text & emoji with cqmin so
   they grow proportionally when the box is expanded in BOTH directions (cqmin =
   the smaller dimension), centered when only one. MUST be AFTER the base px rules
   above — media queries don't add specificity, so source order decides the winner. */
@media (min-width:521px){
  .w-welcome { flex:1; width:100%; min-height:0; container-type:size; }
  .w-welcome-emoji { font-size:clamp(40px, 40cqmin, 160px); }
  .w-welcome-quote { font-size:clamp(15px, 13cqmin, 52px); }
}
/* Card header "Hello <Name>": the card title is uppercase 11px by default —
   override to Title-Case ("first letter big only") and make the NAME green +
   bigger so it stands out (owner 2026-06-05). */
/* owner r3 (item 3): "Hello" = same size as 📋 Today's title (22px); the NAME 50% larger (33px) */
.w-welcome-title { text-transform:none; font-size:22px; font-weight:600; letter-spacing:0; }
.w-welcome-name  { color:var(--green,#2dd36f); font-size:33px; font-weight:800; letter-spacing:0; }
@keyframes wWelFloat { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
@keyframes wWelPop  { 0%{ transform:scale(.55) rotate(-14deg) } 55%{ transform:scale(1.28) rotate(10deg) } 100%{ transform:scale(1) rotate(0) } }
@media (max-width:520px){ .w-welcome-emoji{ font-size:44px } .w-welcome-quote{ font-size:15px } }

/* ── 💸 Today's Total (1×1) — one big whole-dollar number + a small caption.
   Base px rules FIRST; the cqmin scaling @media comes AFTER (source order wins,
   like .w-welcome). cqmin = 1% of the smaller box dimension → number + caption
   grow only when the box is enlarged in BOTH directions, and stay centered. */
.w-tt { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px; width:100%; min-height:0; text-align:center; overflow:hidden; }
.w-tt-amt { font-weight:900; letter-spacing:-.6px; line-height:.95; color:#ffd166; }            /* dollars = yellow */
.w-tt-amt.w-tt-nodata { color:var(--text2,#c3ccda); font-weight:700; letter-spacing:normal; }   /* status text: normal spacing + brighter → crisp, not fuzzy */
.w-tt-cap { color:var(--text3,#9aa3b5); font-weight:600; line-height:1.05; }
@media (min-width:521px){
  .w-tt { flex:1; container-type:size; }
  .w-tt-amt { font-size:clamp(18px, min(64cqmin, calc(150 / var(--ttlen, 4) * 1cqi)), 120px); }   /* length-aware: short numbers ($0) go BIG, long ones auto-shrink to fit width (never cut off) */
  .w-tt-amt.w-tt-nodata { font-size:clamp(11px, min(20cqmin, 8cqi), 30px); }   /* "no data" = status, moderate size + crisp (not stretched huge) */
  .w-tt-cap { font-size:clamp(9px, 10cqmin, 26px); }   /* bigger caption (owner: more readable) */
}
@media (max-width:520px){ .w-tt-amt{ font-size:26px } .w-tt-cap{ font-size:13px } }

/* Compact card for the small money widgets (Today's + Session's Total): tight
   padding/gap, title on ONE small line, body fills from the TOP so the money sits
   CLOSE under the title (not floating to the middle). Same :has approach as .w-np--bar. */
.md-card:has(.w-tt), .md-card:has(.w-st), .md-card:has(.w-nl), .md-card:has(.w-nlw) { padding:7px 10px; gap:2px; }
.md-card:has(.w-tt) > .md-card-title, .md-card:has(.w-st) > .md-card-title { container-type:inline-size; }
/* 2x cap, fit-to-width: long titles on small default cards shrink to show FULL
   text (no cut) and reach the full 2x (22px) on wider cards. (owner 2026-06-12) */
.md-card:has(.w-tt) > .md-card-title > span { min-width:0; display:block; white-space:nowrap; overflow:hidden; font-size:clamp(12px, 10cqi, 22px); }
.md-card:has(.w-st) > .md-card-title > span { min-width:0; display:block; white-space:nowrap; overflow:hidden; font-size:clamp(12px, 6cqi, 22px); }
.md-card:has(.w-tt) > .md-card-body, .md-card:has(.w-st) > .md-card-body { justify-content:flex-start; gap:1px; }

/* ── 💸 Session's Total (2×1) — row1 = live session total (USD ~ EUR), row2 =
   her share at her tier %. Base px FIRST; cqmin scaling @media AFTER (source order
   wins). Two stacked rows, centered, growing with the box in both directions. */
.w-st { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; width:100%; min-height:0; text-align:center; overflow:hidden; }
.w-st-row1 { font-weight:600; letter-spacing:normal; line-height:1.05; }   /* lighter + normal spacing → readable (owner) */
.w-st-row1.w-st-nodata { color:var(--text2,#c3ccda); font-weight:700; }
.w-st-elabel { color:var(--text3,#9aa3b5); font-weight:600; line-height:1.15; }   /* "My Approximate Earnings at X% =" label row */
.w-st-approx { color:var(--text3,#9aa3b5); font-weight:600; }   /* "(approximately)" after the euro — same size+colour as the label (owner) */
.w-st-earn { font-weight:700; line-height:1; }   /* the $/€ values UNDER the label — bigger row */
.w-st-usd { color:#ffd166; font-weight:700; }                 /* dollars = yellow (lighter weight) */
.w-st-eur { color:var(--green,#2dd36f); font-weight:700; }    /* euros = green */
.w-st-lbl { color:var(--text3,#9aa3b5); font-weight:600; }
.w-st-dim { color:var(--text2,#c3ccda); font-weight:600; }   /* secondary conversions (total-in-€, earnings-in-$): NOT yellow/green */
@media (min-width:521px){
  .w-st { flex:1; container-type:size; }
  .w-st-row1 { font-size:clamp(17px, min(31cqmin, 13cqi), 50px); }   /* +30% (owner) */
  .w-st-approx { font-size:clamp(8px, min(13cqmin, 5cqi), 20px); }   /* small, same size as the label below */
  .w-st-elabel { font-size:clamp(8px, min(13cqmin, 5cqi), 20px); }   /* label stays this size */
  .w-st-earn { font-size:clamp(18px, min(33cqmin, 13cqi), 50px); }    /* +50% (owner) */
}
@media (max-width:520px){ .w-st-row1{ font-size:18px } .w-st-elabel{ font-size:11px } .w-st-earn{ font-size:16px } }

/* ── 🚀 Next Payout level (1×2) — big NEXT-tier %, a ring (number = $ left inside,
   fills as $-left → 0), "$ Left". Base px FIRST; cqmin scaling @media AFTER. The
   ring SVG is fixed-size; the % + label scale with the box. */
.w-nl { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; min-height:0; text-align:center; overflow:hidden; }
.w-nl-pct { font-weight:900; letter-spacing:-.5px; line-height:1; color:var(--green,#2dd36f); }
.w-nl-pct.w-nl-nodata { color:var(--text3,#9aa3b5); font-weight:800; }
.w-nl-ring { line-height:0; }
.w-nl-left { font-size:13px; font-weight:700; color:var(--text3,#9aa3b5); letter-spacing:.3px; }
.w-nl-max { font-size:11px; font-weight:700; color:var(--text2,#c3ccda); }
@media (min-width:521px){
  .w-nl { flex:1; container-type:size; }
  .w-nl-pct { font-size:clamp(20px, 22cqmin, 54px); }
  .w-nl-left { font-size:clamp(11px, 9cqmin, 22px); }
}
@media (max-width:520px){ .w-nl-pct{ font-size:30px } .w-nl-left{ font-size:14px } }

/* Title on TWO lines: "🚀 Next" / "Payout level" (titleHtml supplies the <br>). Each
   line nowrap so it never wraps to a 3rd line; scale to the card width. */
.md-card:has(.w-nl) > .md-card-title { container-type:inline-size; }
.md-card:has(.w-nl) > .md-card-title > span { min-width:0; display:block; white-space:nowrap; overflow:hidden; line-height:1.12; font-size:clamp(13px, 13cqi, 26px); }   /* 2x cap, fit-to-width */

/* ── 🚀 Next Payout level — LANDSCAPE (2×1): next-% · ring($ left inside) · "Left"
   in a ROW. Title one line (scale to width). Ring is fixed-size; %/label scale. */
.w-nlw { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px; width:100%; height:100%; min-height:0; overflow:hidden; }
.w-nlw-pct { font-weight:900; line-height:1; color:var(--green,#2dd36f); flex-shrink:0; }
.w-nlw-ring { line-height:0; flex-shrink:0; }
.w-nlw-left { font-weight:700; color:var(--text3,#9aa3b5); letter-spacing:.3px; flex-shrink:0; }
@media (min-width:521px){
  .w-nlw { container-type:size; }
  .w-nlw-pct { font-size:clamp(15px, 22cqmin, 44px); }
  .w-nlw-left { font-size:clamp(8px, 10cqmin, 18px); }
}
@media (max-width:520px){ .w-nlw-pct{ font-size:28px } .w-nlw-left{ font-size:12px } }
.md-card:has(.w-nlw) > .md-card-title { container-type:inline-size; }
.md-card:has(.w-nlw) > .md-card-title > span { min-width:0; display:block; white-space:nowrap; overflow:hidden; font-size:clamp(12px, 8cqi, 22px); }   /* 2x cap, fit-to-width */

/* ── ⚠️ Online status (2×2): clock countdown / red→green online-progress donut /
   motivational money. Base px FIRST; the cqmin scaling @media comes AFTER (source
   order wins — @media adds NO specificity), exactly like .w-welcome / .w-tt. The
   donut's centre number is overlaid HTML (not the ring's own label) so it scales
   with cqmin; the ring SVG fills its square wrapper. ── */
.w-online { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px; overflow:hidden; }
.w-online-ring { position:relative; line-height:0; flex-shrink:0; }
.w-online-ring svg { display:block; width:100%; height:100%; }
.w-online-ring-ctr { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; line-height:1; }
.w-online-ring-num { font-weight:900; letter-spacing:-.5px; color:var(--text,#e8edf5); }
.w-online-num { font-weight:900; letter-spacing:-.6px; line-height:1; color:var(--text,#e8edf5); }
.w-online-icon { line-height:1; }
.w-online-cap { color:var(--text3,#9aa3b5); font-weight:700; line-height:1.15; }
.w-online-sub { color:var(--text3,#9aa3b5); font-weight:600; line-height:1; }
.w-danger { color:#ff4d6d; font-weight:800; }
.w-online--alert, .w-online--clock.is-late { animation:md-pulse 1.6s ease-in-out infinite; }
/* owner r3 (item 2): countdown layout — ring LEFT, the big number OUTSIDE to the
   RIGHT; RED while counting down to her minimum, GREEN once past it. */
.w-online-siderow { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; flex:1; min-height:0; }
.w-online-bignum { font-weight:900; letter-spacing:-.5px; line-height:1; white-space:nowrap; }
.w-num-down { color:#ff4d6d; }
.w-num-ok { color:#00e5a0; }
/* base px (mobile / fallback) — cap +50% / sub 2x (owner r3 item 2) */
.w-online-ring { width:96px; }
.w-online-ring-num { font-size:17px; }
.w-online-num { font-size:24px; }
.w-online-icon { font-size:28px; } .w-online-icon.big { font-size:38px; }
.w-online-cap { font-size:17px; }
.w-online-sub { font-size:20px; }
.w-online-bignum { font-size:30px; }
.w-online--side .w-online-ring { width:84px; }
/* DESKTOP: fill the (user-sized) card + scale every part with cqmin so the donut,
   number, icon + captions all grow proportionally when the box is enlarged. AFTER base. */
@media (min-width:521px){
  .w-online { flex:1; width:100%; min-height:0; container-type:size; }
  .w-online-ring { width:clamp(78px, 60cqmin, 300px); }
  .w-online-ring-num { font-size:clamp(13px, 15cqmin, 64px); }
  .w-online-num { font-size:clamp(20px, 26cqmin, 110px); }
  .w-online-icon { font-size:clamp(22px, 26cqmin, 96px); } .w-online-icon.big { font-size:clamp(30px, 40cqmin, 150px); }
  .w-online-cap { font-size:clamp(13px, 12cqmin, 39px); }   /* +50% (owner r3) */
  .w-online-sub { font-size:clamp(16px, 12cqmin, 40px); }   /* 2x (owner r3) */
  .w-online--side .w-online-ring { width:clamp(64px, 42cqmin, 240px); }
  .w-online-bignum { font-size:clamp(24px, 26cqmin, 120px); }
}
@media (max-width:520px){ .w-online-ring{ width:92px } .w-online-num{ font-size:24px } .w-online-cap{ font-size:18px } }
.md-card:has(.w-online) > .md-card-title { container-type:inline-size; }
.md-card:has(.w-online) > .md-card-title > span { min-width:0; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:22px; }   /* owner r3: SAME size as the rest (was fit-to-width, looked smaller) */

/* ── period graphs (periodmoney / periodmoney2 / periodhours / periodhours2) ──
   shared frame from widgets-periodnav.js: ‹ period › nav, tap-a-day readout,
   chart area, day-number strip, Σ footer. */
.w-pg { display:flex; flex-direction:column; height:100%; gap:4px; }
/* r2 (owner 2026-06-12): the widget renders its OWN header — title + the
   ‹ Jun 1 – 15 › navigator in the SAME row, navigator at title height. The
   tap-a-day readout + Period-total footer rows are REMOVED (graph gets the space). */
.w-pg-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; min-width:0; }
.w-pg-title { font-size:22px; font-weight:700; letter-spacing:.3px; color:var(--text3,#9aa3b5); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.w-pg-nav { display:flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; }
.w-pg-btn { background:var(--bg3); border:1px solid var(--border); color:var(--text2); border-radius:8px; width:34px; height:30px; line-height:1; font-size:20px; cursor:pointer; padding:0; }
.w-pg-btn:hover:not(:disabled) { color:var(--accent); border-color:rgba(0,229,160,.4); }
.w-pg-btn:disabled { opacity:.25; cursor:default; }
.w-pg-lab { font-family:'DM Mono',monospace; font-size:22px; font-weight:700; color:var(--text2); min-width:170px; text-align:center; }
.w-pg-chart { position:relative; flex:1; display:flex; align-items:stretch; gap:2px; min-height:42px; container-type:size; }
.w-pg-col { flex:1; position:relative; display:flex; align-items:flex-end; cursor:pointer; min-width:0; }
.w-pg-col:hover .w-pg-fill { filter:brightness(1.3); }
.w-pg-fill { width:100%; border-radius:3px 3px 0 0; background:linear-gradient(180deg, rgba(0,229,160,.85), rgba(0,229,160,.30)); min-height:2px; }
.w-pg-fill.w-pg-zero { background:var(--bg4); height:2px !important; }
.w-pg-fill.w-pg-under { background:linear-gradient(180deg, rgba(255,85,96,.85), rgba(255,85,96,.35)); }
.w-pg-fill.w-pg-today { background:linear-gradient(180deg, rgba(245,185,77,.9), rgba(245,185,77,.35)); animation:w-pg-pulse 2s ease-in-out infinite; }
.w-pg-col.w-pg-fut { cursor:default; }
.w-pg-col.w-pg-fut::after { content:''; position:absolute; left:18%; right:18%; bottom:0; border-bottom:1px dashed var(--border); }
.w-pg-col.w-pg-sel .w-pg-fill { box-shadow:0 0 0 1.5px var(--accent), 0 0 10px rgba(0,229,160,.35); }
.w-pg-col.w-pg-sel .w-pg-fill.w-pg-today { box-shadow:0 0 0 1.5px #f5b94d, 0 0 10px rgba(245,185,77,.4); }
@keyframes w-pg-pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }
.w-pg-goal { position:absolute; left:0; right:0; border-top:1.5px dashed rgba(245,185,77,.8); z-index:2; pointer-events:none; }
.w-pg-goal span { position:absolute; right:0; top:-27px; font-size:24px; font-family:'DM Mono',monospace; font-weight:700; color:#f5b94d; background:rgba(0,0,0,.45); padding:0 6px; border-radius:4px; }   /* owner r3: MINIMUM label 3x (was 8px) */
.w-pg-goal.w-pg-goal-below span { top:4px; }   /* r4: line near the chart top → label under the line (never clips the header) */
/* 2026-06-12 owner item 6: $ guide lines + their numbers MORE VISIBLE (was rgba .07 + 8px text3) */
.w-pg-grid { position:absolute; left:0; right:0; border-top:1px solid rgba(255,255,255,.30); pointer-events:none; }
.w-pg-grid span { position:absolute; right:0; top:1px; font-size:24px; font-weight:700; font-family:'DM Mono',monospace; color:var(--text,#e8edf5); background:rgba(0,0,0,.45); padding:0 6px; border-radius:4px; }   /* owner r3: $250/$500 double size */
/* 2026-06-12 owner items 6+7: the per-day value printed in (or above) each column */
.w-pg-num { position:absolute; left:0; right:0; text-align:center; font-size:10px; font-weight:700; font-family:'DM Mono',monospace; line-height:1; color:var(--text2,#c3ccda); pointer-events:none; z-index:3; text-shadow:0 1px 2px rgba(0,0,0,.85); }
.w-pg-num.w-pg-num-in { color:#fff; }
/* r2/r3: VERTICAL money number (≥1000 only, owner r3) — as wide as its column
   (~5.2cqw ≈ one column of 15-16), height-capped vs the chart so it can't
   outgrow short charts (Layout-2 wide-short band, owner shot 183422). */
.w-pg-numv { writing-mode:vertical-rl; text-orientation:mixed; left:50%; right:auto; transform:translateX(-50%); font-size:clamp(12px, min(5.2cqw, 20cqh), 64px); letter-spacing:.04em; font-weight:800; }
/* r3: ≤999 — normal HORIZONTAL number close to the bar's end (owner) */
.w-pg-numh { font-size:clamp(10px, min(3.4cqw, 11cqh), 30px); font-weight:800; }
/* r2/r3: hours on two stacked rows ("7h" / "52m") — 30% smaller than r2 (owner
   item 5) + height-capped so labels never dominate short charts (item 6). */
.w-pg-num2 { font-size:clamp(9px, min(2.9cqw, 12cqh), 32px); font-weight:800; line-height:1.04; }
.w-pg-days { display:flex; gap:2px; }
.w-pg-days span { flex:1; text-align:center; font-size:8px; color:var(--text3); font-family:'DM Mono',monospace; min-width:0; }
.w-pg-days span.w-pg-dtoday { color:#f5b94d; font-weight:700; }
.w-pg-nodata { display:flex; align-items:center; justify-content:center; height:100%; color:var(--text3); font-size:12px; }
.w-pg-loading { opacity:.55; transition:opacity .2s; }
/* V2 money: FLOW (area + dots + per-day hit columns) */
.w-pg-flow { position:relative; flex:1; min-height:42px; }
.w-pg-flow svg { position:absolute; inset:0; width:100%; height:100%; }
.w-pg-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--accent); transform:translate(-50%,50%); pointer-events:none; z-index:2; }
.w-pg-dot.w-pg-dtodayd { background:#f5b94d; animation:w-pg-pulse 2s infinite; }
.w-pg-hit { position:absolute; top:0; bottom:0; cursor:pointer; }
.w-pg-hit:hover { background:rgba(255,255,255,.05); }
.w-pg-hit.w-pg-sel { background:rgba(0,229,160,.09); }
.w-pg-peak { position:absolute; transform:translateX(-50%); font-size:8px; font-family:'DM Mono',monospace; color:var(--accent); background:rgba(0,0,0,.45); padding:0 4px; border-radius:3px; pointer-events:none; z-index:3; }
/* V2 hours: PILLS (capsule height = the daily goal) */
.w-pg-pillrow { flex:1; display:flex; gap:3px; align-items:stretch; min-height:42px; }
.w-pg-pill { flex:1; position:relative; border-radius:5px; background:var(--bg4); overflow:hidden; cursor:pointer; min-width:0; }
.w-pg-pill:hover { filter:brightness(1.25); }
.w-pg-pill .w-pg-pfill { position:absolute; left:0; right:0; bottom:0; border-radius:4px 4px 0 0; }
.w-pg-pill.w-pg-sel { box-shadow:0 0 0 1.5px var(--accent); }
.w-pg-pill.w-pg-fut { opacity:.3; cursor:default; }
.w-pg-pill .w-pg-pcap { position:absolute; top:1px; left:20%; right:20%; height:3px; border-radius:2px; background:var(--accent); box-shadow:0 0 6px rgba(0,229,160,.8); }