/* XENS.CLOUD PHP CMS — dark neon hosting theme */
:root {
  --background: oklch(0.16 0.045 268);
  --foreground: oklch(0.97 0.01 250);
  --surface: oklch(0.21 0.05 267);
  --card: oklch(0.22 0.052 267);
  --primary: oklch(0.68 0.19 252);
  --primary-foreground: oklch(0.15 0.04 268);
  --secondary: oklch(0.28 0.06 268);
  --muted-foreground: oklch(0.72 0.03 258);
  --accent: oklch(0.62 0.24 300);
  --border: oklch(0.99 0 0 / 12%);
  --neon-cyan: oklch(0.79 0.16 215);
  --neon-violet: oklch(0.64 0.24 300);
  --neon-amber: oklch(0.76 0.16 60);
  --neon-green: oklch(0.76 0.18 158);
  --radius: 0.875rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: "Saira", "Chakra Petch", sans-serif; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }

.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.muted { color: var(--muted-foreground); }
.cyan { color: var(--neon-cyan); }
.violet { color: var(--neon-violet); }
.amber { color: var(--neon-amber); }
.green { color: var(--neon-green); }
.eyebrow { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; }
.text-gradient-neon {
  background-image: linear-gradient(100deg, oklch(0.79 0.16 215), oklch(0.68 0.19 252), oklch(0.64 0.24 300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glow-cyan { box-shadow: 0 0 0 1px oklch(0.79 0.16 215 / 25%), 0 0 40px -12px oklch(0.79 0.16 215 / 55%); }
.glow-violet { box-shadow: 0 0 0 1px oklch(0.64 0.24 300 / 25%), 0 0 40px -12px oklch(0.64 0.24 300 / 55%); }
.bg-grid {
  background-image: linear-gradient(oklch(0.99 0 0 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.99 0 0 / 4%) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 80%, transparent);
  backdrop-filter: blur(16px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.logo { display: flex; align-items: center; gap: .5rem; }
.logo-mark { font-family: "Saira", sans-serif; font-size: 1.5rem; font-weight: 800; font-style: italic; }
.logo-sub { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3em; color: var(--muted-foreground); }
.main-nav { display: none; gap: .25rem; }
.main-nav a { padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: var(--muted-foreground); }
.main-nav a:hover, .main-nav a.active { color: var(--foreground); }
.header-actions { display: none; gap: .75rem; align-items: center; }
.menu-toggle { background: none; border: 0; color: var(--foreground); font-size: 1.5rem; cursor: pointer; padding: .25rem .5rem; }
.mobile-nav { display: none; border-top: 1px solid var(--border); background: var(--background); padding: 1rem 0; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: .5rem .75rem; font-size: .9rem; color: var(--muted-foreground); }
.mobile-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.mobile-actions .btn { flex: 1; text-align: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: .75rem; border: 0; cursor: pointer;
  font-size: .875rem; font-weight: 700; font-family: inherit;
  background: var(--primary); color: var(--primary-foreground);
  transition: opacity .2s, transform .2s, background .2s;
}
.btn:hover { opacity: .9; }
.btn-outline { background: transparent; border: 1px solid color-mix(in oklch, var(--primary) 50%, transparent); color: var(--foreground); }
.btn-outline:hover { background: color-mix(in oklch, var(--primary) 12%, transparent); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-pill { border-radius: 999px; padding: .8rem 1.6rem; }
.btn-danger { background: oklch(0.62 0.22 22); color: #fff; }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero-img { position: absolute; inset: 0 0 0 auto; height: 100%; width: 100%; object-fit: cover; opacity: .7; }
.hero-fade-x { position: absolute; inset: 0; background: linear-gradient(90deg, var(--background) 35%, transparent 95%); }
.hero-fade-y { position: absolute; inset: 0; background: linear-gradient(0deg, var(--background), transparent 55%); }
.hero-inner { position: relative; padding: 5rem 1rem; }
.hero h1 { margin-top: 1rem; font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; text-transform: uppercase; font-style: italic; line-height: .95; }
.hero p.lead { margin-top: 1.5rem; max-width: 32rem; color: var(--muted-foreground); font-size: 1.05rem; }
.hero-features { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 2rem; font-size: .875rem; font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.hero-stats { display: none; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); flex-direction: column; gap: .75rem; }
.stat-card { display: flex; align-items: center; gap: .75rem; width: 13rem; border: 1px solid var(--border); border-radius: .75rem; background: color-mix(in oklch, var(--card) 80%, transparent); padding: .75rem 1rem; backdrop-filter: blur(8px); }
.stat-card strong { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1; }
.stat-card span { font-size: .75rem; color: var(--muted-foreground); }

/* Page hero */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 0%, oklch(0.68 0.19 252 / .25), transparent); }
.page-hero .container { position: relative; padding-top: 4rem; padding-bottom: 4rem; }
.page-hero h1 { margin-top: 1rem; max-width: 48rem; font-size: clamp(2rem, 6vw, 3.75rem); font-weight: 800; text-transform: uppercase; font-style: italic; }
.page-hero p { margin-top: 1rem; max-width: 40rem; color: var(--muted-foreground); }

/* Grids & cards */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section { padding-block: 3.5rem; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; }

.card { border: 1px solid var(--border); border-radius: 1rem; background: var(--card); padding: 1.5rem; }
.cat-card { display: flex; align-items: center; justify-content: space-between; transition: transform .2s, border-color .2s; }
.cat-card:hover { transform: translateY(-4px); border-color: color-mix(in oklch, var(--primary) 50%, transparent); }
.cat-card h2 { margin-top: 1rem; font-size: 1.1rem; font-weight: 700; }
.round-arrow { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); }
.icon { width: 2rem; height: 2rem; }

.game-tile { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: .75rem; border: 1px solid var(--border); }
.game-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.game-tile:hover img { transform: scale(1.1); }
.game-tile span { position: absolute; inset: auto 0 0 0; padding: .75rem; font-size: .85rem; font-weight: 700; background: linear-gradient(0deg, var(--background), transparent); }

.brand-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 3rem; padding: 1.5rem 1rem; }
.brand-strip span { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; color: var(--muted-foreground); }

.solution-card { display: flex; flex-direction: column; }
.solution-card h3 { margin-top: 1rem; font-size: 1.05rem; font-weight: 700; }
.solution-card ul { margin: 1.25rem 0; flex: 1; display: grid; gap: .75rem; }
.solution-card li, .plan-card li { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }

/* Plans */
.plan-card { position: relative; display: flex; flex-direction: column; transition: transform .2s; }
.plan-card:hover { transform: translateY(-4px); }
.plan-card.popular { border-color: color-mix(in oklch, var(--primary) 60%, transparent); }
.plan-badge { position: absolute; top: -.75rem; left: 1.5rem; border-radius: 999px; background: var(--accent); color: #fff; padding: .25rem .75rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.plan-price { display: flex; align-items: baseline; gap: .25rem; margin-top: .75rem; }
.plan-price .amount { font-family: "Saira", sans-serif; font-size: 2.25rem; font-weight: 800; }
.plan-card ul { margin: 1.5rem 0; flex: 1; display: grid; gap: .75rem; }

.loc-card { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border); border-radius: .75rem; background: var(--card); padding: .75rem 1rem; font-size: .875rem; font-weight: 500; }

.cta-box { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid color-mix(in oklch, var(--primary) 40%, transparent); background: var(--card); padding: 2.5rem; text-align: center; }
.cta-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.cta-box .overlay { position: absolute; inset: 0; background: linear-gradient(0deg, var(--background), transparent); }
.cta-box h2, .cta-box p, .cta-box a { position: relative; z-index: 1; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); }
.perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding: 2rem 1rem; }
.perk { display: flex; align-items: center; gap: .75rem; font-size: .875rem; font-weight: 600; }
.footer-cols { display: grid; gap: 2rem; padding: 3rem 1rem; border-top: 1px solid var(--border); }
.footer-cols h3 { font-size: .875rem; font-weight: 600; }
.footer-cols ul { margin-top: .75rem; display: grid; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-cols a:hover { color: var(--foreground); }
.footer-bottom { border-top: 1px solid var(--border); padding: 1.5rem; text-align: center; font-size: .75rem; color: var(--muted-foreground); }

/* Forms */
.form-card { max-width: 26rem; margin: 4rem auto; }
.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: .8rem; font-weight: 600; color: var(--muted-foreground); }
input, select, textarea {
  width: 100%; padding: .65rem .8rem; border-radius: .65rem;
  border: 1px solid var(--border); background: var(--background); color: var(--foreground);
  font-family: inherit; font-size: .9rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in oklch, var(--primary) 60%, transparent); outline-offset: 1px; }
