/* MZAF Design Studio: "Drawing Sheet" design (approved option A). */
html{-webkit-text-size-adjust:100%}body{margin:0}[hidden]{display:none!important}img{max-width:100%}
:root{
  --bronze:#6C5C42; --bronze-deep:#54472F; --stone:#E2E2DA; --sand:#DBD4C4;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F8F6F1; --ink:#2A251D; --ink-2:#6E6656; --ink-3:#9A917F;
  --line:#E7E2D7; --line-strong:#CEC5B3; --grid:rgba(108,92,66,.04); --grid-major:rgba(108,92,66,.075);
  --accent:#6C5C42; --accent-hover:#5A4C36; --accent-ink:#FFFFFF; --accent-soft:rgba(108,92,66,.09);
  --side-bg:#6C5C42; --side-ink:#EFEBE2; --side-ink-2:rgba(239,235,226,.62); --side-line:rgba(239,235,226,.16); --side-active:rgba(255,255,255,.12);
  --ok:#3E7650; --ok-bg:rgba(62,118,80,.1); --warn:#9A6A1F; --warn-bg:rgba(154,106,31,.11); --bad:#A2463A; --bad-bg:rgba(162,70,58,.1);
  --shadow:0 1px 2px rgba(42,37,29,.05),0 8px 24px -12px rgba(42,37,29,.18);
  --f-sans:"Jost","Futura","Avenir Next","Century Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#16140F; --surface:#1D1A14; --surface-2:#242019; --ink:#EDE8DD; --ink-2:#ABA290; --ink-3:#7E7666;
    --line:#302B22; --line-strong:#463F33; --grid:rgba(226,226,218,.035); --grid-major:rgba(226,226,218,.06);
    --accent:#BBA37A; --accent-hover:#CDB58B; --accent-ink:#16140F; --accent-soft:rgba(187,163,122,.12);
    --side-bg:#2B251B; --side-ink:#ECE7DC; --side-ink-2:rgba(236,231,220,.55); --side-line:rgba(236,231,220,.1); --side-active:rgba(187,163,122,.16);
    --ok:#7DBB8D; --ok-bg:rgba(125,187,141,.12); --warn:#D9A95A; --warn-bg:rgba(217,169,90,.12); --bad:#E08B7E; --bad-bg:rgba(224,139,126,.12);
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#16140F; --surface:#1D1A14; --surface-2:#242019; --ink:#EDE8DD; --ink-2:#ABA290; --ink-3:#7E7666;
  --line:#302B22; --line-strong:#463F33; --grid:rgba(226,226,218,.035); --grid-major:rgba(226,226,218,.06);
  --accent:#BBA37A; --accent-hover:#CDB58B; --accent-ink:#16140F; --accent-soft:rgba(187,163,122,.12);
  --side-bg:#2B251B; --side-ink:#ECE7DC; --side-ink-2:rgba(236,231,220,.55); --side-line:rgba(236,231,220,.1); --side-active:rgba(187,163,122,.16);
  --ok:#7DBB8D; --ok-bg:rgba(125,187,141,.12); --warn:#D9A95A; --warn-bg:rgba(217,169,90,.12); --bad:#E08B7E; --bad-bg:rgba(224,139,126,.12);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:.78em;letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
.grid-bg{background-color:var(--bg);background-image:linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* ---------- Logo ---------- */
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;color:inherit}
.logo svg.mark{display:block;height:auto}
.logo .ds{font-weight:500;letter-spacing:.52em;font-size:11px;text-transform:uppercase;white-space:nowrap}
.logo .tagline{font-weight:500;letter-spacing:.2em;font-size:8.5px;text-transform:uppercase;opacity:.85;white-space:nowrap}
.logo .tagline i{font-style:normal;opacity:.6;margin:0 .45em}

/* ---------- Buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:9px 16px;border-radius:2px;cursor:pointer;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn.ghost{border-color:transparent;background:transparent;padding-inline:10px}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.sm{padding:6px 11px;font-size:11.5px}
.btn.danger{color:var(--bad);border-color:var(--bad-bg)}
.btn svg{width:15px;height:15px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:500}
.field input,.field select,.field textarea{border:0;border-bottom:1px solid var(--line-strong);background:transparent;padding:8px 2px;border-radius:0;outline:none;font-size:15px;width:100%;transition:border-color .15s}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.field select{cursor:pointer}
.field select option{background:var(--surface);color:var(--ink)}
.field textarea{resize:vertical;min-height:64px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.form-grid .span2{grid-column:1/-1}
.form-section{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:6px}
.form-section span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--accent);text-transform:uppercase;white-space:nowrap}
.form-section::after{content:"";flex:1;height:1px;background:var(--line)}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.chk{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);padding:5px 10px;border-radius:999px;font-size:13px;cursor:pointer}
.chk input{accent-color:var(--bronze)}
.form-error{color:var(--bad);font-size:13px;min-height:1em}

/* ---------- Login ---------- */
.login{min-height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.login-art{position:relative;background:var(--bronze);color:var(--stone);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px clamp(24px,5vw,64px)}
.login-art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(226,226,218,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(226,226,218,.08) 1px,transparent 1px),linear-gradient(rgba(226,226,218,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(226,226,218,.035) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.login-art>*{position:relative}
.login-art .plan{width:100%;max-width:520px;height:auto;margin-block:24px;opacity:.95}
.login-art .plan .draw{stroke-dasharray:1400;stroke-dashoffset:0;animation:draw 2.6s cubic-bezier(.6,.1,.2,1) both}
@keyframes draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
.login-art .meta{display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:rgba(226,226,218,.7)}
.login-form{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(20px,5vw,72px);gap:28px;max-width:640px;width:100%;justify-self:center}
.login-form h1{font-weight:300;font-size:clamp(30px,3.4vw,42px);letter-spacing:.02em;line-height:1.1;margin:0;text-wrap:balance}
.login-form h1 b{font-weight:500}
.login-form p.lede{color:var(--ink-2);margin:10px 0 0;max-width:46ch}
.login-form form{display:flex;flex-direction:column;gap:22px}
.demo-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.demo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line);background:var(--surface);padding:10px 12px;cursor:pointer;border-radius:2px;transition:border-color .15s,background .15s}
.demo:hover{border-color:var(--accent);background:var(--accent-soft)}
.demo b{font-weight:500;font-size:14px}
.demo span{font-family:var(--f-mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.04em}
.titleblock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line-strong);font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.titleblock div{padding:6px 9px;border-left:1px solid var(--line-strong);display:flex;flex-direction:column;gap:2px;min-width:0}
.titleblock div:first-child{border-left:0}
.titleblock small{color:var(--ink-3);font-size:9px}
.titleblock strong{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- App shell ---------- */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100%}
.side{background:var(--side-bg);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.side .brand{padding:28px 24px 24px;border-bottom:1px solid var(--side-line);color:var(--stone)}
.side nav{display:flex;flex-direction:column;padding:18px 12px;gap:2px;flex:1}
.side .navlabel{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--side-ink-2);padding:14px 12px 6px;text-transform:uppercase}
.navbtn{display:flex;align-items:center;gap:12px;background:transparent;border:0;color:var(--side-ink);padding:10px 12px;border-radius:2px;cursor:pointer;text-align:left;font-size:14px;letter-spacing:.03em;position:relative}
.navbtn svg{width:18px;height:18px;opacity:.8;flex:none}
.navbtn .code{margin-left:auto;font-family:var(--f-mono);font-size:10px;color:var(--side-ink-2)}
.navbtn:hover{background:var(--side-active)}
.navbtn.on{background:var(--side-active)}
.navbtn.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:2px;background:var(--stone)}
.side .me{border-top:1px solid var(--side-line);padding:16px 20px;display:flex;align-items:center;gap:12px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;letter-spacing:.06em;flex:none;background:var(--accent-soft);color:var(--accent);border:1px solid var(--line-strong)}
.side .avatar{background:rgba(255,255,255,.1);color:var(--side-ink);border-color:var(--side-line)}
.side .me .who{min-width:0;flex:1}
.side .me .who b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me .who span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--side-ink-2)}
.side .me button{background:transparent;border:1px solid var(--side-line);color:var(--side-ink);border-radius:2px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer}
.side .me button:hover{background:var(--side-active)}
.side .me button svg{width:16px;height:16px}
.topbar{display:none}
.main{min-width:0;display:flex;flex-direction:column}
.content{padding:32px clamp(16px,3.4vw,44px) 64px;display:flex;flex-direction:column;gap:28px;max-width:1360px;width:100%}

