/* Decision Companion — shared persona renderer. Mobile-first, Bangla-first.
   Colors live in /cash-engine/brand/themes.css (cream, light, black).
   NO webfont. The shared Bengali webfont is broken in production; this renderer uses a
   bold system stack (Noto Sans Bengali / Hind Siliguri / SolaimanLipi, then the platform sans). */

:root {
  --radius:14px;
  --radius-sm:10px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  font-family:"Noto Sans Bengali","Hind Siliguri","SolaimanLipi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.62; font-size:16px;
  -webkit-text-size-adjust:100%;
}

.skip-link { position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink);
  padding:8px 14px; border-radius:0 0 var(--radius-sm) 0; z-index:10; }
.skip-link:focus { left:0; }

.shell { max-width:600px; margin:0 auto; padding:14px var(--space-4) 72px; }

header { padding:6px 2px 4px; }
.topbar {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin:-20px -18px 12px; padding:10px 18px;
  background:var(--header-bg); color:var(--header-ink);
}
.eyebrow { display:inline-block; font-size:12px; font-weight:700; color:var(--pride-ink);
  background:var(--pride); border:1px solid var(--pride); border-radius:999px; padding:3px 11px; }
.lang-toggle {
  flex:none; background:transparent; border:1px solid var(--header-ink);
  border-color:color-mix(in srgb, var(--header-ink) 45%, transparent);
  border-radius:999px; padding:8px 13px; min-height:44px; font-size:13px;
  font-weight:600; cursor:pointer; color:var(--header-ink);
}
.lang-toggle:hover { border-color:var(--header-ink); color:var(--header-ink); }
.lang-toggle:focus-visible { outline:3px solid var(--header-marker); outline-offset:2px; }

h1 { font-size:25px; line-height:1.25; margin:2px 0 6px; letter-spacing:-.01em; font-weight:800; }
h2 { font-size:20px; line-height:1.3; margin:0 0 8px; letter-spacing:-.005em; }
h3 { font-size:15px; margin:0 0 8px; color:var(--muted); }
#app-sub { color:var(--muted); font-size:14.5px; margin:6px 2px 0; }

.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--space-5); margin-top:var(--space-3); box-shadow:var(--shadow-card); }
.panel-hint { color:var(--muted); font-size:13.5px; margin:0 0 var(--space-3); }
.step { font-size:11.5px; font-weight:700; color:var(--faint); text-transform:uppercase;
  letter-spacing:.08em; margin:0 0 6px; }
html[lang="bn"] :is(.step, .group > .group-label, .hist-group > .group-label, .section-head, .badge) {
  letter-spacing:normal; text-transform:none;
}
.pain { color:var(--muted); font-style:italic; margin:2px 0 16px; }
.section-head { font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--ink);
  text-transform:none; margin:var(--space-5) 0 var(--space-2); }
.section-head:first-of-type { margin-top:4px; }
/* "Useful for you now" sits under "Decisions for you"; keep a full section gap above its head. */
.useful-now .section-head { margin-top:18px; }

/* ---------- persona picker ---------- */
.group { margin-bottom:18px; }
.group:last-child { margin-bottom:4px; }
.group > .group-label { font-size:12px; font-weight:800; color:var(--faint);
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px; }
.persona-btn { display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  background:var(--sunk); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 13px; margin:7px 0; font-size:15px; font-weight:500; cursor:pointer;
  color:var(--ink); transition:border-color .12s, background .12s; }
.persona-btn:hover { border-color:var(--accent-line); background:var(--accent-wash); }
.persona-btn:focus-visible { outline:none; box-shadow:var(--focus); border-color:var(--accent); }
.persona-btn .p-name { flex:1 1 auto; }
/* Availability cue is shape + fill, not colour alone (WCAG 1.4.1):
   ready = filled disc, "still being prepared" = hollow ring. */
.p-dot { flex:none; display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--accent); border:2px solid var(--accent); vertical-align:middle; }
.p-dot.prep { background:transparent; border-color:var(--warn); }
/* Owner preview mode: a persona still behind the v1 owner lock is shown here, badged.
   Small + muted, inline-block, and it wraps instead of overflowing narrow (360px) phones. */
.persona-preview-badge { display:inline-block; flex:0 1 auto; max-width:100%; font-size:11px;
  font-weight:700; color:var(--faint); background:var(--sunk); border:1px solid var(--line);
  border-radius:999px; padding:2px 8px; margin-inline-start:6px; line-height:1.3;
  white-space:normal; overflow-wrap:anywhere; }
@media (max-width: 360px) {
  .persona-btn { flex-wrap:wrap; }
  .persona-preview-badge { margin-inline-start:0; }
}

/* ---------- tool cards ---------- */
.tool-cards { display:flex; flex-direction:column; gap:var(--space-2); }
.tool-card { border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--space-4);
  background:var(--card); }
.tool-card.rec { border-color:var(--accent-line); background:var(--card);
  box-shadow:inset 3px 0 0 var(--accent); padding-inline-start:16px; }
.tool-card.primary { border-width:2px; border-color:var(--accent); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.tool-question-group { width:100%; margin:12px 0; }
.tool-question-group > h3 { margin:0 0 6px; color:var(--muted); font-size:14px; }
.tool-card .t-name { width:100%; font-weight:700; font-size:15.5px; display:flex; flex-wrap:wrap;
  align-items:center; gap:6px; }
.tool-card .t-promise { color:var(--muted); font-size:13.5px; margin:4px 0 12px; }
.badge { display:inline-block; font-size:10.5px; font-weight:700; padding:2px 8px;
  border-radius:999px; letter-spacing:.02em; vertical-align:middle; }
.badge.live { background:var(--pride); color:var(--pride-ink); }
.badge.planned { background:var(--line-soft); color:var(--planned); border:1px solid var(--line); }
.badge.preview { background:var(--warn-wash); color:var(--warn); border:1px solid var(--warn-line); }
.badge.draft { background:var(--warn-wash); color:var(--warn); border:1px solid var(--warn-line); }
.tool-card.is-planned { opacity:.86; background:var(--sunk); }
.tool-card.is-planned .t-note { font-size:12px; color:var(--planned); }

.prep-note { font-size:12.5px; color:var(--warn); background:var(--warn-wash);
  border:1px solid var(--warn-line); border-radius:var(--radius-sm); padding:9px 11px; margin:12px 0 0; }

.notice { background:var(--warn-wash); border:1px solid var(--warn-line);
  border-radius:var(--radius-sm); padding:13px 14px; margin:4px 0 0; }
.notice p { margin:0; font-size:14px; color:var(--warn); }
.notice .prep-note { margin-top:9px; }
.offline-line, .update-bar { padding:8px 14px; font-size:13px; text-align:center; }
.offline-line { background:var(--warn-wash); color:var(--warn); border-bottom:1px solid var(--warn-line); }
.update-bar { background:var(--accent-wash); color:var(--ink); border-bottom:1px solid var(--accent-line); }
.update-bar .link-button { display:inline; min-height:0; padding:0 0 0 8px; }

/* ---------- buttons ---------- */
button { font:inherit; }
.btn-primary, #tool-form button[type=submit], #diagnostic-form button[type=submit] {
  background:var(--action); color:var(--action-ink); border:0; border-radius:var(--radius-sm);
  padding:12px 18px; font-weight:700; font-size:15px; cursor:pointer; width:100%; margin-top:6px; }
.btn-primary:hover, #tool-form button[type=submit]:hover, #diagnostic-form button[type=submit]:hover { background:var(--action-press); }
.btn-primary:focus-visible, #tool-form button[type=submit]:focus-visible { outline:none; box-shadow:var(--focus); }
.btn-primary[disabled] { opacity:.6; cursor:progress; }
.btn-secondary { background:var(--sunk); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 16px; font-weight:600; cursor:pointer; color:var(--ink); }
.btn-secondary:hover { border-color:var(--accent-line); }
.btn-secondary:focus-visible { outline:none; box-shadow:var(--focus); }
.tool-card button { background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px;
  min-height:44px; padding:9px 14px; font-weight:700; font-size:13.5px; cursor:pointer; }
.tool-card button:hover { background:var(--accent-press); }
.tool-card button:focus-visible { outline:none; box-shadow:var(--focus); }
.link-button { background:none; border:0; color:var(--accent); text-decoration:underline;
  text-underline-offset:2px; cursor:pointer; padding:10px 0; min-height:44px; font-size:14px; font-weight:600; }
.link-button:focus-visible { outline:none; box-shadow:var(--focus); border-radius:6px; }

/* ---------- tool form ---------- */
.tool-reason { color:var(--muted); font-size:14px; margin:0 0 6px; }
.field { margin:var(--space-3) 0; }
.field label { display:block; font-size:14px; font-weight:700; margin-bottom:5px; color:var(--label-ink); }
html[lang="en"] .field label, :lang(en) .field label {
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--label-ink);
}
html[lang="bn"] .field label, :lang(bn) .field label {
  font-size:14px; font-weight:700; text-transform:none; letter-spacing:normal; color:var(--label-ink);
}
.field-hint { color: var(--muted); font-size: 12.5px; font-weight: 400; margin: -2px 0 6px; }
label > .field-hint { display: block; margin: 2px 0 6px; }
.field-example { margin-top: -2px; font-size:13px; font-style:normal; color:var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.profile-after { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
.field input { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  min-height:48px; font:inherit; font-size:16px; background:var(--field); color:var(--ink); }
.field input:focus-visible { outline:none; box-shadow:var(--focus); border-color:var(--accent); }
.affix-wrap { position:relative; display:block; }
.field-affix { position:absolute; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.affix-prefix .field-affix { left:12px; }
.affix-prefix input { padding-left:30px; }
.affix-suffix .field-affix { right:12px; }
.affix-wrap .sign-toggle, .field > .sign-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); min-width:44px; min-height:44px; padding:0 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); width:auto; margin:0; font-size:1.1rem; font-weight:700; cursor:pointer; }
.field > .sign-toggle { position:static; transform:none; margin-top:6px; }
.affix-wrap:has(.sign-toggle) input { padding-right:56px; }
.affix-suffix input { padding-right:30px; }
.reads-as { min-height:1.2em; margin:3px 0 0; color:var(--muted); font-size:12.5px; }
.close-date-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.close-date-nav button { min-height:44px; min-width:44px; padding:10px 12px; }

/* ---------- states ---------- */
.error { color:var(--danger); min-height:1.2em; font-size:14px; }
.error.is-unknown { color:var(--warn); background:var(--warn-wash); border:1px solid var(--warn-line);
  border-radius:var(--radius-sm); padding:10px 12px; }
.status { color:var(--muted); font-size:13px; min-height:1.2em; }
.is-loading { color:var(--muted); }

/* ---------- result ---------- */
.dc-card-root { margin:8px 0 0; }
.dc-card { display:flex; flex-direction:column; gap:14px; }
.dc-answer-head.dc-answer-hero { padding:16px; border-radius:var(--radius); background:var(--header-bg); color:var(--header-ink); }
.dc-answer-head.dc-answer-hero .dc-answer-big,
.dc-answer-head.dc-answer-hero .dc-answer-status,
.dc-answer-head.dc-answer-hero .dc-answer-line { color:var(--header-ink); }
.dc-answer-head.dc-answer-hero .dc-answer-status { display:inline-block; margin:6px 0 0; padding:2px 10px;
  border-radius:999px; font-weight:900; opacity:1; }
[data-theme="black"] .dc-answer-head.dc-answer-hero,
.theme-black .dc-answer-head.dc-answer-hero { border:1px solid var(--line); }
.dc-answer-head.dc-answer-hero.is-safe { border-inline-start:6px solid var(--profit); }
.dc-answer-head.dc-answer-hero.is-danger { border-inline-start:6px solid var(--loss); }
.dc-answer-head.dc-answer-hero.is-middle { border-inline-start:6px solid var(--warn); }
.dc-answer-hero.is-safe .dc-answer-status { background:var(--profit); color:#FFFFFF; }
.dc-answer-hero.is-danger .dc-answer-status { background:var(--loss); color:#FFFFFF; }
.dc-answer-hero.is-middle .dc-answer-status { background:var(--warn); color:#FFFFFF; }
[data-theme="black"] .dc-answer-hero.is-safe .dc-answer-status,
.theme-black .dc-answer-hero.is-safe .dc-answer-status { color:var(--bg); }
[data-theme="black"] .dc-answer-hero.is-danger .dc-answer-status,
.theme-black .dc-answer-hero.is-danger .dc-answer-status { color:var(--bg); }
[data-theme="black"] .dc-answer-hero.is-middle .dc-answer-status,
.theme-black .dc-answer-hero.is-middle .dc-answer-status { color:var(--bg); }
.dc-answer-big { font-size:40px; line-height:1.1; font-weight:800; color:var(--accent); letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums; }
.dc-answer-big.is-danger { color:var(--loss); }
.dc-answer-big.is-middle { color:var(--warn); }
.dc-answer-big.is-safe { color:var(--profit); }
.dc-answer-status { margin:6px 0 0; font-weight:800; }
.dc-answer-status.is-danger { color:var(--loss); }
.dc-answer-status.is-middle { color:var(--warn); }
.dc-answer-status.is-safe { color:var(--profit); }
.dc-answer-line { font-size:16px; line-height:1.5; margin:6px 0 0; font-weight:500; }
.dc-answer-unknown { font-size:16px; color:var(--warn); margin:0; }
.dc-meaning { font-size:15px; color:var(--muted); margin:0; line-height:1.5; }
.dc-part-title { margin:0 0 8px; font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:none; }
.dc-chips { display:flex; flex-wrap:wrap; gap:8px; }
.dc-chip { display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--sunk); font-size:13px; line-height:1.3; }
.dc-chip-sure { border-color:var(--warn-line); background:var(--gold-wash); font-weight:600; }
.dc-chip-btn { cursor:pointer; min-height:44px; font:inherit; }
.dc-chip-btn:focus-visible { outline:none; box-shadow:var(--focus); }
.dc-caveat { font-size:13px; color:var(--muted); margin:8px 0 0; }
.dc-whatif-row { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:8px; margin-top:10px; }
.dc-whatif-answer { flex:1 1 200px; font-size:15px; }
.dc-scenario-strip { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom:10px; }
.dc-scenario-col { padding:10px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--card); font-size:13px; }
.dc-scenario-label { font-weight:700; margin:0 0 4px; font-size:12px; color:var(--muted); }
.dc-scenario-answer { margin:0; font-size:13px; }
.dc-action { font-size:16px; font-weight:500; margin:0; }
.dc-next-data { font-size:14px; color:var(--muted); margin:0 0 6px; }
.dc-how-worked { font-size:13px; color:var(--muted); margin-top:4px; }
.dc-example-band { margin:0 0 10px; padding:10px 12px; border-radius:var(--radius-sm); background:var(--warn-wash);
  border:1px solid var(--warn-line); font-size:13px; font-weight:600; }
.shop-hub-card { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1); width:100%; text-align:left; margin:var(--space-3) 0; padding:var(--space-4); border-radius:var(--radius);
  border:1px solid var(--line); background:var(--card); cursor:pointer; }
.shop-hub-label { display:block; align-self:stretch; color:var(--muted); font-size:13px; font-weight:700; }
.shop-hub-value { color:var(--ink); font-size:22px; line-height:1.2; }
.shop-hub-value, :where(.baki-total, .book-totals, .items-total, .items-summary, .item-totals) {
  font-variant-numeric:tabular-nums;
}
.shop-hub-hint { color:var(--muted); font-size:13px; font-weight:500; }

/* Phase 3: ERP card headers and cream theme's navy top rule. */
:is(.panel, .tool-card, .shop-hub-card, .today-card, .items-add-card) {
  border-radius:var(--radius);
}
:is(.panel > h2, .panel > .section-head:first-child, .tool-card .t-name,
    .shop-hub-card .shop-hub-label, .today-card > h2:first-of-type,
    .today-card > h3:first-of-type, .items-add-card > h3:first-of-type) {
  padding-bottom:var(--space-2); border-bottom:1px solid var(--line-soft); color:var(--ink);
}
[data-theme="cream"] :is(.panel, .tool-card, .shop-hub-card, .today-card, .items-add-card),
.theme-cream :is(.panel, .tool-card, .shop-hub-card, .today-card, .items-add-card) {
  border-top:3px solid var(--header-bg);
}
.btn-secondary { background:var(--card); color:var(--ink); }
.dc-chip { font-weight:700; }
.dc-chip-btn { font-size:13px; }
.dc-chip-btn[aria-pressed="true"], .dc-chip-btn.is-active,
.chip.is-active, .badge[aria-pressed="true"] {
  border-color:var(--header-bg); background:var(--header-bg); color:var(--header-ink);
}
.chip { font-weight:700; }
.badge { border:1px solid var(--line); font-size:13px; font-weight:700; }
[data-theme="black"] .dc-chip-btn[aria-pressed="true"],
.theme-black .dc-chip-btn[aria-pressed="true"],
[data-theme="black"] .dc-chip-btn.is-active,
.theme-black .dc-chip-btn.is-active,
[data-theme="black"] .chip.is-active,
.theme-black .chip.is-active,
[data-theme="black"] .badge[aria-pressed="true"],
.theme-black .badge[aria-pressed="true"] {
  border-color:var(--accent); background:var(--accent); color:var(--accent-ink);
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height:48px; font-size:16px;
}
.about-trust-card { margin-top:24px; padding:14px; border:1px solid var(--line); border-radius:var(--radius); color:var(--muted); font-size:13px; }
.about-trust-card p { margin:6px 0 0; }
.about-trust-card strong { color:var(--ink); }
.tool-item-suggestions { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.tool-item-picker-extra { margin-top:6px; }
.tool-item-suggestions button { align-self:flex-start; }
.result-more-options { margin:16px 0; border-top:1px solid var(--line); padding-top:12px; }
.result-more-options > summary { color:var(--accent); font-weight:700; cursor:pointer; padding:10px 0; }
#next-step-open { width:100%; }
.dc-card-more-root { margin:10px 0; }
.shop-pulse p { margin:6px 0 0; }
.first-step { margin:8px 0; padding:10px; border-radius:10px; background:var(--surface-2); }
.first-step[role="link"] { cursor:pointer; color:var(--accent); font-weight:700; }
.first-step.is-done { color:var(--muted); }
.items-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.items-row { display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left;
  padding:12px 14px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--card);
  font:inherit; cursor:pointer; min-height:44px; }
.items-row-name { font-weight:700; font-size:16px; }
.items-row-sub { font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4; }
.items-example-band { margin-top:12px; }
.items-costing-card { margin:12px 0; padding:14px; border:1px solid var(--line-soft); border-radius:var(--radius); }
.items-actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.item-name-input { font-size:22px; font-weight:800; width:100%; margin:8px 0 12px; padding:8px 10px;
  border:1px solid var(--line); border-radius:var(--radius-sm); }
/* Stuck-stock list, limit settings, seasonal mark (owner-approved pictures 2026-10-14). */
.ds-pill { display:inline-block; border-radius:999px; padding:2px 10px; font-size:13px; font-weight:700; white-space:nowrap; }
.ds-pill.slow { background:var(--warn-wash); color:var(--warn); border:1px solid var(--warn-line); }
.ds-pill.stuck { background:color-mix(in srgb, var(--loss) 12%, var(--card)); color:var(--loss); border:1px solid color-mix(in srgb, var(--loss) 35%, var(--card)); }
.ds-pill.ok { background:color-mix(in srgb, var(--profit) 12%, var(--card)); color:var(--profit); border:1px solid color-mix(in srgb, var(--profit) 35%, var(--card)); }
.ds-pill.seasonal { background:var(--accent); color:var(--accent-ink); }
.ds-hero { margin:8px 0 12px; padding:14px; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--card); }
.ds-hero-money { font-size:34px; line-height:1.1; font-weight:800; color:var(--ink); letter-spacing:-0.02em; margin:4px 0; }
.ds-irow { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 14px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--card);
  font:inherit; cursor:pointer; min-height:52px; }
.ds-irow-main { min-width:0; flex:1; }
.ds-irow-name { display:block; font-weight:700; font-size:16px; line-height:1.3; overflow-wrap:anywhere; }
.ds-irow-sub { font-size:13px; color:var(--muted); margin-top:2px; line-height:1.4; }
.ds-irow-side { flex:0 0 auto; display:flex; align-items:center; gap:6px; font-weight:800; }
.ds-chev { font-size:20px; font-weight:800; color:var(--muted); }
.ds-note { background:var(--warn-wash); border:1px solid var(--warn-line); border-radius:var(--radius);
  padding:12px 14px; color:var(--ink); font-size:15px; font-weight:600; margin:10px 0; }
