:root {
  --ink: #18212f;
  --muted: #6d7283;
  --line: rgba(24,33,47,.12);
  --card: rgba(255,255,255,.82);
  --cyan: #20b8c7;
  --green: #39ce87;
  --orange: #ff8a3d;
  --red: #ef476f;
  --shadow: 0 20px 70px rgba(22, 31, 51, .13);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 10%, rgba(32,184,199,.20), transparent 32rem),
    radial-gradient(circle at 86% 4%, rgba(255,138,61,.16), transparent 30rem),
    linear-gradient(135deg, #f7fcff 0%, #fff8f0 100%);
}
.aurora { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-12deg); animation: sweep 9s ease-in-out infinite; }
@keyframes sweep { 0%,100% { opacity: .25; transform: translateX(-25%) skewX(-12deg); } 50% { opacity: .75; transform: translateX(22%) skewX(-12deg); } }
.topbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 18px 54px; backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.62); }
.brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-weight: 800; letter-spacing: .04em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: linear-gradient(135deg, var(--cyan), #58d68d); box-shadow: 0 12px 26px rgba(32,184,199,.28); }
nav { display: flex; gap: 16px; align-items: center; }
a { color: var(--cyan); text-decoration: none; font-weight: 700; }
nav form { margin: 0; }
button, .primary { border: 0; border-radius: 13px; padding: 11px 18px; cursor: pointer; font-weight: 800; color: white; background: linear-gradient(135deg, var(--cyan), #35d38f); box-shadow: 0 10px 20px rgba(32,184,199,.22); }
nav button, .actions button { padding: 7px 11px; color: var(--cyan); background: rgba(32,184,199,.09); box-shadow: none; }
.shell { width: min(1280px, calc(100% - 40px)); margin: 28px auto 64px; position: relative; z-index: 1; }
.panel, .login-card, .metric-card { background: var(--card); border: 1px solid rgba(255,255,255,.75); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.login-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; max-width: 880px; margin: 8vh auto; padding: 44px; }
.hero-grid { display: grid; grid-template-columns: 1fr 180px 180px; gap: 22px; margin-bottom: 22px; }
.hero-panel { padding: 34px; }
h1, h2 { margin: 0 0 16px; }
h1 { font-size: clamp(30px, 4vw, 54px); line-height: .98; }
h2 { color: #1aaebe; }
.eyebrow { margin: 0 0 12px; color: var(--orange); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.muted, .hint { color: var(--muted); line-height: 1.7; }
.metric-card { display: grid; place-items: center; text-align: center; }
.metric-card span { font-size: 46px; font-weight: 900; color: var(--cyan); }
.metric-card small { color: var(--muted); font-weight: 800; }
.panel { padding: 28px 32px; margin-bottom: 22px; }
.stack, .create-form { display: grid; gap: 16px; }
.create-form { grid-template-columns: 1fr 1fr 160px 1fr auto; align-items: end; }
label { display: grid; gap: 8px; font-weight: 800; color: #4b5061; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; background: rgba(255,255,255,.72); outline: none; }
textarea { resize: vertical; font-family: Consolas, "Microsoft YaHei UI", monospace; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(32,184,199,.13); }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 18px; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: #4c5060; background: rgba(255,255,255,.52); }
tr:last-child td { border-bottom: 0; }
tr.revoked { opacity: .55; }
code { padding: 2px 6px; border-radius: 7px; color: #14606a; background: rgba(32,184,199,.12); }
.actions { display: flex; gap: 12px; align-items: center; }
.actions form { margin: 0; }
.empty { text-align: center; color: var(--muted); }
.small { max-height: 420px; }
.flash-wrap { display: grid; gap: 10px; margin-bottom: 18px; }
.flash { padding: 13px 16px; border-radius: 14px; font-weight: 800; background: rgba(32,184,199,.12); color: #14606a; }
.flash.error { background: rgba(239,71,111,.12); color: var(--red); }
.verify-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 22px; }
.result { display: inline-flex; padding: 12px 16px; border-radius: 14px; font-weight: 900; }
.result.ok { color: #0a7d50; background: rgba(57,206,135,.16); }
.result.bad { color: var(--red); background: rgba(239,71,111,.14); }
dl { display: grid; grid-template-columns: 100px 1fr; gap: 12px 18px; }
dt { color: var(--muted); font-weight: 800; }
dd { margin: 0; font-weight: 800; }
@media (max-width: 900px) {
  .topbar { padding: 14px 20px; }
  .hero-grid, .login-card, .verify-layout, .create-form { grid-template-columns: 1fr; }
  .metric-card { min-height: 130px; }
}
.inline-edit { display: grid; grid-template-columns: 130px 130px 110px 150px 94px 110px; gap: 8px; align-items: center; min-width: 760px; }
.inline-edit input, .inline-edit select { padding: 8px 10px; border-radius: 10px; }
.inline-edit button, .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; padding: 10px 14px; border: 0; font-weight: 800; color: var(--cyan); background: rgba(32,184,199,.09); box-shadow: none; }
.inline-edit button.renew { color: #168a60; background: rgba(53,211,143,.14); }
.expiry-edit { display: flex; gap: 8px; align-items: end; margin-top: 8px; }
.expiry-edit label { min-width: 245px; font-size: 12px; }
.expiry-edit input { padding: 8px 10px; border-radius: 10px; }
.expiry-edit button { padding: 9px 13px; color: #8a4b08; background: rgba(255,138,61,.14); box-shadow: none; }
.bulk-renew-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 18px 0 14px; padding: 14px; border: 1px solid rgba(32,184,199,.22); border-radius: 16px; background: rgba(32,184,199,.06); }
.bulk-renew-form > input[type="hidden"] { display: none; }
.bulk-renew-form label:not(.bulk-check) { min-width: 260px; }
.bulk-renew-form .bulk-check { display: inline-flex; align-items: center; gap: 8px; min-height: 43px; }
.bulk-renew-form .bulk-check input, .license-select { width: 18px; height: 18px; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.bulk-renew-form button.renew { color: #087c65; background: rgba(53,211,143,.16); box-shadow: none; }
.selected-count { align-self: center; color: var(--muted); font-weight: 800; }
@media (max-width: 900px) {
  .bulk-renew-form { align-items: stretch; }
  .bulk-renew-form label:not(.bulk-check) { min-width: 100%; }
}

.section-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.section-head form { margin: 0; }
button.danger { color: var(--red); background: rgba(239,71,111,.12); box-shadow: none; }
td > form + form { margin-top: 8px; }


.app-badge { display:inline-flex; align-items:center; gap:6px; min-width:78px; justify-content:center; padding:6px 10px; border-radius:999px; font-weight:900; letter-spacing:.04em; }
.app-badge.v7 { color:#087c65; background:linear-gradient(135deg, rgba(57,206,135,.24), rgba(32,184,199,.18)); border:1px solid rgba(57,206,135,.38); }
.app-badge.v5 { color:#164c9b; background:linear-gradient(135deg, rgba(64,133,255,.22), rgba(32,184,199,.14)); border:1px solid rgba(64,133,255,.36); }
.app-badge.other { color:#8a4b08; background:rgba(255,138,61,.16); border:1px solid rgba(255,138,61,.32); }

/* The administrator surface uses a denser workspace than public pages. */
.dashboard-body .topbar { padding: 10px 28px; }
.dashboard-body .brand { gap: 9px; }
.dashboard-body .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
.dashboard-body nav { gap: 10px; }
.dashboard-body .shell { width: min(1760px, calc(100% - 24px)); margin: 12px auto 28px; }
.dashboard-body .hero-grid { grid-template-columns: minmax(0, 1fr) 132px 132px; gap: 10px; margin-bottom: 10px; }
.dashboard-body .hero-panel { padding: 16px 20px; }
.dashboard-body .hero-panel h1 { margin-bottom: 7px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; }
.dashboard-body .hero-panel p:last-child { margin: 0; font-size: 13px; }
.dashboard-body .eyebrow { margin-bottom: 7px; font-size: 10px; }
.dashboard-body .metric-card { min-height: 94px; border-radius: 17px; }
.dashboard-body .metric-card span { font-size: 32px; }
.dashboard-body .panel { padding: 15px 18px; margin-bottom: 10px; border-radius: 17px; }
.dashboard-body .panel h2 { margin-bottom: 8px; font-size: 18px; }
.dashboard-body .muted { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.dashboard-body .create-form { gap: 8px; }
.dashboard-body label { gap: 4px; font-size: 13px; }
.dashboard-body input,
.dashboard-body select,
.dashboard-body textarea { border-radius: 10px; padding: 8px 10px; }
.dashboard-body button,
.dashboard-body .primary,
.dashboard-body .button { border-radius: 10px; padding: 8px 12px; }
.dashboard-body .table-wrap { max-height: min(390px, 52vh); border-radius: 12px; }
.dashboard-body .table-wrap th { position: sticky; top: 0; z-index: 1; }
.dashboard-body th,
.dashboard-body td { padding: 8px 10px; font-size: 13px; line-height: 1.35; }
.dashboard-body .small { max-height: min(310px, 44vh); }
.dashboard-body .actions { gap: 7px; }
.dashboard-body .inline-edit { gap: 6px; }
.dashboard-body .inline-edit input,
.dashboard-body .inline-edit select { padding: 6px 8px; }
.dashboard-body .inline-edit button { padding: 7px 10px; }
.dashboard-body .expiry-edit { margin-top: 5px; }
.dashboard-body .expiry-edit input { padding: 6px 8px; }
.dashboard-body .expiry-edit button { padding: 7px 10px; }
.dashboard-body .bulk-renew-form { gap: 8px; margin: 10px 0 9px; padding: 9px 11px; border-radius: 12px; }
.dashboard-body .bulk-renew-form .bulk-check { min-height: 36px; }
.dashboard-body .app-badge { min-width: 64px; padding: 4px 8px; }
.dashboard-body .section-head { gap: 10px; }
.dashboard-body .section-head h2 { margin: 0; }
.dashboard-module[hidden] { display: none !important; }
.dashboard-tabs {
  position: sticky;
  top: 57px;
  z-index: 2;
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 15px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 32px rgba(22,31,51,.10);
  backdrop-filter: blur(18px);
}
.dashboard-body .dashboard-tabs .dashboard-tab {
  flex: 0 0 auto;
  padding: 7px 13px;
  color: #596071;
  background: transparent;
  box-shadow: none;
}
.dashboard-body .dashboard-tabs .dashboard-tab.active {
  color: white;
  background: linear-gradient(135deg, #159dab, #29bb7c);
  box-shadow: 0 7px 16px rgba(32,184,199,.20);
}

@media (max-width: 900px) {
  .dashboard-body .topbar { padding: 9px 14px; }
  .dashboard-body .brand > span:last-child { display: none; }
  .dashboard-body .topbar nav { flex-wrap: nowrap; gap: 6px; }
  .dashboard-body .topbar nav a { font-size: 12px; white-space: nowrap; }
  .dashboard-body .topbar nav button { padding: 6px 8px; font-size: 12px; }
  .dashboard-body .shell { width: min(100% - 14px, 1760px); margin-top: 7px; }
  .dashboard-body .hero-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-body .hero-panel { grid-column: 1 / -1; }
  .dashboard-body .metric-card { min-height: 74px; }
  .dashboard-body .panel { padding: 13px; }
  .dashboard-tabs { top: 55px; }
  .dashboard-body .section-head { align-items: flex-start; flex-direction: column; }
  .dashboard-body .section-head .actions { flex-wrap: wrap; }
}

/* Public MOXU product homepage. Scoped so the existing admin UI is unchanged. */
.home-body {
  --home-cyan: #60e6ff;
  --home-blue: #5686ff;
  --home-violet: #9e7cff;
  --home-text: #f4f7ff;
  --home-muted: #aeb9d1;
  color: var(--home-text);
  background:
    radial-gradient(circle at 16% 12%, rgba(44, 158, 255, .22), transparent 31rem),
    radial-gradient(circle at 82% 25%, rgba(139, 92, 246, .22), transparent 34rem),
    radial-gradient(circle at 56% 78%, rgba(25, 214, 209, .12), transparent 34rem),
    linear-gradient(145deg, #050814 0%, #091126 46%, #070914 100%);
}
.home-body .aurora {
  opacity: .72;
  background:
    linear-gradient(110deg, transparent 22%, rgba(101, 224, 255, .08) 42%, rgba(165, 116, 255, .11) 58%, transparent 78%);
}
.home-body .topbar {
  position: sticky;
  padding: 15px max(28px, calc((100vw - 1280px) / 2));
  color: var(--home-text);
  border-color: rgba(255, 255, 255, .10);
  background: rgba(5, 9, 22, .62);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
}
.home-body .brand { color: var(--home-text); }
.home-body .brand-mark {
  background: linear-gradient(145deg, #62edff, #617dff 55%, #a777ff);
  box-shadow: 0 10px 28px rgba(88, 140, 255, .35), inset 0 1px rgba(255,255,255,.55);
}
.home-body nav a { color: #c7d1e9; font-size: 14px; transition: color .2s ease, transform .2s ease; }
.home-body nav a:hover { color: #fff; transform: translateY(-1px); }
.home-body .shell { width: min(1280px, calc(100% - 40px)); margin-top: 0; }
.home-hero {
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap: 70px;
  align-items: center;
  padding: 80px 20px 62px;
}
.home-copy { position: relative; z-index: 1; }
.home-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: #8ba5ca;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
}
.home-kicker > span {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--home-cyan), var(--home-violet));
  box-shadow: 0 0 12px var(--home-cyan);
}
.home-hero h1 {
  max-width: 760px;
  margin: 0 0 28px;
  color: #fff;
  font-size: clamp(48px, 6.4vw, 84px);
  line-height: 1.08;
  letter-spacing: -.055em;
  text-shadow: 0 14px 55px rgba(39, 101, 255, .16);
}
.home-hero h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, #67edff 0%, #7899ff 48%, #c08cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.home-lead { max-width: 680px; margin: 0; color: var(--home-muted); font-size: 18px; line-height: 1.9; }
.home-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.home-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  color: #fff;
  font-weight: 900;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-button:hover { transform: translateY(-2px); }
.home-button-primary {
  border-color: rgba(112, 221, 255, .32);
  background: linear-gradient(125deg, rgba(55, 201, 235, .94), rgba(82, 113, 255, .96) 58%, rgba(157, 95, 255, .94));
  box-shadow: 0 15px 42px rgba(76, 112, 255, .32), inset 0 1px rgba(255,255,255,.35);
}
.home-button-primary:hover { box-shadow: 0 20px 52px rgba(76, 112, 255, .44); }
.home-button-ghost { color: #dce5fa; background: rgba(255,255,255,.055); backdrop-filter: blur(18px); }
.home-button-ghost:hover { border-color: rgba(113,225,255,.35); }
.home-trust { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-top: 30px; color: #8493af; font-size: 12px; font-weight: 700; }
.home-trust span { display: inline-flex; align-items: center; gap: 8px; }
.home-trust i, .engine-core i { width: 6px; height: 6px; border-radius: 50%; background: #5ff6c7; box-shadow: 0 0 11px #5ff6c7; }
.engine-visual { position: relative; min-height: 500px; display: grid; place-items: center; isolation: isolate; }
.engine-visual::before {
  content: "";
  position: absolute;
  inset: 11%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 158, 255, .27), rgba(123, 86, 235, .12) 43%, transparent 70%);
  filter: blur(12px);
}
.engine-halo { position: absolute; border: 1px solid rgba(118, 206, 255, .24); border-radius: 50%; box-shadow: inset 0 0 42px rgba(75,122,255,.07), 0 0 28px rgba(55,106,255,.08); }
.halo-one { width: 355px; height: 355px; animation: engine-spin 18s linear infinite; }
.halo-two { width: 440px; height: 290px; border-color: rgba(181,124,255,.20); transform: rotate(-25deg); animation: engine-spin-reverse 24s linear infinite; }
.halo-one::before, .halo-two::before { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--home-cyan); box-shadow: 0 0 18px 5px rgba(96,230,255,.55); }
.halo-two::before { background: var(--home-violet); box-shadow: 0 0 18px 5px rgba(158,124,255,.5); }
@keyframes engine-spin { to { transform: rotate(360deg); } }
@keyframes engine-spin-reverse { from { transform: rotate(-25deg); } to { transform: rotate(-385deg); } }
.engine-core {
  width: 220px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 46% 54% 51% 49% / 48% 45% 55% 52%;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(79,112,255,.13));
  box-shadow: inset 0 1px rgba(255,255,255,.46), inset 20px -24px 55px rgba(120,72,220,.15), 0 25px 85px rgba(27,80,215,.27);
  backdrop-filter: blur(25px) saturate(145%);
  animation: core-morph 7s ease-in-out infinite;
}
@keyframes core-morph { 50% { border-radius: 54% 46% 44% 56% / 43% 57% 43% 57%; transform: translateY(-7px); } }
.engine-core small { color: #9badca; font-size: 10px; font-weight: 900; letter-spacing: .22em; }
.engine-core strong { margin: 6px 0; font-size: 70px; line-height: 1; letter-spacing: -.08em; }
.engine-core span { display: flex; align-items: center; gap: 8px; color: #b9c7df; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.engine-chip {
  position: absolute;
  min-width: 124px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
  box-shadow: inset 0 1px rgba(255,255,255,.28), 0 18px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(20px);
}
.engine-chip b, .engine-chip small { display: block; }
.engine-chip b { margin-bottom: 4px; color: #ecf5ff; font-size: 15px; }
.engine-chip small { color: #7f91b2; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.chip-tcp { left: 4%; top: 23%; }
.chip-udp { right: 0; top: 30%; }
.chip-ai { right: 14%; bottom: 10%; }
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  margin: 0 0 100px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: linear-gradient(110deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 24px 70px rgba(0,0,0,.16);
  backdrop-filter: blur(24px);
}
.home-stats article { position: relative; padding: 30px 34px; }
.home-stats article + article::before { content: ""; position: absolute; inset: 24px auto 24px 0; width: 1px; background: rgba(255,255,255,.11); }
.home-stats strong, .home-stats span, .home-stats small { display: block; }
.home-stats strong { float: left; margin-right: 18px; color: #fff; font-size: 38px; line-height: 1; }
.home-stats strong.service-period { white-space: nowrap; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -.035em; }
.home-stats span { color: #eef4ff; font-weight: 900; }
.home-stats small { margin-top: 6px; color: #8290aa; }
.home-section { padding: 20px 0 100px; }
.home-section-head { max-width: 690px; margin-bottom: 38px; }
.home-section h2, .community-panel h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.035em; }
.home-section-head > p:last-child, .community-panel p { color: var(--home-muted); line-height: 1.8; }
.client-showcase { padding-top: 0; }
.client-showcase-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.55fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 4.5vw, 52px);
  border: 1px solid rgba(129,210,255,.18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 18%, rgba(103,91,255,.22), transparent 34%),
    radial-gradient(circle at 16% 88%, rgba(73,218,255,.12), transparent 36%),
    linear-gradient(135deg, rgba(25,48,86,.82), rgba(19,23,59,.72));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 28px 78px rgba(0,0,0,.24);
  backdrop-filter: blur(24px);
}
.client-showcase-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.075), transparent 32%, transparent 72%, rgba(139,92,246,.05));
}
.client-showcase-copy, .client-preview-media { position: relative; z-index: 1; }
.client-showcase-copy h2 { margin: 0 0 17px; font-size: clamp(30px, 3.7vw, 47px); line-height: 1.08; }
.client-showcase-lead { margin: 0; color: #aebbd3; font-size: 14px; line-height: 1.8; }
.client-shot-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 26px; }
.client-shot-tab {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(180,210,255,.14);
  border-radius: 14px;
  color: #aebbd2;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  text-align: left;
  background: rgba(8,17,39,.42);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.client-shot-tab span { margin-right: 6px; color: #667896; font-size: 10px; }
.client-shot-tab:hover { transform: translateY(-1px); color: #eef6ff; border-color: rgba(111,222,255,.32); }
.client-shot-tab.is-active {
  color: #fff;
  border-color: rgba(107,221,255,.42);
  background: linear-gradient(135deg, rgba(58,184,255,.23), rgba(126,91,255,.22));
  box-shadow: inset 0 1px rgba(255,255,255,.15), 0 10px 30px rgba(57,108,255,.16);
}
.client-shot-tab.is-active span { color: #72eaff; }
.client-shot-tab:focus-visible { outline: 3px solid rgba(113,225,255,.64); outline-offset: 3px; }
.client-shot-summary { min-height: 73px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.client-shot-summary strong, .client-shot-summary span { display: block; }
.client-shot-summary strong { margin-bottom: 7px; color: #f5f8ff; font-size: 16px; }
.client-shot-summary span { color: #8291ad; font-size: 12px; line-height: 1.65; }
.client-preview-media { min-width: 0; }
.client-shot-frame {
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(178,215,255,.23);
  border-radius: 23px;
  background: rgba(235,248,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 24px 60px rgba(0,0,0,.31), 0 0 64px rgba(92,88,255,.12);
}
.client-shot-crop {
  position: relative;
  aspect-ratio: 14 / 9;
  overflow: hidden;
  border-radius: 17px;
  background: #071d27;
}
.client-shot-crop img {
  position: absolute;
  inset: -6px;
  display: block;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  max-width: none;
  object-fit: cover;
  opacity: 1;
  transform: scale(1.004);
  transition: opacity .12s ease, transform .22s ease;
}
.client-shot-crop img.is-switching { opacity: .18; transform: scale(1.012); }
.video-showcase { padding-top: 0; }
.video-showcase .home-section-head { max-width: 780px; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.video-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.028));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 22px 54px rgba(0,0,0,.14);
  backdrop-filter: blur(22px);
}
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050914; }
.promo-video-frame { display: block; width: 100%; height: 100%; border: 0; }
.video-lazy {
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 24% 24%, rgba(74,213,255,.32), transparent 32%),
    radial-gradient(circle at 78% 70%, rgba(139,92,246,.4), transparent 38%),
    linear-gradient(145deg, #07172e, #171536 58%, #0a1024);
}
.video-lazy::before {
  content: "MOXU";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255,.055);
  font-size: clamp(70px, 10vw, 150px);
  font-weight: 1000;
  letter-spacing: -.07em;
}
.video-lazy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.075) 48%, transparent 76%);
}
.video-lazy-promo {
  background:
    radial-gradient(circle at 72% 22%, rgba(74,213,255,.28), transparent 30%),
    radial-gradient(circle at 22% 78%, rgba(139,92,246,.42), transparent 38%),
    linear-gradient(145deg, #09162b, #18183b 58%, #0b1024);
}
.video-play-trigger {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: min(270px, 88%);
  place-items: center;
  gap: 8px;
  padding: 22px 28px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 22px;
  color: #fff;
  background: rgba(9,18,42,.68);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.video-play-trigger:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(113,225,255,.58);
  background: rgba(18,31,67,.82);
}
.video-play-trigger:focus-visible { outline: 3px solid rgba(113,225,255,.7); outline-offset: 4px; }
.video-play-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  padding-left: 4px;
  border-radius: 50%;
  color: #071426;
  font-size: 23px;
  background: linear-gradient(135deg, #55dcff, #8b5cf6);
  box-shadow: 0 12px 34px rgba(81,185,255,.35);
}
.video-play-trigger strong { font-size: 17px; }
.video-play-trigger small { color: #aebbd3; font-size: 12px; font-weight: 700; }
.video-lazy noscript { color: #fff; }
.video-lazy noscript a { color: #76e6ff; font-weight: 900; }
.video-copy { padding: 20px 22px 23px; }
.video-copy > span { color: #76e6ff; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.video-copy h3 { min-height: 3em; margin: 9px 0 17px; color: #f4f7ff; font-size: clamp(17px, 1.55vw, 21px); line-height: 1.5; }
.video-copy a { color: #aebfff; font-size: 13px; font-weight: 900; }
.video-copy a:hover { color: #71e1ff; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  padding: 27px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.028));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 22px 54px rgba(0,0,0,.14);
  backdrop-filter: blur(22px);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.feature-card:hover { transform: translateY(-7px); border-color: rgba(102,215,255,.28); background: linear-gradient(145deg, rgba(105,173,255,.14), rgba(154,93,255,.055)); }
.feature-number { position: absolute; right: 24px; top: 22px; color: rgba(191,208,239,.34); font-size: 12px; font-weight: 900; }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 29px; border: 1px solid rgba(116,223,255,.28); border-radius: 15px; color: #aeefff; font-weight: 900; background: rgba(72,149,255,.13); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 10px 28px rgba(71,104,255,.16); }
.feature-card h3 { margin: 0 0 13px; color: #fff; font-size: 20px; }
.feature-card p { margin: 0; color: #9daac2; line-height: 1.75; }
.feature-card small { position: absolute; left: 27px; bottom: 24px; color: #62708c; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.community-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin: 0 0 70px;
  padding: 45px 48px;
  overflow: hidden;
  border: 1px solid rgba(137,190,255,.18);
  border-radius: 28px;
  background: radial-gradient(circle at 80% 10%, rgba(146,101,255,.22), transparent 25rem), linear-gradient(120deg, rgba(67,147,255,.14), rgba(255,255,255,.04));
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 26px 72px rgba(0,0,0,.2);
  backdrop-filter: blur(24px);
}
.community-panel h2 { max-width: 760px; margin-bottom: 10px; }
.community-panel p:last-child { margin-bottom: 0; }
.community-panel .home-button { flex: 0 0 auto; }
.home-footer { display: flex; justify-content: space-between; gap: 20px; padding: 0 4px 18px; color: #59677f; font-size: 12px; }
.home-footer div { display: flex; gap: 20px; }
.home-footer a { color: #71819d; }

@media (max-width: 1050px) {
  .home-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 72px; }
  .engine-visual { min-height: 430px; }
  .client-showcase-panel { grid-template-columns: 1fr; }
  .client-showcase-copy { max-width: 720px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .home-body .topbar { padding: 12px 16px; }
  .home-body .brand > span:last-child { display: none; }
  .home-body nav { gap: 9px; overflow-x: auto; }
  .home-body nav a { flex: 0 0 auto; font-size: 12px; }
  .home-body .shell { width: min(100% - 24px, 1280px); }
  .home-hero { min-height: auto; padding: 60px 4px 36px; }
  .home-hero h1 { font-size: clamp(42px, 14vw, 62px); }
  .home-lead { font-size: 16px; }
  .engine-visual { min-height: 380px; transform: scale(.9); margin: -20px -24px; }
  .home-stats { grid-template-columns: 1fr; margin-bottom: 72px; }
  .home-stats article + article::before { inset: 0 24px auto; width: auto; height: 1px; }
  .video-grid { grid-template-columns: 1fr; }
  .client-showcase-panel { padding: 24px 18px 18px; border-radius: 23px; }
  .client-shot-tabs { grid-template-columns: 1fr 1fr; }
  .client-shot-frame { padding: 5px; border-radius: 19px; }
  .client-shot-crop { border-radius: 14px; }
  .video-copy h3 { min-height: 0; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 280px; }
  .community-panel { align-items: flex-start; flex-direction: column; padding: 34px 26px; }
  .community-panel .home-button { width: 100%; }
  .home-footer { flex-direction: column; }
}

/* Unified MOXU navy/cyan/violet theme for verify, download, login and admin. */
body:not(.home-body) {
  --ink: #f2f6ff;
  --muted: #9daac3;
  --line: rgba(157, 181, 228, .16);
  --card: rgba(20, 29, 53, .76);
  --cyan: #60e6ff;
  --green: #59efbf;
  --orange: #b597ff;
  --red: #ff7290;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(33, 151, 243, .21), transparent 32rem),
    radial-gradient(circle at 90% 16%, rgba(126, 87, 255, .20), transparent 36rem),
    radial-gradient(circle at 50% 100%, rgba(33, 214, 203, .08), transparent 34rem),
    linear-gradient(145deg, #050a16 0%, #09132a 48%, #0a0b20 100%);
  background-attachment: fixed;
}
body:not(.home-body) .aurora {
  opacity: .62;
  background: linear-gradient(110deg, transparent 18%, rgba(86, 211, 255, .075) 42%, rgba(157, 108, 255, .10) 58%, transparent 82%);
}
body:not(.home-body) .topbar {
  color: var(--ink);
  border-bottom-color: rgba(255,255,255,.09);
  background: rgba(5, 10, 24, .72);
  box-shadow: 0 14px 42px rgba(0,0,0,.17);
  backdrop-filter: blur(22px) saturate(135%);
}
body:not(.home-body) .brand { color: #f5f8ff; }
body:not(.home-body) .brand-mark {
  background: linear-gradient(145deg, #62eaff, #6380ff 56%, #a577ff);
  box-shadow: 0 10px 28px rgba(86, 128, 255, .34), inset 0 1px rgba(255,255,255,.55);
}
body:not(.home-body) nav a { color: #bec9df; transition: color .2s ease, transform .2s ease; }
body:not(.home-body) nav a:hover { color: #fff; transform: translateY(-1px); }
body:not(.home-body) .panel,
body:not(.home-body) .login-card,
body:not(.home-body) .metric-card {
  border-color: rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.032));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 24px 70px rgba(0,0,0,.24);
  backdrop-filter: blur(24px) saturate(130%);
}
body:not(.home-body) h1 { color: #fff; text-shadow: 0 12px 42px rgba(74,128,255,.16); }
body:not(.home-body) h2 {
  color: transparent;
  background: linear-gradient(90deg, #65eaff, #8da4ff 54%, #bd91ff);
  -webkit-background-clip: text;
  background-clip: text;
}
body:not(.home-body) .eyebrow { color: #8ba5cf; }
body:not(.home-body) .muted,
body:not(.home-body) .hint { color: var(--muted); }
body:not(.home-body) label { color: #c5cee1; }
body:not(.home-body) input,
body:not(.home-body) select,
body:not(.home-body) textarea {
  color: #eef4ff;
  border-color: rgba(154,178,224,.19);
  background: rgba(5, 12, 29, .57);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
body:not(.home-body) input::placeholder,
body:not(.home-body) textarea::placeholder { color: #65738f; }
body:not(.home-body) input:focus,
body:not(.home-body) select:focus,
body:not(.home-body) textarea:focus {
  border-color: rgba(96,230,255,.65);
  box-shadow: 0 0 0 4px rgba(70,169,255,.13), 0 10px 26px rgba(0,0,0,.12);
}
body:not(.home-body) select option { color: #eef4ff; background: #0c1630; }
body:not(.home-body) button,
body:not(.home-body) .primary {
  color: #fff;
  background: linear-gradient(125deg, #36cde9, #5c79ff 58%, #9b63ff);
  box-shadow: 0 12px 30px rgba(76,112,255,.28), inset 0 1px rgba(255,255,255,.3);
}
body:not(.home-body) nav button,
body:not(.home-body) .actions button,
body:not(.home-body) .button {
  color: #bcefff;
  border: 1px solid rgba(103,211,255,.17);
  background: rgba(78,140,255,.11);
  box-shadow: none;
}
body:not(.home-body) button:hover,
body:not(.home-body) .button:hover { filter: brightness(1.09); }
body:not(.home-body) code { color: #9feeff; background: rgba(66,182,255,.13); }
body:not(.home-body) .table-wrap { border-color: rgba(153,178,225,.14); background: rgba(4,10,24,.29); }
body:not(.home-body) th,
body:not(.home-body) td { border-bottom-color: rgba(151,176,221,.11); }
body:not(.home-body) th { color: #c3cee3; background: rgba(13,23,46,.94); }
body:not(.home-body) td { color: #d7dfef; }
body:not(.home-body) tr:hover td { background: rgba(76,134,255,.055); }
body:not(.home-body) dt { color: #8f9db8; }
body:not(.home-body) dd { color: #edf3ff; }
body:not(.home-body) .result.ok { color: #65f1c5; background: rgba(55,216,161,.13); }
body:not(.home-body) .result.bad { color: #ff8aa1; background: rgba(255,91,124,.13); }
body:not(.home-body) .flash { color: #a7efff; background: rgba(62,175,255,.13); }
body:not(.home-body) .flash.error { color: #ff91a6; background: rgba(239,71,111,.14); }
body:not(.home-body) .empty { color: #73819b; }
body:not(.home-body) .bulk-renew-form {
  border-color: rgba(95,215,255,.18);
  background: rgba(57,127,231,.075);
}
body:not(.home-body) button.danger { color: #ff91a6; border-color: rgba(255,114,144,.17); background: rgba(239,71,111,.12); }

.public-tool-body .shell { width: min(1080px, calc(100% - 40px)); margin-top: clamp(48px, 8vh, 100px); }
.public-tool-body .panel { min-height: 330px; padding: clamp(28px, 4vw, 46px); }
.public-tool-body .hero-panel { max-width: 920px; margin-inline: auto; }
.public-tool-body .verify-layout { align-items: stretch; }
.public-tool-body .result-panel { position: relative; overflow: hidden; }
.public-tool-body .result-panel::after,
.login-body .login-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  right: -90px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,93,255,.24), transparent 70%);
  filter: blur(3px);
}
.login-body .login-card { position: relative; overflow: hidden; }

.dashboard-body .dashboard-tabs {
  border-color: rgba(255,255,255,.12);
  background: rgba(7,14,31,.88);
  box-shadow: 0 14px 38px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.10);
}
.dashboard-body .dashboard-tabs .dashboard-tab { color: #8f9db8; border-color: transparent; background: transparent; }
.dashboard-body .dashboard-tabs .dashboard-tab.active {
  color: #fff;
  background: linear-gradient(125deg, #30c5e2, #586fff 58%, #9163f2);
  box-shadow: 0 8px 22px rgba(74,105,255,.27), inset 0 1px rgba(255,255,255,.25);
}
.dashboard-body .app-badge.v7 { color: #6ff3c9; background: rgba(57,206,135,.12); border-color: rgba(57,206,135,.27); }
.dashboard-body .app-badge.v5 { color: #9bc2ff; background: rgba(64,133,255,.13); border-color: rgba(100,159,255,.27); }
.dashboard-body .app-badge.other { color: #c4a7ff; background: rgba(155,99,255,.12); border-color: rgba(176,132,255,.25); }
.dashboard-body .bulk-renew-form button.renew,
.dashboard-body .inline-edit button.renew { color: #68ecc4; background: rgba(53,211,143,.11); border-color: rgba(83,228,181,.16); }

@media (max-width: 900px) {
  body:not(.home-body) .topbar { background: rgba(5,10,24,.88); }
  .public-tool-body .shell { margin-top: 32px; }
  .public-tool-body .panel { min-height: auto; }
}

/* Compact responsive homepage: scale with viewport width and height. */
.home-body .topbar {
  padding-block: clamp(10px, 1.5vh, 15px);
}
.home-body .brand-mark {
  width: clamp(36px, 4.2vh, 42px);
  height: clamp(36px, 4.2vh, 42px);
  border-radius: 13px;
}
.home-body .shell {
  width: min(1180px, calc(100% - clamp(24px, 4vw, 48px)));
}
.home-hero {
  min-height: min(540px, calc(100svh - 150px));
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .82fr);
  gap: clamp(28px, 5vw, 58px);
  padding: clamp(34px, 5vh, 56px) 8px clamp(28px, 4.5vh, 48px);
}
.home-hero h1 {
  max-width: 670px;
  margin-bottom: clamp(18px, 2.5vh, 25px);
  font-size: clamp(42px, min(5.1vw, 7.4vh), 68px);
  line-height: 1.04;
}
.home-kicker {
  margin-bottom: clamp(12px, 1.8vh, 18px);
  font-size: clamp(10px, 1vw, 12px);
}
.home-lead {
  max-width: 610px;
  font-size: clamp(14px, 1.25vw, 16px);
  line-height: 1.78;
}
.home-actions { margin-top: clamp(22px, 3.2vh, 30px); }
.home-button { min-height: 48px; padding-inline: 21px; border-radius: 15px; }
.home-trust { margin-top: clamp(18px, 2.8vh, 25px); gap: 14px 22px; }
.engine-visual {
  min-height: clamp(320px, min(39vw, 48vh), 410px);
}
.engine-visual::before { inset: 14%; }
.engine-core {
  width: clamp(160px, min(17vw, 23vh), 190px);
  height: clamp(160px, min(17vw, 23vh), 190px);
}
.engine-core strong { font-size: clamp(52px, min(5.4vw, 8vh), 64px); }
.engine-core small { font-size: 9px; }
.halo-one {
  width: clamp(250px, min(28vw, 36vh), 310px);
  height: clamp(250px, min(28vw, 36vh), 310px);
}
.halo-two {
  width: clamp(315px, min(35vw, 43vh), 390px);
  height: clamp(215px, min(24vw, 30vh), 265px);
}
.engine-chip { min-width: 104px; padding: 11px 14px; border-radius: 15px; }
.engine-chip b { font-size: 14px; }
.engine-chip small { font-size: 8px; }
.chip-tcp { left: 2%; top: 24%; }
.chip-udp { right: 0; top: 30%; }
.chip-ai { right: 10%; bottom: 8%; }
.home-stats {
  margin-bottom: clamp(54px, 7vh, 76px);
  border-radius: 22px;
}
.home-stats article { padding: clamp(20px, 2.7vw, 27px) clamp(21px, 3vw, 30px); }
.home-stats strong { margin-right: 15px; font-size: clamp(27px, 2.8vw, 34px); }
.home-stats span { font-size: 14px; }
.home-stats small { font-size: 11px; }
.home-section { padding: 8px 0 clamp(62px, 8vh, 82px); }
.home-section-head { margin-bottom: 30px; }
.home-section h2,
.community-panel h2 { font-size: clamp(28px, 3.3vw, 42px); }
.feature-grid { gap: 14px; }
.feature-card { min-height: 265px; padding: 23px; border-radius: 21px; }
.feature-icon { width: 44px; height: 44px; margin-bottom: 22px; }
.feature-card h3 { margin-bottom: 10px; font-size: 18px; }
.feature-card p { font-size: 13px; line-height: 1.68; }
.feature-card small { left: 23px; bottom: 20px; }
.community-panel {
  margin-bottom: 50px;
  padding: clamp(29px, 4vw, 40px);
  border-radius: 24px;
}

@media (max-width: 1050px) and (min-width: 801px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(285px, .72fr);
    gap: 22px;
  }
  .home-hero h1 { font-size: clamp(40px, 5.8vw, 58px); }
  .engine-visual { min-height: 330px; }
  .engine-chip { transform: scale(.88); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .home-body .shell { width: min(100% - 24px, 680px); }
  .home-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 4px;
    padding-top: 42px;
  }
  .home-hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .engine-visual { min-height: 300px; margin-inline: -12px; transform: none; }
  .engine-core { width: 154px; height: 154px; }
  .halo-one { width: 245px; height: 245px; }
  .halo-two { width: 300px; height: 205px; }
  .engine-chip { transform: scale(.82); }
  .home-stats { grid-template-columns: 1fr; }
  .home-stats article + article::before { inset: 0 22px auto; width: auto; height: 1px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 240px; }
}

@media (max-height: 760px) and (min-width: 801px) {
  .home-hero { min-height: 470px; padding-block: 28px; }
  .home-hero h1 { font-size: clamp(40px, 5vw, 58px); }
  .home-lead { line-height: 1.62; }
  .home-actions { margin-top: 20px; }
  .home-trust { margin-top: 16px; }
  .engine-visual { min-height: 310px; }
}