/* T73 · final visual layer. Load after app.css; opt in with body.clean-ui.
   Reference: the 14 approved white/blue screens. Existing IDs and UI state
   classes remain authoritative; this sheet never opens hidden views. */
body.clean-ui {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --ink: #111827;
  --muted: #64748b;
  --line: #e8edf3;
  --brand: #087cf0;
  --brand-2: #0868cd;
  --accent: #087cf0;
  --pos: #208b49;
  --neg: #d7473c;
  --warn: #936500;
  --clean-blue: #087cf0;
  --clean-blue-ink: #075aa9;
  --clean-blue-wash: #eaf5ff;
  --clean-green: #16863b;
  --clean-green-wash: #e7f8ed;
  --clean-coral: #d73e32;
  --clean-coral-wash: #fff0ec;
  --clean-yellow: #906000;
  --clean-yellow-wash: #fff7d9;
  --clean-icon-blue: linear-gradient(145deg, #ddf1ff, #a6d7ff);
  --clean-icon-green: linear-gradient(145deg, #e4fbe9, #a3edb7);
  --clean-icon-coral: linear-gradient(145deg, #ffe7e0, #ffb3a6);
  --clean-icon-yellow: linear-gradient(145deg, #fff7d5, #ffdf78);
  --cream: var(--bg);
  --white: var(--surface);
  --card: var(--surface);
  --card-bg: var(--surface-2);
  --text: var(--ink);
  --pri: var(--brand);
  --green-deep: var(--brand);
  --green-2: var(--brand-2);
  --green-3: var(--brand-2);
  --green-4: var(--clean-blue-wash);
  --green-5: var(--bg);
  --gold: var(--brand);
  --gold-light: var(--muted);
  --gold-deep: var(--brand-2);
  --gold-start: var(--brand);
  --surface-cream: var(--surface);
  --surface-wash: var(--clean-yellow-wash);
  --surface-wash2: var(--surface-2);
  --green-wash: var(--clean-blue-wash);
  --green-wash2: var(--clean-green-wash);
  --green-line: #c9ead5;
  --green-strong: var(--clean-green);
  --gold-wash: var(--clean-yellow-wash);
  --gold-line: #f2e4ac;
  --gold-text: var(--clean-yellow);
  --gold-text2: var(--brand-2);
  --line-soft: var(--line);
  --line-pill: var(--line);
  --line-input: #dce4ed;
  --line-nav: var(--line);
  --line-dash: var(--line);
  --seg-bg: #f1f5f9;
  --seg-track: #e7edf5;
  --muted-2: var(--muted);
  --muted-3: var(--muted);
  --muted-4: var(--muted);
  --muted-5: var(--muted);
  --muted-6: var(--muted);
  --muted-7: #475569;
  --muted-8: var(--muted);
  --muted-9: #475569;
  --muted-10: var(--muted);
  --muted-11: #475569;
  --muted-12: #334155;
  --dark-soft: var(--muted);
  --dark-soft2: var(--muted);
  --dark-soft3: var(--muted);
  --dark-soft4: var(--muted);
  --radius: 14px;
  --radius-1: 10px;
  --radius-2: 12px;
  --radius-3: 12px;
  --radius-4: 14px;
  --radius-5: 16px;
  --shadow: 0 2px 10px rgb(15 23 42 / 3%);
  --shadow-card: none;
  --shadow-banner: none;
  --shadow-btn-gold: none;
  --shadow-omni: none;
  --grad-btn-gold: linear-gradient(135deg, #1889fa, #087cf0);
  --grad-banner: var(--clean-blue-wash);
  --grad-omni: var(--brand);
  --grad-progress: var(--brand);
  --grad-hero: var(--bg);
  --h-input: 48px;
  --h-btn: 48px;
  --h-pill: 44px;
  --h-nav: 78px;
  min-width: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

/* Explicit and system dark mode use the same semantic palette. */
:root[data-theme="dark"] body.clean-ui {
  --bg: #101722; --surface: #172130; --surface-2: #1d2a3b;
  --ink: #f1f5fa; --muted: #a6b5c8; --line: #2b3a4d;
  --brand: #55a8ff; --brand-2: #8dc4ff; --accent: #55a8ff;
  --pos: #70d994; --neg: #ff9b8e; --warn: #f6d581;
  --clean-blue: #55a8ff; --clean-blue-ink: #9dd1ff; --clean-blue-wash: #192f47;
  --clean-green: #83dfa2; --clean-green-wash: #18382b;
  --clean-coral: #ffaba0; --clean-coral-wash: #412b2d;
  --clean-yellow: #ffe097; --clean-yellow-wash: #393424;
  --clean-icon-blue: linear-gradient(145deg, #244767, #1b3b5b);
  --clean-icon-green: linear-gradient(145deg, #24563b, #1c452f);
  --clean-icon-coral: linear-gradient(145deg, #65403c, #4d302e);
  --clean-icon-yellow: linear-gradient(145deg, #66562b, #4b4027);
  --line-input: #3b4c62; --seg-bg: #1e2c3f; --seg-track: #2b3a50;
  --green-line: #2b5940; --gold-line: #665b35;
  --muted-7: #b8c7d8; --muted-9: #b8c7d8; --muted-11: #b8c7d8; --muted-12: #c5d2e0;
  --shadow: 0 2px 12px rgb(0 0 0 / 10%);
  --grad-btn-gold: #1679df;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.clean-ui {
    --bg: #101722; --surface: #172130; --surface-2: #1d2a3b;
    --ink: #f1f5fa; --muted: #a6b5c8; --line: #2b3a4d;
    --brand: #55a8ff; --brand-2: #8dc4ff; --accent: #55a8ff;
    --pos: #70d994; --neg: #ff9b8e; --warn: #f6d581;
    --clean-blue: #55a8ff; --clean-blue-ink: #9dd1ff; --clean-blue-wash: #192f47;
    --clean-green: #83dfa2; --clean-green-wash: #18382b;
    --clean-coral: #ffaba0; --clean-coral-wash: #412b2d;
    --clean-yellow: #ffe097; --clean-yellow-wash: #393424;
    --clean-icon-blue: linear-gradient(145deg, #244767, #1b3b5b);
    --clean-icon-green: linear-gradient(145deg, #24563b, #1c452f);
    --clean-icon-coral: linear-gradient(145deg, #65403c, #4d302e);
    --clean-icon-yellow: linear-gradient(145deg, #66562b, #4b4027);
    --line-input: #3b4c62; --seg-bg: #1e2c3f; --seg-track: #2b3a50;
    --green-line: #2b5940; --gold-line: #665b35;
    --muted-7: #b8c7d8; --muted-9: #b8c7d8; --muted-11: #b8c7d8; --muted-12: #c5d2e0;
    --shadow: 0 2px 12px rgb(0 0 0 / 10%);
    --grad-btn-gold: #1679df;
    color-scheme: dark;
  }
}

.clean-ui *, .clean-ui *::before, .clean-ui *::after { box-sizing: border-box; }
.clean-ui :is(button, input, select, textarea) { font-family: inherit; }
.clean-ui :is(h1, h2, h3, h4, p) { overflow-wrap: break-word; }
.clean-ui :is(h1, h2, h3, h4) { color: var(--ink); letter-spacing: -.025em; }
.clean-ui h1 { font-size: 28px; line-height: 1.15; font-weight: 750; }
.clean-ui h2 { font-size: 20px; line-height: 1.25; font-weight: 700; }
.clean-ui h3 { font-size: 17px; line-height: 1.3; font-weight: 650; }
.clean-ui a { color: var(--brand-2); text-underline-offset: 3px; }
.clean-ui .muted, .clean-ui .small, .clean-ui small { color: var(--muted); }
.clean-ui .small { font-size: 13px; }
.clean-ui svg { stroke-width: 1.85; }
.clean-ui :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand); outline-offset: 3px;
}
.clean-ui :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .52; }
.clean-ui button { -webkit-tap-highlight-color: transparent; }
.clean-ui :is(input, select, textarea) { accent-color: var(--brand); }
.clean-ui :is(input, select, textarea)::placeholder { color: var(--muted); opacity: .85; }

/* Shell and navigation. No viewport-width overflow or simulated OS chrome. */
.clean-ui #app.app-shell,
.clean-ui #app.app-shell:is(.app-voice, .app-ritual),
.clean-ui #view-voice,
.clean-ui .app-shell.dark-hero {
  background: var(--bg); color: var(--ink);
}
.clean-ui #app.app-shell { padding-bottom: calc(92px + var(--safe-b)); }
.clean-ui .status-bar {
  min-height: calc(22px + var(--safe-t)); height: auto;
  padding: calc(6px + var(--safe-t)) 18px 4px;
  color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0;
}
.clean-ui .topbar.top-header,
.clean-ui #app.app-shell.app-ritual > .top-header {
  position: relative; top: auto; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 12px 18px 14px; gap: 10px; flex-wrap: wrap;
  background: var(--bg); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.clean-ui .top-title-group { flex: 1; min-width: 0; }
.clean-ui .app-shell .top-title-group h1,
.clean-ui #view-voice .voice-head h1,
.clean-ui #view-scanner .scanner-head h1,
.clean-ui #view-tx .tx-head h1 {
  color: var(--ink); font-size: 24px; line-height: 1.2; font-weight: 700;
}
.clean-ui .top-title-group .eyebrow,
.clean-ui .app-shell .top-title-group span.eyebrow,
.clean-ui #view-voice .voice-head .eyebrow {
  color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .025em;
}
.clean-ui .top-header .title-with-nav { min-width: 0; gap: 2px; }
.clean-ui .top-header .month-label { color: var(--ink); font-size: 17px; font-weight: 600; }
.clean-ui .top-header.no-month :is(#prev-month, #next-month) { min-width: 0; width: 0; padding: 0; }
.clean-ui #app.app-shell.app-ritual :is(.month-label, .card-title) { color: var(--ink); }
.clean-ui #app.app-shell.app-ritual .top-title-group span.eyebrow { color: var(--muted); }
.clean-ui .top-actions { gap: 3px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.clean-ui .top-header .icon-btn,
.clean-ui :is(.icon-btn, .icon-pill, .sub-back, .sheet-close) {
  min-width: 44px; min-height: 44px; height: 44px; border-radius: 12px;
  background: transparent; color: var(--ink); box-shadow: none;
}
.clean-ui .top-header .icon-btn svg { width: 22px; height: 22px; }
.clean-ui :is(.icon-btn, .icon-pill, .sub-back):hover { background: var(--surface-2); }
.clean-ui .sub-back { width: fit-content; padding: 0 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.clean-ui #app.app-shell.app-ritual .icon-btn { color: var(--ink); }
.clean-ui .clean-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.2; }
.clean-ui .clean-brand :is(img, .clean-brand-mark) { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 12px; }
.clean-ui .clean-brand-mark { display: inline-grid; place-items: center; background: #087cf0; color: #fff; }
.clean-ui .clean-brand-mark svg { width: 28px; height: 28px; }
.clean-ui .clean-brand > svg { width: 40px; height: 40px; padding: 7px; flex: none; border-radius: 12px; color: #fff; background: #087cf0; }
.clean-ui .clean-avatar { width: 44px; height: 44px; min-width: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--clean-icon-blue); color: var(--clean-blue-ink); font-size: 20px; font-weight: 600; border: 0; }
.clean-ui .clean-notifications { position: relative; width: 44px; height: 44px; min-width: 44px; display: inline-grid; place-items: center; border-radius: 12px; color: var(--ink); }
.clean-ui .clean-notifications svg { width: 24px; height: 24px; }
.clean-ui .clean-notifications .clean-notification-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border: 2px solid var(--bg); border-radius: 50%; background: #ff8f7e; }
.clean-ui .clean-greeting { margin: 3px 0 4px; color: var(--ink); font-size: 29px; line-height: 1.15; font-weight: 750; letter-spacing: -.035em; }
.clean-ui .clean-greeting + p { margin: 0 0 4px; color: var(--muted); font-size: 15px; }
.clean-ui .clean-page-title { margin: 8px 0 16px; color: var(--ink); font-size: 29px; line-height: 1.15; font-weight: 750; letter-spacing: -.035em; }
.clean-ui .view { width: 100%; max-width: 760px; padding: 0 18px 20px; margin: 0 auto; min-width: 0; }
.clean-ui .view.screen { width: 100%; max-width: 760px; padding: 0; margin: 0 auto; }
.clean-ui .content-area,
.clean-ui .view.screen .content-area,
.clean-ui #view-voice .content-area { padding: 0 18px 24px; gap: 14px; min-width: 0; }
.clean-ui .content-area > * { min-width: 0; }
.clean-ui .section-head { align-items: center; margin: 8px 0 16px; flex-wrap: wrap; }
.clean-ui .section-head h1 { font-size: 28px; }
.clean-ui .section-head p { font-size: 14px; line-height: 1.45; }
.clean-ui .bottom-nav {
  left: 50%; right: auto; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 760px; height: calc(78px + var(--safe-b));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 8px calc(8px + var(--safe-b)); background: var(--surface);
  border-top: 1px solid var(--line); box-shadow: none;
}
.clean-ui .nav-item { min-width: 0; min-height: 48px; gap: 4px; padding: 2px; color: var(--muted); font-size: 10.5px; font-weight: 500; }
.clean-ui .nav-item.active { color: var(--brand); }
.clean-ui .nav-item :is(svg, .nav-emoji svg) { width: 23px; height: 23px; }
.clean-ui .nav-item .nav-emoji { display: inline-grid; place-items: center; font-size: 22px; }
.clean-ui .bottom-nav #fab.nav-item { position: static; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; touch-action: manipulation; }
.clean-ui .nav-omni { width: 54px; height: 54px; margin: -8px auto 0; border: 0; border-radius: 50%; background: #087cf0; color: #fff; box-shadow: none; }
.clean-ui .nav-omni svg { width: 29px; height: 29px; stroke-width: 2; }
.clean-ui .nav-item .nav-omni-label { color: var(--muted); font-size: 10px; font-weight: 500; }
/* This is the existing user's explicit navigation-visibility preference. */
.clean-ui.no-tabbar .bottom-nav { display: none; }
.clean-ui.no-tabbar #app.app-shell { padding-bottom: calc(24px + var(--safe-b)); }

/* Components match the light bordered surfaces in all fourteen references. */
.clean-ui :is(.card, .mini-stat, .trip-card, .task-item, .lic-card) {
  min-width: 0; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 13px; box-shadow: none;
}
.clean-ui .card { padding: 15px; margin-bottom: 12px; }
.clean-ui .content-area > .card { margin-bottom: 0; }
.clean-ui .card-head { gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.clean-ui :is(.card-title-row, .goal-head) { gap: 8px; flex-wrap: wrap; }
.clean-ui :is(.card-title, .card-head h2) { color: var(--ink); font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.clean-ui .card-head h2 svg { color: var(--brand); width: 19px; height: 19px; }
.clean-ui .card-title-row { margin-bottom: 12px; }
.clean-ui .grid-2 { gap: 10px; }
.clean-ui .mini-stat { padding: 12px; }
.clean-ui .mini-stat > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.clean-ui .mini-stat strong { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -.025em; }
.clean-ui :is(.clean-home-stat, .clean-review-stat) { display: flex; align-items: center; gap: 10px; min-width: 0; }
.clean-ui :is(.clean-home-stat, .clean-review-stat) > div { min-width: 0; }
.clean-ui .clean-home-stat :is(small, .stat-label) { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.clean-ui .clean-home-stat strong { color: var(--ink); font-size: 22px; font-weight: 700; }
.clean-ui .clean-icon { width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: var(--clean-icon-blue); color: var(--clean-blue-ink); }
.clean-ui .clean-icon svg { width: 23px; height: 23px; }
.clean-ui .tone-blue { background: var(--clean-icon-blue); color: var(--clean-blue-ink); }
.clean-ui .tone-green { background: var(--clean-icon-green); color: var(--clean-green); }
.clean-ui .tone-coral { background: var(--clean-icon-coral); color: var(--clean-coral); }
.clean-ui .tone-yellow { background: var(--clean-icon-yellow); color: var(--clean-yellow); }
.clean-ui .clean-home-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 2px 0 4px; }
.clean-ui .clean-home-actions > button { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 10px 4px; min-height: 100px; color: var(--ink); font-size: 14px; font-weight: 500; }
.clean-ui .clean-home-actions .clean-icon { width: 64px; height: 64px; }
.clean-ui .clean-home-actions .clean-icon svg { width: 29px; height: 29px; }
.clean-ui .clean-home-blocks,
.clean-ui #home-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.clean-ui #home-cards > .card { margin: 0; }
.clean-ui #home-dock { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.clean-ui #home-dock .card { margin: 0; }
.clean-ui .home-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.clean-ui :is(.mini-btn, .card-fold) { min-height: 44px; border-color: var(--line); color: var(--brand-2); font-weight: 500; }
.clean-ui .card-fold { min-width: 44px; }
.clean-ui .row-list { gap: 0; }
.clean-ui .row-item { min-height: 62px; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.clean-ui .row-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.clean-ui .row-left { flex: 1; gap: 11px; min-width: 0; }
.clean-ui .row-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--clean-icon-blue); color: var(--clean-blue-ink); font-size: 19px; }
.clean-ui .row-icon svg { width: 22px; height: 22px; }
.clean-ui .row-text { min-width: 0; }
.clean-ui .row-text strong { color: var(--ink); font-size: 14px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.clean-ui .row-text span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 3px; }
.clean-ui .row-right { max-width: 44%; min-width: 0; }
.clean-ui .row-right strong { color: var(--ink); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.clean-ui .row-right span { color: var(--muted); font-size: 11px; }
.clean-ui :is(.badge, .pill) { font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0; max-width: 100%; }
.clean-ui .badge { padding: 4px 8px; border-radius: 8px; }
.clean-ui :is(.badge-green, .badge.shared) { color: var(--clean-green); background: var(--clean-green-wash); border: 1px solid var(--green-line); }
.clean-ui .badge-gold { color: var(--clean-yellow); background: var(--clean-yellow-wash); border: 1px solid var(--gold-line); }
.clean-ui .badge-dark { color: var(--clean-blue-ink); background: var(--clean-blue-wash); border: 1px solid var(--line); }
.clean-ui .badge-red { color: var(--neg); background: var(--clean-coral-wash); border-color: color-mix(in srgb, var(--neg) 25%, var(--line)); }
.clean-ui .empty, .clean-ui .task-list-empty { padding: 20px 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.clean-ui :is(.group-title, .small-h) { font-size: 15px; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }

/* Light summaries replace the former green/gold hero treatment. */
.clean-ui :is(.calm-banner, .hero, .trip-hero) { background: var(--clean-blue-wash); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: none; }
.clean-ui .hero::after { content: none; }
.clean-ui .calm-banner-top { color: var(--muted); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; flex-wrap: wrap; margin-bottom: 6px; }
.clean-ui .calm-banner h2 { color: var(--ink); font-size: 27px; font-weight: 750; }
.clean-ui .calm-banner p { color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 5px; }
.clean-ui .hero-label { color: var(--muted); opacity: 1; font-size: 14px; }
.clean-ui .hero-value { color: var(--ink); font-size: 32px; }
.clean-ui .hero-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.clean-ui .hero-stat small { color: var(--muted); opacity: 1; }
.clean-ui .dot { border-radius: 50%; }
.clean-ui .dot-in { background: var(--clean-icon-green); color: var(--clean-green); }
.clean-ui .dot-out { background: var(--clean-icon-coral); color: var(--clean-coral); }
.clean-ui #pulse-value small { display: block; color: var(--muted) !important; font-size: 12px !important; margin-top: 5px; }
.clean-ui :is(.progress-track, .budget-track, .settle-track) { height: 8px; border-radius: 999px; background: var(--seg-track); }
.clean-ui :is(.progress-fill, .budget-fill, .settle-fill) { border-radius: 999px; background: var(--brand); }
.clean-ui .budget-fill.over { background: var(--neg); }
.clean-ui .bars .bar { fill: #97cffa; }
.clean-ui .bars .bar.today { fill: var(--brand); }
.clean-ui :is(.bars, .trend) { max-width: 100%; }
.clean-ui .bars text { fill: var(--muted); font-size: 10px; }
.clean-ui .donut-wrap { margin-top: 12px; margin-bottom: 18px; }
.clean-ui .donut-center strong { color: var(--ink); font-size: 21px; }
.clean-ui .legend li { min-height: 44px; }
.clean-ui .legend .val { color: var(--ink); }
.clean-ui .settle-row { font-size: 13px; grid-template-columns: minmax(56px, auto) minmax(40px, 1fr) auto; }

/* Buttons, segmented controls and all existing forms. */
.clean-ui :is(.btn, .btn-full, .btn-dark-full) { min-height: 48px; height: auto; padding: 12px 16px; border-radius: 11px; font-size: 15px; line-height: 1.3; font-weight: 600; box-shadow: none; }
.clean-ui :is(.btn-primary, .btn-full, .btn-dark-full) { background: #087cf0; color: #fff; border: 1px solid #087cf0; }
.clean-ui :is(.btn-primary, .btn-full, .btn-dark-full):hover { background: #086ed3; border-color: #086ed3; }
.clean-ui .btn-ghost { background: var(--surface); border: 1px solid var(--line-input); color: var(--brand-2); }
.clean-ui .btn-sm { min-height: 44px; font-size: 13px; padding: 10px 12px; }
.clean-ui .link { color: var(--brand-2); font-size: 13px; font-weight: 500; }
.clean-ui button.link { min-height: 44px; padding: 6px 0; }
.clean-ui .danger-txt, .clean-ui .icon-btn.danger { color: var(--neg); }
.clean-ui :is(.seg-control, .segmented) { padding: 4px; gap: 4px; border-radius: 11px; background: var(--seg-bg); }
.clean-ui :is(.seg-item, .seg, .list-filter, .chip) { min-height: 44px; height: auto; padding: 9px 10px; border-radius: 9px; font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--muted-9); }
.clean-ui .chip { border: 1px solid var(--line); background: var(--surface); }
.clean-ui :is(.seg-item.active, .seg.is-on, .chip.is-on) { color: #fff; background: #087cf0; border-color: #087cf0; box-shadow: none; }
.clean-ui :is(form label, .field) { color: var(--ink); font-size: 14px; font-weight: 500; gap: 7px; margin-bottom: 14px; }
.clean-ui input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.clean-ui select, .clean-ui textarea {
  width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 11px 12px;
  border: 1px solid var(--line-input); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; font-weight: 400;
}
.clean-ui textarea { resize: vertical; line-height: 1.5; }
.clean-ui input[type="checkbox"], .clean-ui input[type="radio"] { width: 20px; height: 20px; min-width: 20px; min-height: 20px; margin: 0; accent-color: var(--brand); }
.clean-ui :is(.field-mock .input-box, .input-box) { min-height: 48px; height: auto; border: 1px solid var(--line-input); border-radius: 10px; background: var(--surface); color: var(--ink); padding: 0 12px; }
.clean-ui .field-mock label { font-size: 14px; color: var(--ink); font-weight: 500; }
.clean-ui .input-box input:not([type="checkbox"]):not([type="radio"]) { min-height: 46px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.clean-ui .input-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }
.clean-ui :is(.check, .check-row, .intro-toggle) { align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; }
.clean-ui :is(.check, .check-row, .intro-toggle) input { margin-top: 2px; flex: none; }
.clean-ui .row-2 { gap: 12px; min-width: 0; }
.clean-ui .row-btns { gap: 8px; }
.clean-ui :is(.form-error, .view-error) { color: var(--neg); font-size: 13px; line-height: 1.5; }
.clean-ui .view-error { background: var(--clean-coral-wash); border: 1px solid color-mix(in srgb, var(--neg) 22%, var(--line)); padding: 12px; }
.clean-ui .view-loading { color: var(--muted); font-size: 13px; }
.clean-ui .form-ok { color: var(--pos); }
.clean-ui .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.clean-ui .cat-opt { min-width: 0; min-height: 86px; padding: 10px 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); gap: 6px; font-size: 12px; font-weight: 500; }
.clean-ui .cat-opt .cat-ico { width: 44px; height: 44px; border-radius: 50%; }
.clean-ui .cat-opt.is-on { border: 1.5px solid var(--brand); background: var(--clean-blue-wash); }
.clean-ui .cat-ico { border-radius: 50%; }
.clean-ui .cat-row { min-height: 60px; gap: 10px; padding: 10px 0; font-size: 14px; }
.clean-ui :is(.who-opt, .icon-pick button) { min-height: 48px; border: 1px solid var(--line-input); border-radius: 10px; }
.clean-ui :is(.who-opt.is-on, .icon-pick button.is-on) { border-color: var(--brand); background: var(--clean-blue-wash); }
.clean-ui .color-pick button { width: 44px; height: 44px; }
.clean-ui .att-btns { gap: 8px; }
.clean-ui .att-btn { min-height: 48px; border: 1px dashed var(--line-input); background: var(--surface-2); color: var(--ink); border-radius: 10px; font-size: 13px; font-weight: 500; }
.clean-ui .att-btn svg { color: var(--brand-2); }
.clean-ui :is(.att-item img, .att-row img, .att-pdf) { border-radius: 9px; }
.clean-ui .att-pdf { background: var(--clean-coral-wash); color: var(--clean-coral); }
.clean-ui .att-row { gap: 10px; padding: 12px 0; }
.clean-ui .att-row-link small { color: var(--muted); font-size: 12px; }
.clean-ui .amount-field { margin: 12px 0 18px; }
.clean-ui .amount-field input:not([type="checkbox"]) { width: 100%; max-width: 280px; border: 0; padding: 0; background: transparent; font-size: 36px; font-weight: 700; letter-spacing: -.03em; }
.clean-ui .amount-field .currency { color: var(--ink); font-size: 23px; }
.clean-ui .amount-field.is-income input { color: var(--pos); }

/* All modal surfaces retain their native dialog behavior and scroll limits. */
.clean-ui dialog.sheet { width: min(100%, 600px); max-height: 94dvh; border: 1px solid var(--line); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -10px 40px rgb(15 23 42 / 12%); }
.clean-ui dialog.sheet::backdrop { background: rgb(15 23 42 / 36%); backdrop-filter: blur(2px); }
.clean-ui dialog.sheet :is(form, .txd) { padding: 8px 18px calc(20px + var(--safe-b)); max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.clean-ui .sheet-head { min-height: 56px; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; padding: 5px 0 9px; margin-bottom: 12px; background: var(--surface); }
.clean-ui .sheet-head :is(h2, h3) { color: var(--ink); font-size: 18px; font-weight: 650; line-height: 1.25; margin: 0; }
.clean-ui #calendar-guides-sheet > .sheet-head { padding: 12px 16px; }
.clean-ui #calendar-guides-sheet .sheet-body { padding: 0 16px 18px; color: var(--ink); }
.clean-ui #calendar-guides-sheet h4 { color: var(--ink) !important; }
.clean-ui #calendar-guides-sheet li { margin-bottom: 8px; }
.clean-ui .txd-hero { gap: 12px; margin: 10px 0 18px; }
.clean-ui .txd-hero .cat-ico { width: 52px; height: 52px; }
.clean-ui .txd-amt { color: var(--ink); font-size: 32px; font-weight: 700; }
.clean-ui .txd-amt.in { color: var(--pos); }
.clean-ui .txd-list { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.clean-ui .txd-row { padding: 13px 12px; grid-template-columns: minmax(85px, .8fr) minmax(0, 1.2fr); border-color: var(--line); }
.clean-ui .txd-row dt { color: var(--muted); font-weight: 400; }
.clean-ui .txd-row dd { color: var(--ink); }
.clean-ui .hc-list { gap: 10px; }
.clean-ui .hc-row { display: grid; grid-template-columns: 26px repeat(4, minmax(0, 1fr)); gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.clean-ui .hc-grip { grid-column: 1; grid-row: 1 / 3; align-self: center; padding: 0; color: var(--muted); }
.clean-ui .hc-name { grid-column: 2 / -1; font-size: 14px; padding: 3px 4px 7px; min-width: 0; }
.clean-ui .hc-ic { width: 100%; min-width: 44px; height: 44px; border-radius: 9px; color: var(--muted); }
.clean-ui .hc-ic.on { color: var(--brand); background: var(--clean-blue-wash); }
.clean-ui .hc-row.drag { background: var(--clean-blue-wash); box-shadow: var(--shadow); }
.clean-ui .toast { background: #203047; color: #fff; border: 1px solid #30445e; border-radius: 12px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 26px rgb(15 23 42 / 12%); }

/* Authentication and onboarding remain light; all consents stay visible. */
.clean-ui #login.app-shell,
.clean-ui #intro.app-shell,
.clean-ui .intro { min-height: 100dvh; background: var(--bg); color: var(--ink); }
.clean-ui #login.app-shell { display: flex; align-items: stretch; }
.clean-ui #login > .top-header,
.clean-ui #intro > .top-header { width: 100%; max-width: 520px; margin: 0 auto; padding: 20px 22px 16px; }
.clean-ui #login #auth-title { color: var(--ink) !important; font-size: 30px !important; font-weight: 750; line-height: 1.15; margin-top: 12px !important; letter-spacing: -.035em; }
.clean-ui #login .eyebrow { color: var(--muted) !important; font-size: 11px; letter-spacing: .02em; }
.clean-ui #login > .content-area,
.clean-ui #intro > .content-area { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 22px 24px; gap: 16px; overflow: visible; }
.clean-ui #login .card { color: var(--ink) !important; background: var(--surface) !important; border-color: var(--line) !important; padding: 18px; border-radius: 14px; }
.clean-ui #login .calm-banner { background: var(--clean-blue-wash) !important; border-color: var(--line); }
.clean-ui #login .calm-banner p { color: var(--muted) !important; font-size: 14px !important; }
.clean-ui #login .card-title { font-size: 17px; }
.clean-ui #login .card p { color: var(--muted) !important; font-size: 13px !important; line-height: 1.5; }
.clean-ui #login .link { color: var(--brand-2) !important; min-height: 44px; font-size: 13px !important; }
.clean-ui #login .install-cta { width: 100%; max-width: 520px; margin: 0 auto; padding: 0 22px 16px !important; }
.clean-ui #login #install-login-btn { color: var(--brand-2) !important; border-color: var(--line-input) !important; }
.clean-ui #login .install-cta small,
.clean-ui #login > div:last-child,
.clean-ui #login > div:last-child a { color: var(--muted) !important; }
.clean-ui #login > div:last-child { font-size: 12px !important; }
.clean-ui .intro-shell { background: var(--surface); border-color: var(--line); box-shadow: none; border-radius: 16px; }
.clean-ui :is(.intro-step, .intro-eyebrow) { color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: .025em; }
.clean-ui :is(.intro-choice, .intro-choice-card) { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; color: var(--ink); gap: 7px; }
.clean-ui :is(.intro-choice.is-on, .intro-choice-card.is-on) { border: 1.5px solid var(--brand); background: var(--clean-blue-wash); box-shadow: none; }
.clean-ui .intro-choice-card strong { color: var(--ink); font-size: 15px; }
.clean-ui .intro-choice-card span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.clean-ui .intro-choice-grid { gap: 12px; }
.clean-ui .intro-toggle { padding: 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.clean-ui .onboarding-options { margin: 0 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.clean-ui .onboarding-options legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0 4px; }
.clean-ui .onboarding-options label { font-weight: 400; font-size: 13px; }
.clean-ui .lic-banner { background: var(--clean-yellow-wash); color: var(--clean-yellow); border: 1px solid var(--gold-line); border-radius: 11px; }
.clean-ui .lic-banner:is(.lic-readonly, .lic-blocked, .lic-suspended) { background: var(--clean-coral-wash); color: var(--neg); }
.clean-ui .lic-block { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.clean-ui .lic-card { padding: 24px; box-shadow: var(--shadow); }
.clean-ui .lic-pix { background: var(--surface-2); border: 1px solid var(--line); }

/* Current views, plus functional legacy blocks moved into their new homes. */
.clean-ui #view-voice { min-height: 0; }
.clean-ui #view-voice .voice-head,
.clean-ui #view-scanner .scanner-head,
.clean-ui #view-tx .tx-head { max-width: 760px; padding: 14px 18px 16px; color: var(--ink); }
.clean-ui #view-voice .voice-banner { border-color: var(--line); background: var(--clean-blue-wash); text-align: left; padding: 20px 16px; }
.clean-ui #view-voice .voice-banner-label { color: var(--clean-blue-ink); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; }
.clean-ui #view-voice .voice-banner p { color: var(--ink); font-size: 16px; line-height: 1.5; font-weight: 500; }
.clean-ui #view-voice .voice-banner p.voice-empty { color: var(--muted); font-size: 15px; }
.clean-ui #view-voice :is(.card, .row-right strong) { color: var(--ink) !important; }
.clean-ui #view-voice .voice-empty-card { color: var(--muted); border: 1px dashed var(--line-input); background: var(--surface); font-size: 14px; padding: 24px 16px; }
.clean-ui #view-voice .voice-actions .btn-dark-full { min-height: 48px; height: auto; font-size: 14px; }
.clean-ui #view-voice .sub-back,
.clean-ui #view-ritual .sub-back { color: var(--ink); background: var(--surface); border-color: var(--line); }
.clean-ui #view-voice .view-error,
.clean-ui #view-ritual .view-error { color: var(--neg); background: var(--clean-coral-wash); border-color: color-mix(in srgb, var(--neg) 22%, var(--line)); }
.clean-ui #view-ritual .view-loading { color: var(--muted); }
.clean-ui #view-scanner .scanner-row { min-height: 62px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.clean-ui #view-scanner .scanner-vault { background: var(--clean-yellow-wash); border-color: var(--gold-line); }
.clean-ui #view-scanner .scanner-vault :is(.card-title, .scanner-vault-state) { color: var(--ink); }
.clean-ui #view-scanner .scanner-vault-row { color: var(--muted-9); font-size: 13px; line-height: 1.4; }
.clean-ui #view-scanner .scanner-switch { width: 46px; height: 28px; }
.clean-ui #view-scanner .scanner-switch i { background: var(--line-input); }
.clean-ui #view-scanner .scanner-switch i::after { width: 24px; height: 24px; top: 2px; left: 2px; }
.clean-ui #view-scanner .scanner-switch input { width: 46px; height: 28px; }
.clean-ui #view-scanner .scanner-switch input:checked + i { background: #087cf0; }
.clean-ui #view-scanner .scanner-switch input:checked + i::after { transform: translateX(18px); }
.clean-ui #view-tx .tx-val-label { font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.clean-ui #view-tx .tx-currency { color: var(--ink); font-size: 23px; }
.clean-ui #view-tx .tx-val-input-wrap { margin: 10px 0; }
.clean-ui #view-tx .tx-val-input-wrap input { border: 0; border-radius: 0; background: transparent; padding: 0; min-height: 44px; color: var(--ink); font-size: 32px; font-weight: 700; }
.clean-ui #view-tx .tx-val-desc { display: grid; font-size: 14px; color: var(--ink); gap: 6px; }
.clean-ui #view-tx .tx-val-desc input { border: 1px solid var(--line-input); border-radius: 10px; padding: 11px 12px; background: var(--surface); font-size: 16px; font-weight: 400; }
.clean-ui #view-tx .tx-split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.clean-ui #view-tx .tx-split-opt { min-height: 44px; border-color: var(--line-input); border-radius: 10px; font-size: 13px; font-weight: 500; }
.clean-ui #view-tx .tx-split-opt.active { border-color: var(--brand); background: var(--clean-blue-wash); color: var(--clean-blue-ink); }
.clean-ui #view-tx .tx-split-explain { color: var(--muted-9); background: var(--surface-2); font-size: 13px; padding: 12px; }
.clean-ui #view-tx .tx-picker { padding: 12px 0; border-bottom: 1px solid var(--line); gap: 8px; }
.clean-ui #view-tx .tx-picker-label { color: var(--ink); font-size: 14px; font-weight: 500; }
.clean-ui #view-tx .tx-date { font-size: 13px; min-height: 44px; padding: 8px; }
.clean-ui #view-list-new .list-search { min-height: 48px; height: auto; border: 1px solid var(--line-input); border-radius: 10px; background: var(--surface); }
.clean-ui #view-list-new .list-search input { min-height: 46px; border: 0; background: transparent; padding: 8px 0; font-size: 15px; }
.clean-ui #view-list-new .list-search button { width: 44px; height: 44px; }
.clean-ui #view-list-new .list-filters { gap: 5px; }
.clean-ui #view-list-new .list-filter { color: var(--muted-9); background: var(--seg-bg); border: 1px solid transparent; font-weight: 500; padding: 9px 4px; font-size: 12px; }
.clean-ui #view-list-new .list-filter.is-on,
.clean-ui #view-list-new .list-filter.gold.is-on { background: #087cf0; border-color: #087cf0; color: #fff; box-shadow: none; }
.clean-ui #view-list-new .list-filter.gold { background: var(--clean-yellow-wash); color: var(--clean-yellow); border-color: var(--gold-line); }
.clean-ui #view-list-new #list-tx-cards { gap: 14px; }
.clean-ui #view-list-new .list-synthesis { border-color: var(--line); background: var(--clean-blue-wash); }
.clean-ui #view-list-new .list-synthesis-text { color: var(--muted-9); font-size: 13px; }
.clean-ui .top-header :is(.bills-new-add, .goals-new-add) { min-height: 44px; height: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--clean-blue-wash); color: var(--brand-2); font-size: 13px; font-weight: 500; padding: 10px 12px; }
.clean-ui #view-bills-new .bills-new-prev { color: var(--muted); font-size: 13px; font-weight: 400; }
.clean-ui #view-bills-new .bills-new-row { min-height: 66px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.clean-ui #view-bills-new .bills-new-row .bills-new-cta { color: var(--brand-2); font-weight: 500; }
.clean-ui #view-bills-new .bills-new-radar { border-color: var(--gold-line); background: var(--clean-yellow-wash); }
.clean-ui #view-bills-new .bills-new-radar :is(.card-title, .bills-new-radar-text) { color: var(--ink); }
.clean-ui #view-bills-new .bills-new-radar-text { font-size: 13px; }
.clean-ui :is(.bill, .bill-row) { border-color: var(--line); gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.clean-ui .bill-date { background: var(--clean-blue-wash); color: var(--clean-blue-ink); border-radius: 10px; }
.clean-ui .bill-pay { background: var(--clean-blue-wash); color: var(--brand-2); border-radius: 9px; min-height: 44px; }
.clean-ui .task-item { padding: 12px; border-radius: 12px; }
.clean-ui .task-check,
.clean-ui #view-tasks-new .tasks-new-check { min-width: 44px; width: 44px; height: 44px; border: 1.5px solid var(--line-input); border-radius: 50%; background: var(--surface); color: var(--brand); }
.clean-ui .task-item.is-done .task-check,
.clean-ui #view-tasks-new .tasks-new-check.is-done { border-color: #087cf0; background: #087cf0; color: #fff; }
.clean-ui .task-action { min-width: 44px; min-height: 44px; color: var(--muted); }
.clean-ui .task-title { font-weight: 500; font-size: 14px; }
.clean-ui .task-meta { font-size: 12px; }
.clean-ui .task-action.is-important { color: var(--clean-yellow); }
.clean-ui .goal-card { padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
.clean-ui .goal-head h3 { font-size: 16px; font-weight: 600; }
.clean-ui .goal-item { min-height: 48px; border-color: var(--line); }
.clean-ui .goal-item.done .gi-seqn { background: var(--clean-green-wash); color: var(--clean-green); }
.clean-ui #view-goals-new .goals-new-meta { color: var(--muted); font-size: 13px; }
.clean-ui #view-goals-new .goals-new-event { background: var(--clean-yellow-wash); border-color: var(--gold-line); }
.clean-ui #view-goals-new .goals-new-event-meta { color: var(--muted-9); font-size: 13px; }
.clean-ui .trip-card { padding: 15px; border: 1px solid var(--line); }
.clean-ui .trip-card .cat-ico { border-radius: 50%; }
.clean-ui .trip-card h3 { font-size: 16px; font-weight: 600; }
.clean-ui .trip-card .meta, .clean-ui .budget-text { color: var(--muted); font-size: 13px; }
.clean-ui #view-agenda .agenda-sync-card { background: var(--clean-blue-wash); color: var(--ink); border-color: var(--line); }
.clean-ui #view-agenda .agenda-sync-card .card-title { color: var(--ink); }
.clean-ui #view-agenda .agenda-sync-text { color: var(--muted-9); font-size: 13px; }
.clean-ui #view-agenda .agenda-row { min-height: 62px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.clean-ui #agenda-open-guides { color: var(--brand-2) !important; border-color: var(--line-input) !important; }
.clean-ui #view-ritual .ritual-banner { background: var(--clean-green-wash); border-color: var(--green-line); }
.clean-ui #view-ritual .ritual-card-text { color: var(--muted-9); font-size: 13px; line-height: 1.5; }
.clean-ui #view-activity-new .activity-new-banner { background: var(--clean-blue-wash); }
.clean-ui #view-activity-new .activity-new-banner h2 { color: var(--ink); font-size: 18px; }
.clean-ui #view-activity-new .activity-new-status-fail { color: var(--neg); }
.clean-ui #view-settings-new .settings-lgpd-card { background: var(--surface); border-color: var(--line); }
.clean-ui #view-settings-new .settings-lgpd-card .card-title { color: var(--ink); }
.clean-ui #view-settings-new .settings-lgpd-text { color: var(--muted); font-size: 13px; line-height: 1.5; }
.clean-ui #view-settings-new .settings-lgpd-badge { color: var(--muted-9); background: var(--surface-2); border-color: var(--line); }
.clean-ui #view-settings-new :is(.settings-export-btn, .settings-delete-btn) { min-height: 44px; padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 500; }
.clean-ui #view-settings-new .settings-export-btn { color: var(--brand-2); background: var(--clean-blue-wash); border-color: var(--line); }
.clean-ui #view-settings-new .settings-delete-btn { color: var(--neg); background: var(--clean-coral-wash); border: 1px solid color-mix(in srgb, var(--neg) 25%, var(--line)); }
.clean-ui .clean-settings-group { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); margin-bottom: 12px; }
.clean-ui .clean-settings-group > summary { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 14px; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; list-style-position: inside; }
.clean-ui .clean-settings-group > summary::after { content: "›"; color: var(--muted); margin-left: auto; font-size: 23px; font-weight: 400; transform: rotate(90deg); }
.clean-ui .clean-settings-group[open] > summary { border-bottom: 1px solid var(--line); }
.clean-ui .clean-settings-group[open] > summary::after { transform: rotate(-90deg); }
.clean-ui .clean-settings-group > :not(summary) { margin: 0; padding: 14px; }
.clean-ui .clean-settings-group > .card { border: 0; border-radius: 0 0 12px 12px; box-shadow: none; }
.clean-ui .manual-item { padding: 14px 0 !important; }
.clean-ui .manual-badge { border-radius: 6px !important; font-size: 11px !important; font-weight: 500 !important; }
.clean-ui .menu-scrim { background: rgb(15 23 42 / 32%); }
.clean-ui .menu-panel { top: calc(12px + var(--safe-t)); right: 12px; width: min(340px, calc(100vw - 24px)); max-height: calc(100dvh - 24px - var(--safe-t)); border: 1px solid var(--line); border-radius: 16px; padding: 7px; background: var(--surface); box-shadow: 0 12px 45px rgb(15 23 42 / 15%); }
.clean-ui .menu-title { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .03em; padding: 10px 12px; }
.clean-ui .menu-item { min-height: 48px; padding: 12px; font-size: 14px; font-weight: 500; border-radius: 10px; color: var(--ink); }
.clean-ui .menu-item svg { color: var(--brand-2); }
.clean-ui .menu-item.is-on { background: var(--clean-blue-wash); box-shadow: none; color: var(--brand-2); }
.clean-ui .superapp-hub-card { border: 1px solid var(--line); background: var(--surface); }
.clean-ui .superapp-grid { gap: 10px; }
.clean-ui .superapp-btn { min-height: 84px; color: var(--ink); border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.clean-ui .shopping-quick-form { gap: 8px; }
.clean-ui .shopping-quick-form input { min-width: 0; }
.clean-ui .shopping-quick-form button { min-height: 48px; }

/* Optional real-data month calendar/review hooks used by the integration. */
.clean-ui .clean-calendar { padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.clean-ui .clean-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-weight: 600; }
.clean-ui .clean-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.clean-ui .clean-calendar-weekday { text-align: center; color: var(--muted); font-size: 12px; padding: 6px 0; }
.clean-ui .clean-calendar-day { position: relative; display: grid; place-items: center; min-width: 0; min-height: 44px; border-radius: 50%; color: var(--ink); font-size: 14px; }
.clean-ui .clean-calendar-day.is-today { background: #087cf0; color: #fff; }
.clean-ui .clean-calendar-day.is-outside { color: var(--muted); opacity: .55; }
.clean-ui .clean-calendar-day.has-events::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--pos); transform: translateX(-50%); }
.clean-ui .clean-review-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.clean-ui .clean-review-stat { gap: 7px; align-items: flex-start; flex-wrap: wrap; }
.clean-ui .clean-review-stat .clean-icon { width: 32px; height: 32px; }
.clean-ui .clean-review-stat .clean-icon svg { width: 18px; height: 18px; }
.clean-ui .clean-review-stat small { font-size: 11px; }
.clean-ui .clean-review-stat strong { display: block; font-size: 16px; font-weight: 650; }

/* Wide layouts keep a readable form measure and use space for real content. */
@media (min-width: 700px) {
  .clean-ui dialog.sheet { margin: auto; border: 1px solid var(--line); border-radius: 18px; }
  .clean-ui .hc-row { grid-template-columns: 26px minmax(0, 1fr) repeat(4, 44px); align-items: center; }
  .clean-ui .hc-grip { grid-row: auto; }
  .clean-ui .hc-name { grid-column: auto; padding: 0 4px; }
}
@media (min-width: 1000px) {
  .clean-ui .topbar.top-header,
  .clean-ui #app.app-shell.app-ritual > .top-header { max-width: 1156px; padding-left: 18px; padding-right: 18px; }
  .clean-ui .view,
  .clean-ui .view.screen { max-width: 1156px; }
  .clean-ui #view-home-new > .content-area { max-width: 1156px; }
  .clean-ui .view.screen:not(#view-home-new):not(#view-settings-new) > .content-area { max-width: 800px; margin-left: auto; margin-right: auto; }
  .clean-ui #view-home { display: block; }
  .clean-ui #home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .clean-ui #home-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clean-ui #view-settings-new > .content-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .clean-ui #view-settings-new > .content-area > :is(.clean-page-title, .view-error, .view-loading) { grid-column: 1 / -1; }
  .clean-ui .clean-home-actions { max-width: 480px; }
  .clean-ui .bottom-nav { max-width: 600px; bottom: 12px; height: 74px; padding-bottom: 7px; border: 1px solid var(--line); border-radius: 17px; box-shadow: 0 6px 24px rgb(15 23 42 / 6%); }
}
@media (max-width: 380px) {
  .clean-ui .content-area, .clean-ui .view.screen .content-area { padding-left: 14px; padding-right: 14px; }
  .clean-ui .topbar.top-header { padding-left: 14px; padding-right: 14px; gap: 6px; }
  .clean-ui .clean-brand { font-size: 14px; gap: 7px; }
  .clean-ui .clean-brand :is(img, .clean-brand-mark), .clean-ui .clean-brand > svg { width: 34px; height: 34px; }
  .clean-ui .mini-stat { padding: 10px; }
  .clean-ui .mini-stat strong, .clean-ui .clean-home-stat strong { font-size: 19px; }
  .clean-ui .row-right { max-width: 41%; }
  .clean-ui .row-2 { grid-template-columns: minmax(0, 1fr); }
  .clean-ui .clean-review-summary { padding: 10px; gap: 5px; }
  .clean-ui .clean-review-stat strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .clean-ui *, .clean-ui *::before, .clean-ui *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Native visibility, consent and privacy flags take precedence over layout. */
.clean-ui [hidden] { display: none !important; }
.clean-ui .u-hide { display: none !important; }
.hide-values .clean-ui [data-private],
.hide-values .clean-ui .clean-home-stat strong,
.hide-values .clean-ui .clean-review-stat strong { filter: blur(9px); user-select: none; }

/* HX46-C1 · header enxuto e sem overflow em 320/360/390 */
.clean-ui .status-bar { min-height: calc(8px + var(--safe-t)); height: auto; padding: calc(2px + var(--safe-t)) 18px 0; }
@media (max-width: 430px) {
  .clean-ui .topbar.top-header { flex-wrap: wrap; row-gap: 4px; padding-left: 14px; padding-right: 14px; }
  .clean-ui .top-header .clean-brand { flex: 1 1 auto; min-width: 0; }
  .clean-ui .top-header .top-actions { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; justify-content: flex-end; gap: 2px; }
  .clean-ui .top-header .top-actions > .icon-btn,
  .clean-ui .top-header .clean-notifications,
  .clean-ui .top-header .clean-avatar { min-width: 44px; width: 44px; }
  .clean-ui .top-header .clean-brand > svg,
  .clean-ui .top-header .clean-brand :is(img, .clean-brand-mark) { width: 36px; height: 36px; }
  .clean-ui .top-header .clean-brand { font-size: 15px; gap: 8px; }
  .clean-ui .top-header .top-title-group { flex: 1 1 100%; }
  .clean-ui .top-header .month-label { font-size: 16px; }
  .clean-ui .clean-home-stat strong { font-size: 16px; }
}
/* CTA principal sempre acessível acima da bottom-nav (04/05/06/09/10/12) */
.clean-ui .cta-sticky {
  position: sticky;
  bottom: calc(84px + var(--safe-b, 0px));
  z-index: 5;
  background: var(--bg);
  padding: 8px 0 10px;
  margin-top: 8px;
  box-shadow: 0 -8px 18px rgb(15 23 42 / 5%);
}
@media (min-width: 1000px) { .clean-ui .cta-sticky { bottom: 96px; } }
/* HX46-C1 · controles migrados para o menu: fora do fluxo visual, 44px e focáveis por código */
.clean-ui .offscreen-controls { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: -1; opacity: 0; pointer-events: none; }
.clean-ui .offscreen-controls > button { position: absolute; left: 0; top: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; opacity: 0; }