:root{--wasabi-red: #ea1212;--wasabi-red-dark: #c50f0f;--wasabi-red-soft: #fdeaea;--charcoal: #373b45;--charcoal-dark: #2b2e36;--charcoal-deep: #23262d;--brand-yellow: #ffd10b;--page-bg: #f5f5f5;--card-bg: #ffffff;--border: #e3e4e7;--muted: #8a8f99;--font-display: "Hammersmith One", sans-serif;--font-body: "Open Sans", sans-serif;--radius: 14px;--card-shadow: 0 1px 2px rgba(55, 59, 69, .05), 0 10px 30px rgba(55, 59, 69, .08);--touch-min: 64px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-body);background:var(--page-bg);color:var(--charcoal);font-size:18px;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:400;letter-spacing:.01em;margin:0}button{font-family:var(--font-body);cursor:pointer}.btn{border:none;border-radius:var(--radius);font-weight:700;font-size:1.05rem;padding:0 1.4rem;min-height:var(--touch-min);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;transition:transform .05s ease,background .15s ease,opacity .15s ease}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.55;cursor:default}.btn-red{background:var(--wasabi-red);color:#fff}.btn-red:hover{background:var(--wasabi-red-dark)}.btn-charcoal{background:var(--charcoal);color:#fff}.btn-charcoal:hover{background:var(--charcoal-dark)}.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.35)}.btn-ghost:hover{border-color:#fff}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-screen{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:radial-gradient(circle at 50% 0%,var(--charcoal) 0%,var(--charcoal-deep) 70%);padding:2rem}.login-logo{width:300px;max-width:72vw;height:auto;display:block}.login-subtitle{text-align:center;color:var(--muted);margin:0 0 1.6rem;font-size:1.05rem}.login-card{width:100%;max-width:440px;background:var(--card-bg);border-radius:22px;box-shadow:var(--card-shadow);padding:2.6rem 2.4rem}.login-brand{text-align:center;margin-bottom:1.8rem}.login-brand .logo-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--wasabi-red);margin-right:.5rem;vertical-align:middle}.login-brand h1{font-size:2rem;color:var(--charcoal);display:inline;vertical-align:middle}.login-brand p{color:var(--muted);margin:.5rem 0 0;font-size:1rem}.field{margin-bottom:1.1rem}.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.4rem;color:var(--charcoal)}.field input{width:100%;min-height:var(--touch-min);border:2px solid var(--border);border-radius:var(--radius);padding:0 1rem;font-size:1.15rem;font-family:var(--font-body);color:var(--charcoal);background:#fff}.field input:focus{outline:none;border-color:var(--wasabi-red)}.login-card .btn{width:100%;font-size:1.2rem;margin-top:.4rem}.form-error{background:var(--wasabi-red-soft);color:var(--wasabi-red-dark);border-radius:var(--radius);padding:.9rem 1rem;font-weight:600;margin-bottom:1.1rem;font-size:.98rem}.app{min-height:100%;display:flex;flex-direction:column}.app-header{background:var(--charcoal);color:#fff;display:flex;align-items:center;gap:1.2rem;padding:.9rem 1.4rem;flex-wrap:wrap}.app-header .brand{font-family:var(--font-display);font-size:1.5rem;display:flex;align-items:center;gap:.55rem}.app-header .brand .logo-dot{width:13px;height:13px;border-radius:50%;background:var(--wasabi-red)}.site-badge{background:var(--brand-yellow);color:var(--charcoal-deep);font-weight:700;font-size:.95rem;padding:.35rem .9rem;border-radius:999px;white-space:nowrap}.header-spacer{flex:1}.conn{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:#ffffffbf}.conn .dot{width:11px;height:11px;border-radius:50%;background:var(--muted)}.conn.online .dot{background:var(--brand-yellow);box-shadow:0 0 0 4px #ffd10b33}.conn.offline .dot{background:var(--wasabi-red);box-shadow:0 0 0 4px #ea121233}.tabs{display:flex;gap:.6rem;padding:1rem 1.4rem 0;background:var(--page-bg)}.tab{border:none;background:#e9eaec;color:var(--charcoal);font-weight:700;font-size:1.1rem;padding:0 1.5rem;min-height:58px;border-radius:var(--radius) var(--radius) 0 0;display:inline-flex;align-items:center;gap:.6rem}.tab.active{background:var(--card-bg);color:var(--wasabi-red-dark);box-shadow:0 -3px 0 var(--wasabi-red) inset}.tab .count{background:var(--wasabi-red);color:#fff;font-size:.9rem;min-width:30px;height:30px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;padding:0 .5rem}.tab.active .count{background:var(--wasabi-red)}.list-wrap{flex:1;padding:0 1.4rem 1.4rem;background:var(--page-bg);overflow-y:auto}.list{background:var(--card-bg);border-radius:0 var(--radius) var(--radius) var(--radius);box-shadow:var(--card-shadow);overflow:hidden}.row{display:flex;align-items:center;gap:1.2rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--border)}.row:last-child{border-bottom:none}.row.fresh{animation:flash 1.6s ease-out}@keyframes flash{0%{background:#ffd10b59}to{background:transparent}}.row.leaving{opacity:0;transform:translate(40px);transition:opacity .3s ease,transform .3s ease}.row .main{flex:1;min-width:0}.row .name{font-size:1.5rem;font-weight:700;color:var(--charcoal);line-height:1.2}.row .qty{color:var(--wasabi-red-dark);font-weight:700}.row .meta{margin-top:.35rem;display:flex;flex-wrap:wrap;gap:.9rem;color:var(--muted);font-size:1rem}.badge{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;border-radius:999px;padding:.2rem .8rem;font-size:.9rem}.badge.belt{background:var(--charcoal);color:#fff}.badge.table{background:var(--brand-yellow);color:var(--charcoal-deep)}.elapsed{font-variant-numeric:tabular-nums;font-weight:700}.elapsed.warn{color:var(--wasabi-red-dark)}.btn-done{min-width:190px;min-height:76px;font-size:1.25rem;background:var(--wasabi-red);color:#fff}.btn-done:hover{background:var(--wasabi-red-dark)}.btn-done .bi{font-size:1.5rem}.state{text-align:center;color:var(--muted);padding:4rem 1.5rem}.state .icon{font-size:3.4rem;display:block;margin-bottom:.8rem;opacity:.5}.state.error{color:var(--wasabi-red-dark)}.setup-note{max-width:640px;margin:3rem auto;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:2rem;line-height:1.6}.setup-note code{background:var(--page-bg);padding:.15rem .4rem;border-radius:6px;font-size:.95rem}