@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#17212b;--muted:#71808e;--line:#dfe6ea;--paper:#fff;--wash:#f4f7f7;--coral:#ee4d2d;--coral-soft:#fff0eb;--mint:#197d65;--mint-soft:#e8f6f1;--amber:#a06c1a;--amber-soft:#fff5df;--shadow:0 14px 35px rgba(23,33,43,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--wash);color:var(--ink);font-family:Manrope,Segoe UI,sans-serif}button,input{font:inherit}.shell{min-height:100vh}.topbar{height:74px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px 11px 13px 13px;background:var(--coral);color:#fff;font-weight:800;font-size:21px;box-shadow:0 5px 12px rgba(238,77,45,.2)}.brand strong{display:block;font-size:15px;letter-spacing:.02em}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:2px}.topbar-meta{display:flex;align-items:center;gap:18px;color:var(--muted);font:12px 'DM Mono',monospace}.connection{display:flex;align-items:center;gap:7px;color:var(--amber)}.connection i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 12%,transparent)}.connection.online{color:var(--mint)}.connection.error{color:var(--coral)}.ghost-button,.close-button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:9px 13px;cursor:pointer}.ghost-button:hover{border-color:var(--coral);color:var(--coral)}main{max-width:1440px;margin:auto;padding:42px clamp(20px,4vw,64px) 70px}.hero{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:28px 0 34px}.eyebrow,.label{font:500 10px 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}h1,h2,p{margin:0}h1{font-size:clamp(35px,5vw,68px);line-height:1.04;letter-spacing:-.055em;max-width:760px;margin-top:13px}h1 em{font-style:normal;color:var(--coral)}.intro{color:var(--muted);max-width:570px;font-size:14px;line-height:1.7;margin-top:19px}.hero-orbit{height:104px;width:190px;border:1px solid var(--line);border-radius:80px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font:11px 'DM Mono',monospace;transform:rotate(-7deg);background:linear-gradient(135deg,#fff,var(--coral-soft))}.orbit-dot{width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 8px rgba(238,77,45,.1),0 0 27px rgba(238,77,45,.35);animation:pulse 2.3s infinite}@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(238,77,45,.04),0 0 30px rgba(238,77,45,.2)}}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:22px}.tab{border:0;background:transparent;color:var(--muted);padding:13px 18px;border-bottom:2px solid transparent;cursor:pointer;font-weight:700}.tab.active{color:var(--coral);border-color:var(--coral)}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi,.panel{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}.kpi{padding:20px}.kpi .value{font-size:32px;font-weight:800;letter-spacing:-.04em;margin-top:9px}.kpi .hint{font-size:11px;color:var(--muted);margin-top:6px}.overview-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:14px}.panel{padding:23px}.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}.panel-heading h2,.oldest-panel h2{font-size:19px;letter-spacing:-.03em;margin-top:6px}.muted{font-size:11px;color:var(--muted)}.hour-chart{height:175px;display:flex;align-items:end;gap:9px;padding-top:22px;margin-top:3px;border-bottom:1px solid var(--line)}.hour-bar-wrap{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:7px;min-width:22px}.hour-bar{width:100%;max-width:42px;min-height:3px;background:linear-gradient(180deg,var(--coral),#f6a18c);border-radius:7px 7px 2px 2px;transition:height .5s ease}.hour-bar-wrap small{font:10px 'DM Mono',monospace;color:var(--muted)}.hour-count{font-size:10px;color:var(--ink)}.oldest-card{margin-top:26px;background:var(--coral-soft);border-radius:12px;padding:23px;min-height:126px}.oldest-card .id{font:500 18px 'DM Mono',monospace;word-break:break-all}.age{display:inline-flex;padding:5px 8px;border-radius:6px;background:#fff;color:var(--coral);font:500 11px 'DM Mono',monospace;margin-top:14px}.oldest-meta{display:flex;gap:15px;color:var(--muted);font-size:11px;margin-top:12px}.list-panel{margin-top:14px}.search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--muted)}.search input{border:0;outline:0;width:190px;color:var(--ink);font-size:12px}.picking-list{margin-top:20px;display:grid;gap:9px}.picking-row{display:grid;grid-template-columns:1.35fr .65fr .65fr .85fr auto;align-items:center;gap:16px;border:1px solid var(--line);border-radius:11px;padding:15px 17px;transition:transform .18s,box-shadow .18s}.picking-row:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,33,43,.07)}.row-id{font:500 14px 'DM Mono',monospace}.row-sub{font-size:11px;color:var(--muted);margin-top:5px}.franco-badge{display:inline-block;background:var(--coral-soft);color:var(--coral);border-radius:6px;padding:4px 7px;font:500 10px 'DM Mono',monospace}.row-metric strong{display:block;font-size:14px}.row-metric span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.row-action{border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 10px;color:var(--coral);cursor:pointer;font-weight:700;font-size:11px}.row-action:hover{background:var(--coral);color:#fff}.empty{padding:40px;text-align:center;color:var(--muted);font-size:13px}.error-box{padding:18px;background:var(--coral-soft);color:var(--coral);border-radius:10px;font-size:12px}.detail-dialog{width:min(760px,calc(100% - 30px));border:0;border-radius:16px;padding:0;color:var(--ink);box-shadow:0 25px 80px rgba(23,33,43,.24)}.detail-dialog::backdrop{background:rgba(23,33,43,.34);backdrop-filter:blur(3px)}.dialog-head{padding:22px 25px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:start}.dialog-head h2{font:500 20px 'DM Mono',monospace;margin-top:7px}.close-button{font-size:21px;line-height:1;padding:5px 9px}.dialog-content{padding:20px 25px;max-height:60vh;overflow:auto}.order-card{border:1px solid var(--line);border-radius:11px;padding:15px;margin-bottom:10px}.order-head{display:flex;justify-content:space-between;gap:10px}.sku-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.sku-chip{display:inline-flex;align-items:center;gap:7px;background:var(--mint-soft);color:var(--mint);padding:7px 9px;border-radius:7px;font:11px 'DM Mono',monospace}.copy{border:0;background:transparent;color:inherit;cursor:pointer;font-weight:700}.toast{position:fixed;right:25px;bottom:25px;background:var(--ink);color:#fff;padding:12px 15px;border-radius:9px;font-size:12px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}footer{text-align:center;color:var(--muted);font-size:11px;padding:20px;border-top:1px solid var(--line)}@media(max-width:900px){.hero{align-items:start}.hero-orbit{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}.picking-row{grid-template-columns:1.5fr .7fr .7fr auto}.picking-row .row-metric:nth-of-type(2){display:none}}@media(max-width:620px){.topbar{height:auto;min-height:66px;padding:13px 18px;gap:10px}.topbar-meta{gap:8px;font-size:10px}.topbar-meta>#updatedAt{display:none}.ghost-button{padding:7px 9px}main{padding:25px 15px 48px}.hero{padding-top:10px}h1{font-size:38px}.kpis{gap:8px}.kpi{padding:14px}.kpi .value{font-size:24px}.panel{padding:16px}.search input{width:115px}.picking-row{grid-template-columns:1fr auto;gap:12px}.picking-row .franco-badge,.picking-row .row-metric{display:none}.row-action{grid-column:2;grid-row:1 / span 2}.hour-chart{gap:4px}.hour-bar-wrap small{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}