:root {
  color-scheme: dark;

  --hp-navy-950: #080b0f;
  --hp-navy-900: #0b0f14;
  --hp-navy-850: #0e141b;
  --hp-navy-800: #111820;
  --hp-navy-760: #151d26;
  --hp-ink-100: #edf2f5;
  --hp-ink-200: #c5ced6;
  --hp-ink-300: #aeb9c3;
  --hp-muted-400: #8d99a6;
  --hp-muted-500: #687582;
  --hp-cyan-300: #48c7c2;
  --hp-cyan-500: #239b98;
  --hp-gold-300: #e3b45f;
  --hp-green-300: #68c991;
  --hp-rose-300: #e7748e;
  --hp-dark-text: #071111;

  --ink: var(--hp-ink-100);
  --muted: var(--hp-muted-400);
  --faint: var(--hp-muted-500);
  --bg: var(--hp-navy-900);
  --panel: #111820;
  --panel-strong: #151d26;
  --line: #27333f;
  --line-bright: #3f7978;
  --cyan: var(--hp-cyan-300);
  --cyan-deep: var(--hp-cyan-500);
  --gold: var(--hp-gold-300);
  --green: var(--hp-green-300);
  --rose: var(--hp-rose-300);

  --color-bg-page: var(--hp-navy-900);
  --color-bg-page-end: var(--hp-navy-950);
  --color-bg-surface: #111820;
  --color-bg-surface-strong: #151d26;
  --color-bg-surface-soft: #18212a;
  --color-text-primary: var(--hp-ink-100);
  --color-text-secondary: var(--hp-muted-400);
  --color-text-tertiary: var(--hp-muted-500);
  --color-border-subtle: #27333f;
  --color-border-active: #3f7978;
  --color-action-primary: var(--hp-cyan-300);
  --color-action-secondary: var(--hp-gold-300);
  --color-state-success: var(--hp-green-300);
  --color-state-warning: var(--hp-gold-300);
  --color-state-danger: var(--hp-rose-300);
  --color-state-info: var(--hp-cyan-300);

  --state-info-bg: rgba(102, 227, 255, 0.1);
  --state-info-border: rgba(102, 227, 255, 0.3);
  --state-success-bg: rgba(112, 240, 167, 0.12);
  --state-success-border: rgba(112, 240, 167, 0.3);
  --state-warning-bg: rgba(244, 201, 107, 0.12);
  --state-warning-border: rgba(244, 201, 107, 0.3);
  --state-danger-bg: rgba(255, 109, 143, 0.13);
  --state-danger-border: rgba(255, 109, 143, 0.3);

  --font-body: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font-display: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: Consolas, "Microsoft YaHei UI", monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-base: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 30px;
  --font-size-hero-min: 36px;
  --font-size-hero-max: 42px;
  --line-height-tight: 1.2;
  --line-height-body: 1.55;
  --line-height-relaxed: 1.75;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-12: 48px;
  --space-field-x: 15px;
  --space-card: 18px;
  --space-panel: 22px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-panel: 8px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-focus: 0 0 0 3px rgba(72, 199, 194, 0.18);
  --focus-ring: var(--shadow-focus);

  --container-max: 1220px;
  --container-gutter-desktop: 36px;
  --container-gutter-mobile: 24px;
  --control-height: 48px;
  --button-height: 46px;
  --button-height-compact: 38px;
  --bp-sm: 460px;
  --bp-md: 680px;
  --bp-lg: 980px;
  --bp-xl: 1220px;

  --motion-fast: 160ms ease;
  --motion-base: 180ms ease;
  --motion-reveal: 420ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--color-bg-page);
}

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  background: var(--color-bg-page);
}

.access-gate {
  display: grid;
  position: fixed;
  z-index: 1000;
  inset: 0;
  place-items: center;
  padding: 24px;
  background: var(--color-bg-page);
}

.access-gate__panel {
  display: grid;
  gap: var(--space-4);
  width: min(100%, 420px);
  padding: var(--space-8);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid var(--color-action-primary);
  border-radius: var(--radius-panel);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-panel);
}

.access-gate__panel h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.access-gate__panel p {
  margin: 0;
  color: var(--color-text-secondary);
}

.access-feedback {
  padding: 10px 12px;
  border: 1px solid var(--state-info-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  background: var(--state-info-bg);
}

.access-feedback--error {
  border-color: var(--state-danger-border);
  color: #ffd2db;
  background: var(--state-danger-bg);
}

.access-locked {
  overflow: hidden;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h2,
h3,
p {
  margin-top: 0;
}

h2 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

h3 {
  margin-bottom: 0;
  font-size: var(--font-size-xl);
}

.scene {
  display: none;
}

.app-shell {
  width: min(var(--container-max), calc(100% - var(--container-gutter-desktop)));
  margin: 0 auto;
  padding: var(--space-4) 0 var(--space-12);
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.brand-block {
  min-width: 0;
  max-width: 760px;
}

.eyebrow,
.section-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-action-primary);
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0;
}

.eyebrow span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-state-success);
}

.hero h1 {
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: var(--font-size-hero-max);
  line-height: 1.15;
}

.brand-block p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.hero-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.signal-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 196px;
  min-height: 44px;
  padding: 8px var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

.signal-card small {
  display: block;
  margin-top: 3px;
  color: var(--color-text-secondary);
}

.signal-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-state-success);
}

body[data-platform-state="loading"] .signal-dot {
  background: var(--color-state-warning);
}

body[data-platform-state="error"] .signal-dot {
  background: var(--color-state-danger);
}