.alert { border-radius: .75rem; padding: .8rem 1rem; font-size: .875rem; margin-bottom: 1rem; border: 1px solid var(--border); }
.alert-error { border-color: oklch(0.62 0.22 22 / 60%); color: oklch(0.8 0.15 22); }
.alert-ok { border-color: oklch(0.76 0.18 158 / 60%); color: var(--neon-green); }

/* Admin */
.admin-layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.admin-side { background: var(--surface); border-right: 1px solid var(--border); padding: 1.25rem; }
.admin-side .logo-mark { font-size: 1.25rem; }
.admin-side nav { display: grid; gap: .25rem; margin-top: 1.5rem; }
.admin-side nav a { padding: .55rem .75rem; border-radius: .6rem; font-size: .875rem; color: var(--muted-foreground); }
.admin-side nav a:hover, .admin-side nav a.active { background: var(--card); color: var(--foreground); }
.admin-main { padding: 1.5rem; }
.admin-main h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1.25rem; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--border); }
th { color: var(--muted-foreground); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.row-actions { display: flex; gap: .5rem; }
.badge { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .7rem; font-weight: 700; background: var(--secondary); }

@media (min-width: 640px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perks { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
  .header-actions { display: flex; }
  .hero-inner { padding: 7rem 1rem; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
  .hero-img { width: 60%; }
}
@media (min-width: 1024px) {
  .main-nav { display: flex; }
  .menu-toggle { display: none; }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-stats { display: flex; }
  .admin-layout { grid-template-columns: 15rem 1fr; }
  .admin-main { padding: 2rem 2.5rem; }
}

/* tables + inline actions */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.table td { padding: .6rem; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.link-btn { background: none; border: 0; padding: 0 .35rem; font: inherit; font-size: .85rem; cursor: pointer; color: var(--neon-cyan); }
.link-btn:hover { text-decoration: underline; }
.badge.green { background: color-mix(in oklch, var(--neon-green) 20%, transparent); color: var(--neon-green); }
code { background: var(--secondary); padding: .1rem .35rem; border-radius: .35rem; font-size: .85em; }
@media print { .site-header, .site-footer, .btn { display: none !important; } }

/* ------------------------------------------------ VPS control panel */
.vps-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; margin-top: .75rem; }
.vps-title { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; font-style: italic; text-transform: uppercase; margin-top: .4rem; }
.vps-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }
.vps-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--border); border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; color: var(--muted-foreground); background: color-mix(in oklch, var(--card) 70%, transparent); }
.vps-chip strong { color: var(--foreground); font-weight: 600; }
.vps-chip .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--muted-foreground); }
.vps-chip.ok { color: var(--neon-green); border-color: color-mix(in oklch, var(--neon-green) 45%, transparent); }
.vps-chip.ok .dot { background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }
.vps-chip.off { color: var(--neon-amber); border-color: color-mix(in oklch, var(--neon-amber) 45%, transparent); }
.vps-chip.off .dot { background: var(--neon-amber); }
.vps-power { display: flex; gap: .5rem; flex-wrap: wrap; }
.vps-power .btn[disabled] { opacity: .45; cursor: not-allowed; }
.vps-metrics { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
.metric-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: 1rem 1.1rem; }
.metric-top { display: flex; align-items: baseline; justify-content: space-between; font-size: .85rem; color: var(--muted-foreground); }
.metric-top strong { font-family: "Saira", sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--foreground); }
.meter { margin-top: .7rem; height: .45rem; border-radius: 999px; background: color-mix(in oklch, var(--foreground) 10%, transparent); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--neon-cyan), var(--primary)); transition: width .4s ease; }
.meter.violet span { background: linear-gradient(90deg, var(--primary), var(--neon-violet)); }
.meter.amber span { background: linear-gradient(90deg, var(--neon-amber), oklch(0.7 0.19 35)); }
.meter.green span { background: linear-gradient(90deg, var(--neon-green), var(--neon-cyan)); }
.metric-sub { margin-top: .55rem; font-size: .78rem; color: var(--muted-foreground); }
.vps-grid { margin-top: 1.25rem; grid-template-columns: 1fr; }
.os-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-top: .9rem; }
.os-option { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: .7rem; padding: .7rem .85rem; cursor: pointer; font-size: .9rem; background: color-mix(in oklch, var(--card) 60%, transparent); }
.os-option:hover { border-color: color-mix(in oklch, var(--primary) 55%, transparent); }
.os-option:has(input:checked) { border-color: var(--neon-cyan); box-shadow: 0 0 0 1px color-mix(in oklch, var(--neon-cyan) 50%, transparent); }
.os-option input { accent-color: var(--neon-cyan); }
@media (min-width: 700px) {
  .vps-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .vps-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .os-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* CMS 1.4 — Obsidian client VPS console */
.vps-console-page{--ob-bg:oklch(.105 .025 265);--ob-side:oklch(.125 .03 265);--ob-card:oklch(.16 .038 264);--ob-card2:oklch(.19 .045 262);--ob-line:oklch(.8 .04 250/.14);--ob-text:oklch(.96 .01 250);--ob-muted:oklch(.68 .035 255);--ob-blue:oklch(.67 .2 250);--ob-cyan:oklch(.78 .15 220);--ob-green:oklch(.75 .18 154);--ob-amber:oklch(.8 .17 75);--ob-red:oklch(.65 .22 25);background:var(--ob-bg);color:var(--ob-text);font-family:"Manrope",sans-serif}.vps-console-page main{min-height:100vh}.vps-console-page h1,.vps-console-page h2,.vps-console-page h3{font-family:"Sora",sans-serif;letter-spacing:0}.vps-console-shell{min-height:100vh;display:grid;grid-template-columns:14.5rem minmax(0,1fr);background-image:linear-gradient(var(--ob-line) 1px,transparent 1px),linear-gradient(90deg,var(--ob-line) 1px,transparent 1px);background-size:64px 64px}.vps-console-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:1rem .8rem;border-right:1px solid var(--ob-line);background:color-mix(in oklch,var(--ob-side) 96%,transparent);backdrop-filter:blur(20px);z-index:20}.vps-console-logo{display:grid;grid-template-columns:2.4rem 1fr;align-items:center;column-gap:.65rem;padding:.3rem .45rem 1.2rem}.vps-console-logo>span{grid-row:1/3;display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid color-mix(in oklch,var(--ob-cyan) 45%,transparent);border-radius:.55rem;color:var(--ob-cyan);font-size:1.3rem;box-shadow:0 0 22px color-mix(in oklch,var(--ob-cyan) 18%,transparent)}.vps-console-logo strong{font:700 1.05rem "Sora",sans-serif}.vps-console-logo small{color:var(--ob-muted);font-size:.55rem;letter-spacing:.15em}.vps-console-side nav{display:grid;gap:.25rem}.vps-console-side nav a{display:flex;align-items:center;gap:.7rem;min-height:2.75rem;padding:.65rem .8rem;border:1px solid transparent;border-radius:.55rem;color:var(--ob-muted);font-size:.78rem;font-weight:600;transition:.2s}.vps-console-side nav a i{display:grid;place-items:center;width:1.15rem;color:var(--ob-cyan);font-style:normal;font-family:"JetBrains Mono",monospace}.vps-console-side nav a:hover{color:var(--ob-text);background:var(--ob-card)}.vps-console-side nav a.active{color:var(--ob-text);border-color:color-mix(in oklch,var(--ob-blue) 42%,transparent);background:linear-gradient(90deg,color-mix(in oklch,var(--ob-blue) 27%,transparent),transparent);box-shadow:inset 3px 0 var(--ob-cyan)}.vps-api-state{margin-top:auto;display:flex;align-items:center;gap:.6rem;padding:.75rem;border:1px solid var(--ob-line);border-radius:.55rem;background:var(--ob-card)}.vps-api-state b{width:.55rem;height:.55rem;border-radius:50%;background:var(--ob-green);box-shadow:0 0 10px var(--ob-green)}.vps-api-state span,.vps-api-state small{display:block}.vps-api-state span{font-size:.7rem;font-weight:700}.vps-api-state small{color:var(--ob-muted);font-size:.58rem;margin-top:.08rem}.vps-console-main{min-width:0}.vps-console-top{height:4.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.25rem;border-bottom:1px solid var(--ob-line);background:color-mix(in oklch,var(--ob-bg) 85%,transparent);backdrop-filter:blur(14px)}.vps-console-top button{display:none;background:none;border:0;color:var(--ob-text);font-size:1.1rem}.vps-console-top div small,.vps-console-top div strong{display:block}.vps-console-top div small{color:var(--ob-muted);font-size:.55rem;letter-spacing:.14em}.vps-console-top div strong{font:600 .92rem "Sora",sans-serif;margin-top:.08rem}.vps-console-top>a{padding:.45rem .7rem;border:1px solid var(--ob-line);border-radius:.45rem;font-size:.7rem}.vps-console-content{max-width:96rem;margin:auto;padding:1.15rem}.vps-command{margin-top:0;padding:1.15rem;border:1px solid color-mix(in oklch,var(--ob-blue) 32%,var(--ob-line));border-radius:.65rem;background:linear-gradient(120deg,var(--ob-card2),var(--ob-card));box-shadow:0 18px 45px oklch(.03 .02 265/.32)}.vps-command .vps-title{font-style:normal;text-transform:none;font-size:1.35rem;letter-spacing:0}.vps-command .eyebrow{font-size:.58rem;letter-spacing:.16em}.vps-command .vps-chip{border-radius:.4rem;background:color-mix(in oklch,var(--ob-bg) 65%,transparent);font-size:.68rem}.vps-command .vps-chip strong{font-family:"JetBrains Mono",monospace;font-size:.65rem}.vps-command .vps-power{display:grid;grid-template-columns:repeat(3,1fr)}.vps-command .btn{min-width:7.5rem;border-radius:.45rem;padding:.6rem .75rem;font-size:.7rem}.vps-command .btn:not(.btn-outline):not(.btn-danger){background:color-mix(in oklch,var(--ob-green) 16%,transparent);border:1px solid color-mix(in oklch,var(--ob-green) 44%,transparent);color:var(--ob-green)}.vps-command .btn-outline{border-color:color-mix(in oklch,var(--ob-amber) 43%,transparent);color:var(--ob-amber);background:color-mix(in oklch,var(--ob-amber) 12%,transparent)}.vps-command .btn-danger{border:1px solid color-mix(in oklch,var(--ob-red) 48%,transparent);color:oklch(.82 .12 25);background:color-mix(in oklch,var(--ob-red) 15%,transparent)}.vps-console-content .alert{border-radius:.5rem;background:var(--ob-card)}.vps-console-content .vps-metrics{gap:.75rem;margin-top:.85rem}.vps-console-content .metric-card{position:relative;overflow:hidden;min-height:9.5rem;padding:1rem;border-color:var(--ob-line);border-radius:.6rem;background:color-mix(in oklch,var(--ob-card) 94%,transparent);transition:transform .2s,border-color .2s}.vps-console-content .metric-card:hover{transform:translateY(-2px);border-color:color-mix(in oklch,var(--ob-blue) 45%,transparent)}.vps-console-content .metric-top{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:.6rem;font-weight:800}.vps-console-content .metric-top strong{display:block;margin-top:.5rem;font:700 1.8rem "JetBrains Mono",monospace;color:var(--ob-text)}.vps-console-content .metric-sub{font-size:.65rem}.vps-console-content .meter{position:absolute;left:1rem;right:1rem;bottom:1rem;height:.28rem}.vps-console-content .meter span{box-shadow:0 0 10px var(--ob-blue);animation:ob-meter .7s ease-out}@keyframes ob-meter{from{width:0}}.vps-console-content .vps-grid{gap:.75rem;margin-top:.75rem}.vps-console-content .vps-glass{border-color:var(--ob-line);border-radius:.6rem;background:color-mix(in oklch,var(--ob-card) 95%,transparent);padding:1rem}.vps-card-title{display:flex;align-items:center;gap:.5rem;font:600 .8rem "Sora",sans-serif}.vps-card-title i{display:grid;place-items:center;width:1.8rem;height:1.8rem;border:1px solid color-mix(in oklch,var(--ob-blue) 35%,transparent);border-radius:.4rem;color:var(--ob-cyan);font-style:normal;font-family:"JetBrains Mono",monospace}.vps-console-content .table{margin-top:.8rem!important}.vps-console-content .table td{border-color:var(--ob-line);font-size:.7rem}.vps-console-content code{font-family:"JetBrains Mono",monospace;background:transparent;color:var(--ob-text);cursor:pointer}.vps-console-content code.copied{color:var(--ob-green)}.vps-console-content input{border-radius:.4rem;border-color:var(--ob-line);background:var(--ob-bg);font-family:"JetBrains Mono",monospace;font-size:.7rem}.vps-console-content .btn{border-radius:.4rem;font-size:.68rem}.vps-os-panel{border-color:var(--ob-line)!important;background:var(--ob-card)!important}.vps-console-content .os-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}.vps-console-content .os-option{min-height:3.6rem;border-color:var(--ob-line);border-radius:.5rem;background:var(--ob-bg);font-size:.7rem}.vps-console-content .os-option:has(input:checked){border-color:var(--ob-blue);box-shadow:inset 0 0 0 1px var(--ob-blue),0 0 18px color-mix(in oklch,var(--ob-blue) 14%,transparent)}
@media(max-width:900px){.vps-console-shell{grid-template-columns:1fr}.vps-console-side{position:fixed;left:-15rem;width:14.5rem;transition:left .25s;box-shadow:18px 0 50px oklch(.03 .02 265/.55)}.vps-console-side.open{left:0}.vps-console-top button{display:block}.vps-console-top>div{margin-right:auto}.vps-console-content .os-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.vps-console-content{padding:.7rem}.vps-command{padding:.85rem}.vps-command .vps-power{grid-template-columns:1fr;width:100%}.vps-command .vps-power .btn{width:100%}.vps-console-content .vps-metrics,.vps-console-content .vps-grid{grid-template-columns:1fr}.vps-console-content .os-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.vps-console-content .meter span{animation:none}.vps-console-side,.vps-console-content .metric-card{transition:none}}

