:root{
  --hd-bg:#f5f7fb;
  --hd-surface:#ffffff;
  --hd-surface-2:#f8fafc;
  --hd-border:#e7eaf0;
  --hd-text:#172033;
  --hd-muted:#6f7a8b;
  --hd-primary:#5b5ce2;
  --hd-primary-2:#7c4dff;
  --hd-primary-soft:#f0efff;
  --hd-sidebar:#111827;
  --hd-sidebar-2:#182237;
  --hd-green:#16a34a;
  --hd-amber:#d97706;
  --hd-red:#dc2626;
  --hd-radius:18px;
  --hd-shadow:0 10px 30px rgba(20,31,54,.06);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#f8f9fd 0,#f4f6fa 100%);
  color:var(--hd-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:#4f46e5}

/* App shell */
.sidebar{
  width:270px;
  min-height:100vh;
  background:
    radial-gradient(circle at 15% 0%,rgba(124,77,255,.22),transparent 24%),
    linear-gradient(180deg,#111827 0%,#0d1422 100%);
  color:#dbe4f0;
  position:fixed;
  inset:0 auto 0 0;
  z-index:1040;
  overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:16px 0 42px rgba(15,23,42,.08);
}
.sidebar-inner{padding:22px 16px 28px}
.brand-wrap{display:flex;align-items:center;gap:12px;padding:3px 8px 19px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#7c4dff,#4f46e5);color:#fff;font-weight:900;font-size:18px;box-shadow:0 9px 24px rgba(91,92,226,.35)}
.brand-copy{min-width:0}.brand{font-weight:800;font-size:1.12rem;color:#fff;letter-spacing:-.02em;line-height:1.1}.brand-sub{font-size:11px;color:#8894aa;margin-top:4px}
.nav-section-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6f7d95;font-weight:800;padding:16px 12px 7px}
.sidebar nav{display:block}
.sidebar a.nav-item{color:#b7c2d4;text-decoration:none;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;margin:2px 0;font-weight:600;transition:.18s ease;position:relative}
.sidebar a.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(1px)}
.sidebar a.nav-item.active{background:linear-gradient(90deg,rgba(91,92,226,.26),rgba(124,77,255,.13));color:#fff;box-shadow:inset 0 0 0 1px rgba(129,140,248,.12)}
.sidebar a.nav-item.active:before{content:"";position:absolute;left:-4px;top:9px;bottom:9px;width:3px;border-radius:4px;background:#8b7cff}
.nav-icon{width:20px;height:20px;display:inline-grid;place-items:center;color:currentColor;opacity:.95;flex:0 0 20px}
.nav-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar-footer{padding-top:14px;margin-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar-footer .nav-item{font-size:13px}

.content{margin-left:270px;padding:28px 30px 44px;min-height:100vh;max-width:1900px}
.page-topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}
.page-title{font-weight:800;letter-spacing:-.035em;font-size:28px;line-height:1.12;margin:0;color:#172033}
.page-kicker{display:flex;align-items:center;gap:7px;color:var(--hd-muted);font-size:12px;margin-bottom:6px}.page-kicker-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.11)}
.page-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mobile-menu-btn{display:none;border:1px solid var(--hd-border);background:#fff;border-radius:11px;width:42px;height:42px;align-items:center;justify-content:center;box-shadow:var(--hd-shadow)}
.mobile-menu-btn svg{width:20px;height:20px}
.sidebar-overlay{display:none}

/* Cards / panels */
.card{border:1px solid var(--hd-border)!important;border-radius:var(--hd-radius)!important;background:rgba(255,255,255,.98)!important;box-shadow:var(--hd-shadow)!important}
.card-body{padding:22px!important}
.table-card{border:1px solid var(--hd-border)!important;border-radius:var(--hd-radius)!important;overflow:hidden;box-shadow:var(--hd-shadow)!important}
.metric{position:relative;overflow:hidden;min-height:126px}
.metric:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;right:-24px;top:-28px;background:radial-gradient(circle,rgba(91,92,226,.16),rgba(91,92,226,0) 70%)}
.metric .card-body{position:relative;z-index:1}.metric .text-muted{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.045em}.metric .h2{font-size:30px;font-weight:800;letter-spacing:-.04em;color:#111827;margin-top:8px}

/* ConnectReseller + settings hero */
.panel-hero{background:linear-gradient(135deg,#171d31 0%,#252a51 54%,#4c3d93 100%);border-radius:22px;padding:24px 26px;color:#fff;box-shadow:0 16px 42px rgba(39,42,86,.20);position:relative;overflow:hidden;margin-bottom:20px}
.panel-hero:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-120px;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%)}
.panel-hero h2{font-size:20px;font-weight:800;margin:0 0 5px}.panel-hero p{color:#d9def3;margin:0;max-width:780px}.panel-hero .hero-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.16);padding:6px 10px;font-weight:700;font-size:11px;margin-bottom:13px}
.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px}.status-card{background:#fff;border:1px solid var(--hd-border);border-radius:16px;padding:16px 18px;box-shadow:0 6px 18px rgba(20,31,54,.045)}.status-card-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--hd-muted);font-weight:800}.status-card-value{margin-top:6px;font-size:18px;font-weight:800;color:#1f2937}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}.status-dot.ok{background:#22c55e}.status-dot.warn{background:#f59e0b}
.section-heading{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px}.section-heading h2{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0}.section-heading p{font-size:12px;color:var(--hd-muted);margin:3px 0 0}

/* Forms */
.form-label{font-size:12px;font-weight:750;color:#4b5565;margin-bottom:7px}
.form-control,.form-select{border:1px solid #dfe3eb;border-radius:11px;min-height:42px;padding:.62rem .78rem;background:#fbfcfe;color:#1f2937;box-shadow:none;transition:.15s ease}
.form-control:focus,.form-select:focus{background:#fff;border-color:#8988ee;box-shadow:0 0 0 4px rgba(91,92,226,.10)}
.form-control::placeholder{color:#a4adba}.form-text,.text-muted{color:var(--hd-muted)!important}.form-text{font-size:11px;margin-top:6px}
.form-check-input{width:1.05rem;height:1.05rem;border-color:#cfd5df}.form-check-input:checked{background-color:var(--hd-primary);border-color:var(--hd-primary)}
hr{border-color:#edf0f4;opacity:1}

/* Buttons */
.btn{border-radius:10px;font-weight:700;font-size:13px;padding:.58rem .88rem;box-shadow:none!important;transition:.16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#5b5ce2,#7148e8);border-color:#5b5ce2}.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#4e50d7,#623bd8);border-color:#4e50d7}
.btn-success{background:#159447;border-color:#159447}.btn-outline-primary{border-color:#c8c7fb;color:#5253cf;background:#fff}.btn-outline-primary:hover{background:#efefff;color:#4748bd;border-color:#b9b8f7}.btn-outline-secondary{border-color:#d9dee8;color:#596477;background:#fff}.btn-outline-danger{border-color:#f2c4c7;color:#c53030;background:#fff}

/* Alerts */
.alert{border:0;border-radius:14px;padding:13px 15px;font-size:13px;box-shadow:0 5px 18px rgba(20,31,54,.04)}
.alert-info{background:#eef7ff;color:#285a7d;border-left:3px solid #55a6da}.alert-success{background:#edf9f1;color:#25613b;border-left:3px solid #45a565}.alert-warning{background:#fff8e8;color:#805a13;border-left:3px solid #e9ac3e}.alert-danger{background:#fff0f1;color:#7d2d34;border-left:3px solid #e26b75}

/* Tables */
.table-responsive{border-radius:13px}
.table{margin:0;--bs-table-bg:transparent;--bs-table-hover-bg:#f8f9fc}
.table>thead>tr>th,.table>tbody>tr:first-child>th{background:#f7f8fb;color:#697386;font-size:11px;text-transform:uppercase;letter-spacing:.055em;font-weight:800;border-bottom:1px solid #e7eaf0;padding:12px 13px;white-space:nowrap}
.table>tbody>tr>td{border-bottom:1px solid #edf0f4;padding:13px;color:#263142;vertical-align:middle}.table>tbody>tr:last-child>td{border-bottom:0}.table tbody tr:hover{background:#fafbfe}.table .form-control-sm{min-height:34px;border-radius:8px;padding:.35rem .55rem}
.badge{font-weight:750;border-radius:999px;padding:.42em .66em;letter-spacing:.01em}.text-bg-success{background:#e8f8ee!important;color:#19703b!important}.text-bg-warning{background:#fff4d9!important;color:#8b5a00!important}.text-bg-danger{background:#ffe7e9!important;color:#a82a34!important}.text-bg-info{background:#e8f5ff!important;color:#24618a!important}.text-bg-secondary{background:#eef1f5!important;color:#566274!important}

/* Login */
.login-wrap{max-width:445px;margin:8vh auto;border-radius:22px!important;box-shadow:0 22px 60px rgba(27,36,60,.12)!important}.login-wrap:before{content:"";display:block;height:6px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,#5b5ce2,#8b5cf6)}

/* Utility upgrades */
.h3{font-weight:800;letter-spacing:-.03em}.h5{font-weight:800;letter-spacing:-.015em}.small{font-size:12px!important}.fw-semibold{font-weight:700!important}
.content>.alert:first-of-type{margin-top:-4px}

@media(max-width:1100px){
  .status-grid{grid-template-columns:1fr 1fr}.status-grid .status-card:last-child{grid-column:1/-1}
}
@media(max-width:900px){
  body{overflow-x:hidden}.sidebar{transform:translateX(-100%);transition:.22s ease;width:275px}.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(2px);z-index:1030;opacity:0;pointer-events:none;transition:.2s}.sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}
  .content{margin-left:0;padding:18px 16px 34px}.mobile-menu-btn{display:inline-flex}.page-topbar{align-items:flex-start}.page-title{font-size:24px}.page-actions{justify-content:flex-end}
}
@media(max-width:620px){
  .content{padding:14px 12px 30px}.page-topbar{gap:10px}.page-actions{width:100%}.page-actions .btn{flex:1}.status-grid{grid-template-columns:1fr}.status-grid .status-card:last-child{grid-column:auto}.card-body{padding:17px!important}.panel-hero{padding:20px}.table-card .card-body{padding:14px!important}.sidebar{width:min(86vw,290px)}
}
/* Backward-compatible portal navigation */
.sidebar nav>a:not(.nav-item){color:#b7c2d4;text-decoration:none;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;margin:2px 0;font-weight:600;transition:.18s ease}
.sidebar nav>a:not(.nav-item):hover,.sidebar nav>a:not(.nav-item).active{background:rgba(91,92,226,.20);color:#fff}