/* ============================================================
   VPN Panel — Professional Page UI Layer
   2026-09-13
   UI ONLY. Scoped to page content/auth/landing. Base navigation,
   topbar and application behavior are intentionally untouched.
   ============================================================ */

:root{
  --pp-bg:#f4f7fb;
  --pp-surface:#ffffff;
  --pp-surface-2:#f8fbff;
  --pp-text:#0f172a;
  --pp-muted:#64748b;
  --pp-line:#dbe5f0;
  --pp-primary:#2563eb;
  --pp-primary-dark:#1d4ed8;
  --pp-cyan:#0891b2;
  --pp-green:#059669;
  --pp-red:#dc2626;
  --pp-amber:#d97706;
  --pp-radius:20px;
  --pp-radius-sm:14px;
  --pp-shadow:0 14px 38px rgba(15,23,42,.08);
  --pp-shadow-hover:0 20px 46px rgba(15,23,42,.12);
  --pp-hero:linear-gradient(120deg,#071426 0%,#123777 44%,#2563eb 76%,#0891b2 100%);
}

/* ---------- Authenticated page canvas (does not target sidebar/topbar) ---------- */
html body .layout .content main.page{
  background:
    radial-gradient(circle at 8% 0%,rgba(37,99,235,.08),transparent 28%),
    radial-gradient(circle at 96% 8%,rgba(8,145,178,.07),transparent 25%),
    var(--pp-bg)!important;
}
html body .layout .content main.page > *{min-width:0}

/* Main page headers — catches the different names already used by the project. */
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .print-wrap > .toolbar,.hotspot-hero > .hs-head,.hs-hero > .hs-head,
  .router-hero > .router-head,.hero > .head,.section-hero
){
  position:relative!important;isolation:isolate!important;overflow:hidden!important;
  margin:0 0 22px!important;padding:26px 28px!important;border-radius:24px!important;
  border:1px solid rgba(255,255,255,.15)!important;background:var(--pp-hero)!important;
  color:#fff!important;box-shadow:0 18px 42px rgba(30,64,175,.18)!important;
}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .print-wrap > .toolbar,.hotspot-hero > .hs-head,.hs-hero > .hs-head,
  .router-hero > .router-head,.hero > .head,.section-hero
)::before{
  content:""!important;display:block!important;position:absolute!important;z-index:-1!important;
  width:250px!important;height:250px!important;right:-85px!important;top:-145px!important;
  border-radius:50%!important;background:rgba(255,255,255,.14)!important;pointer-events:none!important;
}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .print-wrap > .toolbar,.hotspot-hero > .hs-head,.hs-hero > .hs-head,
  .router-hero > .router-head,.hero > .head,.section-hero
) :is(h1,h2,h3,h4,p,span,.page-title,.page-sub,.dashboard-title,.dashboard-sub,
  .vpn-title,.vpn-sub,.detail-title,.detail-sub,.hotspot-title,.hotspot-sub,
  .edit-title,.edit-sub,.router-title,.text-muted,.muted){color:#fff!important}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .print-wrap > .toolbar,.hotspot-hero > .hs-head,.hs-hero > .hs-head,
  .router-hero > .router-head,.hero > .head,.section-hero
) :is(a,button,.btn,.btn-soft,.btn-primary,.create-btn,.cancel-btn,.hero-link,.portal-btn){
  background:rgba(255,255,255,.13)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.26)!important;border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(2,12,27,.12)!important;
  backdrop-filter:blur(8px)!important;
}

