/* GlobalBQS Forms - styles taken from the approved mockups (Surveyor Journey + Survey Form). */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --bar:#0a1a33; --bar-2:#153263; --bar-ink:#eaf1fb; --bar-accent:#8fd2ee;
  --bg:#eef2f8; --app:#eef2f8; --surface:#ffffff; --surface-2:#f5f8fc; --tint:#e9f5fb; --tint-line:#c9e6f2;
  --ink:#10203d; --muted:#53627c; --line:#dbe2ee; --line-strong:#b9c4d6;
  --accent:#1f86bd; --accent-strong:#0f6a9c; --accent-ink:#ffffff;
  --pos:#0f6e56; --pos-bg:#e6f5f0; --neg:#a3500a; --neg-bg:#fcf1e2; --crit:#b3392c; --crit-bg:#fbeae7;
  --input:#ffffff; --pad:#ffffff;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bar:#07111f; --bar-2:#10264a; --bg:#0a1220; --app:#0a1220; --surface:#111c2f; --surface-2:#16233a; --tint:#11304a; --tint-line:#1d4a6a;
  --ink:#e6edf7; --muted:#a3b2c9; --line:#24344f; --line-strong:#3a4e6e;
  --accent:#5bb8e4; --accent-strong:#8fd2ee; --accent-ink:#06121f;
  --pos:#55cfa9; --pos-bg:#0e2e26; --neg:#f2a865; --neg-bg:#33240f; --crit:#f3907f; --crit-bg:#3a1a17;
  --input:#0c1628; color-scheme:dark; } }
