/* Наш Дом · Спокойный дом. Canonical presentation system, HUB-99.
   Legacy class names remain compatibility aliases, not a second theme layer. */
:root {
  color-scheme: light;
  --surface-canvas:#f7f7f3; --surface:#fff; --surface-muted:#f0f2f5;
  --ink:#252a34; --ink-muted:#606774; --line:#dce0e6; --control-line:#89929e;
  --accent:#315fd5; --accent-soft:#eaf0ff; --action:#315fd5; --on-action:#fff;
  --danger:#ab332d; --danger-soft:#fff0ed; --success:#286146; --success-soft:#eaf4ed;
  --focus:#315fd5; --scrim:rgb(24 31 43 / .38);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  --radius-control:12px; --radius-panel:20px; --radius-small:8px;
  --motion-fast:120ms; --motion-normal:180ms; --motion-panel:240ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --layer-nav:40; --layer-sheet:100; --layer-notice:120;
  --shadow-dialog:0 20px 70px rgb(24 31 43 / .16);
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text-body:16px; --text-caption:13px; --text-title:32px; --leading-body:1.5;
  /* Compatibility for existing domain renderers. */
  --bg:var(--surface-canvas); --bg-solid:var(--surface-canvas);
  --card:var(--surface); --card-solid:var(--surface); --stroke:var(--line);
  --text:var(--ink); --text-2:var(--ink-muted);
  --r-sm:var(--radius-control); --r-md:16px; --r-lg:var(--radius-panel);
  --r:var(--radius-panel); --r-pill:999px; --radius:var(--radius-panel);
  --shadow:none; --shadow-sm:none; --shadow-md:none; --shadow-lg:var(--shadow-dialog);
  --shadow-card-inset:none; --blur:none;
}
html[data-theme="dark"],html[data-theme="graphite"] {
  color-scheme:dark;
  --surface-canvas:#171c24; --surface:#202732; --surface-muted:#293241;
  --ink:#edf0f6; --ink-muted:#b1bbca; --line:#3b4657; --control-line:#78879d;
  --accent:#a4bcff; --accent-soft:#2b3a59; --action:#315fd5; --on-action:#fff;
  --danger:#ffafa6; --danger-soft:#462d30; --success:#a6d8b6; --success-soft:#233d32;
  --focus:#b7caff; --scrim:rgb(0 0 0 / .58);
}
html[data-theme="graphite"] { --surface-canvas:#191b20; --surface:#24272e; --surface-muted:#303540; }
html[data-theme="ocean"] {
  --surface-canvas:#f0f5f7; --surface-muted:#e7f0f5; --ink:#23313c; --ink-muted:#566a77;
  --accent:#245f80; --action:#245f80; --accent-soft:#e2eff7; --focus:#245f80;
}
html[data-theme="forest"] {
  --surface-canvas:#f1f5ee; --surface-muted:#e9f0e4; --ink:#283629; --ink-muted:#526951;
  --accent:#2d6537; --action:#2d6537; --accent-soft:#e4f0e1; --focus:#2d6537;
}
* { box-sizing:border-box; }
html { min-height:100%; scroll-padding-block:90px; }
body { margin:0; min-height:100vh; min-height:100dvh; background:var(--surface-canvas); color:var(--ink); font:400 var(--text-body)/var(--leading-body) var(--font-ui); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
h1,h2,h3,h4,p { margin:0; }
h1 { font-size:var(--text-title); line-height:1.16; letter-spacing:-.035em; font-weight:750; }
h2 { font-size:20px; line-height:1.3; letter-spacing:-.02em; }
h3 { font-size:17px; line-height:1.4; }
a { color:var(--accent); text-underline-offset:3px; }
button,input,textarea,select { font:inherit; color:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:wait; opacity:.65; }
button,a,input,select,textarea,[tabindex] { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
svg { flex-shrink:0; vertical-align:middle; }
img { max-width:100%; }
small { font-size:13px; }
strong { font-weight:650; }
.fh-visually-hidden,.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.fh-skip { position:fixed; top:8px; left:8px; padding:12px; background:var(--surface); z-index:200; transform:translateY(-150%); }
.fh-skip:focus { transform:none; }
/* Shell */
#fh-app { display:flex; min-height:100vh; min-height:100dvh; }
.fh-nav { width:216px; flex-shrink:0; display:flex; flex-direction:column; gap:6px; position:sticky; top:0; height:100vh; padding:30px 16px; border-right:1px solid var(--line); }
.fh-brand { display:flex; gap:10px; align-items:center; padding:0 12px 34px; font-size:18px; font-weight:750; letter-spacing:-.025em; }
.fh-brand svg { width:26px; height:26px; color:var(--accent); }
.fh-nav-btn { display:flex; align-items:center; gap:12px; min-height:48px; padding:12px 16px; border:0; border-radius:var(--radius-control); background:transparent; color:var(--ink-muted); text-align:left; font-size:15px; font-weight:600; transition:background var(--motion-fast),color var(--motion-fast); }
.fh-nav-btn svg { width:22px; height:22px; }
.fh-nav-btn.active { background:var(--accent-soft); color:var(--accent); }
.fh-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.fh-topbar { display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:var(--layer-nav); padding:12px 32px; padding-top:max(12px,env(safe-area-inset-top)); background:var(--surface-canvas); min-height:68px; }
.fh-breadcrumb { margin-right:auto; min-width:0; display:flex; align-items:center; gap:8px; color:var(--ink-muted); font-size:14px; }
.fh-breadcrumb button { display:flex; align-items:center; gap:6px; min-height:44px; border:0; padding:0 8px 0 0; background:transparent; color:var(--ink-muted); }
.fh-breadcrumb svg { width:16px; height:16px; }
.fh-topbar .fh-global-add { width:auto; gap:8px; padding-inline:16px; background:var(--action); color:var(--on-action); }
#tab-root { flex:1; width:100%; max-width:1000px; margin:0 auto; padding:20px 32px 64px; min-width:0; }
#tab-root[data-page="today"],#tab-root[data-page="our"] { max-width:1192px; }
.tab-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.fh-page-kicker { display:block; font-size:14px; font-weight:500; color:var(--ink-muted); margin-bottom:8px; }
.fh-page-description { color:var(--ink-muted); margin-top:8px; max-width:55ch; font-size:15px; }
.fh-view { min-width:0; }
.fh-page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); font-size:14px; font-weight:550; }
.fh-dialog-open { overflow:hidden; }
.fh-today-main,.fh-today-side { min-width:0; display:grid; align-content:start; gap:24px; }
.fh-today-main > .fh-section { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:20px; }
.fh-today-side > .fh-section { padding:4px 0 20px; border-bottom:1px solid var(--line); }
.fh-section-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.fh-section-header h2 { font-size:18px; }
.fh-kicker { display:block; color:var(--ink-muted); font-size:14px; margin-bottom:8px; }
.fh-list-row { display:flex; align-items:center; gap:8px; min-height:66px; padding:8px 0; border-bottom:1px solid var(--line); }
.fh-list-row:last-child { border-bottom:0; }
.fh-row-title { font-size:16px; font-weight:550; overflow-wrap:anywhere; }
.fh-row-open { display:block; width:100%; min-height:44px; border:0; padding:8px 0; color:var(--ink); background:transparent; text-align:left; }
.fh-row-check { width:44px; height:44px; margin:0; flex:0 0 44px; display:grid; place-items:center; accent-color:var(--action); cursor:pointer; }
.fh-row-check input { width:22px; height:22px; margin:0; }
.fh-row-main:is(button) { min-height:44px; border:0; padding:8px 0; background:transparent; color:var(--ink); text-align:left; }
.fh-row-main .fh-row-title { display:block; }
.fh-row-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.fh-list-row.is-complete .fh-row-title { text-decoration:line-through; color:var(--ink-muted); }
.fh-list-row.is-pending { border-inline-start:3px solid var(--accent); padding-inline-start:8px; }
.is-overdue .fh-row-meta { color:var(--danger); }
.fh-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.fh-editor-form { display:grid; gap:14px; }
.fh-form-error { color:var(--danger); font-size:14px; margin-block:8px; }
.fh-form-disclosure,.shopping-options { margin-block:12px; }
.fh-form-disclosure summary,.shopping-options summary { cursor:pointer; min-height:44px; padding:10px 0; color:var(--ink-muted); font-size:14px; }
.fh-dela-navigation { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:20px; }
.fh-dela-navigation .seg { margin:0; flex:1; }
.fh-task-form { margin-bottom:20px; }
.fh-shopping-composer { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:16px; margin-bottom:24px; }
.fh-shopping-composer > label { margin-bottom:8px; }
.fh-shopping > .shopping-items { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:4px 16px; }
.fh-shopping .shopping-options { margin-bottom:0; }
.fh-shopping .shopping-status:empty { display:none; }
.fh-today-main,.fh-today-side { row-gap:12px; }
.fh-today-main .fh-home-heading:not(:first-child),.fh-today-side .fh-home-heading:not(:first-child) { margin-top:16px; }
.fh-today-main .fh-home-heading,.fh-today-side .fh-home-heading { margin-bottom:0; }
.fh-today-side .fh-shopping-preview { border:0; background:var(--accent-soft); border-radius:var(--radius-panel); padding:20px; }
.fh-list-row > .btn-primary { width:auto; flex-shrink:0; }
.fh-inline-add { display:flex; align-items:center; gap:8px; }
.fh-inline-add input { flex:1; margin:0; }
.fh-inline-add .btn-primary { width:auto; }
.fh-shopping-section { background:var(--surface); padding:16px 20px; border:1px solid var(--line); border-radius:var(--radius-panel); margin-block:16px; }
.fh-shopping-quantity { font-size:13px; color:var(--ink-muted); }
.fh-agenda-row,.fh-change-row { display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 0; border-bottom:1px solid var(--line); }
.fh-shopping-preview { color:var(--ink-muted); font-size:14px; margin-top:6px; }
.fh-empty { padding:24px 0; color:var(--ink-muted); }
.fh-sheet-body > div > .btn-primary { margin-top:16px; }
/* Shared surfaces / controls */
.glass-card,.fh-surface { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:20px; margin-bottom:16px; }
input:not([type="checkbox"]):not([type="radio"]),textarea,select { width:100%; min-width:0; min-height:48px; padding:11px 13px; margin-bottom:12px; border:1px solid var(--control-line); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); font-size:16px; transition:border-color var(--motion-fast),box-shadow var(--motion-fast); }
input:focus,textarea:focus,select:focus { border-color:var(--focus); }
input::placeholder,textarea::placeholder { color:var(--ink-muted); opacity:1; }
input[type="checkbox"],input[type="radio"] { accent-color:var(--action); flex-shrink:0; }
textarea { resize:vertical; line-height:1.55; }
label,.fh-field-label { font-size:14px; font-weight:550; color:var(--ink); }
.fh-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fh-field input,.fh-field textarea,.fh-field select { margin-bottom:0; }
.fh-field-error,.fh-home-form-error { color:var(--danger); font-size:14px; margin-top:6px; }
.btn-primary,.btn-ghost,.fh-m-ok,.m-ok,.fh-m-cancel,.m-cancel { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 16px; border:1px solid transparent; border-radius:var(--radius-control); font-weight:650; font-size:15px; transition:background var(--motion-fast),transform var(--motion-fast); }
.btn-primary { width:100%; }
.btn-primary,.fh-m-ok,.m-ok { background:var(--action); color:var(--on-action); }
.btn-ghost,.fh-m-cancel,.m-cancel { background:var(--surface-muted); color:var(--ink); }
.btn-ghost { width:100%; }
.fh-m-ok.danger,.m-ok.danger { background:var(--danger); color:var(--surface); }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; flex-shrink:0; padding:10px; border:0; border-radius:var(--radius-control); background:transparent; color:var(--ink-muted); transition:background var(--motion-fast),transform var(--motion-fast); }
.icon-btn.small { width:44px; height:44px; min-width:44px; padding:11px; }
.icon-btn svg { width:20px; height:20px; }
.icon-btn.active-tool { color:var(--accent); background:var(--accent-soft); }
.btn-with-icon,.inline-ico { display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary:active,.icon-btn:active,.btn-ghost:active { transform:scale(.98); }
.badge { display:inline-flex; align-items:center; padding:3px 9px; background:var(--accent-soft); color:var(--accent); border-radius:999px; font-size:13px; font-weight:650; }
@media (hover:hover) { .icon-btn:hover,.fh-nav-btn:hover,.btn-ghost:hover { background:var(--surface-muted); } .fh-nav-btn.active:hover { background:var(--accent-soft); } a:hover { text-decoration-thickness:2px; } }
/* Segments and filters wrap rather than clipping long Russian labels. */
.seg,.fh-segments,.chip-group { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:16px; min-width:0; }
.seg { background:var(--surface-muted); border-radius:14px; padding:4px; }
.seg-btn,.chip,.fh-segments button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:1px solid transparent; border-radius:10px; padding:9px 13px; background:transparent; color:var(--ink-muted); font-size:14px; font-weight:600; line-height:1.35; transition:background var(--motion-fast),color var(--motion-fast); }
.seg-btn { flex:1; }
.fh-segments button { background:var(--surface); border-color:var(--line); }
.seg-btn.active,.chip.active,.fh-segments button.active { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.seg-ico { display:inline-flex; }
/* Today: a dominant action column, a quieter outlook, no decorative hero. */
.fh-today-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; align-items:start; }
.fh-today-section { min-width:0; }
.fh-today-section h2,.fh-home-heading { font-size:17px; font-weight:650; margin:0 0 12px; }
.fh-today-section--important { grid-row:span 2; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:20px; }
.fh-today-section--upcoming { border-top:2px solid var(--line); padding-top:16px; }
.fh-today-section--shopping { padding:18px 20px; border-radius:var(--radius-panel); background:var(--accent-soft); }
.fh-today-section--changes { grid-column:1/-1; border-top:1px solid var(--line); padding-top:20px; }
.fh-today-section--changes .fh-home-entry { font-size:14px; }
.fh-home-list { display:grid; gap:0; }
.fh-home-entry,.fh-home-card { display:flex; align-items:center; gap:12px; width:100%; min-width:0; min-height:58px; border:0; border-bottom:1px solid var(--line); padding:12px 0; border-radius:0; background:transparent; color:var(--ink); text-align:left; font:inherit; }
.fh-home-list > :last-child { border-bottom:0; }
.fh-home-card { flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; cursor:pointer; }
.fh-home-card strong,.fh-home-entry strong { display:block; font-size:16px; font-weight:550; overflow-wrap:anywhere; }
.fh-home-card span,.fh-home-card small,.fh-home-entry small { color:var(--ink-muted); font-size:13px; }
.fh-row-main { flex:1; min-width:0; overflow-wrap:anywhere; }
.fh-row-meta { display:block; margin-top:3px; color:var(--ink-muted); font-size:13px; }
.fh-check { position:relative; width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; cursor:pointer; }
.fh-check input { position:absolute; inset:0; width:44px; height:44px; margin:0; opacity:0; cursor:pointer; }
.fh-check-mark { display:grid; place-items:center; width:22px; height:22px; border:1.5px solid var(--control-line); border-radius:7px; color:transparent; background:var(--surface); transition:background var(--motion-fast),border-color var(--motion-fast); pointer-events:none; }
.fh-check input:checked + .fh-check-mark { border-color:var(--action); background:var(--action); color:var(--on-action); }
.fh-check input:focus-visible + .fh-check-mark { outline:3px solid var(--focus); outline-offset:3px; }
.fh-check input:disabled + .fh-check-mark { opacity:.65; }
.fh-check-mark svg { width:16px; height:16px; }
.fh-shopping-link { display:flex; align-items:center; gap:16px; width:100%; border:0; padding:0; background:transparent; color:var(--ink); text-align:left; min-height:54px; }
.fh-shopping-link strong { display:block; font-size:18px; }
.fh-shopping-link small { color:var(--ink-muted); display:block; margin-top:4px; }
.fh-home-empty,.empty-state { text-align:center; color:var(--ink-muted); padding:36px 20px; }
.fh-home-empty strong,.empty-title { display:block; color:var(--ink); font-size:18px; margin-bottom:8px; }
.empty-hint { font-size:14px; max-width:36ch; margin:0 auto; }
.empty-icon { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 16px; border-radius:16px; background:var(--surface-muted); color:var(--accent); }
/* Shopping: persistent composer, stable keyed rows, distinct edit/toggle targets. */
.fh-shopping-panel { padding:0; overflow:visible; }
.fh-shopping-compose { display:grid; grid-template-columns:minmax(0,1fr) 68px 46px; gap:8px; align-items:end; padding:16px; border-bottom:1px solid var(--line); }
.fh-shopping-compose input { margin:0 !important; }
.fh-shopping-compose .shopping-add { background:var(--action); color:var(--on-action); height:48px; width:46px; }
.fh-shopping-compose .fh-field { gap:5px; }
.fh-shopping-compose label { font-size:13px; }
.fh-shopping-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px 0; }
.fh-shopping-toolbar .fh-segments { margin:0; }
.fh-shopping-summary { margin-left:auto; color:var(--ink-muted); font-size:13px; }
.shopping-items { padding:0 12px 12px; }
.fh-shopping-row { display:flex; align-items:center; gap:4px; min-height:64px; border-bottom:1px solid var(--line); padding:4px 0; }
.fh-shopping-row:last-child { border-bottom:0; }
.fh-shopping-name { flex:1; min-width:0; padding:8px; min-height:48px; border:0; border-radius:8px; background:transparent; text-align:left; overflow-wrap:anywhere; }
.fh-shopping-name strong { display:block; font-size:16px; font-weight:500; }
.fh-shopping-name small { display:block; color:var(--ink-muted); margin-top:2px; }
.fh-shopping-row.is-purchased .fh-shopping-name strong { text-decoration:line-through; color:var(--ink-muted); }
.fh-row-status { color:var(--ink-muted); font-size:12px; }
.fh-shopping-error { margin:0 16px 12px; }
.fh-error-panel { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--danger-soft); color:var(--danger); }
.fh-error-panel button { min-height:44px; flex-shrink:0; }
/* Our: named groups, destinations are rows, not a wall of equal cards. */
.fh-our-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.fh-our-group { min-width:0; }
.fh-our-group h2 { font-size:14px; font-weight:650; color:var(--ink-muted); margin:0 0 10px 4px; }
.fh-our-group-list { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:4px 16px; }
.fh-our-card { display:flex; align-items:center; gap:14px; width:100%; min-height:82px; padding:14px 0; margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); text-align:left; }
.fh-our-card:last-child { border-bottom:0; }
.fh-our-card > svg { width:24px; height:24px; color:var(--accent); }
.fh-our-card-text { display:flex; flex-direction:column; flex:1; min-width:0; gap:4px; }
.fh-our-card-text strong { font-size:16px; font-weight:600; }
.fh-our-card-summary { color:var(--ink-muted); font-size:13px; }
.fh-our-card-chevron { color:var(--ink-muted); font-size:22px; }
/* Domain surfaces: retain every existing feature/selector. */
.movies-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.movies-toolbar .seg { flex:1; margin:0; }
.movie-form { margin-top:16px; }
.movie-row { display:flex; gap:16px; min-width:0; flex-wrap:wrap; }
.movie-poster { width:88px; aspect-ratio:2/3; object-fit:cover; border-radius:10px; flex-shrink:0; align-self:flex-start; background:var(--surface-muted); }
.movie-info { flex:1; min-width:140px; }
.movie-info p,.movie-meta { font-size:14px; color:var(--ink-muted); margin-top:6px; }
.movie-meta { display:flex; flex-wrap:wrap; gap:4px; }
.card-icons { display:flex; gap:2px; flex-shrink:0; align-self:flex-start; flex-wrap:wrap; }
.movie-footer { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px; }
.movie-footer .btn-primary { width:auto; margin-left:auto; }
.kp-row { display:flex; align-items:center; gap:12px; padding:8px; border-radius:10px; cursor:pointer; }
.kp-row img,.kp-no-poster { width:40px; min-height:56px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.kp-no-poster { display:grid; place-items:center; background:var(--surface-muted); color:var(--accent); }
.kp-info { min-width:0; font-size:15px; }
.kp-meta { color:var(--ink-muted); font-size:13px; }
.wish-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:16px; }
.wish-card { display:flex; flex-direction:column; gap:10px; min-width:0; position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-panel); padding:18px; }
.wish-card.done .wish-title { text-decoration:line-through; color:var(--ink-muted); }
.wish-title { font-size:17px; font-weight:600; overflow-wrap:anywhere; padding-right:72px; min-height:44px; }
.wish-img { width:100%; height:168px; object-fit:cover; border-radius:12px; background:var(--surface-muted); }
.wish-link { overflow-wrap:anywhere; font-size:14px; }
.wish-author { color:var(--ink-muted); font-size:13px; margin-top:auto; }
.wish-toggle { min-height:44px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface-muted); color:var(--ink); font-size:14px; }
.f-del,.f-star,.f-edit { display:grid; place-items:center; width:44px; height:44px; border:0; padding:10px; color:var(--ink-muted); background:transparent; border-radius:10px; }
.wish-card .f-del { position:absolute; right:6px; top:8px; }
.wish-card .f-star { position:absolute; right:50px; top:8px; }
.f-star.active { color:var(--accent); }
.folder-grid,.file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:12px; }
.folder-tile,.file-tile { display:flex; flex-direction:column; gap:10px; min-width:0; position:relative; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); cursor:pointer; }
.folder-tile strong,.file-tile strong { font-size:15px; overflow-wrap:anywhere; }
.folder-tile small,.file-tile small { color:var(--ink-muted); font-size:13px; }
.folder-tile .f-icon,.file-tile .thumb { color:var(--accent); background:var(--surface-muted); padding:12px; border-radius:12px; }
.file-tile .thumb img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.file-tile .actions { display:flex; flex-wrap:wrap; gap:4px; }
.tile-act { display:grid; place-items:center; width:44px; height:44px; background:var(--surface-muted); border:0; border-radius:10px; color:var(--ink); text-decoration:none; }
.folder-tile.add-tile { border-style:dashed; background:transparent; }
.dropzone { padding:24px; border:2px dashed var(--control-line); border-radius:16px; text-align:center; color:var(--ink-muted); cursor:pointer; }
.dropzone.dragover { background:var(--accent-soft); border-color:var(--accent); }
.rem-tile { display:flex; flex-direction:column; position:relative; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); cursor:pointer; min-width:0; gap:4px; }
.rem-time { font-size:22px; font-weight:650; color:var(--accent); padding-right:78px; }
.rem-date { font-size:13px; color:var(--ink-muted); }
.rem-title { font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.rem-desc { font-size:14px; color:var(--ink-muted); overflow-wrap:anywhere; }
.rem-tile .f-del { position:absolute; right:4px; top:8px; }
.rem-tile .f-edit { position:absolute; right:48px; top:8px; }
.rem-tile.past { background:var(--surface-muted); }
.rem-tile.soon { border-color:var(--accent); }
.rem-detail { text-align:left; }
.rem-detail-time { color:var(--accent); font-size:28px; font-weight:650; }
.rem-detail-date { color:var(--ink-muted); margin-bottom:16px; }
.rem-detail-title { font-size:20px; margin-bottom:12px; overflow-wrap:anywhere; }
.rem-detail-desc { white-space:pre-wrap; overflow-wrap:anywhere; }
.fh-home { max-width:100%; }
.fh-home-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fh-home-metrics { margin-bottom:24px; }
.fh-home-metrics button { min-height:90px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-align:left; }
.fh-home-metrics strong { display:block; font-size:13px; color:var(--ink-muted); font-weight:500; }
.fh-home-metrics b { display:block; font-size:28px; margin-top:6px; }
.fh-home-toolbar { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-bottom:16px; }
.fh-home-toolbar .btn-primary { width:auto; }
.fh-home-upload { display:inline-flex; align-items:center; cursor:pointer; }
.fh-home-upload input { position:absolute; width:1px; height:1px; clip-path:inset(50%); }
.fh-home-upload:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.fh-home-link-button { padding:8px 0; min-height:44px; border:0; background:transparent; color:var(--accent); font:inherit; text-decoration:underline; }
.fh-home-form { text-align:left; }
.fh-home-form h2 { margin-bottom:20px; }
.fh-home-form label { display:block; margin:12px 0; }
.fh-home-form label input { margin-top:6px; }
.fh-analysis-review { max-height:82dvh; overflow:auto; }
.fh-analysis-choice { font-weight:650; }
.fh-analysis-notes { padding:12px; background:var(--accent-soft); border-radius:10px; }
.fh-sub-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.fh-sub-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.fh-sub-field input,.fh-sub-field select,.fh-sub-field textarea { margin:0; }
.fh-sub-form > p,.fh-sub-actions { grid-column:1/-1; }
.fh-sub-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fh-sub-actions .btn-primary { width:auto; }
/* Notes and retained optional AI surfaces */
.note-editor { max-width:720px !important; display:flex; flex-direction:column; gap:12px; text-align:left; }
.ne-head { display:flex; align-items:center; gap:12px; }
.ne-head strong { flex:1; font-size:19px; }
.ne-close { width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--ink-muted); }
.ne-title { font-size:18px !important; font-weight:600; margin:0 !important; }
.ne-toolbar { display:flex; flex-wrap:wrap; gap:4px; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface-muted); }
.ne-toolbar button { min-height:44px; min-width:44px; padding:8px 10px; border:0; border-radius:8px; background:var(--surface); font-size:14px; }
.ne-sep { width:1px; background:var(--line); margin:4px; }
.ne-body { min-height:220px; margin:0 !important; line-height:1.6; }
.ne-foot { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ne-count { color:var(--ink-muted); }
.note-body { margin:12px 0; line-height:1.65; overflow-wrap:anywhere; }
.note-body h4 { font-size:18px; margin:16px 0 8px; }
.note-body ul,.note-body ol { padding-left:24px; }
.note-body blockquote { margin:12px 0; padding:10px 16px; border-left:3px solid var(--accent); background:var(--accent-soft); }
.note-body hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.note-body .md-check { padding:4px 0; }
.note-body .md-check.done span { text-decoration:line-through; color:var(--ink-muted); }
.check-items > div:last-child { border-bottom:0 !important; }
.ai-panel { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.ai-label { font-size:14px; font-weight:600; margin:12px 0 6px; }
.ai-label span,.ai-movie-year { font-weight:400; color:var(--ink-muted); }
.ai-select { appearance:auto; }
.ai-loading { display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; color:var(--ink-muted); }
.ai-error { color:var(--danger); padding:16px; }
.ai-result { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.ai-movie-card,.meal-dish { background:var(--surface-muted); border-radius:14px; padding:16px; }
.ai-movie-title { font-weight:650; }
.ai-movie-meta,.ai-movie-why { font-size:13px; color:var(--ink-muted); }
.ai-movie-about { margin:8px 0; }
.ai-movie-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ai-movie-actions button { min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--accent); }
.ai-movie-actions button.added { background:var(--action); color:var(--on-action); }
/* Login, settings, sheets */
#login-screen { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.fh-login { width:100%; max-width:400px; padding:32px; background:var(--surface); border:1px solid var(--line); border-radius:24px; }
.fh-login-logo { color:var(--accent); margin-bottom:20px; }
.fh-login h1 { font-size:30px; margin-bottom:8px; }
.fh-login p { color:var(--ink-muted); margin-bottom:24px; font-size:15px; }
.fh-login label { display:block; margin-bottom:6px; }
#login-error { color:var(--danger); font-size:14px; margin-top:12px; }
.theme-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.theme-swatch { width:90px; min-height:80px; padding:10px; border:2px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink-muted); font-size:12px; font-weight:600; }
.theme-swatch .sw { height:32px; margin-bottom:8px; border-radius:8px; }
.theme-swatch.active { border-color:var(--accent); color:var(--accent); }
.fh-modal-overlay,.viewer-overlay { position:fixed; inset:0; z-index:var(--layer-sheet); display:flex; align-items:center; justify-content:center; padding:24px; background:var(--scrim); overscroll-behavior:contain; }
.fh-dialog-open .fh-global-add { visibility:hidden; }
.fh-modal { width:100%; max-width:440px; max-height:calc(100dvh - 48px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow-dialog); text-align:left; }
.fh-modal h2,.fh-modal > strong { font-size:20px; }
.fh-modal > p { margin:12px 0 20px; }
.fh-modal-btns,.fh-modal-actions { display:flex; gap:10px; margin-top:20px; }
.fh-modal-btns > button,.fh-modal-actions > button { flex:1; }
.fh-shell-modal { max-width:500px; }
.fh-sheet-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.fh-sheet-head h2 { flex:1; }
.fh-sheet-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fh-sheet-option { display:flex; align-items:center; gap:10px; min-height:64px; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:12px; color:var(--ink); text-align:left; }
.fh-sheet-option svg { color:var(--accent); }
.fh-search-results { margin-top:16px; }
.fh-search-row { display:flex; flex-direction:column; gap:4px; min-height:66px; width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:12px 4px; text-align:left; }
.fh-search-row small { color:var(--ink-muted); }
.viewer-content { max-width:95vw; max-height:90dvh; }
.viewer-content img,.viewer-content video { max-width:95vw; max-height:85dvh; border-radius:12px; }
.viewer-close { position:absolute; top:max(16px,env(safe-area-inset-top)); right:16px; width:44px; height:44px; border:0; border-radius:12px; background:var(--surface); color:var(--ink); }
/* Honest states; no endless decorative animations. */
.skeleton { border-radius:10px; background:var(--surface-muted); }
.skeleton-card { height:74px; margin-bottom:12px; }
.fh-stale-indicator { color:var(--ink-muted); background:var(--surface-muted); border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:16px; }
.fh-toast,.fh-undo-toast,#fh-offline-banner,#fh-update-bar { position:fixed; z-index:var(--layer-notice); bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:min(520px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:16px; padding:12px 16px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-dialog); font-size:14px; overflow-wrap:anywhere; transition:opacity var(--motion-normal); }
.fh-undo-toast,#fh-update-bar { display:flex; align-items:center; gap:12px; opacity:0; pointer-events:none; }
.fh-undo-toast.visible,#fh-update-bar.visible { opacity:1; pointer-events:auto; }
.fh-undo-toast button,#fh-update-bar button { min-height:44px; padding:8px 12px; border:0; border-radius:10px; background:var(--accent-soft); color:var(--accent); font-size:14px; font-weight:650; flex-shrink:0; }
#fh-offline-banner { opacity:0; pointer-events:none; }
#fh-offline-banner.visible { opacity:1; }
#fh-update-bar span { display:flex; align-items:center; gap:8px; }
.fh-entity-highlight { outline:3px solid var(--focus); outline-offset:3px; border-radius:12px; }
@keyframes fh-appear { from { opacity:.4; transform:translateY(4px); } to { opacity:1; transform:none; } }
.tab-entering { animation:fh-appear var(--motion-normal) var(--ease-out); }
.fh-toast { animation:fh-notice var(--motion-normal) var(--ease-out); }
@keyframes fh-notice { from { opacity:0; } to { opacity:1; } }
.fh-modal { animation:fh-appear var(--motion-panel) var(--ease-out); }
@media (max-width:900px) { .fh-nav { width:184px; padding-inline:12px; } .fh-brand { padding-left:6px; } #tab-root { padding-inline:24px; } .fh-today-grid { grid-template-columns:1fr; gap:20px; } .fh-today-section--important { grid-row:auto; } .fh-our-grid { gap:16px; } }
@media (max-width:700px) {
  .fh-form-grid { grid-template-columns:1fr; }
  .fh-shopping-section { padding:12px; }
  .fh-shopping .shopping-add { min-width:48px; padding-inline:12px; }
  .fh-shopping .shopping-add span { display:none; }
  .fh-today-main > .fh-section { padding:16px; }
  #fh-app { flex-direction:column; }
  .fh-nav { flex-direction:row; justify-content:space-around; gap:0; position:fixed; inset:auto 0 0; width:auto; height:auto; min-height:72px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--line); background:var(--surface); z-index:var(--layer-nav); }
  .fh-brand { display:none; }
  .fh-nav-btn { flex:1; min-width:0; min-height:58px; flex-direction:column; justify-content:center; gap:4px; border-radius:12px; padding:6px 2px; text-align:center; font-size:12px; font-weight:600; }
  .fh-nav-btn span { max-width:100%; overflow-wrap:anywhere; line-height:1.25; }
  .fh-nav-btn svg { width:23px; height:23px; }
  .fh-topbar { padding:8px 16px; padding-top:max(8px,env(safe-area-inset-top)); min-height:60px; gap:4px; }
  .fh-topbar .fh-global-add { position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:calc(92px + env(safe-area-inset-bottom)); width:52px; height:52px; border-radius:18px; padding:14px; box-shadow:0 4px 16px rgb(20 35 60 / .15); }
  .fh-global-add .fh-action-label { display:none; }
  #tab-root { padding:16px max(18px,env(safe-area-inset-left)) calc(160px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right)); }
  h1 { font-size:30px; }
  .tab-header { margin-bottom:20px; }
  .glass-card { padding:16px; }
  .fh-shopping-panel { padding:0; }
  .fh-shopping-compose { padding:14px 12px; grid-template-columns:minmax(0,1fr) 58px 44px; gap:6px; }
  .fh-shopping-compose label { font-size:12px; }
  .fh-shopping-compose .shopping-add { width:44px; }
  .fh-shopping-summary { width:100%; margin:0 0 4px; }
  .fh-today-section--important { padding:16px 12px; }
  .fh-today-section--important h2 { padding-left:4px; }
  .fh-our-grid { grid-template-columns:1fr; gap:24px; }
  .fh-our-card { min-height:78px; }
  .wish-grid { grid-template-columns:1fr; }
  .fh-home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fh-modal-overlay { align-items:flex-end; padding:max(12px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)); }
  .fh-modal { padding:20px; border-radius:24px 24px 18px 18px; max-height:calc(var(--fh-viewport-height,100dvh) - 24px); }
  .ne-body { min-height:180px; }
  .fh-sub-form { grid-template-columns:1fr; }
  .fh-toast,.fh-undo-toast,#fh-offline-banner,#fh-update-bar { bottom:calc(84px + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); }
  .fh-undo-toast { bottom:calc(144px + env(safe-area-inset-bottom)); }
  .fh-login { padding:28px 24px; }
  html[data-keyboard="open"] .fh-global-add { visibility:hidden; }
}
@media (max-width:360px) { #tab-root { padding-inline:16px; } .fh-sheet-options { grid-template-columns:1fr; } .fh-modal { padding:16px; } .fh-shopping-compose { grid-template-columns:minmax(0,1fr) 52px 44px; } .fh-shopping-compose input { padding-inline:8px; } .fh-home-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .btn-primary:active,.icon-btn:active,.btn-ghost:active { transform:none; } }
@media (forced-colors:active) { .fh-check-mark { border:2px solid ButtonText; } .fh-check input:checked + .fh-check-mark { background:Highlight; color:HighlightText; } .fh-nav-btn.active { outline:2px solid Highlight; } }
@media print { .fh-nav,.fh-topbar,.fh-modal-overlay,.fh-toast { display:none !important; } #tab-root { max-width:none; padding:0; } }