/* ============================================================
   Unified site — cloudsale.vn top-nav + Streamit dark theme
   One shell for marketing + logged-in app. No sidebar.
   Merged from landing.css + portal.css (single :root, single .btn).
   ============================================================ */
:root {
  --bg: #08080a;
  --surface: #0d0d10;
  --card: #121214;
  --card-hover: #1a1a1e;
  --text: #d4d4d8;
  --text-strong: #fafafa;
  --muted: #a1a1aa;
  --border: #26262b;
  --border-strong: #34343c;
  --primary: #ff3b47;
  --primary-hover: #ff5560;
  --primary-deep: #e11d2a;
  --primary-tint: #2a1417;
  --primary-rgb: 255, 59, 71;
  --danger-surface: #2a1417;
  --danger: #ff5560;
  --danger-border: rgba(255, 59, 71, .4);
  --success: #34d399;
  --grad-primary: linear-gradient(135deg, #ff3b47 0%, #e11d2a 100%);
  --grad-border: linear-gradient(135deg, rgba(var(--primary-rgb), .55), rgba(var(--primary-rgb), 0) 55%);
  --glow: 0 12px 40px -12px rgba(var(--primary-rgb), .55);
  --glow-sm: 0 8px 24px -10px rgba(var(--primary-rgb), .5);
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --maxw: 1200px;
  --topbar-h: 64px;
  --section-space: 72px;
  --section-tight-space: 48px;
  --app-top-space: 32px;
  --app-bottom-space: 64px;
  --panel-padding: 20px;
  --panel-head-padding: 16px 20px;
  --font: 'Roboto', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Website palette is stored in admin settings. The dark preset intentionally
   preserves the original black/red appearance; light presets share the same
   neutral surfaces and change only the accessible accent token set. */
body[data-theme="light"] {
  --bg: #f8fbff;
  --surface: #f1f7fd;
  --card: #ffffff;
  --card-hover: #eef6fd;
  --text: #334155;
  --text-strong: #0f172a;
  --muted: #475569;
  --border: #d9e4ef;
  --border-strong: #c1d2e3;
  --primary: #0284c7;
  --primary-hover: #0369a1;
  --primary-deep: #075985;
  --primary-tint: #e0f2fe;
  --primary-rgb: 2, 132, 199;
  --grad-primary: linear-gradient(135deg, #0284c7 0%, #075985 100%);
  --danger-surface: #fef2f2;
  --danger: #b91c1c;
  --danger-border: rgba(220, 38, 38, .4);
}
body[data-theme="light"][data-accent="emerald"] {
  --primary: #059669;
  --primary-hover: #047857;
  --primary-deep: #065f46;
  --primary-tint: #d1fae5;
  --primary-rgb: 5, 150, 105;
  --grad-primary: linear-gradient(135deg, #059669 0%, #065f46 100%);
}
body[data-theme="light"][data-accent="violet"] {
  --primary: #6d28d9;
  --primary-hover: #5b21b6;
  --primary-deep: #4c1d95;
  --primary-tint: #ede9fe;
  --primary-rgb: 109, 40, 217;
  --grad-primary: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
}
body[data-theme="light"][data-accent="amber"] {
  --primary: #b45309;
  --primary-hover: #92400e;
  --primary-deep: #78350f;
  --primary-tint: #fef3c7;
  --primary-rgb: 180, 83, 9;
  --grad-primary: linear-gradient(135deg, #b45309 0%, #78350f 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* mono numerals for prices / specs — the "tech" signal */
.mono, .plan__price, .vps-cfg__price, .cfg-card .cfg-price,
.plan-card .pprice, .stat__num, .stat-card .value, .mon-card .mon-val {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.02em;
}

/* reusable scroll-reveal — opt-in via .reveal, activated by JS adding .is-in */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: var(--section-space) 0; }
.section--tight { padding: var(--section-tight-space) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: var(--primary);
  opacity: .7;
}
.section-head .eyebrow::before { display: none; }

h1, h2, h3 { color: var(--text-strong); margin: 0; line-height: 1.2; }
h2.section-title { font-size: 34px; margin-bottom: 12px; letter-spacing: -.6px; }
.section-sub { color: var(--muted); max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head { text-align: center; }

/* ---------- buttons (single canonical set) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn--sm { padding: 9px 16px; font-size: 14px; }
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--glow-sm);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--glow); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
  background: rgba(255,255,255,.02);
  color: var(--text-strong);
  border-color: var(--border-strong);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- header / top-nav (marketing + app) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 8, 10, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
body[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, .88);
}
.nav {
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  gap: 32px;
  flex-wrap: nowrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  color: var(--text-strong);
  white-space: nowrap;
  flex: 0 0 auto;
}
.brand__mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: #111827;
  display: grid; place-items: center;
  border: 1px solid #334155;
  box-shadow: 0 10px 20px -16px rgba(15, 23, 42, .95);
  overflow: hidden;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body[data-theme="light"] .brand__mark {
  background: #eef6fd;
  border-color: #c1d2e3;
}
.brand__mark svg { width: 23px; height: 23px; display: block; }
.brand:hover .brand__mark { background: var(--primary-tint); border-color: var(--primary); box-shadow: var(--glow-sm); }
.site-header .brand__mark,
.site-header .brand:hover .brand__mark { border-color: transparent; }
/* Inline link row. Never wraps — labels are Vietnamese and long, so a wrapped
   row is what made the lg header look broken. Below --nav-collapse the whole
   row moves into .nav__drawer instead of shrinking further. */
.nav__links { display: flex; align-items: center; gap: 22px; margin-left: 4px; min-width: 0; }
.nav__links > a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 24px;
  color: var(--muted); font-size: 15px; font-weight: 500; line-height: 1.5;
  white-space: nowrap; transition: color .15s ease;
}
.nav__link-icon { width: 16px; height: 16px; flex: 0 0 16px; display: block; }
.nav__links > a:hover { color: var(--text-strong); }
.nav__links > a.is-active { color: var(--text-strong); }
.nav__links > a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px;
  background: var(--grad-primary); border-radius: 2px;
}
/* admin entry — role-gated, made to stand out from the product links */
.nav__links > a.nav__admin {
  color: var(--primary);
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
  line-height: 1.5;
}
.nav__links > a.nav__admin:hover { border-color: var(--primary); color: var(--primary-hover); }
.nav__links > a.nav__admin.is-active::after { display: none; }

/* ---------- management navigation dropdown ---------- */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__group-btn {
  display: inline-flex; align-items: center; min-height: 24px; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 500; line-height: 1.5;
  color: var(--muted); padding: 0; white-space: nowrap;
  transition: color .15s ease;
}
.nav__group-btn:hover,
.nav__group.is-open .nav__group-btn,
.nav__group-btn.is-active { color: var(--text-strong); }
.nav__group-caret { transition: transform .18s ease; flex: 0 0 auto; }
.nav__group.is-open .nav__group-caret { transform: rotate(180deg); }
.nav__group-menu {
  position: absolute; top: calc(100% + 14px); left: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
  padding: 6px;
  display: flex; flex-direction: column;
  z-index: 60;
}
.nav__group-menu[hidden] { display: none; }
.nav__group-menu a {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap;
}
.nav__group-menu a:hover { background: var(--card-hover); color: var(--text-strong); }
.nav__group-menu a.is-active { color: var(--primary); font-weight: 600; }

/* drawer section labels for the flat mobile list */
.nav__drawer-label {
  padding: 14px 4px 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}

.nav__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex: 0 0 auto; flex-shrink: 0; }

.locale-switcher {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  flex-shrink: 0;
}
.locale-switcher a {
  padding: 6px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
}
.locale-switcher a.is-active { background: var(--primary); color: #fff; }

/* balance pill + avatar shown in header when logged in */
.balance-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}
.balance-pill .amt { color: var(--primary); }
.btn, .nav__actions .btn { white-space: nowrap; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary);
  display: grid; place-items: center; font-weight: 700;
  text-decoration: none;
  flex: 0 0 auto;
}

/* ---------- account dropdown (absorbs account link + logout) ---------- */
.acct { position: relative; flex: 0 0 auto; }
.acct__btn {
  border: 1px solid var(--border); cursor: pointer;
  font-family: var(--font); font-size: 15px; padding: 0;
  transition: border-color .15s ease;
}
.acct__btn .nav__link-icon { width: 18px; height: 18px; display: block; }
.acct__btn:hover, .acct.is-open .acct__btn { border-color: var(--primary); }
.acct__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.acct__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
  padding: 6px;
  display: flex; flex-direction: column;
  z-index: 60;
}
.acct__menu[hidden] { display: none; }
.acct__head {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.acct__email {
  font-size: 13px; color: var(--text-strong); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct__bal { font-size: 13px; color: var(--muted); }
.acct__bal .amt { color: var(--primary); font-weight: 600; }
.acct__menu a,
.acct__menu .logout-form button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: var(--text);
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font);
}
.acct__menu a:hover,
.acct__menu .logout-form button:hover { background: var(--card-hover); color: var(--text-strong); }

/* back-to-admin item in dropdown + drawer */
.acct__divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.acct__back-admin {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; font-family: var(--font);
  background: transparent; border: 0; cursor: pointer;
  color: #f59e0b;
}
.acct__back-admin svg { color: #f59e0b; }
.acct__back-admin:hover { background: rgba(245,158,11,.1); color: #fbbf24; }
/* drawer variant — same class, just full-width row */
.nav__drawer .acct__back-admin {
  padding: 11px 16px;
  border-radius: var(--radius);
}

.logout-form { display: inline; margin: 0; }
.logout-form button {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); border-radius: var(--radius);
  padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: var(--font);
}
.logout-form button:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- burger + drawer (shown below --nav-collapse) ---------- */
.nav__burger {
  display: none;
  width: 38px; height: 34px;
  flex: 0 0 auto;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav__burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--text-strong);
  transition: transform .18s ease, opacity .18s ease;
}
.nav__burger:hover { border-color: var(--primary); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.nav__drawer[hidden] { display: none; }
.nav__drawer > .container { display: flex; flex-direction: column; padding: 10px 24px 16px; }
.nav__drawer a,
.nav__drawer .logout-form button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px 4px;
  color: var(--text); font-size: 15px; font-weight: 500;
  border: 0; border-bottom: 1px solid var(--border);
  background: transparent; cursor: pointer; font-family: var(--font);
}
.nav__drawer a:last-of-type { border-bottom: 0; }
.nav__drawer a.is-active { color: var(--primary); font-weight: 600; }
.nav__drawer-bal {
  padding: 10px 4px 12px; font-size: 14px; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.nav__drawer-bal .amt { color: var(--primary); font-weight: 700; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 104px 0 88px;
  text-align: center;
  overflow: hidden;
}
/* faint tech grid */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(680px 380px at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(680px 380px at 50% 30%, #000 30%, transparent 78%);
  pointer-events: none;
}
/* red glow bloom */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 320px at 50% -8%, rgba(var(--primary-rgb), .22), transparent 70%),
    radial-gradient(480px 260px at 82% 18%, rgba(var(--primary-rgb), .08), transparent 70%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { font-size: 52px; letter-spacing: -1px; font-weight: 900; }
.hero h1 .accent {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero p.lead {
  color: var(--muted);
  font-size: 19px;
  max-width: 660px;
  margin: 22px auto 34px;
}
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.stat__num { font-size: 34px; font-weight: 800; color: var(--primary); }
.stat__label { color: var(--muted); margin-top: 6px; }

/* ---------- pricing ---------- */
.pricing-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.pricing-tab {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
}
.pricing-tab.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pricing-tab .save { color: var(--primary); font-size: 12px; margin-left: 6px; }
.pricing-tab.is-active .save { color: #fff; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.plan::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(0,0,0,.8); }
.plan:hover::before { opacity: 1; }
.plan.is-featured { border-color: transparent; box-shadow: var(--glow-sm); }
.plan.is-featured::before { opacity: 1; }
.plan__badge {
  align-self: flex-start;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.plan__name { font-size: 18px; font-weight: 700; color: var(--text-strong); }
.plan__price { font-size: 34px; font-weight: 800; color: var(--text-strong); margin: 10px 0 2px; }
.plan__price small { font-size: 15px; font-weight: 500; color: var(--muted); }
.plan__list { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 10px; }
.plan__list li { display: flex; gap: 10px; color: var(--text); font-size: 15px; }
.plan__list li::before { content: '✓'; color: var(--primary); font-weight: 800; }
.plan .btn { width: 100%; justify-content: center; margin-top: auto; }

/* ---------- partner logos ---------- */
.partners { display: flex; gap: 40px; justify-content: center; align-items: center; flex-wrap: wrap; opacity: .8; }
.partner-logo { color: var(--muted); font-weight: 700; font-size: 20px; letter-spacing: .5px; }

/* ---------- service grid ---------- */
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.service-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .18s ease;
  pointer-events: none;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--glow-sm); border-color: transparent; }
.service-card:hover::before { opacity: 1; }
.service-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--grad-primary);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px;
  margin-bottom: 16px;
  box-shadow: var(--glow-sm);
}
.service-card h3 { font-size: 18px; margin-bottom: 8px; }
.service-card p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.service-card a.more { color: var(--primary); font-weight: 600; font-size: 14px; }

/* ---------- datacenter / feature split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split .media {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 320px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background-image: radial-gradient(400px 200px at 70% 30%, rgba(var(--primary-rgb), .12), transparent 70%);
}
.split ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.split ul li { display: flex; gap: 12px; }
.split ul li b { color: var(--text-strong); }

/* ---------- why-choose (feature grid) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  transition: background .18s ease, border-color .18s ease;
}
.feature:hover { background: var(--card); border-color: var(--border); }
.feature__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--primary-tint);
  border: 1px solid rgba(var(--primary-rgb), .25);
  color: var(--primary);
  display: grid; place-items: center;
  font-size: 20px;
  transition: box-shadow .2s ease;
}
.feature:hover .feature__icon { box-shadow: var(--glow-sm); }
.feature h3 { font-size: 16px; margin-bottom: 4px; }
.feature p { color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- final CTA ---------- */
.cta-band {
  position: relative;
  background: linear-gradient(180deg, var(--card), #0b0b0d);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 64px 24px;
  text-align: center;
  overflow: hidden;
  background-image:
    radial-gradient(600px 240px at 50% 0%, rgba(var(--primary-rgb), .2), transparent 70%),
    linear-gradient(0deg, rgba(255,255,255,.015), rgba(255,255,255,.015));
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(400px 200px at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(400px 200px at 50% 0%, #000, transparent 75%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: 32px; margin-bottom: 12px; letter-spacing: -.5px; }
.cta-band p { color: var(--muted); margin: 0 auto 26px; max-width: 520px; }
.cta-band .hero__cta { justify-content: center; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 28px;
  background: var(--surface);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }

/* location chips (VPS countries — real data) */
.location-chip {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
}
.location-chip:hover { border-color: var(--primary); color: var(--text-strong); }
.footer-grid h4 { color: var(--text-strong); font-size: 15px; margin: 0 0 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--muted); font-size: 14px; }
.footer-grid a:hover { color: var(--primary); }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Persistent support shortcut for pages using the public site layout. */
.telegram-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 50%;
  background: #229ed9;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.telegram-float:hover {
  transform: translateY(-2px);
  background: #1b8fc7;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .38);
  color: #fff;
}
.telegram-float:focus-visible {
  outline: 3px solid var(--text-strong);
  outline-offset: 3px;
}
.telegram-float svg { width: 25px; height: 25px; fill: currentColor; }

@media (max-width: 640px) {
  .telegram-float { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}

/* ============================================================
   APP AREA (logged-in pages: dashboard, account, order-vps)
   Rendered inside <main class="app-main"><div class="container">
   ============================================================ */
.app-main { padding: var(--app-top-space) 0 var(--app-bottom-space); min-height: 60vh; }
.page-head { margin-bottom: 24px; padding-left: 16px; position: relative; }
.page-head::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: 3px; background: var(--grad-primary);
}
.page-head h1 { font-size: 28px; margin: 0; color: var(--text-strong); letter-spacing: -.4px; }
.page-head p { color: var(--muted); margin: 6px 0 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.stat-card .label { color: var(--muted); font-size: 13px; }
.stat-card .value { font-size: 28px; font-weight: 800; color: var(--text-strong); margin-top: 6px; }
.stat-card .value.accent { color: var(--primary); }
.stat-card .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: var(--panel-head-padding);
  border-bottom: 1px solid var(--border);
}
.panel__head h2 { font-size: 16px; margin: 0; color: var(--text-strong); }
.panel__head .btn { margin-left: auto; }
.panel__body { padding: var(--panel-padding); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data thead th {
  text-align: left; color: var(--muted); font-weight: 700;
  padding: 10px 20px; border-bottom: 1px solid var(--border);
  text-transform: capitalize; letter-spacing: .2px; font-size: 13px;
}
table.data tbody td { padding: 13px 20px; border-bottom: 1px solid var(--border); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--card-hover); }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status.active { color: var(--success); }
.status.suspended { color: var(--primary); }
.status.pending { color: #f2c94c; }

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.quick-actions { display: grid; gap: 10px; }
.quick-actions .btn { width: 100%; justify-content: flex-start; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.tab {
  padding: 12px 18px;
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-strong); }
.tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- forms ---------- */
.form { max-width: 560px; }
.field { margin-bottom: 18px; }
.field label { display: block; color: var(--text); font-weight: 600; font-size: 14px; margin-bottom: 7px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"] {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-strong);
  padding: 11px 14px;
  font-size: 15px;
  font-family: var(--font);
  transition: border-color .12s ease;
}
.field input:focus { outline: none; border-color: var(--primary); }
.field input:disabled { opacity: .55; cursor: not-allowed; }
.field .hint { color: var(--muted); font-size: 13px; margin-top: 5px; }
.field.check { display: flex; align-items: center; gap: 10px; }
.field.check label { margin: 0; }

/* ---------- alerts ---------- */
.alert {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  border: 1px solid transparent;
}
.alert--success { background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .35); color: #6ee7b7; }
.alert--error { background: var(--danger-surface); border-color: var(--danger-border); color: var(--danger); }
.alert ul { margin: 4px 0 0; padding-left: 18px; }

.admin-toast-stack {
  position: fixed;
  right: 24px;
  top: 24px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.admin-toast {
  min-width: 220px;
  max-width: min(360px, calc(100vw - 48px));
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text);
  background: var(--card);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35);
  font-size: 14px;
  transform: translateY(0);
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
}

.admin-toast--success { border-color: rgba(52, 211, 153, .45); color: #6ee7b7; }
.admin-toast--error { border-color: var(--danger-border); color: var(--danger); }
.admin-toast.is-hiding { opacity: 0; transform: translateY(-8px); }

.badge-verify {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; margin-left: 8px;
}
.badge-verify.ok { background: rgba(39,201,63,.12); color: #6ee787; }
.badge-verify.no { background: var(--primary-tint); color: var(--primary-hover); }

/* ---------- order-vps page ---------- */
.order-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
#optionsPanel { scroll-margin-top: calc(var(--topbar-h) + 20px); }
#optionsPanel.is-entering { animation: vps-options-enter .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vps-options-enter {
  from { opacity: .35; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.plan-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.plan-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.plan-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 14px 30px -20px rgba(0,0,0,.8); }
.plan-card.is-selected {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary), var(--glow-sm);
}
.plan-card.is-selected::after {
  content: ''; position: absolute; top: 12px; right: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 10px var(--primary);
}
.plan-card .pname { font-weight: 700; color: var(--text-strong); font-size: 16px; display: flex; align-items: center; gap: 8px; }
.plan-card .pflag { width: 22px; height: 16px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.12); background-size: cover; }
.plan-card .pflag--globe { display: inline-flex; align-items: center; justify-content: center; box-shadow: none; color: var(--muted); background: none; width: auto; height: auto; }
.plan-card .pflag--globe svg { display: block; }
.plan-card .pprice { color: var(--primary); font-size: 22px; font-weight: 800; margin-top: 8px; }
.plan-card .pprice small { color: var(--muted); font-size: 13px; font-weight: 500; }
.plan-card .pprov { color: var(--muted); font-size: 12px; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  #optionsPanel.is-entering { animation: none; }
}

.opt-block { margin-bottom: 18px; }
.opt-block > label { display: block; color: var(--text); font-weight: 600; font-size: 14px; margin-bottom: 8px; }
select.opt-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-strong);
  padding: 10px 12px;
  font-size: 15px;
  font-family: var(--font);
}
select.opt-select:focus { outline: none; border-color: var(--primary); }

select.opt-select.os-source-select { display: none; }
.os-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.os-choice {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 58px;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-strong);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.os-choice:hover { border-color: var(--muted); background: var(--card-hover); }
.os-choice:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.os-choice.is-selected {
  border-color: var(--primary);
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.os-choice__icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: #8b95a7;
  background: rgba(139, 149, 167, .12);
}
.os-choice__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.os-choice[data-os="windows"] .os-choice__icon { color: #00a4ef; background: rgba(0, 164, 239, .12); }
.os-choice[data-os="ubuntu"] .os-choice__icon { color: #e95420; background: rgba(233, 84, 32, .12); }
.os-choice[data-os="centos"] .os-choice__icon { color: #a14f9c; background: rgba(161, 79, 156, .12); }
.os-choice[data-os="debian"] .os-choice__icon { color: #d70a53; background: rgba(215, 10, 83, .12); }
.os-choice[data-os="almalinux"] .os-choice__icon { color: #16a085; background: rgba(22, 160, 133, .12); }
.os-choice[data-os="rocky"] .os-choice__icon { color: #10b981; background: rgba(16, 185, 129, .12); }
.os-choice[data-os="fedora"] .os-choice__icon { color: #51a2da; background: rgba(81, 162, 218, .12); }

.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button {
  width: 34px; height: 34px;
  border-radius: var(--radius);
  background: var(--card-hover);
  border: 1px solid var(--border);
  color: var(--text-strong);
  font-size: 18px; font-weight: 700; cursor: pointer;
  line-height: 1;
}
.stepper button:hover { border-color: var(--primary); color: var(--primary); }
.stepper .val { min-width: 46px; text-align: center; font-weight: 700; color: var(--text-strong); }
.stepper input.val {
  width: 64px; height: 34px; padding: 0 6px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-strong);
  font-weight: 700; font-size: 14px;
  -moz-appearance: textfield;
}
.stepper input.val:focus { outline: none; border-color: var(--primary); }
.stepper input.val::-webkit-outer-spin-button,
.stepper input.val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .unit { color: var(--muted); font-size: 13px; }
.addon-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.addon-row:last-child { border-bottom: 0; }
.addon-row .addon-info { display: flex; flex-direction: column; gap: 2px; }
.addon-row .aname { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.addon-row .abound { color: var(--muted); font-size: 12px; }

/* inline SVG icon chip shared by add-on rows + order summary */
.aicon { display: inline-flex; align-items: center; justify-content: center; color: var(--primary); flex: 0 0 auto; }
.aicon svg { display: block; }
.summary .sum-addon { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.summary .sum-addon .aicon { color: var(--primary); }

/* config (package) cards */
.cfg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cfg-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.cfg-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.cfg-card.is-selected {
  border-color: var(--primary);
  background: linear-gradient(160deg, var(--primary-tint), var(--card) 55%);
  box-shadow: inset 0 0 0 1px var(--primary), var(--glow-sm);
}
.cfg-card .cfg-specs { display: flex; flex-direction: column; gap: 3px; color: var(--text); font-size: 13px; }
.cfg-card .cfg-specs b { color: var(--text-strong); font-weight: 700; }
.cfg-card .cfg-price { margin-top: 8px; color: var(--primary); font-weight: 800; font-size: 16px; }
.cfg-card .cfg-price small { color: var(--muted); font-size: 12px; font-weight: 500; }

/* billing-period chips with discount badge */
.period-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.period-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px; font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.period-chip:hover { border-color: var(--primary); }
.period-chip.is-selected {
  border-color: var(--primary); color: var(--text-strong);
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .35);
}
.period-chip .pc-badge {
  background: var(--grad-primary); color: #fff;
  font-size: 11px; font-weight: 800;
  border-radius: 999px; padding: 1px 7px; line-height: 1.5;
}

.summary { position: sticky; top: calc(var(--topbar-h) + 20px); }
.summary .line { display: flex; justify-content: space-between; padding: 8px 0; color: var(--text); font-size: 14px; }
.summary .line.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px; font-size: 18px; font-weight: 800; color: var(--text-strong); }
.summary .line.total .amt { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; color: var(--primary); letter-spacing: -.02em; }
.summary .line .amt { font-weight: 700; }
.summary .est { color: var(--muted); font-size: 12px; margin-top: 4px; }
.coupon-row { display: flex; gap: 8px; margin: 14px 0; }
.coupon-row input {
  flex: 1;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-strong); padding: 9px 12px; font-family: var(--font);
}
.coupon-row input:focus { outline: none; border-color: var(--primary); }
.coupon-row .btn-apply {
  flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-strong); padding: 9px 16px; font-family: var(--font);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all .15s ease;
}
.coupon-row .btn-apply:hover { background: var(--card-hover); border-color: var(--primary); }
.coupon-row .btn-apply:disabled { opacity: .5; cursor: not-allowed; }
.coupon-row .btn-apply.is-applied { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.summary .btn { width: 100%; justify-content: center; margin-top: 6px; }
.summary .btn[disabled] { opacity: .5; cursor: not-allowed; }

#orderMsg { margin-top: 12px; }
.spinner-inline { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- landing helpers (trust bar + gradient-border) ---------- */
/* thin credibility strip under the hero — uptime, locations, 24/7 */
.trust-bar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 40px; padding: 22px 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.trust-item { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.trust-item .ic { color: var(--primary); display: inline-flex; }
.trust-item .ic svg { width: 18px; height: 18px; display: block; }
.trust-item b { color: var(--text-strong); font-family: var(--font-mono); font-weight: 700; }

/* section divider with a soft red bloom at the seam */
.seam { position: relative; height: 1px; background: var(--border); }
.seam::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 280px; height: 2px; border-radius: 999px;
  background: radial-gradient(closed-side, var(--primary), transparent);
  background: radial-gradient(50% 100% at 50% 50%, rgba(var(--primary-rgb), .7), transparent 70%);
}

/* ---------- responsive ---------- */
/* Header collapse. The logged-in row needs ~1240px to sit on one line
   (brand + 6 VN labels + balance pill + Nạp tiền + avatar + language switcher),
   so it must go to the drawer BEFORE the 1200px container edge — otherwise items overlap.
   1240px is that handover point; the tighter step at 1080 trims the row for
   guests, who have far fewer links. */
@media (max-width: 1320px) {
  .nav { gap: 16px; }
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__drawer { display: block; }
}
@media (max-width: 1000px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .order-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 960px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero h1 { font-size: 34px; }
  .section { padding: 52px 0; }
  .stats-grid, .pricing-grid, .service-grid, .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .os-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* balance + Nạp tiền live in the drawer at this width */
  .balance-pill, .nav__topup, .nav__buy { display: none; }
  .brand { font-size: 17px; }
  .brand__mark { width: 30px; height: 30px; border-radius: 9px; }
  .brand__mark svg { width: 20px; height: 20px; }
}

/* ---------- order-list pages (proxy/vps orders) ---------- */
.list-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.list-toolbar form { display: contents; }
.list-toolbar .list-search { flex: 1 1 240px; min-width: 200px; }
.list-toolbar input[type="text"],
.list-toolbar select {
  width: 100%;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-strong); padding: 9px 12px; font-family: var(--font); font-size: 14px;
}
.list-toolbar select { width: auto; min-width: 160px; cursor: pointer; }
.list-toolbar input:focus, .list-toolbar select:focus { outline: none; border-color: var(--primary); }
.list-toolbar .toolbar-actions { display: flex; gap: 8px; margin-left: auto; }

.orders-table { overflow-x: auto; }
.orders-table table.data { min-width: 900px; }
.orders-table td .cell-main { color: var(--text-strong); font-weight: 600; }
.orders-table td .cell-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.orders-table td .cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.opt-badges { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; }
.opt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card-hover); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; color: var(--text);
}
.opt-badge b { color: var(--muted); font-weight: 600; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border);
}
.status-pill.ok { background: rgba(39,201,63,.12); color: #6ee787; border-color: rgba(39,201,63,.35); }
.status-pill.warn { background: rgba(242,201,76,.12); color: #f2c94c; border-color: rgba(242,201,76,.35); }
.status-pill.bad { background: var(--danger-surface); color: var(--danger); border-color: var(--danger-border); }

/* Auth keeps its own decorative panel, so it needs light-theme overrides too. */
body[data-theme="light"] .auth__brand { background: linear-gradient(180deg, #eff8ff 0%, #dbeafe 100%); }
body[data-theme="light"] .auth__brand::before {
  background:
    radial-gradient(620px 340px at 50% 8%, rgba(var(--primary-rgb), .18), transparent 70%),
    radial-gradient(460px 300px at 78% 82%, rgba(var(--primary-rgb), .08), transparent 70%);
}
body[data-theme="light"] .auth__brand::after {
  background-image:
    linear-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .07) 1px, transparent 1px);
}
.status-pill.neutral { background: var(--card-hover); color: var(--muted); }

.note-cell { display: flex; align-items: flex-start; gap: 8px; max-width: 260px; }
.note-cell .note-text { color: var(--muted); font-size: 13px; white-space: normal; }
.icon-btn {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius);
  background: var(--card-hover); border: 1px solid var(--border); color: var(--text-strong);
  cursor: pointer; font-size: 13px; line-height: 1;
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }

.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* pager */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; flex-wrap: wrap; }
.pager .pager-info { color: var(--muted); font-size: 13px; }
.pager .pager-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pager .pager-links a, .pager .pager-links span {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 10px; border-radius: var(--radius); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 600;
}
.pager .pager-links a:hover { border-color: var(--primary); color: var(--primary); }
.pager .pager-links .is-active { background: var(--primary-tint); border-color: var(--primary); color: var(--text-strong); }
.pager .pager-links .is-disabled { opacity: .4; pointer-events: none; }

/* modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.is-open { display: flex; }
.modal-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: 100%; max-width: 480px; padding: 22px;
}
.modal-card h3 { font-size: 18px; margin-bottom: 6px; }
.modal-card p { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.modal-card textarea {
  width: 100%; min-height: 120px; resize: vertical;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-strong); padding: 10px 12px; font-family: var(--font); font-size: 14px;
}
.modal-card textarea:focus { outline: none; border-color: var(--primary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-actions .btn:disabled { opacity: .65; cursor: wait; }

.system-notification-dialog { z-index: 100; }
.system-notification-modal {
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  padding: 0;
}
.system-notification-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.system-notification-modal__head h3 { margin: 0; }
.system-notification-modal__head p { margin: 2px 0 0; }
.system-notification-close {
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-strong);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.system-notification-close:hover { border-color: var(--primary); color: var(--primary); }
.system-notification-list { max-height: calc(100vh - 150px); overflow-y: auto; }
.system-notification-item { padding: 20px; border-bottom: 1px solid var(--border); }
.system-notification-item:last-child { border-bottom: 0; }
.system-notification-item img {
  display: block;
  width: 100%;
  max-height: 360px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: var(--bg);
  object-fit: contain;
}
.system-notification-item h4 { margin: 0 0 10px; color: var(--text-strong); font-size: 17px; }
.system-notification-body { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.system-notification-body a { color: var(--primary); text-decoration: underline; }
.system-notification-error { margin: 12px 20px 0; color: var(--primary-hover); }

@media (max-width: 1000px) {
  .list-toolbar .toolbar-actions { margin-left: 0; width: 100%; }
}

/* ---------- service-management pages (manage-vps / manage-proxy) ---------- */
/* form controls inside dialogs reuse .opt-select for input + textarea too */
input.opt-select, textarea.opt-select {
  width: 100%;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-strong); padding: 10px 12px; font-size: 14px; font-family: var(--font);
}
input.opt-select:focus, textarea.opt-select:focus { outline: none; border-color: var(--primary); }
input.opt-select[type="number"] { -moz-appearance: textfield; }
input.opt-select[type="number"]::-webkit-outer-spin-button,
input.opt-select[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* tabs (VPS) */
.mtabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 0; }
.mtab {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--card-hover); border: 1px solid var(--border);
  color: var(--muted); font-weight: 600; font-size: 13px; font-family: var(--font);
}
.mtab:hover { border-color: var(--primary); color: var(--text-strong); }
.mtab.is-active { background: var(--primary-tint); border-color: var(--primary); color: var(--text-strong); }

/* row action dropdown menu */
.row-menu {
  display: none; position: fixed; right: auto; top: auto; z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
  text-align: left;
}
.row-menu.is-open { display: block; }
.row-menu .menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius);
  color: var(--text); font-size: 13px; font-family: var(--font); cursor: pointer;
}
.row-menu .menu-item:hover { background: var(--card-hover); color: var(--text-strong); }
.row-menu .menu-item:focus-visible,
.action-trigger:focus-visible,
.js-order-menu-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.menu-icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.row-menu .menu-item:hover .menu-icon { color: currentColor; }
.action-trigger,
.js-order-menu-btn { width: 34px; min-width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.action-trigger .action-icon,
.js-order-menu-btn .action-icon { width: 17px; height: 17px; }
.row-menu .menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* toggle switch (auto-renew) */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer; border-radius: 999px;
  background: var(--border); transition: background .15s ease;
}
.switch .slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s ease;
}
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:disabled + .slider { opacity: .45; cursor: not-allowed; }