/* ---------- Cards / panels ---------- */
html body .layout .content main.page :is(
  .card,.stat,.stat-card,.glass-card,.section-box,.summary-card,.detail-card,.filter-card,
  .service-card,.quick-card,.trust-card,.bill-wrap,.coupon-result,.section,.settings-card,
  .profile-card,.type-card,.balance-card,.recharge-card,.form-card,.panel-card,.info-card,
  .payment-card,.router-card,.hotspot-card,.paybox,.api-note,.script-box,.notice,.empty,
  .mapping-card,.result-card,.box
){
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  color:var(--pp-text)!important;border:1px solid var(--pp-line)!important;
  border-radius:var(--pp-radius)!important;box-shadow:var(--pp-shadow)!important;
}
html body .layout .content main.page :is(.card,.stat,.stat-card,.glass-card,.section-box,.summary-card,
  .detail-card,.filter-card,.service-card,.quick-card,.trust-card,.settings-card,.profile-card,
  .type-card,.balance-card,.recharge-card,.form-card,.panel-card,.info-card,.payment-card,
  .router-card,.hotspot-card){transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
@media (hover:hover){
  html body .layout .content main.page :is(.stat-card,.quick-card,.service-card,.summary-card,.router-card,.hotspot-card):hover{
    transform:translateY(-2px)!important;box-shadow:var(--pp-shadow-hover)!important;border-color:#c7d8eb!important;
  }
}
html body .layout .content main.page :is(
  .card,.stat,.stat-card,.glass-card,.section-box,.summary-card,.detail-card,.filter-card,
  .service-card,.quick-card,.trust-card,.bill-wrap,.coupon-result,.section,.settings-card,
  .profile-card,.type-card,.balance-card,.recharge-card,.form-card,.panel-card,.info-card,
  .payment-card,.router-card,.hotspot-card,.paybox,.api-note,.script-box,.notice,.empty,
  .mapping-card,.result-card,.box
) :is(h1,h2,h3,h4,h5,h6,.section-title,.card-title,.summary-title,.summary-label,.summary-value,
  .stat-label,.stat-value,.quick-title,.service-name,.section-label,.section-heading,.bottom-label){
  color:var(--pp-text)!important;
}
html body .layout .content main.page :is(
  .card,.stat,.stat-card,.glass-card,.section-box,.summary-card,.detail-card,.filter-card,
  .service-card,.quick-card,.trust-card,.bill-wrap,.coupon-result,.section,.settings-card,
  .profile-card,.type-card,.balance-card,.recharge-card,.form-card,.panel-card,.info-card,
  .payment-card,.router-card,.hotspot-card,.paybox,.api-note,.script-box,.notice,.empty,
  .mapping-card,.result-card,.box
) :is(p,.muted,.small,.text-muted,.section-sub,.section-note,.quick-sub,.stat-note){color:var(--pp-muted)!important}

/* ---------- Form controls ---------- */
html body .layout .content main.page .field label,
html body .layout .content main.page label{color:#334155!important;font-weight:750!important}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input){
  min-height:44px!important;background:#fff!important;color:var(--pp-text)!important;
  border:1px solid #cbd9e7!important;border-radius:12px!important;
  box-shadow:0 1px 2px rgba(15,23,42,.03)!important;outline:none!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus{
  border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(37,99,235,.11)!important;
}
html body .layout .content main.page :is(input,textarea)::placeholder{color:#94a3b8!important}
html body .layout .content main.page :is(.control-icon,.hs-input-icon){background:#eff6ff!important;color:#2563eb!important}

/* ---------- Buttons ---------- */
html body .layout .content main.page :is(.btn,button[type="submit"],.btn-primary,.btn-main,.btn-action,.btn-pay,.save-btn){
  border-radius:12px!important;font-weight:800!important;transition:transform .16s ease,box-shadow .16s ease!important;
}
html body .layout .content main.page :is(.btn-primary,.btn-main,.save-btn,button[type="submit"]){
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;
  border:1px solid #1d4ed8!important;box-shadow:0 8px 18px rgba(37,99,235,.18)!important;
}
html body .layout .content main.page :is(.btn-soft,.btn-view){background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important}
html body .layout .content main.page :is(.btn-danger,.danger,.delete-btn){background:#fff1f2!important;color:#be123c!important;border:1px solid #fecdd3!important}
@media (hover:hover){html body .layout .content main.page :is(.btn,button,a.btn):hover{transform:translateY(-1px)}}

/* ---------- Tables ---------- */
html body .layout .content main.page :is(.table-wrap,.table-scroll,.hotspot-table-wrap,.responsive-scroll,.table-responsive){
  background:#fff!important;border:1px solid var(--pp-line)!important;border-radius:18px!important;
  box-shadow:0 10px 28px rgba(15,23,42,.055)!important;overflow:auto!important;
}
html body .layout .content main.page table{
  background:#fff!important;color:var(--pp-text)!important;border-collapse:separate!important;
  border-spacing:0!important;box-shadow:none!important;
}
html body .layout .content main.page table th{
  background:#f0f5fb!important;color:#334155!important;font-size:12px!important;
  text-transform:uppercase!important;letter-spacing:.045em!important;font-weight:850!important;
  border-bottom:1px solid #dbe5f0!important;
}
html body .layout .content main.page table td{
  background:#fff!important;color:#334155!important;border-bottom:1px solid #edf2f7!important;
}
html body .layout .content main.page table tbody tr:last-child td{border-bottom:0!important}
html body .layout .content main.page table tbody tr:hover td{background:#f8fbff!important}

/* ---------- Statuses / alerts ---------- */
html body .layout .content main.page :is(.alert,.msg,.notice){border-radius:14px!important}
html body .layout .content main.page :is(.status,.status-pill,.badge,.chip,.type-pill){
  border-radius:999px!important;font-weight:800!important;box-shadow:none!important;
}
html body .layout .content main.page :is(.ok,.success,.active,.online){color:#047857!important}
html body .layout .content main.page :is(.err,.danger,.offline,.error){color:#b91c1c!important}

/* ---------- Section titles and spacing ---------- */
html body .layout .content main.page :is(.section-head,.section-top,.table-head){gap:12px!important}
html body .layout .content main.page :is(.section-title,.card-title){letter-spacing:-.02em!important}
html body .layout .content main.page hr{border:0!important;border-top:1px solid #e5edf5!important}

/* ---------- Login / register ---------- */
html body .auth-wrapper{
  background:
    radial-gradient(circle at 10% 10%,rgba(37,99,235,.22),transparent 30%),
    radial-gradient(circle at 92% 88%,rgba(8,145,178,.18),transparent 30%),
    linear-gradient(135deg,#071426,#0f2550)!important;
}
html body .auth-wrapper :is(.login-wrap,.register-wrap,.auth-wrap){
  min-height:100vh!important;background:transparent!important;padding:28px!important;
}
html body .auth-wrapper :is(.login-card,.reg,.register-card,.auth-card){
  background:rgba(255,255,255,.98)!important;border:1px solid rgba(255,255,255,.75)!important;
  border-radius:24px!important;box-shadow:0 28px 80px rgba(2,6,23,.32)!important;
}
html body .auth-wrapper :is(.login-logo,.reg-logo,.auth-logo){
  background:linear-gradient(135deg,#2563eb,#0891b2)!important;border-radius:18px!important;
  box-shadow:0 12px 28px rgba(37,99,235,.25)!important;
}
html body .auth-wrapper :is(input,select,textarea){
  background:#f8fafc!important;color:#0f172a!important;border:1px solid #cbd5e1!important;
  border-radius:12px!important;min-height:46px!important;
}
html body .auth-wrapper :is(input,select,textarea):focus{border-color:#60a5fa!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important}
html body .auth-wrapper button[type="submit"]{
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;color:#fff!important;
  border-radius:12px!important;min-height:46px!important;box-shadow:0 10px 22px rgba(37,99,235,.20)!important;
}

/* ---------- Standalone landing page refinements ---------- */
html body.landing-professional-v2{background:#f4f7fb!important}
html body.landing-professional-v2 :is(.feature-card,.pricing-card,.capability,.trust-card,.faq-item,.service-card){
  border-color:#dbe5f0!important;box-shadow:0 14px 38px rgba(15,23,42,.07)!important;
}
html body.landing-professional-v2 :is(.feature-card,.pricing-card,.capability,.trust-card,.service-card){border-radius:22px!important}
html body.landing-professional-v2 .btn{border-radius:13px!important}

/* ---------- Responsive consistency ---------- */
@media(max-width:900px){
  html body .layout .content main.page :is(
    .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,
    .payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,
    .edit-head,.router-page > .router-head,.print-wrap > .toolbar,.hotspot-hero > .hs-head,
    .hs-hero > .hs-head,.router-hero > .router-head,.hero > .head,.section-hero
  ){padding:21px!important;border-radius:20px!important}
  html body .layout .content main.page :is(.card,.stat,.stat-card,.glass-card,.section-box,.summary-card,
    .detail-card,.filter-card,.service-card,.quick-card,.trust-card,.settings-card,.profile-card,
    .type-card,.balance-card,.recharge-card,.form-card,.panel-card,.info-card,.payment-card,
    .router-card,.hotspot-card){border-radius:18px!important}
}
@media(max-width:640px){
  html body .layout .content main.page :is(
    .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,
    .payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,
    .edit-head,.router-page > .router-head,.print-wrap > .toolbar,.hotspot-hero > .hs-head,
    .hs-hero > .hs-head,.router-hero > .router-head,.hero > .head,.section-hero
  ){padding:18px!important;border-radius:18px!important;margin-bottom:16px!important}
  html body .auth-wrapper :is(.login-wrap,.register-wrap,.auth-wrap){padding:14px!important}
  html body .auth-wrapper :is(.login-card,.reg,.register-card,.auth-card){padding:22px!important;border-radius:20px!important}
}

/* ============================================================
   Professional UI V3 — contrast-led visual system
   Goal: stronger hierarchy, matching backgrounds, legible text,
   consistent forms/tables/actions on every non-base page.
   ============================================================ */
:root{
  --pp-navy:#0b1730;
  --pp-navy-2:#12264d;
  --pp-blue:#2563eb;
  --pp-blue-soft:#eef5ff;
  --pp-cyan-soft:#ecfeff;
  --pp-green-soft:#ecfdf5;
  --pp-amber-soft:#fff8e8;
  --pp-rose-soft:#fff1f2;
  --pp-violet-soft:#f5f3ff;
  --pp-ink:#111827;
  --pp-copy:#334155;
  --pp-subtle:#64748b;
}

/* Global content readability */
html body .layout .content main.page{
  color:var(--pp-copy)!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html body .layout .content main.page :is(h1,h2,h3,h4,h5,h6){
  color:var(--pp-ink)!important;
  letter-spacing:-.025em!important;
  line-height:1.22!important;
}
html body .layout .content main.page :is(p,li,td,label,.help-text,.hint,.note){
  line-height:1.58!important;
}
html body .layout .content main.page :is(.muted,.small,.text-muted,.help-text,.hint,.note,.section-note,.section-sub){
  color:var(--pp-subtle)!important;
}

/* Premium page hero: high contrast, calmer and more corporate */
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .print-wrap > .toolbar,.hotspot-hero > .hs-head,.hs-hero > .hs-head,
  .router-hero > .router-head,.hero > .head,.section-hero
){
  background:
    radial-gradient(circle at 86% 18%,rgba(56,189,248,.25),transparent 23%),
    radial-gradient(circle at 72% 120%,rgba(37,99,235,.42),transparent 38%),
    linear-gradient(135deg,#081426 0%,#102b5c 52%,#194fa9 100%)!important;
  border:1px solid rgba(148,193,255,.24)!important;
  box-shadow:0 18px 46px rgba(15,45,95,.20)!important;
}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .print-wrap > .toolbar,.hotspot-hero > .hs-head,.hs-hero > .hs-head,
  .router-hero > .router-head,.hero > .head,.section-hero
) :is(h1,h2,h3,h4,h5,h6,.page-title,.page-sub,.dashboard-title,.dashboard-sub,
.vpn-title,.vpn-sub,.detail-title,.detail-sub,.hotspot-title,.hotspot-sub,.edit-title,.edit-sub,
.router-title,.text-muted,.muted,p,span){color:#fff!important}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .print-wrap > .toolbar,.hotspot-hero > .hs-head,.hs-hero > .hs-head,
  .router-hero > .router-head,.hero > .head,.section-hero
) :is(.page-sub,.dashboard-sub,.vpn-sub,.detail-sub,.hotspot-sub,.edit-sub,.muted,.text-muted,p){
  color:rgba(255,255,255,.82)!important;
}

/* Cards: clean surface + visible top accent, text always dark */
html body .layout .content main.page :is(
 .card,.stat,.stat-card,.glass-card,.section-box,.summary-card,.detail-card,.filter-card,
 .service-card,.quick-card,.trust-card,.bill-wrap,.coupon-result,.section,.settings-card,
 .profile-card,.type-card,.balance-card,.recharge-card,.form-card,.panel-card,.info-card,
 .payment-card,.router-card,.hotspot-card,.paybox,.api-note,.script-box,.notice,.empty,
 .mapping-card,.result-card,.box
){
  position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  border:1px solid #d9e5f1!important;
  box-shadow:0 12px 34px rgba(15,23,42,.07)!important;
}
html body .layout .content main.page :is(.card,.section-box,.detail-card,.filter-card,.settings-card,.form-card,.panel-card,.payment-card,.router-card,.hotspot-card)::after{
  content:"";position:absolute;left:18px;right:18px;top:0;height:3px;
  border-radius:0 0 999px 999px;background:linear-gradient(90deg,#2563eb,#06b6d4);opacity:.85;pointer-events:none;
}

/* Alternating dashboard/stat accents without hurting readability */
html body .layout .content main.page :is(.stat-card,.summary-card,.quick-card,.service-card,.capability):nth-child(4n+1){
  background:linear-gradient(180deg,#ffffff,#f6f9ff)!important;border-color:#d7e4ff!important;
}
html body .layout .content main.page :is(.stat-card,.summary-card,.quick-card,.service-card,.capability):nth-child(4n+2){
  background:linear-gradient(180deg,#ffffff,#f3fbff)!important;border-color:#d6edf7!important;
}
html body .layout .content main.page :is(.stat-card,.summary-card,.quick-card,.service-card,.capability):nth-child(4n+3){
  background:linear-gradient(180deg,#ffffff,#f4fcf8)!important;border-color:#d9efe5!important;
}
html body .layout .content main.page :is(.stat-card,.summary-card,.quick-card,.service-card,.capability):nth-child(4n){
  background:linear-gradient(180deg,#ffffff,#faf8ff)!important;border-color:#e7defb!important;
}
html body .layout .content main.page :is(.stat-value,.summary-value,.money){color:#0f2a52!important;font-weight:850!important}

/* Section headings: compact accent bar */
html body .layout .content main.page :is(.section-title,.card-title,.summary-title,.section-heading){
  color:#14213d!important;font-weight:850!important;
}
html body .layout .content main.page :is(.section-title,.card-title)::before{
  content:"";display:inline-block;width:4px;height:18px;margin-right:9px;vertical-align:-3px;
  border-radius:99px;background:linear-gradient(#2563eb,#06b6d4);
}

/* Forms: labels and input backgrounds clearly separated */
html body .layout .content main.page label{color:#26364f!important;font-weight:780!important}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input){
  background:#f9fbfd!important;color:#111827!important;border:1px solid #bdcde0!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.025)!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input):hover{
  border-color:#93abc7!important;background:#fff!important;
}
html body .layout .content main.page select option{color:#111827!important;background:#fff!important}
html body .layout .content main.page input:disabled,
html body .layout .content main.page select:disabled,
html body .layout .content main.page textarea:disabled{
  color:#64748b!important;background:#eef2f7!important;border-color:#d7dee8!important;opacity:1!important;
}

/* Buttons: semantic hierarchy and readable foregrounds */
html body .layout .content main.page :is(.btn-primary,.btn-main,.save-btn,button[type="submit"],.primary,.btn-pay){
  background:linear-gradient(135deg,#2563eb,#1747a6)!important;color:#fff!important;border-color:#1747a6!important;
  text-shadow:0 1px 1px rgba(0,0,0,.06);
}
html body .layout .content main.page :is(.btn-soft,.btn-view,.btn-filter,.copy-btn){
  background:#eef5ff!important;color:#1747a6!important;border:1px solid #c7dcfb!important;
}
html body .layout .content main.page :is(.btn-edit){
  background:#fff8e8!important;color:#9a5a00!important;border:1px solid #f4d89f!important;
}
html body .layout .content main.page :is(.btn-danger,.danger,.delete-btn){
  background:#fff1f2!important;color:#b4233b!important;border:1px solid #fecdd3!important;
}
html body .layout .content main.page :is(.btn,.btn-primary,.btn-main,.btn-soft,.btn-view,.btn-filter,.btn-edit,.btn-danger,.btn-pay,button[type="submit"]){
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
}

/* Tables: stronger visual grouping, no low-contrast text */
html body .layout .content main.page :is(.table-wrap,.table-scroll,.hotspot-table-wrap,.responsive-scroll,.table-responsive){
  border-color:#d6e1ed!important;box-shadow:0 12px 30px rgba(15,23,42,.06)!important;
}
html body .layout .content main.page table th{
  background:linear-gradient(180deg,#eaf1f9,#e4edf7)!important;
  color:#26364f!important;border-bottom:1px solid #cad9e7!important;
  white-space:nowrap;
}
html body .layout .content main.page table td{color:#34445d!important;background:#fff!important}
html body .layout .content main.page table tbody tr:nth-child(even) td{background:#fbfdff!important}
html body .layout .content main.page table tbody tr:hover td{background:#f0f6ff!important;color:#172033!important}
html body .layout .content main.page table a:not(.btn){color:#1d4ed8!important;font-weight:700!important}

/* Status/badges: matching text/background combinations */
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill){
  display:inline-flex;align-items:center;gap:5px;padding:.34rem .62rem!important;
  border:1px solid #d7e1ec!important;background:#f1f5f9!important;color:#475569!important;
}
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).active,
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).online,
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).ok,
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).success{
  background:var(--pp-green-soft)!important;color:#047857!important;border-color:#a7e9ca!important;
}
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).offline,
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).err,
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).danger,
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).error{
  background:var(--pp-rose-soft)!important;color:#b4233b!important;border-color:#fecdd3!important;
}
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).pending,
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill).warning{
  background:var(--pp-amber-soft)!important;color:#9a5a00!important;border-color:#f2d294!important;
}

/* Alerts/messages */
html body .layout .content main.page :is(.alert,.msg,.notice,.view-only-note){
  color:#334155!important;background:#f7faff!important;border:1px solid #d5e3f4!important;
}
html body .layout .content main.page :is(.alert,.msg,.notice).success{background:#ecfdf5!important;color:#065f46!important;border-color:#a7e9ca!important}
html body .layout .content main.page :is(.alert,.msg,.notice).error,
html body .layout .content main.page :is(.alert,.msg,.notice).danger{background:#fff1f2!important;color:#9f1239!important;border-color:#fecdd3!important}

/* Pagination/navigation inside page content only */
html body .layout .content main.page :is(.pagination,.pager,.page-nav) a,
html body .layout .content main.page :is(.page-link){
  background:#fff!important;color:#334155!important;border:1px solid #d6e1ed!important;border-radius:10px!important;
}
html body .layout .content main.page :is(.pagination,.pager,.page-nav) .active,
html body .layout .content main.page .page-link.active{
  background:#2563eb!important;color:#fff!important;border-color:#2563eb!important;
}

/* Code/script blocks */
html body .layout .content main.page :is(pre,code,.script-box){
  font-variant-ligatures:none;
}
html body .layout .content main.page .script-box{
  background:#0f1c31!important;color:#dbeafe!important;border-color:#203554!important;
}
html body .layout .content main.page .script-box :is(code,pre,.script-body){color:#dbeafe!important}
html body .layout .content main.page .script-head{color:#fff!important;background:#172a47!important}

/* Auth pages: stronger label/control contrast */
html body .auth-wrapper :is(.login-card,.reg,.register-card,.auth-card){
  color:#334155!important;background:linear-gradient(180deg,#fff,#fbfdff)!important;
}
html body .auth-wrapper :is(h1,h2,h3,.title){color:#111827!important}
html body .auth-wrapper :is(p,.muted,.small,.help-text){color:#64748b!important}
html body .auth-wrapper label{color:#26364f!important;font-weight:750!important}

/* Mobile: avoid crowded controls and unreadable tables */
@media(max-width:640px){
  html body .layout .content main.page :is(.actions,.hero-actions,.section-head,.section-top,.table-head){
    row-gap:10px!important;
  }
  html body .layout .content main.page :is(.btn,.btn-primary,.btn-main,.btn-soft,.btn-view,.btn-filter,.btn-edit,.btn-danger,.btn-pay,button[type="submit"]){
    min-height:42px;
  }
  html body .layout .content main.page table{font-size:13px!important}
  html body .layout .content main.page table :is(th,td){padding:11px 12px!important}
}

/* ============================================================
   PROFESSIONAL UI V4 — page-by-page harmonization layer
   Keeps base.html/navigation untouched. Visual-only overrides.
   ============================================================ */
:root{
  --ui-canvas:#f3f6fb;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fafc;
  --ui-surface-blue:#f5f9ff;
  --ui-ink:#101828;
  --ui-copy:#344054;
  --ui-muted:#667085;
  --ui-border:#dbe3ef;
  --ui-border-strong:#c9d5e5;
  --ui-blue:#155eef;
  --ui-blue-2:#004eeb;
  --ui-navy:#0b1f3a;
  --ui-cyan:#0e7490;
  --ui-green:#067647;
  --ui-red:#b42318;
  --ui-amber:#b54708;
  --ui-shadow-xs:0 1px 2px rgba(16,24,40,.04);
  --ui-shadow-sm:0 4px 12px rgba(16,24,40,.06);
  --ui-shadow-md:0 12px 30px rgba(16,24,40,.08);
  --ui-shadow-lg:0 22px 48px rgba(16,24,40,.12);
}

/* Canvas + typography */
html body .layout .content main.page{
  background:
    linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,0) 260px),
    var(--ui-canvas)!important;
  color:var(--ui-copy)!important;
}
html body .layout .content main.page > :first-child{margin-top:0!important}
html body .layout .content main.page :is(h1,h2,h3,h4,h5,h6){
  font-family:inherit!important;color:var(--ui-ink)!important;font-weight:800!important;
}
html body .layout .content main.page :is(p,li,td,dd,.help-text,.hint,.note,.small,.muted,.text-muted){color:var(--ui-muted)!important}
html body .layout .content main.page a:not(.btn):not([class*="btn-"]){color:#175cd3}

/* Hero system: deliberately restrained, enterprise style */
html body .layout .content main.page :is(
 .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,
 .payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,
 .edit-head,.router-page>.router-head,.print-wrap>.toolbar,.hotspot-hero>.hs-head,.hs-hero>.hs-head,
 .router-hero>.router-head,.hero>.head,.section-hero
){
  min-height:96px!important;padding:26px 30px!important;margin-bottom:24px!important;
  border-radius:20px!important;
  background:
    linear-gradient(100deg,rgba(255,255,255,.05),transparent 38%),
    radial-gradient(circle at 92% 0%,rgba(46,144,250,.28),transparent 30%),
    linear-gradient(135deg,#091b33 0%,#102f5f 55%,#155eef 115%)!important;
  border:1px solid rgba(132,202,255,.22)!important;
  box-shadow:0 18px 36px rgba(16,48,95,.16)!important;
}
html body .layout .content main.page :is(
 .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,
 .payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,
 .edit-head,.router-page>.router-head,.print-wrap>.toolbar,.hotspot-hero>.hs-head,.hs-hero>.hs-head,
 .router-hero>.router-head,.hero>.head,.section-hero
)::before{opacity:.65!important}
html body .layout .content main.page :is(
 .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,
 .payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,
 .edit-head,.router-page>.router-head,.print-wrap>.toolbar,.hotspot-hero>.hs-head,.hs-hero>.hs-head,
 .router-hero>.router-head,.hero>.head,.section-hero
) :is(h1,h2,h3,h4,h5,h6,.page-title,.dashboard-title,.vpn-title,.detail-title,.hotspot-title,.edit-title,.router-title){
  color:#fff!important;font-weight:820!important;letter-spacing:-.035em!important;
}
html body .layout .content main.page :is(
 .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,
 .payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,
 .edit-head,.router-page>.router-head,.print-wrap>.toolbar,.hotspot-hero>.hs-head,.hs-hero>.hs-head,
 .router-hero>.router-head,.hero>.head,.section-hero
) :is(p,.page-sub,.dashboard-sub,.vpn-sub,.detail-sub,.hotspot-sub,.edit-sub,.muted,.text-muted,.small){
  color:rgba(255,255,255,.78)!important;
}
html body .layout .content main.page :is(
 .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,
 .payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,
 .edit-head,.router-page>.router-head,.print-wrap>.toolbar,.hotspot-hero>.hs-head,.hs-hero>.hs-head,
 .router-hero>.router-head,.hero>.head,.section-hero
) :is(a.btn,button,.btn,.btn-soft,.btn-primary,.hero-link,.portal-btn,.create-btn,.cancel-btn){
  background:rgba(255,255,255,.11)!important;color:#fff!important;border:1px solid rgba(255,255,255,.23)!important;
  box-shadow:none!important;backdrop-filter:blur(8px)!important;
}

/* Unified professional surfaces — include page-specific containers missed before */
html body .layout .content main.page :is(
 .card,.pro-card,.audit-card,.coupon-card,.billing-card,.payment-card,.edit-card,.pricing-card,.checkout-card,
 .hotspot-card,.glass-card,.sub-card,.type-form-card,.table-card,.info-card,.router-setting-card,.service-card,
 .balance-card,.section-box,.port-box,.permission-box,.perm-group,.ssl-box,.panel-card,.form-card,.detail-card,
 .summary-card,.stat-card,.filter-card,.profile-card,.type-card,.recharge-card,.router-card,.paybox,.mapping-card,
 .result-card,.api-note,.empty,.empty-state,.box
){
  background:var(--ui-surface)!important;color:var(--ui-copy)!important;
  border:1px solid var(--ui-border)!important;border-radius:18px!important;
  box-shadow:var(--ui-shadow-sm)!important;
}
html body .layout .content main.page :is(
 .card,.pro-card,.audit-card,.coupon-card,.billing-card,.payment-card,.edit-card,.pricing-card,.checkout-card,
 .hotspot-card,.glass-card,.sub-card,.type-form-card,.table-card,.info-card,.router-setting-card,.service-card,
 .balance-card,.section-box,.port-box,.permission-box,.perm-group,.ssl-box,.panel-card,.form-card,.detail-card,
 .filter-card,.profile-card,.type-card,.recharge-card,.router-card,.paybox,.mapping-card,.result-card,.api-note,.box
){overflow:hidden}
html body .layout .content main.page :is(.pro-card,.audit-card,.coupon-card,.billing-card,.payment-card,.edit-card,.pricing-card,.checkout-card,.hotspot-card,.glass-card,.sub-card,.type-form-card,.table-card,.info-card,.router-setting-card,.service-card,.balance-card,.section-box,.port-box,.permission-box,.perm-group,.ssl-box){
  position:relative!important;
}
html body .layout .content main.page :is(.pro-card,.audit-card,.coupon-card,.billing-card,.payment-card,.edit-card,.pricing-card,.checkout-card,.hotspot-card,.glass-card,.sub-card,.type-form-card,.table-card,.info-card,.router-setting-card,.service-card,.balance-card,.section-box,.port-box,.permission-box,.perm-group,.ssl-box)::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#155eef,#36bffa);opacity:.9;pointer-events:none;
}

/* Stronger internal hierarchy */
html body .layout .content main.page :is(.card-title,.section-title,.section-heading,.summary-title,.type-ip-title,.perm-group-title,.test-title,.payment-card-head,.hotspot-card-head,.router-card-head,.table-top,.table-head,.section-head){
  color:#182230!important;font-weight:800!important;
}
html body .layout .content main.page :is(.card-title,.section-title,.section-heading){font-size:1rem!important}
html body .layout .content main.page :is(.section-note,.section-sub,.filter-note,.perm-note,.test-desc,.view-only-note){color:var(--ui-muted)!important}
html body .layout .content main.page :is(.card-pad){padding:24px!important}

/* Stats / summaries */
html body .layout .content main.page :is(.stats-grid,.summary-grid,.sub-stats){gap:14px!important}
html body .layout .content main.page :is(.stat,.stat-card,.summary-card,.sub-stat,.dash-stat){
  background:linear-gradient(180deg,#fff,#f8fbff)!important;border:1px solid #d9e5f3!important;
  border-radius:16px!important;box-shadow:var(--ui-shadow-xs)!important;
}
html body .layout .content main.page :is(.stat-label,.summary-label,.summary-title,.sub-stat .label){color:#667085!important;font-weight:700!important}
html body .layout .content main.page :is(.stat-value,.summary-value,.sub-stat .value,.amount-main){color:#102a56!important;font-weight:850!important;letter-spacing:-.035em!important}
html body .layout .content main.page :is(.stat-icon,.service-icon,.service-icon-lg,.router-icon,.hs-title-icon,.copy-icon){
  background:#eef4ff!important;color:#175cd3!important;border:1px solid #d1e0ff!important;
}

/* Forms — neutral, accessible and uniform */
html body .layout .content main.page :is(.field,.hs-field){gap:7px!important}
html body .layout .content main.page :is(.field label,.hs-field label,label){
  color:#344054!important;font-size:13px!important;font-weight:700!important;letter-spacing:0!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input,.searchbox,.search-box){
  background:#fff!important;color:#101828!important;border:1px solid #cfd8e6!important;border-radius:10px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.03)!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.mini-input){
  min-height:44px!important;padding:10px 12px!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input):focus-within,
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.mini-input):focus{
  border-color:#84adff!important;box-shadow:0 0 0 4px rgba(21,94,239,.10)!important;outline:0!important;
}
html body .layout .content main.page :is(.control,.hs-input){background:#fff!important;border:1px solid #cfd8e6!important;border-radius:10px!important}
html body .layout .content main.page :is(.control-icon,.hs-input-icon){background:#f5f8ff!important;color:#175cd3!important;border-right:1px solid #e0e7f0!important}
html body .layout .content main.page :is(input,textarea)::placeholder{color:#98a2b3!important}
html body .layout .content main.page :is(.form-grid,.grid,.create-grid,.search-grid,.mapping-grid){gap:16px!important}

/* Checkbox/switch permission areas */
html body .layout .content main.page :is(.permission-box,.perm-area,.perm-group,.compact-perms){background:#f8fafc!important;border-color:#e0e7f0!important}
html body .layout .content main.page :is(.check-item,.perm-checks label){color:#344054!important}
html body .layout .content main.page input[type="checkbox"],
html body .layout .content main.page input[type="radio"]{accent-color:#155eef}

/* Buttons — consistent sizing and semantic colors */
html body .layout .content main.page :is(.btn,button,.soft-btn,.tiny-btn,.hs-top-btn){
  font-family:inherit!important;border-radius:10px!important;font-weight:750!important;letter-spacing:-.005em!important;
}
html body .layout .content main.page :is(.btn-primary,.btn-main,.primary,.save-btn,.btn-pay,button[type="submit"]){
  background:linear-gradient(180deg,#2770f3,#155eef)!important;color:#fff!important;border:1px solid #155eef!important;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 4px 10px rgba(21,94,239,.16)!important;
}
html body .layout .content main.page :is(.btn-secondary,.btn-soft,.soft-btn,.btn-view,.btn-filter,.copy-btn,.hs-top-btn){
  background:#fff!important;color:#344054!important;border:1px solid #d0d5dd!important;box-shadow:var(--ui-shadow-xs)!important;
}
html body .layout .content main.page :is(.btn-edit){background:#fffaeb!important;color:#93370d!important;border:1px solid #fedf89!important}
html body .layout .content main.page :is(.btn-danger,.danger,.delete-btn){background:#fff5f5!important;color:#b42318!important;border:1px solid #fecdca!important}
html body .layout .content main.page :is(.btn-success,.success-btn){background:#ecfdf3!important;color:#067647!important;border:1px solid #abefc6!important}
html body .layout .content main.page :is(.btn,button[type="submit"],.soft-btn,.hs-top-btn){min-height:40px!important;padding:9px 14px!important}
@media (hover:hover){
 html body .layout .content main.page :is(.btn,button[type="submit"],.soft-btn,.hs-top-btn):hover{transform:translateY(-1px)!important;filter:none!important}
 html body .layout .content main.page :is(.btn-primary,.btn-main,.primary,.save-btn,.btn-pay,button[type="submit"]):hover{background:linear-gradient(180deg,#175cd3,#004eeb)!important}
}

/* Tables — enterprise admin table treatment */
html body .layout .content main.page :is(.table-wrap,.table-scroll,.payment-table-wrap,.audit-table-wrap,.hotspot-scroll,.hotspot-table-wrap,.responsive-scroll,.table-responsive,.responsive-table,.scroll){
  background:#fff!important;border:1px solid var(--ui-border)!important;border-radius:14px!important;
  box-shadow:none!important;overflow:auto!important;
}
html body .layout .content main.page table{width:100%;background:#fff!important;color:#344054!important;border-collapse:separate!important;border-spacing:0!important}
html body .layout .content main.page table :is(th,td){padding:13px 14px!important;vertical-align:middle!important}
html body .layout .content main.page table th{
  background:#f7f9fc!important;color:#475467!important;font-size:11px!important;line-height:1.35!important;
  font-weight:800!important;text-transform:uppercase!important;letter-spacing:.055em!important;border-bottom:1px solid #dfe6ef!important;
}
html body .layout .content main.page table td{color:#344054!important;background:#fff!important;border-bottom:1px solid #edf1f5!important;font-size:13px!important}
html body .layout .content main.page table tbody tr:nth-child(even) td{background:#fcfdff!important}
html body .layout .content main.page table tbody tr:hover td{background:#f5f9ff!important}
html body .layout .content main.page table tbody tr:last-child td{border-bottom:0!important}
html body .layout .content main.page :is(.table-count,.audit-count){background:#f2f4f7!important;color:#475467!important;border:1px solid #e4e7ec!important}

/* Statuses: force correct contrast regardless older page CSS */
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill,.mini-pill,.security-pill,.hs-chip,.vpn-online-pill){
  color:#475467!important;background:#f2f4f7!important;border:1px solid #e4e7ec!important;border-radius:999px!important;font-weight:750!important;
}
html body .layout .content main.page :is(.active,.online,.ok,.success,.notice-ok,.vpn-online-pill.online){color:#067647!important;background:#ecfdf3!important;border-color:#abefc6!important}
html body .layout .content main.page :is(.offline,.err,.error,.danger,.disabled,.notice-err,.notice-error){color:#b42318!important;background:#fef3f2!important;border-color:#fecdca!important}
html body .layout .content main.page :is(.pending,.warning){color:#b54708!important;background:#fffaeb!important;border-color:#fedf89!important}
html body .layout .content main.page :is(.notice-info,.info){color:#175cd3!important;background:#eff8ff!important;border-color:#b2ddff!important}

/* Alerts/messages */
html body .layout .content main.page :is(.alert,.notice,.msg,.flash-msg,.hotspot-err,.vpn-alert,.alert-error,.view-only-note,.note){
  border-radius:12px!important;padding:12px 14px!important;box-shadow:none!important;
}
html body .layout .content main.page :is(.alert,.notice,.msg,.flash-msg,.view-only-note,.note){background:#f8fafc!important;color:#475467!important;border:1px solid #e4e7ec!important}
html body .layout .content main.page :is(.alert-error,.hotspot-err,.msg.err,.notice-err,.notice-error){background:#fef3f2!important;color:#b42318!important;border:1px solid #fecdca!important}
html body .layout .content main.page :is(.msg.ok,.notice-ok){background:#ecfdf3!important;color:#067647!important;border:1px solid #abefc6!important}

/* Page-level toolbars/search/actions */
html body .layout .content main.page :is(.toolbar,.audit-toolbar,.action-bar,.action-row,.actions,.search-actions,.hero-actions,.payment-actions,.coupon-apply-row,.perm-actions,.save-row,.export-row){gap:10px!important}
html body .layout .content main.page :is(.toolbar,.audit-toolbar,.filter-top,.table-top,.table-head,.section-head,.section-top,.card-head,.payment-card-head,.hotspot-card-head,.router-card-head){
  border-color:#e7ecf2!important;
}

/* VPN detail / copy info */
html body .layout .content main.page :is(.session-info-grid,.copy-list){gap:12px!important}
html body .layout .content main.page .session-info-item{
  background:#f8fafc!important;border:1px solid #e4e7ec!important;border-radius:12px!important;
}
html body .layout .content main.page .session-info-label{color:#667085!important;font-size:12px!important;font-weight:700!important}
html body .layout .content main.page .session-info-value{color:#182230!important;font-weight:800!important}
html body .layout .content main.page .copy-row{background:#f8fafc!important;border:1px solid #e4e7ec!important;border-radius:12px!important}
html body .layout .content main.page .copy-label{color:#667085!important}
html body .layout .content main.page .copy-value{color:#182230!important}

/* Billing / payment emphasis */
html body .layout .content main.page :is(.amount-box,.paybox,.price-preview){
  background:linear-gradient(180deg,#f8fbff,#f2f7ff)!important;border:1px solid #d1e0ff!important;border-radius:14px!important;
}
html body .layout .content main.page .summary-value.paid{color:#067647!important}
html body .layout .content main.page .summary-value.due{color:#b42318!important}
html body .layout .content main.page :is(.pay-user,.username,.router-name,.service-name,.type-name){color:#182230!important;font-weight:800!important}
html body .layout .content main.page :is(.pay-muted,.vpn-type){color:#667085!important}

/* Script/code output */
html body .layout .content main.page :is(.script-box,pre){
  background:#101828!important;color:#e6edf7!important;border:1px solid #344054!important;border-radius:14px!important;
}
html body .layout .content main.page :is(.script-box,pre) :is(code,.script-body){color:#e6edf7!important}
html body .layout .content main.page .script-head{background:#1d2939!important;color:#fff!important;border-bottom:1px solid #344054!important}

/* Modals */
html body .layout .content main.page :is(.modal-overlay,.test-modal){background:rgba(16,24,40,.48)!important;backdrop-filter:blur(4px)!important}
html body .layout .content main.page :is(.modal-box,.test-box){
  background:#fff!important;color:#344054!important;border:1px solid #e4e7ec!important;border-radius:18px!important;box-shadow:var(--ui-shadow-lg)!important;
}
html body .layout .content main.page .modal-head{border-color:#eaecf0!important;color:#182230!important}

/* Standalone auth blocks: these pages do not use .auth-wrapper */
html body .login-wrap{
  background:
    radial-gradient(circle at 15% 15%,rgba(46,144,250,.18),transparent 34%),
    radial-gradient(circle at 85% 85%,rgba(21,94,239,.18),transparent 30%),
    linear-gradient(145deg,#08192e,#102d55)!important;
  padding:28px!important;
}
html body .login-card,
html body .reg{
  background:rgba(255,255,255,.985)!important;color:#344054!important;border:1px solid rgba(255,255,255,.7)!important;
  border-radius:22px!important;box-shadow:0 28px 70px rgba(4,18,38,.28)!important;padding:34px!important;
}
html body .login-logo{background:linear-gradient(135deg,#155eef,#0ba5ec)!important;border-radius:16px!important;box-shadow:0 12px 28px rgba(21,94,239,.25)!important}
html body :is(.login-card,.reg) :is(h1,h2,h3,.page-title){color:#101828!important}
html body :is(.login-card,.reg) :is(p,.page-sub,.small){color:#667085!important}
html body :is(.login-card,.reg) label{color:#344054!important;font-weight:700!important}
html body :is(.login-card,.reg) input{background:#fff!important;color:#101828!important;border:1px solid #cfd8e6!important;border-radius:10px!important;min-height:46px!important}
html body :is(.login-card,.reg) input:focus{border-color:#84adff!important;box-shadow:0 0 0 4px rgba(21,94,239,.10)!important}
html body :is(.login-card,.reg) button[type="submit"],html body .reg .btn{background:linear-gradient(180deg,#2770f3,#155eef)!important;color:#fff!important;border:1px solid #155eef!important;border-radius:10px!important;min-height:46px!important;box-shadow:0 6px 14px rgba(21,94,239,.18)!important}
html body .reg{max-width:460px!important;margin:44px auto!important}

/* Landing page: cleaner product-site style */
html body.landing-professional-v2{background:#f8fafc!important;color:#344054!important}
html body.landing-professional-v2 :is(.feature-card,.pricing-card,.capability,.trust-card,.faq-item,.service-card){
  background:#fff!important;border:1px solid #e4e7ec!important;border-radius:18px!important;box-shadow:0 6px 18px rgba(16,24,40,.05)!important;
}
html body.landing-professional-v2 :is(.feature-card,.pricing-card,.capability,.trust-card,.faq-item,.service-card) :is(h2,h3,h4,.title){color:#101828!important}
html body.landing-professional-v2 :is(.feature-card,.pricing-card,.capability,.trust-card,.faq-item,.service-card) :is(p,.muted,.small){color:#667085!important}

/* Bootstrap pages harmonization */
html body .layout .content main.page :is(.container.py-5){max-width:1180px!important}
html body .layout .content main.page .card-footer{background:#fbfcfe!important;border-top:1px solid #e4e7ec!important}
html body .layout .content main.page .form-check-input:checked{background-color:#155eef!important;border-color:#155eef!important}

/* Responsive polish */
@media(max-width:900px){
  html body .layout .content main.page :is(
   .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,.detail-hero,.payment-hero,
   .reseller-hero,.settings-hero,.sub-hero,.type-hero,.hotspot-head,.dashboard-head,.edit-head,.router-page>.router-head,
   .print-wrap>.toolbar,.hotspot-hero>.hs-head,.hs-hero>.hs-head,.router-hero>.router-head,.hero>.head,.section-hero
  ){padding:22px!important;min-height:auto!important}
}
@media(max-width:640px){
  html body .layout .content main.page{font-size:14px!important}
  html body .layout .content main.page :is(.card-pad){padding:18px!important}
  html body .layout .content main.page :is(.card,.pro-card,.audit-card,.coupon-card,.billing-card,.payment-card,.edit-card,.pricing-card,.checkout-card,.hotspot-card,.glass-card,.sub-card,.type-form-card,.table-card,.info-card,.router-setting-card,.service-card,.balance-card,.section-box,.port-box,.permission-box,.perm-group,.ssl-box){border-radius:14px!important}
  html body .layout .content main.page table :is(th,td){padding:11px 12px!important}
  html body .layout .content main.page :is(.actions,.action-row,.toolbar,.audit-toolbar,.hero-actions,.payment-actions,.search-actions){flex-wrap:wrap!important}
  html body .login-wrap{padding:14px!important}
  html body :is(.login-card,.reg){padding:24px!important;border-radius:18px!important}
}

/* ============================================================
   PROFESSIONAL UI V4 — Enterprise Product Design Pass
   Screenshot-audited: typography, contrast, spacing, forms,
   tables, scripts, permission cards, semantic actions.
   Base navigation/topbar intentionally not targeted.
   ============================================================ */
:root{
  --pro-canvas:#f6f8fc;
  --pro-surface:#ffffff;
  --pro-surface-soft:#f8fafc;
  --pro-ink:#172033;
  --pro-copy:#344054;
  --pro-muted:#667085;
  --pro-border:#e3e8ef;
  --pro-border-strong:#d0d8e4;
  --pro-brand:#2563eb;
  --pro-brand-dark:#1d4ed8;
  --pro-brand-soft:#eff6ff;
  --pro-success:#15803d;
  --pro-success-soft:#ecfdf3;
  --pro-danger:#c81e1e;
  --pro-danger-soft:#fff1f2;
  --pro-warning:#b45309;
  --pro-warning-soft:#fff7ed;
  --pro-info:#0369a1;
  --pro-info-soft:#f0f9ff;
  --pro-radius:16px;
  --pro-radius-sm:11px;
  --pro-shadow:0 1px 2px rgba(16,24,40,.02),0 8px 24px rgba(16,24,40,.055);
}

/* Canvas: calm enterprise background, not decorative-heavy */
html body .layout .content main.page{
  background:var(--pro-canvas)!important;
  color:var(--pro-ink)!important;
}
html body .layout .content main.page :where(.wrap,.container,.page-wrap,.dashboard-wrap,.settings-wrap,.detail-wrap,.router-page,.hotspot-page){
  max-width:1220px;
}

/* Typography */
html body .layout .content main.page :where(h1,h2,h3,h4,h5,h6){
  color:var(--pro-ink);letter-spacing:-.018em;
}
html body .layout .content main.page :where(p,.muted,.text-muted,.section-note,.help,.hint,small){
  line-height:1.55;
}

/* Page hero: restrained, product-quality, common across pages */
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .hotspot-hero > .hs-head,.hs-hero > .hs-head,.router-hero > .router-head,.section-hero
){
  padding:22px 24px!important;margin-bottom:20px!important;border-radius:18px!important;
  background:linear-gradient(120deg,#132a4d 0%,#17458f 62%,#2563eb 100%)!important;
  border:0!important;box-shadow:0 10px 24px rgba(23,69,143,.14)!important;
}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .hotspot-hero > .hs-head,.hs-hero > .hs-head,.router-hero > .router-head,.section-hero
)::before{
  width:210px!important;height:210px!important;right:-80px!important;top:-125px!important;
  background:rgba(255,255,255,.09)!important;
}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .hotspot-hero > .hs-head,.hs-hero > .hs-head,.router-hero > .router-head,.section-hero
) :where(h1,h2,h3){font-weight:800!important;line-height:1.2!important;margin-bottom:6px!important}
html body .layout .content main.page :is(
  .unified-page-hero,.page-head,.vpn-head,.bill-hero,.audit-hero,.coupon-hero,
  .detail-hero,.payment-hero,.reseller-hero,.settings-hero,.sub-hero,.type-hero,
  .hotspot-head,.dashboard-head,.edit-head,.router-page > .router-head,
  .hotspot-hero > .hs-head,.hs-hero > .hs-head,.router-hero > .router-head,.section-hero
) :where(p,.muted,.text-muted){color:#d9e7ff!important;font-weight:500!important}

/* Cards: remove random accents, use consistent structure */
html body .layout .content main.page :is(
  .card,.glass-card,.section-box,.summary-card,.detail-card,.filter-card,.service-card,
  .quick-card,.trust-card,.settings-card,.profile-card,.type-card,.balance-card,
  .recharge-card,.form-card,.panel-card,.info-card,.payment-card,.router-card,
  .hotspot-card,.paybox,.api-note,.notice,.mapping-card,.result-card,.box
){
  background:var(--pro-surface)!important;border:1px solid var(--pro-border)!important;
  border-radius:var(--pro-radius)!important;box-shadow:var(--pro-shadow)!important;
}
html body .layout .content main.page :is(.card,.glass-card,.service-card,.settings-card,.recharge-card,.mapping-card){
  padding:20px!important;
}
html body .layout .content main.page :is(.card,.glass-card,.service-card,.settings-card,.recharge-card,.mapping-card)::before{
  display:none!important;
}
html body .layout .content main.page :is(.section-head,.section-top,.card-head,.panel-head){
  padding-bottom:14px!important;margin-bottom:16px!important;border-bottom:1px solid var(--pro-border)!important;
}
html body .layout .content main.page :is(.section-head,.section-top,.card-head,.panel-head) :where(h2,h3){
  color:var(--pro-ink)!important;font-size:18px!important;font-weight:800!important;margin:0!important;
}
html body .layout .content main.page :is(.section-head,.section-top,.card-head,.panel-head) :where(p,.section-note,.muted){
  color:var(--pro-muted)!important;margin-top:4px!important;font-weight:500!important;
}

/* Inputs: quiet neutral system */
html body .layout .content main.page :where(.field label,label){
  color:var(--pro-copy)!important;font-size:13px!important;font-weight:700!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input){
  min-height:44px!important;background:#fff!important;color:var(--pro-ink)!important;
  border:1px solid var(--pro-border-strong)!important;border-radius:10px!important;
  box-shadow:0 1px 2px rgba(16,24,40,.02)!important;font-weight:600!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input):hover{
  border-color:#aeb9c8!important;
}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input):focus{
  border-color:#4f83ed!important;box-shadow:0 0 0 3px rgba(37,99,235,.11)!important;
}
html body .layout .content main.page input[type="checkbox"]{
  width:18px!important;height:18px!important;accent-color:var(--pro-brand)!important;flex:0 0 auto!important;
}

/* Buttons: semantic and restrained */
html body .layout .content main.page :is(.btn,button,.btn-primary,.btn-main,.btn-action,.btn-pay,.save-btn,.btn-small,.copy-btn){
  font-family:inherit!important;font-weight:700!important;line-height:1!important;text-decoration:none!important;
}
html body .layout .content main.page :is(.btn-primary,.btn-main,.save-btn,.primary,button[type="submit"]){
  background:var(--pro-brand)!important;color:#fff!important;border:1px solid var(--pro-brand)!important;
  box-shadow:0 4px 10px rgba(37,99,235,.17)!important;
}
html body .layout .content main.page :is(.btn-primary,.btn-main,.save-btn,.primary,button[type="submit"]):hover{
  background:var(--pro-brand-dark)!important;border-color:var(--pro-brand-dark)!important;
}
html body .layout .content main.page :is(.btn.green,.green,.btn-success,.success){
  background:var(--pro-success)!important;color:#fff!important;border:1px solid var(--pro-success)!important;
}
html body .layout .content main.page :is(.btn.red,.red,.btn-danger,.danger,.delete-btn){
  background:var(--pro-danger)!important;color:#fff!important;border:1px solid var(--pro-danger)!important;
}
html body .layout .content main.page :is(.btn.cyan,.cyan,.btn-info){
  background:#0f74b5!important;color:#fff!important;border:1px solid #0f74b5!important;
}
html body .layout .content main.page :is(.btn:not(.primary):not(.green):not(.red):not(.cyan):not(.btn-primary):not(.btn-danger),.btn-soft,.btn-link,.copy-btn){
  background:#fff!important;color:#344054!important;border:1px solid var(--pro-border-strong)!important;
  box-shadow:0 1px 2px rgba(16,24,40,.03)!important;
}
html body .layout .content main.page :is(.btn:not(.primary):not(.green):not(.red):not(.cyan):not(.btn-primary):not(.btn-danger),.btn-soft,.btn-link,.copy-btn):hover{
  background:#f8fafc!important;color:#172033!important;border-color:#b8c3d1!important;
}
html body .layout .content main.page .row-actions{gap:7px!important;align-items:center!important}
html body .layout .content main.page .row-actions .btn{min-height:38px!important;padding:0 13px!important;border-radius:9px!important}

/* Tables: enterprise density and hierarchy */
html body .layout .content main.page :is(.table-wrap,.table-scroll,.table-responsive,.hotspot-table-wrap,.responsive-scroll){
  border:1px solid var(--pro-border)!important;border-radius:14px!important;background:#fff!important;
  box-shadow:none!important;
}
html body .layout .content main.page table{border-collapse:separate!important;border-spacing:0!important;width:100%!important}
html body .layout .content main.page table th{
  background:#f8fafc!important;color:#475467!important;font-size:11px!important;font-weight:800!important;
  letter-spacing:.055em!important;text-transform:uppercase!important;padding:12px 14px!important;
  border-bottom:1px solid var(--pro-border)!important;
}
html body .layout .content main.page table td{
  background:#fff!important;color:#475467!important;font-size:13px!important;font-weight:500!important;
  padding:13px 14px!important;border-bottom:1px solid #edf0f4!important;vertical-align:middle!important;
}
html body .layout .content main.page table td :where(b,strong){color:#172033!important;font-weight:700!important}
html body .layout .content main.page table tbody tr:hover td{background:#fbfcfe!important}

/* Badges / chips */
html body .layout .content main.page :is(.badge,.chip,.status,.pill){
  border-radius:999px!important;font-size:12px!important;font-weight:700!important;box-shadow:none!important;
}
html body .layout .content main.page .badge.on{background:var(--pro-success-soft)!important;color:var(--pro-success)!important;border:1px solid #b7ebc9!important}
html body .layout .content main.page .badge.off{background:#f2f4f7!important;color:#667085!important;border:1px solid #e4e7ec!important}
html body .layout .content main.page .chip{background:#f2f4f7!important;color:#475467!important;border:1px solid #e4e7ec!important}

/* VPN detail scripts — fix dark-on-dark screenshot */
html body .layout .content main.page .script-grid{gap:16px!important}
html body .layout .content main.page .script-head{
  min-height:44px!important;margin:0!important;padding:0 0 9px!important;
  background:transparent!important;border:0!important;display:flex!important;align-items:center!important;
}
html body .layout .content main.page .script-head .section-title{
  color:var(--pro-ink)!important;font-size:14px!important;font-weight:800!important;margin:0!important;
}
html body .layout .content main.page .script-head .copy-btn{min-height:34px!important;padding:0 12px!important;border-radius:9px!important}
html body .layout .content main.page pre.script-box{
  min-height:190px!important;margin:0!important;padding:18px!important;border-radius:13px!important;
  background:#111827!important;color:#eef2ff!important;border:1px solid #25324a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;font-size:13px!important;line-height:1.7!important;
}
html body .layout .content main.page pre.script-box *{color:#eef2ff!important}
html body .layout .content main.page .muted-help{
  background:#f8fafc!important;color:#667085!important;border-top:1px solid var(--pro-border)!important;
}

/* Settings permissions — fix broken View/Edit labels */
html body .layout .content main.page .first-time-permission-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;
}
html body .layout .content main.page .first-time-permission-row{
  grid-template-columns:minmax(0,1fr) 92px 92px!important;gap:8px!important;min-height:58px!important;
  padding:10px 14px!important;background:#fbfcfe!important;border:1px solid var(--pro-border)!important;
  border-radius:12px!important;
}
html body .layout .content main.page .first-time-permission-row > span{
  color:var(--pro-copy)!important;font-weight:700!important;min-width:0!important;
}
html body .layout .content main.page .first-time-permission-row label{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;
  white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;
  color:#475467!important;font-size:13px!important;font-weight:650!important;margin:0!important;
}

/* Hotspot router recharge form — screenshot alignment */
html body .layout .content main.page .recharge-card{padding:20px 22px!important}
html body .layout .content main.page .recharge-card :is(.section-head,.section-top){margin-bottom:18px!important}
html body .layout .content main.page .coupon-result{
  min-height:auto!important;padding:0!important;margin-top:6px!important;background:transparent!important;
  border:0!important;box-shadow:none!important;color:var(--pro-muted)!important;font-size:12px!important;
}
html body .layout .content main.page .coupon-apply-row{gap:8px!important}
html body .layout .content main.page .coupon-apply-btn{min-height:44px!important;border-radius:10px!important}

/* VPN type admin: fix washed-out action labels and row layout */
html body .layout .content main.page .type-row{
  grid-template-columns:1.05fr .9fr .72fr 1.3fr 1fr!important;gap:10px!important;
}
html body .layout .content main.page .type-row .btn{
  min-height:38px!important;padding:0 12px!important;border-radius:9px!important;color:#344054!important;
}
html body .layout .content main.page .type-row .btn.primary{color:#fff!important}
html body .layout .content main.page .type-row [data-label="Action"]{display:flex!important;gap:7px!important;align-items:center!important}

/* Active users/data-heavy pages: compact, quiet, legible */
html body .layout .content main.page .router-table td,
html body .layout .content main.page .router-table th{white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important}
html body .layout .content main.page .router-name{gap:10px!important}
html body .layout .content main.page .router-avatar{
  background:var(--pro-brand-soft)!important;color:var(--pro-brand)!important;border:1px solid #dbeafe!important;
}
html body .layout .content main.page .bottom-label{
  color:var(--pro-ink)!important;font-size:17px!important;font-weight:800!important;margin:18px 4px 10px!important;
}

/* Alerts and readonly notes */
html body .layout .content main.page .alert.ok{background:var(--pro-success-soft)!important;color:#166534!important;border:1px solid #bbf7d0!important}
html body .layout .content main.page .alert.err{background:var(--pro-danger-soft)!important;color:#b42318!important;border:1px solid #fecdd3!important}
html body .layout .content main.page :is(.view-only-note,.api-note){
  background:#f8fafc!important;color:#667085!important;border:1px solid var(--pro-border)!important;border-radius:10px!important;
}

/* Consistent focus/accessibility */
html body .layout .content main.page :where(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(37,99,235,.18)!important;outline-offset:2px!important;
}

/* Responsive */
@media(max-width:980px){
  html body .layout .content main.page .first-time-permission-grid{grid-template-columns:1fr!important}
  html body .layout .content main.page .type-row{grid-template-columns:1fr!important}
  html body .layout .content main.page .type-row [data-label="Action"]{justify-content:flex-start!important}
}
@media(max-width:700px){
  html body .layout .content main.page :is(.card,.glass-card,.service-card,.settings-card,.recharge-card,.mapping-card){padding:16px!important}
  html body .layout .content main.page .first-time-permission-row{
    grid-template-columns:minmax(0,1fr) auto auto!important;padding:10px 12px!important;
  }
  html body .layout .content main.page .first-time-permission-row label{font-size:12px!important}
  html body .layout .content main.page .script-grid{grid-template-columns:1fr!important}
  html body .layout .content main.page pre.script-box{min-height:160px!important;font-size:12px!important}
}
@media(max-width:480px){
  html body .layout .content main.page .first-time-permission-row{
    grid-template-columns:1fr 1fr!important;gap:10px!important;
  }
  html body .layout .content main.page .first-time-permission-row > span{grid-column:1/-1!important}
}

/* ============================================================
   PROFESSIONAL UI V5 — Contrast & Status Clarity Pass
   Screenshot-targeted fixes: hero metadata, live/account status,
   chips and semantic row actions. Base navigation is untouched.
   ============================================================ */
:root{
  --v5-navy:#102a56;
  --v5-blue:#2563eb;
  --v5-green:#047857;
  --v5-green-bg:#e9f9f1;
  --v5-green-border:#a7e4c5;
  --v5-red:#b42318;
  --v5-red-bg:#fff0ef;
  --v5-red-border:#f6bbb6;
  --v5-amber:#9a4d0b;
  --v5-amber-bg:#fff7e8;
  --v5-amber-border:#f5d596;
  --v5-slate:#344054;
  --v5-slate-bg:#f2f5f9;
  --v5-slate-border:#d9e0ea;
}

/* VPN detail hero metadata: visible on the dark/blue hero, never washed out */
html body .layout .content main.page .detail-hero .detail-sub{
  display:flex!important;gap:8px!important;align-items:center!important;flex-wrap:wrap!important;
  margin-top:10px!important;
}
html body .layout .content main.page .detail-hero .mini-pill{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:32px!important;padding:6px 11px!important;border-radius:999px!important;
  background:rgba(7,25,55,.44)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  font-size:12px!important;line-height:1!important;font-weight:800!important;
  letter-spacing:.005em!important;text-shadow:0 1px 1px rgba(0,0,0,.12)!important;
  backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
}
html body .layout .content main.page .detail-hero .hero-actions .soft-btn{
  background:rgba(255,255,255,.12)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.36)!important;
  box-shadow:none!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
}
html body .layout .content main.page .detail-hero .hero-actions .soft-btn:hover{
  background:rgba(255,255,255,.20)!important;border-color:rgba(255,255,255,.52)!important;color:#fff!important;
}

/* VPN list live/account status: use a complete semantic pill instead of pale dot on white */
html body .layout .content main.page .vpn-table .live-status{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:8px!important;min-height:34px!important;padding:6px 10px!important;border-radius:999px!important;
  font-size:12px!important;line-height:1!important;font-weight:800!important;white-space:nowrap!important;
  box-shadow:none!important;
}
html body .layout .content main.page .vpn-table .live-status:has(.live-dot.online){
  background:var(--v5-green-bg)!important;color:var(--v5-green)!important;border:1px solid var(--v5-green-border)!important;
}
html body .layout .content main.page .vpn-table .live-status:has(.live-dot.offline){
  background:var(--v5-red-bg)!important;color:var(--v5-red)!important;border:1px solid var(--v5-red-border)!important;
}
html body .layout .content main.page .vpn-table .live-status .live-text{
  color:inherit!important;font-weight:800!important;
}
html body .layout .content main.page .vpn-table .live-status .live-dot,
html body .layout .content main.page .vpn-table .live-status .live-dot.online,
html body .layout .content main.page .vpn-table .live-status .live-dot.offline{
  width:8px!important;height:8px!important;min-width:8px!important;border-radius:50%!important;
  border:0!important;animation:none!important;box-shadow:none!important;background:#dc2626!important;
}
html body .layout .content main.page .vpn-table .live-status .live-dot.online{
  background:#12a866!important;
}
html body .layout .content main.page .vpn-table .live-status .live-dot.offline{
  background:#dc2626!important;
}

/* VPN online indicator on detail page: stronger dot and text contrast */
html body .layout .content main.page .vpn-online-pill{
  min-height:34px!important;padding:7px 11px!important;gap:8px!important;
  background:var(--v5-red-bg)!important;color:var(--v5-red)!important;border:1px solid var(--v5-red-border)!important;
}
html body .layout .content main.page .vpn-online-pill.online{
  background:var(--v5-green-bg)!important;color:var(--v5-green)!important;border-color:var(--v5-green-border)!important;
}
html body .layout .content main.page .vpn-online-pill .live-dot,
html body .layout .content main.page .vpn-online-pill.online .live-dot{
  width:8px!important;height:8px!important;min-width:8px!important;animation:none!important;box-shadow:none!important;
  background:#dc2626!important;border:0!important;
}
html body .layout .content main.page .vpn-online-pill.online .live-dot{background:#12a866!important}

/* Port connectivity indicator: no faded circle */
html body .layout .content main.page .status-label{
  display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:32px!important;
  padding:5px 9px!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;
}
html body .layout .content main.page .status-label:has(.status-dot.ok){
  background:var(--v5-green-bg)!important;color:var(--v5-green)!important;border:1px solid var(--v5-green-border)!important;
}
html body .layout .content main.page .status-label .status-dot,
html body .layout .content main.page .status-label .status-dot.ok{
  width:8px!important;height:8px!important;min-width:8px!important;border-radius:50%!important;
  box-shadow:none!important;animation:none!important;border:0!important;background:#dc2626!important;
}
html body .layout .content main.page .status-label .status-dot.ok{background:#12a866!important}
html body .layout .content main.page .status-label .status-text{color:inherit!important;font-weight:800!important}

/* Small metadata chips across all pages: never plain/washed-out white */
html body .layout .content main.page :is(.type-pill,.chip,.security-pill,.hs-chip){
  background:var(--v5-slate-bg)!important;color:var(--v5-slate)!important;
  border:1px solid var(--v5-slate-border)!important;box-shadow:none!important;
}
html body .layout .content main.page .type-pill{
  background:#edf4ff!important;color:#194aa7!important;border-color:#cbdcff!important;
}

/* Generic semantic status classes, scoped to known status elements only */
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).active,
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).online,
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).ok,
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).success{
  background:var(--v5-green-bg)!important;color:var(--v5-green)!important;border-color:var(--v5-green-border)!important;
}
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).offline,
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).expired,
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).danger,
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).error{
  background:var(--v5-red-bg)!important;color:var(--v5-red)!important;border-color:var(--v5-red-border)!important;
}
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).pending,
html body .layout .content main.page :is(.badge,.status,.status-pill,.status-badge,.bill-status).warning{
  background:var(--v5-amber-bg)!important;color:var(--v5-amber)!important;border-color:var(--v5-amber-border)!important;
}

/* Row actions: clear meaning, consistent saturation, no weak grey-on-blue labels */
html body .layout .content main.page .vpn-table .actions .btn{
  min-height:36px!important;padding:0 12px!important;border-radius:9px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  font-size:12px!important;font-weight:800!important;box-shadow:none!important;
}
html body .layout .content main.page .vpn-table .actions .btn-view{
  background:#edf4ff!important;color:#194aa7!important;border:1px solid #cbdcff!important;
}
html body .layout .content main.page .vpn-table .actions .btn-edit{
  background:#eaf8f1!important;color:#08734b!important;border:1px solid #b9e6cf!important;
}
html body .layout .content main.page .vpn-table .actions .btn-off{
  background:#fff7e8!important;color:#9a4d0b!important;border:1px solid #f5d596!important;
}
html body .layout .content main.page .vpn-table .actions .btn-del{
  background:#fff0ef!important;color:#b42318!important;border:1px solid #f6bbb6!important;
}
html body .layout .content main.page .vpn-table .btn-renew{
  background:#e9f9f1!important;color:#047857!important;border:1px solid #a7e4c5!important;
  box-shadow:none!important;
}

/* Status columns get enough width so pills never look squeezed */
html body .layout .content main.page .vpn-table th:nth-child(7),
html body .layout .content main.page .vpn-table th:nth-child(8),
html body .layout .content main.page .vpn-table td:nth-child(7),
html body .layout .content main.page .vpn-table td:nth-child(8){
  min-width:112px!important;
}

/* Keep high-contrast text inside soft surfaces globally */
html body .layout .content main.page :is(.badge,.chip,.status,.status-pill,.status-badge,.bill-status,.type-pill,.mini-pill,.security-pill,.hs-chip,.vpn-online-pill) :is(span,strong,b){
  color:inherit!important;
}

@media(max-width:700px){
  html body .layout .content main.page .detail-hero .mini-pill{font-size:11px!important;min-height:30px!important;padding:6px 9px!important}
  html body .layout .content main.page .vpn-table .live-status{min-height:32px!important;padding:5px 9px!important}
}

/* ============================================================
   Premium Soft Canvas — 2026-09-13
   Replaces flat white feeling with a restrained blue/slate tint.
   ============================================================ */
:root{
  --pp-bg:#eef3f9;
  --pp-surface:#fbfdff;
  --pp-surface-2:#f3f7fc;
}
html body .layout .content main.page{
  background:
    radial-gradient(circle at 10% 3%,rgba(37,99,235,.10),transparent 30%),
    radial-gradient(circle at 92% 12%,rgba(6,182,212,.08),transparent 28%),
    linear-gradient(135deg,#edf3fa 0%,#f5f8fc 48%,#edf6fa 100%)!important;
}
html body .layout .content main.page :is(
  .card,.panel,.box,.section,.section-card,.content-card,.form-card,.filter-card,
  .table-card,.stat-card,.summary-card,.router-card,.hotspot-card,.glass-card,
  .section-box,.permission-card,.settings-card,.info-card,.script-card
){
  background:linear-gradient(180deg,#fdfefe 0%,#f7faff 100%)!important;
  border-color:#d7e3f0!important;
}
html body .layout .content main.page :is(.table-wrap,.table-scroll,.hotspot-table-wrap,.responsive-scroll,.table-responsive){
  background:#f9fbfe!important;
}
html body .layout .content main.page table{background:#f9fbfe!important}
html body .layout .content main.page table td{background:#fbfdff!important}
html body .layout .content main.page table tbody tr:nth-child(even) td{background:#f7faff!important}
html body .layout .content main.page table tbody tr:hover td{background:#eef6ff!important}
html body .layout .content main.page :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.control,.mini-input){
  background:#fbfdff!important;
}

/* ============================================================
   Responsive Foundation V6 — 2026-09-16
   UI-only safety layer for every content page. Navigation/base
   structure is untouched; prevents horizontal overflow and makes
   forms, cards, tables, actions and modals usable on phones/tablets.
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
html body .layout,html body .layout .content,html body .layout .content main.page{min-width:0!important;max-width:100%!important}
html body .layout .content main.page *{box-sizing:border-box}
html body .layout .content main.page :is(img,svg,video,canvas){max-width:100%;height:auto}
html body .layout .content main.page :is(.container,.page-wrap,.page-container,.content-wrap,.content-container,.reseller-page){width:100%!important;max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}
html body .layout .content main.page :is(.grid,.form-grid,.stats-grid,.cards-grid,.dashboard-grid,.filter-grid,.detail-grid,.settings-grid){min-width:0}
html body .layout .content main.page :is(.card,.panel,.box,.section,.section-card,.content-card,.form-card,.filter-card,.table-card,.panel-card,.settings-card,.info-card){min-width:0;max-width:100%}
html body .layout .content main.page :is(.table-wrap,.table-scroll,.table-responsive,.responsive-scroll,.hotspot-table-wrap){width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
html body .layout .content main.page table{max-width:100%}
html body .layout .content main.page :is(input:not([type=checkbox]):not([type=radio]),select,textarea,button){max-width:100%}
html body .layout .content main.page :is(.actions,.action-row,.button-row,.btn-row,.form-actions){flex-wrap:wrap}

@media(max-width:900px){
 html body .layout .content main.page :is(.grid,.form-grid,.stats-grid,.cards-grid,.dashboard-grid,.filter-grid,.detail-grid,.settings-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
 html body .layout .content main.page{padding-left:10px!important;padding-right:10px!important}
 html body .layout .content main.page :is(.grid,.form-grid,.stats-grid,.cards-grid,.dashboard-grid,.filter-grid,.detail-grid,.settings-grid){grid-template-columns:minmax(0,1fr)!important}
 html body .layout .content main.page :is(.card,.panel,.box,.section,.section-card,.content-card,.form-card,.filter-card,.table-card,.panel-card,.settings-card,.info-card){padding-left:14px!important;padding-right:14px!important}
 html body .layout .content main.page :is(.actions,.action-row,.button-row,.btn-row,.form-actions) :is(a,button,.btn){min-height:42px}
 html body .layout .content main.page :is(.modal,.modal-box,.dialog,.dialog-box){width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:90dvh!important;margin:12px!important}
}
@media(max-width:480px){
 html body .layout .content main.page{padding-left:8px!important;padding-right:8px!important}
 html body .layout .content main.page :is(h1,.page-title){overflow-wrap:anywhere}
}