.ds-note.badn { background:color-mix(in srgb, var(--loss) 10%, var(--card)); border-color:color-mix(in srgb, var(--loss) 35%, var(--card)); color:var(--loss); }
.ds-strip { background:color-mix(in srgb, var(--profit) 12%, var(--card)); color:var(--profit); border-radius:var(--radius);
  padding:10px 14px; font-weight:700; display:flex; justify-content:space-between; gap:8px; margin:0 0 12px; }
html.ui-v2 .season-plan-step, html.ui-v2 .season-plan-row { background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius); padding:14px; margin:10px 0; }
html.ui-v2 .season-plan-step h3 { margin:0 0 6px; color:var(--ink); }
html.ui-v2 .season-plan-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
html.ui-v2 .season-plan-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
html.ui-v2 .season-plan-row-main { min-width:0; }
html.ui-v2 .season-plan-row-name { font-weight:700; overflow-wrap:anywhere; }
html.ui-v2 .season-plan-muted { color:var(--muted); font-size:14px; }
.ds-toggle-row { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left;
  padding:12px 14px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--card);
  font:inherit; cursor:pointer; min-height:52px; }
.ds-tick { flex:0 0 26px; width:26px; height:26px; border-radius:8px; border:2px solid var(--ink);
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:transparent; }
.ds-tick.on { background:var(--ink); color:var(--bg); }
.ds-limits-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.ds-limits-grid label { display:block; font-weight:700; margin-bottom:6px; }
.ds-limits-grid input { width:100%; font-size:22px; font-weight:800; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); box-sizing:border-box; }
.ds-limits-grid input.is-error { border-color:var(--loss); }
.items-compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.items-compare-col { padding:12px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); font-size:14px; }
.items-compare-row { display:flex; justify-content:space-between; gap:8px; margin:6px 0; }
.items-compare-label { color:var(--muted); font-size:13px; }
.items-compare-winner { font-weight:600; margin-top:8px; }
.dc-pick-sheet { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.35); display:flex;
  align-items:flex-end; justify-content:center; }
.dc-pick-sheet-panel { width:100%; max-width:480px; max-height:85vh; overflow:auto; background:var(--card);
  border-radius:var(--radius) var(--radius) 0 0; padding:16px; }
.items-pick-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.item-save-prompt { margin:10px 0; }
.tool-from-items { display:block; margin-top:6px; font-size:13px; }
@media (max-width:400px) { .items-compare-grid { grid-template-columns:1fr; } }

.dc-card--short .dc-card-part[data-dc-part="whatif"],
.dc-card--short .dc-card-part[data-dc-part="compare"],
.dc-card--short .dc-card-part[data-dc-part="checkback"],
.dc-card--short .dc-card-part[data-dc-part="sure"] { display:none; }
@media (max-width:360px) {
  .dc-answer-big { font-size:36px; }
  .dc-scenario-strip { grid-template-columns:1fr; }
}
.result-copy { font-size:17px; line-height:1.6; margin:6px 0 0; }
.result-meaning { margin:6px 0 0; color:var(--muted); line-height:1.55; }
.next-step { margin:16px 0; padding:14px; border:1px solid var(--accent-line); border-radius:var(--radius); background:var(--sunk); }
.next-step h3, .how-worked h3 { margin:0 0 6px; font-size:14px; }
.next-step p { margin:4px 0; }
.next-step .next-data { color:var(--muted); font-size:13px; }
.next-step .btn-secondary { min-height:44px; margin-top:8px; }
.how-worked { margin:14px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.how-worked summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:700; }
.how-worked summary:focus-visible { outline:none; box-shadow:var(--focus); }
.how-worked dl { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px 12px; margin:8px 0 14px; }
.how-worked dt { color:var(--muted); }
.how-worked dd { margin:0; text-align:right; }
.result button, .result .file-btn { min-height:44px; }
.action { background:var(--gold-wash); border:1px solid var(--warn-line);
  border-radius:var(--radius); padding:16px; margin:16px 0; }
.action h3 { margin:0 0 6px; color:var(--ink); font-size:14px; font-weight:800;
  letter-spacing:.02em; display:flex; align-items:center; gap:7px; }
.action h3::before { content:""; flex:none; width:18px; height:18px;
  background:var(--accent); -webkit-mask:var(--arrow) center/contain no-repeat; mask:var(--arrow) center/contain no-repeat; }
.action p { margin:0; font-size:16px; font-weight:500; }
:root { --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6z'/%3E%3C/svg%3E"); }
pre#draft-copy { white-space:pre-wrap; background:var(--sunk); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px; font-size:14px; margin:8px 0; }
#draft { margin:14px 0; }
.result-tools { margin:14px 0 0; }
.feedback { border-top:1px solid var(--line-soft); margin-top:18px; padding-top:14px; }
.feedback fieldset { border:0; padding:0; margin:0 0 10px; }
.feedback legend { font-weight:700; margin-bottom:6px; font-size:14px; }
.fb-choices { display:flex; gap:18px; }
.fb-choices label { display:flex; align-items:center; gap:6px; }
.consent { display:flex; gap:8px; font-size:12.5px; color:var(--muted); margin:8px 0 12px; }
.consent input { margin-top:3px; flex:none; }
.result-nav { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; margin-top:14px; }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (min-width:520px) {
  .shell { padding-top:20px; }
  .topbar { margin-top:-26px; }
  h1 { font-size:27px; }
  .fb-choices { gap:24px; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; }
}

/* Device-local history (P3) */
.history-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.history-actions .btn-secondary { flex:1 1 auto; min-width:140px; }
.file-btn { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; margin:0; }
#history-panel, #compare-panel {
  margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--sunk);
}
.hist-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hist-row { padding:10px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--card); }
.hist-meta { margin:0 0 4px; font-size:12.5px; color:var(--muted); font-weight:600; }
.hist-result { margin:0 0 8px; font-size:14px; }
.hist-btns { display:flex; flex-wrap:wrap; gap:8px 12px; }
.hist-btns .danger, .hist-foot .danger { color:var(--danger); }
.hist-detail { margin-top:8px; padding-top:8px; border-top:1px dashed var(--line-soft); }
.hist-label { margin:8px 0 2px; font-size:12px; color:var(--muted); text-transform:none; }
.hist-body { margin:0; font-size:14px; }
.hist-note, .hist-empty { margin:6px 0; font-size:13px; color:var(--muted); }
.hist-foot { margin-top:10px; }
/* P09 follow-ups: neutral words only, no red for "did not". */
.follow-up-ask { margin-top:8px; }
.fu-chips { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.fu-chips .btn-secondary { flex:0 1 auto; }
.fu-date { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0; }
.fu-tag { display:inline-block; margin:0 0 6px; padding:2px 8px; border:1px solid var(--line-soft);
  border-radius:999px; font-size:12px; color:var(--muted); background:var(--sunk); }
.fu-tag.due { border-color:var(--accent-line); color:var(--ink); background:var(--accent-wash); }
.fu-card { margin-top:8px; padding:8px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--sunk); }
.fu-card input[type=text] { width:100%; max-width:360px; }
.hist-filter select { margin-top:6px; }
.hist-changes { margin:8px 0; padding-left:18px; font-size:14px; }
.hist-heading { list-style:none; margin-left:-18px; font-weight:700; }
.hist-unchanged { font-weight:600; }
.hist-drafts { display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }
.hist-col { padding:8px; border:1px solid var(--line-soft); border-radius:var(--radius-sm); background:var(--card); }
@media (min-width:520px) {
  .hist-drafts { grid-template-columns:1fr 1fr; }
}


/* --- Integration UX: picker density, save hierarchy, tool-card hit target --- */
.picker-legend { font-size: 0.85rem; color: var(--muted, #555); display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0 0 0.75rem; }
.picker-search { width: 100%; box-sizing: border-box; padding: 0.65rem 0.75rem; margin-bottom: 0.75rem; border-radius: 8px; border: 1px solid var(--border, #ccc); font: inherit; }
.picker-group { margin: 0 0 0.5rem; border: 1px solid var(--border, #ddd); border-radius: 10px; padding: 0.25rem 0.5rem; }
.picker-group > summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0.25rem; min-height:44px; display:flex; align-items:center; }
button.tool-card {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; border: 1px solid var(--line);
}
button.tool-card:focus-visible { outline: 2px solid var(--accent, #0a5); outline-offset: 2px; }
.tool-card .t-cta {
  display: inline-block; margin-top: 8px; background: var(--accent); color: var(--accent-ink);
  border-radius: 8px; padding: 8px 12px; font-weight: 700;
}
.field-error { color: var(--danger); font-size: 0.9rem; margin: 4px 0 0; min-height: 0; }
.field-error:empty { display: none; }
.picker-common .persona-btn { width: 100%; }
.consent-more { margin: 8px 0; font-size: 0.9rem; }
.save-cluster { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.save-cluster .btn-primary { width: 100%; }
.privacy-note { font-size: 0.85rem; color: var(--muted, #555); margin: 0; }
.secondary-actions, .backup-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.backup-transfer { margin-top: 0.25rem; }
.backup-transfer > summary { cursor: pointer; font-size: 0.9rem; min-height:44px; display:flex; align-items:center; }
.is-deep .brand-lockup, .is-deep .theme-switch { display:none; }
@media (max-width: 480px) {
  .history-actions button, .backup-actions button, .backup-actions label,
  .save-cluster .btn-primary, .save-cluster .btn-secondary, #tool-form button[type=submit] { width: 100%; }
  .result .action, .result-copy { font-size: 0.95rem; }
  .persona-btn, fieldset label { min-height: 44px; }
}

/* --- OWNER-FR1 product name (Claude save scope) --- */
.result-product-name { font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.hist-filter { margin: 0 0 10px; }
.hist-filter input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.7rem; border-radius: 8px;
  border: 1px solid var(--line); font: inherit; background: var(--field); color: var(--ink); }
.hist-group { margin: 0 0 16px; }
.hist-group:last-child { margin-bottom: 0; }
.hist-group > .group-label { font-size: 12px; font-weight: 800; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 8px; }

/* --- P21 Today tab bar + week strip --- */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; max-width: 600px; margin: 0 auto;
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  padding: var(--space-2) var(--space-1) calc(var(--space-2) + env(safe-area-inset-bottom, 0));
}
.tab-bar[hidden] { display: none !important; }
.tab-btn {
  flex: 1 1 0; min-width: 0; min-height: 48px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 10px; font-weight: 700; color: var(--muted);
  padding: 4px 1px; border-radius: var(--radius-sm);
}
.tab-btn.is-active, .tab-btn[aria-current="page"] {
  position:relative; color:var(--ink); background:var(--accent-wash);
}
.tab-btn.is-active::before, .tab-btn[aria-current="page"]::before {
  content:""; position:absolute; top:-6px; left:0; right:0; height:3px;
  background:var(--header-marker);
}
[data-theme="black"] .tab-btn.is-active, [data-theme="black"] .tab-btn[aria-current="page"],
.theme-black .tab-btn.is-active, .theme-black .tab-btn[aria-current="page"] { color:var(--accent); }
.tab-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.tab-icon { display: block; width: 22px; height: 22px; margin: 0 auto 3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab-btn.is-active .tab-icon, .tab-btn[aria-current="page"] .tab-icon { stroke-width:2; }
.tab-label { display: block; line-height: 1.15; white-space: normal; overflow: hidden; }
.tab-btn.is-active .tab-label, .tab-btn[aria-current="page"] .tab-label { font-weight:800; }

.today-date { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.today-card { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; margin: 12px 0; background: var(--sunk); }
.week-strip { margin: 14px 0; }
.week-dots { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.week-dot {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line);
  background: transparent; flex: none;
}
.week-dot.done { background: var(--accent); border-color: var(--accent); }
.week-dot.today { box-shadow: 0 0 0 2px var(--accent-wash); border-color: var(--accent); }
.week-streak, .week-sofar { font-size: 13px; color: var(--muted); margin: 4px 0; }
.today-tiles { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.today-tile {
  text-align: start; width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); font-weight: 600; cursor: pointer;
}
.closed-line { font-weight: 700; margin: 0 0 8px; }
.close-more { margin: 12px 0; }

.shop-name { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
.start-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.start-card h3 { margin: 0 0 6px; font-size: 17px; }
.start-card .example-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 0 8px; font-size: 13.5px;
}
.example-toggle { flex: none; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); font-weight: 700; cursor: pointer; }
.example-toggle.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.example-band {
  font-size: 13px; font-weight: 700; color: var(--warn);
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0;
}
.prefill-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 12px; color: var(--muted); background: var(--sunk);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px 2px 10px;
}
.prefill-chip button {
  border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--faint); padding: 2px 4px; min-width: 28px; min-height: 28px;
}
.remember-row {
  display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted);
}
.remember-row input { width: 18px; height: 18px; flex: none; }
.about-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.about-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk);
}
.about-row .about-val { font-weight: 700; }
.about-row button { flex: none; }

.more-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 12px 0; background: var(--sunk);
}
.more-section-head { margin: 0 0 10px; font-size: 15px; }
.more-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: none;
}
.more-row:last-child { border-bottom: 0; }
.more-row-theme { align-items: flex-start; }
.more-label { font-weight: 700; font-size: 14px; }
.is-deep .theme-switch.more-theme { display: flex; }
.more-theme { margin: 4px 0 0; }
.more-theme button { white-space: nowrap; }
.more-row-btn {
  display: block; width: 100%; text-align: left; margin: 10px 0;
  padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--card); cursor: pointer; font: inherit; font-weight: 700;
}
.more-row-btn[hidden] { display: none; }
.more-row-btn:focus-visible { outline: none; box-shadow: var(--focus); }
#shop-journal #history-panel[hidden] { display: block !important; }
.baki-total { margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 800; background: var(--sunk); }
.baki-list, .baki-lines { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.baki-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; text-align: start; width: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
.baki-row span { font-weight: 800; }.baki-row small { grid-column: 1 / -1; color: var(--muted); }.baki-row.is-late { border-inline-start: 4px solid var(--warn); }
.baki-balance { font-size: 24px; font-weight: 900; margin: 12px 0; }.baki-actions { display: flex; flex-wrap: wrap; gap: 8px; }.baki-lines p { margin: 0; padding: 10px; border-bottom: 1px solid var(--line); }.baki-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }.baki-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; }.baki-form input { min-height: 44px; padding: 8px; }.draft-note { white-space: pre-wrap; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.baki-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.baki-controls button { min-height: 44px; }
.baki-controls .is-active { border-color: var(--accent); background: var(--accent-wash); }
.persona-shop-books { margin: 12px 0; }
@media (max-width: 320px) { .baki-row { grid-template-columns: minmax(0, 1fr) auto; } .baki-row strong, .baki-row small { overflow-wrap: anywhere; } }
/* --- S1 polish (Cline): baki book · decision journal · More · follow-ups --------------------
   P08, P09 and P10 build these screens in this slice. The rules are anchored to the section ids
   those packets name, so they hold whatever class names a screen chooses, and they carry only the
   cross-cutting polish the spec asks of every new screen:
     F1  44 px targets, a visible focus ring, no horizontal scroll at 320 px
     E1  lateness is a word *and* a colour, never colour alone
     E5  a list shows its rows and then one full-width "show more"
     E6  the two books keep their totals line in front of the reader
     F6  no clipping at 130 % font size (nothing has a fixed height; everything wraps)
     G1  the privacy sentence keeps its weight on every surface that stores something
   The class rules are wrapped in :where(...) so they have zero specificity: they are fallbacks
   only, and a packet's own .book-row / .more-row rule always wins where it disagrees. */
#shop-baki, #shop-baki-detail, #shop-journal, #saved, #more, #more-shell, #follow-up-ask {
  min-width: 0; overflow-wrap: anywhere;
}
#shop-baki button, #shop-baki-detail button, #shop-journal button, #saved button,
#more button, #more label.file-btn, #more-shell button, #more-shell label.file-btn,
#follow-up-ask button { min-height: 44px; }
#shop-baki button:focus-visible, #shop-baki-detail button:focus-visible,
#shop-journal button:focus-visible, #saved button:focus-visible,
#more button:focus-visible, #more label.file-btn:focus-within,
#follow-up-ask button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

/* Baki book: one row per customer, nothing fixed, the words before the colour. */
:where(#shop-baki, #shop-baki-detail) ul,
:where(.baki-list, .book-list, .book-totals-list) {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
}
:where(.baki-row, .book-row) {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0;
  padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--card);
}
:where(.baki-total, .book-totals) {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px; margin: 0 0 12px; padding: 10px 12px; font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
:where(.book-chips, .chip-row, .baki-sort, .items-sort-controls) { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
/* Sort / tab chips (items list, baki list, stock tabs) look like the result card's .dc-chip-btn. */
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: inherit; font-size: 13px;
  line-height: 1.3; cursor: pointer; }
.chip:hover { border-color: var(--accent-line); }
.chip:focus-visible { outline: none; box-shadow: var(--focus); }
.chip.is-active { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); font-weight: 700; }
/* "Add an item" form (empty Items / ranker / stock screens) and the "+ Add another item" slot. */
.items-add-card { margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); }
.items-add-card h3 { color: var(--ink); font-size: 16px; }
.items-add-card .baki-form { margin-top: 8px; }
.items-add-card input { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--field); color: var(--ink); }
.items-add-card input:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.items-add-more { margin: 12px 0; }
.stock-row { cursor: default; gap: 6px; }
.stock-row label { display: flex; flex-direction: column; gap: 4px; width: 100%; font-size: 13.5px; font-weight: 600; }
.stock-row input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--field); color: var(--ink); }
.stock-row input[aria-invalid="true"] { border-color: var(--danger); }
:where(.book-late, .baki-late) { color: var(--warn); font-weight: 700; }
:where(.book-due, .baki-due) { color: var(--ink); font-weight: 700; }
:where(.book-settled, .baki-settled) { color: var(--muted); }

/* Decision journal: the saved list keeps the existing .hist-* rows, now on its own screen. */
:where(.hist-chip, .book-outcome, .fu-outcome) {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 12.5px; font-weight: 600;
}
#saved .hist-list, #shop-journal .hist-list { gap: 10px; }
#saved .hist-row, #shop-journal .hist-row { min-width: 0; }
#saved .hist-btns button, #shop-journal .hist-btns button,
#saved .hist-foot button, #shop-journal .hist-foot button { min-height: 44px; }
#saved .hist-filter input, #shop-journal .hist-filter input { min-height: 44px; }
#saved .hist-filter, #shop-journal .hist-filter { flex-wrap: wrap; gap: 8px; }

/* "Show more" (E5) and empty states (IA §6, E4): one full-width action, one sentence. */
:where(.show-more, .book-show-more, .hist-show-more) { width: 100%; min-height: 44px; margin: 12px 0 0; }
:where(.book-empty, .empty-state) { padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
:where(.book-empty, .empty-state) p { margin: 0 0 10px; color: var(--muted); }

/* Follow-up ask (P09): chips under the save line, never a modal, no red for "did not". */
#follow-up-ask { margin: 12px 0 0; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--sunk); }
#follow-up-ask p { margin: 0; }
:where(.fu-chips) { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
:where(.fu-card) { margin: 14px 0; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); }

/* More (P10): rows the owner reads, one tap each, and the privacy line keeps its weight. */
:where(.more-list) { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
:where(.more-row) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--sunk); }
:where(.more-row .more-val, .about-row .about-val) { overflow-wrap: anywhere; }
#more .privacy-note, #more-shell .privacy-note { font-size: 13px; line-height: 1.5; }

@media (max-width: 360px) {
  /* The one sticky line gives way at the narrowest width so nothing overlaps the tab bar. */
  :where(.baki-total, .book-totals) { position: static; }
}

/* --- S2 polish (Cline): item book · which items to keep · what was left ------------------------
   Fallbacks only, so the Cursor lane's own CSS always wins: every class rule uses :where() (zero
   specificity) and the id anchors are sections P12/P14/P16 already own. No fixed heights, so 130 %
   text stays unclipped; status is a word first, colour second; nothing overflows at 320 px. */

#shop-items, #shop-item, #shop-profit, #shop-pl, #margin-ranker, #ranker, #pl { min-width: 0; }
#shop-items button, #shop-item button, #shop-items a, #shop-item a,
#shop-profit button, #shop-pl button, #margin-ranker button, #ranker button { min-height: 44px; }
#shop-items input, #shop-item input, #shop-items select, #shop-item select,
#shop-profit input, #shop-profit select { min-height: 44px; }
#shop-items button:focus-visible, #shop-item button:focus-visible, #shop-items a:focus-visible,
#shop-item a:focus-visible, #shop-profit button:focus-visible, #shop-pl button:focus-visible,
#margin-ranker button:focus-visible, #ranker button:focus-visible,
#shop-items input:focus-visible, #shop-item input:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: 6px;
}

