:root{
  --navy:#1D3D4F; --navy-dk:#0F1F28; --navy-mid:#2C566E;
  --lime:#D9E021; --lime-dk:#A9AF19;
  --ink:#0F1F28; --ink2:#3A4A50; --ink3:#5B6B70;
  --page:#FFFFFF; --panel:#F3F5F4; --panel2:#E8EBEA;
  --line:#B1B4B6; --line-soft:#D6DAD9;
  --ok:#1F6B45; --ok-bg:#D6E8DE;
  --no:#8C231A; --no-bg:#F6DCD8;
  --focus:#D9E021;
  --logo-ink:#1D3D4F; --bezel:#D9E1E4; --app-bg:#FBFCFC; --card:#FFFFFF; --soft:#F0F4F5; --hover:#F7FAFA; --hairline:#E6ECEE;
  --bezel2:#0F1F28; --head-a:#FFFFFF; --head-b:#EEF3F4; --strip:#0F1F28; --strip-ink:#FFFFFF; --strip-sub:#9FB3BC;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#5E93AC; --navy-dk:#0A161C; --navy-mid:#8FB6C9;
    --ink:#EDF1F0; --ink2:#B8C2C4; --ink3:#8E9B9E;
    --page:#0C1519; --panel:#152229; --panel2:#1D2E36;
    --line:#3D5058; --line-soft:#2A3B43;
    --ok:#69C295; --ok-bg:#14301F;
    --no:#EE8C80; --no-bg:#331815;
    --logo-ink:#EDF1F0; --bezel:#24343C; --app-bg:#0F1A20; --card:#17262E; --soft:#1F323B; --hover:#1C2E36; --hairline:#263B45;
    --bezel2:#0A161C; --head-a:#1B2C34; --head-b:#12212A; --strip:#23343C; --strip-ink:#EDF1F0; --strip-sub:#9FB3BC;
  }
}
:root[data-theme="dark"]{
  --navy:#5E93AC; --navy-dk:#0A161C; --navy-mid:#8FB6C9;
  --ink:#EDF1F0; --ink2:#B8C2C4; --ink3:#8E9B9E;
  --page:#0C1519; --panel:#152229; --panel2:#1D2E36;
  --line:#3D5058; --line-soft:#2A3B43;
  --ok:#69C295; --ok-bg:#14301F;
  --no:#EE8C80; --no-bg:#331815;
  --logo-ink:#EDF1F0; --bezel:#24343C; --app-bg:#0F1A20; --card:#17262E; --soft:#1F323B; --hover:#1C2E36; --hairline:#263B45;
  --bezel2:#0A161C; --head-a:#1B2C34; --head-b:#12212A; --strip:#23343C; --strip-ink:#EDF1F0; --strip-sub:#9FB3BC;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:"Archivo", Arial, Helvetica, sans-serif; font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.15; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; cursor:pointer; border-radius:0}
input,textarea,select{font:inherit; color:inherit; border-radius:0}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--focus); outline-offset:0; box-shadow:0 3px 0 var(--ink)}
.logo{width:170px; height:auto; aspect-ratio:950/310; color:var(--logo-ink); display:block}
.logo--sm{width:118px}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* ---------- masthead ---------- */
.topbar{background:var(--navy-dk); padding:14px 0}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.topbar .logo{color:#fff; width:150px}
.topbar .tagline{color:#9FB3BC; font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.masthead{padding:40px 0 8px; border-bottom:none}
.kicker{
  display:inline-block; background:var(--lime); color:var(--navy-dk); font-weight:700;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; margin-bottom:16px;
}
.masthead h1{font-family:"Syne", Archivo, sans-serif; font-size:clamp(30px,4.6vw,44px); font-weight:800; letter-spacing:-.01em}
.masthead .lede{margin-top:14px; max-width:60ch; color:var(--ink2); font-size:19px}

/* ---------- tabs ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--line); margin:28px 0 30px}
.tab{
  border:0; background:transparent; padding:12px 18px; font-weight:600; font-size:16px; color:var(--ink2);
  border-bottom:4px solid transparent; margin-bottom:-1px;
}
.tab:hover{color:var(--ink); background:var(--panel)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--navy); background:var(--panel)}
.panel[hidden]{display:none}

/* ---------- generic ---------- */
.stack{display:flex; flex-direction:column; gap:22px}
.muted{color:var(--ink2)}
.small{font-size:15px}
.tiny{font-size:13.5px}
.label{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3)}
.box{border:1px solid var(--line); padding:22px}
.box--grey{background:var(--panel); border:0; padding:22px}
.inset{border-left:6px solid var(--line); padding:2px 0 2px 18px}
.inset--lime{border-left-color:var(--lime)}
.inset--no{border-left-color:var(--no)}
.rule{border:0; border-top:2px solid var(--navy); margin:0}
h2.sec-h{font-size:22px; margin-bottom:6px}
h3.sub-h{font-size:18px; margin-bottom:8px}

/* ---------- tags ---------- */
.tag{
  display:inline-block; padding:2px 8px; font-size:12px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; white-space:nowrap; vertical-align:2px;
}
.tag--due{background:var(--lime); color:var(--navy-dk)}
.tag--ok{background:var(--ok-bg); color:var(--ok)}
.tag--no{background:var(--no-bg); color:var(--no)}
.tag--grey{background:var(--panel2); color:var(--ink2)}
.tag--navy{background:var(--navy); color:var(--page)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--navy); color:#fff; border:2px solid transparent;
  box-shadow:0 3px 0 var(--navy-dk); padding:11px 18px; font-weight:700; font-size:16px; text-align:center;
}
:root[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn{color:var(--navy-dk)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn{color:#fff}}
.btn:hover{filter:brightness(1.08)}
.btn:active{box-shadow:none; transform:translateY(3px)}
.btn--block{display:block; width:100%}
.btn--sec{background:var(--panel2); color:var(--ink); border-color:var(--ink); box-shadow:0 3px 0 var(--line)}
.btn--sec:hover{background:var(--lime); color:var(--navy-dk); border-color:var(--navy-dk)}
.btn--sm{padding:7px 12px; font-size:14px; box-shadow:0 2px 0 var(--navy-dk)}
.btn--sec.btn--sm{box-shadow:0 2px 0 var(--line)}
.btn[disabled]{opacity:.4; cursor:not-allowed; filter:none}
.linkbtn{background:none; border:0; padding:0; color:var(--navy); text-decoration:underline; font-weight:600; font-size:15px}
.linkbtn:hover{background:var(--lime); color:var(--navy-dk); text-decoration:none}

/* ---------- phone ---------- */
.two-col{display:grid; grid-template-columns:minmax(320px,400px) 1fr; gap:40px; align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.phone{background:var(--bezel); padding:12px; position:sticky; top:16px; border-radius:34px}
.screen{background:var(--page); height:730px; display:flex; flex-direction:column; overflow:hidden; border-radius:24px}
.statusbar{display:flex; justify-content:space-between; padding:9px 18px 4px; font-size:12px; font-weight:600; color:var(--ink3)}
.appbar{padding:4px 16px 12px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:12px}
.appbar .who{margin-left:auto; font-size:12px; font-weight:700; color:var(--ink3); text-transform:uppercase; letter-spacing:.06em}
.scroll{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:16px 16px 24px}
.foot-bar{padding:12px 16px 16px; border-top:1px solid var(--line-soft); background:var(--panel)}
.backlink{background:none; border:0; padding:0 0 12px; color:var(--navy); font-size:15px; text-decoration:underline; font-weight:600}
.q-title{font-size:24px; font-weight:700; margin-bottom:14px; line-height:1.2}

/* big pickable rows, gov style */
.pick{
  display:block; width:100%; text-align:left; background:var(--page); border:2px solid var(--ink);
  padding:14px 16px; margin-bottom:10px; font-size:17px;
}
.pick:hover{background:var(--panel)}
.pick b{display:block; font-size:18px}
.pick span{display:block; color:var(--ink2); font-size:14.5px; margin-top:2px}

/* progress */
.prog{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.prog .bar{flex:1; height:10px; background:var(--panel2); overflow:hidden}
.prog .bar>i{display:block; height:100%; background:var(--navy); transition:width .25s}
.prog .num{font-variant-numeric:tabular-nums; font-weight:700; font-size:15px}

/* week strip */
.weekstrip{display:flex; align-items:center; justify-content:space-between; background:var(--strip); color:var(--strip-ink); padding:8px 6px; margin-bottom:16px}
.weekstrip b{display:block; font-size:15px; font-weight:700}
.weekstrip span{font-size:12.5px; color:var(--strip-sub)}
.weekstrip button{background:none; border:0; color:var(--lime); padding:6px 12px; font-size:16px}
.weekstrip button:hover{background:rgba(217,224,33,.16)}

/* rooms */
.room{border:1px solid var(--line); margin-bottom:10px}
.room-head{width:100%; display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--panel); border:0; text-align:left}
.room-head:hover{background:var(--panel2)}
.room-head .nm{flex:1; font-weight:700; font-size:17px}
.room-head .chev{color:var(--ink2); font-size:12px}
.room[data-open="1"] .chev{transform:rotate(90deg)}
.room[data-open="0"] .room-body{display:none}
.room-body{padding:4px 14px 14px}

/* task */
.task{display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.task:last-child{border-bottom:0}
.tickbox{
  flex:none; width:42px; height:42px; border:2px solid var(--ink); background:var(--page);
  display:grid; place-items:center; font-size:22px; color:transparent; line-height:1;
}
.tickbox:hover{background:var(--panel)}
.task[data-done="1"] .tickbox{background:var(--navy); border-color:var(--navy); color:#fff}
:root[data-theme="dark"] .task[data-done="1"] .tickbox,
:root:not([data-theme="light"]) .task[data-done="1"] .tickbox{color:var(--navy-dk)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .task[data-done="1"] .tickbox{color:#fff}}
.t-main{flex:1; min-width:0}
.t-name{font-size:17px; line-height:1.3}
.task[data-done="1"] .t-name{color:var(--ink3)}
.t-meta{display:flex; gap:14px; margin-top:8px; flex-wrap:wrap}
.saved{margin-top:10px; background:var(--panel); border-left:5px solid var(--navy); padding:8px 12px; font-size:15px}
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.thumb{width:58px; height:58px; object-fit:cover; border:1px solid var(--line)}
.thumb-fake{width:58px; height:58px; border:1px solid var(--line); background:var(--panel2); display:grid; place-items:center; color:var(--ink3)}

/* forms */
.field{display:block; margin-bottom:18px}
.field>.lab{display:block; font-weight:700; font-size:16px; margin-bottom:4px}
.field>.hint{display:block; color:var(--ink3); font-size:14.5px; margin-bottom:6px}
.field input, .field textarea, .field select{
  width:100%; border:2px solid var(--ink); padding:9px 11px; background:var(--page); font-size:16px;
}
.field textarea{min-height:88px; resize:vertical}
.checkline{display:flex; align-items:center; gap:12px; padding:9px 0}
.checkline .tickbox{width:34px; height:34px; font-size:18px}
.checkline span{font-size:16px}

/* summary list, gov style */
.sum{border-top:1px solid var(--line-soft)}
.sum-row{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:15.5px}
.sum-row .k{flex:0 0 42%; font-weight:700}
.sum-row .v{flex:1}

/* confirmation panel */
.confirm{background:var(--navy); color:#fff; padding:30px 20px; text-align:center; margin-bottom:20px}
:root[data-theme="dark"] .confirm, :root:not([data-theme="light"]) .confirm{color:var(--navy-dk)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .confirm{color:#fff}}
.confirm h3{font-family:"Syne",sans-serif; font-size:26px; font-weight:800}
.confirm .ref{margin-top:10px; font-size:15px; opacity:.9}
.confirm .ref b{display:block; font-size:22px; letter-spacing:.08em; font-variant-numeric:tabular-nums}

/* admin */
.admin-grid{display:grid; grid-template-columns:250px 1fr; gap:26px; align-items:start}
@media (max-width:880px){.admin-grid{grid-template-columns:1fr}}
.side{background:var(--panel); padding:16px}
.prop{width:100%; text-align:left; background:transparent; border:0; border-left:5px solid transparent; padding:10px 12px; margin-bottom:4px}
.prop:hover{background:var(--panel2)}
.prop[aria-current="true"]{background:var(--page); border-left-color:var(--lime)}
.prop b{display:block; font-size:16px}
.prop span{font-size:13.5px; color:var(--ink2)}
.row{display:flex; gap:16px; flex-wrap:wrap}
.row>*{flex:1; min-width:180px}
.tbl{width:100%; border-collapse:collapse; font-size:15px}
.tbl th{text-align:left; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); padding:0 12px 8px 0; border-bottom:2px solid var(--navy)}
.tbl td{padding:11px 12px 11px 0; border-bottom:1px solid var(--line-soft); vertical-align:top}
.tbl td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
.scroll-x{overflow-x:auto}
.adm-room{border:1px solid var(--line-soft); padding:14px; margin-bottom:10px}
.adm-room h4{font-size:16px; margin-bottom:8px}
.chiplist{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--panel); border:1px solid var(--line-soft); padding:5px 6px 5px 12px; font-size:14.5px; display:inline-flex; align-items:center; gap:6px}
.chip button{border:0; background:transparent; color:var(--ink3); font-size:17px; line-height:1; padding:0 4px}
.chip button:hover{color:var(--no)}
.chip input{border:0; background:transparent; width:120px; font-size:14.5px; padding:0}

/* email */
.mail{max-width:660px; margin:0 auto; border:1px solid var(--line)}
.mail-head{padding:16px 20px; background:var(--panel); border-bottom:1px solid var(--line)}
.mail-head .subj{font-weight:700; font-size:18px}
.mail-brand{background:var(--navy-dk); padding:16px 20px}
.mail-brand .logo{color:#fff; width:130px}
.mail-body{padding:22px 20px}
.stat-row{display:flex; gap:0; margin:16px 0 20px; border:1px solid var(--line-soft)}
.stat{flex:1; padding:12px 14px; border-right:1px solid var(--line-soft)}
.stat:last-child{border-right:0}
.stat b{display:block; font-size:26px; font-variant-numeric:tabular-nums; line-height:1.1}
.stat span{font-size:13px; color:var(--ink2)}
.mail-room{border-top:1px solid var(--line-soft); padding:12px 0}
.mail-room h4{font-size:16px; margin-bottom:6px}
.mail-line{display:flex; gap:10px; font-size:15px; padding:3px 0}
.mail-line .mk{font-weight:700; flex:none; width:16px}

/* access + extras */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
.card{border-top:5px solid var(--navy); background:var(--panel); padding:18px}
.card h4{font-size:17px; margin-bottom:6px}
.card p{font-size:15px; color:var(--ink2)}
.card .n{display:inline-block; background:var(--lime); color:var(--navy-dk); font-weight:700; font-size:13px; padding:2px 9px; margin-bottom:10px}
.linkbox{display:flex; align-items:center; gap:14px; background:var(--panel); border:2px dashed var(--line); padding:14px 16px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; flex-wrap:wrap}
.pin{font-family:"Syne",sans-serif; font-weight:800; font-size:30px; letter-spacing:.2em; background:var(--lime); color:var(--navy-dk); padding:8px 18px; display:inline-block}
.extra{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-soft)}
.extra .num{flex:none; width:42px; height:42px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:700}
:root[data-theme="dark"] .extra .num, :root:not([data-theme="light"]) .extra .num{color:var(--navy-dk)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .extra .num{color:#fff}}
.extra h4{font-size:17px; margin-bottom:4px}
.extra p{font-size:15px; color:var(--ink2)}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(150%); background:var(--navy-dk); color:#fff; border-bottom:4px solid var(--lime); padding:12px 22px; font-weight:600; font-size:15px; z-index:60; transition:transform .3s}
.toast.show{transform:translateX(-50%) translateY(0)}
.foot{padding:36px 0 60px; color:var(--ink3); font-size:14px; border-top:1px solid var(--line-soft); margin-top:44px}


/* ================= page shell ================= */
.hero-band{position:relative; overflow:hidden; background:var(--navy-dk); margin-bottom:34px}
.hero-photo{
  position:absolute; inset:0;
  background-image:linear-gradient(102deg, rgba(11,24,31,.96) 0%, rgba(15,31,40,.86) 44%, rgba(15,31,40,.42) 78%, rgba(15,31,40,.30) 100%), none;
  background-size:cover; background-position:center 62%;
}
.hero-inner{position:relative; z-index:2; padding-top:26px; padding-bottom:60px}
.hero-brand{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:56px}
.hero-brand .logo{width:150px; color:#fff}
.hero-tag{color:rgba(255,255,255,.62); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.hero-body{max-width:640px}
.hero-band .kicker{background:var(--lime); color:var(--navy-dk); border-radius:4px}
.hero-band h1{
  font-family:"Syne",sans-serif; font-weight:800; color:#fff; margin-top:16px;
  font-size:clamp(40px,6.4vw,68px); line-height:.98; letter-spacing:-.03em;
}
.hero-band .lede{color:rgba(255,255,255,.80); font-size:18px; margin-top:18px; max-width:54ch}
.hero-facts{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap}
.fact b{
  display:block; font-family:"Syne",sans-serif; font-weight:800; font-size:32px; color:var(--lime);
  line-height:1; font-variant-numeric:tabular-nums;
}
.fact span{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.58); font-weight:600}

/* segmented tabs */
.tabs{
  display:flex; flex-wrap:wrap; gap:4px; border:0; padding:5px; margin:0 0 36px;
  background:var(--panel); border-radius:14px; width:fit-content; max-width:100%;
}
.tab{
  border:0; background:transparent; padding:10px 17px; border-radius:10px; font-weight:600; font-size:15px;
  color:var(--ink2); margin:0; transition:background .15s, color .15s, box-shadow .15s;
}
.tab:hover{color:var(--ink); background:var(--page)}
.tab[aria-selected="true"]{
  background:var(--page); color:var(--ink); box-shadow:0 1px 3px rgba(15,31,40,.12), 0 0 0 1px var(--line-soft);
}

/* section typography */
h2.sec-h{font-family:"Syne",sans-serif; font-weight:800; font-size:25px; letter-spacing:-.02em; margin-bottom:8px}
h3.sub-h{font-family:"Syne",sans-serif; font-weight:700; font-size:17px; letter-spacing:-.01em}
.box{border:1px solid var(--line-soft); padding:26px; box-shadow:0 1px 3px rgba(15,31,40,.05)}
.box--grey{background:var(--panel); padding:24px}
.inset{border-left:4px solid var(--lime); padding-left:20px}
.inset--lime{border-left-color:var(--lime)}
.card{border-top:4px solid var(--navy); background:var(--panel); padding:22px; border-radius:0 0 14px 14px}
.card h4, .step h4, .extra h4{font-family:"Syne",sans-serif; font-weight:700; letter-spacing:-.01em}
.extra .num{border-radius:12px; font-family:"Syne",sans-serif}
.side{background:var(--panel); padding:18px}
.foot{margin-top:56px; padding-top:26px}
.mail{box-shadow:0 20px 50px -30px rgba(15,31,40,.4)}
.mail-brand{background:var(--navy-dk)}

/* ================= premium app surface ================= */
.phone{background:var(--bezel); padding:10px; border-radius:44px; box-shadow:0 30px 60px -24px rgba(15,31,40,.28), 0 0 0 1px rgba(15,31,40,.05) inset}
.screen{background:var(--app-bg); border-radius:36px; height:748px}

.statusbar{background:transparent; color:var(--ink3); padding:12px 22px 2px; font-variant-numeric:tabular-nums}
.appbar{background:transparent; border-bottom:0; padding:2px 20px 0}
.appbar .logo{color:var(--navy); width:112px}
.appbar .who{color:var(--ink3); font-size:11px; letter-spacing:.14em}
.appbar-rule{display:none}
.app-head{
  position:relative; background:linear-gradient(172deg, var(--head-a) 0%, var(--head-b) 100%);
  padding-bottom:64px; overflow:hidden; flex:none;
}
.app-head{border-bottom:2px solid var(--hairline)}
.app-head .peaks{position:absolute; left:-16px; bottom:30px; width:250px; opacity:.07; color:var(--navy); pointer-events:none}
.scroll{padding:0 16px 30px; margin-top:-52px; position:relative; z-index:2}

/* hero card */
.hero{
  background:var(--card); border-radius:20px; padding:18px 18px 16px; margin-bottom:18px;
  box-shadow:0 14px 32px -20px rgba(15,31,40,.22), 0 1px 0 rgba(15,31,40,.03);
  border:1px solid var(--hairline);
}
.hero-top{display:flex; gap:14px; align-items:flex-start}
.hero h3{font-family:"Syne",sans-serif; font-weight:800; font-size:21px; line-height:1.15; flex:1; min-width:0}
.hero .when{font-size:13.5px; color:var(--ink2); margin-top:5px}
.hero .when button{background:none; border:0; padding:0 0 0 6px; color:var(--navy); font-weight:700; font-size:13.5px; text-decoration:underline}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.mini-chip{
  background:var(--soft); color:var(--ink2); border-radius:999px; padding:4px 11px;
  font-size:12px; font-weight:600; letter-spacing:.01em;
}
.mini-chip.lime{background:var(--lime); color:var(--navy-dk)}

/* progress ring */
.ring{flex:none; width:58px; height:58px; position:relative}
.ring svg{transform:rotate(-90deg); width:58px; height:58px}
.ring circle{fill:none; stroke-width:6; stroke-linecap:round}
.ring .track{stroke:var(--soft)}
.ring .fill{stroke:var(--navy); transition:stroke-dasharray .4s ease}
.ring.full .fill{stroke:var(--lime)}
.ring b{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}

/* section label */
.rooms-label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); margin:0 4px 10px;
}

/* room card */
.room{
  border:1px solid var(--hairline); border-radius:18px; background:var(--card); margin-bottom:12px;
  box-shadow:0 2px 8px -4px rgba(15,31,40,.10); overflow:hidden; transition:box-shadow .2s, border-color .2s;
}
.room[data-open="1"]{box-shadow:0 12px 28px -18px rgba(15,31,40,.24)}
.room[data-full="1"]{border-color:color-mix(in srgb, var(--lime) 60%, var(--hairline))}
.room-head{display:flex; gap:14px; align-items:center; padding:15px 16px; background:transparent; border:0; text-align:left; width:100%}
.room-head:hover{background:var(--hover)}
.room-ico{
  flex:none; width:44px; height:44px; border-radius:14px; background:var(--soft); color:var(--navy);
  display:grid; place-items:center; transition:background .2s, color .2s;
}
.room-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.room[data-full="1"] .room-ico{background:var(--lime); color:var(--navy-dk)}
.room-head .nm{flex:1; min-width:0; font-family:"Syne",sans-serif; font-weight:700; font-size:16.5px; letter-spacing:-.01em}
.room-meter{display:block; max-width:190px; height:4px; border-radius:99px; background:var(--soft); overflow:hidden; margin-top:8px}
.room-meter>i{display:block; height:100%; background:var(--navy); border-radius:99px; transition:width .3s cubic-bezier(.2,.8,.3,1)}
.room[data-full="1"] .room-meter>i{background:var(--lime)}
.room-count{font-variant-numeric:tabular-nums; font-size:13px; font-weight:700; color:var(--ink3); white-space:nowrap}
.room[data-full="1"] .room-count{color:var(--ok)}
.room-head .chev{color:var(--ink3); font-size:10px; transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.room-body{padding:0 16px 8px; border-top:1px solid var(--hairline)}

/* task row */
.task{display:flex; align-items:center; gap:12px; padding:0; border-bottom:1px solid var(--hairline)}
.task:last-child{border-bottom:0}
.t-hit{
  flex:1; min-width:0; display:flex; align-items:center; gap:13px; background:none; border:0;
  padding:14px 0; text-align:left;
}
.tickbox{
  flex:none; width:28px; height:28px; border-radius:50%; border:2px solid var(--line);
  background:transparent; display:grid; place-items:center; color:transparent; font-size:14px; line-height:1;
  transition:background .18s, border-color .18s, transform .12s cubic-bezier(.2,1.6,.4,1);
}
.t-hit:hover .tickbox{border-color:var(--navy)}
.task[data-done="1"] .tickbox{background:var(--lime); border-color:var(--lime); color:var(--navy-dk); transform:scale(1.06)}
.t-name{font-size:16px; line-height:1.35; flex:1; min-width:0}
.task[data-done="1"] .t-name{color:var(--ink3)}
.t-tools{display:flex; gap:2px; flex:none; padding-left:4px}
.tool{
  width:38px; height:38px; border-radius:12px; border:0; background:transparent; color:var(--ink3);
  display:grid; place-items:center; position:relative; transition:background .15s, color .15s;
}
.tool:hover{background:var(--soft); color:var(--navy)}
.tool svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.tool[data-on="1"]{color:var(--navy)}
.tool[data-on="1"]::after{
  content:""; position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%;
  background:var(--lime); border:1.5px solid var(--card);
}
.saved{
  margin:0 0 12px 41px; background:var(--soft); border-left:3px solid var(--lime); border-radius:0 10px 10px 0;
  padding:9px 12px; font-size:14px; color:var(--ink2);
}
.thumbs{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 12px 41px}
.thumb, .thumb-fake{width:56px; height:56px; border-radius:12px; border:1px solid var(--hairline)}
.note-edit{
  width:100%; margin:0 0 12px 41px; max-width:calc(100% - 41px); border:2px solid var(--navy); border-radius:12px;
  padding:10px 12px; background:var(--card); font-size:15px; min-height:74px; resize:vertical;
}

/* general note + shortcuts */
.gen-card{
  background:var(--card); border:1px solid var(--hairline); border-radius:18px; padding:16px; margin-top:20px;
  box-shadow:0 2px 8px -4px rgba(15,31,40,.10);
}
.gen-card textarea{width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:var(--app-bg); font-size:15px; min-height:80px; resize:vertical}
.shortcuts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.shortcut{
  display:flex; align-items:center; justify-content:center; gap:8px; background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:13px 10px; font-weight:600; font-size:14.5px;
  transition:border-color .15s, background .15s;
}
.shortcut:hover{border-color:var(--navy); background:var(--hover)}
.shortcut b{background:var(--lime); color:var(--navy-dk); border-radius:99px; padding:1px 8px; font-size:12px}

/* bottom bar */
.foot-bar{
  background:var(--card); border-top:1px solid var(--hairline); padding:12px 16px 18px;
  box-shadow:0 -8px 24px -14px rgba(15,31,40,.18);
}
.prog{display:flex; align-items:center; gap:12px; margin-bottom:11px}
.prog .bar{flex:1; height:6px; border-radius:99px; background:var(--soft)}
.prog .bar>i{border-radius:99px; background:var(--navy); transition:width .3s cubic-bezier(.2,.8,.3,1)}
.prog.full .bar>i{background:var(--lime)}
.prog .num{font-size:13px; color:var(--ink3)}
.btn.primary-app{
  width:100%; display:block; background:var(--navy); color:#fff; border:0; border-radius:14px; padding:16px;
  font-family:"Syne",sans-serif; font-weight:700; font-size:16.5px; letter-spacing:-.01em;
  box-shadow:0 8px 20px -10px rgba(29,61,79,.55);
}
.btn.primary-app:hover{filter:brightness(1.08)}
.btn.primary-app:active{transform:translateY(1px)}
.btn.primary-app[disabled]{opacity:.4; cursor:not-allowed; box-shadow:none}
.btn.ghost-app{
  width:100%; background:transparent; color:var(--navy); border:1.5px solid var(--line); border-radius:14px;
  padding:15px; font-weight:700; font-size:16px;
}
.btn.ghost-app:hover{border-color:var(--navy); background:var(--hover)}

/* other screens inside the app */
.q-title{font-family:"Syne",sans-serif; font-weight:800; font-size:23px; letter-spacing:-.015em; margin:6px 0 14px}
.backlink{color:var(--navy); font-weight:700; padding:14px 0 8px; text-decoration:none}
.backlink:hover{text-decoration:underline}
.pick{
  border:1px solid var(--hairline); border-radius:18px; background:var(--card); padding:18px; margin-bottom:12px;
  box-shadow:0 2px 8px -4px rgba(15,31,40,.10); transition:box-shadow .2s, border-color .2s;
}
.pick:hover{border-color:var(--navy); box-shadow:0 12px 26px -18px rgba(15,31,40,.28)}
.pick b{display:block; font-family:"Syne",sans-serif; font-weight:700; font-size:18px; letter-spacing:-.01em}
.pick .pick-top{display:flex; align-items:center; gap:13px}
.pick .pick-top>span>span{display:block; color:var(--ink2); font-size:13.5px; margin-top:2px}
.pick .pick-go{flex:none; font-size:24px; color:var(--ink3); line-height:1}
.pick:hover .pick-go{color:var(--navy)}
.pick .chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px}
.pick .room-ico{flex:none}
.app-card{background:var(--card); border:1px solid var(--hairline); border-radius:18px; padding:16px; margin-bottom:14px; box-shadow:0 2px 8px -4px rgba(15,31,40,.10)}
.app-card .label{margin-bottom:6px}
.field.app input, .field.app textarea, .field.app select{border:1.5px solid var(--line); border-radius:12px; padding:12px; background:var(--card)}
.sum{border-top:0}
.sum-row{border-bottom:1px solid var(--hairline); padding:13px 0}
.confirm{
  background:linear-gradient(168deg,#26495D,#132B39); color:#fff; border-radius:20px; padding:34px 20px;
  box-shadow:0 20px 46px -20px rgba(15,31,40,.5);
}
.confirm h3{font-size:24px}
.confirm .ref b{color:var(--lime)}

.access-row{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:15.5px}
.access-row:last-of-type{border-bottom:0}
.access-row .k{flex:0 0 40%; color:var(--ink3); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.access-row .v{flex:1; font-weight:600}
.reveal{background:var(--soft); border:1px solid var(--line); border-radius:99px; padding:5px 14px; font-size:13.5px; font-weight:700; color:var(--navy)}
.reveal:hover{background:var(--lime); border-color:var(--lime); color:var(--navy-dk)}
.code{font-family:"Syne",sans-serif; font-weight:800; font-size:20px; letter-spacing:.14em; color:var(--navy)}

/* in-app forms and insets */
.screen .field{margin-bottom:20px}
.screen .field>.lab{font-size:15.5px}
.screen .field input, .screen .field textarea, .screen .field select{
  border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; background:var(--card); font-size:16px;
}
.screen .field input:focus, .screen .field textarea:focus, .screen .field select:focus{border-color:var(--navy)}
.screen .inset{
  border-left:0; background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:15px 16px;
  box-shadow:0 2px 8px -4px rgba(15,31,40,.10);
}
.screen .inset--lime{border-left:4px solid var(--lime)}
.screen .inset--no{border-left:4px solid var(--no)}
.screen .checkline{padding:12px 0}
.screen .checkline .tickbox{width:28px; height:28px; border-radius:50%; border:2px solid var(--line)}
.screen .sum{background:var(--card); border:1px solid var(--hairline); border-radius:16px; padding:2px 16px; box-shadow:0 2px 8px -4px rgba(15,31,40,.10)}
.screen .sum-row:last-child{border-bottom:0}
.screen .reason, .screen [data-urg], .screen [data-why]{border-radius:12px !important; border-width:1.5px !important; padding:12px 14px !important}

/* page level rounding */
.btn{border-radius:10px}
.pin{border-radius:10px}
.linkbox{border-radius:12px}
.card{border-radius:0 0 12px 12px}
.box, .box--grey, .side, .adm-room{border-radius:14px}
.mail{border-radius:16px; overflow:hidden}
.chip{border-radius:99px}
.stat-row{border-radius:12px; overflow:hidden}
.field input, .field textarea, .field select{border-radius:10px}
.tag{border-radius:6px}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}

.due-banner{
  background:var(--no-bg); color:var(--no); border-radius:12px; padding:11px 14px; margin-bottom:14px;
  font-weight:700; font-size:14.5px; text-align:center;
}
.pick[data-urgent="1"]{border-color:color-mix(in srgb, var(--no) 45%, var(--hairline))}
.due-banner.soft{background:var(--lime); color:var(--navy-dk)}