/* One look for the whole product: warm cream, soft white cards, yellow accent (like the reference design). */
:root{--bg:#fbf7ee;--card:#fff;--ink:#1f1b13;--mute:#7a7364;--line:#efe6d2;--accent:#f7b500;--accent2:#ffd75e;--accent-ink:#2b2100;--soft:#fff3c4;--brandtext:#a36b00;
--ok:#1d7a3a;--okbg:#e4f5e8;--warn:#a85d00;--warnbg:#ffefc9;--bad:#b42318;--badbg:#fde7e4;--shadow:0 10px 30px rgba(120,90,0,.08);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#15120b;--card:#211d13;--ink:#f4efe1;--mute:#a79f8c;--line:#342d1d;--soft:#3a3010;--brandtext:#ffd75e;--ok:#6ee7a0;--okbg:#10301f;--warn:#fbbf24;--warnbg:#3a2c0a;--bad:#ff8a80;--badbg:#3d1714;--shadow:0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#15120b;--card:#211d13;--ink:#f4efe1;--mute:#a79f8c;--line:#342d1d;--soft:#3a3010;--brandtext:#ffd75e;--ok:#6ee7a0;--okbg:#10301f;--warn:#fbbf24;--warnbg:#3a2c0a;--bad:#ff8a80;--badbg:#3d1714;--shadow:0 10px 30px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Noto Sans Bengali","Hind Siliguri","Kalpurush","Nirmala UI",system-ui,sans-serif}
header.bar{background:var(--card);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent2),var(--accent));display:grid;place-items:center;color:var(--accent-ink);box-shadow:0 6px 14px rgba(247,181,0,.35)}
.logo svg,.hico svg{width:22px;height:22px}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.uname{color:var(--mute);font-size:15px}
.shell{display:grid;grid-template-columns:84px 1fr;max-width:1200px;margin:0 auto}
.rail{display:flex;flex-direction:column;gap:10px;padding:18px 12px;align-items:center}
.rail button{position:relative;width:60px;border:0;background:none;color:var(--mute);border-radius:14px;padding:10px 4px 6px;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px}
.rail button svg{width:24px;height:24px}
.rail button .rl{font-size:11px;line-height:1.2;text-align:center}
.rail button.on{background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);box-shadow:0 8px 18px rgba(247,181,0,.35)}
.badge{position:absolute;top:2px;right:2px;background:var(--bad);color:#fff;border-radius:99px;font-size:11px;min-width:18px;padding:0 5px;line-height:18px;text-align:center}
main{min-width:0;max-width:1000px;width:100%;margin:0 auto;padding:18px 16px}
.head{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.hico{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--accent2),var(--accent));display:grid;place-items:center;color:var(--accent-ink);box-shadow:0 8px 18px rgba(247,181,0,.35);flex:none}
.hico svg{width:28px;height:28px}
.ht{font-size:22px;margin:0}
.head .note{margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.narrow{max-width:400px;margin:8vh auto}
h2{font-size:17px;margin:0 0 12px}
.stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);border-left:5px solid var(--accent)}
.stat b{display:block;font-size:28px;line-height:1.2}
.stat .sl{color:var(--mute);font-size:14px}
.stat.ok{border-left-color:var(--ok)}.stat.bad{border-left-color:var(--bad)}.stat.warn{border-left-color:var(--warn)}
label{display:flex;flex-direction:column;font-size:13px;color:var(--mute);gap:3px;margin-bottom:10px}
input,select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:9px 12px;width:100%}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.row>label{flex:1;min-width:150px}
.btn{border:0;background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--accent-ink);font:inherit;font-weight:700;padding:10px 18px;border-radius:12px;cursor:pointer;box-shadow:0 6px 14px rgba(247,181,0,.3)}
.btn.alt{background:var(--card);border:1px solid var(--line);color:var(--ink);font-weight:500;padding:6px 12px;font-size:14px;box-shadow:none}
.btn:disabled{opacity:.6;cursor:wait}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:last-child td{border-bottom:0}
th{color:var(--mute);font-weight:500;font-size:13px;background:var(--bg)}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 11px;border-radius:99px;font-size:13px;font-weight:600}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tag.g{background:var(--okbg);color:var(--ok)}.tag.b{background:var(--badbg);color:var(--bad)}.tag.w{background:var(--warnbg);color:var(--warn)}
.err{color:var(--bad);margin:6px 0 0;min-height:1.4em}
.note{color:var(--mute);font-size:14px}
.secret{background:var(--soft);color:var(--ink);border:1px solid var(--accent);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.secret code{font-size:18px;font-weight:700;margin:0 8px;user-select:all;color:var(--brandtext)}
.secret code.lk{font-size:14px;word-break:break-all}
.acts{display:flex;gap:6px}
#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}
#toast.on{opacity:1}
@media (max-width:640px){
 .shell{grid-template-columns:1fr}
 .rail{position:fixed;bottom:0;left:0;right:0;flex-direction:row;justify-content:space-around;background:var(--card);border-top:1px solid var(--line);padding:6px 8px;z-index:10}
 .rail button{width:auto;flex:1}
 main{padding-bottom:90px}
}
.pos{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;align-items:start}
@media (max-width:900px){.pos{grid-template-columns:1fr}}
.plist{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:60vh;overflow:auto}
.pitem{display:flex;justify-content:space-between;gap:10px;text-align:left;width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:9px 12px;cursor:pointer;font:inherit}
.pitem:hover,.pitem:focus-visible{border-color:var(--accent)}
.pitem.out{opacity:.5;cursor:not-allowed}
.pitem small{display:block;color:var(--mute);font-size:12px}
.pitem .r{text-align:right}
td.r,th.r{text-align:right}
input.qty,select.qty{width:110px;padding:6px 8px}
.total{font-size:22px;font-weight:700;margin:10px 0}