/* CMS 1.5 — compact responsive VPS workspace */
.vps-console-page{--ob-bg:oklch(.115 .022 258);--ob-side:oklch(.14 .027 258);--ob-card:oklch(.175 .03 257);--ob-card2:oklch(.205 .038 255);--ob-line:oklch(.82 .025 250/.13);--ob-text:oklch(.975 .006 250);--ob-muted:oklch(.7 .025 252);--ob-blue:oklch(.68 .18 249);--ob-cyan:oklch(.78 .13 216);--ob-green:oklch(.76 .17 153);--ob-amber:oklch(.8 .16 74);--ob-red:oklch(.65 .2 24)}
.vps-console-shell{background-color:var(--ob-bg);background-image:radial-gradient(circle at 70% 0%,color-mix(in oklch,var(--ob-blue) 9%,transparent),transparent 34rem)}
.vps-console-content{max-width:86rem;padding:1.35rem 1.5rem 2.5rem}.vps-command{align-items:center;padding:1.25rem 1.35rem;border-radius:.75rem}.vps-command .vps-title{font-size:1.45rem}.vps-command .vps-chips{gap:.4rem}.vps-command .vps-chip{padding:.32rem .6rem}
.vps-console-content .vps-metrics{gap:.65rem;margin-top:.7rem}.vps-console-content .metric-card{min-height:8.1rem;border-radius:.7rem;padding:.9rem}.vps-console-content .metric-top strong{font-size:1.5rem}.vps-console-content .meter{left:.9rem;right:.9rem;bottom:.85rem}
.vps-console-content .vps-grid{grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);align-items:start}.vps-console-content .vps-glass{border-radius:.7rem;padding:1.1rem}.vps-access-card .table td:last-child{text-align:right}.vps-secret{display:inline-block;min-width:7.5rem}.vps-reveal{margin-left:.35rem;border:0;background:transparent;color:var(--ob-cyan);font-size:.65rem;font-weight:700;cursor:pointer}
.vps-password-form{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--ob-line)}.vps-form-head{display:grid;gap:.12rem;margin-bottom:.55rem}.vps-form-head strong{font:600 .72rem "Sora",sans-serif}.vps-form-head span{font-size:.64rem;color:var(--ob-muted)}.vps-input-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.45rem}.vps-input-row input{width:100%;min-width:0}.vps-quick-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.55rem}
.vps-os-panel{margin-top:.75rem!important}.vps-console-content .os-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem;margin-top:.8rem}.vps-console-content .os-option{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.55rem;min-height:3.25rem;padding:.5rem .6rem;border-radius:.55rem;overflow:hidden}.vps-console-content .os-option input{position:absolute;opacity:0;pointer-events:none}.os-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.45rem;color:var(--ob-muted);background:color-mix(in oklch,var(--ob-text) 6%,transparent)}.os-icon svg{width:1.15rem;height:1.15rem;fill:currentColor}.os-ubuntu{color:oklch(.72 .19 40)}.os-debian{color:oklch(.7 .2 345)}.os-centos,.os-alma,.os-rocky,.os-fedora{color:var(--ob-cyan)}.os-windows{color:var(--ob-blue)}.os-copy{display:grid;min-width:0}.os-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.66rem;font-weight:700;color:var(--ob-text)}.os-copy small{margin-top:.08rem;color:var(--ob-muted);font-size:.54rem}.os-check{display:none;width:1rem;height:1rem;border-radius:50%;place-items:center;background:var(--ob-blue);color:var(--ob-text);font-size:.58rem}.vps-console-content .os-option:has(input:checked) .os-check{display:grid}.vps-console-content .os-option:has(input:checked) .os-icon{color:var(--ob-text);background:color-mix(in oklch,var(--ob-blue) 38%,transparent)}
.vps-reinstall-box{margin-top:.85rem;padding:.85rem;border:1px solid color-mix(in oklch,var(--ob-red) 22%,var(--ob-line));border-radius:.6rem;background:color-mix(in oklch,var(--ob-red) 5%,var(--ob-bg))}
@media(max-width:1100px){.vps-console-content .os-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.vps-console-content .vps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.vps-console-top{position:sticky;top:0;z-index:15}.vps-console-side{top:0;bottom:0;height:100dvh}.vps-console-content{padding:1rem}.vps-command{display:grid;grid-template-columns:1fr}.vps-command .vps-power{width:100%}.vps-console-content .vps-grid{grid-template-columns:1fr}}
@media(max-width:620px){.vps-console-top{height:3.7rem;padding:0 .8rem}.vps-console-top>a{padding:.38rem .55rem}.vps-console-content{padding:.65rem .65rem 1.5rem}.vps-command{padding:.85rem;border-radius:.65rem}.vps-command .vps-title{font-size:1.15rem}.vps-command .vps-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.vps-command .vps-chip{min-width:0;overflow:hidden}.vps-command .vps-chip strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vps-command .vps-power{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}.vps-command .vps-power .btn{min-width:0;width:auto;padding:.55rem .25rem;font-size:.62rem}.vps-console-content .vps-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.vps-console-content .metric-card{min-height:7.4rem;padding:.75rem}.vps-console-content .metric-top strong{font-size:1.25rem}.vps-console-content .metric-sub{font-size:.58rem}.vps-console-content .meter{left:.75rem;right:.75rem;bottom:.7rem}.vps-console-content .vps-glass{padding:.85rem}.vps-console-content .os-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.vps-console-content .os-option{grid-template-columns:1.75rem minmax(0,1fr) auto;min-height:3rem;padding:.42rem}.os-icon{width:1.75rem;height:1.75rem}.os-name{font-size:.59rem}.vps-input-row{grid-template-columns:1fr}.vps-input-row .btn{width:100%}.vps-password-form,.vps-reinstall-box{padding:.7rem}.vps-access-card .table td{font-size:.64rem}.vps-quick-actions{display:grid;grid-template-columns:1fr 1fr}.vps-quick-actions .btn{padding:.55rem .35rem}.vps-reveal{display:block;margin:.25rem 0 0 auto}.vps-console-content .table{display:table}}