/* dialog helpers */
.dlg-hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.dlg-err { color: var(--primary-hover); font-size: 13px; min-height: 16px; margin-top: 6px; }
.modal-card .field { margin-bottom: 14px; }
.modal-card .field label { display: block; color: var(--text); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* price estimate card (renew/upgrade) */
.estimate-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin: 4px 0 12px;
}
.estimate-card:empty { display: none; }
.est-line { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; color: var(--text); }
.est-line.est-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-weight: 800; color: var(--text-strong); }
.est-note { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* USDT invoice identifiers can be long; keep their values from colliding with labels. */
#usdtDetail { container-type: inline-size; }
#usdtDetail .est-line {
  display: grid;
  grid-template-columns: minmax(104px, .85fr) minmax(0, 1.35fr);
  align-items: start;
  gap: 12px;
}
#usdtDetail .est-line > span,
#usdtDetail .est-line > b { min-width: 0; }
#usdtDetail .est-line > b { overflow-wrap: anywhere; word-break: normal !important; }
@container (max-width: 380px) {
  #usdtDetail .est-line { grid-template-columns: 1fr; gap: 3px; padding: 7px 0; }
  #usdtDetail .est-line > b { text-align: left !important; }
}

/* monitor grid */
.mon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mon-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.mon-card .mon-label { color: var(--muted); font-size: 12px; }
.mon-card .mon-val { color: var(--text-strong); font-size: 22px; font-weight: 800; margin-top: 4px; }

