:root{
  --brand-900:#0B2E3D; --brand-800:#0F3F52; --brand-700:#125166; --brand-600:#16687F; --brand-500:#1A8298;
  --accent:#00B3A4; --accent-dark:#019485; --violet:#7C4DFF; --amber:#F5A623; --coral:#FF6B6B;
  --ink:#1B2430; --muted:#64748B; --line:#E2E8F0; --line-soft:#EEF2F6;
  --bg:#F4F7FA; --card:#FFFFFF; --sidebar-bg:#0B2E3D; --sidebar-hover:#12435A; --sidebar-active:#00B3A4;
  --danger:#DC3545; --danger-bg:#FDECEC; --success:#12875A; --success-bg:#E5F7EF; --warn:#B7791F; --warn-bg:#FFF6E0;
  --radius:14px; --shadow:0 10px 28px rgba(11,46,61,.08);
  --sidebar-w:250px; --sidebar-w-collapsed:68px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',Inter,Roboto,Arial,sans-serif;color:var(--ink);
  background:var(--bg);
  min-height:100vh;
}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--line-soft);padding:1px 6px;border-radius:4px;font-size:12px}

/* ---------------- Layout shell: fixed left sidebar + content ---------------- */
.app-shell{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;background:linear-gradient(180deg,var(--sidebar-bg),#0A2735 85%);
  color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;
  transition:width .18s ease;overflow-x:hidden;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.sidebar-brand{padding:20px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.sidebar-brand .logo-dot{width:30px;height:30px;border-radius:9px;background:var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#053b34}
.sidebar-brand .brand-text{font-weight:800;font-size:15px}
.sidebar-brand .brand-text span{display:block;font-weight:400;font-size:10.5px;opacity:.6;margin-top:1px}
.sidebar.collapsed .brand-text,.sidebar.collapsed .nav-label,.sidebar.collapsed .user-chip .who{display:none}

.sidebar-toggle{background:rgba(255,255,255,.08);border:0;color:#fff;width:26px;height:26px;border-radius:6px;cursor:pointer;flex-shrink:0;margin-left:auto}
.sidebar-toggle:hover{background:rgba(255,255,255,.18)}

.sidebar-nav{flex:1;overflow-y:auto;padding:14px 10px}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.82);padding:10px 12px;border-radius:10px;
  font-size:13.5px;font-weight:600;margin-bottom:3px;white-space:nowrap;
}
.sidebar-nav a:hover{background:var(--sidebar-hover);text-decoration:none;color:#fff}
.sidebar-nav a.active{background:var(--accent);color:#053b34}
.sidebar-nav .nav-icon{width:18px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:14px}

.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08)}
.user-chip{display:flex;align-items:center;gap:10px;font-size:12px;color:#fff}
.user-chip .avatar{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0}
.user-chip .who{overflow:hidden}
.user-chip .who .name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-chip .who .role{opacity:.65;font-size:11px}
.btn-link{background:none;border:0;color:rgba(255,255,255,.7);font-weight:700;font-size:11.5px;cursor:pointer;text-decoration:underline;padding:0;margin-top:6px}
.btn-link:hover{color:#fff}

.content-area{flex:1;margin-left:var(--sidebar-w);transition:margin-left .18s ease;min-width:0}
.content-area.collapsed{margin-left:var(--sidebar-w-collapsed)}
.content-area.no-sidebar{margin-left:0}
.page{max-width:1400px;margin:0 auto;padding:26px 30px 60px}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .content-area{margin-left:0}
}

/* ---------------- Cards & typography ---------------- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line-soft);padding:22px}
.card + .card{margin-top:18px}
h1.page-title{color:var(--brand-800);margin:0 0 6px;font-size:25px;font-weight:800}
p.page-subtitle{color:var(--muted);margin:0 0 20px;line-height:1.55;font-size:14px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:var(--brand-800);color:#fff;font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
tbody tr:hover{background:var(--line-soft)}

label{display:block;font-weight:700;margin-bottom:5px;color:#334155;font-size:12.5px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13.5px;font-family:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{resize:vertical}
.field{margin-bottom:14px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

button, .btn{border:0;border-radius:9px;padding:10px 16px;font-weight:700;cursor:pointer;font-size:13px;display:inline-block}
.btn-primary{background:var(--brand-700);color:#fff}
.btn-primary:hover{background:var(--brand-800)}
.btn-secondary{background:#EAF0F4;color:var(--brand-800)}
.btn-secondary:hover{background:#DCE6EC}
.btn-green{background:var(--accent);color:#04352F}
.btn-green:hover{background:var(--accent-dark);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-orange{background:var(--amber);color:#402900}
.btn-sm{padding:6px 10px;font-size:12px}

.badge{display:inline-block;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:700}
.badge-teal{background:#E1F6F3;color:var(--accent-dark)}
.badge-green{background:var(--success-bg);color:var(--success)}
.badge-orange{background:var(--warn-bg);color:var(--warn)}
.badge-red{background:var(--danger-bg);color:var(--danger)}
.badge-gray{background:#EDF1F5;color:#475569}

.stat-box{background:#fff;border:1px solid var(--line-soft);border-left:4px solid var(--brand-600);border-radius:14px;padding:18px;text-align:center}
.stat-box .num{font-size:30px;font-weight:800;color:var(--brand-800);line-height:1.1}
.stat-box .lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.stat-box .icon{font-size:20px;margin-bottom:4px}
/* Category color variants - cycle these across a row of tiles so each
   category/metric is visually distinct rather than uniformly gray. */
.stat-box-teal{border-left-color:var(--accent)}
.stat-box-teal .num{color:var(--accent-dark)}
.stat-box-violet{border-left-color:var(--violet)}
.stat-box-violet .num{color:var(--violet)}
.stat-box-amber{border-left-color:var(--amber)}
.stat-box-amber .num{color:#8A5A00}
.stat-box-coral{border-left-color:var(--coral)}
.stat-box-coral .num{color:#C23B3B}
.stat-box-blue{border-left-color:var(--brand-600)}
.stat-box-blue .num{color:var(--brand-700)}
.stat-box-green{border-left-color:var(--success)}
.stat-box-green .num{color:var(--success)}

.empty-state{text-align:center;padding:50px 20px;color:var(--muted)}
.section-title{font-weight:800;color:var(--brand-800);margin:20px 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.helper{font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}
.divider{height:1px;background:var(--line-soft);margin:18px 0}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chip{display:inline-block;background:var(--line-soft);border:1px solid var(--line);
  color:var(--brand-800);padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;margin:3px 4px 3px 0}
.progress-track{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;border-radius:4px}

/* ---------------- Plan cards (subscription page) ---------------- */
.plan-card{background:#fff;border:2px solid var(--line-soft);border-radius:16px;padding:22px;position:relative;display:flex;flex-direction:column;transition:.15s}
.plan-card.current{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,179,164,.12)}
.plan-card.locked{opacity:.55}
.plan-card .plan-name{font-weight:800;font-size:15px;color:var(--brand-800)}
.plan-card .plan-price{font-size:30px;font-weight:800;color:var(--brand-800);margin:10px 0 2px}
.plan-card .plan-price span{font-size:12px;font-weight:600;color:var(--muted)}
.plan-card .plan-desc{font-size:12.5px;color:var(--muted);margin-bottom:12px;min-height:32px}
.plan-card .plan-feature{font-size:12.5px;color:#334155;padding:5px 0;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between}
.plan-card .current-badge{position:absolute;top:-11px;right:16px;background:var(--accent);color:#04352F;font-size:10.5px;font-weight:800;padding:4px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.search-select-hint{font-size:11px;color:var(--muted);margin-top:3px}

/* ---------------- Simple SVG chart helpers ---------------- */
.chart-card{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:18px}
.chart-card .chart-title{font-size:12.5px;font-weight:800;color:var(--brand-800);text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted)}
.legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}