/* sheet header */
.sheet-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:end;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.sheet-head h2{font-weight:300;font-size:clamp(28px,3.2vw,40px);margin:4px 0 0;letter-spacing:.01em;line-height:1.1;text-wrap:balance}
.sheet-head p{margin:6px 0 0;color:var(--ink-2);max-width:60ch}
.sheet-head .titleblock{grid-template-columns:repeat(3,auto);background:var(--surface)}
.head-actions{display:flex;gap:10px;flex-wrap:wrap}

/* panels */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:2px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-h h3{margin:0;font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.panel-h .sub{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
.panel-b{padding:20px}
.cols{display:grid;gap:24px}
.cols.c2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.cols.c2e{grid-template-columns:repeat(2,minmax(0,1fr))}

/* KPIs with dimension lines */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;border:1px solid var(--line);background:var(--surface)}
.kpi{padding:20px 22px 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.kpi:first-child{border-left:0}
.dim{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.dim::before,.dim::after{content:"";height:9px;width:1px;background:currentColor}
.dim span{flex:1;height:1px;background:currentColor;opacity:.6;position:relative}
.dim em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;order:-1;margin-right:4px}
.kpi .val{font-size:clamp(24px,2.3vw,30px);font-weight:400;letter-spacing:-.01em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .note{font-size:12.5px;color:var(--ink-2)}

/* tables */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td .muted,.muted{color:var(--ink-2);font-size:12.5px}
.person{display:flex;align-items:center;gap:10px;min-width:0}
.person .avatar{width:30px;height:30px;font-size:10.5px}
.person b{font-weight:500;display:block;white-space:nowrap}
.empty{padding:32px 20px;text-align:center;color:var(--ink-2)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;white-space:nowrap;border:1px solid transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:var(--ok-bg)}
.pill.warn{color:var(--warn);background:var(--warn-bg)}
.pill.bad{color:var(--bad);background:var(--bad-bg)}
.pill.neutral{color:var(--ink-2);background:var(--surface-2);border-color:var(--line)}
.pill.role{color:var(--accent);background:var(--accent-soft)}
.pill.role::before{display:none}
.tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);padding:2px 7px;color:var(--ink-2);white-space:nowrap}

/* attendance punch card */
.punch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px;position:relative;overflow:hidden}
.punch .clock{font-size:clamp(44px,6vw,72px);font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.punch .clock small{font-size:.32em;letter-spacing:.1em;color:var(--ink-2);margin-left:8px}
.punch .date{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase;margin-top:10px}
.punch .state{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:14px;color:var(--ink-2)}
.punch .state b{color:var(--ink);font-weight:500}
.punch-btn{width:156px;height:156px;border-radius:50%;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;position:relative;transition:transform .15s,background .15s}
.punch-btn::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed var(--line-strong)}
.punch-btn:hover{transform:scale(1.03)}
.punch-btn.out{background:var(--surface);color:var(--accent)}
.punch-btn.done{background:var(--surface-2);color:var(--ink-3);border-color:var(--line-strong);cursor:default;transform:none}
.punch-btn svg{width:28px;height:28px}
.punch .compass{position:absolute;right:-60px;top:-60px;width:220px;height:220px;opacity:.5;pointer-events:none;color:var(--line-strong)}

