:root{
  --bg:#E9E1CE; --panel:#F8F3E6; --panel-2:#FDFAF1; --sunk:#F1EADA;
  --text:#2C2F28; --dim:#6F715F; --dimmer:#96927F;
  --line:#CFC0A2; --line-soft:#E2D8C2;
  --accent:#4C6B39; --accent-dark:#3A5329; --accent-ink:#FDFAF1;
  --accent-soft:#DBE4C7; --brass:#9A6A22; --brass-soft:#F0E2C4;
  --bad:#A34332; --bad-soft:#F0CDC4; --warn:#B88722; --warn-soft:#F4E3B7;
  --fresh:#9ABB76; --fresh-soft:#DBE9C8; --due:#D7B353; --due-soft:#F5E9BE;
  --stale:#D17F45; --stale-soft:#F2D4BE; --overdue:#B75545; --overdue-soft:#EFC9C1;
  --never:#8B8376; --never-soft:#E1DBD0;
  --shadow-xs:0 1px 2px rgba(46,42,28,.07);
  --shadow-sm:0 1px 2px rgba(46,42,28,.08),0 1px 3px rgba(46,42,28,.06);
  --shadow:0 1px 3px rgba(46,42,28,.07),0 8px 20px -6px rgba(46,42,28,.14);
  --font-head:"Sitka Banner",Georgia,serif;
  --font-body:Candara,"Segoe UI Variable Text","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --font-num:"Segoe UI Variable Text","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --r-xs:7px; --r-sm:10px; --r:12px; --r-md:15px; --r-lg:20px; --bw:1px;
}
:root[data-theme="shire-dark"]{
  --bg:#14110A; --panel:#1C1810; --panel-2:#241F15; --sunk:#191509;
  --text:#EEE6D5; --dim:#B9AC8D; --dimmer:#82765F;
  --line:#342C1C; --line-soft:#272115;
  --accent:#9DBC77; --accent-dark:#B4D08F; --accent-ink:#161E0C;
  --accent-soft:#262E18; --brass:#D9AE5A; --brass-soft:#322713;
  --bad:#E28B79; --bad-soft:#3A1E18; --warn:#E3BB63; --warn-soft:#342712;
  --fresh:#A8C983; --fresh-soft:#263219; --due:#E0C268; --due-soft:#362A12;
  --stale:#DB914F; --stale-soft:#3B2415; --overdue:#D16A59; --overdue-soft:#3B1B17;
  --never:#A49A88; --never-soft:#2D271E;
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow:0 2px 6px rgba(0,0,0,.5),0 12px 28px -10px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:14px/1.5 var(--font-body);display:grid;grid-template-columns:230px minmax(0,1fr);
}
h1,h2,h3{font-family:var(--font-head);margin:0}
h1{font-size:28px;line-height:1.1}
h2{font-size:22px;line-height:1.1}
button,input,select,textarea{font:inherit;color:inherit}
.side{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:8px;
  padding:20px 14px 14px;background:var(--panel);border-right:1px solid var(--line)
}
.brand{display:flex;gap:11px;align-items:center;margin-bottom:10px}
.mark{
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-family:var(--font-head);font-size:24px;box-shadow:var(--shadow-xs)
}
.brand .name{font-family:var(--font-head);font-size:21px;line-height:1.05}
.brand .sub{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.side nav{display:grid;gap:3px}
.side nav button,.iconbtn{
  border:0;background:transparent;text-align:left;border-radius:var(--r-sm);
  padding:9px 10px;color:var(--dim);cursor:pointer;font-weight:650
}
.side nav button.on{background:var(--accent-soft);color:var(--accent-dark)}
.spacer{flex:1}
.foot{border-top:1px solid var(--line-soft);padding-top:12px;display:grid;gap:8px}
.iconbtn{background:var(--panel-2);border:1px solid var(--line);text-align:center}
.sync-status{font-size:12px;color:var(--dim);background:var(--sunk);border:1px solid var(--line-soft);border-radius:99px;padding:5px 9px;text-align:center}
.sync-status.ok{color:var(--accent-dark)}.sync-status.offline{color:var(--warn)}
main{min-width:0;padding:24px}
.view{display:none}.view.on{display:block}
.topline{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.muted{color:var(--dim);font-size:13px}
.summary-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{
  border:1px solid var(--line);background:var(--panel-2);border-radius:99px;
  padding:6px 10px;font-size:12px;color:var(--dim);box-shadow:var(--shadow-xs)
}
.pill strong{font-family:var(--font-num);color:var(--text);margin-right:4px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.map-panel,.panel{
  background:var(--panel);border:var(--bw) solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden
}
.map-panel{padding:16px;min-height:calc(100vh - 108px)}
#floorMap{width:100%;height:min(78vh,820px);display:block}
.room{
  fill:var(--panel-2);stroke:none;cursor:pointer;transition:fill .15s,filter .15s,opacity .15s
}
.room:focus,.room:focus-visible{outline:none}
.room:hover{opacity:.92}
.room.is-selected{filter:none;opacity:1}
.room[data-age="fresh"]{fill:var(--fresh-soft)}
.room[data-age="due"]{fill:var(--due-soft)}
.room[data-age="stale"]{fill:var(--stale-soft)}
.room[data-age="overdue"]{fill:var(--overdue-soft)}
.room[data-age="never"]{fill:var(--never-soft)}
.room[data-age="fresh"].is-selected{fill:color-mix(in srgb,var(--fresh-soft) 82%,#000)}
.room[data-age="due"].is-selected{fill:color-mix(in srgb,var(--due-soft) 82%,#000)}
.room[data-age="stale"].is-selected{fill:color-mix(in srgb,var(--stale-soft) 82%,#000)}
.room[data-age="overdue"].is-selected{fill:color-mix(in srgb,var(--overdue-soft) 82%,#000)}
.room[data-age="never"].is-selected{fill:color-mix(in srgb,var(--never-soft) 82%,#000)}
.wall-layer rect{
  fill:#20262B;stroke:none;pointer-events:none
}
:root[data-theme="shire-dark"] .wall-layer rect{fill:#DCD4C5}
.opening-layer{display:none}
.zone-divider-layer line{
  fill:none;stroke:color-mix(in srgb,var(--dim) 72%,transparent);
  stroke-width:.08px;stroke-dasharray:.42 .32;stroke-linecap:butt;pointer-events:none
}
.opening-layer .opening-cut{
  stroke:var(--panel);stroke-width:.62px;stroke-linecap:butt;pointer-events:none
}
.door-line-layer line{
  fill:none;stroke:var(--dim);stroke-width:.07px;stroke-linecap:butt;pointer-events:none
}
.patio-outline path{
  fill:none;stroke:var(--dim);stroke-width:.12px;stroke-dasharray:.45 .28;pointer-events:none
}
.label-layer text{
  font-family:var(--font-body);font-weight:800;font-size:1.02px;fill:var(--text);
  text-anchor:middle;pointer-events:none;text-transform:uppercase
}
.label-layer .score{font-size:.62px;font-weight:550;fill:var(--dim);font-family:var(--font-num)}
.label-layer .tiny{font-size:.68px}
.label-layer .tiny.score{font-size:.48px}
.label-layer .closet-label{font-size:.58px;font-weight:850;fill:var(--dim);letter-spacing:.03em}
.panel{padding:16px}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.panel-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.label{
  font-family:var(--font-head);font-size:11px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--brass);margin-bottom:3px
}
.room-meta{color:var(--dim);font-size:13px;margin-bottom:14px}
.chore-list{display:grid;gap:8px}
.chore-card{
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:10px;display:grid;gap:7px
}
.chore-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.chore-name{font-weight:750}.chore-detail{font-size:12px;color:var(--dim)}
.age-chip{
  flex:none;border-radius:99px;padding:2px 8px;font-size:11px;font-family:var(--font-num);
  background:var(--sunk);color:var(--dim);border:1px solid var(--line-soft)
}
.age-chip.fresh{background:var(--fresh-soft);color:var(--accent-dark)}
.age-chip.due{background:var(--due-soft);color:var(--warn)}
.age-chip.stale{background:var(--stale-soft);color:var(--stale)}
.age-chip.overdue{background:var(--overdue-soft);color:var(--bad)}
.age-chip.never{background:var(--never-soft);color:var(--dim)}
.chore-actions{display:flex;gap:7px;flex-wrap:wrap}
.btn{
  border:var(--bw) solid var(--line);background:var(--panel-2);color:var(--text);
  border-radius:var(--r-sm);padding:8px 12px;font-size:13px;font-weight:650;
  cursor:pointer;box-shadow:var(--shadow-xs)
}
.btn:hover{border-color:color-mix(in srgb,var(--dim) 45%,var(--line))}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:5px 9px;font-size:12px}
.btn.danger{color:var(--bad)}
.search,input,select,textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 10px;outline:none
}
textarea{resize:vertical}
label{display:grid;gap:5px;font-size:12px;color:var(--dim);font-weight:650}
label input,label select,label textarea{font-size:14px;color:var(--text);font-weight:400}
.log-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.log-list li{
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:9px 10px
}
.log-title{font-weight:750}.log-meta{color:var(--dim);font-size:12px}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.settings-room{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-sm)}
.settings-room h2{font-size:19px;margin-bottom:8px}
.settings-room ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.settings-room li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-bottom:1px solid var(--line-soft);padding:8px 0;align-items:center}
.settings-room li:last-child{border-bottom:0}
.settings-room span:last-child{color:var(--dim);font-family:var(--font-num);font-size:12px}
.settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.settings-head h2{margin:0}
.settings-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
dialog{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  color:var(--text);box-shadow:var(--shadow);padding:0;width:min(460px,calc(100vw - 28px))
}
dialog.room-dialog{width:min(720px,calc(100vw - 28px))}
dialog::backdrop{background:rgba(30,28,22,.38)}
dialog form{display:grid;gap:12px;padding:16px}
.room-dialog-shell{display:grid;gap:12px;padding:16px}
.modal-head,.modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-head button{border:0;background:transparent;color:var(--dim);cursor:pointer;font-weight:750}
.modal-foot{justify-content:flex-end;border-top:1px solid var(--line-soft);padding-top:12px}
.room-dialog-actions{display:flex;gap:8px;flex-wrap:wrap}
.form-error{min-height:18px;color:var(--bad);font-size:12px}
.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(14px);
  opacity:0;pointer-events:none;background:var(--text);color:var(--panel-2);
  padding:9px 14px;border-radius:99px;box-shadow:var(--shadow);transition:.16s
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:980px){
  body{grid-template-columns:1fr}
  .side{position:static;height:auto;display:grid;grid-template-columns:1fr;gap:10px}
  .side nav{grid-template-columns:repeat(3,minmax(0,1fr))}
  .side nav button{text-align:center}
  .foot{grid-template-columns:1fr 1fr;border-top:0;padding-top:0}
  main{padding:16px}
  .workspace{grid-template-columns:1fr}
  .map-panel{min-height:auto}
  #floorMap{height:auto}
}
@media (max-width:620px){
  .topline{display:grid}
  .summary-pills{justify-content:flex-start}
  .side nav{grid-template-columns:1fr}
}