.login-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 370px);
  align-items: start;
  gap: var(--space-5);
}

.login-stage.no-login-form {
  grid-template-columns: 1fr;
}

.login-copy {
  min-width: 0;
  padding: 0 var(--space-1) var(--space-4) 0;
}

.login-copy > p {
  max-width: 760px;
  color: var(--color-text-secondary);
}

.panel {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-panel);
  background: var(--color-bg-surface-strong);
  box-shadow: var(--shadow-panel);
}

label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--color-text-primary);
  background: #0d1319;
  padding: 0 var(--space-field-x);
  transition: border-color var(--motion-base), box-shadow var(--motion-base), background var(--motion-base);
}

input,
select {
  min-height: var(--control-height);
}

textarea {
  min-height: 96px;
  padding: 13px var(--space-field-x);
  line-height: var(--line-height-body);
  resize: vertical;
}

select {
  color-scheme: dark;
}

input::placeholder,
textarea::placeholder {
  color: rgba(147, 164, 184, 0.62);
}

.remember-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hp-ink-200);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.remember-row input {
  display: grid;
  place-items: center;
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--color-border-active);
  border-radius: 6px;
}

.remember-row input:checked {
  border-color: transparent;
  background: var(--color-action-primary);
}

.remember-row input:checked::after {
  content: "";
  width: 8px;
  height: 5px;
  border-bottom: 2px solid var(--hp-dark-text);
  border-left: 2px solid var(--hp-dark-text);
  transform: rotate(-45deg) translateY(-1px);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.primary,
.ghost {
  min-height: var(--button-height);
  padding: 0 var(--space-card);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-base), box-shadow var(--motion-base), background var(--motion-base), opacity var(--motion-base);
}

.primary {
  border: 0;
  color: var(--hp-dark-text);
  font-weight: 800;
  background: var(--color-action-primary);
}

.ghost {
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  background: var(--color-bg-surface-soft);
}

.compact-button {
  width: auto;
  min-height: var(--button-height-compact);
  padding: 0 var(--space-4);
}

.primary:hover:not(:disabled),
.ghost:hover:not(:disabled) {
  filter: brightness(1.08);
}

.ghost:hover:not(:disabled) {
  border-color: var(--color-border-active);
  background: rgba(102, 227, 255, 0.08);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 3px;
  border-color: var(--color-border-active);
  box-shadow: var(--focus-ring);
}

.message {
  margin: var(--space-card) 0;
  padding: 14px var(--space-4);
  border: 1px solid var(--state-warning-border);
  border-radius: var(--radius-lg);
  color: #ffe7ae;
  background: var(--state-warning-bg);
  overflow-wrap: anywhere;
}

.message.success,
.message--success {
  border-color: var(--state-success-border);
  color: #ccffdf;
  background: var(--state-success-bg);
}

.message.error,
.message--error {
  border-color: var(--state-danger-border);
  color: #ffd2db;
  background: var(--state-danger-bg);
}

.message.info,
.message--info {
  border-color: var(--state-info-border);
  color: #c9f4ff;
  background: var(--state-info-bg);
}

.message.partial,
.message--partial {
  border-color: var(--state-warning-border);
  color: #ffe7ae;
  background: var(--state-warning-bg);
}

.empty-state,
.state-card {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  min-height: 160px;
  padding: var(--space-6);
  border: 1px dashed rgba(102, 227, 255, 0.34);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
  text-align: center;
  background: rgba(255, 255, 255, 0.035);
  overflow-wrap: anywhere;
}

.empty-state strong,
.state-card strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-size: 22px;
}

.empty-state.compact,
.state-card.compact {
  min-height: 120px;
}

.empty-state.compact strong,
.state-card.compact strong {
  font-size: var(--font-size-lg);
}

.state-card--error {
  border-style: solid;
  border-color: var(--state-danger-border);
  color: #ffd2db;
  background: var(--state-danger-bg);
}

.state-card--warning {
  border-style: solid;
  border-color: var(--state-warning-border);
  color: #ffe7ae;
  background: var(--state-warning-bg);
}

.state-card--success {
  border-style: solid;
  border-color: var(--state-success-border);
  color: #ccffdf;
  background: var(--state-success-bg);
}

.meta-pill {
  max-width: 100%;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--hp-ink-300);
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.055);
}

.page-dock {
  display: flex;
  position: static;
  z-index: 20;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: auto;
  min-width: min(520px, calc(100% - 28px));
  max-width: min(560px, calc(100% - 28px));
  margin: 18px auto 0;
  padding: 8px 8px 8px var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: rgba(17, 24, 32, 0.96);
  box-shadow: var(--shadow-soft);
}

.dock-summary {
  min-width: 0;
  overflow: hidden;
  color: rgba(199, 213, 231, 0.82);
  font-size: var(--font-size-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .hero-actions {
    align-items: center;
  }

  .login-stage {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .app-shell {
    width: min(calc(100% - var(--container-gutter-mobile)), var(--container-max));
    padding-top: var(--space-3);
    padding-bottom: 96px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .signal-card {
    min-width: 0;
  }

  .page-dock {
    min-width: calc(100% - 24px);
    padding: 9px 10px;
    border-radius: var(--radius-lg);
  }

  .dock-summary {
    white-space: normal;
  }
}

@media (max-width: 360px) {
  .app-shell {
    width: calc(100% - 20px);
  }

  .login-copy,
  .panel {
    padding: var(--space-4);
  }

  .hero h1 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .orb,
  .scanline,
  .product {
    animation: none !important;
    transform: none !important;
  }
}