/* CMS 1.5.1 — cross-browser mobile stability */
.vps-console-page{width:100%;max-width:100%;overflow-x:hidden}
.vps-console-page main,.vps-console-shell,.vps-console-main,.vps-console-content,.vps-command,.vps-glass,.vps-os-panel{min-width:0;max-width:100%}
.vps-console-content input,.vps-console-content button,.vps-console-content select{max-width:100%}
.vps-command>div,.vps-console-top>div,.vps-chip,.metric-card,.os-copy{min-width:0}
.vps-menu-backdrop{display:none}
.vps-console-content .os-option.selected{border-color:var(--ob-blue);box-shadow:inset 0 0 0 1px var(--ob-blue),0 0 18px color-mix(in oklch,var(--ob-blue) 14%,transparent)}
.vps-console-content .os-option.selected .os-check{display:grid}
.vps-console-content .os-option.selected .os-icon{color:var(--ob-text);background:color-mix(in oklch,var(--ob-blue) 38%,transparent)}
@media(max-width:900px){
  .vps-console-shell{display:block;width:100%}
  .vps-console-side{left:0;width:min(17rem,84vw);height:100vh;height:100svh;transform:translateX(-105%);transition:transform .25s ease;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .vps-console-side.open{left:0;transform:translateX(0)}
  .vps-menu-backdrop{position:fixed;inset:0;z-index:19;width:100%;height:100%;border:0;background:rgba(2,6,18,.66);opacity:0;pointer-events:none;transition:opacity .2s}
  .vps-menu-open{overflow:hidden}
  .vps-menu-open .vps-menu-backdrop{display:block;opacity:1;pointer-events:auto}
  .vps-console-top{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto;width:100%}
  .vps-console-top button{display:grid;width:2.5rem;height:2.5rem;place-items:center;padding:0;border:1px solid var(--ob-line);border-radius:.45rem;cursor:pointer}
  .vps-console-top>div{margin-right:0;overflow:hidden}
  .vps-console-top div strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:620px){
  .vps-console-top{grid-template-columns:2.35rem minmax(0,1fr) auto;gap:.55rem;height:auto;min-height:3.75rem;padding:.55rem .65rem}
  .vps-console-top>a{white-space:nowrap}
  .vps-console-content{width:100%;padding:.65rem .6rem max(1.5rem,env(safe-area-inset-bottom))}
  .vps-command{gap:.8rem;width:100%;overflow:hidden}
  .vps-command .vps-title{max-width:100%;overflow-wrap:anywhere}
  .vps-command .vps-chips{grid-template-columns:1fr}
  .vps-command .vps-chip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;width:100%}
  .vps-command .vps-chip strong{text-align:right}
  .vps-command .vps-power{grid-template-columns:1fr 1fr 1fr;width:100%;margin:0}
  .vps-command .vps-power .btn{min-height:2.65rem;white-space:normal;line-height:1.2}
  .vps-console-content .vps-metrics{grid-template-columns:1fr 1fr;width:100%}
  .vps-console-content .metric-card{min-width:0;overflow:hidden}
  .vps-console-content .metric-top strong,.vps-console-content .metric-sub{overflow-wrap:anywhere}
  .vps-console-content .vps-grid{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .vps-console-content .table{display:block;width:100%;overflow:visible}
  .vps-console-content .table tbody{display:grid;width:100%}
  .vps-console-content .table tr{display:grid;grid-template-columns:minmax(5.5rem,.75fr) minmax(0,1.25fr);align-items:start;width:100%}
  .vps-console-content .table td{display:block;min-width:0;max-width:100%;overflow-wrap:anywhere}
  .vps-console-content .table td:last-child{text-align:right}
  .vps-console-content code{max-width:100%;overflow-wrap:anywhere;white-space:normal}
  .vps-secret{min-width:0}
  .vps-input-row{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .vps-input-row input{display:block;width:100%;min-width:0}
  .vps-console-content .os-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}
  .vps-console-content .os-option{width:100%;min-width:0}
  .vps-reinstall-box{width:100%;overflow:hidden}
}
@media(max-width:380px){
  .vps-console-top>a{font-size:.62rem;padding:.35rem .4rem}
  .vps-console-top div small{display:none}
  .vps-command .vps-power{grid-template-columns:1fr}
  .vps-console-content .vps-metrics,.vps-console-content .os-grid{grid-template-columns:1fr}
  .vps-quick-actions{grid-template-columns:1fr}
}

/* ============ CMS 1.6.1 — responsive card admin ============ */
.admin-page {
  --ad-bg: oklch(0.11 0.025 265);
  --ad-side: oklch(0.13 0.03 265);
  --ad-card: oklch(0.165 0.038 264);
  --ad-card2: oklch(0.195 0.045 262);
  --ad-line: oklch(0.8 0.04 250 / 14%);
  --ad-text: oklch(0.96 0.01 250);
  --ad-muted: oklch(0.68 0.035 255);
  --ad-cyan: oklch(0.78 0.15 220);
  --ad-green: oklch(0.75 0.18 154);
  --ad-red: oklch(0.65 0.22 25);
  background: var(--ad-bg);
  color: var(--ad-text);
}
.admin-page .admin-layout { display: block; min-height: 100vh; }
.admin-page .admin-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--ad-line);
  background: color-mix(in oklch, var(--ad-bg) 88%, transparent);
  backdrop-filter: blur(14px);
}
.admin-page .admin-topbar .logo { text-decoration: none; }
.admin-page .admin-menu-btn {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border: 1px solid var(--ad-line); border-radius: .55rem;
  background: var(--ad-card); color: var(--ad-text);
  font-size: 1.05rem; cursor: pointer;
}
.admin-page .admin-topbar-site {
  margin-left: auto; flex-shrink: 0;
  padding: .45rem .75rem; border: 1px solid var(--ad-line); border-radius: .5rem;
  font-size: .75rem; color: var(--ad-muted); text-decoration: none;
}
.admin-page .admin-topbar-site:hover { color: var(--ad-text); border-color: var(--ad-cyan); }
.admin-page .admin-side {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: 16rem; max-width: 85vw;
  display: flex; flex-direction: column;
  padding: 1.1rem .9rem;
  background: color-mix(in oklch, var(--ad-side) 97%, transparent);
  border-right: 1px solid var(--ad-line);
  transform: translateX(-105%);
  transition: transform .25s ease;
  overflow-y: auto;
}
.admin-page.admin-menu-open .admin-side { transform: translateX(0); box-shadow: 0 0 60px oklch(0.02 0.02 265 / 60%); }
.admin-page .admin-side-logo { text-decoration: none; padding: .2rem .4rem 1rem; }
.admin-page .admin-side nav { display: grid; gap: .25rem; margin-top: .35rem; }
.admin-page .admin-side nav a {
  display: flex; align-items: center; gap: .7rem;
  min-height: 2.7rem; padding: .6rem .8rem;
  border: 1px solid transparent; border-radius: .55rem;
  color: var(--ad-muted); font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: background .15s, color .15s;
}
.admin-page .admin-side nav a i {
  display: grid; place-items: center;
  width: 1.3rem; flex-shrink: 0;
  color: var(--ad-cyan); font-style: normal; font-size: .85rem;
}
.admin-page .admin-side nav a:hover { color: var(--ad-text); background: var(--ad-card); }
.admin-page .admin-side nav a.active {
  color: var(--ad-text);
  border-color: color-mix(in oklch, var(--ad-cyan) 40%, transparent);
  background: linear-gradient(90deg, color-mix(in oklch, var(--ad-cyan) 18%, transparent), transparent);
  box-shadow: inset 3px 0 var(--ad-cyan);
}
.admin-page .admin-logout { color: oklch(0.8 0.12 25) !important; }
.admin-page .admin-side-meta { margin-top: auto; padding-top: 1.2rem; font-size: .72rem; overflow-wrap: anywhere; }
.admin-page .admin-backdrop { display: none; }
.admin-page.admin-menu-open .admin-backdrop {
  display: block; position: fixed; inset: 0; z-index: 35;
  border: 0; background: oklch(0.05 0.02 265 / 65%); backdrop-filter: blur(3px);
}
.admin-page .admin-main { min-width: 0; max-width: 100%; padding: 1.1rem 1rem 3rem; }
.admin-page .admin-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.25rem; min-width: 0;
}
.admin-page .admin-head h1 { font-family: "Sora", sans-serif; font-size: 1.45rem; font-weight: 700; margin: 0; }
.admin-page .admin-eyebrow {
  margin: 0 0 .15rem; font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ad-cyan);
}
.admin-page .admin-head-site { flex-shrink: 0; font-size: .78rem; }
/* cards */
.admin-page .card {
  border: 1px solid var(--ad-line); border-radius: .8rem;
  background: linear-gradient(150deg, var(--ad-card), color-mix(in oklch, var(--ad-card) 80%, var(--ad-bg)));
  padding: 1.15rem; margin-bottom: 1rem;
  min-width: 0; max-width: 100%;
}
.admin-page .card h2 { font-family: "Sora", sans-serif; }
.admin-page .grid .card { margin-bottom: 0; }
.admin-page .card:hover { border-color: color-mix(in oklch, var(--ad-cyan) 32%, var(--ad-line)); }
/* stat cards on the dashboard */
.admin-page .grid .card p { overflow-wrap: anywhere; }
/* tables become horizontally scrollable cards on small screens */
.admin-page .admin-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.admin-page .table { min-width: 34rem; }
.admin-page .table th { color: var(--ad-muted); white-space: nowrap; }
.admin-page .table td { overflow-wrap: anywhere; }
/* forms */
.admin-page input, .admin-page select, .admin-page textarea { max-width: 100%; }
.admin-page .btn { min-height: 2.6rem; }
.admin-page .badge { white-space: nowrap; }
/* desktop */
@media (min-width: 1024px) {
  .admin-page .admin-topbar { display: none; }
  .admin-page .admin-backdrop { display: none !important; }
  .admin-page .admin-side { transform: none; }
  .admin-page .admin-main { margin-left: 16rem; padding: 1.75rem 2.25rem 3rem; max-width: calc(100% - 16rem); }
  .admin-page .admin-head h1 { font-size: 1.7rem; }
}
@media (max-width: 640px) {
  .admin-page .admin-head-site { display: none; }
  .admin-page .admin-head h1 { font-size: 1.25rem; }
  .admin-page .card { padding: .95rem; border-radius: .65rem; }
  .admin-page .admin-side-meta { font-size: .68rem; }
}