/* Item book (P12): one row per product, the words before the dot, nothing wider than the screen. */
:where(.items-list, .item-list) { display: flex; flex-direction: column; gap: 8px; }
:where(.items-row, .item-row) { min-width: 0; }
:where(.items-row-name, .item-row-name) { overflow-wrap: anywhere; }
:where(.items-row-sub, .item-row-sub, .item-words) { color: var(--muted); font-size: 13px; line-height: 1.45; }
:where(.items-total, .items-summary, .item-totals) {
  position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 14px; margin: 0 0 12px; padding: 10px 12px; font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
:where(.items-facts, .item-facts) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 10px 0; }
:where(.items-facts dt, .item-facts dt, .item-facts .fact-label) { color: var(--muted); min-width: 0; }
:where(.items-facts dd, .item-facts dd, .item-facts .fact-value) {
  margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric:tabular-nums;
}
:where(.items-versions, .item-versions, .cost-versions) { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
:where(.items-versions li, .item-versions li, .cost-versions li) {
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow-wrap: anywhere;
}
/* Re-check and sold marks: the word carries the meaning, the colour only backs it up. */
:where(.item-recheck, .items-recheck, .recheck-badge, .item-sold-mark) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--warn-line); background: var(--warn-wash); color: var(--ink);
  font-size: 12.5px; font-weight: 700;
}
:where(.items-links, .item-links) { list-style: none; margin: 10px 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
:where(.items-actions, .item-actions) { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* Pick-from-book sheet (P12): above the tab bar, whole panel reachable on a small phone. */
.dc-pick-sheet { z-index: 40; }
.dc-pick-sheet-panel { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)); }
.items-pick-list button, .items-pick-list .items-row { min-height: 44px; }
.dc-pick-sheet-panel input[type="search"] { width: 100%; min-height: 44px; font: inherit; }

/* Which items to keep (P14): a verdict group, the verdict word first, the reason under it. */
:where(.ranker-group, .mr-group, .verdict-group) { margin: 14px 0 0; }
:where(.ranker-list, .mr-list, .verdict-list) { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
:where(.ranker-row, .mr-row, .verdict-row) { min-width: 0; padding: 12px 14px; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); background: var(--card); }
:where(.ranker-verdict, .mr-verdict, .verdict-word) {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink);
  font-size: 12.5px; font-weight: 700;
}
:where(.ranker-reason, .mr-reason, .verdict-reason) { margin: 6px 0 0; color: var(--muted);
  font-size: 13px; line-height: 1.45; }
:where(.ranker-needs, .mr-needs, .verdict-needs) { color: var(--muted); }

/* What was left (P16/P20a): the estimate is a chip with a word in it, the drawer lists its rows. */
:where(.pl-estimate, .pl-estimate-chip, .estimate-chip, .pl-source-chip) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--warn-line); background: var(--warn-wash); color: var(--ink);
  font-size: 12.5px; font-weight: 700;
}
:where(.pl-confirmed, .pl-checked) { border-color: var(--line); background: var(--sunk); }
:where(.pl-rows, .pl-drawer, .pl-rows-used) { margin: 8px 0 0; padding: 10px 12px; list-style: none;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); font-size: 13px; }
:where(.pl-rows li, .pl-drawer li, .pl-rows-used li) { padding: 4px 0; overflow-wrap: anywhere; }
:where(.pl-vs, .pl-compare-line) { margin: 6px 0 0; font-weight: 700; }
:where(.pl-cash-line, .pl-honest) { color: var(--muted); font-size: 13px; line-height: 1.5; }
:where(.pl-waterfall, .waterfall) { display: block; max-width: 100%; height: auto; margin: 10px 0; }
:where(.pl-waterfall-text, .waterfall-text) { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
:where(.week-period-close, .period-close-row) { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk); }
:where(.week-period-close button, .period-close-row button) { min-height: 44px; }

@media (max-width: 400px) {
  :where(.items-actions, .item-actions, .pl-actions, .ranker-actions) button { width: 100%; }
}
@media (max-width: 360px) {
  /* The item totals give way at the narrowest width, exactly like the baki total. */
  :where(.items-total, .items-summary, .item-totals) { position: static; }
}

/* P18: printable monthly report and baki statements */
.dc-report-block { margin: 16px 0; }
.dc-report-link { display: inline-block; margin-top: 6px; }
.dc-report-picker { margin: 16px 0; }
.dc-report-picker input[type="month"] { min-height: 44px; font: inherit; }
.dc-report-picker input[type="month"] { width: 100%; box-sizing: border-box; padding: .65rem; border: 1px solid #b8c4c2; border-radius: .6rem; }
.dc-report-footer { margin-top: 24px; color: var(--muted); font-size: 13px; }
.print-only { display: none; }

/* --- S3 polish (Cline): job book · which items to buy · the file you print ---------------------
   Fallbacks only, so the Cursor/Codex/Claude lanes' own CSS always wins: every class rule uses
   :where() (zero specificity) and the id anchors are the sections P15/P17/P18 own. No fixed
   heights, so 130 % text stays unclipped; a status is a word first and a colour second; the print
   block is additive and hides only chrome nobody wants on paper. */

#shop-jobs, #shop-job, #job, #reorder-point, #purchase-planner, #planner, #stock-plan,
#decide-reorder-point, #decide-purchase-planner, #shop-report, #more-report, #report,
#statement { min-width: 0; }
#shop-jobs button, #shop-job button, #shop-jobs a, #shop-job a, #shop-jobs input, #shop-job input,
#shop-jobs select, #shop-job select, #reorder-point button, #purchase-planner button,
#planner button, #stock-plan button, #planner input, #reorder-point input, #purchase-planner input,
#stock-plan input, #planner select, #stock-plan select, #shop-report button, #more-report button,
#report button, #statement button { min-height: 44px; }
#shop-jobs button:focus-visible, #shop-job button:focus-visible, #shop-jobs a:focus-visible,
#shop-job a:focus-visible, #shop-jobs input:focus-visible, #shop-job input:focus-visible,
#reorder-point button:focus-visible, #purchase-planner button:focus-visible,
#planner button:focus-visible, #stock-plan button:focus-visible, #planner input:focus-visible,
#stock-plan input:focus-visible, #shop-report button:focus-visible, #more-report button:focus-visible,
#report button:focus-visible, #statement button:focus-visible {
  outline: none; box-shadow: var(--focus); border-radius: 6px;
}

/* Job book (P15): one row per job, the status word before the delivery words, nothing wider than
   the screen, and the money in plain rows the owner can read out loud. */
:where(.jobs-list, .job-list) { display: flex; flex-direction: column; gap: 8px; list-style: none;
  margin: 10px 0; padding: 0; }
:where(.jobs-row, .job-row, .job-card) { min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); }
:where(.jobs-row-name, .job-row-name, .job-title) { overflow-wrap: anywhere; font-weight: 700; }
:where(.jobs-row-sub, .job-row-sub, .job-words, .job-sub) { color: var(--muted); font-size: 13px; line-height: 1.45; }
:where(.job-status, .jobs-status, .job-state, .job-chip) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink);
  font-size: 12.5px; font-weight: 700;
}
:where(.job-status.is-soon, .job-due-soon, .job-status-soon) { border-color: var(--warn-line); background: var(--warn-wash); }
:where(.job-money, .job-amounts, .job-balance-rows, .job-facts) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin: 10px 0;
}
:where(.job-money dt, .job-amounts dt, .job-balance-rows dt, .job-facts dt, .job-facts .fact-label) {
  color: var(--muted); min-width: 0;
}
:where(.job-money dd, .job-amounts dd, .job-balance-rows dd, .job-facts dd) { margin: 0; overflow-wrap: anywhere; }
:where(.job-money dd, .job-amounts dd, .job-balance-rows dd) { font-variant-numeric:tabular-nums; }
:where(.job-floor, .job-never-below, .job-minimum) { margin: 6px 0 0; font-weight: 700; }
:where(.job-actions, .jobs-actions, .job-buttons) { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
:where(.job-totals, .jobs-total) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 0 0 12px; padding: 10px 12px; font-weight: 700; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); }

/* Which items to buy (P17): the flag is a word in a chip, the weekly figure is the owner's own
   typed number, and an item with no figure is never flagged. */
:where(.stock-rows, .reorder-rows, .planner-rows, .buy-list) { display: flex; flex-direction: column; gap: 8px;
  list-style: none; margin: 10px 0; padding: 0; }
:where(.stock-row, .reorder-row, .planner-row, .buy-row) { min-width: 0; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); }
:where(.stock-flag, .buy-soon, .stock-chip, .stock-state, .stock-verdict) {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--sunk); color: var(--ink);
  font-size: 12.5px; font-weight: 700;
}
:where(.stock-needs, .needs-figure, .stock-data-problem, .stock-wrong) {
  border-color: var(--warn-line); background: var(--warn-wash);
}
:where(.stock-words, .stock-reason, .stock-sub) { margin: 6px 0 0; color: var(--muted); font-size: 13px;
  line-height: 1.45; }
:where(.stock-estimate, .stock-estimate-field, .weekly-estimate) { display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px; }
:where(.stock-estimate input, .stock-estimate-field input, .weekly-estimate input) {
  width: 7rem; min-height: 44px; font: inherit;
}
:where(.stock-plan-note, .planner-note, .stock-simple-note) { color: var(--muted); font-size: 13px; line-height: 1.5; }
:where(.stock-totals, .planner-totals) { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 6px 14px; margin: 0 0 12px; padding: 10px 12px; font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
:where(.stock-actions, .planner-actions, .reorder-actions) { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* The monthly page and the files (P18): one column on screen, one line per row, and the words for
   "made on this phone" keep their weight. Printing stays free — nothing here is gated. */
:where(.report-sheet, .report-page, .report) { max-width: 100%; overflow-wrap: anywhere; }
:where(.report-head, .report-foot, .report-made) { margin: 10px 0; }
:where(.report-foot, .report-made, .report-note) { color: var(--muted); font-size: 13px; line-height: 1.5; }
:where(.report-rows, .report-list) { list-style: none; margin: 10px 0; padding: 0; }
:where(.report-rows li, .report-row) { padding: 6px 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
:where(.report-rows li:last-child, .report-row:last-child) { border-bottom: 0; }
:where(.report-actions, .report-buttons, .more-file-rows, .file-rows) { display: flex; flex-wrap: wrap;
  gap: 8px; margin: 12px 0; }

@media (max-width: 400px) {
  :where(.report-actions, .report-buttons, .more-file-rows, .file-rows,
    .job-actions, .jobs-actions, .stock-actions, .planner-actions) button { width: 100%; }
}
@media (max-width: 360px) {
  /* The job and stock totals give way at the narrowest width, exactly like the baki and item ones. */
  :where(.job-totals, .jobs-total, .stock-totals, .planner-totals) { position: static; }
}

/* The printed page (P18): chrome off, ink on white, one row that never splits across pages. */
@media print {
  #tabs, .tab-bar, .topbar, .update-bar, #update-bar, #offline-line, #storage-warn, #lifecycle-notice, .toast, .skip-link,
  :where(.no-print, .print-hide, .report-actions, .report-buttons, .job-actions, .stock-actions) {
    display: none !important;
  }
  html, body, .shell, main, .panel { background: #fff !important; color: #000 !important; }
  .dc-answer-head.dc-answer-hero {
    background: #fff !important; color: #000 !important; border: 1px solid #000 !important;
  }
  .dc-answer-head.dc-answer-hero .dc-answer-big,
  .dc-answer-head.dc-answer-hero .dc-answer-status,
  .dc-answer-head.dc-answer-hero .dc-answer-line { color: #000 !important; }
  [data-theme="cream"] :is(.panel, .tool-card, .shop-hub-card, .today-card, .items-add-card),
  .theme-cream :is(.panel, .tool-card, .shop-hub-card, .today-card, .items-add-card) {
    border-top-width:1px !important; border-top-color:#000 !important;
  }
  body { font-size: 12pt; }
  .shell, main { max-width: none; margin: 0; padding: 0; }
  :where(.report-sheet, .report-page, .report, #report, #statement) {
    margin: 12mm 10mm; padding: 0; border: 0; box-shadow: none;
  }
  :where(.report-rows li, .report-row, .baki-row, .jobs-row, .job-row, .stock-row, .items-row) {
    break-inside: avoid; page-break-inside: avoid;
  }
  :where(.report-foot, .report-made) { margin-top: 8mm; }
  a[href]::after { content: ''; }
  body.dc-printing #tabs,
  body.dc-printing .tab-bar,
  body.dc-printing .no-print,
  body.dc-printing main > section:not(.dc-print-root):not(#report) { display: none !important; }
  body.dc-printing main,
  body.dc-printing #report,
  body.dc-printing #dc-print-root,
  body.dc-printing .dc-print-root { display: block !important; visibility: visible !important; }
  body.dc-printing .dc-report-footer,
  body.dc-printing .print-only { display: block !important; }
  body.dc-printing button,
  body.dc-printing .link-button { display: none !important; }
  @page { margin: 14mm; }
}

/* Optional "join our list" ask (after a first result) and its permanent More row. */
.lead-ask { margin: 14px 0 0; padding: 13px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--sunk); min-width: 0; overflow-wrap: anywhere; }
.lead-ask[hidden], #more-join[hidden] { display: none; }
.lead-ask p { margin: 0 0 6px; }
.lead-ask-title { font-weight: 700; }
.lead-ask .secondary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lead-ask a.btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-decoration: none; width: auto; }
.lead-ask button { min-height: 44px; }
a.more-row-btn { text-decoration: none; color: inherit; box-sizing: border-box; }
#more-join .more-row-btn { margin: 0 0 6px; }
#more-join .hist-note { margin: 0; }
/* Optional sample shop: Today first-run card + More row (link to demo/index.html). */
#more-sample[hidden] { display: none; }
#more-sample .more-row-btn { margin: 0 0 6px; }
#more-sample .hist-note { margin: 0; }
.sample-card h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.sample-card .panel-hint { margin: 0 0 10px; }
.sample-card a.sample-go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  text-decoration: none; background: var(--card); color: var(--accent); border-color: var(--accent-line); }
.first-steps-mini { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunk); }
.first-steps-mini ol { margin: 8px 0 0; padding-left: 1.3em; }
.first-steps-mini li + li { margin-top: 4px; }

/* N5: optional voice entry (only drawn where the browser supports speech). */
.voice-wrap { display: flex; align-items: center; gap: 6px; width: 100%; }
.voice-wrap > input { flex: 1 1 auto; min-width: 0; }
.voice-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: var(--sunk); color: var(--accent); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.voice-mic:hover { border-color: var(--accent-line); }
.voice-mic:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.voice-panel { margin: 8px 0 4px; padding: 10px 12px; border: 1px dashed var(--accent-line); border-radius: var(--radius-sm);
  background: var(--accent-wash); font-weight: 400; }
.voice-panel p { margin: 0 0 8px; }
.voice-heard { font-weight: 700; }
.voice-note { color: var(--muted); font-size: 13.5px; }
.voice-edit { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.voice-edit input { min-height: 44px; padding: 8px; font: inherit; }
.voice-alts, .voice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }

/* N6: the unit an item is kept in. */
.unit-panel { margin: 12px 0; padding: 12px 14px; }
.unit-panel h3 { color: var(--ink); margin-bottom: 4px; }
.unit-change label, .unit-quick label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-weight: 700; }
.unit-panel select, .unit-quick input, .items-add-form select { min-height: 44px; padding: 6px 8px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.unit-quick input { width: 8em; }
.unit-choice { font-weight: 400 !important; align-items: flex-start !important; flex-wrap: nowrap !important; }
.unit-choice input { flex: none; margin-top: 4px; }
.unit-changes { margin: 4px 0 8px 1.6em; padding: 0; }
.unit-changes li { margin: 2px 0; }
.unit-warning { color: var(--ink); border-left: 3px solid var(--accent); padding-left: 8px; }
.unit-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.unit-quick-out { font-weight: 700; margin: 4px 0 0; }

/* N3: before and after, inside a saved decision. */
.before-after-card .hist-body { margin: 2px 0; }

.bulk-input { box-sizing: border-box; width: 100%; min-height: 140px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); resize: vertical; }
.bulk-review { margin-top: 12px; }
.bulk-table-wrap { max-width: 100%; overflow-x: auto; }
.bulk-table, .price-sheet-table { width: 100%; border-collapse: collapse; }
.bulk-table th, .bulk-table td, .price-sheet-table th, .price-sheet-table td {
  padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: left; }
.bulk-confirm { display: block; margin-top: 4px; }
.bulk-confirm input { margin-right: 5px; }
.draft-note a.btn-secondary { display: inline-flex; margin: 6px 0; }
.season-card p { margin-bottom: 0; }
@media print {
  .dc-price-sheet { margin: 0; }
  .dc-price-sheet h2 { margin: 0 0 5mm; }
  .dc-price-sheet .price-sheet-table { font-size: 10pt; }
  .dc-price-sheet th, .dc-price-sheet td { padding: 2mm 1mm; }
  .dc-price-sheet tr { break-inside: avoid; }
  .dc-price-sheet .price-sheet-note { font-size: 9pt; margin: 3mm 0; }
  @page { size: A4 portrait; margin: 12mm; }
}

/* «কোন খাতে কত থাকে» (branch-profitability) */
.hands-form { margin-top: 10px; }
.hands-rowbox { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); padding: 4px 12px 8px; margin: 12px 0; min-width: 0; }
.hands-rowbox legend { font-weight: 700; padding: 0 6px; }
.hands-remove { float: right; }
.hands-hint { margin: 4px 0 0; }
.hands-field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.hands-out { margin-top: 18px; }
.hands-h { margin: 16px 0 6px; color: var(--ink); }
.hands-result, .hands-action { font-weight: 600; }
.hands-row, .hands-total { border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); padding: 10px 14px; margin: 10px 0; }
.hands-row p, .hands-total p { margin: 3px 0; }
.hands-row.is-loss { border-color: var(--loss); }
.hands-kept { font-size: 18px; font-weight: 800; font-variant-numeric:tabular-nums; }
.hands-row.is-loss .hands-kept { color:var(--loss); }
.hands-flag { color: var(--warn); font-size: 14px; }
.hands-total-line.is-final { font-weight: 800; font-size: 17px; font-variant-numeric:tabular-nums; }
.hands-status-urgent .hands-total { border-color: var(--danger); }
.hands-next, .hands-save { margin-top: 10px; }
.hands-next { display: flex; width: 100%; justify-content: center; }

