:root {
  --ui-primary: #2463eb;
  --ui-primary-hover: #174bc7;
  --ui-primary-soft: #eaf1ff;
  --ui-ink: #142038;
  --ui-muted: #63718a;
  --ui-bg: #f3f7fc;
  --ui-surface: #ffffff;
  --ui-line: #dce6f2;
  --ui-success: #07866d;
  --ui-warning: #e08319;
  --ui-danger: #df3d49;
  --ui-navy: #081426;
  --ui-shadow: 0 10px 30px rgba(25, 48, 86, 0.07);
  --ui-shadow-strong: 0 24px 64px rgba(15, 32, 61, 0.15);
  --ui-radius: 18px;
}

html {
  background: var(--ui-bg);
}

body.commercial-ui {
  margin: 0;
  overflow-x: hidden;
  color: var(--ui-ink);
  background: var(--ui-bg);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.commercial-ui *,
body.commercial-ui *::before,
body.commercial-ui *::after {
  box-sizing: border-box;
  letter-spacing: 0;
}

body.commercial-ui button,
body.commercial-ui input,
body.commercial-ui select,
body.commercial-ui textarea {
  font: inherit;
}

body.commercial-ui input:not([type="checkbox"]):not([type="radio"]),
body.commercial-ui select,
body.commercial-ui textarea {
  border: 1px solid var(--ui-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ui-ink);
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.commercial-ui input:not([type="checkbox"]):not([type="radio"]):focus,
body.commercial-ui select:focus,
body.commercial-ui textarea:focus {
  outline: none;
  border-color: #7aa7f8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

body.commercial-ui button,
body.commercial-ui .btn {
  border-radius: 6px;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

body.commercial-ui button:not(:disabled):hover,
body.commercial-ui .btn:not(:disabled):hover {
  transform: translateY(-1px);
}

body.commercial-ui button:focus-visible,
body.commercial-ui .btn:focus-visible,
body.commercial-ui a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.24);
  outline-offset: 2px;
}

body.commercial-ui .panel,
body.commercial-ui .card,
body.commercial-ui .site-card,
body.commercial-ui .admin-domain-card-v2 {
  max-width: 100%;
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

.page-admin .app,
.page-client .app,
.page-dashboard .app,
.page-dashboard .layout {
  min-height: 100vh;
  background: var(--ui-bg);
}

.page-admin .side,
.page-client .side,
.page-dashboard .sidebar {
  background: #0b1729 !important;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 10px 0 30px rgba(15, 23, 42, 0.08);
}

.page-admin .side .brand,
.page-client .side .brand,
.page-dashboard .sidebar .brand {
  border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

.page-admin .logo,
.page-client .logo,
.page-dashboard .brand-mark,
.page-admin-login .mark,
.page-public .mark {
  border-radius: 8px !important;
  background: var(--ui-primary) !important;
  box-shadow: none !important;
}

.page-admin .nav button,
.page-client .nav button,
.page-dashboard .sidebar .nav button,
.page-dashboard .sidebar .nav a {
  border-radius: 6px !important;
  color: #aebbd0 !important;
}

.page-admin .nav button:hover,
.page-client .nav button:hover,
.page-dashboard .sidebar .nav button:hover,
.page-dashboard .sidebar .nav a:hover {
  color: #fff !important;
  background: rgba(148, 163, 184, 0.12) !important;
}

.page-admin .nav button.active,
.page-client .nav button.active,
.page-dashboard .sidebar .nav button.active,
.page-dashboard .sidebar .nav a.active {
  color: #fff !important;
  background: #1d2a40 !important;
  box-shadow: inset 3px 0 0 #60a5fa;
}

.page-admin .top,
.page-client .top,
.page-dashboard .topbar {
  min-width: 0;
  border-bottom: 1px solid var(--ui-line) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(12px);
}

.page-admin .content,
.page-client .content,
.page-dashboard .content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 24px !important;
  background: var(--ui-bg) !important;
}

.page-admin .panel,
.page-client .panel,
.page-dashboard .panel,
.page-dashboard .card {
  overflow: hidden;
  background: var(--ui-surface);
}

.page-client .panel.client-hero {
  border: 1px solid #dbeafe !important;
  background: linear-gradient(120deg, #ffffff 0%, #f8fbff 62%, #e0f2fe 100%) !important;
  color: #0f172a;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.page-client .client-hero h1 {
  color: #0f172a;
  font-weight: 900;
}

.page-client .client-hero .home-kicker {
  color: #047857;
}

.page-client .client-hero .muted {
  color: #52627a !important;
  font-weight: 600;
}

.page-client .client-hero::after {
  background: rgba(56, 189, 248, 0.12);
}

.page-admin .panel-h,
.page-client .panel-h,
.page-dashboard .panel-h {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--ui-line) !important;
  background: #fff;
}

.page-admin .panel-b,
.page-client .panel-b,
.page-dashboard .panel-b {
  padding: 20px !important;
}

.page-admin .btn:not(.ghost):not(.outline):not(.danger),
.page-client .btn:not(.ghost):not(.outline):not(.danger),
.page-dashboard .btn:not(.ghost):not(.outline):not(.danger),
.page-admin button.primary,
.page-client button.primary,
.page-dashboard button.primary {
  border-color: var(--ui-primary) !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(37, 99, 235, 0.18);
}

.page-admin .btn:not(.ghost):not(.outline):not(.danger):hover,
.page-client .btn:not(.ghost):not(.outline):not(.danger):hover,
.page-dashboard .btn:not(.ghost):not(.outline):not(.danger):hover {
  background: var(--ui-primary-hover) !important;
}

.page-admin .btn.danger,
.page-client .btn.danger,
.page-dashboard .btn.danger,
.page-admin button.danger,
.page-client button.danger,
.page-dashboard button.danger {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(220, 38, 38, 0.14);
}

.page-admin .site-card,
.page-client .site-card,
.page-admin .admin-domain-card-v2,
.page-client .admin-domain-card-v2 {
  border: 1px solid var(--ui-line) !important;
  background: #fff;
}

.page-client .domain-list-head {
  margin-bottom: 10px;
  padding: 13px 18px;
  border: 1px solid var(--ui-line);
  border-radius: 8px;
  background: #f8fafc;
}

.page-client .site-card.domain-status-card {
  min-height: 190px;
  margin-bottom: 12px;
  padding: 18px !important;
  border-left: 3px solid #f59e0b !important;
}

.page-client .site-card.domain-status-card .ops .btn.danger {
  border: 1px solid #fecdd3 !important;
  background: #fff1f2 !important;
  color: #dc2626 !important;
  box-shadow: none !important;
}

.page-client .site-card.domain-status-card .ops .btn.danger:hover {
  background: #ffe4e6 !important;
}

.page-client .site-card.domain-status-card.ok,
.page-client .site-card.domain-status-card.success {
  border-left-color: #10b981 !important;
  background: #fbfffd;
}

.page-client .site-card.domain-status-card .title,
.page-admin .admin-domain-card-v2 .title {
  color: var(--ui-ink);
  font-weight: 800;
}

.page-client .site-card.domain-status-card .muted,
.page-client .site-card.domain-status-card .sub,
.page-admin .admin-domain-card-v2 .muted {
  color: var(--ui-muted);
}

.page-client .site-card.domain-status-card .ops .btn,
.page-admin .admin-domain-card-v2 .btn {
  min-height: 40px;
  padding: 8px 12px;
}

.page-dashboard .metric,
.page-dashboard .stat,
.page-dashboard .kpi {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow);
}

.page-public {
  color: var(--ui-ink);
  background: #fff;
}

.page-public header.nav {
  border-bottom: 1px solid var(--ui-line) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(12px);
}

.page-public .hero-card,
.page-public .metric,
.page-public .feature,
.page-public .price-card,
.page-public .step,
.page-public .faq-item,
.page-public .panel {
  border-radius: 8px !important;
  border-color: var(--ui-line) !important;
  box-shadow: var(--ui-shadow);
}

.page-public .cta,
.page-public .primary,
.page-public .btn-primary {
  border-radius: 6px !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2) !important;
}

.page-public .secondary,
.page-public .btn-secondary {
  border-radius: 6px !important;
  border-color: var(--ui-line) !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
}

body.page-admin-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #eef3f8 !important;
}