/* ============ CMS 1.7.2 — tile admin dashboard ============ */
.admin-page .admin-head {
  position: relative;
  border: 1px solid var(--ad-line);
  border-radius: .9rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(120deg, oklch(0.52 0.16 275), oklch(0.44 0.14 258));
  align-items: flex-start;
  flex-wrap: wrap;
}
.admin-page .admin-head h1 { font-size: 1.35rem; }
.admin-page .admin-head .admin-eyebrow { color: oklch(0.95 0.03 275); opacity: .85; }
.admin-page .admin-head-sub { margin: .2rem 0 0; font-size: .78rem; color: oklch(0.95 0.02 275 / 78%); }
.admin-page .admin-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.admin-page .admin-head-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.4rem; padding: .45rem .85rem;
  border: 1px solid oklch(1 0 0 / 22%); border-radius: .6rem;
  background: oklch(1 0 0 / 12%); color: oklch(0.98 0.01 275);
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
.admin-page .admin-head-btn:hover { background: oklch(1 0 0 / 22%); }
.admin-page .ad-search {
  display: flex; align-items: center; gap: .6rem;
  margin: -0.4rem 0 1.15rem;
  padding: .2rem .9rem;
  border: 1px solid var(--ad-line); border-radius: .75rem;
  background: var(--ad-card);
}
.admin-page .ad-search span { color: var(--ad-muted); font-size: 1rem; }
.admin-page .ad-search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--ad-text); font-size: .88rem; padding: .7rem 0; outline: none;
}
.admin-page .ad-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: .7rem;
  font-size: 1.05rem; font-style: normal; line-height: 1;
  border: 1px solid oklch(1 0 0 / 8%);
}
.admin-page .tone-cyan   { color: oklch(0.82 0.14 220); background: oklch(0.82 0.14 220 / 14%); }
.admin-page .tone-green  { color: oklch(0.80 0.17 155); background: oklch(0.80 0.17 155 / 14%); }
.admin-page .tone-blue   { color: oklch(0.75 0.15 265); background: oklch(0.75 0.15 265 / 16%); }
.admin-page .tone-violet { color: oklch(0.76 0.16 300); background: oklch(0.76 0.16 300 / 15%); }
.admin-page .tone-amber  { color: oklch(0.82 0.15 78);  background: oklch(0.82 0.15 78 / 15%); }
.admin-page .tone-red    { color: oklch(0.72 0.19 22);  background: oklch(0.72 0.19 22 / 15%); }
.admin-page .tone-pink   { color: oklch(0.76 0.17 350); background: oklch(0.76 0.17 350 / 15%); }
.admin-page .ad-stats {
  display: grid; gap: .7rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}
