/* Layout: sticky header with a tab strip, one working view at a time; the calendar is the sheet's room-by-date grid. */
:root{
  --bg:#f1f3f4; --surface:#ffffff; --sunk:#e7eaec; --ink:#231a2b; --muted:#615a6a; --line:#d8dbe0;
  --berry:#57265f; --berry-soft:#ecdfee; --deodar:#1f5f4a; --deodar-soft:#d9ebe3; --accent:#b0365f;
  --good:#256b45; --good-soft:#dbefe3; --warn:#8a5a0a; --warn-soft:#f7ebcf; --bad:#ad2f27; --bad-soft:#f8dcd9;
  --cottage:#1f5fa8; --cottage-soft:#e1edf9; --premium:#ad4a08; --premium-soft:#fcebdc;
  --s-direct:#d6ebdd; --s-walkin:#d4e7f5; --s-agent:#f6e4c4; --s-ota:#f4d9e4; --s-bx:#e3d8f2; --s-block:#d9dce0; --s-none:#e9e7ec;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif; --body:"Figtree","Segoe UI",system-ui,sans-serif; --r:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141118; --surface:#1d1923; --sunk:#17141c; --ink:#ece8f0; --muted:#a39bad; --line:#332d3b;
  --berry:#c79bd0; --berry-soft:#37233c; --deodar:#6cc4a2; --deodar-soft:#17332a; --accent:#ec7fa3;
  --good:#69c490; --good-soft:#17321f; --warn:#e4b35f; --warn-soft:#352a12; --bad:#ef7d72; --bad-soft:#3b1d1a;
  --cottage:#7db4ef; --cottage-soft:#1b3048; --premium:#f2a05e; --premium-soft:#3f2a17;
  --s-direct:#1e3a2a; --s-walkin:#1b3346; --s-agent:#40311a; --s-ota:#452335; --s-bx:#35284a; --s-block:#2d3036; --s-none:#2a2730; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141118; --surface:#1d1923; --sunk:#17141c; --ink:#ece8f0; --muted:#a39bad; --line:#332d3b;
  --berry:#c79bd0; --berry-soft:#37233c; --deodar:#6cc4a2; --deodar-soft:#17332a; --accent:#ec7fa3;
  --good:#69c490; --good-soft:#17321f; --warn:#e4b35f; --warn-soft:#352a12; --bad:#ef7d72; --bad-soft:#3b1d1a;
  --cottage:#7db4ef; --cottage-soft:#1b3048; --premium:#f2a05e; --premium-soft:#3f2a17;
  --s-direct:#1e3a2a; --s-walkin:#1b3346; --s-agent:#40311a; --s-ota:#452335; --s-bx:#35284a; --s-block:#2d3036; --s-none:#2a2730; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:1.5rem} h3{font-size:1.05rem}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--berry)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px 6px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:34px;height:34px;flex:none;border-radius:8px;background:var(--berry);position:relative;overflow:hidden}
.mark::after{content:"";position:absolute;left:4px;right:4px;bottom:-9px;height:26px;background:var(--surface);transform:rotate(45deg) skew(12deg,12deg);opacity:.92}
.brand h1{font-size:1.2rem;white-space:nowrap}
.brand p{margin:0;color:var(--muted);font-size:.8rem}
.who{font-size:.85rem;color:var(--muted);font-weight:600}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;padding:9px 11px;border-bottom:3px solid transparent;color:var(--muted);font-weight:600;white-space:nowrap;cursor:pointer}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--berry);border-bottom-color:var(--accent)}
.count{background:var(--accent);color:var(--surface);border-radius:999px;padding:0 6px;font-size:.72rem}
:root:not(.owner) .owner-only{display:none!important}
:root:not(.top) .top-only{display:none!important}
main{padding-block:20px 60px}
.view,.stack{display:flex;flex-direction:column;gap:16px}
.view[hidden]{display:none}
.vhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions input[type=month]{width:auto}
.inline{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted);font-weight:600}
.inline select{width:auto}
.btn{border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:8px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--berry)}
.btn.primary{background:var(--berry);border-color:var(--berry);color:var(--surface)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.small{padding:4px 10px;font-size:.85rem}
.btn.ghost{background:none;border-color:transparent;color:var(--berry)}
.btn.danger{color:var(--bad)}
.btn.danger.armed{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.phead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.grid2{grid-template-columns:minmax(0,1fr)}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kpi{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.kpi span{color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kpi b{font-family:var(--display);font-size:1.55rem;font-weight:700;font-variant-numeric:tabular-nums}
.kpi small{color:var(--muted)}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.row:first-child{border-top:0}
.row[data-open],.click{cursor:pointer}
.panel.row{padding:12px 16px;border:1px solid var(--line)}
.row .main{flex:1 1 200px;min-width:0}
.row .main b{display:block;font-weight:600}
.row .main small{color:var(--muted)}
.row .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{color:var(--muted);padding:16px 8px;text-align:center;margin:0}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.roomstrip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
@media (max-width:760px){.roomstrip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rm{border:1px dashed var(--line);background:var(--surface);border-radius:8px;padding:8px;text-align:left;cursor:pointer;min-width:0;display:flex;flex-direction:column}
.rm b{font-family:var(--display)}
.rm small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm.held{border-style:solid}
.rm.held small{color:var(--ink)}
.src-direct{background:var(--s-direct)}.src-walkin{background:var(--s-walkin)}.src-agent{background:var(--s-agent)}.src-ota{background:var(--s-ota)}.src-bx{background:var(--s-bx)}.src-block{background:var(--s-block)}.src-none{background:var(--s-none)}
.awaiting{background-image:repeating-linear-gradient(45deg,transparent 0 6px,color-mix(in srgb,var(--warn) 22%,transparent) 6px 10px)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px;border:1px solid var(--line)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filters label,.field{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted);font-weight:600;min-width:0}
.filters .grow{flex:1;min-width:180px}
.filters .check{flex-direction:row;align-items:center;min-height:38px}
.filters .check input{width:auto;min-height:0}
input,select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:38px;width:100%}
input:focus,select:focus{border-color:var(--berry);outline:none;box-shadow:0 0 0 3px var(--berry-soft)}
.sumrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{background:var(--sunk);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.85rem;white-space:nowrap}
.chip b{font-variant-numeric:tabular-nums}
.chip.total{background:var(--berry-soft);border-color:transparent}
.chip.bad{background:var(--bad-soft);border-color:transparent}
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tablewrap.flat{border:0;border-radius:0}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--sunk);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td.amt,th.amt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td.nowrap{white-space:nowrap}
td .sub,.sub{display:block;color:var(--muted);font-size:.8rem;font-weight:400}
tr.click:hover td{background:var(--sunk)}
.links a{margin-right:8px}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.mute{background:var(--sunk);color:var(--muted)}
/* calendar */
.calwrap{max-height:calc(100dvh - 250px);overflow:auto}
.cal{min-width:980px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:.82rem}
.cal thead th{position:sticky;top:0;z-index:2}
.cal thead tr+tr th{top:38px}
.cal th.dcol{position:sticky;left:0;z-index:1;width:112px;white-space:nowrap;background:var(--sunk);text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--ink);border-right:1px solid var(--line)}
.cal thead th.dcol{z-index:3}
.cal th.dcol small{color:var(--muted);font-weight:500}
.cal .tyhead{text-align:center;border-left:1px solid var(--line)}
.cal .ctr{text-align:center}
.cal td,.cal th{border-bottom:1px solid var(--line)}
.cal td{padding:0;height:32px;border-left:1px solid var(--line);font-variant-numeric:tabular-nums}
.cal td.amt{padding:0 8px;width:84px}
.cal td.ctr{width:66px}
.cal th.amt{width:84px}.cal th.ctr:not(:last-child){min-width:66px}
.cal .free{cursor:pointer}
.cal .free:hover{background:var(--berry-soft)}
.cal .stay{padding:4px 6px;vertical-align:top;cursor:pointer;overflow:hidden}
.cal .stay:hover{filter:brightness(.96)}
.cal .stay b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .stay small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .flagged b::after{content:" ?";color:var(--warn)}
.cal tr.now th.dcol{background:var(--accent);color:var(--surface)}
.cal tr.now th.dcol small{color:inherit}
.cal tr.wknd th.dcol:not(:where(.now *)){font-weight:800}
.cal tfoot td,.cal tfoot th{position:sticky;bottom:0;background:var(--sunk);padding:8px;font-weight:700;border-top:1px solid var(--line);border-bottom:0}
.cal tfoot th.dcol{z-index:2}
/* forms */
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;flex-wrap:wrap;align-self:flex-start}
.seg[hidden]{display:none}
.seg button{border:0;background:none;padding:8px 16px;border-radius:7px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--surface);color:var(--berry);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:820px}
.form[hidden],.form.inner[hidden]{display:none}
.form.inner{max-width:none}
.form .full{grid-column:1/-1}
.form .field{font-size:.85rem}
.req{color:var(--accent)}
.hint{background:var(--berry-soft);border-radius:8px;padding:10px 12px;font-size:.88rem}
.hint:empty{display:none}
.formfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.amtinput{font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:560px){.form{grid-template-columns:minmax(0,1fr)}}
.pickhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.pick{display:flex;flex-direction:column;gap:4px;min-width:0}
.pick button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px;text-align:left;cursor:pointer;display:flex;flex-direction:column}
.pick button small{color:var(--muted);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick.on button{background:var(--berry);border-color:var(--berry);color:var(--surface)}
.pick.on button small{color:inherit}
.pick.taken button{background:var(--sunk);cursor:not-allowed;opacity:.75}
.pick input{min-height:32px;padding:4px 8px;font-size:.85rem;font-variant-numeric:tabular-nums}
.surooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:8px}
.banner{border-radius:var(--r);padding:12px 14px;font-size:.92rem;background:var(--warn-soft);border:1px solid var(--line)}
.banner.bad{background:var(--bad-soft)}
.note{color:var(--muted);font-size:.88rem;margin:0;max-width:75ch}
/* charts */
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--muted);font-size:11px;font-family:var(--body)}
.chart .bar:hover path{filter:brightness(1.25)}
.tip{position:absolute;background:var(--ink);color:var(--bg);padding:4px 8px;border-radius:6px;font-size:.8rem;white-space:nowrap;pointer-events:none}
/* dialog */
dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:0;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px)}
dialog::backdrop{background:rgba(20,10,25,.45)}
.dlg-in{padding:20px;display:flex;flex-direction:column;gap:14px}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:0}
.facts dt{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.facts dd{margin:0;font-weight:500}
.mini{border:1px solid var(--line)}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:50;max-width:calc(100vw - 32px)}
.login{min-height:100dvh;display:grid;place-items:center;padding:16px}
.login form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px}
.login h1{font-size:1.4rem;margin:0}
.login p{margin:0}
.login .bad{color:var(--bad)}
.tflist{display:grid;gap:10px;margin-top:8px}
.tfrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:8px}
.datebox{position:relative;display:block}
.datebox input{width:100%;color:transparent}
.datebox input::-webkit-datetime-edit,.datebox input::-webkit-datetime-edit-fields-wrapper,.datebox input::-webkit-datetime-edit-text,.datebox input::-webkit-datetime-edit-day-field,.datebox input::-webkit-datetime-edit-month-field,.datebox input::-webkit-datetime-edit-year-field{color:transparent;background:transparent}
.datebox input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.datetext{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink,inherit);white-space:nowrap}
.datetext.empty{color:var(--muted)}
.datebox::after{content:"";position:absolute;right:10px;top:50%;width:15px;height:15px;transform:translateY(-50%);pointer-events:none;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1v2h6V1h1.500v2H15v12H1V3h2.500V1zM2.500 6.500v7h11v-7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 1v2h6V1h1.500v2H15v12H1V3h2.500V1zM2.500 6.500v7h11v-7z'/%3E%3C/svg%3E") center/contain no-repeat}
.ty-c{--ty:var(--cottage);--ty-soft:var(--cottage-soft)}
.ty-p{--ty:var(--premium);--ty-soft:var(--premium-soft)}
.pick.ty:not(.taken) button{border-color:var(--ty);background:var(--ty-soft)}
.pick.ty:not(.taken) button b,.pick.ty:not(.taken) button small{color:var(--ty)}
.pick.ty.on:not(.taken) button{background:var(--ty);color:var(--surface)}
.pick.ty.on:not(.taken) button b,.pick.ty.on:not(.taken) button small{color:inherit}
.rm.ty{border-top:4px solid var(--ty)}
.rm.ty:not(.held) b{color:var(--ty)}
.cal thead th.ty{background:var(--ty-soft);color:var(--ty)}
.surooms .ty,.tfrow .ty{color:var(--ty)}
.surooms .ty input,.tfrow .ty input{color:var(--ink)}
.summary{padding:14px 16px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r)}
.summary h3{margin:0 0 8px}
.paysum{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.paysum th,.paysum td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top;font-weight:500;text-align:left;text-transform:none;letter-spacing:0;background:none;color:var(--ink);font-size:.95rem}
.paysum td.amt{text-align:right;white-space:nowrap;padding-left:16px}
.paysum th small{display:block;color:var(--muted);font-weight:400;font-size:.82rem}
.paysum .sum th,.paysum .sum td{font-weight:700;border-top:2px solid var(--ink)}
.paysum .due th,.paysum .due td{font-weight:800;font-size:1.1rem;border-bottom:0;padding-top:10px;color:var(--berry)}
.paysum .due.over th,.paysum .due.over td{color:var(--bad)}
.loss{color:var(--bad)}
.gain{color:var(--good)}
.plsum td{font-weight:700;border-top:2px solid var(--ink)}
.tag{display:inline-block;margin-left:4px;padding:0 6px;border-radius:6px;background:var(--berry-soft);color:var(--berry);font-size:.72rem;font-weight:600}
.tfrow:has(input[type=month]){grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.cal tr.mstart>*{border-top:3px solid var(--berry)}
#invPrint{position:fixed;inset:0;z-index:50;overflow:auto;background:var(--bg);padding:16px}
.invbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.field textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);resize:vertical}
@media print{body>*:not(#invPrint){display:none!important}#invPrint{position:static;overflow:visible;padding:0;background:#fff}.invbar{display:none}}
.tfper{border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.tfper summary{cursor:pointer}.tfper summary small{color:var(--muted);margin-left:6px}
.tfdates{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:10px 0}
.tfgrid{width:100%;border-collapse:collapse;margin-bottom:10px}.tfgrid th,.tfgrid td{padding:4px;text-align:left;background:none;text-transform:none;letter-spacing:0;font-size:.85rem}
.tfgrid th.ty{color:var(--ty)}.tfgrid input{min-width:72px;width:100%;min-height:34px;padding:4px 8px}
.ratefield{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;min-width:0}
.fg{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 14px 14px;border:1px solid var(--line);border-left:4px solid var(--fgl);border-radius:var(--r);background:var(--fgb)}
.fg[hidden]{display:none}.fg>h3{grid-column:1/-1;margin:0;font-size:.95rem;font-family:var(--display)}.fg .field{color:var(--ink)}.fg .field .sub{color:var(--muted)}
.fg-guest{--fgb:var(--berry-soft);--fgl:var(--berry)}.fg-party{--fgb:var(--deodar-soft);--fgl:var(--deodar)}.fg-extras{--fgb:var(--warn-soft);--fgl:var(--warn)}.fg-info{--fgb:var(--s-walkin);--fgl:var(--cottage)}.fg-pay{--fgb:var(--s-ota);--fgl:var(--accent)}
.fg input,.fg select{background:var(--surface)}
#nbKidMealRate,#nbKidBedRate,#nbBedRate,[data-extraprice],.pick input{font-weight:700;color:var(--accent);border-color:var(--accent)}
.surgroups{display:grid;gap:10px;margin-top:8px}
.surgroup{padding:10px 12px 12px;border:1px solid var(--ty);border-left:4px solid var(--ty);border-radius:var(--r);background:var(--ty-soft)}
.surgroup h4{margin:0;color:var(--ty);font-size:.92rem;font-family:var(--display)}.surgroup .field{color:var(--ty);font-weight:700}.surgroup input{background:var(--surface);color:var(--ink)}