:root {
  color-scheme: dark;
  --bg: #090d15;
  --panel: #151b27;
  --line: rgba(137, 158, 194, .24);
  --muted: #a6afbf;
  --blue: #4385ff;
  --blue-bright: #69a1ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: #f5f7fb; background: var(--bg); }
a { color: inherit; text-decoration: none; }
.brand-landing { min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 75% 65%, rgba(35,92,203,.12), transparent 32%), var(--bg); }
.dark-header { width: min(1380px, calc(100% - 48px)); height: 66px; margin: 0 auto; padding: 0 15px 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 24px 24px; background: rgba(29,36,50,.78); backdrop-filter: blur(16px); position: relative; z-index: 10; }
.dark-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .02em; }
.qx-mark { color: var(--blue-bright); font-size: 17px; font-weight: 950; letter-spacing: -.08em; }
.dark-header nav { display: flex; gap: 34px; color: #c1c8d4; font-size: 13px; font-weight: 650; }
.dark-header nav a:hover { color: white; }
.outline-action { justify-self: end; padding: 9px 18px; border-radius: 999px; background: var(--blue); color: white; font-size: 13px; font-weight: 800; }

.deep-hero { width: min(1280px, calc(100% - 48px)); min-height: calc(100vh - 66px); margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; position: relative; }
.deep-copy { padding: 72px 0 95px; position: relative; z-index: 3; }
.deep-eyebrow { margin: 0 0 22px; color: var(--blue-bright); font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.deep-copy h1 { margin: 0; font-size: clamp(48px, 5.3vw, 80px); line-height: 1.08; letter-spacing: -.055em; font-weight: 900; }
.deep-intro { max-width: 660px; margin: 27px 0 32px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.deep-actions { display: flex; gap: 13px; }
.deep-actions a { display: inline-flex; align-items: center; gap: 13px; padding: 15px 24px; border-radius: 999px; background: var(--blue); font-weight: 800; font-size: 14px; }
.deep-actions .ghost { background: transparent; border: 1px solid var(--line); color: #dce3ee; }
.metrics { margin-top: 45px; display: flex; gap: 27px; color: #8f9aad; font-size: 11px; }
.metrics span { display: grid; gap: 4px; }.metrics strong { color: #e7ecf5; font-size: 16px; }

.globe-scene { min-height: 690px; position: relative; }
.globe { position: absolute; width: 650px; aspect-ratio: 1; left: 2%; top: 18%; border-radius: 50%; border: 1px solid rgba(65,133,255,.8); background: radial-gradient(circle at 40% 35%, rgba(43,104,230,.26), transparent 22%), radial-gradient(circle at 50% 90%, rgba(38,112,255,.14), rgba(4,9,17,.4) 65%), #070b12; box-shadow: inset -45px -25px 80px #02040a, 0 0 48px rgba(51,119,255,.26), 0 0 0 1px rgba(51,119,255,.15); overflow: hidden; }
.globe::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-image: radial-gradient(circle, #4285ff 1.2px, transparent 1.5px); background-size: 13px 13px; transform: perspective(620px) rotateX(63deg) rotateZ(-8deg) scale(1.15); opacity: .78; mask-image: radial-gradient(circle at center, black, transparent 72%); }
.globe::after { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(75,139,255,.18); border-radius: 50%; box-shadow: inset 0 0 70px rgba(22,88,225,.18); }
.float-card { position: absolute; z-index: 3; width: 220px; padding: 20px; border: 1px solid var(--line); border-radius: 19px; background: rgba(15,21,32,.86); box-shadow: 0 18px 40px rgba(0,0,0,.32); backdrop-filter: blur(12px); }
.float-card span { color: #9ca8bb; font-size: 10px; }.float-card h2 { margin: 14px 0 7px; font-size: 16px; }.float-card p { margin: 0; color: #8e99aa; font-size: 12px; line-height: 1.65; }
.card-agent { left: 5%; top: 25%; transform: rotate(-2deg); }.card-code { right: -8%; top: 55%; transform: rotate(2deg); }
.float-chip { position: absolute; z-index: 4; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(13,19,29,.9); color: #a6b2c5; font-size: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.chip-one { left: 6%; top: 64%; transform: rotate(-4deg); }.chip-two { right: 9%; top: 38%; transform: rotate(4deg); }

/* Related application pages. */
body.brand-related { background: var(--bg) !important; color: #edf2fa !important; }
body.brand-auth { background: radial-gradient(circle at 72% 50%, rgba(44,105,225,.22), transparent 28%), radial-gradient(circle at 22% 35%, rgba(36,93,198,.12), transparent 26%), #090d15 !important; }
body.brand-auth::before { content: ""; position: fixed; inset: 0; opacity: .24; background-image: radial-gradient(#4385ff 1px, transparent 1.2px); background-size: 20px 20px; mask-image: radial-gradient(circle at 70% 50%, black, transparent 48%); pointer-events: none; }
body.brand-auth #root { position: relative; z-index: 2; }
body.brand-auth #root form,
body.brand-auth #root [class*="card" i] { color: #edf2fa !important; background: rgba(18,25,38,.92) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: 0 32px 80px rgba(0,0,0,.42) !important; backdrop-filter: blur(18px); }
body.brand-auth #root input { color: #f3f6fb !important; background: rgba(7,12,20,.8) !important; border-color: var(--line) !important; border-radius: 10px !important; }
body.brand-auth #root button[type="submit"] { background: var(--blue) !important; border-color: var(--blue) !important; border-radius: 10px !important; }
#domain-brand-panel { display: none; }
body.brand-auth #domain-brand-panel { display: grid; position: fixed; z-index: 5; left: 26px; top: 22px; color: white; }
#domain-brand-panel .brand-symbol { color: var(--blue-bright); font-weight: 950; font-size: 18px; letter-spacing: -.04em; }
#domain-brand-panel strong { font-size: 12px; color: #a7b2c3; } #domain-brand-panel small { display: none; }

@media (max-width: 900px) { .dark-header { grid-template-columns: 1fr auto; }.dark-header nav { display: none; }.deep-hero { grid-template-columns: 1fr; }.globe-scene { min-height: 480px; }.globe { width: min(600px, 95vw); }.deep-copy { padding-bottom: 0; }.card-code { right: 0; } }
@media (max-width: 560px) { .metrics { gap: 13px; }.deep-actions { flex-wrap: wrap; }.float-card { width: 180px; }.card-agent { left: 0; }.globe-scene { min-height: 420px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Application surfaces: mirror the deep-blue infrastructure language of the
   landing page while keeping the existing Vue/Tailwind layout and controls. */
body.brand-related:not(.brand-landing) {
  color-scheme: dark;
  --bg: #090d15;
  --panel: #111a2a;
  --line: rgba(137, 158, 194, .23);
  --muted: #a6b2c5;
  background:
    radial-gradient(circle at 78% 4%, rgba(67, 133, 255, .16), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(34, 84, 182, .12), transparent 32%),
    #090d15 !important;
}
body.brand-related:not(.brand-landing)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .13;
  background-image:
    linear-gradient(rgba(104, 157, 255, .2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 157, 255, .2) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 70% 30%, black, transparent 78%);
}
body.brand-related:not(.brand-landing) #app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  color: #edf3ff !important;
}
body.brand-related:not(.brand-landing) #app [class*="bg-gray-50"],
body.brand-related:not(.brand-landing) #app [class*="bg-white"],
body.brand-related:not(.brand-landing) #app [class*="bg-dark-950"],
body.brand-related:not(.brand-landing) #app [class*="bg-dark-900"],
body.brand-related:not(.brand-landing) #app [class*="bg-dark-800"],
body.brand-related:not(.brand-landing) #app [class*="bg-dark-700"] {
  background-color: rgba(15, 23, 37, .95) !important;
  color: #edf3ff !important;
}
body.brand-related:not(.brand-landing) #app [class*="text-gray-900"],
body.brand-related:not(.brand-landing) #app [class*="text-gray-800"],
body.brand-related:not(.brand-landing) #app [class*="text-gray-700"],
body.brand-related:not(.brand-landing) #app [class*="text-gray-600"],
body.brand-related:not(.brand-landing) #app [class*="text-gray-500"] { color: #aeb9cc !important; }
body.brand-related:not(.brand-landing) #app [class*="text-gray-900"],
body.brand-related:not(.brand-landing) #app [class*="text-gray-800"] { color: #f0f4fb !important; }
body.brand-related:not(.brand-landing) #app [class*="text-dark-400"],
body.brand-related:not(.brand-landing) #app [class*="text-dark-500"] { color: #8795ac !important; }
body.brand-related:not(.brand-landing) #app [class*="border-gray"],
body.brand-related:not(.brand-landing) #app [class*="border-dark"] { border-color: rgba(137, 158, 194, .22) !important; }
body.brand-related:not(.brand-landing) #app aside {
  background: rgba(8, 14, 24, .97) !important;
  border-color: rgba(137, 158, 194, .2) !important;
}
body.brand-related:not(.brand-landing) #app input,
body.brand-related:not(.brand-landing) #app textarea,
body.brand-related:not(.brand-landing) #app select {
  color: #f4f7ff !important;
  background: rgba(7, 13, 23, .84) !important;
  border-color: rgba(137, 158, 194, .28) !important;
}
body.brand-related:not(.brand-landing) #app input::placeholder,
body.brand-related:not(.brand-landing) #app textarea::placeholder { color: #71819c !important; }
body.brand-related:not(.brand-landing) #app .btn,
body.brand-related:not(.brand-landing) #app button {
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.brand-related:not(.brand-landing) #app button:hover,
body.brand-related:not(.brand-landing) #app .btn:hover { transform: translateY(-1px); }
body.brand-related:not(.brand-landing) #app .btn-primary,
body.brand-related:not(.brand-landing) #app button[class*="bg-primary"] {
  color: #fff !important;
  border-color: #4385ff !important;
  background: linear-gradient(135deg, #4385ff, #69a1ff) !important;
  box-shadow: 0 10px 24px rgba(67, 133, 255, .25) !important;
}

/* Purchase combines balance recharge and subscription plans. Use a clear
   two-column rhythm and make payment actions easy to scan. */
body[data-brand-page="purchase"] #app main { max-width: 1180px; margin: 0 auto; }
body[data-brand-page="purchase"] #app main::before {
  content: "QX PURCHASE  /  MODEL INFRASTRUCTURE";
  display: block;
  margin: 4px 0 18px;
  color: #74a7ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .2em;
}
body[data-brand-page="purchase"] #app main [class*="rounded-xl"],
body[data-brand-page="purchase"] #app main [class*="rounded-2xl"],
body[data-brand-page="purchase"] #app main [class*="rounded-lg"] {
  border-color: rgba(137, 158, 194, .23) !important;
  border-radius: 15px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22) !important;
}
body[data-brand-page="purchase"] #app main [class*="overflow-hidden"] {
  background: linear-gradient(145deg, rgba(22, 34, 54, .96), rgba(12, 20, 33, .96)) !important;
}
body[data-brand-page="purchase"] #app main [class*="bg-gray-100"],
body[data-brand-page="purchase"] #app main [class*="bg-gray-200"],
body[data-brand-page="purchase"] #app main [class*="bg-dark-600"] { background: rgba(92, 116, 153, .2) !important; }
body[data-brand-page="purchase"] #app main [class*="grid-cols-2"] > *,
body[data-brand-page="purchase"] #app main [class*="grid-cols-3"] > * { min-width: 0; }
body[data-brand-page="purchase"] #app main [class*="text-3xl"] {
  color: #f2f6ff !important;
  letter-spacing: -.035em;
}
body[data-brand-page="purchase"] #app main [class*="text-primary"],
body[data-brand-page="purchase"] #app main [class*="text-blue"] { color: #77a9ff !important; }
body[data-brand-page="purchase"] #app main [class*="bg-primary"],
body[data-brand-page="purchase"] #app main [class*="bg-blue"] { background-color: #4385ff !important; }
body[data-brand-page="purchase"] #app main [class*="border-t"] { border-color: rgba(137, 158, 194, .23) !important; }
body[data-brand-page="purchase"] #app main [class*="space-y-4"] > button,
body[data-brand-page="purchase"] #app main button.btn { min-height: 46px; border-radius: 11px !important; }
body[data-brand-page="purchase"] #app main [class*="divide-y"] > * { border-color: rgba(137, 158, 194, .18) !important; }
body[data-brand-page="purchase"] #app main [class*="bg-emerald"],
body[data-brand-page="purchase"] #app main [class*="bg-green"] { background-color: rgba(52, 184, 146, .17) !important; }
body[data-brand-page="purchase"] #app main [class*="text-emerald"],
body[data-brand-page="purchase"] #app main [class*="text-green"] { color: #6fe0bd !important; }

@media (max-width: 760px) {
  body[data-brand-page="purchase"] #app main { padding: 16px !important; }
  body[data-brand-page="purchase"] #app main::before { margin-top: 8px; }
}

/* The auth shell ships with a light glass card and decorative teal orbs. The
   QX landing page uses a restrained dark grid, so keep the entry surface in
   that same visual system before the user reaches purchase. */
body.brand-auth #app > .relative.flex.min-h-screen {
  background: #090d15 !important;
}
body.brand-auth #app > .relative.flex.min-h-screen > .absolute.inset-0.bg-gradient-to-br {
  background:
    radial-gradient(circle at 78% 18%, rgba(67, 133, 255, .18), transparent 32%),
    linear-gradient(145deg, #090d15, #0d1625 62%, #09101c) !important;
}
body.brand-auth #app > .relative.flex.min-h-screen .blur-3xl { display: none !important; }
body.brand-auth #app > .relative.flex.min-h-screen .card-glass {
  background: linear-gradient(145deg, rgba(22, 34, 54, .96), rgba(12, 20, 33, .96)) !important;
  border: 1px solid rgba(137, 158, 194, .25) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .46), inset 0 1px rgba(255,255,255,.04) !important;
}
body.brand-auth #app > .relative.flex.min-h-screen .card-glass input {
  background: rgba(7, 13, 23, .84) !important;
  border-color: rgba(137, 158, 194, .28) !important;
}