.admin-page .ad-stat {
  display: flex; align-items: center; gap: .7rem; min-width: 0;
  padding: .85rem; border: 1px solid var(--ad-line); border-radius: .8rem;
  background: var(--ad-card);
}
.admin-page .ad-stat-body { min-width: 0; display: grid; }
.admin-page .ad-stat-body strong { font-family: "Sora", sans-serif; font-size: 1.35rem; line-height: 1.1; }
.admin-page .ad-stat-body span { font-size: .72rem; color: var(--ad-muted); overflow-wrap: anywhere; }
.admin-page .ad-banner {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: 1rem; margin-bottom: 1rem;
  border: 1px solid var(--ad-line); border-radius: .85rem;
  background: linear-gradient(120deg, var(--ad-card2), var(--ad-card));
}
.admin-page .ad-banner div { flex: 1; min-width: 12rem; }
.admin-page .ad-banner h2 { margin: 0; font-size: .98rem; }
.admin-page .ad-banner p { margin: .2rem 0 0; font-size: .78rem; color: var(--ad-muted); }
.admin-page .ad-tile-panel {
  padding: .9rem; margin-bottom: 1rem;
  border: 1px solid var(--ad-line); border-radius: .9rem;
  background: color-mix(in oklch, var(--ad-card) 55%, transparent);
}
.admin-page .ad-tiles {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.admin-page .ad-tile {
  display: grid; justify-items: center; gap: .55rem;
  padding: 1rem .6rem;
  border: 1px solid var(--ad-line); border-radius: .8rem;
  background: var(--ad-card); text-decoration: none;
  color: var(--ad-text); text-align: center;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.admin-page .ad-tile:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--ad-cyan) 40%, var(--ad-line)); background: var(--ad-card2); }
