:root{--bg:#f6f4ef;--card:#fff;--tx:#1a1d23;--mu:#6b7280;--bd:#e5e1d8;--ac:#FF6B00;--sb:#16181d;--ok:#15803d;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101216;--card:#1a1d23;--tx:#eceef2;--mu:#9aa1ad;--bd:#2b3038;--sb:#0b0c0f}}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--tx);font:14px/1.4 'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif}
.top{background:var(--sb);color:#fff;position:sticky;top:0;z-index:5;padding:10px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.logo{background:var(--ac);color:#000;font-weight:800;width:32px;height:32px;border-radius:9px;display:grid;place-items:center}
.steps{display:flex;gap:4px;overflow-x:auto;flex:1}
.steps button{border:0;background:transparent;color:#ffffffa6;padding:8px 12px;border-radius:10px;cursor:pointer;white-space:nowrap;font:600 13px inherit}
.steps button.on{background:var(--ac);color:#000}
.steps b{opacity:.6;margin-right:6px}
select,input{font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:7px 9px;min-width:0}
.top select{background:#ffffff14;color:#fff;border-color:#ffffff30}
main{max-width:1100px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:14px}
h2{margin:0 0 4px;font-size:20px}h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
p.s{margin:0 0 14px;color:var(--mu)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.row>label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--mu);font-weight:600}
.row input,.row select{width:110px}.row .w{width:180px}
.btn{border:0;background:var(--ac);color:#000;font:700 13px inherit;padding:9px 16px;border-radius:10px;cursor:pointer}
.btn.g{background:var(--bg);color:var(--tx);border:1px solid var(--bd)}.btn.x{padding:4px 9px;background:transparent;color:var(--mu)}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--mu);font-size:11px;text-transform:uppercase;padding:6px 8px;border-bottom:1px solid var(--bd)}
td{padding:6px 8px;border-bottom:1px solid var(--bd)}td.n,th.n{text-align:right}
td select{max-width:190px}.pill{padding:2px 9px;border-radius:99px;background:var(--bg);border:1px solid var(--bd);font-size:11px;font-weight:700}
.pill.ok{color:var(--ok);border-color:var(--ok)}
.kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.kp div{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px}.kp small{color:var(--mu);display:block;font-size:11px}.kp b{font-size:20px}
.warn{background:#fff3e6;color:#8a4300;border:1px solid #ffd3a6;border-radius:10px;padding:10px 12px;margin-bottom:14px}
svg{width:100%;height:auto;border:1px solid var(--bd);border-radius:8px;background:var(--bg)}
.tot td{font-weight:700}.big td{font-size:17px;color:var(--ac)}
.lb{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}.lb>div{border:1px dashed var(--mu);border-radius:8px;padding:8px 10px;font-size:12px;break-inside:avoid}.lb b{font:700 17px ui-monospace,monospace;display:block}.mono{font-family:ui-monospace,monospace;white-space:nowrap}
@media print{body[data-p=labels] .cl{display:none}body[data-p=list] .lbc{display:none}.top,.noprint{display:none!important}body{background:#fff;color:#000}.card{border:0}}
/* ---- login, account bar, sync banner ---- */
.lgbody{display:grid;place-items:center;min-height:100vh;padding:16px}
.lgbox{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:26px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px #0000001a}
.lgbox label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mu);font-weight:600}
.lgbox input{width:100%;font-size:15px;padding:10px 11px}
.lgbox h2{margin:4px 0 0}.lgbox .s{margin:0}.lgbox .btn{padding:11px 16px;font-size:14px;margin-top:4px}
.lghead{display:flex;gap:10px;align-items:center;font-size:18px}
.who{display:flex;gap:10px;align-items:center;color:#ffffffc0;font-size:12px;white-space:nowrap}
.who a{color:#fff;text-decoration:underline}
.sv{color:#9be29b}.sv.bad{color:#ffb4a8}
.stale{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#7f1d1d;color:#fff;padding:12px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
@media print{.who,.stale{display:none!important}}

/* ---- quotation format ---- */
.qt{background:#fff;color:#1a1d23;border:1px solid var(--bd);border-radius:14px;padding:28px 30px;margin:0 auto 14px;max-width:900px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.qt small{display:block;color:#6b7280;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.qh{display:flex;gap:18px;align-items:flex-start;border-bottom:3px solid var(--ac);padding-bottom:16px}
.qh img{max-width:170px;max-height:80px;object-fit:contain}
.qlg{width:64px;height:64px;flex:none;border-radius:12px;background:var(--ac);color:#fff;display:grid;place-items:center;font:800 30px sans-serif}
.qco{flex:1;display:flex;flex-direction:column;gap:2px;font-size:12px;color:#374151}.qco>b{font-size:19px;color:#111}.qco i{color:#6b7280}
.qtt{font:800 22px sans-serif;letter-spacing:.12em;color:var(--ac);align-self:center}
.qm{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;margin:16px 0 6px;font-size:13px}
.qm>div:first-child{display:flex;flex-direction:column;gap:2px;background:#fff7f0;border-left:3px solid var(--ac);padding:10px 14px;border-radius:6px;min-width:240px}
.qm>div:first-child b{font-size:15px}
.qmk{display:grid;grid-template-columns:repeat(2,auto);gap:8px 22px;align-content:start}.qmk b{font-size:13px}
.qt h4{margin:18px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#9a3412}
.qt table{width:100%;border-collapse:collapse;font-size:12.5px}.qt th{background:#1a1d23;color:#fff;padding:7px 8px;font-size:10.5px;border:0}
.qt td{padding:7px 8px;border-bottom:1px solid #ece8e1;vertical-align:top}.qt td small{text-transform:none;letter-spacing:0;font-weight:400;font-size:11px}
.qt tr:nth-child(even) td{background:#faf8f5}.qi td:first-child,.qs td:first-child{width:28px;color:#6b7280}
.qb{display:flex;gap:18px;justify-content:space-between;margin-top:14px;flex-wrap:wrap}
.qw{flex:1 1 280px;display:flex;flex-direction:column;gap:3px;font-size:12.5px}.qw b{font-size:13px}
.qt .qx{flex:0 1 330px;width:auto}.qx td{background:#fff!important;color:#374151}
.qt .qg td{background:var(--ac)!important;color:#fff;font-weight:800;font-size:15px}
.qf{display:flex;gap:24px;justify-content:space-between;margin-top:20px;flex-wrap:wrap;font-size:11.5px}
.qf>div:first-child{flex:1 1 360px}.qf ol{margin:6px 0 0;padding-left:18px;color:#374151}.qf li{margin-bottom:2px}
.qsg{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:200px;text-align:center;gap:2px}
.qsg img{max-width:170px;max-height:70px;object-fit:contain}.qsg span{border-top:1px solid #9ca3af;padding-top:4px;width:100%}
.qn{margin:18px 0 0;font-size:10.5px;color:#9ca3af;text-align:center}
.qlp{width:170px;height:70px;border:1px dashed var(--bd);border-radius:8px;display:grid;place-items:center;font-size:11px;color:#6b7280;background:#fff;overflow:hidden}.qlp img{max-width:100%;max-height:100%;object-fit:contain}
@media print{.qt{border:0;padding:0;max-width:none;border-radius:0}@page{size:A4;margin:12mm}.qt tr,.qf,.qb{break-inside:avoid}}
@media(max-width:640px){.qt{padding:16px}.qh{flex-wrap:wrap}.qtt{width:100%}}