:root{--ink:#101828;--muted:#98a2b3;--panel:#172033;--line:#344054;--brand:#39bda7;--accent:#f0b44c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#0c1424;color:#f8fafc;font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}.topbar{min-height:72px;padding:12px clamp(16px,3vw,36px);display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);background:#101828}.suuqra-wordmark{color:#fff;text-decoration:none}.suuqra-wordmark small{color:#d0d5dd}.topbar nav{display:flex;gap:6px;margin-right:auto}.topbar nav a{padding:9px 12px;border-radius:8px;color:#d0d5dd;text-decoration:none;font-weight:700}.topbar nav a:hover,.topbar nav a.active{background:#243047;color:#fff}.sync{display:flex;align-items:center;gap:8px;color:#d0d5dd;font-size:13px}.sync>span:first-child{width:9px;height:9px;border-radius:50%;background:#32d583}.sync>span.busy{background:var(--accent);animation:pulse 1s infinite}.sync button{border:1px solid #475467;border-radius:8px;background:transparent;color:#fff;padding:7px 10px;font-weight:700;cursor:pointer}main{padding:clamp(20px,3vw,38px)}.heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.eyebrow{margin:0 0 5px;color:var(--brand);font-size:12px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.heading h1{margin:0;font-size:clamp(27px,3vw,42px);letter-spacing:-.035em}.heading p:not(.eyebrow){margin:7px 0 0;color:var(--muted)}.metrics{display:flex;gap:10px}.metrics article{min-width:112px;padding:13px 17px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.metrics strong,.metrics span{display:block}.metrics strong{font-size:25px}.metrics span{color:var(--muted);font-size:12px}.board{display:grid;grid-template-columns:1fr 1fr;gap:18px}.lane{min-height:460px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#111b2d}.lane-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.lane-title h2{margin:0;font-size:17px}.lane-title span{min-width:27px;padding:3px 8px;border-radius:99px;background:#344054;text-align:center;font-weight:800}.order-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:13px}.order-card{overflow:hidden;border:1px solid #d0d5dd;border-radius:12px;background:#fff;color:var(--ink)}.order-card>header{display:flex;justify-content:space-between;align-items:start;padding:14px 15px;border-bottom:1px solid #eaecf0;background:#f9fafb}.order-number,.order-time{display:block}.order-number{font-size:16px;font-weight:900}.order-time{color:#667085;font-size:12px}.fulfillment{padding:4px 7px;border-radius:6px;background:#e7f8f4;color:#087968;font-size:11px;font-weight:850;text-transform:uppercase}.customer{display:flex;justify-content:space-between;gap:10px;padding:11px 15px;color:#475467}.customer span{font-size:12px}.order-card ul{list-style:none;margin:0;padding:4px 15px 12px}.order-card li{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:7px 0;border-bottom:1px solid #f2f4f7}.order-card li small{grid-column:2;color:#b54708}.notes{margin:0 15px 12px;padding:8px;border-radius:7px;background:#fffaeb;color:#93370d}.order-card button{width:100%;border:0;background:#087968;color:#fff;padding:12px;font-weight:850;cursor:pointer}.order-card button:hover{background:#066657}.order-card button:disabled{opacity:.55}.empty{display:grid;place-content:center;min-height:170px;border:1px dashed #475467;border-radius:12px;color:#667085;text-align:center}.empty strong,.empty span{display:block}.notice{position:fixed;top:86px;right:24px;z-index:5;padding:11px 15px;border-radius:9px;background:#087968;box-shadow:0 12px 30px #0007}.notice.error{background:#b42318}@keyframes pulse{50%{opacity:.4}}@media(max-width:850px){.topbar{flex-wrap:wrap;gap:8px}.topbar nav{order:3;width:100%;overflow:auto}.sync{margin-left:auto}.board{grid-template-columns:1fr}.heading{align-items:start;flex-direction:column}.lane{min-height:300px}}@media(max-width:520px){.sync #sync-label{display:none}.metrics{width:100%}.metrics article{flex:1}.order-grid{grid-template-columns:1fr}}