/* Goal, teaching and optional selling-place forms share the shell's touch sizing. */
:where(.dc-goals, #shop-teaching-root, #shop-service-root, .dc-retail-settings) form {
  display: grid; gap: 12px; margin: 12px 0 20px;
}
:where(.dc-goals, #shop-teaching-root, #shop-service-root, .dc-retail-settings) label {
  display: flex; flex-direction: column; gap: 6px; margin: 8px 0; font-weight: 600;
}
:where(.dc-goals, #shop-teaching-root, #shop-service-root, .dc-retail-settings) input:not([type=radio]),
:where(.dc-goals, #shop-teaching-root, #shop-service-root, .dc-retail-settings) select {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font: inherit;
}
:where(.dc-goals, #shop-teaching-root, #shop-service-root, .dc-retail-settings) button { min-height: 44px; }
#shop-teaching-root > section { border-top: 1px solid var(--line); padding: 12px 0; }
.dc-retail-settings { margin-top: 20px; }
.dc-retail-settings fieldset label { flex-direction: row; align-items: center; }
.dc-retail-place-list[hidden], .dc-retail-settings button[hidden] { display: none; }
.dc-goals-result li { margin: 12px 0; }

/* ---------- UX pass 3 (2026-10-02): tap targets, storage line, hierarchy ---------- */
/* Storage warning: always visible at the top, never only a status that scrolls away. */
.lifecycle-notice { padding:12px 14px; font-size:16px; font-weight:700; text-align:center; line-height:1.4;
  background:var(--warn-bg, #fdecdc); color:var(--ink); border-bottom:1px solid var(--line); }
.lifecycle-notice[hidden] { display:none; }
.storage-warn { padding:10px 14px; font-size:14px; font-weight:700; text-align:center;
  background:var(--warn-wash); color:var(--warn); border-bottom:2px solid var(--warn-line); }
.storage-warn[hidden] { display:none; }
.storage-warn.is-full, .storage-warn.is-unavailable { color:var(--danger); border-bottom-color:var(--danger); }
.storage-warn .link-button { padding:8px 6px; margin-left:4px; color:inherit; }
/* Every small control a thumb must hit is at least 44 x 44 CSS px. */
.prefill-chip button { min-width:44px; min-height:44px; font-size:16px; }
.remember-row { min-height:44px; cursor:pointer; }
.remember-row input, .pl-check input { width:22px; height:22px; }
.theme-switch button { min-width:44px; }
summary { min-height:44px; padding-top:10px; padding-bottom:10px; cursor:pointer; }
.hist-filter select, #shop-journal select { min-height:44px; }
.link-button { min-width:44px; }
/* Monthly money form: tick rows are whole-row tap targets with air between them. */
.pl-check { display:flex; align-items:center; gap:10px; min-height:44px; margin:6px 0; cursor:pointer; }
.pl-helpers { display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.pl-profit-form [aria-invalid="true"], .baki-form [aria-invalid="true"] { border-color:var(--danger); box-shadow:0 0 0 1px var(--danger); }
/* Result: the keep/save row sits in view under the answer, not only inside "More options". */
.result-keep { display:flex; flex-direction:column; gap:8px; margin:12px 0 4px; }
.result-keep[hidden] { display:none; }
.result-keep button { width:100%; min-height:48px; }
/* Destructive actions sit apart from everyday ones and read as dangerous. */
.danger-zone { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; padding-top:14px; border-top:1px dashed var(--line); }
.danger-zone .btn-danger { background:transparent; border:1px solid var(--danger); color:var(--danger);
  border-radius:var(--radius-sm); min-height:44px; padding:8px 14px; font:inherit; font-weight:700; cursor:pointer; }
.baki-actions .btn-primary { min-height:48px; }
/* Phone keyboard open (short viewport + a typing field focused): hide the bottom tabs so they
   do not sit on top of the box being typed into. They come back when typing ends. */
body.dc-typing .tab-bar { display:none !important; }
/* Today: the one step to do now stands out; later steps are quieter. */
.first-step.is-now { border:2px solid var(--accent); background:var(--accent-wash); min-height:44px; }
.customer-list, .customer-lens-tabs { display: grid; grid-template-columns: 1fr; gap: .65rem; min-width: 0; }
.customer-lens-tabs a, .customer-list a, #shop-customers-root button, #shop-customers-root input { min-height: 44px; box-sizing: border-box; max-width: 100%; }
#shop-customers-root { overflow-wrap: anywhere; min-width: 0; }
#shop-customers-root a, #shop-customers-root label { display: block; margin: .5rem 0; }
#shop-customers-root input, #shop-customers-root select { width: 100%; min-height: 44px; box-sizing: border-box; }
#shop-customers-root .customer-lens-tabs { grid-template-columns: 1fr; }
#shop-customers-root .baki-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
#shop-customers-root .baki-controls .chip { min-height: 32px; display: inline-flex; align-items: center; }
#shop-customers-root .book-card { margin: .75rem 0; padding: .75rem; }
#shop-customers-root .btn-primary, #shop-customers-root .btn-secondary, #shop-customers-root .link-button { min-height: 44px; box-sizing: border-box; }

/* S5 online orders: compact phone-first cards and readable date controls. */
#shop-orders-root { min-width: 0; overflow-wrap: anywhere; }
#shop-orders-root .book-card { margin: .75rem 0; padding: .75rem; }
#shop-orders-root .baki-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
#shop-orders-root .baki-controls .chip { min-height: 32px; display: inline-flex; align-items: center; }
#shop-orders-root button, #shop-orders-root a, #shop-orders-root input, #shop-orders-root select { box-sizing: border-box; max-width: 100%; min-height: 44px; }
#shop-orders-root input, #shop-orders-root select { width: 100%; }
#shop-orders-root .btn-primary, #shop-orders-root .btn-secondary, #shop-orders-root .link-button { min-height: 44px; }

.affix-wrap:has(.voice-mic) .sign-toggle { right:54px; }
/* Same move without :has() (older Android WebViews drop the rule above): the mic's wrapper sits right before ±. */
.affix-wrap .voice-wrap + .sign-toggle { right:54px; }
#shop-staff-root { min-width:0; overflow-wrap:anywhere; }
#shop-staff-root input, #shop-staff-root select, #shop-staff-root button { box-sizing:border-box; max-width:100%; min-height:44px; font:inherit; }
#shop-ops-root input, #shop-ops-root select, #shop-ops-root button { box-sizing:border-box; max-width:100%; min-height:44px; font:inherit; }
#shop-ops-root input, #shop-ops-root select { width:100%; padding:8px; }
#shop-ops-root .ops-row { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin:8px 0; }
#shop-ops-root .ops-field { display:flex; flex-direction:column; gap:4px; min-width:8em; flex:1; }
#shop-ops-root .ops-check { display:flex; align-items:center; gap:8px; min-height:44px; }
#shop-staff-root input, #shop-staff-root select { width:100%; padding:8px; }
#shop-staff-root form { display:flex; flex-direction:column; gap:12px; }
.t-example { color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.4; margin: 4px 0 0; }
.tool-question-group > .group-example { margin: -2px 0 8px; }

/* Phase 0: persona dropdown. 16px font stops iOS zoom; 48px tall; never wider than the screen. */
.picker-select-wrap { margin: 0 0 12px; }
.picker-select-label { display:block; font-weight:700; margin:0 0 4px; }
.picker-select-example { margin:0 0 8px; }
.picker-select { display:block; width:100%; max-width:100%; box-sizing:border-box; min-height:48px;
  font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--sunk); color:var(--ink); }
.picker-select:focus-visible { outline:none; box-shadow:var(--focus); border-color:var(--accent); }
.picker-continue { display:block; width:100%; min-height:48px; margin-top:12px; }
.picker-continue:disabled { opacity:.55; cursor:not-allowed; }

/* Spot illustrations: decorative, calm, never inside forms or results. */
.art { display:block; max-width:100%; height:auto; margin:0 auto 12px; }
.art-welcome { max-height:150px; }
.art-today { max-height:96px; margin-bottom:8px; }
.art-empty { max-height:120px; }
.art-offline { display:inline-block; width:53px; height:auto; margin:0 8px 0 0; vertical-align:middle; }
.art-plans { max-height:96px; }
.art-group { max-height:72px; margin:0 0 6px 0; }
@media print { .art { display:none; } }

/* Persona pictures. Colours come from the theme tokens so cream, light and black stay in step.
   A stripe or a written word carries the meaning; colour is not the only cue. */
.charts-block { margin: 12px 0 8px; min-width: 0; }
.charts-title { font-size: 18px; margin: 0 0 6px; color: var(--ink); }
.charts-sample {
  margin: 0 0 10px; padding: 8px 10px; font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--warn); background: var(--warn-wash); border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
}
.chart-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 12px; margin: 0 0 10px; min-width: 0; overflow: hidden;
}
.chart-card.is-sample { background: var(--sunk); }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.chart-head h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.chart-badge {
  flex: none; font-size: 12px; font-weight: 800; color: var(--warn);
  background: var(--warn-wash); border: 1px solid var(--warn-line); border-radius: 999px; padding: 2px 8px;
}
.chart-note { margin: 4px 0 8px; color: var(--muted); font-size: 13px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: inherit; }
.chart .axis { font-size: 11px; fill: var(--muted); }
.chart .val { font-size: 11px; font-weight: 700; fill: var(--ink); }
.chart .base { stroke: var(--line); stroke-width: 1; }
.chart .zero { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .fill-sales, .chart-legend .key.sales { background: var(--profit); fill: var(--profit); }
.chart .fill-spend, .chart-legend .key.spend { fill: var(--gold); }
.chart .fill-loss, .chart-legend .key.loss { fill: var(--loss); }
.chart .fill-bar { fill: var(--ink); }
.chart .fill-slow { fill: var(--loss); }
.chart .hatch-line { stroke: var(--card); stroke-width: 1.25; fill: none; }
.chart .is-open { stroke: var(--ink); stroke-width: 1.5; }
.chart .line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-in { stroke: var(--profit); stroke-width: 2.25; }
.chart .line-out { stroke: var(--chart-out); stroke-width: 2.25; stroke-dasharray: 5 3; }
.chart .line-cash { stroke: var(--ink); stroke-width: 2.25; }
.chart .dot-in { fill: var(--profit); }
.chart .dot-out { fill: var(--chart-out); stroke: var(--ink); stroke-width: 1; }
.chart .dot-cash { fill: var(--ink); }
.chart .empty-note { font-size: 13px; fill: var(--muted); }
.chart-legend .key.in { background: var(--profit); }
.chart-legend .key.out { background: var(--chart-out); background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, var(--card) 2px, var(--card) 3px); }
.chart-legend .key.cash { background: var(--ink); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .key { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.chart-legend .key.sales { background: var(--profit); }
.chart-legend .key.spend { background: var(--gold); background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, var(--card) 2px, var(--card) 3px); }
.chart-legend .key.loss { background: var(--loss); background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, var(--card) 2px, var(--card) 3px); }
.chart-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chart-table { margin-top: 6px; }
.chart-table summary { cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.chart-table summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.chart-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chart-table td { text-align: start; padding: 6px 4px; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.chart-table td.num { text-align: end; white-space: nowrap; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; margin: 0 0 8px; }
.hbar-name { overflow-wrap: anywhere; font-size: 14px; }
.hbar-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.hbar-track { grid-column: 1 / -1; height: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--ink); border-radius: 999px; }
.hbar-fill.is-slow { background: var(--loss); background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, var(--card) 2px, var(--card) 3px); }
.stack { display: flex; height: 16px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.stack-seg { min-width: 4px; }
.stack-seg.seg-0 { background: var(--profit); }
.stack-seg.seg-1 { background: var(--gold); }
.stack-seg.seg-2 { background: var(--ink); }
.stack-seg.seg-3 { background: var(--loss); }
.chart-legend .key.seg-0 { background: var(--profit); }
.chart-legend .key.seg-1 { background: var(--gold); }
.chart-legend .key.seg-2 { background: var(--ink); }
.chart-legend .key.seg-3 { background: var(--loss); }
.meter-track { height: 14px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.meter-fill { height: 100%; background: var(--profit); }
.meter-fill.is-bad { background: var(--loss); background-image: repeating-linear-gradient(135deg, transparent, transparent 2px, var(--card) 2px, var(--card) 3px); }
.meter-line { margin: 6px 0 0; font-weight: 800; }
.info-screen { max-width: 100%; min-width: 0; color: var(--ink); }
.info-title { font-size: 18px; margin: 0 0 8px; color: var(--ink); }
.info-toggle {
  min-height: 44px; margin: 0 0 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer;
}
.info-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.info-sample { margin: 0 0 10px; }
.info-rule { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.info-empty { margin: 8px 0; color: var(--muted); }
.info-lines { margin: 8px 0 0; padding-left: 18px; }
.info-bar { height: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 0 0 8px; }
.info-bar-fill { display: block; height: 100%; background: var(--ink); }
.info-share, .info-progress {
  width: 88px; height: 88px; max-width: 100%; border-radius: 50%; margin: 4px 0 8px;
}
.info-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.info-compare-col p { margin: 0 0 4px; font-weight: 700; overflow-wrap: anywhere; }
.info-progress-line { font-weight: 800; margin: 0; }
.info-legend { list-style: none; padding-left: 0; }
.info-legend li { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.info-swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 3px; }
[data-theme="cream"] .info-screen, .info-theme-cream { --share-0: var(--profit); --share-1: var(--warn); --share-2: var(--ink); --share-3: var(--loss); }
[data-theme="light"] .info-screen, .info-theme-light { --share-0: var(--profit); --share-1: var(--warn); --share-2: var(--ink); --share-3: var(--loss); }
[data-theme="black"] .info-screen, .info-theme-black { --share-0: var(--profit); --share-1: var(--gold); --share-2: var(--ink); --share-3: var(--loss); }
@media (max-width: 390px) {
  .info-screen { max-width: 100%; }
  .info-compare { grid-template-columns: 1fr; }
  .tab-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .chart, .chart *, .hbar-fill, .meter-fill, .stack-seg, .info-bar-fill { animation: none !important; transition: none !important; }
}

/* POLISH — P1 motion, press, toast, offline chip.
   Opacity and transform only (the tick stroke is the one named exception). Max 200ms. ease-out.
   No looping animation. The offline illustration stays; only the warning colours change. */
@keyframes dc-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
#main > .enter { animation: dc-in 160ms ease-out both; }

@keyframes dc-chip-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
#offline-line.dc-chip-in { animation: dc-chip-in 160ms ease-out both; }
#offline-line.offline-line {
  background: var(--sunk);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
#offline-line.is-back { background: var(--card); color: var(--ink); }

details[open] > *:not(summary) { animation: dc-in 140ms ease-out both; }

.btn-primary,
.btn-secondary,
.tab-btn,
.tool-card,
.more-row-btn,
.persona-btn,
#tool-form button[type="submit"],
#diagnostic-form button[type="submit"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 120ms ease-out, filter 120ms ease-out;
}
.persona-btn {
  transition: border-color 120ms ease-out, background 120ms ease-out, transform 120ms ease-out, filter 120ms ease-out;
}
.btn-primary:active,
.btn-secondary:active,
.tab-btn:active,
.tool-card:active,
.more-row-btn:active,
.persona-btn:active,
#tool-form button[type="submit"]:active,
#diagnostic-form button[type="submit"]:active {
  transform: scale(0.98);
  filter: brightness(0.96);
  transition-duration: 80ms;
}
.btn-primary:disabled:active,
.btn-secondary:disabled:active,
.tab-btn:disabled:active,
.tool-card:disabled:active,
.more-row-btn:disabled:active,
.persona-btn:disabled:active,
#tool-form button[type="submit"]:disabled:active,
#diagnostic-form button[type="submit"]:disabled:active,
.btn-primary[disabled]:active,
.btn-secondary[disabled]:active,
.tab-btn[disabled]:active,
.more-row-btn[disabled]:active,
.persona-btn[disabled]:active {
  transform: none;
  filter: none;
}

.tab-btn.is-active::before,
.tab-btn[aria-current="page"]::before {
  transform-origin: center top;
  animation: dc-tab 120ms ease-out both;
}
@keyframes dc-tab {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.tab-btn.is-active .tab-icon,
.tab-btn[aria-current="page"] .tab-icon { transform: translateY(-1px); }

#dc-toast {
  position: fixed;
  z-index: 30;
  left: 12px;
  right: 12px;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  padding: 8px 10px 8px 12px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
#dc-toast.is-in,
#dc-toast.is-on {
  opacity: 1;
  transform: none;
  pointer-events: none;
}
#dc-toast.is-error.is-in,
#dc-toast.is-error.is-on { pointer-events: auto; }
#dc-toast.is-in { animation: dc-toast-in 160ms ease-out both; }
#dc-toast.is-out {
  pointer-events: none;
  animation: dc-toast-out 120ms ease-out both;
}
#dc-toast.is-error { border-color: var(--loss); }
@keyframes dc-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes dc-toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px); }
}
.dc-toast-tick { flex: none; color: var(--profit); }
.dc-toast-tick path {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
  animation: dc-tick 180ms ease-out;
}
@keyframes dc-tick {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}
.dc-toast-text { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.dc-toast-close {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sunk);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
@media print { #dc-toast { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
html.no-anim, html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
#welcome .welcome-big{font-size:1.3rem;font-weight:700;line-height:1.5;margin:8px 0 16px}
#welcome #welcome-go{width:100%;min-height:52px;font-size:1.1rem}
#welcome #welcome-hint{margin-top:16px}

/* Light ERP book home: large Bangla buttons. Kept above the v2 block so the old screens stay unchanged. */
.light-erp-home { margin: 0 0 8px; }
.light-erp-home h2 { font-size: 1.35rem; margin: 0 0 4px; }
.light-erp-note { margin: 0 0 8px; font-size: 1rem; }
.light-erp-btn {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  width: 100%; min-height: 72px; margin: 8px 0; padding: 14px 16px;
  font-size: 1.35rem; font-weight: 800; text-align: left; line-height: 1.2;
  border-radius: 16px; border: 2px solid var(--line, #d8c9a8);
  background: var(--accent, #c4a35a); color: var(--ink, #1c1408);
}
.light-erp-btn small { display: block; margin-top: 4px; font-size: 1rem; font-weight: 600; }
.light-erp-more {
  display: flex; align-items: center; width: 100%; min-height: 56px; margin: 4px 0 8px;
  padding: 12px 16px; font-size: 1.15rem; font-weight: 800; text-align: left;
  border-radius: 14px; border: 2px solid var(--line, #d8c9a8); background: var(--card, #fff);
  color: var(--ink, #1c1408);
}
.light-erp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; font-size: 1.1rem; }
.light-erp-toggle { min-height: 48px; padding: 8px 14px; font-size: 1rem; font-weight: 700; border-radius: 12px; }

/* v2 animations (used only by html.ui-v2 rules below; kept above the scoped block) */
@keyframes v2-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes v2-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v2-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-sheet { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* =====================================================================================================
   New first-run look (v2). EVERYTHING below is scoped under html.ui-v2, so with the switch off the old
   screens do not change by one pixel. Sizes follow docs/ux/redesign/PHASE1_BUILD_BRIEF.md section 5; colours
   are the existing theme variables only (the owner's mockup colours later change variables, not this block).
   ===================================================================================================== */
html.ui-v2 {
  --v2-card-radius: 20px;
  --v2-btn-radius: 14px;
  --v2-band: var(--sunk);
  --v2-pale: var(--sunk);
  --v2-ok: var(--profit);
  --v2-ok-wash: var(--profit-wash);
  --v2-stamp: var(--gold-wash);
  --v2-stamp-ink: var(--warn);
}

/* ---------- 4-tab bar: 64px, tabs >= 80px wide at 320, icon 24px, label 14px, 4px gold line above the active tab ---------- */
html.ui-v2 .shell { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
html.ui-v2 .tab-bar {
  min-height: 64px; padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
html.ui-v2 .tab-btn {
  min-width: 80px; min-height: 56px; padding: 6px 2px 4px; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--muted); border-radius: 0;
}
html.ui-v2 .tab-btn[hidden] { display: none; }
html.ui-v2 .tab-btn.is-active, html.ui-v2 .tab-btn[aria-current="page"] { background: transparent; color: var(--accent); }
html.ui-v2 .tab-btn.is-active::before, html.ui-v2 .tab-btn[aria-current="page"]::before {
  top: -4px; left: 14%; right: 14%; height: 4px; border-radius: 0 0 4px 4px; background: var(--gold);
}
html.ui-v2 .tab-icon { width: 24px; height: 24px; margin: 0 auto 2px; }
html.ui-v2 .tab-label { font-size: 14px; line-height: 1.2; }
html.ui-v2 .tab-btn.is-active .tab-label, html.ui-v2 .tab-btn[aria-current="page"] .tab-label { font-weight: 800; }

/* The one door to the charts from Today and from Books (the 5th tab is gone). */
.v2-door { display: none; }
html.ui-v2 .v2-door {
  display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 12px 0 0; padding: 8px 14px;
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 17px;
  border: 1px solid var(--line); border-radius: var(--v2-btn-radius);
}
html.ui-v2 .v2-door .v2-door-name { flex: 1 1 auto; }
html.ui-v2 .v2-door .v2-ico { color: var(--accent); display: inline-flex; }
html.ui-v2 .v2-door:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- top bar: 56px, "?" and EN as 48x48 targets (the visible shape is smaller) ---------- */
html.ui-v2 .topbar {
  min-height: 56px; padding: 4px 8px 4px 16px; margin: -14px calc(-1 * var(--space-4)) 8px;
  background: var(--v2-band); color: var(--ink); border-bottom: 1px solid var(--line);
}
html.ui-v2 .topbar { justify-content: flex-end; gap: 2px; }
html.ui-v2 .topbar .eyebrow { display: none; }
html.ui-v2 .topbar .v2-topbar-start { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
html.ui-v2 #header-help-btn, html.ui-v2 #lang-toggle {
  position: relative; z-index: 0; background: transparent; border: 0; color: var(--ink); min-width: 48px; min-height: 48px; padding: 0 4px;
  font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
html.ui-v2 #header-help-btn { font-size: 0; }
html.ui-v2 #header-help-btn::before, html.ui-v2 #lang-toggle::before {
  content: ""; position: absolute; inset: 7px 2px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card);
  z-index: -1;
}
html.ui-v2 #header-help-btn::before { inset: 7px; border-radius: 50%; }
html.ui-v2 #header-help-btn::after { content: "?"; font-size: 18px; font-weight: 800; line-height: 1; }
html.ui-v2 #lang-toggle { min-width: 56px; }
html.ui-v2 #header-help-btn:focus-visible, html.ui-v2 #lang-toggle:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }
html.ui-v2 .v2-back {
  display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: -10px; padding: 0;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
html.ui-v2 .v2-back.is-on { display: inline-flex; margin-right: auto; }
html.ui-v2 .v2-back:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }

/* ---------- first-run screens: nothing but the top bar and the question ---------- */
html.ui-v2 #main.v2-first .brand-lockup,
html.ui-v2 #main.v2-first .theme-switch,
html.ui-v2 #main.v2-first .product-name,
html.ui-v2 #main.v2-first #shop-name,
html.ui-v2 #main.v2-first #app-title,
html.ui-v2 #main.v2-first #app-sub { display: none; }
html.ui-v2 #main.v2-first header { padding: 0; }
html.ui-v2 #main.v2-first > .panel {
  background: transparent; border: 0; box-shadow: none; padding: 8px 0 0; margin-top: 4px;
}
html.ui-v2 #main.v2-first .step, html.ui-v2 #main.v2-first .privacy-note { display: none; }
html.ui-v2 #main.v2-first #start-heading { font-size: 26px; line-height: 1.25; font-weight: 800; margin: 4px 0 4px; border: 0; padding: 0; }
html.ui-v2 #main.v2-first #start-hint { font-size: 16px; color: var(--muted); margin: 0 0 14px; }

/* ---------- business tiles: 2 columns, 8-16px gap, min 108px tall, icon 44px, label 17px bold ---------- */
.v2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
@media (max-width: 340px) { .v2-tiles { gap: 8px; } }
.v2-tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px;
  min-height: 108px; min-width: 0; padding: 12px; text-align: start; cursor: pointer;
  background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 16px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.v2-tile:hover { border-color: var(--accent-line); }
.v2-tile:active, .v2-tile:focus-visible { border-color: var(--accent); outline: none; }
.v2-tile:focus-visible { box-shadow: var(--focus); }
.v2-tile-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--accent);
}
.v2-tile-name {
  font-size: 17px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v2-ico { display: inline-flex; flex: none; }

/* ---------- search row (56px) and its results (64px rows) ---------- */
.v2-search-wrap { margin: 0 0 12px; }
.v2-search {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px;
  background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--v2-btn-radius);
}
.v2-search:focus-within { box-shadow: var(--focus); }
.v2-search-input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 17px; font-weight: 700; outline: none; -webkit-appearance: none; appearance: none;
}
.v2-search-input::placeholder { color: var(--ink); opacity: 1; }
.v2-search-input::-webkit-search-cancel-button { height: 24px; width: 24px; }
.v2-results { margin: 8px 0 0; }
.v2-result {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; width: 100%;
  min-height: 64px; padding: 8px 14px; margin: 0 0 8px; text-align: start; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
}
.v2-result:active, .v2-result:focus-visible { border-color: var(--accent); outline: none; }
.v2-result-name { font-size: 17px; font-weight: 800; line-height: 1.3; }
.v2-result-sub { font-size: 14px; color: var(--muted); line-height: 1.3; }
.v2-empty { color: var(--muted); font-size: 16px; margin: 4px 2px 12px; }
html.ui-v2 #start-not-sure {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 8px 12px;
  font-size: 16px; font-weight: 700; color: var(--accent); text-align: center; text-decoration: underline;
}
html.ui-v2 #main.v2-first .v2-tiles[hidden], .v2-hide { display: none; }

/* ---------- welcome ---------- */
html.ui-v2 #welcome.is-v2 > :not(#v2-welcome-host) { display: none; }
.v2-welcome { display: flex; flex-direction: column; min-height: min(540px, calc(100vh - 200px)); }
.v2-welcome-art { display: block; width: 100%; max-height: 190px; object-fit: contain; margin: 4px auto 8px; border-radius: var(--v2-card-radius); }
.v2-welcome-title { font-size: 30px; line-height: 1.2; font-weight: 800; margin: 8px 0 4px; }
.v2-welcome-promise { font-size: 19px; line-height: 1.4; color: var(--muted); margin: 0 0 16px; }
.v2-ticks { list-style: none; padding: 0; margin: 0 0 16px; }
.v2-ticks li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 17px; line-height: 1.35; }
.v2-tick-dot {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--v2-ok-wash); color: var(--v2-ok);
}
.v2-welcome-go { margin-top: auto; padding-top: 12px; }
.v2-welcome-note { color: var(--muted); font-size: 16px; margin: 0 0 12px; }

