@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0F0E0C;--ink2:#2C2A26;--ink3:#4A4740;--muted:#7A766F;
  --cream:#F8F5EF;--warm:#EDE8DF;--surface:#fff;
  --border:rgba(15,14,12,.09);--bs:rgba(15,14,12,.16);
  --gold:#C9A85C;--gl:#F3EACC;--gd:#8A6B28;
  --green:#1E6641;--gbg:#E8F5EE;
  --red:#B52B2B;--rbg:#FCEAEA;
  --amber:#7A5400;--abg:#FFF4DC;
  --blue:#1559A0;--bbg:#E5EFFF;
  --rsm:8px;--rmd:12px;--rlg:18px;--rpill:999px;
  --fd:'Syne',sans-serif;--fb:'DM Sans',sans-serif;
  --sw:220px;
}
html,body{height:100%}
body{font-family:var(--fb);background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.admin-shell{display:grid;grid-template-columns:var(--sw) 1fr;min-height:100vh}
/* Sidebar */
.sidebar{background:var(--ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar-logo{padding:22px 20px 18px;border-bottom:0.5px solid rgba(255,255,255,.07);flex-shrink:0}
.logo-mark{font-family:var(--fd);font-size:17px;font-weight:800;color:var(--gold);letter-spacing:.05em}
.logo-sub{font-size:10px;color:rgba(255,255,255,.25);margin-top:2px}
.sidebar-nav{padding:14px 0;flex:1}
.nav-section{font-size:9px;font-weight:700;color:rgba(255,255,255,.2);letter-spacing:.12em;text-transform:uppercase;padding:12px 20px 6px}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 20px;border-left:2px solid transparent;transition:all .15s;color:rgba(255,255,255,.45);font-family:var(--fd);font-size:11px;font-weight:600}
.nav-link:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.7)}
.nav-link.active{background:rgba(201,168,92,.08);border-left-color:var(--gold);color:var(--gold)}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--gold);color:var(--ink);font-size:9px;font-weight:800;font-family:var(--fd);padding:1px 7px;border-radius:var(--rpill)}
.sidebar-footer{padding:16px 20px;border-top:0.5px solid rgba(255,255,255,.07);flex-shrink:0}
.admin-avatar{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);font-family:var(--fd);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* Main */
.main-area{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
.topbar{background:var(--surface);border-bottom:0.5px solid var(--border);padding:0 26px;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.topbar-title{font-family:var(--fd);font-size:15px;font-weight:800;color:var(--ink)}
.topbar-date{font-size:11px;color:var(--muted)}
.notif-btn{width:34px;height:34px;border-radius:var(--rsm);border:0.5px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:15px}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--red);position:absolute;top:5px;right:5px;border:1.5px solid var(--surface)}
.content-area{flex:1;padding:22px 26px;overflow-y:auto}
/* Metrics */
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.metric-card{background:var(--surface);border-radius:var(--rmd);border:0.5px solid var(--border);padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.metric-label{font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:500}
.metric-val{font-family:var(--fd);font-size:24px;font-weight:800;color:var(--ink);margin-bottom:4px}
.metric-change{font-size:10px;font-weight:600}
.metric-change.up{color:var(--green)}.metric-change.down{color:var(--red)}.metric-change.flat{color:var(--muted)}
/* Cards */
.card{background:var(--surface);border-radius:var(--rmd);border:0.5px solid var(--border);padding:20px;margin-bottom:16px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-family:var(--fd);font-size:12px;font-weight:800;color:var(--ink)}
.card-action{font-size:11px;color:var(--gold);font-weight:700;font-family:var(--fd);cursor:pointer;border:none;background:none}
/* Tables */
.data-table{width:100%;border-collapse:collapse;table-layout:fixed}
.data-table th{font-size:10px;font-weight:700;font-family:var(--fd);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:0 8px 10px 0;border-bottom:0.5px solid var(--border)}
.data-table td{padding:11px 8px 11px 0;border-bottom:0.5px solid var(--border);font-size:12px;color:var(--ink2);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--cream)}
.order-id{font-family:var(--fd);font-weight:700;font-size:11px;color:var(--muted)}
/* Badges */
.badge{display:inline-flex;align-items:center;font-size:9px;font-weight:700;font-family:var(--fd);padding:3px 10px;border-radius:var(--rpill);letter-spacing:.05em;white-space:nowrap;text-transform:capitalize}
.badge-pending{background:var(--abg);color:var(--amber)}
.badge-picked_up,.badge-drying{background:var(--bbg);color:var(--blue)}
.badge-cleaning{background:var(--gl);color:var(--gd)}
.badge-ready{background:var(--gbg);color:var(--green)}
.badge-delivered{background:#EFEEED;color:#5A5750}
/* Tags */
.tag{display:inline-block;font-size:9px;font-weight:700;font-family:var(--fd);padding:2px 8px;border-radius:var(--rpill)}
.tag-vip{background:var(--gl);color:var(--gd)}.tag-sub{background:var(--bbg);color:var(--blue)}.tag-new{background:var(--gbg);color:var(--green)}
/* Btns */
.btn-sm{font-size:10px;font-weight:700;font-family:var(--fd);border:0.5px solid var(--bs);border-radius:6px;padding:4px 10px;background:none;cursor:pointer;color:var(--ink);transition:background .1s;display:inline-block}
.btn-sm:hover{background:var(--cream)}.btn-sm.green{color:var(--green);border-color:var(--green)}.btn-sm.red{color:var(--red);border-color:var(--red)}
/* Forms */
.form-input{padding:8px 12px;font-size:12px;font-family:var(--fb);border:0.5px solid var(--bs);border-radius:6px;background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s}
.form-input:focus{border-color:var(--gold)}.form-select{padding:7px 10px;font-size:11px;font-family:var(--fb);border:0.5px solid var(--bs);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}
/* Alerts */
.alert{padding:10px 16px;border-radius:var(--rsm);font-size:12px;margin-bottom:14px;line-height:1.5}
.alert-success{background:var(--gbg);color:var(--green)}.alert-error{background:var(--rbg);color:var(--red)}.alert-info{background:var(--bbg);color:var(--blue)}
/* Layout */
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.mb-4{margin-bottom:16px}
/* Spinner */
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}
/* Responsive */
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.sidebar{display:none}}