.admin-page .ad-tile-label { font-size: .76rem; font-weight: 600; overflow-wrap: anywhere; }
.admin-page .ad-empty { margin: .9rem .2rem 0; font-size: .8rem; }
@media (max-width: 620px) {
  .admin-page .admin-head { padding: .95rem; }
  .admin-page .admin-head h1 { font-size: 1.15rem; }
  .admin-page .admin-head-actions { width: 100%; }
  .admin-page .admin-head-btn { flex: 1; justify-content: center; }
  .admin-page .ad-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-page .ad-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
  .admin-page .ad-tile { padding: .8rem .35rem; }
  .admin-page .ad-ico { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
  .admin-page .ad-tile-label { font-size: .68rem; }
  .admin-page .ad-banner .btn { width: 100%; }
}
@media (max-width: 380px) {
  .admin-page .ad-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== CMS 1.8.0 — WHMCS-style checkout ===== */
.impersonate-bar {
  background: linear-gradient(90deg, #f7b500, #ff7a45);
  color: #14110a; font-size: .85rem; font-weight: 700;
  padding: .55rem 1rem; text-align: center;
}
.impersonate-bar a { color: #14110a; text-decoration: underline; margin-left: .5rem; }

.co-wrap { padding: 2.25rem 0 4rem; }
.co-steps { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.co-step {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.55);
}
.co-step span {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem;
  background: rgba(255,255,255,.08);
}
.co-step.done { color: #7dfcc0; border-color: rgba(125,252,192,.35); }
.co-step.done span { background: rgba(125,252,192,.18); color: #7dfcc0; }
.co-step.current { color: #fff; border-color: rgba(34,211,238,.55); background: rgba(34,211,238,.1); }
.co-step.current span { background: linear-gradient(135deg,#22d3ee,#a855f7); color: #06121a; }

.co-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 1.25rem; align-items: start; }
.co-main { display: grid; gap: 1.25rem; min-width: 0; }
.co-card {
  border: 1px solid rgba(255,255,255,.09); border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  padding: 1.25rem; min-width: 0;
}
.co-card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.co-card h2 { font-size: 1.05rem; font-weight: 700; }
.co-edit { font-size: .8rem; color: #22d3ee; text-decoration: none; border-bottom: 1px dashed rgba(34,211,238,.5); }
.co-saved-note { font-size: .82rem; color: #7dfcc0; margin-bottom: .75rem; }
.co-saved { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.co-saved div { display: grid; gap: .15rem; min-width: 0; }
.co-saved span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.45); }
.co-saved strong { font-size: .9rem; overflow-wrap: anywhere; }
.co-saved-wide { grid-column: 1 / -1; }

.co-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; }
.co-field { display: grid; gap: .3rem; min-width: 0; }
.co-field.co-wide { grid-column: 1 / -1; }
.co-field label { font-size: .75rem; color: rgba(255,255,255,.6); }
.co-field input, .co-field select {
  width: 100%; max-width: 100%; padding: .65rem .75rem;
  border-radius: .6rem; border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28); color: #fff; font: inherit; font-size: .9rem;
}
.co-field input:focus { outline: none; border-color: rgba(34,211,238,.6); }
.co-field input:disabled { opacity: .6; }
.co-save { margin-top: 1rem; }
.co-hint { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: .5rem; }

.co-methods { display: grid; gap: .6rem; }
.co-method {
  display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit;
  padding: .8rem .9rem; border-radius: .8rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025);
}
.co-method.active { border-color: rgba(34,211,238,.6); background: rgba(34,211,238,.09); }
.co-method-mark {
  width: 2.3rem; height: 2.3rem; border-radius: .6rem; flex: none;
  display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(168,85,247,.25));
}
.co-method-text { display: grid; gap: .15rem; min-width: 0; }
.co-method-text small { font-size: .74rem; color: rgba(255,255,255,.5); }
.co-method-dot { margin-left: auto; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); flex: none; }
.co-method.active .co-method-dot { border-color: #22d3ee; background: #22d3ee; box-shadow: inset 0 0 0 3px rgba(0,0,0,.6); }

.co-pay-form { margin-top: 1.1rem; display: grid; gap: .85rem; }
.co-instructions { font-size: .85rem; color: rgba(255,255,255,.6); }
.co-account {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem .9rem; border-radius: .7rem;
  background: rgba(34,211,238,.08); border: 1px dashed rgba(34,211,238,.4);
}
.co-account span { font-size: .78rem; color: rgba(255,255,255,.6); }
.co-account strong { font-family: 'JetBrains Mono', monospace; }
.co-terms { display: flex; gap: .55rem; align-items: flex-start; font-size: .85rem; color: rgba(255,255,255,.7); }
.co-submit { width: 100%; min-height: 2.9rem; }
.co-paid h2 { color: #7dfcc0; }

.co-side { position: sticky; top: 1.25rem; min-width: 0; }
.co-summary {
  border: 1px solid rgba(34,211,238,.25); border-radius: 1rem; padding: 1.25rem;
  background: linear-gradient(180deg, rgba(34,211,238,.09), rgba(168,85,247,.07));
}
.co-summary h2 { font-size: 1.05rem; font-weight: 700; }
.co-summary-sub { font-size: .76rem; color: rgba(255,255,255,.55); margin-top: .2rem; }
.co-product { margin-top: .9rem; display: grid; gap: .15rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.co-product small { font-size: .76rem; color: rgba(255,255,255,.55); }
.co-lines { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.co-lines li { display: flex; justify-content: space-between; gap: .75rem; font-size: .86rem; }
.co-total {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.12);
  font-weight: 700;
}
.co-total b { font-size: 1.35rem; }
.co-status { margin-top: .7rem; font-size: .8rem; color: rgba(255,255,255,.6); }
.co-trust { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .35rem; font-size: .78rem; color: rgba(255,255,255,.6); }
.co-back { display: inline-block; margin-top: 1rem; font-size: .82rem; color: #22d3ee; text-decoration: none; }

@media (max-width: 900px) {
  .co-grid { grid-template-columns: minmax(0,1fr); }
  .co-side { position: static; order: -1; }
}
@media (max-width: 560px) {
  .co-wrap { padding: 1.25rem 0 2.5rem; }
  .co-fields, .co-saved { grid-template-columns: minmax(0,1fr); }
  .co-step { flex: 1; justify-content: center; font-size: .72rem; padding: .5rem .5rem; }
  .co-card, .co-summary { padding: 1rem; }
}