/* H QUIK Business Manager (web) — styles ported from the H QUIK app v1.3 */
:root{--b:#03387a;--bg:#f2f5fa;--c:#fff;--t:#14213d;--m:#667}
html[data-theme=dark]{--bg:#0e1522;--c:#182235;--t:#e8eefc;--m:#9ab;--b:#4a86e8}
*{box-sizing:border-box}body{margin:0;font:15px system-ui,Arial;background:var(--bg);color:var(--t);padding-bottom:75px}
#ah{background:#03387a;color:#fff;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5}
#ah img{width:40px;height:40px;border-radius:50%}#ah b{font-size:17px}#ah small{display:block;opacity:.8;font-size:11px}
main{padding:12px}h4{margin:14px 0 6px}
.card{background:var(--c);border-radius:12px;padding:12px;margin:0 0 8px;box-shadow:0 1px 3px #0002}
.g{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.k{background:var(--c);border-radius:12px;padding:10px;border-left:4px solid var(--b)}.k b{display:block;font-size:17px}small,.k small{color:var(--m)}
button{background:var(--b);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-size:14px;margin:2px 0}
button.s{background:#e3e9f4;color:#03387a}
input,select{width:100%;padding:10px;border:1px solid #9ab5;border-radius:8px;font-size:15px;background:var(--c);color:var(--t)}
label{font-size:12px;color:var(--m);display:block;margin:8px 0 2px}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--c);border-top:1px solid #9ab4;padding-bottom:env(safe-area-inset-bottom);z-index:6}
nav a{flex:1;text-align:center;padding:7px 0;font-size:11px;color:var(--m)}nav a.on{color:var(--b);font-weight:700}nav a i{display:block;font-size:20px;font-style:normal}
.h{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px;gap:6px}.h h3{margin:0}
.r{display:flex;justify-content:space-between;gap:8px}.pos{color:#0a7d33}.neg{color:#c0262d}
#m{position:fixed;inset:0;background:#0008;display:none;align-items:flex-end;z-index:9}#m>div{background:var(--bg);width:100%;max-height:92vh;overflow:auto;border-radius:16px 16px 0 0;padding:14px}
#inv{background:#fff;color:#000;padding:12px;border:1px solid #ccc;font-size:12px;overflow:auto}
#inv table{width:100%;border-collapse:collapse;margin:8px 0}#inv td,#inv th{border:1px solid #999;padding:4px;text-align:right}#inv td:first-child,#inv th:first-child{text-align:left}
.ir{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4px;margin-bottom:6px}.ir select:first-child{grid-column:1/-1}
#lk{position:fixed;inset:0;background:var(--bg);z-index:99;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes pulse{50%{transform:scale(1.07)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
main>*{animation:up .4s both}.tile{display:flex;gap:14px;align-items:center;animation-delay:calc(var(--i)*70ms);transition:transform .15s}.tile:active,button:active{transform:scale(.96)}.ic{font-size:28px;background:#4a86e822;border-radius:14px;padding:10px}
.lg{animation:pulse 2.2s infinite}.sh{animation:shake .3s}summary{cursor:pointer}.pk ul{padding-left:18px;margin:4px 0}.old{text-decoration:line-through;color:var(--m);font-size:13px}.hero{padding:4px 2px 12px}
a.b{display:inline-block;background:var(--b);color:#fff;padding:9px 14px;border-radius:8px;text-decoration:none;margin:2px}
@media print{#ah,nav,.np{display:none!important}body{padding:0;background:#fff}main{padding:0}#inv{border:0}}

body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding-bottom:92px}
#ah{background:linear-gradient(135deg,#02275a,#0b63c9);box-shadow:0 4px 16px #03387a55}#ah img{border:2px solid #fff6}
.card{border-radius:16px;box-shadow:0 2px 10px #0a1f4414;border:1px solid #9ab3}
.tile .ic{background:linear-gradient(135deg,#0b63c9,#4a86e8);color:#fff;border-radius:14px;width:52px;height:52px;display:grid;place-items:center;font-size:24px;padding:0;box-shadow:0 4px 10px #0b63c944;filter:hue-rotate(calc(var(--i)*32deg))}
button,.bt{border-radius:10px;background:linear-gradient(135deg,#03387a,#0b63c9);box-shadow:0 2px 6px #03387a33;transition:.15s}button.s{background:#e3e9f4;box-shadow:none}
.bt{display:inline-block;color:#fff;padding:10px 14px;margin:2px;font-size:14px}.lbb{display:flex;gap:6px;flex-wrap:wrap}
nav{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));border-radius:20px;box-shadow:0 6px 24px #0004;border:0;padding:2px 0}
nav a{border-radius:16px;transition:.2s}nav a.on{background:#4a86e822}
.hero2{background:linear-gradient(135deg,#03387a,#0b63c9);color:#fff;border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:0 6px 18px #03387a44}.hero2 h2{margin:2px 0}.hero2 small{color:#fffc;display:block}
.bb{background:#dcf8c6;color:#000;border-radius:14px 14px 2px 14px;padding:8px 12px;margin:6px 0 6px auto;max-width:85%;width:fit-content}.bo{background:var(--c);color:var(--t);border-radius:14px 14px 14px 2px;padding:8px 12px;margin:6px auto 6px 0;max-width:85%;width:fit-content;box-shadow:0 1px 3px #0002}
.ch{display:inline-block;background:#e3e9f4;color:#03387a;border-radius:20px;padding:6px 12px;margin:3px;font-size:13px}textarea{width:100%;padding:10px;border:1px solid #9ab5;border-radius:10px;font:15px system-ui;background:var(--c);color:var(--t);height:80px}
.cim{width:100%;border:1px solid #9ab;margin-top:6px;border-radius:6px;background:#fff}
#ts{position:fixed;top:72px;left:50%;transform:translateX(-50%);background:#0a7d33;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;z-index:200;opacity:0;transition:.3s;pointer-events:none}#ts.on{opacity:1}
#lk{overflow:auto;justify-content:flex-start;padding:max(28px,env(safe-area-inset-top)) 20px 0;background:linear-gradient(160deg,#02275a,#0b63c9 55%,#1d7ae0);color:#fff}
#lk>*{animation:up .5s both}#lk .lt{animation:pop .8s cubic-bezier(.2,1.4,.4,1) both}@keyframes pop{from{opacity:0;transform:scale(.4) rotate(-10deg)}}
#lk input{max-width:320px;width:100%;background:#ffffff1f;border:1px solid #fff4;color:#fff;text-align:center;font-size:18px;border-radius:12px;margin-top:8px}#lk input::placeholder{color:#fffa;font-size:14px;letter-spacing:0}
#lk input[type=password]{letter-spacing:6px}#lk .neg{color:#ffd0d0}#lk .al{color:#fff;text-decoration:underline}
.ph{display:flex;align-items:center;gap:8px;width:100%;max-width:320px;background:#ffffff1f;border:1px solid #fff4;border-radius:12px;padding:0 12px;margin-top:8px}.ph input{border:0;background:none;margin:0;text-align:left;letter-spacing:2px}.ph svg{border-radius:3px;flex:none}
.fo{outline:2px solid #ffd54a}#lk .go,#lk .lb{width:100%;max-width:320px;margin-top:12px;background:#fff;color:#03387a;font-weight:700;padding:13px;font-size:16px}
.kp{position:sticky;bottom:0;display:none;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:340px;padding:10px 0 calc(10px + env(safe-area-inset-bottom));background:#02275a;margin-top:auto}.kp button{background:#ffffff1f;box-shadow:none;font-size:22px;padding:14px;border-radius:14px}.kp button:active{background:#fff5;transform:scale(.88)}
#pr{display:none}@media print{body.pc>*:not(#pr){display:none!important}body.pc #pr{display:block}.pi{page:lbl;display:block;width:100mm;height:150mm;object-fit:contain;page-break-after:always}}@page lbl{size:100mm 150mm;margin:0}

:root{--line:#e6ebf4;--bg:#f1f4fa}html[data-theme=dark]{--line:#26344e;--bg:#0e1522}
body{letter-spacing:.005em}main{padding:14px}
#ah{display:block;padding:0;gap:0;background:linear-gradient(135deg,#021f4d,#0a4aa8 60%,#1a6fe8)}#ah.hm{position:relative;border-radius:0 0 28px 28px;margin-bottom:2px}
.ht{display:flex;align-items:center;gap:12px;padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top))}.hl{width:44px;height:44px;border-radius:50%;border:2px solid #fff6;background:#fff;object-fit:cover;flex:none}
.hg{flex:1;min-width:0}.hg small{display:block;opacity:.8;font-size:12px}.hg b{font-size:18px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hg span{font-size:12px;opacity:.85;display:block}
.ha{display:flex;gap:6px}.ib{width:38px;height:38px;border-radius:12px;background:#ffffff22;border:1px solid #ffffff26;display:grid;place-items:center;padding:0;margin:0;box-shadow:none;color:#fff}
.hd{padding:0 16px 6px;font-size:12px;opacity:.85}.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 14px 20px}.chp{background:#ffffff1c;border:1px solid #ffffff2e;border-radius:14px;padding:10px}.chp b{display:block;font-size:17px}.chp small{font-size:11px;opacity:.85}
.ecc{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#0a4aa8,#1a6fe8);color:#fff;border-radius:20px;padding:18px;box-shadow:0 10px 26px #0a4aa855;margin:4px 0 6px;position:relative;overflow:hidden;animation:up .5s both}.ecc:before{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:#ffffff14}
.eci{width:54px;height:54px;border-radius:16px;background:#ffffff26;display:grid;place-items:center;flex:none}.ecc b{font-size:17px;display:block}.ecc small{opacity:.85;font-size:12px}.ecb{margin-left:auto;background:#fff;color:#0a4aa8;border-radius:12px;padding:8px 10px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:2px;position:relative;flex:none}
.sh2{display:flex;align-items:center;gap:8px;margin:20px 2px 10px}.sh2 i{width:4px;height:18px;border-radius:2px}.sh2 b{font-size:16px}.sh2 u{flex:1;height:1px;background:var(--line)}
.tg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tl{display:flex;align-items:center;gap:11px;background:var(--c);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 1px 2px #0a1f4408,0 4px 14px #0a1f440a;transition:.15s;min-width:0;animation:up .45s both}.tl:active{transform:scale(.97)}.tl.w{grid-column:1/-1}
.ti{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--k);background:color-mix(in srgb,var(--k) 13%,var(--c))}.tl b{display:block;font-size:14.5px}.tl small{color:var(--m);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tl>div{min-width:0;flex:1}.ch2{color:var(--m);display:grid}
.card{padding:14px;margin-bottom:10px;border:1px solid var(--line);box-shadow:0 1px 2px #0a1f4408,0 4px 14px #0a1f440a}.k{border-radius:14px;border:1px solid var(--line);border-left:4px solid var(--b);box-shadow:0 1px 2px #0a1f4408}
.sc{display:flex;align-items:center;gap:12px}.av{width:48px;height:48px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#0a4aa8,#1a6fe8);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}.av.xl{width:72px;height:72px;font-size:28px}.g1{flex:1;min-width:0}.g1 small{display:block}.rt{text-align:right}.rt small{display:block}
.h2{display:flex;justify-content:space-between;align-items:center;margin:2px 0 12px;gap:8px}.h2 h3{margin:0;font-size:20px}.h2 button,.ab button,.go2{display:inline-flex;align-items:center;justify-content:center;gap:6px}.h2 small{display:block}
.st3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.s3{background:var(--c);border:1px solid var(--line);border-radius:14px;padding:10px}.s3 small{display:block;font-size:11px}.s3 b{font-size:16px}
.row{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid var(--line)}.row:last-child{border:0}.row small{display:block}
.ab{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.ab button{flex:1;min-width:120px;padding:11px}.pf{display:flex;gap:14px;align-items:center}.pf h3{margin:0}
.em{text-align:center;padding:36px 12px;color:var(--m)}.em small{display:block;margin-top:4px}.bdg{font-size:11px;padding:2px 8px;border-radius:20px;background:#e8f0fe;color:#0b57d0;font-weight:600}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#f97316)}.dng{color:#c0262d!important}
.pu{display:flex;align-items:center;gap:10px}.pu img{width:64px;height:64px;border-radius:14px;object-fit:cover}.pu img[hidden]{display:none}
.sb{display:flex;align-items:center;gap:8px;background:var(--c);border:1px solid var(--line);border-radius:14px;padding:0 12px;margin-bottom:12px;color:var(--m)}.sb input{border:0!important;outline:0;background:none;padding:13px 0;font-size:16px}
input,select,textarea{border:1.5px solid var(--line)!important;border-radius:12px}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--b)!important;box-shadow:0 0 0 3px #1a6fe826}
#m>div{border-radius:22px 22px 0 0;padding:18px;box-shadow:0 -10px 40px #0004}#m>div:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#9ab6;margin:-6px auto 12px}
nav a{font-size:11px;padding:8px 0}nav a svg{display:block;margin:0 auto 3px}nav a.on{color:var(--b);font-weight:700;background:#1a6fe81a}
.lbb .bt{display:inline-flex;align-items:center;gap:6px}.i{flex:none}

/* ===== v1.3 pro theme ===== */
:root{--sh:0 1px 2px #0a1f440a,0 10px 30px #0a1f4414}
body{background:var(--bg)}
#ah.hm{border-radius:0 0 34px 34px;padding-bottom:30px;background:radial-gradient(90% 120% at 105% -10%,#2b86ff99,transparent 60%),linear-gradient(135deg,#021a44,#0a3f94)}
#ah.hm .hl{width:46px;height:46px;border:2px solid #ffffff55}
.hsr{margin:10px 14px 0;display:flex;align-items:center;gap:10px;background:#ffffff1c;border:1px solid #ffffff33;border-radius:14px;padding:12px 14px;color:#ffffffd0;font-size:14px;cursor:pointer}
.hsr span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum{margin:-26px 0 6px;position:relative;z-index:6;display:grid;grid-template-columns:repeat(4,1fr);background:var(--c);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:14px 4px}
.sum div{text-align:center;padding:0 3px;border-right:1px solid var(--line);min-width:0}.sum div:last-child{border:0}
.sum b{display:block;font-size:14.5px;white-space:nowrap}.sum small{font-size:10.5px;display:block;margin-top:2px}
.qa{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:14px 0 4px}
.qb{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:600;text-align:center;transition:.15s}.qb:active{transform:scale(.94)}
.qb span{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--k),color-mix(in srgb,var(--k) 62%,#fff));box-shadow:0 6px 14px color-mix(in srgb,var(--k) 35%,transparent)}
.sh2{margin:22px 2px 10px}.sh2 i{display:none}.sh2 b{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--m);font-weight:700}
.ecc{background:linear-gradient(120deg,#0a2a6b,#1a6fe8);border-radius:22px;padding:16px 18px;margin:16px 0 4px}
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mc{background:var(--c);border:1px solid var(--line);border-radius:18px;padding:14px 12px;box-shadow:var(--sh);position:relative;overflow:hidden;min-width:0;animation:up .45s both;transition:.15s}.mc:active{transform:scale(.97)}
.mc:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--k)}
.mc .ti{width:40px;height:40px;margin-bottom:10px}.mc small{display:block;font-size:11.5px;font-weight:600}.mc b{display:block;font-size:20px;margin:2px 0}.mc em{font-style:normal;font-size:11px;color:var(--m);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw{background:var(--c);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--sh)}
.cw .r b{font-size:20px}.chr{display:flex;gap:9px;height:104px;margin-top:12px}.bc{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}.bw{flex:1;width:100%;display:flex;align-items:flex-end}.bw i{width:100%;border-radius:9px 9px 4px 4px;background:var(--line)}.bw i.on{background:linear-gradient(180deg,#1a6fe8,#0a4aa8)}.bc small{font-size:10.5px}
.card,.tl,.s3{border-radius:18px}.tl{padding:14px;box-shadow:var(--sh)}.ti{border-radius:14px}
.av{box-shadow:0 0 0 3px color-mix(in srgb,var(--b) 18%,transparent)}
.h2 h3{font-size:22px;letter-spacing:-.01em}
nav{background:color-mix(in srgb,var(--c) 90%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:24px;padding:4px}
nav a.on{background:color-mix(in srgb,var(--b) 14%,transparent);border-radius:18px}
html[data-theme=dark] .sum,html[data-theme=dark] .mc,html[data-theme=dark] .cw,html[data-theme=dark] .tl{box-shadow:none}html[data-theme=dark] .hsr{background:#ffffff14}

/* ===== web port: site theme + layout ===== */
html[data-theme=dark]{--bg:#0E1D3A;--c:#1A2A47;--t:#F7FBFF;--m:#a9b8d3;--b:#90B1DE;--line:rgba(150,175,215,.22)}
html[data-theme=light]{--bg:#F3F6FB;--c:#FFFFFF;--t:#101C34;--m:#5b6680;--b:#1d46a8;--line:#e3e9f2}
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden;min-height:100vh}
#ah,#ah.hm{background:radial-gradient(90% 120% at 105% -10%,#90b1de55,transparent 60%),linear-gradient(135deg,#0A1428,#13233F 50%,#46628d)}
.ecc{background:linear-gradient(120deg,#13233F,#5574A2)}
html[data-theme=dark] button.s,html[data-theme=dark] .ch{background:#ffffff14;color:#D9E4F8}
html[data-theme=dark] .bdg{background:#5574A233;color:#D9E4F8}
html[data-theme=dark] #m>div{background:#13233F}
input,select,textarea{font-size:16px}
.csvg{display:flex;flex-wrap:wrap;gap:6px}.csvg button{margin:0}
.sitebar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--c);border-bottom:1px solid var(--line);font-size:14px}
.sitebar .sb-logo{display:flex;align-items:center;flex:none}.sitebar .sb-logo img{height:30px;width:auto;display:block}
.sitebar .sb-logo .logo-d{display:none}html[data-theme=dark] .sitebar .sb-logo .logo-l{display:none}html[data-theme=dark] .sitebar .sb-logo .logo-d{display:block}
.sitebar .t-nav{display:flex;align-items:center;gap:4px;margin-left:auto;min-width:0}
.sitebar .t-nav a{color:var(--t);text-decoration:none;padding:8px 8px;border-radius:8px;font-weight:600;white-space:nowrap}.sitebar .t-nav a:hover{background:color-mix(in srgb,var(--b) 12%,transparent)}
.sitebar .hq-logout{background:var(--c)!important;color:var(--t)!important}
#lk{z-index:60}
@media(min-width:900px){
 main{max-width:860px;margin:0 auto;padding:20px 20px}
 #ah .ht,#ah .hsr{max-width:860px;margin-left:auto;margin-right:auto}#ah .hsr{margin-top:10px}
 nav{max-width:600px;margin:0 auto}
 #m{align-items:center}#m>div{max-width:560px;border-radius:22px;max-height:88vh}
 .tg{grid-template-columns:repeat(3,1fr)}.mg{grid-template-columns:repeat(3,1fr)}
 .sum{margin-top:-26px}
 #lk input,.ph,#lk .go,#lk .lb{max-width:380px}
}
@media(max-width:400px){.sitebar .t-nav a.sb-hide{display:none}}
@media print{.sitebar{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.lrg{display:grid;grid-template-columns:1fr 1.4fr 64px;gap:6px;margin:8px 0 4px}.lrg input,.lrg select{padding:9px;min-width:0}.lrd{opacity:.55}
#lk{background:radial-gradient(90% 60% at 100% 0,#90b1de44,transparent 60%),linear-gradient(160deg,#0A1428,#13233F 55%,#46628d)}#lk .go,#lk .lb{color:#0E1D3A}
#lk .ph input{border:0!important;background:none!important;box-shadow:none!important}