:root{
  --bg:#f6f7fb;
  --card:rgba(255,255,255,.86);
  --text:rgba(15,23,42,.92);
  --muted:rgba(15,23,42,.62);
  --border:rgba(15,23,42,.10);
  --shadow:0 18px 50px rgba(2,6,23,.10);
  --brand:#2563eb;
  --brand2:#7c3aed;
}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 500px at 80% 80%, rgba(124,58,237,.10), transparent 60%),
    linear-gradient(180deg,#ffffff,var(--bg));
}
body.theme-dark{
  --bg:#0b1220;
  --card:rgba(11,18,32,.92);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --border:rgba(255,255,255,.14);
  --shadow:0 20px 60px rgba(0,0,0,.35);
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 80%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(180deg,#0b1220,#0b1220);
}
body.theme-dark{
  --bg:#0b1220;
  --card:rgba(11,18,32,.92);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --border:rgba(255,255,255,.14);
  --shadow:0 20px 60px rgba(0,0,0,.35);
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(37,99,235,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 80%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(180deg,#0b1220,#0b1220);
}
.wrap{width:100%;max-width:1060px;margin:0 auto;padding:0 18px}
.main{padding:22px 1px 40px !important; overflow-x:hidden;}
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.theme-dark .topbar .btn{color:#0f172a}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--text)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{height:26px;width:auto;display:block}
.nav{display:flex;gap:12px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--muted);font-weight:600;font-size:14px}
.nav a:hover{color:var(--text)}
.nav a.muted{opacity:.7}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px;
}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:1.2fr .8fr}
@media (max-width:860px){.grid.two{grid-template-columns:1fr}}
.h1{font-size:clamp(24px,3vw,34px);line-height:1.1;margin:0 0 10px}
.p{color:var(--muted);margin:0 0 14px;line-height:1.6}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);background:#fff;
  font-weight:700;color:var(--text);cursor:pointer;text-decoration:none;
}
.btn-icon{width:18px;height:18px;display:block}
.btn-icon{width:18px;height:18px;display:block}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:#fff;border:none}
.btn.danger{background:#fff;border-color:rgba(239,68,68,.35);color:#b91c1c}
.btn:disabled{opacity:.6;cursor:not-allowed}
.input,select,textarea{
  width:100%;padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);background:rgba(255,255,255,.92);outline:none;
  font-size:16px;
}

label{font-size:13px;color:var(--muted);font-weight:700;display:block;margin:12px 0 6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:760px){.row{grid-template-columns:1fr}}
.alert{border-radius:14px;padding:12px 14px;border:1px solid var(--border);margin-bottom:12px}
.alert-error{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.06)}
.alert-success{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.07)}
.table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px;border:1px solid var(--border)}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px;text-align:left}
.table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.65);font-size:12px;color:var(--muted)}


/* Sidebar + hamburger */
.topbar-right{display:flex;align-items:center;gap:10px}
.icon-btn{border:1px solid var(--border);background:rgba(255,255,255,.7);border-radius:12px;padding:10px;cursor:pointer}
.hamburger{display:none;gap:4px;flex-direction:column}
.hamburger span{display:block;width:18px;height:2px;background:rgba(15,23,42,.72);border-radius:2px}
.app-shell{display:flex;min-height:calc(100vh - 64px);}
.sidebar{
  width:260px;
  flex:0 0 260px;
  border-right:1px solid var(--border);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  overflow-y:auto;
  padding-bottom:24px;
}
.sidebar-inner{padding:16px;}
.sidebar-title{font-weight:800;color:rgba(15,23,42,.88);margin:6px 0 10px}
.side-nav{display:grid;gap:8px}
.side-nav a{color:rgba(15,23,42,.86);text-decoration:none;padding:10px 10px;border-radius:12px;border:1px solid transparent}
.side-nav a:hover{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.12)}
.side-nav a.active{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.30);color:rgba(15,23,42,.96)}
.side-nav a.active{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.30);color:rgba(15,23,42,.96)}
.side-nav-toggle{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  border:1px solid rgba(37,99,235,.16);
  background:linear-gradient(90deg, rgba(37,99,235,.10), rgba(124,58,237,.06));
  padding:10px 12px;border-radius:12px;
  color:rgba(15,23,42,.86);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:900;
  cursor:pointer;
}
.side-nav-caret{
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid rgba(15,23,42,.7);
  transition:transform .15s ease;
}
.side-nav-toggle.open .side-nav-caret{transform:rotate(180deg)}
.side-nav-panel{display:grid;gap:6px;padding-left:8px}
.side-nav-panel[hidden]{display:none}

/* Footer */
.site-footer{
  margin-top:24px;
  border-top:1px solid var(--border);
  background:rgba(255,255,255,.75);
}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 0;
}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-brand img{height:28px;width:auto}
.footer-title{font-weight:900;letter-spacing:.02em}
.footer-sub{font-size:12px;color:var(--muted)}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}
.footer-links a{color:rgba(15,23,42,.8);text-decoration:none;display:inline-flex;align-items:center}
.footer-links a:hover{text-decoration:underline}
.footer-cta{display:flex;gap:10px;align-items:center}
.theme-dark .footer-cta .btn{color:#0f172a}
.sidebar-backdrop{display:none}

.main{flex:1;padding:22px 18px 40px}

/* Mobile drawer */
@media (max-width: 900px){
  .hamburger{display:inline-flex}
  .sidebar{
    position:fixed;
    top:64px; left:0;
    height:calc(100vh - 64px);
    transform:translateX(-102%);
    transition:transform .2s ease;
    z-index:60;
    box-shadow:0 20px 60px rgba(0,0,0,.25);
  }
  .sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.35);
    opacity:0;
    transition:opacity .2s ease;
    z-index:55;
    pointer-events:none;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar.open + .sidebar-backdrop{opacity:1;pointer-events:auto}
}
@media (min-width: 901px){
  .hamburger{display:none}
}


/* iOS: prevent input zoom */
input, select, textarea { font-size:16px; }
html{ -webkit-text-size-adjust: 100%; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Responsive tables */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;}
.table{min-width:720px;}
@media (max-width:760px){
  .table{min-width:640px;}
  .btn{white-space:nowrap;}
  .footer-links{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .footer-cta{
    width:100%;
    justify-content:center;
  }
}

/* Status select colors */
.status-select{font-weight:800;border-radius:999px;padding:8px 10px;}
.status-pending{background:rgba(234,179,8,.14);border-color:rgba(234,179,8,.35);color:#92400e}
.status-processing{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.30);color:#1d4ed8}
.status-shipped{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.30);color:#6d28d9}
.status-delivered{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.30);color:#15803d}
.status-canceled{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30);color:#b91c1c}