/* ---------- gold button: 56-60px, full width ---------- */
.v2-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 10px 18px;
  background: var(--action); color: var(--action-ink); border: 0; border-radius: var(--v2-btn-radius);
  font-size: 19px; font-weight: 800; cursor: pointer; text-decoration: none;
}
.v2-btn[hidden], .v2-welcome-note[hidden], .v2-results[hidden] { display: none; }
.v2-btn:active { filter: brightness(.96); transform: scale(.99); }
.v2-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.v2-btn[disabled] { opacity: .6; cursor: progress; }
.v2-btn-quiet { background: transparent; color: var(--accent); border: 2px solid var(--accent); }

/* ---------- parts used by the next steps (first question, Today): sizes from the brief ---------- */
.v2-field { margin: 0 0 12px; }
.v2-field-label { display: block; font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.v2-bigbox {
  display: flex; align-items: center; gap: 8px; min-height: 78px; padding: 0 16px; background: var(--field);
  border: 2px solid var(--line); border-radius: 12px;
}
.v2-bigbox:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.v2-bigbox-prefix { font-size: 26px; font-weight: 800; color: var(--muted); }
.v2-biginput {
  flex: 1 1 auto; min-width: 0; min-height: 74px; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 26px; font-weight: 800; outline: none;
}
.v2-defaults { margin: 0 0 12px; padding: 12px 14px; background: var(--v2-pale); border-radius: 12px; }
.v2-defaults-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.v2-defaults-link {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--accent);
}
.v2-answer { background: var(--header-bg); color: var(--header-ink); border-radius: var(--v2-card-radius); padding: 20px; margin: 0 0 12px; }
.v2-answer p { margin: 0; }
.v2-answer-label { font-size: 18px; }
.v2-answer-number { font-size: 48px; line-height: 1.15; font-weight: 800; }
.v2-answer-rule { border: 0; border-top: 1px solid currentColor; opacity: .3; margin: 12px 0; }
.v2-answer-line { font-size: 18px; }
.v2-toast {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 14px; margin: 0 0 12px;
  background: var(--v2-ok-wash); color: var(--v2-ok); border-radius: 12px; font-weight: 800;
}
.v2-toast-text { flex: 1 1 auto; }
.v2-toast-undo { min-height: 48px; min-width: 48px; padding: 0 10px; background: none; border: 0; color: var(--accent); font-size: 16px; font-weight: 800; cursor: pointer; }
.v2-hero { background: var(--gold-wash); border: 2px solid var(--gold); border-radius: var(--v2-card-radius); padding: 18px; margin: 0 0 16px; }
html.ui-v2 .v2-season-card { margin: 0 0 16px; padding: 16px; background: var(--v2-card); border: 1px solid var(--v2-hair); border-radius: var(--v2-card-radius, 20px); box-shadow: var(--v2-e1); }
html.ui-v2 .v2-season-tag { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 14px; font-weight: 800; }
html.ui-v2 .v2-season-title { margin: 0 0 8px; font-size: 22px; line-height: 1.3; font-weight: 800; }
html.ui-v2 .v2-season-line { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--muted); }
html.ui-v2 .v2-season-btn { width: 100%; min-height: 56px; border-radius: 16px; font-size: 18px; font-weight: 800; }
.v2-hero-label { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--warn); }
.v2-hero-title { margin: 0 0 6px; font-size: 22px; line-height: 1.3; font-weight: 800; }
.v2-hero-line { margin: 0 0 14px; font-size: 16px; color: var(--muted); }
.v2-later { display: block; width: 100%; min-height: 48px; margin-top: 4px; background: none; border: 0; color: var(--accent); font-size: 16px; font-weight: 700; cursor: pointer; }
.v2-path { margin: 0 0 16px; }
.v2-path-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.v2-path-row { display: flex; gap: 8px; }
.v2-path-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 14px; color: var(--muted); }
.v2-path-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; }
.v2-path-step.is-done { color: var(--ink); font-weight: 700; }
.v2-path-step.is-done .v2-path-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.v2-empty-chart { border: 2px dashed var(--line); border-radius: var(--v2-card-radius); padding: 14px; margin: 0 0 16px; }
.v2-empty-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-empty-title { margin: 0; font-size: 16px; color: var(--ink); }
.v2-stamp { padding: 4px 12px; border-radius: 999px; background: var(--v2-stamp); color: var(--v2-stamp-ink); font-size: 14px; font-weight: 800; }
.v2-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin: 14px 0 8px; }
.v2-bar { flex: 1 1 0; background: var(--line-soft); border-radius: 4px 4px 0 0; }
.v2-empty-line { margin: 0; font-size: 14px; color: var(--muted); }
html.ui-v2 .v2-search-input:focus-visible, html.ui-v2 .v2-biginput:focus-visible { outline: none; box-shadow: none; }

/* ---------- first question and answer (PR 4) ---------- */
html.ui-v2 #main.v2-first #first-win { padding-top: 4px; }
.v2-first-win { display: block; }
.v2-err { margin: 6px 0 0; color: var(--danger); font-size: 16px; font-weight: 700; }
.v2-err[hidden] { display: none; }
.v2-name-input, .v2-smallinput {
  width: 100%; min-height: 52px; padding: 0 14px; font: inherit; font-size: 17px; color: var(--ink); background: var(--field);
  border: 2px solid var(--line); border-radius: 12px;
}
.v2-name-input:focus, .v2-smallinput:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.v2-smallbox { display: flex; align-items: center; gap: 8px; }
.v2-defaults { position: relative; padding-right: 56px; }
.v2-defaults .v2-defaults-link { display: flex; min-width: 48px; }
.v2-i {
  position: absolute; top: 0; right: 0; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; color: var(--accent);
  font: italic 800 18px Georgia, serif;
}
.v2-i::before { content: ""; position: absolute; inset: 13px; border: 2px solid var(--accent); border-radius: 50%; }
.v2-i-note, .v2-sheet { margin: 0 0 12px; padding: 12px 14px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; }
.v2-i-note[hidden], .v2-sheet[hidden] { display: none; }
.v2-i-title { margin: 0 0 4px; font-weight: 800; font-size: 16px; }
.v2-i-text { margin: 0 0 8px; font-size: 16px; }
.v2-i-actions { display: flex; gap: 8px; }
.v2-i-btn { min-height: 48px; padding: 0 16px; border: 2px solid var(--accent); border-radius: 12px; background: none; color: var(--accent); font-size: 16px; font-weight: 800; cursor: pointer; }
.v2-go { position: sticky; bottom: 0; z-index: 3; padding: 8px 0 10px; background: var(--bg); }
.v2-answered .v2-go { position: static; padding: 4px 0; background: none; }
.v2-answered .v2-btn-quiet { margin-top: 4px; }
.v2-toast-slot { min-height: 0; }
.v2-toast-quiet { color: var(--muted); background: var(--sunk); font-weight: 700; padding: 0 14px; display: flex; align-items: center; margin: 0 0 12px; border-radius: 12px; min-height: 48px; }
.v2-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; margin: 0 0 10px; border-radius: 999px; background: var(--v2-ok-wash); color: var(--v2-ok); font-size: 14px; font-weight: 800; }
.v2-quiet-line { margin: 0; }
.v2-how-btn { display: flex; align-items: center; min-height: 48px; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: var(--accent); font-size: 16px; font-weight: 700; cursor: pointer; text-align: start; }
.v2-how { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.v2-how[hidden] { display: none; }
html.ui-v2 .v2-bigbox .voice-wrap { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; }
html.ui-v2 .v2-bigbox .voice-mic { flex: none; width: 48px; height: 48px; min-height: 48px; }
.v2-toast { font-size: 16px; line-height: 1.25; padding-top: 4px; padding-bottom: 4px; }
.v2-toast-undo { white-space: nowrap; flex: none; }

/* first-run screens: no old help page behind "?", no old radio questions; one top bar edge to edge on every v2 screen */
html.ui-v2 #main.v2-first:has(#welcome.is-v2:not([hidden])) #header-help-btn { display: none; }
html.ui-v2 header { padding: 0; }
html.ui-v2 .product-name { display: none; }
html.ui-v2 #today .art-today, html.ui-v2 #today .screen-guide-link { display: none; }

/* ---------- Today and closing the day (PR 5) ---------- */
.v2-today, .v2-close { display: block; }
.v2-greet { margin: 4px 0 0; font-size: 16px; color: var(--muted); font-weight: 700; }
.v2-date { margin: 0 0 12px; font-size: 22px; line-height: 1.3; border: 0; padding: 0; }
.v2-join { margin: -4px 0 16px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.v2-join p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.v2-join-btn { min-height: 48px; font-size: 16px; }
.v2-row { display: flex; flex-direction: column; justify-content: center; min-height: 64px; margin: 0 0 16px; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; }
.v2-row-name { font-size: 17px; font-weight: 800; }
.v2-row-sub { font-size: 14px; color: var(--muted); }
.v2-yesterday { margin: 0 0 16px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.v2-yesterday p { margin: 0; }
.v2-yesterday-line { font-size: 18px; font-weight: 800; }
.v2-streak { font-size: 16px; color: var(--v2-ok); font-weight: 800; }
.v2-bar.is-real { background: var(--accent); opacity: .85; }
.v2-datechip { display: inline-block; margin: 6px 0 12px; padding: 4px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.v2-more > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-size: 16px; font-weight: 800; color: var(--accent); }
.v2-more { margin: 0 0 12px; }
html.ui-v2 #today.panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.ui-v2 #main.v2-first .v2-door { display: none; }

.v2-bar-days { display: flex; gap: 8px; margin: 0 0 8px; }
.v2-bar-days span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 14px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.v2-link-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 4px; background: none; border: 0; color: var(--accent); font-size: 16px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.v2-answer-number.is-long { font-size: 36px; overflow-wrap: anywhere; }

/* ======================== polish pass (mockups as feel references; brand tokens win) ======================== */
/* welcome: a warm picture in a rounded frame, trust lines as quiet pills */
.v2-welcome-art-frame { border-radius: var(--v2-card-radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); margin: 4px 0 8px; }
.v2-welcome-art { margin: 0 auto; border-radius: 0; max-height: 200px; }
.v2-ticks li { padding: 6px 12px; margin: 0 0 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }

/* one tab icon set: line icons, the active tab gets a soft pill behind the icon, a bold label and the gold line */
html.ui-v2 .tab-icon { box-sizing: content-box; padding: 4px 16px; border-radius: 16px; stroke-width: 1.8; }
html.ui-v2 .tab-btn.is-active .tab-icon, html.ui-v2 .tab-btn[aria-current="page"] .tab-icon { background: var(--accent-wash); stroke: var(--accent); stroke-width: 2.2; }
html.ui-v2 .tab-btn { padding-top: 2px; }

/* the flat v2 pages: no card around the whole page */
html.ui-v2 #persona-home.is-v2.panel, html.ui-v2 #shop-shell.panel, html.ui-v2 #shop-baki.panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.ui-v2 #persona-home.is-v2 > :not(#v2-decide-host) { display: none; }
html.ui-v2 #shop-shell .v2-door { display: none; }
.v2-page-title { margin: 8px 0 12px; font-size: 26px; line-height: 1.25; border: 0; padding: 0; }
.v2-inline-title { margin: 0; font-size: 22px; }
.v2-group-title { margin: 16px 0 6px; font-size: 16px; color: var(--muted); font-weight: 800; }
.v2-list-row, .v2-baki-row, .v2-late-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0 0 8px; padding: 8px 14px; text-align: start; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; font: inherit;
}
.v2-list-row:active, .v2-baki-row:active, .v2-late-row:active, .v2-book-tile:active { border-color: var(--accent); }
.v2-list-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.v2-list-name { font-size: 17px; font-weight: 800; line-height: 1.3; }
.v2-list-sub { font-size: 14px; color: var(--muted); line-height: 1.3; }
.v2-list-right { flex: none; font-size: 17px; font-weight: 800; }
.v2-list-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--accent); }
.v2-chev { flex: none; font-size: 24px; color: var(--muted); line-height: 1; }
.v2-more-books[hidden], .v2-write-list[hidden] { display: none; }
.v2-more-books { margin: 0 0 8px 12px; }

