/* The appearance layer follows the base theme and never changes house data. */
html[data-ui-accent="ocean"]{--primary:#1765c1;--primary2:#10539f;--primary-soft:#e9f2ff;--accent-ink:#15519e;--hero:#123e70;--hero-end:#266ba0;--hero-light:#d8ecff}
html[data-ui-accent="plum"]{--primary:#8051a2;--primary2:#6d3c91;--primary-soft:#f5eafa;--accent-ink:#703b91;--hero:#44305e;--hero-end:#754b83;--hero-light:#f1dff9}
html[data-theme="dark"][data-ui-accent="ocean"]{--primary:#84bcff;--primary2:#add2ff;--primary-soft:#1d3c59;--accent-ink:#b7d8ff;--hero:#102e50;--hero-end:#194a75}
html[data-theme="dark"][data-ui-accent="plum"]{--primary:#ddb2f2;--primary2:#ebc8f7;--primary-soft:#48304d;--accent-ink:#f2d4fc;--hero:#362648;--hero-end:#633f71}
@media(prefers-color-scheme:dark){
  html[data-theme="system"][data-ui-accent="ocean"]{--primary:#84bcff;--primary2:#add2ff;--primary-soft:#1d3c59;--accent-ink:#b7d8ff;--hero:#102e50;--hero-end:#194a75}
  html[data-theme="system"][data-ui-accent="plum"]{--primary:#ddb2f2;--primary2:#ebc8f7;--primary-soft:#48304d;--accent-ink:#f2d4fc;--hero:#362648;--hero-end:#633f71}
}
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .resident-head{background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .sidebar button{color:var(--muted)}
html[data-theme="dark"] .sidebar button:hover{background:var(--panel2);color:var(--ink)}
html[data-theme="dark"] .sidebar button.active{background:var(--primary-soft);color:var(--accent-ink)}
html[data-theme="dark"] :is(input,select,textarea){background:var(--panel2);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .btn.soft{background:var(--panel2);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .notice:not(.urgent){background:var(--panel2);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] th{background:var(--panel2);color:var(--muted)}
@media(prefers-color-scheme:dark){
  html[data-theme="system"] .sidebar,html[data-theme="system"] .resident-head{background:var(--panel);color:var(--ink);border-color:var(--line)}
  html[data-theme="system"] .sidebar button{color:var(--muted)}
  html[data-theme="system"] .sidebar button:hover{background:var(--panel2);color:var(--ink)}
  html[data-theme="system"] .sidebar button.active{background:var(--primary-soft);color:var(--accent-ink)}
  html[data-theme="system"] :is(input,select,textarea){background:var(--panel2);border-color:var(--line);color:var(--ink)}
  html[data-theme="system"] .btn.soft{background:var(--panel2);color:var(--ink);border-color:var(--line)}
  html[data-theme="system"] .notice:not(.urgent){background:var(--panel2);color:var(--ink);border-color:var(--line)}
  html[data-theme="system"] th{background:var(--panel2);color:var(--muted)}
}
html[data-ui-accent="ocean"] .brand-mark,html[data-ui-accent="plum"] .brand-mark,html[data-ui-accent="ocean"] .login-icon,html[data-ui-accent="plum"] .login-icon{background:var(--primary)}
html[data-ui-accent="ocean"] .house-hero,html[data-ui-accent="plum"] .house-hero{background:linear-gradient(115deg,var(--hero),var(--hero-end))}
html[data-ui-accent="ocean"] .resident-hero,html[data-ui-accent="plum"] .resident-hero{background:linear-gradient(120deg,var(--hero),var(--hero-end))}
html[data-theme="dark"][data-ui-accent="ocean"] .btn.primary,html[data-theme="dark"][data-ui-accent="plum"] .btn.primary{color:#142438}
html[data-theme="dark"][data-ui-accent="ocean"] .brand-mark,html[data-theme="dark"][data-ui-accent="plum"] .brand-mark,html[data-theme="dark"][data-ui-accent="ocean"] .login-icon,html[data-theme="dark"][data-ui-accent="plum"] .login-icon{color:#142438}
@media(prefers-color-scheme:dark){html[data-theme="system"][data-ui-accent="ocean"] .btn.primary,html[data-theme="system"][data-ui-accent="plum"] .btn.primary{color:#142438}}
@media(prefers-color-scheme:dark){html[data-theme="system"][data-ui-accent="ocean"] .brand-mark,html[data-theme="system"][data-ui-accent="plum"] .brand-mark,html[data-theme="system"][data-ui-accent="ocean"] .login-icon,html[data-theme="system"][data-ui-accent="plum"] .login-icon{color:#142438}}
html[data-ui-contrast="high"]{--muted:#415c51;--line:#8b9f95;--shadow-sm:0 2px 10px #182c2715}
html[data-theme="dark"][data-ui-contrast="high"]{--muted:#d3e4d7;--line:#829889}
@media(prefers-color-scheme:dark){html[data-theme="system"][data-ui-contrast="high"]{--muted:#d3e4d7;--line:#829889}}
html[data-ui-contrast="high"] .person-place,html[data-ui-contrast="high"] .home-stat,html[data-ui-contrast="high"] .btn.soft{border-color:var(--line)}
html[data-ui-density="compact"] .content{padding:18px 22px 44px}
html[data-ui-density="compact"] .panel{padding:16px}
html[data-ui-density="compact"] .room-card{padding:14px}
html[data-ui-density="compact"] .home-focus-grid,html[data-ui-density="compact"] .room-cards{gap:12px}
html[data-ui-density="compact"] .home-section{margin-bottom:18px}
html[data-ui-density="compact"] .section-head,html[data-ui-density="compact"] .page-head{margin-bottom:12px}
html[data-ui-density="compact"] td{padding:10px 12px}
html[data-ui-density="compact"] .person-place{padding:8px 10px}
html[data-ui-density="compact"] .waste-upcoming{padding:11px 0}
html[data-ui-density="relaxed"] .content{padding:36px 42px 76px}
html[data-ui-density="relaxed"] .panel{padding:30px}
html[data-ui-density="relaxed"] .room-card{padding:26px}
html[data-ui-density="relaxed"] .home-focus-grid,html[data-ui-density="relaxed"] .room-cards{gap:26px}
html[data-ui-density="relaxed"] .section-head{margin-bottom:24px}
html[data-ui-density="relaxed"] td{padding:20px 16px}
html[data-ui-width="focused"] .content{max-width:1120px}
html[data-ui-width="wide"] .content{max-width:1900px}
html[data-ui-text="large"] body{font-size:17px}
html[data-ui-text="large"] .sidebar nav button{font-size:16px}
html[data-ui-text="large"] .resident-nav button{font-size:13px}
html[data-ui-text="large"] .page-head p,html[data-ui-text="large"] .house-hero p,html[data-ui-text="large"] .resident-hero p{font-size:16px}
html[data-ui-text="large"] .btn,html[data-ui-text="large"] .appearance-panel select,html[data-ui-text="large"] input,html[data-ui-text="large"] select,html[data-ui-text="large"] textarea{font-size:16px}
html[data-ui-text="large"] table,html[data-ui-text="large"] .room-card-head h3,html[data-ui-text="large"] .waste-upcoming b,html[data-ui-text="large"] .attention-link b{font-size:16px}
html[data-ui-text="large"] .person-place b,html[data-ui-text="large"] .agenda-preview b,html[data-ui-text="large"] .duty-person p,html[data-ui-text="large"] .notice,html[data-ui-text="large"] .home-empty p{font-size:15px}
html[data-ui-text="large"] .person-place small,html[data-ui-text="large"] .waste-upcoming small,html[data-ui-text="large"] .room-card-head div>span,html[data-ui-text="large"] .home-stat-label{font-size:13px}
html[data-ui-text="large"] .page-head h1{font-size:32px}
html[data-ui-text="large"] .form-grid label{font-size:15px}
html[data-ui-text="large"] .appearance-field-title{font-size:16px}
html[data-ui-motion="reduced"] *,html[data-ui-motion="reduced"] *:before,html[data-ui-motion="reduced"] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* Simple, finger-friendly appearance controls in Settings and both profiles. */
.appearance-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);padding:24px;margin-bottom:22px;min-width:0}
.appearance-heading{display:flex;align-items:center;gap:15px;margin-bottom:23px}
.appearance-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:0 0 auto;background:var(--primary-soft);color:var(--accent-ink);font-size:27px}
.appearance-heading h3{margin:0 0 4px!important;font-size:19px!important;line-height:1.25;color:var(--ink)}
.appearance-heading p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.appearance-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.appearance-field{display:grid;align-content:start;gap:4px;min-width:0;margin:0!important;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);color:var(--ink)!important}
.appearance-field-title{font-size:14px;font-weight:700;line-height:1.3}
.appearance-field small{font-size:12px;line-height:1.4;color:var(--muted);font-weight:400;min-height:34px}
.appearance-field select{width:100%;min-width:0;margin-top:5px;background:var(--panel);border-color:var(--line)}
.appearance-colors{border:0;padding:0;margin:24px 0 0;min-width:0}
.appearance-colors legend{padding:0 0 12px;font-size:14px;font-weight:700;color:var(--ink)}
.appearance-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.appearance-swatches label{margin:0;min-width:0;cursor:pointer}
.appearance-swatches input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.appearance-swatch{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;min-height:52px;color:var(--ink);background:var(--panel2);font-size:13px}
.appearance-swatch i{display:block;width:23px;height:23px;flex:0 0 auto;border-radius:8px;box-shadow:0 0 0 3px var(--panel)}
.swatch-forest{background:#08796a}.swatch-ocean{background:#1765c1}.swatch-plum{background:#8051a2}
.appearance-swatches input:checked+.appearance-swatch{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:var(--primary-soft)}
.appearance-swatches input:focus-visible+.appearance-swatch{outline:3px solid var(--primary);outline-offset:3px}
.appearance-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.appearance-footer [role="status"]{color:var(--muted);font-size:12px;line-height:1.5}
.appearance-footer .btn{white-space:nowrap}
.mobile-quick-nav{display:none}
.topbar-left,.topbar-left>div{min-width:0}.topbar h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.resident-nav{justify-content:flex-start;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.resident-nav button{flex:0 0 auto;scroll-snap-align:start}
@media(max-width:900px){
  html[data-ui-density="compact"] .content,html[data-ui-density="relaxed"] .content{padding:20px 18px 96px}
  html[data-ui-mobile-nav="shown"] #admin .mobile-quick-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:45;padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -8px 26px #142f2a15}
  .mobile-quick-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:54px;padding:4px 2px;border:0;border-radius:11px;background:transparent;color:var(--muted);font-size:11px;font-weight:650;cursor:pointer}
  .mobile-quick-nav button .app-icon{width:21px;height:21px}
  .mobile-quick-nav button span{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}
  .mobile-quick-nav button.active{background:var(--primary-soft);color:var(--accent-ink)}
  html[data-ui-mobile-nav="shown"] #admin .content{padding-bottom:calc(115px + env(safe-area-inset-bottom))}
  html[data-ui-mobile-nav="shown"] #admin:not(.hidden)~.toast{bottom:calc(90px + env(safe-area-inset-bottom))}
  .sidebar{height:100dvh;padding-top:calc(28px + env(safe-area-inset-top))}
  .resident-nav{height:calc(72px + env(safe-area-inset-bottom))}
  .resident-content{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .appearance-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .topbar,.resident-head{height:calc(70px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .appearance-panel{padding:18px 14px}.appearance-heading{gap:11px;margin-bottom:16px}.appearance-symbol{width:42px;height:42px;font-size:22px}
  .appearance-options{grid-template-columns:1fr;gap:9px}.appearance-field{padding:12px 13px;gap:3px}.appearance-field small{min-height:0}.appearance-swatches{gap:7px}.appearance-swatch{flex-direction:column;gap:5px;text-align:center;min-height:74px;font-size:12px;padding:8px 4px}
  .appearance-footer{align-items:flex-start;flex-direction:column}.appearance-footer .btn{align-self:flex-end}
  html[data-ui-text="large"] .page-head h1{font-size:27px}
  html[data-ui-text="large"] .house-hero p{font-size:14px}
  html[data-ui-text="large"] .mobile-quick-nav button{font-size:12px}
}
@media(max-width:360px){.mobile-quick-nav button{font-size:10px}.appearance-swatch{font-size:11px}}