/* DM Sans loaded via <link> in HTML head */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#111;--white:#fff;--bg:#f7f7f7;--surface:#fff;
  --border:#e8e8e8;--text:#111;--muted:#888;--faint:#bbb;
  --radius:7px;--sidebar:210px;--font:'DM Sans','Segoe UI',sans-serif;
}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font)}

/* Layout */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:#fafafa;border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;flex-shrink:0;overflow-y:auto}
.main-content{flex:1;padding:28px 32px;overflow-y:auto;max-height:100vh}

/* Sidebar */
.sidebar-logo{padding:14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px}
.logo-box{height:120px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-name{font-size:14px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.plan-badge{font-size:9px;font-weight:700;background:#efefef;color:#555;padding:1px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.nav-group{font-size:9px;font-weight:700;color:#ccc;letter-spacing:.12em;text-transform:uppercase;padding:14px 11px 5px}
.nav-item{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;padding:6px 11px;border-radius:5px;border:none;background:transparent;color:#555;font-size:13px;font-weight:400;margin-bottom:1px;transition:all .1s}
.nav-item:hover{background:#f0f0f0;color:var(--black)}
.nav-item.active{background:var(--black);color:var(--white);font-weight:600}
.sidebar-footer{padding:12px 14px;border-top:1px solid var(--border);margin-top:auto}
.usage-label{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:5px}
.usage-track{height:3px;background:#efefef;border-radius:2px}
.usage-fill{height:100%;border-radius:2px;background:var(--black);transition:width .4s}
.usage-fill.warn{background:#c00}
.sidebar-signout{font-size:11px;color:var(--faint);background:none;border:none;cursor:pointer;padding:0;margin-top:10px;display:block;text-align:left;width:100%}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.card-pad{padding:20px}
.card-pad-sm{padding:14px}

/* Page header */
.page-header{margin-bottom:22px}
.page-title{font-size:18px;font-weight:800;letter-spacing:-.02em}
.page-sub{font-size:12px;color:var(--muted);margin-top:3px}
.page-divider{height:1px;background:#efefef;margin-top:14px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;font-size:13px;font-weight:600;border-radius:6px;border:none;transition:opacity .15s;cursor:pointer;letter-spacing:.01em}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:hover:not(:disabled){opacity:.82}
.btn-primary{background:var(--black);color:var(--white)}
.btn-outline{background:var(--white);color:#333;border:1px solid #ccc}
.btn-ghost{background:transparent;color:var(--muted);border:none}
.btn-danger{background:var(--white);color:#c00;border:1px solid #fca5a5}
.btn-sm{padding:5px 13px;font-size:11px}
.btn-full{width:100%;justify-content:center}

/* Forms */
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;display:flex;gap:6px;align-items:center}
.field label .req{color:#ccc}
.field label .fetching{font-size:9px;color:#3b82f6;font-weight:600;text-transform:none;letter-spacing:0}
.input,.select,.textarea{width:100%;padding:8px 11px;border:1px solid #d5d5d5;border-radius:6px;font-size:13px;font-family:var(--font);background:var(--white);color:var(--black);outline:none;transition:border-color .15s}
.input:focus,.select:focus,.textarea:focus{border-color:#888}
.input[readonly]{background:#fafafa;color:#888}
.field .hint{font-size:10px;color:#3b82f6;font-weight:500}
.field .note{font-size:10px;color:var(--muted)}
.form-grid{display:grid;gap:12px}
.form-grid-2{grid-template-columns:1fr 1fr}
.form-grid-4{grid-template-columns:repeat(4,1fr)}
.col-span-2{grid-column:span 2}
.section-label{font-size:10px;font-weight:700;color:#aaa;letter-spacing:.1em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid #f0f0f0;margin-bottom:14px}
.section-num{color:#ddd;margin-right:8px}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:22px}
.tab-btn{padding:9px 20px;border:none;background:transparent;font-family:var(--font);font-size:13px;font-weight:400;color:#aaa;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .1s}
.tab-btn.active{font-weight:700;color:var(--black);border-bottom-color:var(--black)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Table */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:12px}
.data-table th{padding:9px 12px;text-align:left;color:#aaa;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:#fafafa;border-bottom:2px solid var(--border)}
.data-table td{padding:9px 12px;border-bottom:1px solid #f5f5f5;vertical-align:middle}
.data-table tr:hover td{background:#fafafa}
.data-table .mono{font-family:monospace;font-size:11px}
.table-empty{text-align:center;padding:44px;color:var(--faint);font-size:13px}
.table-footer{padding:10px 16px;border-top:1px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center}
.table-footer-note{font-size:11px;color:var(--faint)}

/* Status badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.badge-Booked{background:#f3f3f3;color:#444}.badge-Booked::before{background:#999}
.badge-Pending{background:#fff8ec;color:#92400e}.badge-Pending::before{background:#f59e0b}
.badge-In-Transit{background:#eff6ff;color:#1e40af}.badge-In-Transit::before{background:#3b82f6}
.badge-Out-for-Delivery{background:#f0fdf4;color:#166534}.badge-Out-for-Delivery::before{background:#22c55e}
.badge-Delivered{background:#111;color:#fff}.badge-Delivered::before{background:#fff}
.badge-RTO{background:#fef2f2;color:#991b1b}.badge-RTO::before{background:#ef4444}
.badge-Cancelled{background:#fafafa;color:#888}.badge-Cancelled::before{background:#ccc}

/* Toggle */
.toggle-wrap{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.toggle-track{width:36px;height:20px;border-radius:20px;background:#ddd;position:relative;transition:background .2s;flex-shrink:0}
.toggle-track.on{background:var(--black)}
.toggle-knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-track.on .toggle-knob{left:18px}
.toggle-label{font-size:12px;color:#555;font-weight:500}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}
.modal-box{background:var(--white);border:1px solid #ddd;border-radius:10px;padding:28px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.12)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-title{font-size:15px;font-weight:800}
.modal-close{background:none;border:none;font-size:22px;cursor:pointer;color:#bbb;line-height:1}

/* Upload zone */
.upload-zone{border:1.5px dashed #d0d0d0;border-radius:8px;padding:32px 20px;text-align:center;cursor:pointer;background:var(--white);transition:all .2s}
.upload-zone.has-file{border-color:#999;background:#fafafa}
.upload-zone:hover{border-color:#999}
.upload-icon{font-size:28px;margin-bottom:8px}
.upload-text{font-weight:600;font-size:13px;color:#333}
.upload-sub{font-size:12px;color:#bbb;margin-top:3px}

/* Alerts & toasts */
.alert{padding:10px 14px;border-radius:6px;font-size:12px;margin-bottom:12px}
.alert-error{background:#fef2f2;color:#991b1b;border:1px solid #fca5a5}
.alert-success{background:#f0fdf4;color:#166534;border:1px solid #86efac}
.alert-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;background:var(--black);box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(20px);opacity:0;transition:all .3s;z-index:9999;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}
.toast-error{background:#c00}
.toast-success{background:#166534}

/* Auth page */
.auth-page{min-height:100vh;background:#fafafa;display:flex;align-items:center;justify-content:center;padding:16px}
.auth-wrap{width:100%;max-width:440px}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo-inner{display:inline-flex;align-items:center;gap:10px}
.auth-card{background:var(--white);border:1px solid var(--border);border-radius:8px;padding:28px}
.auth-title{font-size:17px;font-weight:800;margin-bottom:4px}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.5}
.auth-link{background:none;border:none;color:var(--black);font-weight:700;cursor:pointer;font-family:var(--font);font-size:12px}
.or-divider{display:flex;align-items:center;gap:12px;margin:14px 0}
.or-line{flex:1;height:1px;background:#f0f0f0}
.or-text{font-size:11px;color:#ccc;font-weight:600}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plan-card{padding:10px 6px;border:1.5px solid #e5e5e5;border-radius:7px;background:var(--white);cursor:pointer;text-align:center;transition:all .15s}
.plan-card.sel{border-color:var(--black);background:var(--black)}
.plan-card-name{font-size:12px;font-weight:700;color:var(--black)}
.plan-card.sel .plan-card-name,.plan-card.sel .plan-card-price,.plan-card.sel .plan-card-ships{color:var(--white)}
.plan-card-price{font-size:10px;color:#bbb;margin-top:2px}
.plan-card-ships{font-size:9px;color:#ccc;margin-top:1px}

/* Tracking timeline */
.timeline{padding-left:24px;position:relative}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:#ececec}
.timeline-item{position:relative;margin-bottom:16px}
.timeline-dot{position:absolute;left:-24px;top:3px;width:14px;height:14px;border-radius:50%;border:2px solid #ddd;background:var(--white)}
.timeline-dot.done{border-color:var(--black);background:#555}
.timeline-dot.active{border-color:var(--black);background:var(--black)}
.timeline-item.dim{opacity:.3}
.timeline-step{font-size:12px;font-weight:500}
.timeline-step.active{font-weight:700}
.timeline-desc{font-size:11px;color:var(--muted);margin-top:2px}

/* Mobile header */
.mobile-header{display:none;justify-content:space-between;align-items:center;margin-bottom:20px}
.mobile-header .logo-row{display:flex;align-items:center;gap:8px}
.mobile-header .logo-row span{font-size:15px;font-weight:800;letter-spacing:-.03em}
.avatar-btn{width:28px;height:28px;background:var(--black);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:13px;font-weight:700;border:none;cursor:pointer}

/* Bottom nav */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--border);z-index:100}
.bottom-nav-inner{display:flex;padding-bottom:env(safe-area-inset-bottom)}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px 8px;border:none;background:transparent;cursor:pointer;font-family:var(--font);text-decoration:none}
.bn-item.primary{background:var(--black)}
.bn-item.active{background:#f5f5f5}
.bn-icon{font-size:18px;line-height:1}
.bn-label{font-size:9px;font-weight:500;color:#aaa;margin-top:3px}
.bn-item.active .bn-label{font-weight:700;color:var(--black)}
.bn-item.primary .bn-label{color:var(--white)}

/* Service cards */
.service-card{text-align:left;padding:11px 13px;border:1.5px solid #e5e5e5;border-radius:7px;background:var(--white);cursor:pointer;width:100%;font-family:var(--font);transition:all .15s;margin-bottom:8px}
.service-card.sel{border-color:var(--black);background:var(--black)}
.service-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.service-name{font-size:13px;font-weight:700;margin-bottom:2px}
.service-card.sel .service-name,.service-card.sel .service-tat,.service-card.sel .service-price{color:var(--white)}
.service-card.sel .service-tat{color:#aaa}
.service-tat{font-size:11px;color:#bbb}
.service-price{font-size:15px;font-weight:800}

/* Misc */
.info-box{padding:12px 13px;border:1px solid var(--border);border-radius:7px;font-size:11px;color:#999;line-height:1.8}
.info-box-title{font-weight:700;color:#555;font-size:10px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}
.vol-box{margin-top:10px;padding:8px 12px;background:#f7f7f7;border-radius:5px;font-size:12px;color:#666;display:flex;gap:24px;border:1px solid #f0f0f0;flex-wrap:wrap}
.vol-box strong{color:var(--black)}
.divider{height:1px;background:#f0f0f0;margin:16px 0}
.empty-state{padding:40px;text-align:center}
.empty-icon{font-size:32px;margin-bottom:12px}
.empty-title{font-weight:700;color:#333;margin-bottom:6px}
.empty-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.wh-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:12px}
.wh-card-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px}
.wh-name{font-size:14px;font-weight:700}
.wh-detail{font-size:12px;color:#555;margin-top:2px}
.wh-sub{font-size:11px;color:var(--muted);margin-top:2px}
.wh-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.default-pill{font-size:9px;font-weight:700;background:var(--black);color:var(--white);padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em}
.rto-pill{font-size:9px;font-weight:700;background:#fef2f2;color:#991b1b;border:1px solid #fca5a5;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.06em}
.label-preview{border:1px solid #e8e8e8;border-radius:7px;overflow:hidden;margin-top:12px}
.label-preview-hdr{padding:8px 12px;color:var(--white);font-size:11px;font-weight:700}
.label-preview-body{padding:12px;background:#fafafa;font-size:11px;color:#555;line-height:1.8}
.label-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.label-tag-on{font-size:10px;padding:2px 8px;background:#f5f5f5;border-radius:20px;color:#555;font-weight:500}
.label-tag-off{font-size:10px;padding:2px 8px;background:#fafafa;border-radius:20px;color:#ccc;text-decoration:line-through}
.color-swatches{display:flex;gap:8px;align-items:center}
.swatch{width:24px;height:24px;border-radius:5px;border:2px solid transparent;cursor:pointer}
.swatch.sel{border-color:#888}

/* Scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:#e0e0e0;border-radius:4px}

/* Responsive */
@media(max-width:768px){
  .sidebar{display:none}
  .main-content{padding:18px 14px;max-height:none;padding-bottom:80px}
  .mobile-header{display:flex}
  .bottom-nav{display:block}
  .form-grid-2{grid-template-columns:1fr}
  .form-grid-4{grid-template-columns:1fr 1fr}
  .col-span-2{grid-column:span 1}
  .hide-mobile{display:none!important}
  .show-mobile{display:block!important}
  .page-title{font-size:16px}
  .modal-box{padding:20px}
}
@media(min-width:769px){.show-mobile{display:none!important}}