/* books home */
.v2-month { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 0 0 14px; }
.v2-month-title { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--muted); }
.v2-month-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v2-month-cell { display: flex; flex-direction: column; min-width: 0; }
.v2-month-label { font-size: 14px; color: var(--muted); }
.v2-month-num { font-size: 20px; font-weight: 800; overflow-wrap: anywhere; line-height: 1.25; }
.v2-month-cell.is-warn .v2-month-num { color: var(--warn); }
.v2-book-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.v2-book-tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 96px; padding: 12px; text-align: start; cursor: pointer; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; font: inherit; }
.v2-book-name { font-size: 17px; font-weight: 800; line-height: 1.3; }
.v2-book-sub { font-size: 14px; color: var(--muted); }
.v2-write-bar { position: sticky; bottom: 72px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding: 8px 0; pointer-events: none; }
.v2-write-bar > * { pointer-events: auto; }
.v2-write-btn { width: auto; min-width: 150px; padding: 0 28px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.v2-write-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.v2-write-choice { min-height: 48px; min-width: 160px; padding: 0 16px; background: none; border: 0; color: var(--ink); font: inherit; font-size: 17px; font-weight: 800; text-align: start; cursor: pointer; }

/* baki book */
.v2-baki-top { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; }
.v2-back-link { flex: none; width: 48px; height: 48px; margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink); cursor: pointer; }
.v2-baki-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 0 0 12px; }
.v2-baki-sum p { margin: 0; }
.v2-baki-total { font-size: 30px; font-weight: 800; line-height: 1.2; }
.v2-pill-red { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--loss-wash); color: var(--loss); font-size: 14px; font-weight: 800; }
.v2-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.v2-chip-btn { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.v2-chip-btn.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.v2-sort { margin-left: auto; min-height: 48px; max-width: 100%; padding: 0 8px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 16px; font-weight: 800; }
.v2-baki-row .v2-list-name, .v2-late-row .v2-list-name { font-size: 18px; }
.v2-days, .v2-late-days { font-size: 16px; font-weight: 800; color: var(--muted); }
.v2-days.is-red, .v2-late-days.is-red { color: var(--loss); }
.v2-days.is-gold, .v2-late-days.is-gold { color: var(--warn); }
.v2-empty { padding: 16px 4px; font-size: 16px; color: var(--muted); }

/* Today day 2+: yesterday, seven dots, comparison */
.v2-yesterday { padding: 14px; }
.v2-yesterday-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.v2-yesterday-label { margin: 0; font-size: 14px; color: var(--muted); font-weight: 700; }
.v2-yesterday-num { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.2; }
.v2-yesterday-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.v2-dots { display: flex; gap: 5px; }
.v2-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.v2-dot.is-on { background: var(--gold); }
.v2-streak { margin: 0; font-size: 14px; font-weight: 800; color: var(--ink); }
.v2-compare { margin: 8px 0 0; font-size: 16px; font-weight: 800; color: var(--muted); }
.v2-compare.is-up { color: var(--v2-ok); }
.v2-compare.is-down { color: var(--loss); }
.v2-real-chart { border-style: solid; border-width: 1px; background: var(--card); }
.v2-all-link { min-height: 48px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 800; color: var(--accent); text-decoration: none; }
.v2-bar.is-real { background: var(--profit); opacity: 1; }
.v2-bar.is-gap { height: 4px; background: var(--line); border-radius: 2px; }
.v2-bar.is-today-empty { height: 34px; background: none; border: 2px dashed var(--line); border-radius: 6px; }
.v2-bar-days span { font-size: 14px; }
/* the example stamp sits in the heading row; the bars start below it and never reach it */
.v2-empty-chart { overflow: hidden; }
.v2-empty-head { min-height: 36px; }
.v2-bars { margin-top: 18px; height: 96px; }
.v2-datechip { max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.v2-baki .v2-go { bottom: 76px; }
html.ui-v2 .v2-chip-btn, html.ui-v2 .v2-sort { min-height: 48px; }
html.ui-v2 #shop-baki .v2-chip-btn, html.ui-v2 #shop-baki .v2-baki-row, html.ui-v2 #shop-baki .v2-btn { min-height: 48px; }
html.ui-v2 #shop-baki .v2-btn { min-height: 58px; }
html.ui-v2 #shop-baki .v2-back-link { min-height: 48px; min-width: 48px; }
.v2-baki-sum { flex-wrap: wrap; }
.v2-baki-total { font-size: clamp(24px, 8vw, 30px); white-space: nowrap; }

/* =====================================================================================================
   Design kit v2: the "Pride ribbon" look (docs/ux/redesign/DESIGN_KIT_V2.md). Still ONLY under html.ui-v2.
   Tokens first; every rule below reads them, so the owner's mockup colours change tokens, not rules.
   ===================================================================================================== */
html.ui-v2 {
  --v2-page: #FFF8EA;
  --v2-band-a: #F8E9BD;
  --v2-band-b: #FCF3D9;
  --v2-card: var(--card);
  --v2-hair: #EFE2BF;
  --v2-ink: var(--ink);
  --v2-ink-2: #4B4880;
  --v2-ribbon: var(--header-bg);
  --v2-ribbon-ink: var(--header-ink);
  --v2-ribbon-edge: var(--header-marker);
  --v2-pride: #6B2D91;
  --v2-gold: var(--action);
  --v2-gold-press: var(--action-press);
  --v2-bad: var(--loss);
  --v2-bad-wash: var(--loss-wash);
  --v2-gutter: 16px;
  --v2-r-card: 20px; --v2-r-tile: 18px; --v2-r-btn: 16px; --v2-r-input: 14px;
  --v2-card-radius: var(--v2-r-card);
  --v2-btn-radius: var(--v2-r-btn);
  --v2-e1: 0 1px 2px rgba(24, 20, 115, .05), 0 4px 14px rgba(24, 20, 115, .06);
  --v2-e2: 0 2px 4px rgba(24, 20, 115, .06), 0 10px 26px rgba(24, 20, 115, .10);
  --v2-glow: 0 6px 16px rgba(194, 135, 12, .30);
  --v2-ease: cubic-bezier(.2, .8, .2, 1);
  --v2-fs-display: 30px; --v2-fs-title: 26px; --v2-fs-section: 20px; --v2-fs-body-l: 18px; --v2-fs-body: 16px; --v2-fs-small: 14px;
  --v2-fs-money: 48px; --v2-fs-money-s: 32px;
  --v2-pale: #F7F1E1;
}
html.ui-v2[data-theme="light"] { --v2-page: #FFFFFF; --v2-band-a: #FBF4E0; --v2-band-b: #FFFBF0; --v2-hair: #ECE7F3; --v2-pale: #F6F3FA; }
html.ui-v2[data-theme="black"] { --v2-page: var(--bg); --v2-band-a: #1C1A12; --v2-band-b: #141414; --v2-hair: var(--line); --v2-ink-2: var(--muted);
  --v2-e1: none; --v2-e2: 0 0 0 1px var(--line); --v2-glow: none; --v2-pale: var(--sunk); }
@media (min-width: 380px) { html.ui-v2 { --v2-gutter: 20px; } }

html.ui-v2 body { background: var(--v2-page); }
html.ui-v2 .shell { padding-top: 0; padding-left: var(--v2-gutter); padding-right: var(--v2-gutter); }
html.ui-v2 #shop-name { display: none; }
html.ui-v2 .v2-go { background: var(--v2-page); }
html.ui-v2 .v2-answered .v2-go { background: none; }

/* ---------- P1 the ribbon: navy band, gold edge, blue PRIDE mark, the section name; sticks to the top ---------- */
html.ui-v2 #main > header { position: sticky; top: 0; z-index: 40; }
html.ui-v2 .topbar {
  position: relative; min-height: 56px; margin: 0 calc(-1 * var(--v2-gutter)) 12px; padding: 4px 8px 4px var(--v2-gutter);
  justify-content: flex-end; gap: 2px;
  background-color: var(--v2-ribbon);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .04) 100%);
  color: var(--v2-ribbon-ink); border-bottom: 3px solid var(--v2-ribbon-edge); box-shadow: var(--v2-e2);
}
html.ui-v2 .v2-ribbon-lead { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; margin-right: auto; }
html.ui-v2 .v2-back.is-on { margin-right: 0; color: var(--v2-ribbon-ink); }
html.ui-v2 .v2-back { color: var(--v2-ribbon-ink); }
html.ui-v2 .v2-pride { flex: none; display: block; width: 56px; height: 30px; }
html.ui-v2 .v2-ribbon-title {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: .01em; color: var(--v2-ribbon-ink);
}
html.ui-v2 .v2-ribbon-title:empty { display: none; }
html.ui-v2 #header-help-btn, html.ui-v2 #lang-toggle { color: var(--v2-ribbon-ink); }
html.ui-v2 #header-help-btn::before, html.ui-v2 #lang-toggle::before {
  border: 1.5px solid var(--v2-ribbon-ink); background: rgba(255, 255, 255, .08);
}
html.ui-v2 #header-help-btn:focus-visible, html.ui-v2 #lang-toggle:focus-visible, html.ui-v2 .v2-back:focus-visible { box-shadow: 0 0 0 3px var(--v2-ribbon-edge); }
/* the section is named by the ribbon: a page title that only repeats it is kept for screen readers only */
html.ui-v2.v2-has-title #persona-home .v2-page-title,
html.ui-v2.v2-has-title #shop-shell .v2-page-title,
html.ui-v2.v2-has-title #more-heading {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0;
}

/* ---------- P4 type: Bangla line-heights; never below 14px ---------- */
html.ui-v2 .v2-welcome-title { font-size: var(--v2-fs-display); line-height: 1.25; letter-spacing: -.005em; }
html.ui-v2 .v2-page-title, html.ui-v2 #main.v2-first #start-heading { font-size: var(--v2-fs-title); line-height: 1.3; }
html.ui-v2 .v2-hero-title { font-size: 22px; line-height: 1.35; }
html.ui-v2 .v2-hero-line, html.ui-v2 .v2-empty-line, html.ui-v2 .v2-defaults-text { line-height: 1.55; }
html.ui-v2 .v2-answer-number, html.ui-v2 .v2-yesterday-num, html.ui-v2 .v2-baki-total, html.ui-v2 .v2-month-num, html.ui-v2 .v2-list-right {
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ---------- P2/P5 surfaces: ivory page, near-white cards with a hairline and one soft shadow ---------- */
html.ui-v2 .v2-tile, html.ui-v2 .v2-result, html.ui-v2 .v2-list-row, html.ui-v2 .v2-baki-row, html.ui-v2 .v2-late-row, html.ui-v2 .v2-month, html.ui-v2 .v2-book-tile,
html.ui-v2 .v2-yesterday, html.ui-v2 .v2-row, html.ui-v2 .v2-baki-sum, html.ui-v2 .v2-join, html.ui-v2 .v2-real-chart, html.ui-v2 .v2-ticks li,
html.ui-v2 .v2-welcome-art-frame, html.ui-v2 .v2-search, html.ui-v2 #more-shell .more-card {
  background: var(--v2-card); border-color: var(--v2-hair); box-shadow: var(--v2-e1);
}
html.ui-v2 .v2-search { border: 1.5px solid var(--v2-ink); }
html.ui-v2 .v2-tile { border-width: 1px; border-radius: var(--v2-r-tile); transition: transform .12s var(--v2-ease), box-shadow .12s var(--v2-ease); }
html.ui-v2 .v2-tile:active { transform: scale(.98); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
html.ui-v2 .v2-tile-ico { width: 48px; height: 48px; background: linear-gradient(160deg, var(--v2-band-b), var(--v2-band-a)); color: var(--v2-ink); }
html.ui-v2 .v2-list-ico { background: var(--v2-band-b); }
html.ui-v2 .v2-list-row, html.ui-v2 .v2-baki-row, html.ui-v2 .v2-late-row { border-radius: 16px; }
html.ui-v2 .v2-list-row:active, html.ui-v2 .v2-baki-row:active, html.ui-v2 .v2-late-row:active, html.ui-v2 .v2-book-tile:active { transform: scale(.99); }
html.ui-v2 .v2-month, html.ui-v2 .v2-baki-sum { border-radius: var(--v2-r-card); }
html.ui-v2 .v2-group-title { color: var(--v2-ink-2); }

/* the hero: cream wash, gold rim, lifted a little; the gold label sits in a small pill */
html.ui-v2 .v2-hero {
  background: linear-gradient(180deg, var(--v2-band-b) 0%, var(--v2-card) 100%); border: 2px solid var(--v2-gold);
  box-shadow: var(--v2-e2); padding: 18px 18px 14px;
}
html.ui-v2 .v2-hero-label { display: inline-block; padding: 2px 10px; margin-bottom: 8px; border-radius: 999px; background: var(--gold-wash); color: var(--warn); }
html.ui-v2[data-theme="black"] .v2-hero { background: var(--card); }

/* the answer card: deep navy with a faint light from the top */
html.ui-v2 .v2-answer { background-image: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%); box-shadow: var(--v2-e2); }

/* ---------- the one gold button: a soft top light, a warm glow, a press that you feel ---------- */
html.ui-v2 .v2-btn {
  background-color: var(--v2-gold); background-image: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 60%);
  border-radius: var(--v2-r-btn); box-shadow: var(--v2-glow); letter-spacing: .01em;
  transition: transform .12s var(--v2-ease), box-shadow .12s var(--v2-ease), background-color .12s;
}
html.ui-v2 .v2-btn:active { transform: scale(.98); background-color: var(--v2-gold-press); box-shadow: none; filter: none; }
html.ui-v2 .v2-btn-quiet { background: var(--v2-card); background-image: none; box-shadow: none; color: var(--accent); border: 2px solid var(--accent); }
html.ui-v2 .v2-btn-quiet:active { background: var(--accent-wash); }
html.ui-v2 .v2-write-btn { box-shadow: var(--v2-glow), var(--v2-e2); }

