:root{--navy:#0f1f3d;--navy-2:#16294a;--navy-3:#1e3a66;--yellow:#ffc700;--yellow-dark:#e0ac00;--bg:#f4f1e8;--card:#fff;--text:#1c2333;--muted:#5c6675;--border:#d9d4c5;--danger:#b3261e;color:var(--text);background:var(--bg);font-family:system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0}#root{min-height:100svh}h1{color:var(--navy);margin:8px 0 4px;font-size:32px}h2{color:var(--navy);margin:0 0 8px;font-size:20px}h3{color:var(--navy);margin:16px 0 8px;font-size:15px}p{margin:0 0 8px}button{font:inherit;cursor:pointer}input,select{font:inherit;border:1px solid var(--border);color:var(--text);background:#fff;border-radius:8px;padding:10px 12px}input:focus,select:focus{outline:2px solid var(--yellow);outline-offset:1px}.app{flex-direction:column;min-height:100svh;display:flex}.topbar{background:var(--navy);color:#fff;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:12px 20px;display:flex}.logo{align-items:center;gap:12px;display:flex}.logo-mark{background:var(--yellow);width:44px;height:44px;color:var(--navy);border-radius:10px;place-items:center;font-size:28px;font-weight:900;display:grid}.logo strong{letter-spacing:.5px;font-size:22px;display:block}.logo span{opacity:.8;font-size:12px}.tabs{flex-wrap:wrap;gap:8px;display:flex}.tab{color:#fff;background:0 0;border:1px solid #ffffff59;border-radius:999px;padding:8px 14px}.tab.active{background:var(--yellow);color:var(--navy);border-color:var(--yellow);font-weight:700}.main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:24px 20px 48px}.lede{color:var(--muted);max-width:720px;font-size:17px}.hint{color:var(--muted);font-size:14px}.error{color:var(--danger)}.fineprint{color:var(--muted);margin-top:24px;font-size:13px}.notice{border:1px solid var(--yellow);background:#fff7cc;border-radius:10px;margin-top:16px;padding:12px 16px}.mt{margin-top:16px}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;margin-top:16px;padding:20px;box-shadow:0 2px 10px #0f1f3d0f}.scan-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=760px){.scan-grid{grid-template-columns:1fr}}.row{align-items:center;gap:10px;display:flex}.row.wrap{flex-wrap:wrap}.scan-video{aspect-ratio:4/3;background:#000;border-radius:10px;width:100%}.btn{border:none;border-radius:999px;padding:10px 18px;font-weight:700}.btn.primary{background:var(--yellow);color:var(--navy)}.btn.primary:disabled{opacity:.5;cursor:not-allowed}.btn.secondary{background:var(--navy);color:#fff}.btn.danger{color:var(--danger);border:1px solid var(--danger);background:0 0;padding:8px 14px}.demo-list{flex-direction:column;gap:6px;margin-top:8px;display:flex}.demo-item{background:var(--bg);border:1px solid var(--border);text-align:left;border-radius:8px;justify-content:space-between;gap:8px;padding:8px 12px;display:flex}.demo-item span{color:var(--muted);font-size:13px}.fallback{border-color:var(--yellow);border-width:2px}.disc-list{flex-direction:column;gap:12px;margin-top:16px;display:flex}.disc-row{background:var(--card);border:1px solid var(--border);border-radius:12px;align-items:center;gap:16px;padding:12px;display:flex}.disc-info{flex-direction:column;flex:1;gap:2px;display:flex}.disc-info span{color:var(--muted);font-size:14px}.disc-info .barcode{font-size:12px}.disc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px;display:grid}.disc-tile{background:var(--bg);border:2px solid var(--border);text-align:left;border-radius:12px;flex-direction:column;gap:6px;padding:10px;display:flex}.disc-tile.in{border-color:var(--yellow);background:#fff7cc}.disc-tile strong{font-size:14px}.disc-tile span{color:var(--muted);font-size:12px}.cover{color:#fff;border-radius:6px;flex-direction:column;flex-shrink:0;justify-content:space-between;padding:10px;display:flex}.cover-md{width:84px;height:126px}.cover-lg{width:150px;height:225px}.cover-format{letter-spacing:1px;text-transform:uppercase;opacity:.85;font-size:10px;font-weight:800}.cover-title{font-size:16px;font-weight:800;line-height:1.15}.cover-lg .cover-title{font-size:20px}.cover-year{opacity:.85;font-size:11px}.cover-spine{color:#fff;border-radius:4px;flex-direction:column;justify-content:space-between;width:44px;height:220px;padding:10px 6px;display:flex}.cover-spine span{writing-mode:vertical-rl;font-size:13px;font-weight:800}.cover-spine em{opacity:.8;writing-mode:vertical-rl;font-size:10px;font-style:normal}.aisle-picker{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.aisle-chip{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:8px 14px}.aisle-chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}.toggle{align-items:center;gap:8px;margin:8px 0;display:flex}.toggle input{width:auto}.template{background:var(--bg);border:2px solid var(--border);border-radius:10px;padding:10px 16px;font-weight:700}.template.active{border-color:var(--yellow);background:#fff7cc}.progress{background:#e8e2d2;border-radius:999px;height:10px;margin:10px 0;overflow:hidden}.progress div{background:var(--yellow);height:100%;transition:width .3s}.shop-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px;display:flex}.view-switch{background:var(--card);border:1px solid var(--border);border-radius:999px;gap:4px;padding:4px;display:flex}.view-switch button{background:0 0;border:none;border-radius:999px;padding:8px 12px}.view-switch button.active{background:var(--navy);color:#fff}.carousel{scroll-snap-type:x mandatory;gap:16px;padding:16px 4px;display:flex;overflow-x:auto}.carousel-item{scroll-snap-align:start;background:var(--card);border:1px solid var(--border);text-align:left;border-radius:12px;flex-direction:column;align-items:flex-start;gap:6px;min-width:180px;padding:12px;display:flex}.carousel-item strong{font-size:15px}.carousel-item span{color:var(--muted);font-size:13px}.stack{flex-direction:column;gap:10px;margin-top:16px;display:flex}.stack-item{background:var(--card);border:1px solid var(--border);text-align:left;border-radius:12px;align-items:center;gap:14px;padding:10px;display:flex}.stack-item div{flex-direction:column;gap:2px;display:flex}.stack-item span{color:var(--muted);font-size:13px}.shelf{border:1px solid var(--border);background:linear-gradient(#e8dfc8,#d8cba6);border-radius:12px;align-items:flex-end;gap:4px;margin-top:16px;padding:20px 16px 12px;display:flex;overflow-x:auto}.shelf button{background:0 0;border:none;padding:0}.cart{border-top:4px solid var(--yellow)}.cart-list{padding:0;list-style:none}.cart-list li{border-bottom:1px solid var(--border);justify-content:space-between;gap:8px;padding:6px 0;display:flex}.cart-list button{color:var(--danger);background:0 0;border:none}.sheet-backdrop{z-index:10;background:#0f1f3d99;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.sheet{background:#fff;border-radius:16px;flex-direction:column;gap:10px;width:100%;max-width:480px;max-height:90vh;padding:24px;display:flex;overflow-y:auto}.sheet input{width:100%}.footer{text-align:center;color:var(--muted);border-top:1px solid var(--border);padding:20px;font-size:13px}