@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .mon-grid { grid-template-columns: 1fr; }
}

/* ---------- VPS fleet table ---------- */
.vps-manage-page {
  --fleet-ink: #f7f8fb;
  --fleet-muted: #a5a8b3;
  --fleet-rule: rgba(255, 255, 255, .09);
  --fleet-cyan: #55d6cf;
  --fleet-amber: #f0bd53;
  --fleet-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}
.vps-manage-page__head { margin-bottom: 20px; }
.vps-fleet-panel { border-color: rgba(255, 255, 255, .10); box-shadow: 0 22px 50px -38px rgba(0, 0, 0, .96); }
.vps-fleet-panel,
.vps-fleet-panel .btn,
.vps-fleet-panel input,
.vps-fleet-panel select { font-family: var(--fleet-font); }
.vps-fleet-panel__head { min-height: 72px; padding: 18px 20px; background: #171617; }
.vps-fleet-panel__head h2 { color: var(--fleet-ink); font-size: 17px; }
.vps-list-msg { padding: 0 20px; }
.vps-bulk-bar { background: rgba(229, 9, 20, .075); border-bottom-color: rgba(229, 9, 20, .22); }

.vps-table-scroll {
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #4a474a transparent;
  scrollbar-width: thin;
}
.vps-fleet-table { min-width: 1146px !important; table-layout: fixed; }
.vps-fleet-table thead th {
  height: 48px;
  padding: 0 14px;
  background: #111011;
  border-bottom-color: var(--fleet-rule);
  color: var(--fleet-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: middle;
}
.vps-fleet-table tbody td {
  padding: 12px 14px;
  border-bottom-color: var(--fleet-rule);
  vertical-align: middle;
}
.vps-fleet-table tbody tr { transition: background-color .18s ease; }
.vps-fleet-table tbody tr:hover { background: rgba(255, 255, 255, .025); }
.vps-fleet-table__select { width: 46px; }
.vps-fleet-table__machine { width: 245px; }
.vps-fleet-table__order { width: 135px; }
.vps-fleet-table__specs { width: 195px; }
.vps-fleet-table__service-status { width: 165px; }
.vps-fleet-table__renew { width: 120px; }
.vps-fleet-table__notes { width: 130px; }
.vps-fleet-table__actions { width: 110px; padding-inline: 14px !important; text-align: right; white-space: nowrap; }

.vps-fleet-table th:last-child,
.vps-fleet-table td.vps-actions-cell {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--card);
  box-shadow: -12px 0 18px -18px rgba(0, 0, 0, .96);
}
.vps-fleet-table thead th:last-child { z-index: 5; background: #111011; }
.vps-fleet-table tbody tr:hover td.vps-actions-cell { background: #1a191a; }
.vps-machine { min-height: 66px; padding-left: 11px; border-left: 3px solid var(--border); }
.vps-machine--ok { border-left-color: var(--fleet-cyan); }
.vps-machine--warn { border-left-color: var(--fleet-amber); }
.vps-machine--bad { border-left-color: var(--primary-hover); }
.vps-machine--neutral { border-left-color: #7c7b84; }
.vps-machine__headline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vps-machine__host { overflow: hidden; color: var(--fleet-ink); font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.vps-machine__id { flex: 0 0 auto; color: var(--fleet-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; }
.vps-machine__access { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--fleet-muted); }
.vps-machine__access code { overflow: hidden; color: #d9dde5; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.vps-machine__key { color: #838691; font-size: 10px; font-weight: 800; }
.vps-machine__credentials { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 5px; color: var(--fleet-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.vps-machine__credentials span { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; }
.vps-machine__credentials b { color: #858995; font-family: var(--font); font-size: 10px; }
.vps-machine__credentials .vps-copy-btn { margin-left: auto; }
.vps-copy-btn { width: 22px; height: 22px; padding: 0; border-color: transparent; background: transparent; color: #a8acb7; }
.vps-copy-btn:hover { border-color: rgba(85, 214, 207, .52); background: rgba(85, 214, 207, .08); color: var(--fleet-cyan); }
.vps-copy-btn__icon { width: 13px; height: 13px; }

.vps-order-cell__number { color: var(--fleet-ink); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.vps-order-cell__date { margin-top: 5px; color: var(--fleet-muted); font-size: 11px; }
.vps-spec-cell__location { margin-bottom: 7px; color: var(--fleet-ink); font-size: 13px; font-weight: 700; }
.vps-specs { gap: 5px; max-width: 168px; }
.vps-specs .opt-badge { min-height: 22px; border-color: rgba(255, 255, 255, .10); background: #211f21; color: #c6c8cf; font-size: 10px; }
.vps-service-status { display: grid; justify-items: start; gap: 6px; }
.vps-service-status .status-pill { min-height: 26px; justify-content: center; text-transform: capitalize; }
.vps-service-status .status-pill.ok { color: var(--fleet-cyan); border-color: rgba(85, 214, 207, .32); background: rgba(85, 214, 207, .10); }
.vps-service-status .status-pill.warn { color: var(--fleet-amber); border-color: rgba(240, 189, 83, .32); background: rgba(240, 189, 83, .10); }
.vps-auto-cell { text-align: center; }
.vps-auto-toggle { vertical-align: middle; }
.vps-auto-toggle .slider { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.vps-service-status time { color: #dadce3; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vps-note-cell { align-items: center; max-width: 160px; }
.vps-note-cell .note-text { overflow: hidden; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.vps-note-edit { width: 26px; height: 26px; border-color: transparent; background: transparent; color: var(--fleet-muted); }
.vps-note-edit:hover { border-color: rgba(255, 255, 255, .12); color: var(--fleet-ink); }
.vps-actions-cell { position: relative; text-align: right; }
.vps-action-trigger {
  width: auto;
  min-width: 80px;
  height: 32px;
  padding: 0 10px;
  border-color: transparent;
  background: #222022;
  color: #c5c8d0;
  font-size: 11px;
}
.vps-action-trigger:hover { border-color: rgba(85, 214, 207, .46); background: rgba(85, 214, 207, .10); color: var(--fleet-cyan); }

@media (max-width: 640px) {
  .vps-manage-page__head { margin-bottom: 16px; }
  .vps-fleet-panel__head { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
  .vps-fleet-panel__head > div { width: 100%; }
  .vps-fleet-panel__head .btn { flex: 1 1 0; justify-content: center; }
  .vps-list-msg { padding: 0 16px; }
  .vps-machine__credentials { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .vps-fleet-table tbody tr { transition: none; }
}

/* ---------- Proxy and order fleet tables ---------- */
.proxy-manage-page,
.orders-fleet-page {
  --fleet-ink: #f7f8fb;
  --fleet-muted: #a5a8b3;
  --fleet-rule: rgba(255, 255, 255, .09);
  --fleet-cyan: #55d6cf;
  --fleet-amber: #f0bd53;
  --fleet-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}
.proxy-manage-page__head,
.orders-fleet-page__head { margin-bottom: 20px; }
.proxy-fleet-panel,
.orders-fleet-panel { border-color: rgba(255, 255, 255, .10); box-shadow: 0 22px 50px -38px rgba(0, 0, 0, .96); }
.proxy-fleet-panel,
.orders-fleet-panel,
.proxy-fleet-panel .btn,
.orders-fleet-panel .btn,
.proxy-fleet-panel input,
.orders-fleet-panel input,
.proxy-fleet-panel select,
.orders-fleet-panel select { font-family: var(--fleet-font); }
.proxy-fleet-panel__head,
.orders-fleet-panel__head { min-height: 72px; padding: 18px 20px; background: #171617; }
.proxy-fleet-panel__head h2,
.orders-fleet-panel__head h2 { color: var(--fleet-ink); font-size: 17px; }
.proxy-list-msg,
.orders-fleet-list-msg { padding: 0 20px; }
.proxy-bulk-bar,
.orders-fleet-bulk-bar { background: rgba(229, 9, 20, .075); border-bottom-color: rgba(229, 9, 20, .22); }

.proxy-table-scroll,
.orders-fleet-scroll {
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: #4a474a transparent;
  scrollbar-width: thin;
}
.proxy-fleet-table,
.orders-fleet-table { min-width: 1146px !important; table-layout: fixed; }
.proxy-fleet-table thead th,
.orders-fleet-table thead th {
  height: 48px;
  padding: 0 14px;
  background: #111011;
  border-bottom-color: var(--fleet-rule);
  color: var(--fleet-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: middle;
}
.proxy-fleet-table tbody td,
.orders-fleet-table tbody td {
  padding: 12px 14px;
  border-bottom-color: var(--fleet-rule);
  vertical-align: middle;
}
.proxy-fleet-table tbody tr,
.orders-fleet-table tbody tr { transition: background-color .18s ease; }
.proxy-fleet-table tbody tr:hover,
.orders-fleet-table tbody tr:hover { background: rgba(255, 255, 255, .025); }

.proxy-fleet-table__select { width: 46px; }
.proxy-fleet-table__endpoint { width: 255px; }
.proxy-fleet-table__order { width: 130px; }
.proxy-fleet-table__network { width: 180px; }
.proxy-fleet-table__service-status { width: 165px; }
.proxy-fleet-table__renew { width: 120px; }
.proxy-fleet-table__notes { width: 140px; }
.proxy-fleet-table__actions { width: 110px; padding-inline: 14px !important; text-align: right; white-space: nowrap; }

.orders-fleet-table__select { width: 46px; }
.orders-fleet-table__reference { width: 130px; }
.orders-fleet-table__service { width: 180px; }
.orders-fleet-table__options { width: 225px; }
.orders-fleet-table__status { width: 165px; }
.orders-fleet-table__amount { width: 130px; text-align: right; }
.orders-fleet-table__notes { width: 160px; }
.orders-fleet-table__actions { width: 110px; padding-inline: 14px !important; text-align: right; white-space: nowrap; }

.proxy-fleet-table th:last-child,
.proxy-fleet-table td.proxy-actions-cell,
.orders-fleet-table th:last-child,
.orders-fleet-table td.orders-actions-cell {
  position: sticky;
  right: 0;
  z-index: 3;
  background: var(--card);
  box-shadow: -12px 0 18px -18px rgba(0, 0, 0, .96);
}
.proxy-fleet-table thead th:last-child,
.orders-fleet-table thead th:last-child { z-index: 5; background: #111011; }

/* A fixed row menu is still inside its sticky action cell's stacking context.
   Promote only the cell that owns an open menu so later sticky rows cannot
   paint their controls over the dropdown. */
.vps-fleet-table td.vps-actions-cell:has(.row-menu.is-open),
.proxy-fleet-table td.proxy-actions-cell:has(.row-menu.is-open),
.orders-fleet-table td.orders-actions-cell:has(.row-menu.is-open) {
  z-index: 6;
}

.proxy-fleet-table tbody tr:hover td.proxy-actions-cell,
.orders-fleet-table tbody tr:hover td.orders-actions-cell { background: #1a191a; }

.proxy-endpoint { min-height: 82px; padding-left: 11px; border-left: 3px solid var(--border); }
.proxy-endpoint--ok { border-left-color: var(--fleet-cyan); }
.proxy-endpoint--warn { border-left-color: var(--fleet-amber); }
.proxy-endpoint--bad { border-left-color: var(--primary-hover); }
.proxy-endpoint--neutral { border-left-color: #7c7b84; }
.proxy-endpoint__headline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.proxy-endpoint__headline code { overflow: hidden; color: var(--fleet-ink); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.proxy-protocols { gap: 5px; margin-top: 6px; }
.proxy-fleet-table .opt-badge,
.orders-fleet-table .opt-badge { min-height: 22px; border-color: rgba(255, 255, 255, .10); background: #211f21; color: #c6c8cf; font-size: 10px; }
.proxy-endpoint__credentials { display: grid; gap: 4px; margin-top: 6px; color: var(--fleet-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }
.proxy-endpoint__credentials span { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: center; gap: 5px; min-width: 0; }
.proxy-endpoint__credentials b { color: #858995; font-family: var(--fleet-font); font-size: 10px; }
.proxy-endpoint__credentials code { overflow: hidden; color: #c6c8cf; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
.proxy-copy-btn { width: 22px; height: 22px; padding: 0; border-color: transparent; background: transparent; color: #a8acb7; }
.proxy-copy-btn:hover { border-color: rgba(85, 214, 207, .52); background: rgba(85, 214, 207, .08); color: var(--fleet-cyan); }
.proxy-copy-btn__icon { width: 13px; height: 13px; }
.proxy-order-cell__number,
.orders-reference-cell .cell-main { color: var(--fleet-ink); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 700; }
.proxy-order-cell__assignment,
.orders-reference-cell .cell-sub { margin-top: 5px; color: var(--fleet-muted); font-size: 11px; }
.proxy-network-cell__location { margin-bottom: 7px; color: var(--fleet-ink); font-size: 13px; font-weight: 700; }
.proxy-network-cell__badges { gap: 5px; max-width: 170px; }
.proxy-service-status,
.orders-status-cell { display: grid; justify-items: start; gap: 6px; }
.proxy-service-status .status-pill,
.orders-status-cell .status-pill { min-height: 26px; justify-content: center; text-transform: capitalize; }
.proxy-service-status .status-pill.ok,
.orders-status-cell .status-pill.ok { color: var(--fleet-cyan); border-color: rgba(85, 214, 207, .32); background: rgba(85, 214, 207, .10); }
.proxy-service-status .status-pill.warn,
.orders-status-cell .status-pill.warn { color: var(--fleet-amber); border-color: rgba(240, 189, 83, .32); background: rgba(240, 189, 83, .10); }
.proxy-service-status time { color: #dadce3; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.proxy-auto-cell { text-align: center; }
.proxy-auto-toggle { vertical-align: middle; }
.proxy-auto-toggle .slider { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.proxy-note-cell,
.orders-note-cell { align-items: center; max-width: 160px; }
.proxy-note-cell .note-text,
.orders-note-cell .note-text { overflow: hidden; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.proxy-note-edit,
.orders-note-edit { width: 26px; height: 26px; border-color: transparent; background: transparent; color: var(--fleet-muted); }
.proxy-note-edit:hover,
.orders-note-edit:hover { border-color: rgba(255, 255, 255, .12); color: var(--fleet-ink); }
.proxy-actions-cell,
.orders-actions-cell { position: relative; text-align: right; }
.proxy-action-trigger { width: auto; min-width: 80px; height: 32px; padding: 0 10px; border-color: transparent; background: #222022; color: #c5c8d0; font-size: 11px; }
.proxy-action-trigger:hover { border-color: rgba(85, 214, 207, .46); background: rgba(85, 214, 207, .10); color: var(--fleet-cyan); }
.orders-reference-link { display: inline-flex; margin-top: 7px; color: #c5c8d0; font-size: 11px; font-weight: 700; text-decoration: none; }
.orders-reference-link:hover { color: var(--fleet-cyan); text-decoration: underline; text-underline-offset: 3px; }
.orders-reference-link:focus-visible,
.orders-refresh-trigger:focus-visible { outline: 2px solid var(--fleet-cyan); outline-offset: 2px; }
.orders-refresh-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 80px; min-width: 80px; height: 32px; padding: 0 8px; border-color: transparent; background: #222022; color: #c5c8d0; font-size: 11px; }
.orders-refresh-trigger:hover { border-color: rgba(85, 214, 207, .46); background: rgba(85, 214, 207, .10); color: var(--fleet-cyan); }
.orders-refresh-trigger[disabled] { cursor: wait; opacity: .7; }
.orders-refresh-trigger__icon { width: 14px; height: 14px; flex: 0 0 14px; }

.orders-service-cell .cell-main { color: var(--fleet-ink); font-size: 13px; }
.orders-service-cell .cell-sub,
.orders-status-cell .cell-sub,
.orders-amount-cell .cell-sub { color: var(--fleet-muted); font-size: 11px; }
.orders-options-cell .opt-badges { gap: 5px; max-width: 210px; }
.orders-amount-cell { text-align: right; }
.orders-amount-cell .cell-main { color: var(--fleet-ink); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

@media (max-width: 640px) {
  .proxy-manage-page__head,
  .orders-fleet-page__head { margin-bottom: 16px; }
  .proxy-fleet-panel__head,
  .orders-fleet-panel__head { align-items: flex-start; flex-wrap: wrap; padding: 16px; }
  .proxy-fleet-panel__head > div,
  .orders-fleet-panel__head > div { width: 100%; }
  .proxy-fleet-panel__head .btn,
  .orders-fleet-panel__head .btn { flex: 1 1 0; justify-content: center; }
  .proxy-list-msg,
  .orders-fleet-list-msg { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .proxy-fleet-table tbody tr,
  .orders-fleet-table tbody tr { transition: none; }
}

/* Light fleet tables: the management tables originally carried their own
   dark palette for the sticky columns. These overrides keep every fixed cell,
   badge and action control inside the selected light theme. */
body[data-theme="light"] .vps-manage-page,
body[data-theme="light"] .proxy-manage-page,
body[data-theme="light"] .orders-fleet-page {
  --fleet-ink: var(--text-strong);
  --fleet-muted: var(--muted);
  --fleet-rule: var(--border);
  --fleet-cyan: #0f766e;
  --fleet-amber: #a16207;
}
body[data-theme="light"] .vps-fleet-panel,
body[data-theme="light"] .proxy-fleet-panel,
body[data-theme="light"] .orders-fleet-panel {
  border-color: var(--border);
  box-shadow: 0 18px 38px -30px rgba(15, 23, 42, .32);
}
body[data-theme="light"] .vps-fleet-panel__head,
body[data-theme="light"] .proxy-fleet-panel__head,
body[data-theme="light"] .orders-fleet-panel__head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
body[data-theme="light"] .vps-bulk-bar,
body[data-theme="light"] .proxy-bulk-bar,
body[data-theme="light"] .orders-fleet-bulk-bar {
  background: var(--primary-tint);
  border-bottom-color: rgba(var(--primary-rgb), .3);
}
body[data-theme="light"] .vps-table-scroll,
body[data-theme="light"] .proxy-table-scroll,
body[data-theme="light"] .orders-fleet-scroll { scrollbar-color: #94a3b8 transparent; }
body[data-theme="light"] .vps-fleet-table thead th,
body[data-theme="light"] .proxy-fleet-table thead th,
body[data-theme="light"] .orders-fleet-table thead th {
  background: var(--surface);
  border-bottom-color: var(--border);
  color: var(--muted);
}
body[data-theme="light"] .vps-fleet-table tbody tr:hover,
body[data-theme="light"] .proxy-fleet-table tbody tr:hover,
body[data-theme="light"] .orders-fleet-table tbody tr:hover { background: var(--card-hover); }
body[data-theme="light"] .vps-fleet-table td.vps-actions-cell,
body[data-theme="light"] .proxy-fleet-table td.proxy-actions-cell,
body[data-theme="light"] .orders-fleet-table td.orders-actions-cell { background: var(--card); }
body[data-theme="light"] .vps-fleet-table thead th:last-child,
body[data-theme="light"] .proxy-fleet-table thead th:last-child,
body[data-theme="light"] .orders-fleet-table thead th:last-child { background: var(--surface); }
body[data-theme="light"] .vps-fleet-table tbody tr:hover td.vps-actions-cell,
body[data-theme="light"] .proxy-fleet-table tbody tr:hover td.proxy-actions-cell,
body[data-theme="light"] .orders-fleet-table tbody tr:hover td.orders-actions-cell { background: var(--card-hover); }
body[data-theme="light"] .vps-fleet-table td.vps-actions-cell,
body[data-theme="light"] .proxy-fleet-table td.proxy-actions-cell,
body[data-theme="light"] .orders-fleet-table td.orders-actions-cell { box-shadow: -12px 0 18px -18px rgba(15, 23, 42, .24); }
body[data-theme="light"] .vps-machine__host,
body[data-theme="light"] .vps-order-cell__number,
body[data-theme="light"] .vps-spec-cell__location,
body[data-theme="light"] .proxy-endpoint__headline code,
body[data-theme="light"] .proxy-order-cell__number,
body[data-theme="light"] .orders-reference-cell .cell-main,
body[data-theme="light"] .proxy-network-cell__location,
body[data-theme="light"] .orders-service-cell .cell-main,
body[data-theme="light"] .orders-amount-cell .cell-main { color: var(--text-strong); }
body[data-theme="light"] .vps-machine__access code,
body[data-theme="light"] .vps-service-status time,
body[data-theme="light"] .proxy-endpoint__credentials code,
body[data-theme="light"] .proxy-service-status time { color: var(--text); }
body[data-theme="light"] .vps-machine__credentials b,
body[data-theme="light"] .proxy-endpoint__credentials b { color: var(--muted); }
body[data-theme="light"] .vps-fleet-table .opt-badge,
body[data-theme="light"] .proxy-fleet-table .opt-badge,
body[data-theme="light"] .orders-fleet-table .opt-badge {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
body[data-theme="light"] .vps-copy-btn,
body[data-theme="light"] .proxy-copy-btn { color: var(--muted); }
body[data-theme="light"] .vps-auto-toggle .slider,
body[data-theme="light"] .proxy-auto-toggle .slider { box-shadow: inset 0 0 0 1px var(--border-strong); }
body[data-theme="light"] .vps-note-edit:hover,
body[data-theme="light"] .proxy-note-edit:hover,
body[data-theme="light"] .orders-note-edit:hover { border-color: var(--border-strong); color: var(--text-strong); }
body[data-theme="light"] .vps-action-trigger,
body[data-theme="light"] .proxy-action-trigger,
body[data-theme="light"] .orders-refresh-trigger {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-strong);
}
body[data-theme="light"] .orders-reference-link { color: var(--text); }

/* Shared control shape: text actions read as deliberate pills across the
   marketing site, portal, and admin. Compact icon-only controls stay square
   or circular so their hit area remains recognisable in dense tables. */
button:not(.nav__burger):not(.admin-burger):not(.icon-btn):not(.avatar):not(.vps-copy-btn):not(.proxy-copy-btn):not(.vps-note-edit):not(.proxy-note-edit):not(.orders-note-edit):not(.action-trigger):not(.js-order-menu-btn) {
  border-radius: var(--radius-pill);
}

/* Appearance settings are emitted as validated body data attributes by the
   shared Blade layouts. Tokens keep the changes consistent across public,
   account and admin surfaces without scattering styles in individual pages. */
body[data-font="roboto"] {
  --font: 'Roboto', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body[data-font="jakarta"] {
  --font: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body[data-font="manrope"] {
  --font: 'Manrope', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
body[data-font="plex"] {
  --font: 'IBM Plex Sans', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

body[data-content-width="focused"] { --maxw: 1040px; }
body[data-content-width="standard"] { --maxw: 1200px; }
body[data-content-width="wide"] { --maxw: 1400px; }

body[data-density="compact"] {
  --topbar-h: 56px;
  --section-space: 56px;
  --section-tight-space: 36px;
  --app-top-space: 22px;
  --app-bottom-space: 48px;
  --panel-padding: 16px;
  --panel-head-padding: 13px 16px;
}
body[data-density="balanced"] {
  --topbar-h: 64px;
  --section-space: 72px;
  --section-tight-space: 48px;
  --app-top-space: 32px;
  --app-bottom-space: 64px;
  --panel-padding: 20px;
  --panel-head-padding: 16px 20px;
}
body[data-density="airy"] {
  --topbar-h: 72px;
  --section-space: 96px;
  --section-tight-space: 64px;
  --app-top-space: 42px;
  --app-bottom-space: 80px;
  --panel-padding: 24px;
  --panel-head-padding: 20px 24px;
}

body[data-radius="square"] { --radius: 0; --radius-lg: 0; }
body[data-radius="subtle"] { --radius: 4px; --radius-lg: 6px; }
body[data-radius="soft"] { --radius: 6px; --radius-lg: 8px; }

body[data-header="static"] .site-header {
  position: relative;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (min-width: 1321px) {
  body[data-navigation="centered"] .nav__links {
    margin-left: auto;
    margin-right: auto;
  }
  body[data-navigation="compact"] .nav { gap: 20px; }
  body[data-navigation="compact"] .nav__links { gap: 14px; }
  body[data-navigation="compact"] .nav__actions { gap: 8px; }
}

body[data-card-style="elevated"] .panel,
body[data-card-style="elevated"] .stat-card,
body[data-card-style="elevated"] .plan,
body[data-card-style="elevated"] .service-card,
body[data-card-style="elevated"] .feature-card {
  box-shadow: 0 16px 34px -28px rgba(2, 6, 23, .7);
}
body[data-card-style="flat"] .panel,
body[data-card-style="flat"] .stat-card,
body[data-card-style="flat"] .plan,
body[data-card-style="flat"] .service-card,
body[data-card-style="flat"] .feature-card {
  border-color: transparent;
  box-shadow: none;
}
body[data-card-style="flat"] .panel__head { border-bottom-color: var(--border); }

body[data-template="commerce"] .nav__buy {
  box-shadow: 0 10px 24px -14px rgba(var(--primary-rgb), .9);
}
body[data-template="console"] .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--border-strong);
}
body[data-template="editorial"] .site-footer { background: var(--bg); }

body[data-footer-style="compact"] .site-footer { padding: 28px 0 20px; }
body[data-footer-style="compact"] .footer-grid {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 24px;
}
body[data-footer-style="compact"] .footer-grid > :first-child p { display: none; }
body[data-footer-style="compact"] .footer-bottom { margin-top: 24px; }

body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

@media (max-width: 640px) {
  body[data-density="compact"] { --section-space: 44px; --section-tight-space: 32px; }
  body[data-density="airy"] { --section-space: 64px; --section-tight-space: 48px; }
  body[data-footer-style="compact"] .footer-grid { grid-template-columns: 1fr; gap: 18px; }
}