:root[data-theme="dark"]{
  --bar:#07111f; --bar-2:#10264a; --bg:#0a1220; --app:#0a1220; --surface:#111c2f; --surface-2:#16233a; --tint:#11304a; --tint-line:#1d4a6a;
  --ink:#e6edf7; --muted:#a3b2c9; --line:#24344f; --line-strong:#3a4e6e;
  --accent:#5bb8e4; --accent-strong:#8fd2ee; --accent-ink:#06121f;
  --pos:#55cfa9; --pos-bg:#0e2e26; --neg:#f2a865; --neg-bg:#33240f; --crit:#f3907f; --crit-bg:#3a1a17;
  --input:#0c1628; color-scheme:dark; }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:15px; line-height:1.45; min-height:100vh; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--bar)}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--muted); font-size:13.5px}
.small{font-size:12.5px}
.err{font-size:13px; color:var(--crit); font-weight:500}
.boot{display:grid; place-items:center; min-height:60vh; color:var(--muted)}
.form-app body, .form-app{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* demo ribbon */
.demo-ribbon{display:none}
.is-demo .demo-ribbon{display:block; position:fixed; top:calc(env(safe-area-inset-top,0px) + 14px); right:-34px; z-index:60; transform:rotate(45deg); background:#f08a24; color:#1d1203; font:700 12px/1 var(--mono); letter-spacing:.18em; padding:6px 40px; box-shadow:0 2px 8px rgba(0,0,0,.25); pointer-events:none}

/* update + offline bars */
.update-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(96px + env(safe-area-inset-bottom,0px)); z-index:55; background:var(--ink); color:var(--surface); border-radius:12px; padding:10px 12px 10px 16px; display:flex; gap:12px; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:calc(100% - 32px); font-size:14px}
.update-bar button{min-height:40px; border-radius:9px; border:0; background:var(--accent); color:var(--accent-ink); font-weight:600; padding:0 14px; cursor:pointer}

/* ================= journey screens (phone-width column) ================= */
.journey-app{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.phone{max-width:560px; margin:0 auto; background:var(--app); min-height:100vh; display:flex; flex-direction:column}
@media (min-width:600px){ .phone{min-height:auto; margin:24px auto 32px; border-radius:22px; border:1px solid var(--line-strong); overflow:hidden; box-shadow:0 30px 70px -30px rgba(10,26,51,.45)} }
.appbar{background:linear-gradient(115deg,var(--bar),var(--bar-2)); color:var(--bar-ink); padding:14px 16px; display:grid; gap:6px}
.appbar-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.brand{display:flex; align-items:center; gap:8px; font-weight:600; font-size:16px; min-width:0}
.brand svg{width:26px; height:26px; flex:none}
.brand b{font-weight:600; white-space:nowrap}
.brand span{color:var(--bar-accent)}
.net{font-size:12.5px; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; min-height:30px; border-radius:999px; background:rgba(234,241,251,.1); border:1px solid rgba(234,241,251,.25); color:var(--bar-ink); white-space:nowrap}
.net i{width:8px; height:8px; border-radius:50%; background:#55cfa9; flex:none}
.net.off i{background:#f2a865}
.net .q{font-family:var(--mono); font-size:11.5px; background:#f2a865; color:#1d1203; border-radius:999px; padding:0 7px}
.appbar h1{margin:0; font-size:20px; font-weight:600}
.appbar p{margin:0; font-size:13px; color:#c3d2e8}
.back{background:none; border:0; color:var(--bar-accent); padding:0; min-height:36px; font-size:15px; cursor:pointer; justify-self:start}
.content{padding:14px 16px 28px; display:grid; gap:12px; align-content:start; flex:1}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px; display:grid; gap:12px; min-width:0}
.card>*{min-width:0}
.card h3{margin:0; font-size:16px; font-weight:600}
.row{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; white-space:nowrap}
.pill.ok{background:var(--pos-bg); color:var(--pos)} .pill.warn{background:var(--neg-bg); color:var(--neg)} .pill.bad{background:var(--crit-bg); color:var(--crit)} .pill.info{background:var(--tint); color:var(--accent-strong)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px; border-radius:10px; border:1px solid transparent; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none}
.btn.block{display:flex; width:100%; min-height:52px; font-size:15.5px}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-strong)}
.btn.primary:disabled{background:var(--line-strong); color:var(--muted); cursor:not-allowed}
.btn.ghost{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.ghost[aria-pressed="true"]{background:var(--neg-bg); border-color:var(--neg); color:var(--neg)}
.btn.danger{background:var(--crit); color:#fff}
.btn.small{min-height:40px; padding:0 12px; font-size:13.5px}
.btn:disabled{opacity:.55; cursor:not-allowed}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; margin:0}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:500; text-align:right; overflow-wrap:anywhere}
.jobcard{display:grid; gap:6px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; cursor:pointer; width:100%}
.jobcard:hover{border-color:var(--accent)}
.jobcard .vsl{font-weight:600; font-size:16.5px}
.note{display:flex; gap:10px; padding:12px 14px; border-radius:10px; font-size:14px; align-items:flex-start}
.note svg{width:18px; height:18px; flex:none; margin-top:1px}
.note>div{min-width:0}
.note.info{background:var(--tint); border:1px solid var(--tint-line)}
.note.warn{background:var(--neg-bg); border:1px solid color-mix(in srgb,var(--neg) 35%,transparent)} .note.warn svg{color:var(--neg)}
.note.ok{background:var(--pos-bg); border:1px solid color-mix(in srgb,var(--pos) 30%,transparent)} .note.ok svg{color:var(--pos)}
.note.bad{background:var(--crit-bg); border:1px solid color-mix(in srgb,var(--crit) 35%,transparent)} .note.bad svg{color:var(--crit)}
.note .btn{margin-top:8px}
.check{display:grid; gap:10px; padding:14px; border-radius:12px; background:var(--surface); border:1px solid var(--line)}
.check.yes{border-color:var(--pos); background:var(--pos-bg)}
.check.no{border-color:var(--neg); background:var(--neg-bg)}
.check q{quotes:none; font-weight:600; font-size:15px}
.check .big{font-family:var(--mono); font-size:15px}
.yn{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.yn button{min-height:48px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); font-weight:600; cursor:pointer}
.yn button[aria-pressed="true"].y{background:var(--pos); color:#fff; border-color:var(--pos)}
.yn button[aria-pressed="true"].n{background:var(--neg); color:#fff; border-color:var(--neg)}
.fix{display:grid; gap:6px}
.fix label{font-size:12.5px; color:var(--muted)}
.fix input,.fix textarea,.fix select,.code{min-height:48px; padding:10px 12px; border-radius:9px; border:1px solid var(--line-strong); background:var(--input); font-size:16px; width:100%}
.fix textarea{min-height:72px; resize:vertical}
.fix input.bad{border-color:var(--crit)}
.fix .err{font-size:12.5px} .fix .okm{font-size:12.5px; color:var(--pos); font-weight:500}
.saved-fix{font-size:12.5px; color:var(--pos); font-weight:500}
.code{font-family:var(--mono); font-size:26px; letter-spacing:.4em; text-align:center; min-height:58px}
.tl{list-style:none; margin:0; padding:0; display:grid}
.tl li{display:grid; grid-template-columns:22px 1fr; gap:10px; padding-bottom:14px; position:relative}
.tl li::before{content:""; position:absolute; left:10px; top:22px; bottom:0; width:2px; background:var(--line)}
.tl li:last-child::before{display:none}
.tl .d{width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); background:var(--surface); display:grid; place-items:center; font-size:12px; z-index:1}
.tl li.done .d{background:var(--pos); border-color:var(--pos); color:#fff}
.tl li.now .d{border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.tl b{display:block; font-size:14.5px}
.tl span{font-size:13px; color:var(--muted)}
ol.howto{margin:0; padding-left:20px; display:grid; gap:8px}
.ob{list-style:none; margin:0; padding:0; display:grid}
.ob li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px}
.ob li:last-child{border-bottom:0}
.ob small{display:block; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.progress{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted)}
.progress i{width:26px; height:4px; border-radius:2px; background:var(--line)}
.progress i.on{background:var(--accent)}
.tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--surface); padding:4px; border-radius:11px; border:1px solid var(--line)}
.tabs button{min-height:46px; border-radius:8px; border:0; background:transparent; font-weight:600; font-size:14.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); padding:0 8px}
.tabs button[aria-selected="true"],.tabs button[aria-pressed="true"]{background:var(--tint); color:var(--accent-strong); box-shadow:inset 0 0 0 1px var(--accent)}
select.sel{min-height:48px; padding:10px 12px; border-radius:9px; border:1px solid var(--line-strong); background:var(--input); font-size:16px; width:100%}

/* ================= form (from the Survey Form mockup) ================= */
.form-app{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:linear-gradient(115deg,var(--bar) 0%,var(--bar-2) 100%); color:var(--bar-ink)}
.top-in{max-width:1180px; margin:0 auto; padding-block:10px 12px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); display:grid; gap:8px}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.top .brand{flex:1}
.back-link{background:none; border:0; color:var(--bar-accent); min-height:40px; padding:0 6px 0 0; font-size:15px; cursor:pointer; flex:none}
.job{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
.job h1{margin:0; font-size:18px; font-weight:600; letter-spacing:.005em}
.job .ref{font-family:var(--mono); font-size:13px; color:var(--bar-accent)}
.saved{font-size:12.5px; color:#c3d2e8; display:flex; flex-wrap:wrap; gap:4px 12px}
#roBanner .ro-wrap{max-width:1180px; margin:12px auto 0; padding:0 max(16px,env(safe-area-inset-left,0px))}
main.ro .sig canvas{cursor:not-allowed}

.layout{max-width:1180px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:14px 24px; display:grid; gap:16px}
.steps{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; margin:0 -2px; scrollbar-width:thin}
.steps button{flex:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 8px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; font-weight:500; cursor:pointer; text-align:left}
.steps button .n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:600; background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}
.steps button.done .n{background:var(--pos-bg); color:var(--pos); border-color:transparent}
.steps button.open .n{background:var(--neg-bg); color:var(--neg); border-color:transparent}
.steps button[aria-current="step"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.steps button[aria-current="step"] .n{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.steps .cnt{font-family:var(--mono); font-size:11.5px; color:var(--neg)}
.steps button .sl{flex:1; min-width:0}
main{min-width:0; display:grid; gap:14px; max-width:780px; width:100%}
@media (min-width:1000px){
  .layout{grid-template-columns:250px minmax(0,1fr); align-items:start; gap:28px; padding-top:22px}
  .steps{flex-direction:column; overflow:visible; position:sticky; top:calc(env(safe-area-inset-top,0px) + 130px); padding:0; margin:0}
  .steps button{border-radius:10px; justify-content:flex-start; width:100%}
  .steps .cnt{margin-left:auto}
}
.step-h{display:grid; gap:4px; padding:2px 0}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strong)}
.step-h h2{margin:0; font-size:24px; font-weight:600; text-wrap:balance}
.step-h p{margin:0; color:var(--muted); max-width:62ch}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.card-h h3{margin:0; font-size:16px; font-weight:600; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.gchip{font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:3px 9px; border-radius:6px; background:var(--tint); color:var(--accent-strong); border:1px solid var(--tint-line)}
.order{background:var(--surface-2)}
.order dl{margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 18px}
.order dt{font-size:12px; color:var(--muted); font-weight:500}
.order dd{margin:2px 0 0; font-weight:500; overflow-wrap:anywhere}
.lock{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted)}
.lock svg{width:14px; height:14px}
.lockbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 14px; border-radius:10px; background:var(--surface); border:1px solid var(--pos); font-size:14px}
.lockbar svg{width:18px; height:18px; color:var(--pos); flex:none}
.lockbar div{flex:1 1 220px}
.is-locked input:disabled,.is-locked select:disabled,.is-locked textarea:disabled,main.ro input:disabled,main.ro select:disabled,main.ro textarea:disabled{background:var(--surface-2); color:var(--muted); border-style:dashed}
.is-locked .seg button:disabled,.is-locked .btn:disabled,.is-locked .icon-btn:disabled,.is-locked .chip:disabled{opacity:.55; cursor:not-allowed}
.grid{display:grid; gap:12px 14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.field{display:grid; gap:5px; min-width:0; align-content:start}
.field label,.lbl{font-size:13.5px; font-weight:500; color:var(--ink)}
.opt{color:var(--muted); font-weight:400}
.ctl{position:relative; min-width:0}
.field>*,.ts-ctl .dt>*{min-width:0}
.ctl input,.ctl select,.field textarea{width:100%; min-height:48px; padding:10px 12px; border-radius:8px; border:1px solid var(--line-strong); background:var(--input); font-size:16px}
.field textarea{min-height:88px; resize:vertical; line-height:1.45}
.ctl.has-unit input{padding-right:52px}
.ctl .unit{position:absolute; right:12px; top:24px; transform:translateY(-50%); font-family:var(--mono); font-size:13px; color:var(--muted); pointer-events:none}
.ctl input.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.ctl input:focus,.ctl select:focus,.field textarea:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.ctl input.miss,.ctl select.miss{border-color:var(--neg); background:color-mix(in srgb,var(--neg-bg) 60%,var(--input))}
.ctl input.bad{border-color:var(--crit); background:color-mix(in srgb,var(--crit-bg) 60%,var(--input))}
.hint{margin:0; font-size:12.5px; color:var(--muted)}
.pv{margin:0; font-size:12px; color:var(--muted); font-family:var(--mono)}
.pv:empty{display:none}
.pv.err{color:var(--crit); font-family:var(--sans); font-weight:500}
.pv .w{display:block; color:var(--neg); font-family:var(--sans); font-weight:500}
.out{display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-height:48px; padding:10px 12px; border-radius:8px; background:var(--surface-2); border:1px dashed var(--line-strong); flex-wrap:wrap}
.out .v{font-family:var(--mono); font-weight:600; font-size:16px}
.out .s{font-size:12.5px; color:var(--muted)}
.seg{display:inline-flex; flex-wrap:wrap; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; background:var(--input); width:auto; max-width:100%; min-width:0}
.seg button{min-height:46px; min-width:56px; padding:0 14px; border:0; border-right:1px solid var(--line); background:transparent; font-size:14.5px; font-weight:500; cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.seg.sm button{min-width:44px; padding:0 10px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 16px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font-family:var(--mono); font-weight:600; font-size:14px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--tint); border-color:var(--accent); color:var(--accent-strong)}
.chip .box{width:16px; height:16px; border-radius:4px; border:1.5px solid currentColor; display:grid; place-items:center}
.chip[aria-pressed="true"] .box::after{content:""; width:8px; height:8px; border-radius:2px; background:currentColor}
.btn.add{justify-self:start; border-style:dashed; color:var(--accent-strong); border-color:var(--accent); background:transparent}
.icon-btn{width:44px; height:44px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:var(--surface); cursor:pointer; color:var(--muted); flex:none}
.icon-btn svg{width:18px; height:18px}
.icon-btn:hover{color:var(--crit); border-color:var(--crit)}
.tick{display:flex; gap:10px; align-items:center; min-height:44px; font-size:14px; cursor:pointer}
.tick input{width:22px; height:22px; margin:0; accent-color:var(--accent)}
.tanks{display:grid; gap:8px}
.tank{border:1px solid var(--line); border-radius:10px; background:var(--surface-2); overflow:hidden}
.tank.open{border-color:var(--line-strong)}
.tank-sum{display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:8px 12px; background:transparent; border:0; text-align:left; cursor:pointer}
.tank-sum svg{width:18px; height:18px; flex:none; color:var(--muted); transition:transform .15s}
.tank.open .tank-sum svg{transform:rotate(180deg)}
.tsum{flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 12px; align-items:center}
.tsum .tn{font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tsum .tv{font-family:var(--mono); font-size:13px; color:var(--muted); text-align:right}
.tsum .tm{font-family:var(--mono); font-size:14px; font-weight:600; text-align:right; min-width:86px}
.tank-body{padding:12px; display:grid; gap:12px; border-top:1px solid var(--line)}
.tank-top{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap}
.tank-top .grow{flex:1 1 180px}
.calc4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.calc4 div{background:var(--surface); padding:8px 10px; display:grid; gap:1px; min-width:0}
.calc4 span{font-size:11.5px; color:var(--muted)}
.calc4 b{font-family:var(--mono); font-weight:600; font-size:15px; overflow-wrap:anywhere}
.calc4 div.mt{background:var(--tint)}
.calc4 div.mt b{color:var(--accent-strong)}
.calc-wait{font-size:13px; color:var(--muted); padding:8px 10px; border:1px dashed var(--line-strong); border-radius:8px}
@media (max-width:420px){ .calc4{grid-template-columns:repeat(2,minmax(0,1fr))} .tsum{grid-template-columns:minmax(0,1fr) auto} .tsum .tv{grid-column:1; grid-row:2; text-align:left} .tsum .tm{grid-row:1 / span 2; grid-column:2} }
.empty{margin:0; color:var(--muted); font-size:14px}
.subtot{font-family:var(--mono); font-weight:600; font-size:15px}
.subtot small{font-family:var(--sans); font-weight:400; color:var(--muted); font-size:12.5px; margin-right:6px}
.tb{font-family:var(--mono); font-size:11.5px; border-radius:999px; padding:1px 7px}
.tb.warn{background:var(--neg-bg); color:var(--neg)} .tb.ok{background:var(--pos-bg); color:var(--pos)}
.srow{display:flex; gap:10px; align-items:flex-start; padding:10px; border:1px dashed var(--line-strong); border-radius:9px; background:var(--surface)}
.srow>.grid{flex:1; min-width:0}
.samp{display:grid; gap:10px; padding-top:10px; border-top:1px dashed var(--line-strong)}
.fnote{margin:0; font-size:12px; color:var(--muted); padding:0 2px}
.deliv{border:1px solid var(--line); border-radius:10px; padding:12px; display:grid; gap:12px; background:var(--surface-2)}
.dtab{width:100%; border-collapse:collapse; font-size:13.5px}
.dtab th{font-size:12px; font-weight:500; color:var(--muted); text-align:left; padding:4px 6px; border-bottom:1px solid var(--line); white-space:normal}
.dtab td{padding:6px; border-bottom:1px solid var(--line); vertical-align:top}
.dtab td.n,.dtab th.n{text-align:right; font-family:var(--mono); white-space:nowrap}
.dtab tfoot td{font-weight:600; border-bottom:0}
.cmp{display:grid; grid-template-columns:1fr auto; gap:6px 14px; padding:12px 14px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); font-size:14px}
.cmp .v{font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums}
.cmp .d{font-weight:600}
.pos{color:var(--pos)} .neg{color:var(--neg)} .crit{color:var(--crit)}
.confirm{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer}
.confirm input{width:24px; height:24px; margin:0; flex:none; accent-color:var(--pos)}
.confirm.on{background:var(--pos-bg); border-color:color-mix(in srgb,var(--pos) 40%,transparent)}
.sigs{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.sig{display:grid; gap:6px; align-content:start}
.sig-h{display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap}
.sig-h .who{font-size:13px; color:var(--muted)}
.sig canvas{width:100%; height:150px; border-radius:10px; border:1.5px dashed var(--line-strong); background:var(--pad); touch-action:none; cursor:crosshair; display:block}
.sig.signed canvas{border-style:solid; border-color:var(--pos)}
.sig.receipt canvas{border-color:var(--neg)}
.sig.locked canvas{opacity:.45; cursor:not-allowed}
.sig-f{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.sig.signed .sig-f span{color:var(--pos); font-weight:500}
.sig.receipt .sig-f span{color:var(--neg)}
.sig.vno{padding:12px; border-radius:10px; border:1px solid color-mix(in srgb,var(--crit) 40%,transparent); background:var(--crit-bg)}
.vbtns{display:flex; flex-wrap:wrap; gap:8px}
.res{display:grid; gap:12px}
.big{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.big div{background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:10px 12px; display:grid; gap:2px}
.big span{font-size:12px; color:var(--muted)}
.big b{font-family:var(--mono); font-size:20px; font-weight:600}
.formula{margin:0; font-family:var(--mono); font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.ts{display:grid; gap:0}
.ts-row{display:grid; grid-template-columns:34px minmax(0,1fr); gap:4px 12px; padding:8px 0; align-items:start; border-radius:10px}
.ts-row .drag{width:34px; height:44px; border:0; background:transparent; color:var(--muted); cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none; font-size:18px; letter-spacing:-3px; border-radius:8px; padding:0}
.ts-row .drag:hover{background:var(--surface-2); color:var(--ink)}
.ts-row.dragging{background:var(--surface); box-shadow:0 12px 32px rgba(10,26,51,.28); padding:8px 6px; cursor:grabbing}
.ts-ph{border:2px dashed var(--accent); border-radius:10px; background:var(--tint)}
.ts-main{display:grid; gap:6px; min-width:0}
.ts-head{display:flex; align-items:center; gap:6px; min-width:0}
.ts-head .ts-lbl{flex:1; min-width:0}
.ts-lbl{font-size:14.5px; font-weight:500}
.ts-lbl.key::after{content:" · key"; font-family:var(--mono); font-size:11px; color:var(--accent-strong); letter-spacing:.04em}
.ts-row.set .ts-lbl{color:var(--ink)}
.ts-ctl{display:flex; gap:12px 14px; align-items:center; flex-wrap:wrap}
.ts-ctl .dt{flex:1 1 280px; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px 14px}
.ts-ctl input{min-height:46px; padding:8px 10px; border-radius:8px; border:1px solid var(--line-strong); background:var(--input); font-family:var(--mono); font-size:16px}
input[type=date],input[type=time]{display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none; text-align:left}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}
.ts-ctl .lt{font-family:var(--mono); font-size:12px; color:var(--muted)}
.mini{width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; font-size:15px}
.mini:hover{border-color:var(--accent); color:var(--ink)}
.mini:disabled{opacity:.35; cursor:default}
.mini.del:hover{border-color:var(--crit); color:var(--crit)}
.addev{display:grid; gap:10px; padding:12px; border:1px dashed var(--accent); border-radius:10px; background:var(--surface-2)}
.ts-warn{font-size:12.5px; color:var(--neg)}
.ts-warn .btn{margin-left:8px; min-height:34px}
.ts-warn:empty{display:none}
.ph-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
.ph{position:relative; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--surface-2)}
.ph img{display:block; width:100%; aspect-ratio:1; object-fit:cover; max-width:100%}
.ph .ph-none{aspect-ratio:1; display:grid; place-items:center; text-align:center; padding:8px; font-size:12px; color:var(--muted)}
.ph figcaption{font-family:var(--mono); font-size:11px; color:var(--muted); padding:5px 7px}
.ph .fst.uploaded{color:var(--pos)} .ph .fst.error{color:var(--neg)}
.ph button{position:absolute; top:6px; right:6px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(10,26,51,.72); color:#fff; display:grid; place-items:center; cursor:pointer}
.ph button svg{width:14px; height:14px}
.file-btn{position:relative; overflow:hidden}
.file-btn input{position:absolute; inset:0; opacity:0; cursor:pointer; font-size:0}
.issues{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.issues li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; background:var(--neg-bg); font-size:14px}
.issues li .btn{flex:none; white-space:nowrap}
.issues li .st{font-family:var(--mono); font-size:11.5px; color:var(--neg); margin-right:6px}
.flags{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.flags li{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); font-size:14px}
.flags li .pill{flex:none}
.foot{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom,0px)}
.foot-in{max-width:1180px; margin:0 auto; padding-block:10px; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); display:flex; align-items:center; justify-content:space-between; gap:12px}
.foot .where{font-size:13px; color:var(--muted); text-align:center; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.foot .where b{color:var(--ink); font-weight:600}

/* modal + toast */
.modal{position:fixed; inset:0; z-index:70; background:rgba(5,12,24,.55); display:grid; place-items:center; padding:16px}
.modal-c{background:var(--surface); border-radius:14px; max-width:480px; width:100%; max-height:calc(100vh - 32px); overflow:auto; padding:22px; display:grid; gap:12px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal-c h3{margin:0; font-size:19px}
.modal-c p{margin:0; color:var(--muted)}
#mBtns{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(92px + env(safe-area-inset-bottom,0px)); z-index:80; background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:9px; font-size:14px; max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){ .step-anim{animation:fade .18s ease-out} @keyframes fade{from{opacity:.4; transform:translateY(4px)} to{opacity:1; transform:none}} }
.is-demo .net{margin-right:30px}