:root{--bg:#f6f2ea;--card:#fff;--ink:#1d2a2a;--soft:#5d6b6a;--line:#e2dccf;--brand:#1f5f5b;--brand2:#2c7a74;--warm:#b5652a;--ok:#2f7d32;--bad:#b3261e;--r:18px}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;font-size:18px}
button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.top{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--brand);color:#fff}
.top h1{font-size:24px;margin:0;font-weight:700;letter-spacing:.2px}.top .sub{font-size:15px;opacity:.85}
.top .sp{flex:1}
.wrap{display:grid;grid-template-columns:1fr 380px;height:calc(100% - 64px)}
.main{overflow:auto;padding:22px 22px 90px}
.side{background:var(--card);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{background:var(--card);border:2px solid var(--line);border-radius:22px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:24px;font-weight:700;color:var(--ink);box-shadow:0 2px 0 rgba(0,0,0,.04)}
.tile .ico{width:58px;height:58px;color:var(--brand);stroke-width:1.5}.tile small{font-size:15px;font-weight:500;color:var(--soft)}
.tile:active,.item:active,.big:active{transform:scale(.98)}
.hello{font-size:28px;margin:4px 0 18px;font-weight:700}.hello span{display:block;font-size:17px;font-weight:500;color:var(--soft);margin-top:4px}
.back{display:inline-flex;align-items:center;gap:10px;min-height:64px;padding:0 24px;border-radius:16px;background:#e9e3d7;color:var(--ink);font-size:20px;font-weight:700;margin-bottom:16px}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}.sec-h h2{margin:0;font-size:28px}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.item{background:var(--card);border:2px solid var(--line);border-radius:var(--r);min-height:110px;padding:16px 18px;display:flex;align-items:center;gap:14px;text-align:left;color:var(--ink)}
.item .nm{flex:1;font-size:20px;font-weight:700;line-height:1.25}.item .pr{display:block;font-size:17px;font-weight:600;color:var(--brand);margin-top:6px}
.item .add{width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.item .add .ico{width:30px;height:30px;stroke-width:2.4}
.item.inb{border-color:var(--brand2);background:#eef6f5}
.item .q{min-width:44px;height:44px;border-radius:22px;background:var(--brand);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:20px;padding:0 10px}
.item.out{opacity:.55;background:#efebe4}.item.out .add{background:#9aa3a2}
.tag-out{display:inline-block;margin-top:6px;font-size:15px;font-weight:800;color:var(--bad);text-transform:uppercase;letter-spacing:.5px}
.left{display:block;font-size:14px;color:var(--warm);font-weight:700;margin-top:4px}
.side h3{margin:0;padding:18px 20px 10px;font-size:22px;display:flex;align-items:center;gap:10px}
.lines{flex:1;overflow:auto;padding:0 14px}
.empty{color:var(--soft);padding:10px 8px;font-size:17px}
.ln{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line)}
.ln .t{flex:1;font-size:17px;font-weight:600;line-height:1.25}.ln .t small{display:block;color:var(--soft);font-weight:500}
.qb{width:52px;height:52px;border-radius:14px;background:#e9e3d7;color:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.qb .ico{width:24px;height:24px;stroke-width:2.4}.qn{min-width:30px;text-align:center;font-weight:800;font-size:20px}
.foot{padding:14px 16px 16px;border-top:1px solid var(--line)}
.tot{display:flex;justify-content:space-between;font-size:22px;font-weight:800;margin-bottom:12px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.seg button{min-height:64px;border-radius:14px;background:#e9e3d7;color:var(--ink);font-size:19px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;border:3px solid transparent}
.seg button[aria-pressed=true]{background:#e3f0ee;border-color:var(--brand);color:var(--brand)}
.fld{width:100%;min-height:64px;border-radius:14px;border:2px solid var(--line);font-size:22px;padding:0 16px;margin-bottom:10px;background:#fff;color:var(--ink)}
.fld:focus{outline:3px solid var(--brand2);border-color:var(--brand2)}
.big{width:100%;min-height:76px;border-radius:18px;background:var(--brand);color:#fff;font-size:24px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:12px}
.big[disabled]{background:#9aa3a2}.big.alt{background:#e9e3d7;color:var(--ink)}
.msg{color:var(--bad);font-weight:700;min-height:1.2em;margin:6px 2px 0;font-size:16px}
.note{font-size:14px;color:var(--soft);text-align:center;margin-top:10px}
.note a{color:var(--soft)}
.thanks{position:fixed;inset:0;background:var(--brand);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:50}
.thanks .ico{width:110px;height:110px;stroke-width:1.6}
.thanks h2{font-size:48px;margin:18px 0 8px}.thanks .num{font-size:30px;font-weight:800;background:rgba(255,255,255,.15);padding:10px 26px;border-radius:40px;margin:8px 0 14px}
.thanks p{font-size:22px;margin:6px 0;opacity:.95}.thanks .big{max-width:420px;margin-top:26px;background:#fff;color:var(--brand)}
.mbar{display:none}
.pagefoot{position:fixed;left:0;bottom:0;right:380px;padding:10px 22px;font-size:14px;color:var(--soft);background:linear-gradient(transparent,var(--bg) 40%)}
.pagefoot a{color:var(--soft)}
@media (max-width:767px){
  .wrap{grid-template-columns:1fr;height:auto}.main{padding:16px 14px 150px}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}.tile{min-height:140px;font-size:20px}.tile .ico{width:46px;height:46px}
  .items{grid-template-columns:1fr}.item{min-height:92px}
  .side{position:fixed;inset:0;z-index:40;display:none;border:0}.side.show{display:flex}
  .mbar{display:flex;position:fixed;left:10px;right:10px;bottom:34px;z-index:30}
  .pagefoot{right:0;text-align:center;padding:8px}
  .top{padding:12px 14px}.top h1{font-size:20px}.top .sub{display:none}
  .hello{font-size:23px}.thanks h2{font-size:38px}
}
.closeb{margin-left:auto;min-height:52px;padding:0 16px;border-radius:14px;background:#e9e3d7;font-weight:700;display:none}
@media (max-width:767px){.closeb{display:inline-flex;align-items:center}}
/* board */
.bwrap{padding:18px 20px 60px}
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.col{background:#ebe6dc;border-radius:20px;padding:12px;min-height:200px}
.col h3{margin:2px 4px 10px;font-size:20px;display:flex;align-items:center;gap:8px}
.col h3 .c{margin-left:auto;background:#fff;border-radius:20px;padding:2px 12px;font-size:16px}
.oc{background:#fff;border-radius:16px;padding:12px;margin-bottom:10px;border-left:6px solid var(--brand);box-shadow:0 1px 0 rgba(0,0,0,.05)}
.oc.new{border-left-color:var(--warm);animation:pop .6s}.oc.ready{border-left-color:var(--ok)}.oc.done{opacity:.7;border-left-color:#9aa3a2}
@keyframes pop{0%{background:#fff3e6}100%{background:#fff}}
.oc .hd{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:19px}.oc .hd .tm{margin-left:auto;font-size:15px;color:var(--soft);font-weight:600}
.oc .who{font-size:16px;color:var(--brand);font-weight:700;margin:2px 0 6px}
.oc ul{margin:0 0 8px;padding:0;list-style:none;font-size:17px}.oc li{padding:2px 0}.oc li b{display:inline-block;min-width:30px}
.oc .nt{font-size:15px;background:#fff6e5;border-radius:8px;padding:4px 8px;margin-bottom:8px}
.oc .acts{display:flex;gap:8px}
.mv{flex:1;min-height:60px;border-radius:14px;background:var(--brand);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;gap:8px}
.mv.back2{flex:0 0 60px;background:#e9e3d7;color:var(--ink)}
.stockcard{background:#fff;border-radius:20px;padding:16px;margin-top:18px}
.stockcard h3{margin:0 0 4px;font-size:22px;display:flex;gap:10px;align-items:center}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:10px}
.srow{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f6f2ea}
.srow .n{flex:1;font-size:15px;font-weight:600;line-height:1.2}.srow .v{min-width:40px;text-align:center;font-weight:800;font-size:18px}
.srow.low .v{color:var(--warm)}.srow.zero{background:#fbe9e7}.srow.zero .v{color:var(--bad)}
.srow .qb{width:46px;height:46px}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.stat{background:#fff;border-radius:16px;padding:10px 16px;font-size:16px;color:var(--soft)}.stat b{display:block;font-size:24px;color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:15px;background:rgba(255,255,255,.15);padding:6px 12px;border-radius:20px}
.dot{width:10px;height:10px;border-radius:50%;background:#7ee08a}.live.off .dot{background:#f3a29b}
.tb{min-height:48px;padding:0 16px;border-radius:12px;background:rgba(255,255,255,.15);color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.lock{max-width:420px;margin:40px auto;background:#fff;border-radius:24px;padding:26px;text-align:center}
.lock h2{margin:0 0 6px}.dots{display:flex;justify-content:center;gap:12px;margin:18px 0}.dots i{width:18px;height:18px;border-radius:50%;border:2px solid var(--brand)}.dots i.f{background:var(--brand)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pad button{min-height:72px;border-radius:16px;background:#ece7dd;font-size:28px;font-weight:700;color:var(--ink)}
@media (max-width:1100px){.cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cols{grid-template-columns:1fr}.bwrap{padding:12px}}
.sec-h .big-i{width:40px;height:40px;color:var(--brand);stroke-width:1.6}
.sgrid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media (max-width:767px){.main{padding-bottom:16px}.pagefoot{position:static;padding:8px 12px 120px;background:none}}

/* r2: iPad portrait (768-1023) keeps the basket beside the menu */
@media (min-width:768px) and (max-width:1023px){
  .wrap{grid-template-columns:1fr 330px}.pagefoot{right:330px}
  .tiles{grid-template-columns:1fr 1fr;gap:16px}.tile{min-height:190px}
  .items{grid-template-columns:1fr}.main{padding:18px 18px 90px}
}
/* r2: tap targets for footer and privacy page links */
.pagefoot a,.plink,.pv a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 8px}
.bfoot{padding:0 20px 24px;font-size:14px;color:var(--soft)}.bfoot a{color:var(--soft)}
.pv a{color:var(--brand);font-weight:600}
.lock .lockic{width:44px;height:44px;color:var(--brand);stroke-width:1.6}
.mv.back2{flex:0 0 auto;padding:0 14px}
.toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);z-index:60;max-width:min(92vw,560px);background:var(--bad);color:#fff;font-weight:700;font-size:18px;padding:14px 20px;border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:center}