/* ---------- inputs ---------- */
html.ui-v2 .v2-bigbox, html.ui-v2 .v2-name-input, html.ui-v2 .v2-smallinput { border-radius: var(--v2-r-input); border-width: 1.5px; border-color: #DCCB9C; background: var(--field); }
html.ui-v2[data-theme="black"] .v2-bigbox, html.ui-v2[data-theme="black"] .v2-name-input { border-color: var(--line); }
html.ui-v2 .v2-defaults { background: var(--v2-pale); }

/* ---------- P11 Today's warm header band ---------- */
.v2-band { display: none; }
html.ui-v2 .v2-band {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; padding: 14px 10px 14px 16px; min-height: 88px;
  background: linear-gradient(120deg, var(--v2-band-a) 0%, var(--v2-band-b) 100%); border-radius: var(--v2-r-card); box-shadow: var(--v2-e1);
}
html.ui-v2 .v2-band-text { flex: 1 1 auto; min-width: 0; }
html.ui-v2 .v2-band .v2-greet { margin: 0 0 2px; font-size: 16px; line-height: 1.45; color: var(--v2-ink-2); font-weight: 700; overflow-wrap: anywhere; }
html.ui-v2 .v2-band .v2-date { margin: 0; font-size: 22px; line-height: 1.3; }
html.ui-v2 .v2-band-art { flex: none; width: 104px; height: 64px; object-fit: contain; mix-blend-mode: multiply; }
html.ui-v2[data-theme="black"] .v2-band-art { mix-blend-mode: normal; border-radius: 12px; background: #FFFDF8; }
@media (max-width: 340px) { html.ui-v2 .v2-band-art { width: 84px; height: 52px; } html.ui-v2 .v2-band .v2-date { font-size: 20px; } }

/* welcome: the picture melts into its card (its white becomes the card colour) */
html.ui-v2 .v2-welcome-art { mix-blend-mode: multiply; }
html.ui-v2[data-theme="black"] .v2-welcome-art { mix-blend-mode: normal; }
html.ui-v2 .v2-welcome-art-frame { border-radius: var(--v2-r-card); background: linear-gradient(180deg, var(--v2-card), var(--v2-band-b)); }
html.ui-v2 .v2-tick-dot { box-shadow: inset 0 0 0 1px rgba(23, 105, 63, .15); }

/* ---------- P12 empty and loading states ---------- */
html.ui-v2 .v2-empty-chart:not(.v2-real-chart) { border: 2px dashed var(--v2-hair); background: linear-gradient(180deg, var(--v2-card), var(--v2-page)); }
html.ui-v2 .v2-stamp { background: var(--gold-wash); color: var(--warn); box-shadow: inset 0 0 0 1px var(--gold-line); }
html.ui-v2 .v2-bar { background: var(--v2-hair); }
html.ui-v2 .v2-bar.is-real { background: var(--profit); }
.v2-skel { display: block; border-radius: 12px; background: linear-gradient(90deg, var(--v2-pale, #F3EEE0) 0%, var(--v2-card, #FFFDF8) 50%, var(--v2-pale, #F3EEE0) 100%); background-size: 200% 100%; animation: v2-shimmer 1.2s linear infinite; min-height: 18px; }

/* ---------- P8 motion: one quiet rise for a new screen, the saved strip drops in ---------- */
html.ui-v2 #main > .enter { animation: v2-rise 200ms var(--v2-ease) both; }
html.ui-v2 .v2-toast { animation: v2-drop 220ms var(--v2-ease) both; }

/* ---------- tab bar: near-white, hairline above, the active tab = pill + bold label + gold line ---------- */
html.ui-v2 .tab-bar { background: var(--v2-card); border-top: 1px solid var(--v2-hair); box-shadow: 0 -4px 18px rgba(24, 20, 115, .06); }
html.ui-v2 .tab-btn { color: var(--v2-ink-2); }
html.ui-v2 .tab-btn.is-active::before, html.ui-v2 .tab-btn[aria-current="page"]::before { background: var(--v2-ribbon-edge); }

/* ---------- P13 the "i" and its dialog ---------- */
.v2-head-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.v2-head-row > :first-child { margin: 0; min-width: 0; }
html.ui-v2 #persona-home .v2-head-row { margin: 16px 0 2px; }
.v2-month .v2-head-row { margin: -12px -8px -4px 0; }
.v2-ibtn {
  position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--v2-ink-2, var(--muted)); font: italic 800 14px/1 Georgia, "Times New Roman", serif;
}
.v2-ibtn::before { content: ""; position: absolute; left: 13px; top: 13px; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.v2-ibtn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }
.v2-info-layer { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.v2-info-backdrop { position: absolute; inset: 0; background: rgba(14, 12, 60, .40); animation: v2-fade .18s ease-out both; }
.v2-info {
  position: relative; width: 100%; max-width: 600px; max-height: 60vh; overflow: auto; box-sizing: border-box;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--card); color: var(--ink);
  border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(14, 12, 60, .25); animation: v2-sheet .22s cubic-bezier(.2, .8, .2, 1) both;
}
.v2-info::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--line); }
.v2-info-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v2-info-title { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 800; color: var(--ink); outline: none; }
.v2-info-close { flex: none; min-width: 64px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--sunk); color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.v2-info-art { display: block; width: 100%; max-height: 160px; object-fit: contain; margin: 8px 0 4px; mix-blend-mode: multiply; }
.v2-info-line { margin: 4px 0 14px; font-size: 18px; line-height: 1.55; }
.v2-info-ok { min-height: 52px; }
@media (min-width: 600px) { .v2-info-layer { align-items: center; } .v2-info { border-radius: 24px; } }

/* ---------- More: how we greet you ---------- */
html.ui-v2 .v2-greet-card { padding: 16px; border-radius: var(--v2-r-card); }
html.ui-v2 .v2-card-title { margin: 0 0 4px; font-size: 18px; color: var(--ink); }
html.ui-v2 .v2-greet-preview { margin: 0 0 12px; font-size: 20px; line-height: 1.35; font-weight: 800; }
html.ui-v2 .v2-greet-row { margin: 12px 0 4px; }
html.ui-v2 .v2-greet-status { margin: 4px 0 0; min-height: 22px; color: var(--profit); font-size: 14px; font-weight: 800; }
html.ui-v2 #more-shell.panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.ui-v2 #more-shell .more-card { border-radius: var(--v2-r-card); }
html.ui-v2 .v2-greet-row { flex-wrap: nowrap; gap: 6px; }
html.ui-v2 .v2-greet-row .v2-chip-btn { flex: 1 1 auto; min-width: 0; padding: 0 10px; white-space: nowrap; }
@media (max-width: 360px) { html.ui-v2 .v2-greet-row { flex-wrap: wrap; } }

/* ---------- PR 6: 'open in Chrome' for the Facebook / Messenger / Instagram browser ---------- */
.v2-bridge { display: flex; flex-direction: column; gap: 12px; }
.v2-bridge[hidden] { display: none; }
.v2-bridge-why { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.v2-bridge-ios { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; padding: 12px 14px; background: var(--v2-card, #fff); border: 2px solid var(--line); border-radius: 12px; }
.v2-bridge .v2-bridge-stay { min-height: 44px; font-size: 15px; font-weight: 700; padding: 6px 14px; width: auto; align-self: center; border-width: 1px; }

/* =====================================================================================================
   APPROVED UI LOCK (docs/ux/approved/APPROVED_UI.md). Brings the v2 look back to the owner's approved images.
   Still ONLY under html.ui-v2 (switch off = not one pixel moves). If in doubt, the approved image wins.
   Header = H1 "kit band + Pride ribbon":
     row 1  cream band #F8E9BD, 56px: [purple PRIDE oval 52x28] shop name (navy 18/800, one line) ... (?) (EN)
     row 2  navy ribbon #181473, 36px, 3px gold edge: the section name in cream 17/800 (tab screens only)
   ===================================================================================================== */
html.ui-v2 { --v2-band-solid: #F8E9BD; --v2-navy: #181473; --v2-navy-fill: #181473; overflow-x: clip; }
html.ui-v2 body { overflow-x: clip; }
html.ui-v2 .topbar {
  background: var(--v2-band-solid); background-image: none; color: var(--v2-navy);
  min-height: 56px; border-bottom: 1px solid #EBD9A6; box-shadow: none; gap: 4px;
  justify-content: flex-start; padding: 4px 6px 4px var(--v2-gutter);
}
html.ui-v2 #main.v2-first .topbar { margin-left: 0; margin-right: 0; padding-left: 8px; }
html.ui-v2 .v2-ribbon-lead { display: flex; flex: none; margin-right: 0; gap: 0; align-items: center; }
html.ui-v2 .v2-pride { width: 52px; height: 28px; }
html.ui-v2 #shop-name {
  flex: 1 1 auto; min-width: 0; margin: 0 0 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--v2-navy);
}
html.ui-v2 #main.v2-first .v2-ribbon-lead { margin-right: auto; }
html.ui-v2 #header-help-btn, html.ui-v2 #lang-toggle, html.ui-v2 .v2-back, html.ui-v2 .v2-back.is-on { color: var(--v2-navy); flex: none; }
html.ui-v2 #header-help-btn::before, html.ui-v2 #lang-toggle::before { border: 1.5px solid var(--v2-navy); background: #FFFDF8; }
/* row 2: the ribbon carrying the section name */
html.ui-v2.v2-has-title .topbar { margin-bottom: 52px; }
html.ui-v2 .v2-ribbon-title {
  position: absolute; left: 0; right: 0; top: 100%; height: 36px; padding: 0 var(--v2-gutter);
  display: flex; align-items: center; box-sizing: border-box;
  background: var(--v2-navy-fill); color: #FFFDF8; border-bottom: 3px solid #DE9F15;
  font-size: 17px; line-height: 1.3; font-weight: 800;
}
html.ui-v2 .v2-ribbon-title:empty { display: none; }
html.ui-v2[data-theme="black"] .topbar { background: #1C1A12; color: var(--ink); }
html.ui-v2[data-theme="black"] #shop-name, html.ui-v2[data-theme="black"] #header-help-btn, html.ui-v2[data-theme="black"] #lang-toggle { color: var(--ink); }
html.ui-v2[data-theme="black"] .v2-ribbon-title { background: #141414; }
html.ui-v2[data-theme="light"] .topbar { background: #FBF4E0; }

/* welcome: never a broken-image icon while the people pictures are being made */
html.ui-v2 .v2-welcome-art[hidden] { display: none !important; }

/* result card: NAVY with cream text (approved 04), not cream */
html.ui-v2 .v2-answer { background-color: var(--v2-navy-fill); color: #FFFDF8; border: 0; }
html.ui-v2 .v2-answer .v2-answer-number, html.ui-v2 .v2-answer p { color: #FFFDF8; }

/* tab bar: line icons, active = navy bold + gold line on top; no gold pill (gold is only for the one main button) */
html.ui-v2 .tab-btn.is-active .tab-icon, html.ui-v2 .tab-btn[aria-current="page"] .tab-icon { background: transparent; stroke: var(--v2-navy); stroke-width: 2.2; }
html.ui-v2 .tab-btn.is-active, html.ui-v2 .tab-btn[aria-current="page"] { color: var(--v2-navy); background: transparent; }
html.ui-v2 .tab-btn .tab-icon { fill: none; }

/* baki book (approved 11): navy selected chip, sort on the same line, a round avatar on each row */
html.ui-v2 .v2-filter-bar { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; }
html.ui-v2 .v2-chip-btn.is-on, html.ui-v2 .v2-chip-btn[aria-pressed="true"] { background: var(--v2-navy-fill); color: #FFFDF8; border-color: var(--v2-navy); box-shadow: none; }
html.ui-v2 .v2-filter-bar .v2-sort { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 40%; border: 0; background: transparent; color: var(--v2-navy); font-weight: 800; text-overflow: ellipsis; }
html.ui-v2 .v2-baki-row::before, html.ui-v2 .v2-late-row::before { content: ""; flex: none; width: 36px; height: 36px; margin-right: 12px; border-radius: 50%; background: #D9D6CF; }
html.ui-v2 .v2-baki-row, html.ui-v2 .v2-late-row { display: flex; align-items: center; }
html.ui-v2 .topbar > .v2-back { order: 0; }
html.ui-v2 .topbar > .v2-ribbon-lead { order: 1; }
html.ui-v2 .topbar > #shop-name { order: 2; }
html.ui-v2 .topbar > #header-help-btn { order: 3; }
html.ui-v2 .topbar > #lang-toggle { order: 4; }
html.ui-v2 #main > header { background: var(--v2-page); }
html.ui-v2.v2-has-title .topbar { margin-bottom: 48px; }
html.ui-v2 .v2-filter-bar .v2-chip-btn { flex: none; white-space: nowrap; padding: 0 14px; }
html.ui-v2 .v2-filter-bar .v2-sort { min-width: 56px; }
@media (max-width: 360px) { html.ui-v2 .v2-filter-bar .v2-chip-btn { padding: 0 10px; } html.ui-v2 .v2-filter-bar { gap: 4px; } }

/* ---------- Official owner logo: full lockup on welcome; separate round PRIDE badge elsewhere. ---------- */
html.ui-v2 .v2-pride { width: 40px; height: 40px; }
html.ui-v2 .v2-lockup { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 8px; border-radius: 12px; }
html.ui-v2[data-theme="black"] .v2-lockup { border-radius: 0; background: transparent; filter: none; }
.v2-lockup-name { display: none; }
html.ui-v2[data-theme="black"] .v2-lockup { margin-bottom: 0; }
html.ui-v2[data-theme="black"] .v2-lockup-name {
  display: block;
  margin: 2px 0 8px;
  color: #FFFFFF;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
html.ui-v2 #main.v2-first:has(#welcome.is-v2:not([hidden])) .v2-ribbon-lead { display: none; }
html.ui-v2 .v2-welcome .v2-welcome-art-frame.has-placeholder { min-height: 120px; }
html.ui-v2 .topbar > #header-help-btn { margin-left: auto; }
html.ui-v2 .topbar > #shop-name[hidden] + #header-help-btn { margin-left: auto; }
html.ui-v2 #main.v2-first:has(#welcome.is-v2:not([hidden])) .topbar > #lang-toggle { margin-left: auto; }
html.ui-v2 .v2-filter-bar .v2-chip-btn { min-width: 52px; }
  html.ui-v2 .v2-welcome .v2-lockup { max-width: 240px; margin: 0 auto 8px; }
html.ui-v2 .v2-welcome .v2-welcome-art { max-height: 120px; }
@media (max-height: 700px) { html.ui-v2 .v2-welcome .v2-lockup { max-width: 200px; } html.ui-v2 .v2-welcome .v2-welcome-art { max-height: 84px; } }

/* ---------- FIX2 picker tiles (approved 02): picture in a soft coloured circle top-left, the owner's word below ---------- */
html.ui-v2 .v2-tile { min-height: 108px; padding: 10px 12px 12px; gap: 6px; }
html.ui-v2 .v2-tile-ico { width: 56px; height: 56px; background: #FBE9C8; color: var(--v2-navy); }
html.ui-v2 .v2-tile-ico .v2-ico svg { width: 32px; height: 32px; stroke-width: 1.7; }
html.ui-v2 .v2-tile[data-tile="S02"] .v2-tile-ico { background: #F9D9DC; }
html.ui-v2 .v2-tile[data-tile="S21"] .v2-tile-ico { background: #D9EDD3; }
html.ui-v2 .v2-tile[data-tile="S01"] .v2-tile-ico { background: #D6E5F8; }
html.ui-v2 .v2-tile[data-tile="restaurant"] .v2-tile-ico { background: #FBE1C8; }
html.ui-v2 .v2-tile[data-tile="S03"] .v2-tile-ico { background: #F8E8A9; }
html.ui-v2 .v2-tile[data-tile="S14"] .v2-tile-ico { background: #E5D8F4; }
html.ui-v2 .v2-tile[data-tile="madrasa"] .v2-tile-ico { background: #CFEDE6; }
html.ui-v2 .v2-tile[data-tile="S12"] .v2-tile-ico { background: #DDD6F3; }
html.ui-v2[data-theme="black"] .v2-tile-ico { background: var(--sunk); color: var(--ink); }
html.ui-v2[data-theme="black"] .v2-tile[data-tile] .v2-tile-ico { background: var(--sunk); }
html.ui-v2 .v2-tile-name { font-weight: 700; }
html.ui-v2 #start-not-sure { font-size: 16px; font-weight: 700; color: var(--v2-navy); text-decoration: none; }

/* ---------- FIX3 charts page (approved 13): one coloured meaning line per card, "সংখ্যাগুলো ›" toggle, no dense legend ---------- */
html.ui-v2.v2-has-title #infographics .info-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.ui-v2 #infographics .info-rule { display: none; }
html.ui-v2 #infographics .info-toggle { min-height: 48px; margin: 0 0 10px; border-radius: 999px; color: var(--v2-navy); background: var(--v2-card); border: 1.5px solid var(--v2-navy); font-weight: 800; }
html.ui-v2 #infographics .info-sample { margin: 0 0 10px; padding: 0; background: none; border: 0; color: var(--v2-ink-2); font-size: 14px; font-weight: 600; line-height: 1.35; }
html.ui-v2 .chart-card { border-radius: var(--v2-r-card); background: var(--v2-card); border: 1px solid var(--v2-hair); box-shadow: var(--v2-e1); padding: 14px 16px 6px; margin: 0 0 12px; }
html.ui-v2 .chart-card.is-sample { background: var(--v2-card); }
html.ui-v2 .chart-head h3 { font-size: 16px; font-weight: 800; color: var(--v2-navy); }
html.ui-v2 .chart-badge { font-size: 14px; color: #7A5200; background: #FBEFC9; border-color: #E9D08A; }
html.ui-v2 .chart-mean { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 4px 0 10px; padding: 0 0 6px; border-bottom: 2px solid var(--v2-navy); font-size: 18px; line-height: 1.3; font-weight: 800; font-variant-numeric: tabular-nums; }
html.ui-v2 .chart-mean.mean-ok { border-color: #17693F; }
html.ui-v2 .chart-mean.mean-bad { border-color: #A8352A; }
html.ui-v2 .chart-mean-i.ok { color: #17693F; }
html.ui-v2 .chart-mean-i.gold { color: #8A5E00; }
html.ui-v2 .chart-mean-i.bad { color: #A8352A; }
html.ui-v2 .chart-mean-i.ink { color: var(--v2-navy); }
html.ui-v2 .chart-card .chart { max-height: 112px; }
html.ui-v2 .chart-table { margin-top: 0; }
html.ui-v2 .chart-table summary { justify-content: flex-end; color: var(--v2-navy); font-weight: 800; font-size: 16px; list-style: none; }
html.ui-v2 .chart-table summary::-webkit-details-marker { display: none; }
html.ui-v2 .chart-table summary::after { content: "\203A"; display: inline-block; margin-left: 6px; font-size: 22px; line-height: 1; transition: transform .12s; }
html.ui-v2 .chart-table[open] summary::after { transform: rotate(90deg); }
html.ui-v2[data-theme="black"] .chart-mean-i.ok { color: #6FD39A; }
html.ui-v2[data-theme="black"] .chart-mean-i.gold { color: #E8B84A; }
html.ui-v2[data-theme="black"] .chart-mean-i.bad { color: #FF8E84; }
html.ui-v2[data-theme="black"] .chart-mean-i.ink, html.ui-v2[data-theme="black"] .chart-head h3 { color: var(--ink); }
html.ui-v2 #infographics.panel { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* ---------- FIX4 আরও (approved 14): plan card on top, language + colour segmented, three groups ---------- */
html.ui-v2 #more-shell:not([hidden]) { display: flex; flex-direction: column; }
html.ui-v2 #more-shell > * { order: 60; }
html.ui-v2 #more-shell > #more-heading { order: 0; }
html.ui-v2 #v2-plan-card { order: 10; }
html.ui-v2 #more-pay, html.ui-v2 #more-pay-receipts { order: 58; }
html.ui-v2 #more-nocode { order: 45; }
html.ui-v2 #v2-look-card { order: 20; }
html.ui-v2 #v2-grp-biz { order: 30; }
html.ui-v2 #v2-row-shop { order: 31; }
html.ui-v2 #v2-greet-card { order: 32; }
html.ui-v2 #v2-grp-data { order: 40; }
html.ui-v2 #more-backup { order: 41; }
html.ui-v2 #v2-sync-card { order: 42; }
html.ui-v2 #more-export { order: 43; }
html.ui-v2 #more-join { order: 44; }
html.ui-v2 #v2-row-delete { order: 49; }
html.ui-v2 #v2-grp-help { order: 50; }
html.ui-v2 #more-help-hub-card { order: 51; }
html.ui-v2 #more-sample { order: 52; }
html.ui-v2 #more-help { order: 53; }
html.ui-v2 #more-invite { order: 54; }
html.ui-v2 #more-install { order: 55; }
html.ui-v2 #more-about { order: 56; }
html.ui-v2 #more-history-host { order: 57; }
html.ui-v2 #more-shell.panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.ui-v2 .v2-group-head { margin: 18px 0 8px; font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--v2-navy); }
html.ui-v2[data-theme="black"] .v2-group-head { color: var(--ink); }
html.ui-v2 .v2-plan-card { background: var(--v2-band-a); border-color: #E7D49C; }
html.ui-v2 .v2-plan-big { margin: 0; font-size: 30px; line-height: 1.2; font-weight: 800; color: var(--v2-navy); }
html.ui-v2 .v2-plan-line { margin: 6px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #E7D49C; font-size: 16px; color: var(--v2-ink-2); }
html.ui-v2 .v2-plan-card .v2-btn { width: auto; min-width: 48px; padding: 0 22px; }
html.ui-v2[data-theme="black"] .v2-plan-big { color: var(--ink); }
html.ui-v2 #more-lang-toggle { display: none; }
html.ui-v2 #v2-look-card .more-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; flex-wrap: nowrap; }
html.ui-v2 #v2-look-card .more-label { font-size: 18px; font-weight: 700; flex: none; }
html.ui-v2 .v2-seg, html.ui-v2 #v2-look-card .theme-switch { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--v2-pale); border: 0; min-width: 0; }
html.ui-v2 .v2-seg button, html.ui-v2 #v2-look-card .theme-switch button {
  min-height: 48px; min-width: 52px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--v2-ink-2);
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
html.ui-v2 .v2-seg button.is-on, html.ui-v2 #v2-look-card .theme-switch button.is-active, html.ui-v2 #v2-look-card .theme-switch button[aria-pressed="true"] { background: var(--v2-navy-fill); color: #FFFDF8; }
html.ui-v2[data-theme="black"] .v2-seg button.is-on, html.ui-v2[data-theme="black"] #v2-look-card .theme-switch button.is-active, html.ui-v2[data-theme="black"] #v2-look-card .theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 360px) { html.ui-v2 .v2-seg button, html.ui-v2 #v2-look-card .theme-switch button { padding: 0 10px; font-size: 15px; } }
html.ui-v2 .v2-more-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; margin: 0 0 10px; text-decoration: none; color: var(--v2-navy); text-align: start; font: inherit; width: 100%; cursor: pointer; }
html.ui-v2 .v2-more-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; color: var(--v2-navy); }
html.ui-v2 .v2-more-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.ui-v2 .v2-more-title { font-size: 18px; line-height: 1.3; font-weight: 800; }
html.ui-v2 .v2-more-sub { font-size: 14px; line-height: 1.3; color: var(--v2-ink-2); }
html.ui-v2 .v2-more-sub:empty { display: none; }
html.ui-v2 .v2-more-chev { flex: none; font-size: 26px; line-height: 1; color: var(--v2-navy); }
html.ui-v2 .v2-more-row.is-danger, html.ui-v2 .v2-more-row.is-danger .v2-more-ico, html.ui-v2 .v2-more-row.is-danger .v2-more-chev { color: var(--v2-bad); }
html.ui-v2 .v2-more-row.is-danger { background: var(--v2-bad-wash); border-color: #E9B9B2; }
html.ui-v2 #more-shell .more-row-btn { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--v2-navy); }
html.ui-v2 #more-help-hub-btn .more-label, html.ui-v2 #more-sample-link .more-label { flex: 1 1 auto; font-size: 18px; font-weight: 800; }
html.ui-v2 #more-help-hub-btn::after, html.ui-v2 #more-sample-link::after { content: "\203A"; font-size: 26px; line-height: 1; }
html.ui-v2 #more-shell .more-section-head { display: flex; align-items: center; gap: 10px; color: var(--v2-navy); }
html.ui-v2[data-theme="black"] #more-shell .more-row-btn, html.ui-v2[data-theme="black"] .v2-more-row, html.ui-v2[data-theme="black"] .v2-more-ico, html.ui-v2[data-theme="black"] .v2-more-chev, html.ui-v2[data-theme="black"] #more-shell .more-section-head, html.ui-v2[data-theme="black"] .v2-more-title { color: var(--ink); }
html.ui-v2[data-theme="black"] .v2-more-sub { color: var(--muted); }

/* ---------- FIX5 Today: bigger warm picture card (approved Today); hero + gold button stay above the fold ---------- */
html.ui-v2 .v2-band { min-height: 112px; padding: 14px 12px 14px 18px; }
html.ui-v2 .v2-band-art { width: 148px; height: 92px; }
@media (max-width: 380px) { html.ui-v2 .v2-band { min-height: 96px; } html.ui-v2 .v2-band-art { width: 112px; height: 70px; } }
@media (max-width: 340px) { html.ui-v2 .v2-band { min-height: 84px; padding: 10px 8px 10px 14px; } html.ui-v2 .v2-band-art { width: 92px; height: 58px; } }
@media (max-height: 640px) { html.ui-v2 .v2-band { margin-bottom: 12px; } }
html.ui-v2 .shell { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

/* ---------- tile pictures (interim crops of the approved picker; Grok regenerates them with the same file names) ---------- */
html.ui-v2 .v2-tile.has-art { min-height: 108px; }
html.ui-v2 .v2-tile-art { display: block; width: 112px; max-width: 70%; height: auto; mix-blend-mode: multiply; margin: -2px 0 0 -2px; }
html.ui-v2 .v2-tile.has-art .v2-tile-ico { display: none; }
html.ui-v2[data-theme="black"] .v2-tile-art { mix-blend-mode: normal; border-radius: 12px; background: #FFFDF8; }
html.ui-v2 .v2-tile:not(.has-art) .v2-tile-art { display: none; }

/* every control on আরও is at least 48px */
html.ui-v2 #more-shell .v2-chip-btn, html.ui-v2 #more-shell .btn-secondary, html.ui-v2 #more-shell .more-row-btn, html.ui-v2 #more-shell summary, html.ui-v2 #more-shell .link-button, html.ui-v2 #more-shell select { min-height: 48px; }
html.ui-v2 #more-shell #v2-lang-seg button, html.ui-v2 #more-shell #v2-look-card .theme-switch button { min-height: 48px; }
html.ui-v2[data-theme="black"] #header-help-btn::before, html.ui-v2[data-theme="black"] #lang-toggle::before { background: transparent; border-color: var(--ink); }
html.ui-v2[data-theme="black"] .v2-back, html.ui-v2[data-theme="black"] .v2-back.is-on { color: var(--ink); }

/* close the day: the ribbon names it (approved 07), so the small repeat label is read aloud only */
html.ui-v2.v2-has-title .v2-close > .v2-greet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Decide rows and khata tiles carry a line icon (approved 08, 10) */
html.ui-v2 .v2-book-tile { justify-content: space-between; align-items: flex-start; }
html.ui-v2 .v2-book-ico { color: var(--v2-navy); display: inline-flex; }
html.ui-v2[data-theme="black"] .v2-book-ico, html.ui-v2[data-theme="black"] .v2-list-ico { color: var(--ink); }
html.ui-v2 .v2-list-ico { color: var(--v2-navy); }

/* first question: the business chip (approved 03) */
html.ui-v2 .v2-type-chip { align-self: flex-start; min-height: 48px; margin: 0 0 10px; max-width: 100%; padding: 0 16px; border-radius: 999px; background: var(--v2-band-b); color: var(--v2-navy); border: 1px solid #E7D49C; font-weight: 700; font-size: 16px; }
html.ui-v2 .v2-first-win { display: flex; flex-direction: column; }
html.ui-v2 .v2-tonight { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding: 14px 16px; border-radius: var(--v2-r-card); background: var(--v2-pale); }
html.ui-v2 .v2-tonight-label { font-size: 14px; color: var(--v2-ink-2); }
html.ui-v2 .v2-tonight-do { font-size: 18px; font-weight: 800; color: var(--v2-navy); }
html.ui-v2[data-theme="black"] .v2-tonight-do { color: var(--ink); }
html.ui-v2 #more-shell .more-card.v2-plan-card { background: var(--v2-band-a); border-color: #E7D49C; }

/* ---------- plans (approved 18): bottom sheet and the quiet strip at the bottom of Today ---------- */
html.ui-v2 .v2-plan-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; margin: 4px 0 12px; padding: 10px 16px; border: 0; border-radius: 16px; background: var(--v2-pale); color: var(--v2-ink-2); font: inherit; font-size: 16px; text-align: start; cursor: pointer; }
html.ui-v2 .v2-plan-strip[hidden] { display: none; }
html.ui-v2 .v2-plan-strip-go { font-weight: 800; color: var(--v2-navy); white-space: nowrap; }
html.ui-v2[data-theme="black"] .v2-plan-strip-go { color: var(--ink); }
html.ui-v2 .v2-plan-sheet { max-height: 88vh; }
html.ui-v2 .v2-plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; padding-top: 10px; }
html.ui-v2 .v2-plan-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 96px; padding: 14px 14px 12px; border-radius: 18px; border: 1.5px solid var(--v2-hair); background: var(--v2-card); color: var(--v2-navy); font: inherit; text-align: start; cursor: pointer; }
html.ui-v2 .v2-plan-opt.is-on { border-color: var(--v2-navy); background: var(--v2-band-a); }
html.ui-v2 .v2-plan-opt-name { font-size: 16px; color: var(--v2-ink-2); }
html.ui-v2 .v2-plan-opt-price { font-size: 32px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
html.ui-v2 .v2-plan-opt-save { position: absolute; top: -12px; right: 10px; padding: 2px 10px; border-radius: 999px; background: #17693F; color: #fff; font-size: 14px; font-weight: 800; }
html.ui-v2 .v2-plan-pay, html.ui-v2 .v2-plan-wa { width: 100%; margin: 0 0 8px; text-decoration: none; }
html.ui-v2 .v2-plan-nocut { margin: 0 0 12px; text-align: center; font-size: 14px; color: var(--v2-ink-2); }
html.ui-v2 .v2-plan-later { display: block; width: 100%; min-height: 48px; border: 0; background: transparent; color: var(--v2-navy); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
html.ui-v2[data-theme="black"] .v2-plan-opt, html.ui-v2[data-theme="black"] .v2-plan-later { color: var(--ink); }
html.ui-v2[data-theme="black"] .v2-plan-opt.is-on { background: var(--sunk); border-color: var(--ink); }

/* ---------- khata tile pictures, day-list item pictures, i-dialog clip (interim crops; Grok replaces the files) ---------- */
html.ui-v2 .v2-book-art { display: block; width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; }
html.ui-v2 .v2-book-tile.has-art .v2-book-ico { display: none; }
html.ui-v2[data-theme="black"] .v2-book-art { mix-blend-mode: normal; border-radius: 10px; background: #FFFDF8; }
html.ui-v2 .v2-day-sums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 14px; padding: 14px 14px 12px; border: 1px solid var(--v2-hair); border-radius: var(--v2-r-card); background: var(--v2-card); box-shadow: var(--v2-e1); }
html.ui-v2 .v2-day-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.ui-v2 .v2-day-sum-l { font-size: 14px; color: var(--v2-ink-2); }
html.ui-v2 .v2-day-sum-n { font-size: 20px; font-weight: 800; color: var(--v2-navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html.ui-v2 .v2-day-sum.is-ok .v2-day-sum-n { color: #17693F; }
html.ui-v2[data-theme="black"] .v2-day-sum-n { color: var(--ink); }
html.ui-v2 .v2-bazar-row { display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0 0 8px; padding: 10px 14px; border: 1px solid var(--v2-hair); border-radius: 16px; background: var(--v2-card); box-shadow: var(--v2-e1); }
html.ui-v2 .v2-item-pic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--v2-navy); }
html.ui-v2 .v2-item-pic img { width: 36px; height: 36px; object-fit: contain; mix-blend-mode: multiply; }
html.ui-v2[data-theme="black"] .v2-item-pic img { mix-blend-mode: normal; background: #FFFDF8; border-radius: 8px; }
html.ui-v2 .v2-bazar-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
html.ui-v2 .v2-bazar-name { font-size: 18px; font-weight: 800; color: var(--v2-navy); overflow-wrap: anywhere; }
html.ui-v2 .v2-bazar-qty { font-size: 14px; color: var(--v2-ink-2); }
html.ui-v2 .v2-bazar-price { flex: none; font-size: 18px; font-weight: 800; color: var(--v2-navy); font-variant-numeric: tabular-nums; }
html.ui-v2[data-theme="black"] .v2-bazar-name, html.ui-v2[data-theme="black"] .v2-bazar-price { color: var(--ink); }
html.ui-v2 .v2-info-play { width: 100%; margin: 0 0 8px; }
html.ui-v2 .v2-info-video { display: block; width: 100%; max-height: 220px; margin: 8px 0; border-radius: 12px; background: #000; }

/* ---------- states (approved 17): empty, error, offline + update bar, low space ---------- */
html.ui-v2 .v2-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 0; }
html.ui-v2 .v2-empty-art { display: block; width: 200px; max-width: 70%; height: auto; margin: 4px auto 8px; mix-blend-mode: multiply; }
html.ui-v2[data-theme="black"] .v2-empty-art { mix-blend-mode: normal; border-radius: 16px; background: #FFFDF8; }
html.ui-v2 .v2-empty-state .v2-empty { margin: 0 0 14px; font-size: 18px; color: var(--v2-ink-2); }
html.ui-v2 .v2-empty-state .v2-go { width: 100%; }
html.ui-v2 .v2-empty-example { display: inline-flex; align-items: center; min-height: 48px; margin-top: 4px; color: var(--v2-navy); font-weight: 800; }
html.ui-v2[data-theme="black"] .v2-empty-example { color: var(--ink); }
html.ui-v2 .v2-field:has(.v2-err:not([hidden])) .v2-bigbox { border-color: var(--v2-bad); box-shadow: 0 0 0 2px var(--v2-bad-wash); }
html.ui-v2 .v2-err { color: var(--v2-bad); font-weight: 700; }
html.ui-v2 .offline-line { padding: 6px 14px; font-size: 14px; background: var(--v2-pale); color: var(--v2-ink-2); border-bottom: 0; }
html.ui-v2 .update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border: 0; border-radius: 14px; background: var(--v2-navy); color: #FFFDF8; font-size: 16px; text-align: start; box-shadow: var(--v2-e2); }
html.ui-v2 .update-bar[hidden] { display: none; }
html.ui-v2 .update-bar .link-button { min-height: 48px; padding: 0 8px; color: #FFD66B; font-weight: 800; }
html.ui-v2 .storage-warn { margin: 8px var(--v2-gutter); padding: 12px 14px; border: 2px solid var(--v2-bad); border-radius: 16px; background: var(--v2-bad-wash); color: var(--v2-bad); font-size: 16px; font-weight: 700; text-align: start; }
html.ui-v2 .storage-warn[hidden] { display: none; }
html.ui-v2 .storage-warn .link-button { display: inline-flex; align-items: center; min-height: 48px; color: var(--v2-navy); font-weight: 800; }

/* ---------- restaurant day list (approved 12): four tabs, gold button follows the tab ---------- */
html.ui-v2 .v2-q-hint { margin: -2px 0 10px; font-size: 16px; line-height: 1.45; color: var(--v2-ink-2); }
html.ui-v2 .v2-day-tabs { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 999px; background: var(--v2-pale); }
html.ui-v2 .v2-day-tab { flex: 1 1 0; min-width: 0; min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: var(--v2-ink-2); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
html.ui-v2 .v2-day-tab.is-on { background: var(--v2-card); color: var(--v2-navy); box-shadow: var(--v2-e1); font-weight: 800; }
html.ui-v2[data-theme="black"] .v2-day-tab.is-on { color: var(--ink); }
html.ui-v2 .v2-day-pane[hidden] { display: none; }
html.ui-v2 .v2-orig-act { display: none; }
html.ui-v2 .v2-day-go { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin: 14px 0 0; padding: 8px 0; background: var(--v2-page); }
html.ui-v2 .v2-day-go .v2-btn { width: 100%; }
html.ui-v2 #shop-ops.panel { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* T1 guest nudge. All new-look guest rules stay under html.ui-v2. */
html.ui-v2 .v2-guest-privacy { margin: 10px 0; color: var(--v2-ink-2); font-size: 14px; line-height: 1.45; }
html.ui-v2 .v2-guest-strip { margin: 12px 0; padding: 14px; border: 1px solid var(--v2-line); border-radius: 16px; background: var(--v2-card); color: var(--v2-ink); }
html.ui-v2 .v2-guest-strip p { margin: 0 0 6px; font-size: 16px; line-height: 1.45; }
html.ui-v2 .v2-guest-soft-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px; border: 1px solid var(--v2-navy); border-radius: 12px; color: var(--v2-navy); font-size: 16px; font-weight: 800; text-decoration: none; }
html.ui-v2[data-theme="black"] .v2-guest-soft-btn { color: var(--ink); }
html.ui-v2 .v2-guest-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 0; background: rgba(12, 18, 42, .46); }
html.ui-v2 .v2-guest-overlay[hidden] { display: none; }
html.ui-v2 .v2-guest-sheet { width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--v2-card); color: var(--v2-ink); box-shadow: var(--v2-e2); }
html.ui-v2 .v2-guest-grab { display: block; width: 42px; height: 4px; margin: 0 auto 18px; border-radius: 99px; background: var(--v2-line); }
html.ui-v2 #guest-nudge-title { margin: 0 0 10px; color: var(--v2-navy); font-size: 26px; line-height: 1.25; }
html.ui-v2[data-theme="black"] #guest-nudge-title { color: var(--ink); }
html.ui-v2 #guest-nudge-line { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }
html.ui-v2 .guest-nudge-free, html.ui-v2 .v2-guest-note { margin: 0 0 12px; color: var(--v2-ink-2); font-size: 16px; }
html.ui-v2 .v2-guest-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; border-radius: 14px; background: var(--v2-gold); color: #241C08; font-size: 17px; font-weight: 800; text-align: center; text-decoration: none; }
html.ui-v2 .v2-guest-later { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 4px; border: 0; background: transparent; color: var(--v2-navy); font: inherit; font-size: 16px; font-weight: 800; }
html.ui-v2[data-theme="black"] .v2-guest-later { color: var(--ink); }

/* New look: a Light ERP book (grocery "To buy", sizes, study book, payables, close the day...) on its own page under খাতা.
   Only the frame is styled here; the book's own code and classes are unchanged. */
html.ui-v2 .v2-book-page { background: transparent; border: 0; box-shadow: none; padding: 0; }
html.ui-v2 .v2-book-page .v2-lerp-page > .dc-lerp-panel { background: var(--card); color: var(--ink); border: 1px solid var(--v2-hair, var(--line)); border-radius: var(--v2-r-card, 20px); box-shadow: var(--v2-e1, none); padding: 14px; margin: 0 0 16px; }
html.ui-v2 .v2-book-page .dc-lerp-panel h2,
html.ui-v2 .v2-book-page .dc-lerp-panel h3,
html.ui-v2 .v2-book-page .dc-lerp-panel h4,
html.ui-v2 .v2-book-page .dc-lerp-panel label,
html.ui-v2 .v2-book-page .dc-lerp-panel legend,
html.ui-v2 .v2-book-page .dc-lerp-panel strong,
html.ui-v2 .v2-book-page .dc-lerp-panel p,
html.ui-v2 .v2-book-page .dc-lerp-panel span,
html.ui-v2 .v2-book-page .dc-lerp-panel li,
html.ui-v2 .v2-book-page .dc-lerp-panel td,
html.ui-v2 .v2-book-page .dc-lerp-panel th,
html.ui-v2 .v2-book-page .dc-lerp-panel dt,
html.ui-v2 .v2-book-page .dc-lerp-panel dd { color: var(--ink); }
html.ui-v2 .v2-book-page .dc-lerp-panel .field-hint,
html.ui-v2 .v2-book-page .dc-lerp-panel .panel-hint,
html.ui-v2 .v2-book-page .dc-lerp-panel small { color: var(--v2-ink-2, var(--muted)); }
html.ui-v2[data-theme="black"] .v2-book-page .dc-lerp-panel .field-hint,
html.ui-v2[data-theme="black"] .v2-book-page .dc-lerp-panel .panel-hint,
html.ui-v2[data-theme="black"] .v2-book-page .dc-lerp-panel small { color: var(--muted); }
html.ui-v2 .v2-book-page .dc-lerp-panel button,
html.ui-v2 .v2-book-page .dc-lerp-panel input,
html.ui-v2 .v2-book-page .dc-lerp-panel select,
html.ui-v2 .v2-book-page .dc-lerp-panel textarea,
html.ui-v2 .v2-book-page .dc-lerp-panel summary { min-height: 48px; }
html.ui-v2 .v2-book-page .dc-lerp-panel button,
html.ui-v2 .v2-book-page .dc-lerp-panel input,
html.ui-v2 .v2-book-page .dc-lerp-panel select,
html.ui-v2 .v2-book-page .dc-lerp-panel textarea { border-radius: var(--v2-r-input, 14px); }
html.ui-v2 .v2-book-page .dc-lerp-panel input[type="checkbox"],
html.ui-v2 .v2-book-page .dc-lerp-panel input[type="radio"] { min-height: 24px; min-width: 24px; }

/* Black theme (contrast pass): the navy that is TEXT / ICON / OUTLINE becomes the theme ink (navy on black was 1.2:1).
   Navy used as a FILL keeps the navy (--v2-navy-fill) with cream text on it, and a light outline so the fill reads on black. */
html.ui-v2[data-theme="black"] { --v2-navy: var(--ink); }
html.ui-v2[data-theme="black"] .v2-chip-btn.is-on, html.ui-v2[data-theme="black"] .v2-chip-btn[aria-pressed="true"] { border-color: var(--ink); }
html.ui-v2[data-theme="black"] .tab-btn.is-active, html.ui-v2[data-theme="black"] .tab-btn[aria-current="page"] { color: var(--gold, #F2B632); background: rgba(242, 182, 50, .16); border-radius: 14px; }
html.ui-v2[data-theme="black"] .tab-btn.is-active .tab-icon, html.ui-v2[data-theme="black"] .tab-btn[aria-current="page"] .tab-icon { stroke: var(--gold, #F2B632); }

/* Contrast pass: the edge of a field / outline button / filter chip must be visible (>= 3:1 against what is around it). */
html.ui-v2 { --v2-field-line: #7C7898; }
html.ui-v2[data-theme="black"] { --v2-field-line: #8A8778; }
html.ui-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { border-color: var(--v2-field-line); }
html.ui-v2 select { border-color: var(--v2-field-line); }
html.ui-v2 textarea { border-color: var(--v2-field-line); }
html.ui-v2 .btn-secondary { border-color: var(--v2-field-line); }
html.ui-v2 .v2-chip-btn { border-color: var(--v2-field-line); }
html.ui-v2 .v2-bigbox { border-color: var(--v2-field-line); }
html.ui-v2[data-theme="black"] .v2-bigbox, html.ui-v2[data-theme="black"] .v2-name-input { border-color: var(--v2-field-line); }

/* ---------- overview round, step A: small fixes (owner-noted) ---------- */
/* A1: the floating "+ Write" button never hides the last row: room under the page, and a row scrolled into view stops above the button */
/* (the bar is pinned 72px above the bottom, so the page keeps >= 96px under the last row even when it cannot scroll) */
html.ui-v2 .v2-books { padding-bottom: 96px; }
html.ui-v2 .v2-books .v2-list-row, html.ui-v2 .v2-books .v2-book-tile, html.ui-v2 .v2-books .v2-month, html.ui-v2 .v2-books .v2-write-list { scroll-margin-bottom: 160px; }
html.ui-v2 .v2-more-books { margin-bottom: 12px; }
/* A2: a sheet's title is focused by code so a screen reader starts there; no box is drawn for a tap or click, a tidy ring for the keyboard */
html.ui-v2 .v2-info-title:focus, html.ui-v2 .v2-info [tabindex="-1"]:focus, html.ui-v2 .v2-guest-sheet [tabindex="-1"]:focus { outline: none; box-shadow: none; }
html.ui-v2 .v2-info-title:focus-visible, html.ui-v2 .v2-info [tabindex="-1"]:focus-visible, html.ui-v2 .v2-guest-sheet [tabindex="-1"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--v2-ribbon-edge, #DE9F15); border-radius: 8px; }
/* A3: Light ERP book pages: the inner headings follow the approved look (navy, section 20 / sub 17), the book sits in the same card frame */
html.ui-v2 .v2-book-page .dc-lerp-panel h2, html.ui-v2 .v2-book-page .dc-lerp-panel h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--v2-navy, var(--ink)); }
html.ui-v2 .v2-book-page .dc-lerp-panel h4 { margin: 14px 0 6px; font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--v2-navy, var(--ink)); }
html.ui-v2 .v2-book-page .dc-lerp-panel article { background: var(--v2-card, var(--card)); border: 1px solid var(--v2-hair, var(--line)); border-radius: 14px; padding: 10px 12px; margin: 0 0 8px; }
html.ui-v2 .v2-book-page .dc-lerp-panel:focus, html.ui-v2 .v2-book-page .dc-lerp-panel:focus:not(:focus-visible) { outline: none; }
html.ui-v2 .v2-book-page .dc-lerp-panel:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--v2-ribbon-edge, #DE9F15); }

/* ---------- overview round, step B: the Books (খাতা) page grows (approved: docs/ux/approved/overview/D-khata-grows.jpg) ---------- */
html.ui-v2 .v2-ov-card { margin: 0 0 14px; padding: 4px 16px; background: var(--v2-card, var(--card)); border: 1px solid var(--v2-hair, var(--line)); border-radius: var(--v2-r-card, 20px); box-shadow: var(--v2-e1, none); }
html.ui-v2 .v2-ov-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 0; box-sizing: border-box; background: none; border: 0; border-bottom: 1px solid var(--v2-hair, var(--line)); color: var(--ink); font: inherit; text-align: start; }
html.ui-v2 .v2-ov-row:last-child { border-bottom: 0; }
html.ui-v2 button.v2-ov-row { cursor: pointer; }
html.ui-v2 .v2-ov-label { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.3; }
html.ui-v2 .v2-ov-val { flex: none; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
html.ui-v2 .v2-ov-val.is-ok { color: var(--v2-ok, #17693F); }
html.ui-v2 .v2-ov-val.is-bad { color: var(--loss, #A8352A); }
html.ui-v2 .v2-ov-chip { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--v2-ok-wash, #E6F3EC); color: var(--v2-ok, #17693F); font-size: 14px; font-weight: 800; }
html.ui-v2 .v2-ov-head { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--muted); line-height: 1.3; }
html.ui-v2 .v2-late, html.ui-v2 .v2-shopbooks { margin: 0 0 14px; }
html.ui-v2 .v2-late .v2-late-row { margin: 0 0 8px; }
/* tiles that have data: name, big number, small line (no picture) */
html.ui-v2 .v2-book-tile.is-rich { justify-content: flex-start; gap: 0; }
html.ui-v2 .v2-book-tile.is-rich .v2-book-art, html.ui-v2 .v2-book-tile.is-rich .v2-book-ico { display: none; }
html.ui-v2 .v2-book-num { font-size: 22px; line-height: 1.3; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
html.ui-v2 .v2-book-sub.is-bad { color: var(--loss, #A8352A); font-weight: 700; }
html.ui-v2 .v2-book-sub.is-warn { color: var(--v2-ink-2, var(--muted)); }
/* this week: seven bars */
html.ui-v2 .v2-week-card { display: block; width: 100%; margin: 0 0 14px; padding: 14px; box-sizing: border-box; text-align: start; cursor: pointer; background: var(--v2-card, var(--card)); border: 1px solid var(--v2-hair, var(--line)); border-radius: var(--v2-r-card, 20px); box-shadow: var(--v2-e1, none); color: var(--ink); font: inherit; }
html.ui-v2 .v2-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
html.ui-v2 .v2-week-head .v2-ov-head { margin: 0; font-size: 17px; color: var(--v2-navy, var(--ink)); }
html.ui-v2 .v2-week-pill { padding: 3px 10px; border-radius: 999px; background: var(--v2-ok-wash, #E6F3EC); color: var(--v2-ok, #17693F); font-size: 14px; font-weight: 800; }
html.ui-v2 .v2-week-bars { display: flex; align-items: stretch; gap: 8px; height: 120px; margin-top: 12px; }
html.ui-v2 .v2-week-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
html.ui-v2 .v2-week-box { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
html.ui-v2 .v2-week-bar { display: block; flex: none; background: var(--v2-ok, #17693F); border-radius: 6px 6px 0 0; min-height: 4px; }
html.ui-v2 .v2-week-bar.is-gap { height: 4px; background: var(--v2-hair, var(--line)); border-radius: 2px; }
html.ui-v2 .v2-week-day { display: block; flex: none; margin-top: 4px; text-align: center; font-size: 14px; line-height: 1.3; color: var(--muted); }

/* ---------- no-force first run (10 Oct 2026): the quiet "try this" card and "what is here" list. Only under the new look. ---------- */
html.ui-v2 .v2-try { margin: 0 0 16px; padding: 16px; background: var(--v2-card); border: 1px solid var(--v2-hair); border-radius: var(--v2-card-radius, 16px); box-shadow: var(--v2-e1); }
html.ui-v2 .v2-try-tag { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 14px; font-weight: 800; }
html.ui-v2 .v2-try-title { margin: 0 0 6px; font-size: 20px; line-height: 1.35; font-weight: 800; }
html.ui-v2 .v2-try-line { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--muted); }
html.ui-v2 .v2-try-later { display: block; width: 100%; min-height: 48px; margin-top: 4px; background: none; border: 0; color: var(--accent); font-size: 16px; font-weight: 700; text-decoration: underline; cursor: pointer; }
html.ui-v2 .v2-try-later:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }
html.ui-v2 .v2-join .v2-join-later { margin-top: 2px; }
html.ui-v2 .v2-here { margin: 0 0 16px; }
html.ui-v2 .v2-here-title { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
html.ui-v2 .v2-here-row { margin-bottom: 8px; }
html.ui-v2 .v2-here-row.is-done .v2-row-name { color: var(--muted); }
html.ui-v2 .v2-row-tick { color: var(--ok, var(--accent)); font-weight: 800; }
html.ui-v2 .v2-skip { display: none; min-height: 48px; padding: 0 10px; background: none; border: 0; color: var(--accent); font-size: 16px; font-weight: 700; text-decoration: underline; cursor: pointer; }
html.ui-v2 .v2-skip.is-on { display: inline-flex; align-items: center; }
html.ui-v2 .v2-skip:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }
html.ui-v2 .v2-optional-note { margin: 2px 0 8px; }