/* project cards */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border:1px solid var(--line-strong);background:var(--surface);padding:6px 12px;border-radius:999px;font-size:12.5px;cursor:pointer;letter-spacing:.03em}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.proj{background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;cursor:pointer;transition:border-color .15s,box-shadow .15s;text-align:left;padding:0;border-radius:2px}
.proj:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.proj .thumb{height:118px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;color:var(--accent)}
.proj .thumb svg{position:absolute;inset:0;width:100%;height:100%}
.proj .thumb .code{position:absolute;left:12px;top:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ink-2);background:var(--surface);padding:1px 6px;border:1px solid var(--line)}
.proj .thumb .pill{position:absolute;right:10px;top:9px;box-shadow:0 0 0 3px var(--surface);background-color:var(--surface)}
.proj .thumb .pill.ok{background-image:linear-gradient(var(--ok-bg),var(--ok-bg))}.proj .thumb .pill.warn{background-image:linear-gradient(var(--warn-bg),var(--warn-bg))}
.proj .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.proj h4{margin:0;font-size:18px;font-weight:500;letter-spacing:.01em}
.proj .client{font-size:13px;color:var(--ink-2);margin-top:2px}
.proj .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:13px}
.bar{height:4px;background:var(--surface-2);border:1px solid var(--line);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.stages{display:flex;gap:3px}
.stages i{flex:1;height:3px;background:var(--line)}
.stages i.on{background:var(--accent)}

/* bank cards */
.bank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.bank{border:1px solid var(--line);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:16px;position:relative;border-radius:2px}
.bank.feature{background:var(--bronze);border-color:var(--bronze);color:var(--stone)}
.bank.feature .muted,.bank.feature .eyebrow{color:rgba(226,226,218,.7)}
.bank .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.bank .bname{font-size:17px;font-weight:500}
.bank .bal{font-size:28px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bank .acct{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em}
.bank .actions{display:flex;gap:8px;flex-wrap:wrap}
.bank.feature .btn{background:transparent;color:var(--stone);border-color:rgba(226,226,218,.35)}
.bank.feature .btn:hover{background:rgba(255,255,255,.1)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(22,20,15,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 24px;z-index:50;overflow-y:auto;backdrop-filter:blur(2px)}
.modal{background:var(--surface);border:1px solid var(--line-strong);width:100%;max-width:640px;box-shadow:var(--shadow);animation:rise .22s ease-out both}
@keyframes rise{from{transform:translateY(8px);opacity:.4}to{transform:none;opacity:1}}
.modal-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:2px 0 0;font-weight:400;font-size:22px}
.modal-b{padding:24px;display:flex;flex-direction:column;gap:20px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line);background:var(--surface-2);flex-wrap:wrap}
.close{background:transparent;border:0;cursor:pointer;color:var(--ink-2);width:32px;height:32px;display:grid;place-items:center}
.close svg{width:18px;height:18px}
.dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.dl div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.dl dd{margin:0;font-size:14.5px;overflow-wrap:anywhere}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;font-size:14px;z-index:80;border-radius:2px;box-shadow:var(--shadow);animation:rise .2s ease-out both;max-width:calc(100% - 32px)}

