:root{
  /* Brand / semantic */
  --primary:#000; --on-primary:#fff;
  --accent:#10B981; --info:#2563EB; --warn:#F59E0B; --error:#EF4444;
  /* Gray scale Untitled */
  --n-25:#FCFCFD; --n-50:#F9FAFB; --n-75:#F6F7F9; --n-100:#F2F4F7;
  --n-200:#EAECF0; --n-300:#D0D5DD; --n-400:#98A2B3; --n-500:#667085;
  --n-600:#475467; --n-700:#344054; --n-800:#1D2939; --n-900:#101828;
  /* Surfaces */
  --bg:#F7F7FA; --surface:#FFFFFF; --surface-alt:#F9FAFB; --divider:#EAECF0;
  /* Typography */
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(36px, 4vw, 48px);
  --h2: 30px; --lh-h2: 1.3;
  --h3: 20px; --lh-h3: 1.9;
  --fs-base: 16px; --lh-base: 1.5;
  --fs-sm: 14px; --lh-sm: 1.25; --fs-xs: 12px; --lh-xs: 1.1;
  /* Weight */
  --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; --w-xb:800;
  /* Spacing (8px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  /* Radius & shadow */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --pill:999px;
  --shadow-xs: 0 1px 2px rgba(16,24,40,.06);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,.12);
  --container:1200px;
}
body { background: var(--bg); color: var(--n-800); font: var(--fs-base)/var(--lh-base) var(--font); }
/* Shell */
.con-sidebar { background:#000; color:#fff }
.con-sidebar .nav a { display:flex; gap:10px; padding:10px 12px; border-radius:8px;
  color:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.08); transition:background .14s;}
.con-sidebar .nav a:hover { background:rgba(255,255,255,.08) }
.con-sidebar .nav a.is-active { background:#fff; color:#000; border-color:transparent }
.con-topbar { background:#fff; border-bottom:1px solid var(--divider) }
/* Card */
.con-card { background:#fff !important; border:1px solid var(--divider) !important; border-radius:12px !important; box-shadow:var(--shadow-sm) !important; padding:24px !important; }
/* Buttons */
.con-btn { height:40px !important; padding:0 16px !important; border-radius:8px !important; border:1px solid var(--n-800) !important;
  background: var(--n-900) !important; color:#fff !important; font-weight: var(--w-semibold) !important; box-shadow:var(--shadow-sm) !important; }
.con-btn:hover { box-shadow:var(--shadow-md) }
.con-btn--outline { background:#fff !important; color: var(--n-900) !important; border:1px solid var(--n-300) !important; box-shadow:var(--shadow-xs) !important; }
/* Icon button */
.con-iconbtn { width:32px !important; height:32px !important; display:inline-grid !important; place-items:center !important;
  border:1px solid var(--n-300) !important; border-radius:8px !important; background:#fff !important; color:var(--n-700) !important; }
.con-iconbtn:hover { background:var(--n-50); border-color:var(--n-400) }
/* Input */
.con-input { height:44px !important; padding:0 14px !important; border:1px solid var(--n-300) !important; border-radius:8px !important; background:#fff !important; }
.con-input::placeholder { color:var(--n-400) }
/* Badges */
.con-badge { display:inline-flex !important; align-items:center !important; height:26px !important; padding:0 10px !important; border-radius:999px !important;
  font: var(--w-bold) var(--fs-xs)/var(--lh-xs) var(--font) !important; }
.con-badge--success { color:#067647; background:#D1FADF }
.con-badge--warn { color:#B54708; background:#FEEFC7 }
.con-badge--error { color:#B42318; background:#FEE4E2 }
/* Table */
.con-table { overflow:auto; border:1px solid var(--divider); border-radius:10px; background:#fff; }
.con-table table { width:100%; border-collapse:collapse; font: var(--fs-sm)/var(--lh-sm) var(--font); }
.con-table thead th { background: var(--surface-alt); border-bottom:1px solid var(--divider); color:var(--n-700);
  font-weight: var(--w-semibold); text-align:left; padding:14px 16px; height:56px; }
.con-table tbody td { border-bottom:1px solid var(--divider); color:var(--n-700); padding:14px 16px; height:56px; }
.con-table tbody tr:nth-child(even) { background: var(--n-50) }