/* Final reference-aligned composition. State, privacy and hidden attributes win. */
.clean-ui { --brand:#087cf0; --h-nav:72px; }
.clean-ui .status-bar { display:none; }
.clean-ui .content-area { gap:12px; }
.clean-ui .view.screen { width:100%; max-width:680px; margin-inline:auto; }
.clean-ui .view.screen > .content-area { padding-bottom:28px; }
.clean-ui #app.app-shell { padding-bottom:calc(100px + var(--safe-b,0px)); }
.clean-ui .topbar.top-header { max-width:680px; padding:16px 18px 10px; flex-wrap:wrap; align-items:center; gap:8px; }
.clean-ui .top-header .clean-brand { flex:1 1 auto; font-size:16px; font-weight:650; min-width:0; gap:8px; }
.clean-ui .top-header .top-actions { flex:0 0 auto; width:auto; gap:4px; }
.clean-ui .clean-avatar,.clean-ui .clean-notifications { width:44px; height:44px; min-width:44px; min-height:44px; }
.clean-ui .top-actions > .badge { display:none; }
.clean-ui #header-brand > svg { width:34px; height:34px; padding:5px; border-radius:10px; background:var(--brand); color:#fff; }
.clean-ui .top-header .top-title-group { flex-basis:100%; }
.clean-ui .top-header.no-month #header-title-group { display:none; }
.clean-ui .clean-greeting { font-size:28px; margin:0; }
.clean-ui #home-greeting-sub { margin:-10px 0 0; font-size:14px; color:var(--muted); }
.clean-ui .card { padding:14px; border-radius:13px; box-shadow:none; }
.clean-ui .card-head { gap:8px; align-items:center; }
.clean-ui #home-cards .card-head { flex-wrap:nowrap; margin-bottom:8px; }
.clean-ui #home-cards .card-head h2 { flex:1; font-size:15px; }
.clean-ui #home-cards .card-fold { min-width:44px; min-height:44px; width:44px; margin:0; padding:8px; }
.clean-ui #home-cards .card-head .link { min-height:32px; }
.clean-ui .app-home #header-title-group { display:none; }
.clean-ui .home-month { text-align:left; align-self:flex-start; border:0; background:transparent; padding:0 0 8px; color:var(--muted); min-height:32px; cursor:pointer; }
.clean-ui .home-month:after { content:' ⌄'; color:var(--brand); }
.clean-ui .chart-period { font-size:11px; color:var(--muted); margin-top:5px; }
.clean-ui .chart-period > summary { min-height:24px; cursor:pointer; }
.clean-ui .chart-period .seg-mini { display:flex; margin:4px 0; }
.clean-ui .month-form { padding:24px; display:grid; gap:16px; }
.clean-ui .card-head h2 { font-size:16px; min-width:0; }
.clean-ui .card-head h2 > svg { display:none; }
.clean-ui .card-fold { width:32px; height:32px; flex:none; }
.clean-ui .card-head .link { font-size:12px; }
.clean-ui .row-left,.clean-ui .row-text { min-width:0; }
.clean-ui .row-text strong { font-weight:550; }
.clean-ui .clean-home-stat { padding:12px 10px; gap:9px; }
.clean-ui .clean-home-stat > .clean-icon { width:40px; height:40px; flex:none; border-radius:50%; }
.clean-ui .clean-home-stat strong { font-size:19px; white-space:nowrap; font-weight:650; }
.clean-ui .clean-home-stat small { font-size:12px; }
.clean-ui .clean-home-actions { margin:0; padding:0 6px; gap:20px; }
.clean-ui .clean-home-actions > button { gap:5px; font-size:13px; min-height:84px; }
.clean-ui .clean-home-actions .clean-icon { width:58px; height:58px; border-radius:50%; }
.clean-ui .clean-home-actions svg { width:29px; height:29px; }
.clean-ui .clean-home-blocks { display:flex; flex-direction:column; gap:12px; }
.clean-ui #home-cards { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.clean-ui .home-tools { order:2; justify-content:flex-end; padding:0; margin:0; }
.clean-ui #home-dock { order:3; }
.clean-ui .home-tools .mini-btn { font-size:12px; min-height:36px; }
.clean-ui #bars-mode { max-width:145px; }
.clean-ui #bars-mode button { padding:4px 6px; font-size:10px; }
.clean-ui [data-card="daily"] .chart-box { margin-top:4px; }
.clean-ui [data-card="daily"] .chart-hint { display:none; }
.clean-ui #bars { height:98px; }
.clean-ui .bars .bar { fill:#9bcaf0; }
.clean-ui .bars .bar.today { fill:#087cf0; }
.clean-ui #bills-home .bill-row { min-height:58px; }
.clean-ui #bills-home .bill-preview { display:flex; align-items:center; gap:10px; width:100%; padding:10px 0; min-height:58px; border:0; border-bottom:1px solid var(--line); color:var(--ink); background:transparent; text-align:left; }
.clean-ui #bills-home .bill-preview:last-child { border-bottom:0; }
.clean-ui .bill-preview .row-text { display:grid; flex:1; gap:3px; font-size:14px; }
.clean-ui .bill-preview .row-text small { font-size:11px; }
.clean-ui .bill-preview .clean-icon { width:38px; height:38px; border-radius:11px; }
.clean-ui .bill-preview > strong { font-size:14px; font-weight:600; }
.clean-ui .bill-preview > svg { width:16px; height:16px; color:var(--muted); }
.clean-ui #bills-home .empty { padding:14px 0; font-size:13px; }
.clean-ui .bottom-nav { height:calc(70px + var(--safe-b,0px)); padding-top:7px; background:var(--surface); border-top:1px solid var(--line); }
.clean-ui .bottom-nav .nav-item { font-size:10px; }
.clean-ui .bottom-nav .nav-omni { background:var(--brand); color:#fff; border-radius:50%; width:48px; height:48px; box-shadow:none; }
.clean-ui .bottom-nav .nav-omni svg { width:27px; height:27px; }
.clean-ui .nav-omni-label { display:none; }
.clean-ui .bottom-nav #fab { align-self:center; min-height:48px; }
.clean-ui .cta-sticky { position:sticky; bottom:calc(82px + var(--safe-b,0px)); z-index:5; min-height:48px; padding:12px 16px; margin-top:6px; border-radius:12px; background:var(--brand); color:white; box-shadow:0 0 0 5px var(--bg); }

/* Authentication follows the approved login reference, including real inputs. */
.clean-ui #login.app-shell { padding:0; min-height:100dvh; }
.clean-ui #login:not(.welcome-mode) > .top-header { padding:28px 22px 0; text-align:center; display:flex; flex-direction:column; gap:0; }
.clean-ui #login-brand { display:flex; flex-direction:column; gap:8px; font-size:18px; font-weight:650; margin:0 auto 20px; }
.clean-ui #login-brand > svg { display:block; width:76px; height:76px; padding:12px; border-radius:23px; color:#fff; background:var(--brand); }
.clean-ui #login #auth-title { font-size:28px !important; margin:0 !important; }
.clean-ui #login-header .eyebrow,.clean-ui #login-badge { display:none; }
.clean-ui #login > .content-area { max-width:440px; padding:0 22px 14px; }
.clean-ui #login-pane { display:flex; flex-direction:column; gap:20px; }
.clean-ui .auth-description { font-size:15px; color:var(--muted); text-align:center; margin:8px -4px 0; }
.clean-ui .auth-features { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 2px; }
.clean-ui .auth-features > span { display:grid; justify-items:center; gap:6px; font-size:11px; color:var(--muted); }
.clean-ui .auth-features .clean-icon { width:44px; height:44px; border-radius:13px; }
.clean-ui .auth-features svg { width:25px; height:25px; }
.clean-ui #login-form { display:flex; flex-direction:column; gap:12px; }
.clean-ui #login .field-mock { margin:0; display:grid; gap:6px; }
.clean-ui #login .field-mock > label { font-size:14px; font-weight:600; }
.clean-ui #login .input-box { height:48px; min-height:48px; padding:0 12px; border:1px solid var(--line-input); border-radius:10px; display:flex; gap:8px; align-items:center; background:var(--surface); }
.clean-ui #login .input-box input { flex:1; width:100%; min-width:0; height:44px; padding:0 2px; border:0; background:transparent; font-size:16px; color:var(--ink); box-shadow:none; }
.clean-ui #login-show-pass { padding:0; min-width:36px; }
.clean-ui #login-show-pass svg { width:23px; height:23px; }
.clean-ui #login .auth-forgot { align-self:flex-end; margin:-8px 0 -3px; font-weight:500; }
.clean-ui .auth-submit { display:flex; align-items:center; justify-content:center; gap:12px; min-height:48px; }
.clean-ui .auth-submit svg { width:22px; height:22px; }
.clean-ui .auth-divider { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.clean-ui .auth-divider:before,.clean-ui .auth-divider:after { content:""; flex:1; height:1px; background:var(--line); }
.clean-ui #login .auth-biometric { display:flex; justify-content:center; align-items:center; gap:10px; min-height:48px; border:1px solid var(--brand); color:var(--brand); font-size:15px; }
.clean-ui .auth-biometric svg { width:24px; height:24px; }
.clean-ui .auth-trial { padding:16px; border:1px solid #deedfd; border-radius:14px; background:var(--clean-blue-wash); }
.clean-ui .auth-trial h2 { font-size:18px; margin:0 0 4px; }
.clean-ui .auth-trial p { font-size:14px; color:var(--muted); margin:0 0 12px; }
.clean-ui .auth-trial .btn-full { background:#d6eaff; color:#0868cd; box-shadow:none; }
.clean-ui #login .install-cta { padding:0 22px 8px !important; }
.clean-ui #login .install-cta small { display:none; }
.clean-ui #install-login-btn { min-height:36px; font-size:12px; border:0; background:transparent; }
.clean-ui #login > div:last-child { padding-bottom:18px !important; font-size:11px !important; }
@media(max-height:900px){
 .clean-ui #login:not(.welcome-mode) > .top-header { padding-top:18px; }
 .clean-ui #login-brand { margin-bottom:12px; gap:6px; }
 .clean-ui #login-brand > svg { width:62px; height:62px; border-radius:19px; }
 .clean-ui #login-pane { gap:13px; }
 .clean-ui #login-form { gap:8px; }
 .clean-ui .auth-features .clean-icon { width:40px; height:40px; }
 .clean-ui .auth-trial { padding:12px; }
 .clean-ui .auth-trial p { margin-bottom:8px; }
 .clean-ui #login .install-cta { padding-bottom:0 !important; }
}
.clean-ui #welcome-pane { max-width:430px; padding-top:32px; gap:12px; }
.clean-ui #welcome-pane .welcome-brand-name { font-size:18px; margin-top:-3px; }
.clean-ui #welcome-pane h1 { font-size:29px; margin-top:14px; }
.clean-ui #welcome-pane .welcome-logo { width:72px; height:72px; border-radius:21px; box-shadow:none; }
.clean-ui #welcome-pane .welcome-logo svg { width:48px; height:48px; }
.clean-ui #welcome-pane .welcome-lede { font-size:15px; line-height:1.4; max-width:290px; }
.clean-ui .welcome-art { min-height:170px; max-width:285px; gap:8px; margin:8px 0; }
.clean-ui .welcome-art-card { width:76px; height:66px; border-radius:16px; }
.clean-ui .welcome-art-card svg { width:37px; height:37px; }
.clean-ui .wc-green { color:#16863b; }.clean-ui .wc-coral { color:#d73e32; }.clean-ui .wc-blue { color:#087cf0; }.clean-ui .wc-yellow { color:#906000; }
.clean-ui .welcome-actions .btn { min-height:48px; }
.clean-ui #intro > .top-header { padding:16px 20px 12px; }
.clean-ui #intro .top-title-group h1 { font-size:26px; margin-top:8px; }
.clean-ui #intro .eyebrow { letter-spacing:0; text-transform:none; font-size:14px; }
.clean-ui #intro .top-header > .badge,.clean-ui #intro .intro-step-label { display:none; }
.clean-ui #intro .intro-progress { max-width:150px; margin:0 auto 12px; }
.clean-ui .intro-step-panel > .card { padding:0; border:0; margin:0 0 16px; background:transparent; }
.clean-ui .intro-step-panel .card-title-row > .badge { display:none; }
.clean-ui .intro-step-panel .card-title { font-size:14px; }
.clean-ui .intro-choice-card { display:flex; align-items:center; flex-direction:column; text-align:center; padding:14px 10px; min-height:150px; }
.clean-ui .intro-choice-card .clean-icon { width:58px; height:58px; border-radius:50%; }
.clean-ui .intro-choice-card .clean-icon svg { width:32px; height:32px; }
.clean-ui .intro-choice-card.is-on { background:var(--surface); border-color:var(--brand); }
.clean-ui .intro-tiles { gap:8px; }
.clean-ui .intro-tile { min-height:55px; padding:8px; gap:6px; font-size:13px; }
.clean-ui .intro-tile > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--clean-blue-wash); color:var(--brand); }
.clean-ui .intro-tile svg { width:21px; height:21px; }

/* Focused capture and entry flows. */
.clean-ui :is(.voice-head,.scanner-head,.tx-head) { padding:8px 18px 10px !important; }
.clean-ui :is(.voice-head,.scanner-head,.tx-head) h1 { font-size:21px !important; }
.clean-ui :is(.voice-head,.scanner-head,.tx-head) .eyebrow,.clean-ui :is(.voice-head,.scanner-head,.tx-head) > .badge { display:none; }
.clean-ui .sub-back { min-height:36px; font-size:13px; }
.clean-ui .voice-illustration { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:12px; color:var(--brand); }
.clean-ui .voice-mic { display:grid; place-items:center; width:82px; height:82px; border:6px solid #c3e4ff; border-radius:50%; background:#a6d7ff; }
.clean-ui .voice-mic svg { width:38px; height:38px; }
.clean-ui .wave { letter-spacing:1px; font-size:17px; color:#70b9ff; min-width:0; overflow:hidden; }
.clean-ui #voice-transcript { background:var(--surface); border-radius:9px; padding:10px; font-size:14px !important; margin:0; font-weight:400 !important; }
.clean-ui #voice-cards { display:grid; gap:10px; }
.clean-ui #voice-cards .voice-review h2 { font-size:16px; margin:0 0 6px; }
.clean-ui .voice-review-row { width:100%; display:grid; grid-template-columns:20px 72px minmax(0,1fr) 14px; align-items:center; gap:7px; min-height:44px; text-align:left; padding:8px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font-size:12px; }
.clean-ui .voice-review-row:last-child { border-bottom:0; }
.clean-ui .voice-review-row svg { width:18px; height:18px; color:var(--muted); }
.clean-ui .voice-review-row strong { font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.clean-ui .voice-task-review { display:flex; align-items:center; gap:10px; }
.clean-ui .voice-task-review .row-text { display:grid; gap:3px; font-size:13px; }
.clean-ui .voice-task-review .row-text small { font-size:11px; }
.clean-ui #view-voice .voice-banner { padding:14px 12px; }
.clean-ui #voice-badges { display:none; }
.clean-ui #voice-cards .card { padding:12px; }
.clean-ui .voice-actions { display:flex; justify-content:center; gap:16px; }
.clean-ui .voice-actions .btn-dark-full { color:var(--brand); background:transparent; min-height:44px; width:auto; border:0; padding:8px; }
.clean-ui #scanner-banner { padding:16px; }
.clean-ui #scanner-banner .calm-banner-top { font-size:10px; }
.clean-ui #scanner-banner h2 { margin:8px 0 4px; }
.clean-ui #scanner-card .scanner-row { min-height:54px; padding:8px 0; }
.clean-ui .scanner-vault-row { font-size:13px; }
.clean-ui #view-tx > .content-area { gap:10px; }
.clean-ui #view-tx .card { padding:12px; }
.clean-ui #view-tx .tx-val-input-wrap { margin:4px 0 10px; }
.clean-ui #view-tx .tx-val-input-wrap input { font-size:28px; }
.clean-ui #view-tx .tx-val-desc { font-size:13px; }
.clean-ui #view-tx .tx-val-desc input { min-height:44px; }
.clean-ui #view-tx .tx-picker { padding:8px 0; }
.clean-ui #view-tx .cat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; max-height:185px; overflow:auto; padding:2px; }
.clean-ui #view-tx .cat-opt { min-height:70px; font-size:11px; gap:5px; padding:8px 3px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.clean-ui #view-tx .cat-ico { width:33px; height:33px; min-width:33px; }
.clean-ui #view-tx .cat-ico svg { width:22px; height:22px; }
.clean-ui #view-tx .tx-picker-pm { display:flex; gap:6px; overflow:auto; padding:2px 0 6px; }
.clean-ui #view-tx .tx-picker-pm .chip { flex:none; min-height:38px; font-size:12px; }
.clean-ui #view-tx .tx-split-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.clean-ui #view-tx .tx-split-opt { min-height:40px; font-size:11px; padding:6px; }
.clean-ui #view-tx .tx-split-explain { padding:8px; font-size:12px; }
.clean-ui #view-tx .tx-view-trips { display:flex; overflow:auto; gap:6px; }
.clean-ui #view-tx .row-item { min-height:48px; padding:6px 0; }
.clean-ui #view-tx .tx-picker-pm .chip svg { width:17px; height:17px; }
.clean-ui #view-tx .row-item:has(#tx-view-catpm) > .row-left { display:none; }
.clean-ui #view-tx .row-item:has(#tx-view-catpm) > .row-right { max-width:100%; margin-left:0; width:100%; }
.clean-ui #view-tx .row-item:has(#tx-view-catpm) > .row-right:before { content:'Data'; font-size:13px; margin-right:12px; }
.clean-ui #view-tx .tx-val-input-wrap input { border-bottom:0; }
.clean-ui #view-tx .tx-event-details { font-size:12px; padding:8px 0 0; color:var(--muted); }
.clean-ui #view-tx .tx-event-details > summary { min-height:30px; cursor:pointer; }
.clean-ui #view-tx .tx-event-details .row-item { display:none; }
.clean-ui #view-tx .tx-val-top .badge { max-width:65%; font-size:11px; white-space:normal; }
.clean-ui .clean-page-title { font-size:25px; margin:4px 0 2px; }
.clean-ui .bills-new-pay { width:auto; min-height:40px; font-size:12px; padding:6px 12px; background:transparent; color:var(--brand); justify-self:end; margin-left:auto; border:0; }
.clean-ui .bills-new-item { padding-bottom:2px; }
.clean-ui .goals-new-goal { margin-bottom:12px; }
.clean-ui .goals-new-title { font-size:15px; }
.clean-ui .goals-new-title .clean-icon { flex:none; }
.clean-ui .goals-new-meta { font-size:12px; }
.clean-ui .goals-new-agenda,.clean-ui .goals-new-ritual { min-height:44px; font-size:13px; background:var(--surface-2); color:var(--brand); }
.clean-ui .clean-calendar-day { min-height:36px; }
.clean-ui .clean-calendar { padding:10px; }
.clean-ui #view-agenda #agenda-week-title { font-size:15px; }
.clean-ui .agenda-integrations,.clean-ui .activity-integrity { border:1px solid var(--line); border-radius:12px; padding:12px; font-size:13px; }
.clean-ui :is(.agenda-integrations,.activity-integrity) > summary { cursor:pointer; color:var(--muted); min-height:24px; }
.clean-ui .agenda-integrations .card { border:0; margin-top:12px; padding:0; }
.clean-ui .activity-integrity .calm-banner { margin-top:10px; }
.clean-ui #view-ritual .ritual-banner { background:var(--surface-2); padding:12px; }
.clean-ui #view-ritual .ritual-banner h2 { font-size:15px; }
.clean-ui #view-ritual .ritual-banner p { font-size:12px; }
.clean-ui .ritual-card-text { font-size:14px; line-height:1.5; }
.clean-ui #activity-new-history { padding:12px; }
.clean-ui #activity-new-history .row-item { padding:10px 0; }
.clean-ui #activity-new-history .row-right { max-width:25%; font-size:11px; }
.clean-ui .activity-day-heading { font-size:13px; font-weight:600; margin:16px 0 4px; }
.clean-ui .clean-settings-group { border:1px solid var(--line); padding:0; margin:0; }
.clean-ui .clean-settings-group > summary { font-size:14px; font-weight:550; padding:12px; min-height:54px; color:var(--ink); }
.clean-ui .clean-settings-group > summary > svg { width:22px; height:22px; color:var(--brand); flex:none; }
.clean-ui .clean-settings-group > .card { margin-bottom:10px; }
.clean-ui .activity-hash { display:none; }
.clean-ui .activity-new-row .row-text strong { font-size:13px; }
.clean-ui .activity-new-row .row-icon { width:34px; height:34px; }
.clean-ui #view-ritual .clean-review-stat { flex-direction:column; }
.clean-ui #view-ritual .clean-review-stat .clean-icon { width:28px; height:28px; }
.clean-ui #view-ritual .clean-review-stat strong { font-size:14px; }
.clean-ui #view-ritual .clean-review-summary { padding:12px; }
.clean-ui #view-ritual .card-title-row { margin-bottom:6px; }
.clean-ui #view-ritual .ritual-card-text { margin:0; font-size:13px; }
.clean-ui #view-ritual .row-item { padding:8px 0; }
.clean-ui #view-ritual .row-text strong { font-size:14px; }
.clean-ui #view-ritual .row-text span { font-size:12px; }
.clean-ui #view-ritual .ritual-banner { display:none; }
.clean-ui [hidden],.clean-ui .u-hide { display:none !important; }
@media(max-width:380px){
 .clean-ui .top-header .clean-brand{font-size:14px; flex:1;}
 .clean-ui .top-header .top-actions{flex:0 0 auto;}
 .clean-ui .top-actions{gap:0;}
 .clean-ui #menu-btn{width:36px; min-width:36px; padding:7px;}
 .clean-ui .clean-home-stat strong{font-size:16px;}
 .clean-ui .clean-home-stat > .clean-icon{width:34px;height:34px;}
 .clean-ui .clean-home-stat{padding:10px 8px;gap:6px;}
 .clean-ui .calm-banner-top{flex-wrap:wrap;gap:5px;font-size:10px;}
 .clean-ui .goals-new-title{font-size:14px;}
 .clean-ui .goals-new-title .clean-icon{width:34px;height:34px;}
}
@media(min-width:1000px){
 .clean-ui .view.screen,.clean-ui .topbar.top-header{max-width:1040px;}
 .clean-ui #view-home-new > .content-area{max-width:1040px;}
 .clean-ui #home-cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
 .clean-ui #view-home-new > .content-area > :is(.grid-2,.clean-home-actions){max-width:500px;width:100%;}
 .clean-ui .view.screen:not(#view-home-new):not(#view-settings-new) > .content-area{max-width:680px;}
 .clean-ui #view-tx > .content-area{max-width:560px !important;}
 .clean-ui .bottom-nav{bottom:12px;max-width:600px;height:72px;}
 .clean-ui .cta-sticky{bottom:96px;}
}
@media(prefers-reduced-motion:reduce){.clean-ui *{scroll-behavior:auto !important;}}