@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
.picking-layout>div{min-width:0}
:root{--bg:#f5f7fa;--panel:#fff;--text:#192c3b;--muted:#728190;--line:#e5ebef;--teal:#007d73;--pale:#e7f5f1;--nav:#102e35;--radius:12px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 'DM Sans',Arial,sans-serif}h1,h2,h3{font-family:Manrope,Arial,sans-serif;line-height:1.3}h1{font-size:30px;letter-spacing:-1px;margin:7px 0 8px}h2{font-size:17px;margin:0}h3{font-size:15px;margin:0}p{margin:8px 0}a{color:var(--teal);text-decoration:none}button,.button,summary{font:600 14px 'DM Sans',Arial,sans-serif;cursor:pointer;border:1px solid #dce5e9;border-radius:7px;background:white;color:var(--text);padding:11px 15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;text-decoration:none}button:hover,.button:hover{background:#f0f5f4}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:var(--teal);color:white;border-color:var(--teal)}.primary:hover{background:#006c64}.compact{padding:8px 13px}.muted{color:var(--muted)}.mono{font-family:Consolas,monospace;font-size:13px}.strong{font-weight:600}.small,small{font-size:12px}small{display:block;color:var(--muted)}.teal-text{color:var(--teal)}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#66837c}.brand{font-family:Manrope,sans-serif;font-size:25px;font-weight:800;color:inherit;display:flex;align-items:center;gap:10px;letter-spacing:-1px}.brand-dot{color:#54d8b0;margin-left:-10px}.mark{display:grid;place-items:center;width:34px;height:35px;background:#69e0bd;border-radius:8px;color:#173e3c;font-size:22px;font-weight:800;transform:rotate(-4deg)}.sidebar{position:fixed;inset:0 auto 0 0;width:236px;background:var(--nav);color:#f6fffc;padding:30px 22px;display:flex;flex-direction:column;z-index:3}.workspace{margin:38px 0 27px;display:flex;gap:10px;align-items:center;font-size:12px}.workspace small{color:#87a4aa;font-size:11px}.workspace-icon{font-size:24px;color:#82ada5}.nav-label{font-size:10px;letter-spacing:1.7px;color:#86a3a6;margin:0 10px 12px}.sidebar nav a{color:#b4c9ce;display:flex;gap:12px;align-items:center;padding:12px;margin:5px 0;border-radius:7px;font-size:13px;font-weight:500}.sidebar nav a span{font-size:20px;line-height:1}.sidebar nav a.active{background:#245048;color:#aff0d7}.sidebar nav a:hover{background:#20454b}.sidebar-bottom{margin-top:auto}.sidebar-note{font-size:12px;padding:14px 0 20px;border-bottom:1px solid #2d4b51}.sidebar-note small{color:#7d9da3;font-size:11px;margin-top:4px}.dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#61bd94;margin-right:5px}.profile{display:flex;gap:10px;align-items:center;margin:20px 0 10px;font-size:12px}.profile small{color:#8aa5ac;font-size:11px}.avatar{border:1px solid #517271;background:#2a4b4d;border-radius:50%;display:grid;place-items:center;width:34px;height:34px;color:#b7e6d7}.logout{color:#98b8b7;background:transparent;border:none;padding:6px 0;font-size:12px}.logout:hover{background:transparent;color:white}.app-shell{margin-left:236px}.topbar{height:72px;padding:0 34px;background:white;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12px}.slash{margin:0 16px;color:#bec8cf}.top-meta{display:flex;align-items:center;color:#778692;gap:7px}.divider{height:16px;width:1px;background:var(--line);margin:0 8px}.content{padding:30px 34px;max-width:1700px;margin:auto}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head p{font-size:13px}.head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.area-tag{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 8px 8px 14px;color:#506576;display:flex;gap:14px;align-items:center}.area-tag b,.area-mini{background:var(--pale);color:var(--teal);padding:4px 9px;border-radius:5px}.demo-banner{display:flex;gap:10px;align-items:center;background:#fdf7e9;border:1px solid #efe4c9;color:#8a7037;padding:10px 15px;border-radius:8px;margin-bottom:20px;font-size:12px}.demo-banner>span{font-size:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0;overflow:visible;box-shadow:0 2px 3px #1c393003}.panel-head{padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line)}.pill{display:inline-block;background:#f0f3f6;color:#667d8b;border-radius:5px;padding:4px 8px;font-size:11px;font-weight:600;white-space:nowrap}.pill.teal{background:var(--pale);color:var(--teal)}.picking-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.active-order{padding:22px;display:flex;gap:13px;align-items:center}.active-order>.pill{margin-left:auto}.active-order h2{margin-top:3px}.order-icon{background:#e9f4f0;color:var(--teal);width:44px;height:44px;display:grid;place-items:center;border-radius:9px;font-size:26px}.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 22px 22px;border-bottom:1px solid var(--line)}.detail-grid>div>span{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}.detail-grid strong{font-size:12px;font-weight:500;overflow-wrap:anywhere}.panel>.detail-grid{padding-top:22px}.scan-box{padding:20px 22px;background:#fbfcfc;border-bottom:1px solid var(--line)}.step-label,.section-title{display:flex;align-items:center;gap:10px}.step-label{margin-bottom:13px}.step-label>span,.step{font-size:11px;font-weight:700;color:var(--teal);background:#e4f1ed;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.input-action{display:flex;gap:10px}.scan-input{position:relative;flex:1}.scan-input>span{position:absolute;left:14px;top:7px;font-size:24px;color:#6e8c88}input,select{font:14px 'DM Sans',Arial,sans-serif;border:1px solid #d5e0e5;border-radius:7px;background:#fff;padding:12px;width:100%;min-width:0;color:var(--text)}input:focus,select:focus{outline:2px solid #87cdbb;outline-offset:1px}.scan-input input{padding-left:45px}.hint{font-size:11px;color:var(--muted);margin:9px 0 0}.section-pad{padding:20px 22px}.count{font-size:11px;border-radius:5px;background:#f0f3f6;padding:2px 7px;color:#68818c}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;font-weight:500;color:#7a8b99;font-size:11px;background:#fbfcfd}td,th{padding:13px 14px;border-bottom:1px solid #edf1f3}td{vertical-align:middle}tbody tr:last-child td{border-bottom:none}.section-pad table{margin-top:12px}.empty-cell{padding:22px;text-align:center;color:#84929d}.checkmark{color:var(--teal)}.item-panel{align-self:start}.item-row{display:flex;align-items:center;gap:12px;padding:19px;border-bottom:1px solid var(--line)}.item-icon{font-size:24px;color:#82a39e;background:#f0f5f4;padding:4px 10px;border-radius:7px}.item-row strong{display:block;font-size:12px;font-weight:500}.item-row small{font-size:10px;margin-top:5px}.quantity{margin-left:auto;font-size:19px;font-weight:600;text-align:right}.quantity small{font-size:10px;font-weight:400}.info-foot{padding:13px 19px;font-size:11px;color:#8a98a4;line-height:1.6}.queue-panel{margin-top:22px;overflow:hidden}.selected-row{background:#f2faf7}.selected-row td:first-child{border-left:3px solid var(--teal)}.queue-panel td{padding-top:17px;padding-bottom:17px}.page-footer{display:flex;justify-content:space-between;margin-top:25px;font-size:10px;color:#9aa8b1}.notice{padding:13px 16px;background:#e8f6ef;border:1px solid #cce7d8;border-radius:7px;color:#237157;margin:12px 0;font-size:13px}.notice.error{background:#fff0ed;border-color:#f1c7bf;color:#a5422f}.notice.subtle{background:#f7f9fb;border-color:#e5ebef;color:#758794;font-size:12px}.empty{padding:60px 35px;text-align:center}.empty>span{font-size:38px;color:var(--teal)}.empty h2{margin:10px}.empty p{color:var(--muted)}.con-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}.order-list{overflow:hidden}.order-choice{display:block;padding:18px;color:var(--text);border-bottom:1px solid var(--line)}.order-choice strong{font-size:12px}.order-choice.current{border-left:3px solid var(--teal);background:#f0f8f5}.order-choice small{font-size:10px}.row,.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}.progress-track{height:4px;background:#edf2f4;border-radius:5px;margin:15px 0 18px;overflow:hidden}.progress-track span{display:block;background:var(--teal);height:100%}.basket-chip{display:inline-block;padding:4px 7px;background:#f0f4f6;border-radius:5px;margin:2px}.check-label{display:flex;align-items:flex-start;gap:10px;font-size:12px;margin:18px 0 8px;color:#617481}.check-label input{width:17px;height:17px;flex-shrink:0;accent-color:var(--teal);margin:2px 0}.create-menu{position:relative}.create-menu summary{list-style:none}.create-menu>div{position:absolute;right:0;top:45px;padding:7px;border:1px solid var(--line);border-radius:8px;background:#fff;z-index:2;box-shadow:0 6px 22px #142c3315;min-width:180px}.create-menu button{width:100%;border:0}.mt{margin-top:25px}label{font-weight:500}label>input{display:block;margin:7px 0 16px}dialog{border:1px solid var(--line);border-radius:14px;padding:0;max-width:820px;width:calc(100% - 32px);color:var(--text)}dialog::backdrop{background:#092a3590}dialog .panel-head{background:#f7faf9}.order-item{display:grid;grid-template-columns:1fr 2fr 1fr 85px 38px;gap:8px;align-items:end;margin:15px 0}.order-item label{font-size:11px}.order-item input{margin-bottom:0}.order-item button{padding:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.login-page{display:flex;align-items:center;min-height:100vh;background:#fff;padding:6vw;gap:8vw}.login-card{width:420px;flex-shrink:0}.login-card .brand{margin-bottom:50px}.login-card h1{font-size:39px;line-height:1.25;letter-spacing:-1.7px}.login-card>p{margin:20px 0 28px}.login-card label{display:block;margin:18px 0}.login-card .primary{width:100%;justify-content:space-between;padding:14px}.login-note{font-size:12px;color:var(--muted);line-height:1.9}.login-art{background:#103a3d;position:relative;min-height:580px;flex:1;align-self:stretch;border-radius:24px;padding:35px;color:#b5e2d4;overflow:hidden}.art-label{font-size:10px;letter-spacing:2px}.box{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid #559a8f;border-radius:15px;transform:rotate(-12deg);background:#205f5b;font-family:Manrope;font-weight:700;font-size:30px;box-shadow:15px 24px 0 #07292950}.box span{display:block;font-size:15px;margin:10px}.box.big{top:145px;left:12%;width:200px;height:180px}.box.small{top:115px;right:8%;width:120px;height:130px;font-size:19px;transform:rotate(14deg);background:#72d8b5;color:#164c49}.box.mid{top:310px;right:16%;width:160px;height:145px;transform:rotate(6deg);font-size:20px}.art-bottom{position:absolute;bottom:35px;font-size:23px;font-family:Manrope;line-height:1.5}.art-bottom span{font-size:12px;color:#80aaa5}.login-card .notice{font-size:13px}
@media(min-width:1500px){.content{padding:38px 48px}.picking-layout{grid-template-columns:minmax(0,1fr) 340px}}@media(max-width:1150px){.sidebar{width:205px;padding:26px 16px}.app-shell{margin-left:205px}.content{padding:24px 20px}.picking-layout{grid-template-columns:1fr}.item-panel{display:none}.con-layout{grid-template-columns:220px minmax(0,1fr)}.login-art .box.big{width:150px}.login-page{gap:5vw}}@media(max-width:800px){.sidebar{position:relative;width:auto;padding:15px 20px;display:block}.sidebar .brand{font-size:22px}.sidebar .workspace,.sidebar .nav-label,.sidebar-note{display:none}.sidebar nav{display:flex;flex-wrap:wrap;margin-top:15px}.sidebar nav a{margin:0;padding:8px 12px}.sidebar-bottom{position:absolute;top:14px;right:20px}.sidebar-bottom .profile{display:none}.app-shell{margin:0}.topbar{height:52px;padding:0 20px}.top-meta{display:none}.page-head{align-items:flex-start;flex-direction:column}.page-head p{font-size:14px}.con-layout{grid-template-columns:1fr}.order-list{max-height:245px;overflow:auto}.content{padding:22px 16px}.detail-grid{grid-template-columns:1fr 1fr}.panel-head{padding:17px}.input-action{flex-wrap:wrap}.scan-input{flex-basis:100%}.section-pad,.scan-box{padding:17px}.active-order{padding:17px;flex-wrap:wrap}.page-footer{gap:12px}.order-item{grid-template-columns:1fr 1fr}.login-art{display:none}.login-page{padding:30px;justify-content:center}.login-card{width:100%;max-width:420px}.login-card h1{font-size:34px}td,th{white-space:nowrap}.check-label input{margin-bottom:0}dialog{max-height:90vh}button,.button{min-height:40px}.detail-grid strong{font-size:13px}.pill{font-size:12px}}

/* Keep the item list accessible on smaller screens. */
@media(max-width:1150px){.item-panel{display:block}}