.list{display:flex;flex-direction:column}
.list .li{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--line)}
.list .li:last-child{border-bottom:0}
.list .li .grow{flex:1;min-width:0}
.list .li b{font-weight:500}
.amt-in{color:var(--ok)}
.amt-out{color:var(--bad)}
.demo-note{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}
.matrix td,.matrix th{text-align:center;padding:9px 10px}
.matrix td:first-child,.matrix th:first-child{text-align:left}
.matrix .y{color:var(--ok);font-weight:600}
.matrix .n{color:var(--ink-3)}

/* ---------- Drawing-sheet furniture ---------- */
.sheet{position:relative;border:1px solid var(--line-strong);outline:1px solid var(--line);outline-offset:6px;margin:10px;background:var(--bg);display:flex;flex-direction:column;min-height:calc(100% - 20px)}
.ruler{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:9.5px;color:var(--ink-3);letter-spacing:.1em}
.ruler span{padding:3px 0;text-align:center;border-left:1px solid var(--line);position:relative}
.ruler span:first-child{border-left:0}
.sheet-foot{margin-top:auto;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) auto;border-top:1px solid var(--line-strong);font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sheet-foot>div{padding:10px 14px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px;justify-content:center;min-width:0}
.sheet-foot>div:first-child{border-left:0}
.sheet-foot small{color:var(--ink-3);font-size:9px}
.sheet-foot b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scalebar{display:flex;align-items:flex-end;gap:0;height:16px}
.scalebar i{width:22px;height:5px;border:1px solid var(--ink-2);border-left:0}
.scalebar i:nth-child(odd){background:var(--ink-2)}
.scalebar i:first-child{border-left:1px solid var(--ink-2)}
.callout-row{display:flex;align-items:center;gap:16px;min-width:0}
.callout{width:58px;height:58px;flex:none;color:var(--accent)}
.callout text{font-family:var(--f-mono);fill:var(--ink);font-size:11px;text-anchor:middle;letter-spacing:.04em}
.callout text.big{font-size:15px;font-weight:500}
.sheet-head h2{margin-top:0}
.north{width:34px;height:44px;color:var(--ink-2);flex:none}
.head-right{display:flex;align-items:flex-end;gap:16px}
.content{flex:1}
@media (max-width:900px){.sheet{margin:6px;outline-offset:4px}.sheet-foot{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-foot>div:nth-child(3){border-left:0}.sheet-foot>div:nth-child(n+3){border-top:1px solid var(--line)}.sheet-foot>div:last-child{display:none}.head-right .north{display:none}}
@media (max-width:620px){.ruler{grid-template-columns:repeat(4,minmax(0,1fr))}.ruler span:nth-child(n+5){display:none}.callout{width:46px;height:46px}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){.cols.c2,.cols.c2e{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .login{grid-template-columns:minmax(0,1fr)}
  .login-art{padding:28px 20px}
  .login-art .plan{max-width:360px;margin-block:12px}
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:272px;z-index:60;transform:translateX(-102%);transition:transform .22s ease;height:auto;padding-top:env(safe-area-inset-top,0px)}
  .app.nav-open .side{transform:none;box-shadow:0 0 0 100vmax rgba(22,20,15,.4)}
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--side-bg);color:var(--stone);position:sticky;top:env(safe-area-inset-top,0px);z-index:40}
  .topbar button{background:transparent;border:1px solid var(--side-line);color:var(--side-ink);width:38px;height:38px;display:grid;place-items:center;border-radius:2px;cursor:pointer}
  .topbar button svg{width:18px;height:18px}
  .sheet-head{grid-template-columns:minmax(0,1fr)}
  .sheet-head .titleblock{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .form-grid,.dl,.demo-list{grid-template-columns:minmax(0,1fr)}
  .punch{grid-template-columns:minmax(0,1fr);justify-items:start}
  .punch-btn{width:128px;height:128px}
  .kpi{border-left:0;border-top:1px solid var(--line)}
  .kpi:first-child{border-top:0}
  .titleblock{grid-template-columns:repeat(2,minmax(0,1fr))}
  .titleblock div:nth-child(3){border-left:0}
  .titleblock div:nth-child(n+3){border-top:1px solid var(--line-strong)}
  .sheet-head .titleblock{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sheet-head .titleblock div:nth-child(3){border-left:1px solid var(--line-strong)}
  .sheet-head .titleblock div:nth-child(n+3){border-top:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= Phone tab bar ================= */
.tabbar{display:none}
@media (max-width:900px){
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:var(--side-bg);border-top:1px solid var(--side-line)}
  .tab{display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;border:0;color:var(--side-ink-2);font-size:10.5px;letter-spacing:.04em;padding:6px 2px;cursor:pointer;border-radius:12px}
  .tab svg{width:21px;height:21px}
  .tab.on{color:var(--side-ink);background:var(--side-active)}
  .content{padding-bottom:110px}
  .sheet-foot{margin-bottom:76px}
}

/* ================= Workflow additions ================= */
.loader{min-height:100%;display:grid;place-items:center;align-content:center;background:var(--bronze);color:var(--stone);text-align:center;padding:24px;gap:18px}
.loader .logo{align-items:center}
.loader p{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin:0}
.seg{display:inline-flex;border:1px solid var(--line-strong);background:var(--surface);border-radius:2px}
.seg button{border:0;background:transparent;padding:9px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;color:var(--ink-2);font-weight:500}
.seg button.on{background:var(--ink);color:var(--bg)}
.toolbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.vis{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);padding:14px 16px;background:var(--surface-2)}
.vis-all{font-weight:500;padding-bottom:10px;border-bottom:1px dashed var(--line-strong)}
.vis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
.tick{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;min-height:34px;line-height:1.25}
.tick input{width:18px;height:18px;accent-color:#6C5C42;flex:none;margin:0}
.tick small{color:var(--ink-3);font-size:11.5px;display:block}
.hint{font-size:12.5px;color:var(--ink-2);margin:0}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.duty{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.duty:last-child{border-bottom:0}
.duty b{font-weight:500;font-size:14.5px}
.duty .meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--ink-2);align-items:center}
.duty .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mini-sel{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:6px 8px;font-size:12.5px;border-radius:2px;cursor:pointer}
.over{color:var(--bad)}
.timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.timeline div{display:flex;flex-direction:column;gap:7px;font-size:11px;color:var(--ink-3);letter-spacing:.03em;min-width:0}
.timeline i{height:4px;background:var(--line)}
.timeline .done{color:var(--ink-2)}
.timeline .done i{background:var(--accent);opacity:.55}
.timeline .now{color:var(--ink);font-weight:500}
.timeline .now i{background:var(--accent)}
.act{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line)}
.act:last-child{border-bottom:0}
.act .when{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);white-space:nowrap;text-align:right}
.act p{margin:0;font-size:14px}
.act p b{font-weight:500}
.kind{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:6px}
.live{display:inline-flex;align-items:center;gap:6px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.local-note{border:1px dashed var(--line-strong);padding:10px 14px;font-size:13px;color:var(--ink-2);background:var(--surface)}
.portal-card{display:flex;flex-direction:column;gap:22px;padding:24px}
.portal-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.portal-card h3{margin:4px 0 0;font-weight:400;font-size:26px}
.money3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line)}
.money3 div{padding:14px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.money3 div:first-child{border-left:0}
.money3 b{font-size:22px;font-weight:400;font-variant-numeric:tabular-nums}
.sec-title{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
@media (max-width:1080px){.board{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .vis-grid{grid-template-columns:minmax(0,1fr)}
  .timeline div span{display:none}
  .timeline div.now span{display:block;white-space:nowrap}
  .act{grid-template-columns:auto minmax(0,1fr);padding:12px 16px}
  .act .when{grid-column:2;text-align:left}
  .login-art{padding:22px 20px!important}
  .login-art .plan,.login-art .meta,.login-form .titleblock{display:none}
  .login-art .logo svg.mark{width:170px}
  .login-art .logo .ds{width:auto!important;font-size:10.5px!important}
  .login-art .logo .tagline{font-size:8.5px!important}
  .login-form{padding:24px 20px 36px;gap:22px}
  .login-form h1{font-size:25px}
  .login-form .btn[type=submit]{align-self:stretch!important}
  .toolbar .seg{width:100%}
  .seg button{flex:1}
  .money3 b{font-size:16px}
  .money3 div{padding:10px 12px}
  .portal-card{padding:18px 16px}
  .portal-card h3{font-size:21px}
}

/* ================= Phone layout (designed for ~360–430px) ================= */
@media (max-width:700px){
  body{font-size:15px}
  .field input,.field select,.field textarea{font-size:16px;padding:11px 2px}
  .btn{min-height:44px;padding:10px 18px}
  .btn.sm{min-height:36px}
  /* top bar */
  .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 16px;min-height:60px}
  .tb-logo{color:var(--tb-logo,var(--stone));display:flex}
  .tb-title{display:flex;flex-direction:column;min-width:0;line-height:1.2;color:var(--side-ink)}
  .tb-title small{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--side-ink-2);font-family:var(--f-sans)}
  .tb-title b{font-weight:500;font-size:17px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .tb-me{width:40px;height:40px;border-radius:50%;font-size:12px;font-weight:600;letter-spacing:.05em;background:var(--side-active);color:var(--side-ink);border:1px solid var(--side-line);clip-path:none}
  /* page */
  .content{padding:18px 16px 112px;gap:18px}
  .sheet-foot,.sheet-head .titleblock,.sheet-head .north,.sheet-head .callout,.punch .compass,.ruler{display:none!important}
  .sheet-head{padding-bottom:14px;gap:8px}
  .sheet-head .eyebrow{font-size:10.5px}
  .sheet-head h2{font-size:26px!important;line-height:1.2;margin-top:2px}
  .sheet-head p{font-size:14px;margin-top:4px}
  .head-actions{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:14px!important}
  .head-actions .btn{width:100%}
  .callout-row{gap:0}
  /* attendance card */
  .punch{grid-template-columns:minmax(0,1fr) auto!important;justify-items:stretch;gap:14px;padding:20px 18px!important;align-items:center}
  .punch .clock{font-size:46px!important}
  .punch .clock small{font-size:15px}
  .punch .date{font-size:10.5px;margin-top:6px}
  .punch .state{font-size:13px;gap:4px 14px;margin-top:10px}
  .punch-btn{width:104px!important;height:104px!important;font-size:11px;letter-spacing:.14em;gap:4px}
  .punch-btn svg{width:22px;height:22px}
  .punch-btn::after{inset:-6px}
  /* panels & lists */
  .panel-h{padding:14px 16px}
  .panel-b{padding:16px}
  .list .li{padding:12px 16px;gap:12px;flex-wrap:wrap}
  .list .li>div[style*="width:120px"]{width:100%!important;order:3}
  .list .li .tag{display:none}
  .cols{gap:18px}
  /* filters scroll in one line */
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:2px 16px 6px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:none;padding:8px 14px}
  .proj-grid,.bank-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .proj .thumb{height:96px}
  /* tables become cards */
  .tbl-wrap{overflow:visible}
  table.stack thead{display:none}
  table.stack,table.stack tbody{display:block}
  .kpi:last-child:nth-child(odd){grid-column:1/-1}
  table.stack tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:14px 16px;border-bottom:1px solid var(--line)}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{display:flex;flex-direction:column;gap:2px;padding:0;border:0;text-align:left!important;min-width:0}
  table.stack td::before{content:attr(data-label);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  table.stack td:first-child{grid-column:1/-1}
  table.stack td:first-child::before{display:none}
  table.stack td:not([data-label])::before,table.stack td[data-label=""]::before{display:none}
  table.stack td.empty{grid-column:1/-1;text-align:center!important}
  table.stack td .pill{align-self:flex-start}
  table.stack td>.btn{align-self:flex-start}
  .person .muted{display:block}
  /* bottom-sheet modals */
  .scrim{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:22px 22px 0 0!important;max-height:94dvh;display:flex;flex-direction:column;overflow:hidden;clip-path:none!important}
  .modal-b{overflow-y:auto;padding:18px 16px}
  .modal-h{padding:16px}
  .modal-h h3{font-size:20px}
  .modal-f{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
  .modal-f .btn{width:100%}
  .modal-h::before{content:"";position:absolute;left:50%;top:7px;width:40px;height:4px;border-radius:4px;background:var(--line-strong);transform:translateX(-50%)}
  .modal{position:relative}
  .dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .form-grid{gap:16px}
  /* sign-in */
  .lg-hero{padding:22px 20px 26px!important;gap:14px;justify-content:flex-start}
  .lg-art{display:none!important}
  .lg-meta{display:none}
  .lg-logo .logo svg.mark{width:170px!important}
  .lg-logo .logo .ds{font-size:10.5px!important}
  .lg-logo .logo .tagline{font-size:8.5px!important}
  .lg-card{gap:20px;padding:24px 20px 32px}
  .lg-card h1{font-size:25px!important}
  .lg-card .lede{font-size:14px}
  .demo-list{display:flex!important;overflow-x:auto;gap:8px;margin-inline:-20px;padding:2px 20px 6px;scrollbar-width:none}
  .demo-list::-webkit-scrollbar{display:none}
  .demo{flex:none;min-width:150px}
  /* bottom nav */
  .tabbar{padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px -16px rgba(0,0,0,.35)}
  .tab{min-height:52px;font-size:10.5px;justify-content:center}
  .tab svg{width:22px;height:22px}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

/* ================= Real app additions ================= */
.side-extra{display:flex;flex-direction:column;gap:2px;padding:0 12px 16px}
.side-extra button,.side-extra a{display:flex;align-items:center;gap:12px;background:transparent;border:0;color:var(--side-ink-2);padding:9px 12px;border-radius:2px;cursor:pointer;font-size:13px;text-decoration:none;text-align:left}
.side-extra button:hover,.side-extra a:hover{background:var(--side-active);color:var(--side-ink)}
.side-extra svg{width:16px;height:16px;flex:none}
.side-extra small{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--side-ink-2);padding:6px 12px 0;text-transform:uppercase}
.applink{display:flex;align-items:center;gap:14px;border:1px solid var(--line-strong);background:var(--surface);padding:12px 16px;color:var(--ink);text-decoration:none;border-radius:14px;align-self:flex-start;transition:border-color .15s}
.applink:hover{border-color:var(--accent)}
.applink svg{width:28px;height:28px;color:var(--accent);flex:none}
.applink span{display:flex;flex-direction:column;line-height:1.3}
.applink b{font-weight:500;font-size:14px}
.applink small{font-size:12px;color:var(--ink-2)}
.start ol{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
.start b{color:var(--ink);font-weight:500}
.btn:disabled{opacity:.55;cursor:progress}
.fab{display:none}

/* Android feel on phones: Material-style bottom bar with a pill, floating action button, press feedback */
@media (max-width:700px){
  .tab{position:relative;background:transparent!important;gap:4px}
  .tab svg{padding:4px 18px;box-sizing:content-box;border-radius:999px;transition:background .2s}
  .tab.on svg{background:rgba(226,226,218,.18)}
  .tab.on span{font-weight:600}
  .fab{display:inline-flex;position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:44;align-items:center;gap:10px;height:56px;padding:0 22px 0 18px;border-radius:18px;border:0;
    background:var(--accent);color:var(--accent-ink);font:500 14px var(--f-sans);letter-spacing:.04em;box-shadow:0 6px 18px -4px rgba(42,37,29,.45),0 2px 4px rgba(42,37,29,.2);cursor:pointer}
  .fab svg{width:22px;height:22px}
  .has-fab .head-actions .btn.primary{display:none}
  .has-fab .head-actions:not(:has(.btn:not(.primary))){display:none!important}
  .content{padding-bottom:170px}
  .btn,.tab,.proj,.li,.navbtn,.chip,.fab,.punch-btn{-webkit-tap-highlight-color:transparent}
  .btn:active,.chip:active,.fab:active,.proj:active,.li:active{transform:scale(.97);transition:transform .08s}
  .modal{animation:sheet .28s cubic-bezier(.2,.8,.2,1) both}
  @keyframes sheet{from{transform:translateY(40%);opacity:.3}to{transform:none;opacity:1}}
  .login{min-height:100dvh}
  .applink{align-self:stretch}
}
.loader .btn{margin-top:8px}
/* nothing may be wider than the phone: that would push the bottom bar and the floating button out of view */
html,body{overflow-x:clip}
@media (max-width:700px){.tbl-wrap:has(.matrix){overflow-x:auto;-webkit-overflow-scrolling:touch}.matrix{min-width:560px}}
/* phones: figures two per row, like app tiles */
@media (max-width:700px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:14px 14px 16px;gap:6px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .kpi:nth-child(-n+2){border-top:0}.kpi:nth-child(odd){border-left:0}
  .kpi .val{font-size:22px}.kpi .note{font-size:11.5px}
  .dim em{font-size:9.5px;letter-spacing:.06em;white-space:normal}
}
button.applink{font:inherit;cursor:pointer;text-align:left}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}

/* Light highlights (1.0.2): same design, clearer text. Labels and headings in bronze, figures a little bolder, grey text darker. */
:root{--ink-2:#5A5143;--ink-3:#857B69}
.dim em{color:var(--accent);font-weight:600}
.dim{color:var(--line-strong)}
.kpis{border-top:2px solid var(--accent)}
.kpi .val{font-weight:500;color:var(--accent)}
.panel-h h3{color:var(--accent);font-weight:600}
.panel-h .btn.ghost{color:var(--accent);font-weight:600}
/* version label: small and light in the corner, never in the way */
.ver-tag{position:fixed;right:8px;bottom:calc(4px + env(safe-area-inset-bottom,0px));z-index:40;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--ink-3);opacity:.55;pointer-events:none;user-select:none}
@media (max-width:900px){.app~.ver-tag,body:has(.tabbar) .ver-tag{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
/* new version notice */
.upd{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none}
.upd-card{pointer-events:auto;width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line-strong);border-top:3px solid var(--accent);border-radius:12px;box-shadow:0 18px 50px -12px rgba(42,37,29,.45);padding:16px 18px;animation:updIn .25s ease-out}
.upd-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.upd-h small{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.upd-h b{font-size:18px;font-weight:600}
.upd-cur{font-family:var(--f-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.upd ul{margin:10px 0 0;padding-left:18px;color:var(--ink-2);font-size:14px;display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow:auto}
.upd p{margin:8px 0 0;color:var(--ink-2)}
.upd-f{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
@keyframes updIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:900px){body:has(.tabbar) .upd{bottom:70px}}