body.page-admin-login::before,
body.page-admin-login::after {
  display: none !important;
}

.page-admin-login .card {
  width: min(430px, 100%);
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--ui-shadow-strong) !important;
}

.page-admin-login .field input {
  min-height: 48px;
}

.page-admin-login button[type="submit"] {
  min-height: 48px;
  border-color: var(--ui-primary) !important;
  border-radius: 6px !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
}

@media (max-width: 1180px) {
  .page-admin .content,
  .page-client .content,
  .page-dashboard .content {
    padding: 18px !important;
  }

  .page-client .site-card.domain-status-card,
  .page-client .domain-list-head {
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .page-admin .app,
  .page-client .app,
  .page-dashboard .app,
  .page-dashboard .layout {
    display: block !important;
  }

  .page-admin .side,
  .page-client .side,
  .page-dashboard .sidebar {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .page-admin .side .brand,
  .page-client .side .brand,
  .page-dashboard .sidebar .brand {
    min-height: 64px;
    padding: 12px 16px !important;
  }

  .page-admin .side .nav,
  .page-client .side .nav,
  .page-dashboard .sidebar .nav {
    display: flex !important;
    gap: 8px;
    padding: 10px 12px 12px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .page-admin .side .nav::-webkit-scrollbar,
  .page-client .side .nav::-webkit-scrollbar,
  .page-dashboard .sidebar .nav::-webkit-scrollbar {
    display: none;
  }

  .page-admin .nav button,
  .page-client .nav button,
  .page-dashboard .sidebar .nav button,
  .page-dashboard .sidebar .nav a {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 13px !important;
    white-space: nowrap;
  }

  .page-admin main,
  .page-client main,
  .page-dashboard .main {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .page-admin .top,
  .page-client .top,
  .page-dashboard .topbar {
    position: sticky !important;
    top: 0;
    z-index: 30;
    min-height: 58px;
    padding: 10px 14px !important;
  }

  .page-admin .content,
  .page-client .content,
  .page-dashboard .content {
    padding: 12px !important;
  }

  .page-admin .panel-h,
  .page-client .panel-h,
  .page-dashboard .panel-h,
  .page-admin .panel-b,
  .page-client .panel-b,
  .page-dashboard .panel-b {
    padding: 14px !important;
  }

  .page-admin .panel-h,
  .page-client .panel-h,
  .page-dashboard .panel-h {
    align-items: flex-start !important;
    gap: 10px;
    flex-wrap: wrap;
  }

  .page-client .site-card.domain-status-card {
    min-height: 0;
    padding: 15px !important;
  }

  .page-client .site-card.domain-status-card .ops {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-client .site-card.domain-status-card .ops .btn {
    width: 100%;
  }

  .page-public header.nav {
    padding-inline: 14px !important;
  }

  .page-public .hero-card,
  .page-public .panel,
  .page-public .feature,
  .page-public .step,
  .page-public .faq-item {
    border-radius: 8px !important;
  }
}

/* Final cascade lock: the legacy compatibility rules above stay available,
   while these tokens define the visible 2026 design system. */
body.commercial-ui {
  min-height:100vh;
  color:var(--ui-ink);
  background:radial-gradient(circle at 9% 2%,rgba(36,99,235,.07),transparent 24rem),linear-gradient(180deg,#f8fbff 0,var(--ui-bg) 26rem,#f3f7fc 100%);
  font-family:"Segoe UI","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.6;
}
body.commercial-ui input:not([type="checkbox"]):not([type="radio"]),body.commercial-ui select,body.commercial-ui textarea{min-height:46px;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:rgba(255,255,255,.97)!important;box-shadow:inset 0 1px 2px rgba(15,32,61,.025)!important}
body.commercial-ui input:not([type="checkbox"]):not([type="radio"]):focus,body.commercial-ui select:focus,body.commercial-ui textarea:focus{outline:0;border-color:#6f9bfa!important;box-shadow:0 0 0 4px rgba(36,99,235,.11)!important}
body.commercial-ui .btn,body.commercial-ui button.btn{min-height:42px;border:1px solid transparent!important;border-radius:11px!important;background:linear-gradient(135deg,#2f70f4,#2157d7)!important;color:#fff!important;box-shadow:0 9px 20px rgba(36,99,235,.18);font-weight:800}
body.commercial-ui .btn.ghost,body.commercial-ui .btn.outline,body.commercial-ui button.ghost,body.commercial-ui button.outline{color:#2357c8!important;background:#f1f5ff!important;border-color:#dbe6fb!important;box-shadow:none}
body.commercial-ui .btn.ok,body.commercial-ui .btn.success{background:linear-gradient(135deg,#0c9a7a,#08745f)!important}
body.commercial-ui .btn.warn{background:linear-gradient(135deg,#f2a13d,#d87312)!important}
body.commercial-ui .btn.danger{color:#c72d38!important;background:#fff2f3!important;border-color:#ffcdd2!important;box-shadow:none}
body.commercial-ui .btn.sm{min-height:36px;padding:7px 12px!important;border-radius:9px!important}
body.commercial-ui .panel,body.commercial-ui .card,body.commercial-ui .site-card,body.commercial-ui .admin-domain-card-v2{border:1px solid rgba(210,223,239,.96)!important;border-radius:var(--ui-radius)!important;background:rgba(255,255,255,.97)!important;box-shadow:var(--ui-shadow)!important}
body.commercial-ui .panel-h{min-height:68px;padding:17px 22px!important;border-bottom-color:#e8eef7!important;background:linear-gradient(180deg,#fff,#fbfdff)!important}
body.commercial-ui .panel-b{padding:22px!important}
.page-admin .app,.page-client .app,.page-dashboard .app,.page-dashboard .layout{background:transparent!important}
.page-admin .side,.page-client .side,.page-dashboard .sidebar{background:radial-gradient(circle at 28% -2%,rgba(52,120,246,.33),transparent 15rem),linear-gradient(180deg,#08162a,#091324 48%,#07101d)!important;border-right:1px solid rgba(162,188,225,.12)!important;box-shadow:18px 0 50px rgba(10,28,55,.11)!important}
.page-admin .logo,.page-client .logo,.page-dashboard .brand-mark,.page-admin-login .mark,.page-public .mark{border-radius:13px!important;background:linear-gradient(145deg,#3b82f6,#2053ce)!important;box-shadow:0 10px 24px rgba(36,99,235,.3)!important}
.page-admin .nav,.page-client .nav,.page-dashboard .sidebar .nav{gap:6px}
.page-admin .nav button,.page-client .nav button,.page-dashboard .sidebar .nav button,.page-dashboard .sidebar .nav a{position:relative;display:flex!important;align-items:center;gap:12px;min-height:47px;padding:10px 13px!important;border:1px solid transparent!important;border-radius:12px!important;color:#9eb0c8!important;font-size:14px;font-weight:750}
.page-admin .nav button:before,.page-client .nav button:before{content:""!important;display:block;flex:0 0 32px;width:32px;height:32px;background-color:currentColor;-webkit-mask-image:var(--nav-icon);mask-image:var(--nav-icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:19px 19px;mask-size:19px 19px;opacity:.92}
.page-dashboard .sidebar .nav .ico{display:block;flex:0 0 32px;width:32px;height:32px;font-size:0;background-color:currentColor;-webkit-mask-image:var(--nav-icon);mask-image:var(--nav-icon);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:19px 19px;mask-size:19px 19px;opacity:.92}
.page-admin .nav button[data-page="home"],.page-client .nav button[data-page="home"],.page-dashboard .nav button[data-page="dashboard"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5M9 21v-7h6v7'/%3E%3C/svg%3E")}
.page-admin .nav button[data-page="sites"],.page-client .nav button[data-page="sites"],.page-dashboard .nav button[data-page="sites"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E")}
.page-admin .nav button[data-page="mailboxes"],.page-client .nav button[data-page="mail"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
.page-client .nav button[data-page="batch"],.page-dashboard .nav button[data-page="batch"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h15M16 4l3 3-3 3M20 17H5M8 14l-3 3 3 3'/%3E%3C/svg%3E")}
.page-client .nav button[data-page="wallet"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='15' rx='3'/%3E%3Cpath d='M3 9h18M16 14h2'/%3E%3C/svg%3E")}
.page-client .nav button[data-page="plans"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 7 4 4 5-7 5 7 4-4-2 11H5L3 7ZM5 21h14'/%3E%3C/svg%3E")}
.page-client .nav button[data-page="account"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.8-4.5 3.5-7 8-7s7.2 2.5 8 7'/%3E%3C/svg%3E")}
.page-admin .nav button[data-page="users"],.page-dashboard .nav button[data-page="users"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.7-4 2.8-6 6.5-6s5.8 2 6.5 6M16 5.5a3.5 3.5 0 0 1 0 6.5M16 14c3.2.3 5 2.3 5.5 6'/%3E%3C/svg%3E")}
.page-admin .nav button[data-page="finance"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M22 19H2M3 7l6-4 6 5 6-4'/%3E%3C/svg%3E")}
.page-admin .nav button[data-page="templates"],.page-dashboard .nav button[data-page="templates"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
.page-admin .nav button[data-page="logs"],.page-dashboard .nav button[data-page="logs"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Ccircle cx='4' cy='6' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='4' cy='12' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='4' cy='18' r='1' fill='black' stroke='none'/%3E%3C/svg%3E")}
.page-admin .nav button[data-page="settings"],.page-dashboard .nav button[data-page="settings"]{--nav-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9 7 7M17 17l2.1 2.1M19.1 4.9 17 7M7 17l-2.1 2.1'/%3E%3C/svg%3E")}
.page-admin .nav button:hover,.page-client .nav button:hover,.page-dashboard .sidebar .nav button:hover,.page-admin .nav button.active,.page-client .nav button.active,.page-dashboard .sidebar .nav button.active{color:#fff!important;background:linear-gradient(90deg,rgba(51,116,239,.28),rgba(51,116,239,.1))!important;border-color:rgba(112,163,255,.18)!important;box-shadow:inset 3px 0 0 #5b91f7}
.page-admin .nav button.active:before,.page-client .nav button.active:before{color:#fff;opacity:1}
.page-admin .top,.page-client .top,.page-dashboard .topbar{min-height:76px!important;background:rgba(255,255,255,.88)!important;border-bottom:1px solid rgba(210,223,239,.9)!important;box-shadow:0 6px 24px rgba(25,48,86,.045)!important;backdrop-filter:blur(16px) saturate(130%)}
.page-admin .content,.page-client .content,.page-dashboard .content{padding:26px 28px 34px!important}
.page-admin .pill,.page-client .pill,.page-dashboard .badge,.page-client .balance-pill{min-height:38px;border:1px solid #d6e5f6;background:#edf6ff!important;color:#08648e!important;box-shadow:none!important}
.page-admin .stats .card,.page-client .stats .card,.page-dashboard .stats .card{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.page-admin .stats .card:after,.page-client .stats .card:after,.page-dashboard .stats .card:after{content:"";position:absolute;right:-22px;bottom:-28px;width:92px;height:92px;border-radius:50%;background:rgba(36,99,235,.055);pointer-events:none}
.page-admin .stats .card:hover,.page-client .stats .card:hover,.page-dashboard .stats .card:hover{transform:translateY(-2px);border-color:#c5d7ee!important;box-shadow:0 16px 38px rgba(25,48,86,.1)!important}
.page-admin .admin-home-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.page-admin .unblock-success-card{border-color:#bcebd7!important;background:linear-gradient(145deg,#f0fdf8,#ffffff 70%)}.page-admin .unblock-success-card:before{content:"\2713";position:absolute;right:18px;top:17px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#d8f8e9;color:#07845f;font-size:17px;font-weight:900}.page-admin .unblock-success-card:after{background:rgba(16,185,129,.09)!important}.page-admin .unblock-success-card span{color:#07845f}.page-admin .unblock-success-card b{color:#075f49}.page-admin .unblock-success-card small{display:block;position:relative;z-index:1;margin-top:7px;color:#718198;font-size:12px;line-height:1.45}
body.commercial-ui .badge,body.commercial-ui .status,body.commercial-ui [class*="status-badge"]{align-items:center;justify-content:center;min-height:30px;border-radius:999px!important;font-weight:800;line-height:1.2}
body.commercial-ui .badge.ok,body.commercial-ui .status.ok{color:#05715c!important;background:#dcf9ed!important}
body.commercial-ui .badge.warn,body.commercial-ui .status.wait{color:#a15408!important;background:#fff0d7!important}
body.commercial-ui .badge.bad,body.commercial-ui .status.bad{color:#b92935!important;background:#ffe4e7!important}
.page-client .site-card.domain-status-card,.page-admin .admin-domain-card-v2{border-left:4px solid #e4a225!important;box-shadow:0 10px 26px rgba(25,48,86,.06)!important}
.page-client .site-card.domain-status-card .ops,.page-admin .admin-domain-card-v2 .ops{padding-left:14px;border-left:1px solid #e9eff7}
.page-public{background:#f8fbff!important}
.page-public header.nav{min-height:78px;background:rgba(255,255,255,.88)!important;border-bottom-color:rgba(207,221,239,.88)!important;box-shadow:0 8px 28px rgba(25,48,86,.055)!important}
.page-public .hero-copy h1{color:#10203b;letter-spacing:-.045em!important}
.page-public .hero-card{border:1px solid rgba(111,165,250,.22);border-radius:30px!important;background:radial-gradient(circle at 74% 14%,rgba(39,196,194,.38),transparent 32%),linear-gradient(145deg,#06142a,#113d65 58%,#0b756e)!important;box-shadow:0 30px 90px rgba(12,39,72,.24)!important}
.page-public .feature,.page-public .card,.page-public .step,.page-public .faq-item,.page-public .contact-main,.page-public .contact-box{border-radius:20px!important}
.page-public .cta{border-radius:12px!important;background:linear-gradient(135deg,#2f70f4,#2157d7)!important}
.page-public .auth{border:1px solid rgba(214,226,241,.9);border-radius:22px!important;box-shadow:0 30px 90px rgba(10,28,55,.22)!important}
.page-admin-login{background:radial-gradient(circle at 18% 18%,rgba(51,116,239,.28),transparent 25rem),radial-gradient(circle at 82% 76%,rgba(15,156,127,.19),transparent 27rem),linear-gradient(145deg,#06101f,#0a1930 58%,#0b2531)!important}
.page-admin-login .card{position:relative;width:min(460px,100%);padding:38px!important;border:1px solid rgba(202,219,240,.85)!important;border-radius:24px!important;background:rgba(255,255,255,.97)!important;box-shadow:0 34px 100px rgba(0,0,0,.35)!important}
.page-admin-login .card:before{content:"";position:absolute;left:38px;right:38px;top:0;height:4px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#3478f6,#10a885)}
body.commercial-ui .filebox,body.commercial-ui .upload-box,body.commercial-ui .dns-guide,body.commercial-ui .notice{border:1px dashed #abc8ed!important;border-radius:16px!important;background:#f2f7ff!important}
body.commercial-ui .tpl{border-color:#dce6f2!important;border-radius:16px!important;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
body.commercial-ui .tpl:hover{transform:translateY(-3px);border-color:#aac7ef!important;box-shadow:0 16px 34px rgba(25,48,86,.1)}
body.commercial-ui [class*="dialog"],body.commercial-ui .pay-box{border-radius:20px!important;box-shadow:var(--ui-shadow-strong)!important}
/* Recharge hero keeps its intentional dark brand surface above the shared panel style. */
.page-client .panel.wallet-hero{border:0!important;background:linear-gradient(125deg,#071a3a 0%,#0b4bb3 56%,#1677ff 100%)!important;color:#fff!important;box-shadow:0 20px 42px rgba(22,119,255,.2)!important}
.page-client .panel.wallet-hero>.panel-b{background:transparent!important}
.page-client .panel.wallet-hero h2,.page-client .panel.wallet-hero .wallet-balance-card b{color:#fff!important}
.page-client .panel.wallet-hero p,.page-client .panel.wallet-hero .wallet-balance-card span{color:#dbeafe!important}

/* Shared interaction states */
.ui-menu-toggle{display:none;width:42px;height:42px;border:1px solid #dbe5f1;border-radius:12px;background:#fff;color:#17345f;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px rgba(15,23,42,.06)}
.ui-menu-toggle:before{content:"";width:19px;height:14px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 6px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 12px/100% 2px no-repeat}
.ui-side-mask{display:none}
.ui-loading{min-height:260px;display:grid;place-items:center;padding:34px}
.ui-loading-card{width:min(720px,100%);display:grid;gap:14px}
.ui-loading-line{height:16px;border-radius:999px;background:linear-gradient(90deg,#edf2f8 25%,#f8fbff 42%,#edf2f8 68%);background-size:300% 100%;animation:ui-shimmer 1.25s linear infinite}
.ui-loading-line:nth-child(1){width:38%;height:24px}.ui-loading-line:nth-child(2){width:88%}.ui-loading-line:nth-child(3){width:72%}.ui-loading-line:nth-child(4){width:94%;height:88px;border-radius:18px}
@keyframes ui-shimmer{to{background-position:-300% 0}}
.ui-empty,.empty-line,.wallet-record-empty{min-height:170px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:30px!important;border:1px dashed #cdd9e8!important;border-radius:18px!important;background:linear-gradient(180deg,#fbfdff,#f6f9fd)!important;color:#64748b!important;font-weight:700!important}
.ui-empty:before,.empty-line:before,.wallet-record-empty:before{content:"";width:48px;height:48px;border-radius:15px;background:#eaf1ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 12 3l8 4.5v9L12 21l-8-4.5z'/%3E%3Cpath d='m4 7.5 8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E") center/24px no-repeat;box-shadow:0 8px 20px rgba(37,99,235,.1)}
.ui-confirm{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(3,12,27,.55);backdrop-filter:blur(5px)}
.ui-confirm.show{display:flex}.ui-confirm-card{width:min(430px,100%);padding:26px;border:1px solid #dfe8f4;border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(2,12,27,.28);animation:ui-pop .18s ease-out}.ui-confirm-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff1f2;color:#dc2626;font-size:24px;font-weight:900}.ui-confirm h3{margin:16px 0 8px;font-size:20px;color:#101828}.ui-confirm p{margin:0;color:#64748b;line-height:1.75}.ui-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.ui-confirm-actions button{min-width:92px}
@keyframes ui-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.monitor-panel{display:grid;grid-template-columns:minmax(230px,1.2fr) repeat(5,minmax(100px,.65fr));gap:12px;align-items:stretch}.monitor-intro,.monitor-metric{border:1px solid #e2eaf4;border-radius:16px;padding:17px;background:linear-gradient(180deg,#fff,#f8fbff)}.monitor-intro{display:flex;gap:13px;align-items:center}.monitor-pulse{width:12px;height:12px;border-radius:50%;background:#10b981;box-shadow:0 0 0 7px rgba(16,185,129,.12)}.monitor-pulse.running{animation:ui-pulse 1.1s infinite}.monitor-intro b,.monitor-metric b{display:block;color:#10213c;font-size:17px}.monitor-intro span,.monitor-metric span{display:block;color:#718198;font-size:12px;margin-top:6px;line-height:1.5}.monitor-metric b{font-size:22px}.monitor-metric.bad b{color:#dc2626}.monitor-metric.warn b{color:#c76b00}
@keyframes ui-pulse{50%{box-shadow:0 0 0 12px rgba(16,185,129,0)}}
@media(min-width:901px){.page-admin .user-table th:last-child,.page-admin .user-table td:last-child{position:sticky;right:0;z-index:3;background:#fff;box-shadow:-12px 0 20px -20px rgba(15,23,42,.65)}.page-admin .user-table thead th:last-child{z-index:5;background:#f3f7fc}}
@media(max-width:1100px){.monitor-panel{grid-template-columns:repeat(3,minmax(0,1fr))}.monitor-intro{grid-column:1/-1}}
@media(max-width:1250px){.page-admin .admin-home-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.ui-menu-toggle{display:inline-flex;flex:0 0 auto}.page-admin .top,.page-client .top{grid-template-columns:auto 1fr!important;align-items:center!important}.page-admin .top .title,.page-client .top .title{min-width:0}.page-admin .top .userbar,.page-client .top .userbar{grid-column:1/-1}.page-admin .side,.page-client .side,.page-dashboard .sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(300px,84vw)!important;height:100vh!important;z-index:900;transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto}.page-admin .app.nav-open .side,.page-client .app.nav-open .side,.page-dashboard .app.nav-open .sidebar{transform:none}.page-admin .nav,.page-client .nav,.page-dashboard .sidebar .nav{display:grid!important;overflow:visible!important}.page-admin .nav button,.page-client .nav button,.page-dashboard .sidebar .nav button{width:100%!important}.page-dashboard .brand b,.page-dashboard .nav span:not(.ico){display:block!important}.page-dashboard .brand{justify-content:flex-start!important;padding:0 20px!important}.page-dashboard .main{margin-left:0!important}.page-dashboard .topbar{display:grid;grid-template-columns:auto 1fr;padding:12px 16px!important}.page-dashboard .topbar .userbar{grid-column:1/-1}.page-admin .ui-side-mask,.page-client .ui-side-mask,.page-dashboard .ui-side-mask{position:fixed;inset:0;z-index:899;background:rgba(3,12,27,.48)}.page-admin .app.nav-open .ui-side-mask,.page-client .app.nav-open .ui-side-mask,.page-dashboard .app.nav-open .ui-side-mask{display:block}.monitor-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.monitor-panel{grid-template-columns:1fr}.monitor-intro{grid-column:auto}.ui-confirm-actions{display:grid;grid-template-columns:1fr 1fr}.ui-confirm-actions button{width:100%}}
@media(max-width:700px){.page-admin .admin-home-stats{grid-template-columns:1fr}}
@media(max-width:900px){body.page-admin .side .nav,body.page-client .side .nav,body.page-dashboard .sidebar .nav{display:flex!important;flex-direction:column!important;overflow:visible!important}body.page-admin .side .nav button,body.page-client .side .nav button,body.page-dashboard .sidebar .nav button{width:100%!important;flex:0 0 auto!important}}
.monitor-time-list{display:grid!important;gap:5px;margin-top:9px!important;color:#718198!important;font-size:12px!important}.monitor-time-list>span{display:flex!important;align-items:center;justify-content:space-between;gap:14px;margin:0!important;white-space:nowrap}.monitor-time-list strong{color:#40516a;font-size:12px;font-weight:850}.monitor-countdown{display:inline-flex;align-items:center;justify-content:center;min-width:76px;padding:4px 8px;border-radius:8px;background:#e9f3ff;color:#1764d8!important;font-family:Consolas,Monaco,monospace;font-size:13px!important;letter-spacing:.04em}.monitor-intro{min-width:320px}
@media(max-width:540px){.monitor-intro{min-width:0}.monitor-time-list>span{align-items:flex-start;flex-direction:column;gap:2px;white-space:normal}}
@media(max-width:980px){.page-admin .content,.page-client .content,.page-dashboard .content{padding:14px!important}body.commercial-ui .panel-h,body.commercial-ui .panel-b{padding:15px!important}.page-client .site-card.domain-status-card .ops,.page-admin .admin-domain-card-v2 .ops{padding-left:0;border-left:0}.page-public .hero-card{border-radius:22px!important}}
@media(max-width:640px){:root{--ui-radius:15px}.page-admin-login .card{padding:28px 21px!important;border-radius:20px!important}.page-admin-login .card:before{left:21px;right:21px}}