/* EARTUNE HQ Acoustic V3.
 * Visual layer only: existing routes, forms, permissions, data and JS hooks remain unchanged.
 */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --hq-color-bg-canvas: #0b1020;
  --hq-color-bg-app: #101728;
  --hq-color-bg-sidebar: #0d1422;
  --hq-color-bg-card: #151e30;
  --hq-color-bg-card-subtle: #111a2a;
  --hq-color-bg-elevated: #1b263b;
  --hq-color-bg-control: rgba(244, 247, 251, 0.06);
  --hq-color-bg-control-hover: rgba(244, 247, 251, 0.1);
  --hq-color-bg-accent: #8b7cff;
  --hq-color-bg-brand: #5ba7ff;
  --hq-color-bg-success-soft: rgba(94, 214, 179, 0.12);
  --hq-color-bg-warning-soft: rgba(240, 184, 110, 0.12);
  --hq-color-bg-danger-soft: rgba(255, 125, 146, 0.12);
  --hq-color-text-primary: #f4f7fb;
  --hq-color-text-secondary: #a9b5c7;
  --hq-color-text-tertiary: #74829a;
  --hq-color-text-inverse: #07101f;
  --hq-color-text-accent: #b7acff;
  --hq-color-text-brand: #83c1ff;
  --hq-color-text-success: #63ddb8;
  --hq-color-text-warning: #f3c27c;
  --hq-color-text-danger: #ff8ca1;
  --hq-color-border-default: rgba(220, 228, 240, 0.09);
  --hq-color-border-strong: rgba(220, 228, 240, 0.17);
  --hq-color-border-focus: #9e90ff;
  --hq-color-border-brand: #5ba7ff;
  --hq-color-border-success: #5ed6b3;
  --hq-color-border-warning: #f0b86e;
  --hq-color-border-danger: #ff7d92;
  --hq-shadow-shell: 0 20px 56px rgba(3, 8, 20, 0.26);
  --hq-shadow-card: none;
  --ink: var(--hq-color-text-primary);
  --muted: var(--hq-color-text-secondary);
  --muted-2: var(--hq-color-text-tertiary);
  --canvas: var(--hq-color-bg-canvas);
  --surface: var(--hq-color-bg-card);
  --soft: var(--hq-color-bg-card-subtle);
  --line: var(--hq-color-border-default);
  --green: var(--hq-color-text-accent);
  --green-soft: rgba(139, 124, 255, 0.12);
  --accent: var(--hq-color-text-accent);
}

html[data-theme="light"] {
  color-scheme: light;
  --hq-color-bg-canvas: #e9edf6;
  --hq-color-bg-app: #f7f8fc;
  --hq-color-bg-sidebar: #f7f8fc;
  --hq-color-bg-card: #ffffff;
  --hq-color-bg-card-subtle: #f1f3f9;
  --hq-color-bg-elevated: #ffffff;
  --hq-color-bg-control: #eef1f8;
  --hq-color-bg-control-hover: #e7eaf4;
  --hq-color-bg-accent: #6f60e8;
  --hq-color-bg-brand: #397fd0;
  --hq-color-bg-success-soft: rgba(26, 139, 103, 0.1);
  --hq-color-bg-warning-soft: rgba(171, 105, 9, 0.1);
  --hq-color-bg-danger-soft: rgba(190, 49, 73, 0.09);
  --hq-color-text-primary: #172033;
  --hq-color-text-secondary: #536176;
  --hq-color-text-tertiary: #748098;
  --hq-color-text-inverse: #ffffff;
  --hq-color-text-accent: #5b4bd1;
  --hq-color-text-brand: #2f70ba;
  --hq-color-text-success: #157557;
  --hq-color-text-warning: #8d5804;
  --hq-color-text-danger: #ad2941;
  --hq-color-border-default: rgba(29, 42, 65, 0.09);
  --hq-color-border-strong: rgba(29, 42, 65, 0.17);
  --hq-color-border-focus: #6f60e8;
  --hq-color-border-brand: #397fd0;
  --hq-color-border-success: rgba(21, 117, 87, 0.46);
  --hq-color-border-warning: rgba(141, 88, 4, 0.46);
  --hq-color-border-danger: rgba(173, 41, 65, 0.44);
  --hq-shadow-shell: 0 20px 54px rgba(58, 70, 94, 0.14);
  --hq-shadow-card: 0 0 0 1px rgba(29, 42, 65, 0.04), 0 2px 8px rgba(58, 70, 94, 0.05);
  --ink: var(--hq-color-text-primary);
  --muted: var(--hq-color-text-secondary);
  --muted-2: var(--hq-color-text-tertiary);
  --canvas: var(--hq-color-bg-canvas);
  --surface: var(--hq-color-bg-card);
  --soft: var(--hq-color-bg-card-subtle);
  --line: var(--hq-color-border-default);
  --green: var(--hq-color-text-accent);
  --green-soft: rgba(111, 96, 232, 0.1);
  --accent: var(--hq-color-text-accent);
}

html,
html[data-theme="light"] {
  background: var(--hq-color-bg-app);
}

body.hq-body,
body.hq-login-web3-page {
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-app);
  font-family: "Noto Sans SC", "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.hq-body::before,
body.hq-login-web3-page::before,
.hq-web3-dashboard::before,
.hq-login-web3-page .hq-login-story::after {
  display: none;
}

body.hq-body :is(a, button, input, select, textarea):focus-visible,
body.hq-login-web3-page :is(a, button, input, select, textarea):focus-visible {
  outline-color: rgba(158, 144, 255, 0.86);
}

body.hq-body .hq-sidebar,
html[data-theme="light"] body.hq-body .hq-sidebar,
.hq-dashboard-page .hq-sidebar {
  width: 260px;
  padding: 24px 16px;
  border: 0;
  border-right: 1px solid var(--hq-color-border-default);
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-sidebar);
  box-shadow: none;
  backdrop-filter: none;
}

body.hq-body .brand-mark,
.hq-login-web3-page .brand-mark,
.hq-login-card-mark {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--hq-color-text-inverse);
  background: var(--hq-color-bg-accent);
  box-shadow: none;
}

body.hq-body .brand-mark i,
.hq-login-web3-page .brand-mark i,
.hq-login-card-mark i {
  display: none;
}

body.hq-body .brand-mark::after,
.hq-login-web3-page .brand-mark::after,
.hq-login-card-mark::after {
  content: "E";
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

body.hq-body .brand strong {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

body.hq-body .agent-card,
html[data-theme="light"] body.hq-body .agent-card,
.hq-dashboard-page .agent-card {
  margin: 16px 0;
  padding: 12px;
  border: 1px solid var(--hq-color-border-default);
  border-radius: 16px;
  background: var(--hq-color-bg-card-subtle);
  box-shadow: none;
}

body.hq-body .agent-level,
html[data-theme="light"] body.hq-body .agent-level,
.hq-dashboard-page .agent-level {
  color: var(--hq-color-text-accent);
  background: transparent;
}

body.hq-body .nav-section:has(a[aria-current="page"]) h2,
html[data-theme="light"] body.hq-body .nav-section:has(a[aria-current="page"]) h2,
.hq-dashboard-page .nav-section:has(a[aria-current="page"]) h2 {
  color: var(--hq-color-text-accent);
  background: transparent;
}

body.hq-body .hq-primary-nav a,
.hq-dashboard-page .hq-primary-nav a {
  min-height: 44px;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--hq-color-text-secondary);
  background: transparent;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

body.hq-body .hq-primary-nav a:hover,
.hq-dashboard-page .hq-primary-nav a:hover {
  color: var(--hq-color-text-primary);
  border-color: var(--hq-color-border-default);
  background: var(--hq-color-bg-control-hover);
  transform: none;
}

body.hq-body .hq-primary-nav a[aria-current="page"],
html[data-theme="light"] body.hq-body .hq-primary-nav a[aria-current="page"],
.hq-dashboard-page .hq-primary-nav a[aria-current="page"] {
  color: var(--hq-color-text-inverse);
  border-color: var(--hq-color-border-focus);
  background: var(--hq-color-bg-accent);
  box-shadow: none;
}

body.hq-body .hq-primary-nav a[aria-current="page"] .nav-dot,
html[data-theme="light"] body.hq-body .hq-primary-nav a[aria-current="page"] .nav-dot,
.hq-dashboard-page .hq-primary-nav a[aria-current="page"] .nav-dot {
  color: var(--hq-color-text-accent);
  background: var(--hq-color-bg-app);
}

body.hq-body .nav-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--hq-color-text-secondary);
  background: var(--hq-color-bg-control);
}

body.hq-body .main-content,
.hq-dashboard-page .main-content {
  margin-left: 260px;
  padding: 24px;
  color: var(--hq-color-text-primary);
}

body.hq-body .page-heading {
  min-height: 112px;
  margin-bottom: 20px;
  gap: 24px;
}

body.hq-body .page-heading h1 {
  margin: 8px 0;
  color: var(--hq-color-text-primary);
  font-size: clamp(28px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

body.hq-body .page-heading p:not(.eyebrow) {
  max-width: 760px;
  color: var(--hq-color-text-secondary);
  line-height: 1.6;
  text-wrap: pretty;
}

body.hq-body .eyebrow,
.hq-dashboard-page .eyebrow,
.hq-login-web3-page .eyebrow {
  color: var(--hq-color-text-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

body.hq-body .button,
.hq-login-web3-page .button {
  min-height: 44px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

body.hq-body .button:hover,
.hq-login-web3-page .button:hover {
  transform: none;
}

body.hq-body .button:active,
.hq-login-web3-page .button:active {
  transform: scale(0.97);
}

body.hq-body .button-primary,
.hq-login-web3-page .button-primary,
html[data-theme="light"] body.hq-body .button-primary {
  color: var(--hq-color-text-inverse);
  border-color: var(--hq-color-border-focus);
  background: var(--hq-color-bg-accent);
  box-shadow: none;
}

body.hq-body .button-primary:hover,
.hq-login-web3-page .button-primary {
  background: var(--hq-color-bg-accent);
}

body.hq-body .button-secondary,
.hq-login-web3-page .button-secondary {
  color: var(--hq-color-text-primary);
  border-color: var(--hq-color-border-default);
  background: var(--hq-color-bg-control);
}

body.hq-body :is(
  .panel,
  .form-panel,
  .empty-panel,
  .metric-card,
  .institution-card,
  .benefit-rule-card,
  .quota-summary-panel,
  .access-account-card,
  .access-share-card,
  .location-picker,
  .natural-upload-queue-panel,
  .copy-fields-panel
),
html[data-theme="light"] body.hq-body :is(
  .panel,
  .form-panel,
  .empty-panel,
  .metric-card,
  .institution-card,
  .benefit-rule-card,
  .quota-summary-panel,
  .access-account-card,
  .access-share-card,
  .location-picker,
  .natural-upload-queue-panel,
  .copy-fields-panel
) {
  border: 1px solid var(--hq-color-border-default);
  border-radius: 20px;
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-card);
  box-shadow: var(--hq-shadow-card);
  backdrop-filter: none;
}

body.hq-body .panel-head {
  padding-bottom: 12px;
  border-bottom: 0;
}

body.hq-body .table-wrap,
html[data-theme="light"] body.hq-body .table-wrap {
  border: 0;
  border-radius: 12px;
  background: transparent;
}

body.hq-body thead,
html[data-theme="light"] body.hq-body thead {
  background: var(--hq-color-bg-card-subtle);
}

body.hq-body th {
  color: var(--hq-color-text-secondary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

body.hq-body tbody tr,
body.hq-body tbody tr:nth-child(even),
html[data-theme="light"] body.hq-body tbody tr:nth-child(even) {
  background: var(--hq-color-bg-card);
}

body.hq-body tbody tr:nth-child(even) {
  background: var(--hq-color-bg-card-subtle);
}

body.hq-body tbody tr:hover,
html[data-theme="light"] body.hq-body tbody tr:hover {
  background: var(--hq-color-bg-control-hover);
}

body.hq-body :is(th, td) {
  border-color: var(--hq-color-border-default);
}

body.hq-body .mono,
body.hq-body :is(.checksum-value, .object-key, .bank-number, .copy-field code) {
  color: var(--hq-color-text-secondary);
  font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

body.hq-body :is(
  .filter-bar,
  .consultant-filter-grid,
  .order-filter-grid,
  .audio-filter-grid,
  .finance-filter-grid,
  .natural-filter-grid,
  .settlement-filter-grid,
  .coupon-filter-form
),
html[data-theme="light"] body.hq-body :is(
  .filter-bar,
  .consultant-filter-grid,
  .order-filter-grid,
  .audio-filter-grid,
  .finance-filter-grid,
  .natural-filter-grid,
  .settlement-filter-grid,
  .coupon-filter-form
) {
  padding: 20px;
  border: 1px solid var(--hq-color-border-default);
  border-radius: 16px;
  background: var(--hq-color-bg-card-subtle);
  box-shadow: none;
  backdrop-filter: none;
}

body.hq-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body.hq-body select,
body.hq-body textarea,
.hq-login-web3-page input {
  min-height: 44px;
  border-color: var(--hq-color-border-default);
  border-radius: 12px;
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-control);
  caret-color: var(--hq-color-text-accent);
}

body.hq-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):focus,
body.hq-body select:focus,
body.hq-body textarea:focus,
.hq-login-web3-page input:focus {
  border-color: var(--hq-color-border-focus);
  box-shadow: 0 0 0 3px rgba(139, 124, 255, 0.16);
}

body.hq-body .notice,
html[data-theme="light"] body.hq-body .notice {
  color: var(--hq-color-text-secondary);
  border-color: rgba(91, 167, 255, 0.46);
  background: rgba(91, 167, 255, 0.12);
}

body.hq-body .acoustic-audit-notice {
  margin-bottom: 20px;
}

body.hq-body .status-pill {
  min-width: 76px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.hq-body :is(.detail-list, .immutable-card) {
  border-color: var(--hq-color-border-default);
  border-radius: 12px;
  background: var(--hq-color-border-default);
}

body.hq-body :is(.detail-list div, .immutable-card div, .parameter-grid div) {
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-card-subtle);
}

body.hq-body .price-detail-list .detail-total {
  color: var(--hq-color-text-primary);
  background: rgba(91, 167, 255, 0.14);
}

body.hq-body .price-detail-list .detail-total :is(dt, dd, small) {
  color: var(--hq-color-text-primary);
}

body.hq-body .order-summary-grid article,
html[data-theme="light"] body.hq-body .order-summary-grid article {
  border: 1px solid var(--hq-color-border-default);
  border-radius: 16px;
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-card);
  box-shadow: none;
}

.hq-dashboard-page {
  --web3-bg: var(--hq-color-bg-app);
  --web3-card: var(--hq-color-bg-card);
  --web3-card-soft: var(--hq-color-bg-card-subtle);
  --web3-line: var(--hq-color-border-default);
  --web3-text: var(--hq-color-text-primary);
  --web3-muted: var(--hq-color-text-secondary);
  --web3-lime: var(--hq-color-text-accent);
  --web3-blue: var(--hq-color-bg-brand);
  --web3-violet: var(--hq-color-text-accent);
  color: var(--hq-color-text-primary);
  color-scheme: inherit;
  background: var(--hq-color-bg-app);
}

.hq-web3-dashboard {
  min-height: calc(100vh - 48px);
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hq-web3-header {
  min-height: 136px;
  margin-bottom: 16px;
}

.hq-web3-heading h1 {
  margin: 8px 0;
  color: var(--hq-color-text-primary);
  font-size: clamp(28px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.hq-web3-heading > p:not(.eyebrow) {
  color: var(--hq-color-text-secondary);
  font-size: 12px;
}

.hq-web3-hero-grid {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 20px;
}

.hq-web3-overview-card,
.hq-web3-revenue-card {
  min-height: 340px;
  padding: 24px;
  border: 1px solid var(--hq-color-border-default);
  border-radius: 16px;
  box-shadow: none;
}

.hq-web3-overview-card {
  background: var(--hq-color-bg-card);
}

.hq-web3-card-head h2,
.hq-web3-section-head h2 {
  color: var(--hq-color-text-primary);
  font-size: 20px;
  font-weight: 600;
}

.hq-web3-period {
  color: var(--hq-color-text-secondary);
  background: transparent;
}

.hq-web3-trend {
  height: 120px;
  margin: 12px 0;
  border: 0;
  border-radius: 12px;
  background: var(--hq-color-bg-card-subtle);
}

.hq-web3-trend img {
  height: 108px;
}

.hq-web3-metrics {
  gap: 0;
  border-radius: 12px;
  background: var(--hq-color-bg-card-subtle);
}

.hq-web3-metrics > div {
  padding: 12px;
  background: transparent;
}

.hq-web3-metrics strong,
.hq-web3-metrics > div:nth-child(1) strong,
.hq-web3-metrics > div:nth-child(2) strong,
.hq-web3-metrics > div:nth-child(3) strong {
  color: var(--hq-color-text-primary);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hq-web3-revenue-card {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  background: #5ba7ff;
}

.hq-web3-revenue-card .eyebrow,
.hq-web3-revenue-total span,
.hq-web3-revenue-total small {
  color: rgba(255, 255, 255, 0.78);
}

.hq-web3-live-chip {
  color: #ffffff;
  background: rgba(7, 16, 31, 0.18);
}

.hq-web3-live-chip i {
  background: #63ddb8;
  box-shadow: none;
}

.hq-web3-revenue-total {
  margin: 30px 0 24px;
}

.hq-web3-revenue-total strong {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hq-web3-revenue-facts div {
  border-color: rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(7, 16, 31, 0.12);
}

.hq-web3-revenue-orbit {
  display: none;
}

.hq-web3-tasks,
.hq-dashboard-page .monitoring-section,
.hq-dashboard-page .panel {
  margin: 16px 0 0;
  padding: 24px;
  border: 1px solid var(--hq-color-border-default);
  border-radius: 16px;
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-card);
  box-shadow: none;
}

.hq-dashboard-page .hq-alert-card,
.hq-dashboard-page .hq-alert-card:first-child,
.hq-dashboard-page .hq-alert-card:nth-child(2) {
  min-height: 112px;
  padding: 12px;
  border: 1px solid var(--hq-color-border-default);
  border-radius: 12px;
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-card-subtle);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.hq-dashboard-page .hq-alert-card:first-child {
  color: var(--hq-color-text-inverse);
  border-color: var(--hq-color-border-focus);
  background: var(--hq-color-bg-accent);
}

.hq-dashboard-page .hq-alert-card:nth-child(2) {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
  background: var(--hq-color-bg-brand);
}

.hq-dashboard-page .hq-alert-card:hover {
  border-color: var(--hq-color-border-strong);
  transform: none;
}

.hq-dashboard-page .hq-alert-card::after {
  display: none;
}

.hq-dashboard-page .monitor-card,
.hq-dashboard-page .monitor-card-server,
.hq-dashboard-page .monitor-card-oss {
  border-color: var(--hq-color-border-default);
  border-radius: 12px;
  background: var(--hq-color-bg-card-subtle);
}

.hq-dashboard-page .monitor-progress {
  background: var(--hq-color-bg-control);
}

.hq-dashboard-page .monitor-progress i,
.hq-dashboard-page .server-pulse i {
  background: var(--hq-color-bg-accent);
}

.hq-dashboard-page .panel-head {
  border-color: var(--hq-color-border-default);
}

body.hq-login-web3-page,
html[data-theme="light"] body.hq-login-web3-page {
  --login-shell: var(--hq-color-bg-app);
  --login-card: var(--hq-color-bg-elevated);
  --login-line: var(--hq-color-border-default);
  --login-text: var(--hq-color-text-primary);
  --login-muted: var(--hq-color-text-secondary);
  --login-lime: var(--hq-color-text-accent);
  --login-blue: var(--hq-color-bg-brand);
  min-height: 100vh;
  padding: 0;
  color: var(--hq-color-text-primary);
  color-scheme: inherit;
  background: var(--hq-color-bg-app);
}

.hq-login-web3-layout {
  width: 100%;
  min-height: 100vh;
  grid-template-columns: minmax(520px, 1.57fr) minmax(430px, 1fr);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--hq-color-bg-app);
  box-shadow: none;
}

.hq-login-web3-page .hq-login-story,
html[data-theme="light"] .hq-login-web3-page .hq-login-story {
  padding: 48px;
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-app);
}

.hq-login-copy {
  max-width: 736px;
  margin: 48px 0 24px;
}

.hq-login-web3-page .hq-login-story h1 {
  max-width: 736px;
  margin: 16px 0 20px;
  color: var(--hq-color-text-primary);
  font-size: clamp(38px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.025em;
}

.hq-login-web3-page .hq-login-copy > p:not(.eyebrow) {
  color: var(--hq-color-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.hq-login-signals span {
  border-color: var(--hq-color-border-default);
  color: var(--hq-color-text-secondary);
  background: var(--hq-color-bg-control);
}

.hq-login-signals span::before,
.hq-login-signals span:nth-child(2)::before,
.hq-login-signals span:nth-child(3)::before {
  background: var(--hq-color-bg-accent);
}

.hq-login-visual {
  max-width: 736px;
  height: 200px;
  padding: 20px 22px;
  border-color: var(--hq-color-border-default);
  border-radius: 16px;
  background: var(--hq-color-bg-card);
}

.hq-login-orbit {
  display: none;
}

.hq-login-panel,
html[data-theme="light"] .hq-login-panel {
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-sidebar);
}

.hq-login-panel::before {
  display: none;
}

.hq-login-web3-page .hq-login-card,
html[data-theme="light"] .hq-login-web3-page .hq-login-card {
  width: min(430px, calc(100% - 48px));
  padding: 20px;
  border: 1px solid var(--hq-color-border-strong);
  border-radius: 20px;
  color: var(--hq-color-text-primary);
  background: var(--hq-color-bg-elevated);
  box-shadow: none;
  backdrop-filter: none;
}

.hq-login-web3-page .hq-login-card h2 {
  color: var(--hq-color-text-primary);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.hq-login-web3-page .hq-login-card > .subtle,
.hq-login-web3-page .login-help,
.hq-login-security {
  color: var(--hq-color-text-secondary);
}

.hq-login-web3-page .button-large {
  min-height: 52px;
}

.hq-theme-control,
.hq-theme-control-floating,
html[data-theme="light"] .hq-theme-control-floating {
  border-color: var(--hq-color-border-default);
  color: var(--hq-color-text-secondary);
  background: var(--hq-color-bg-elevated);
  box-shadow: none;
  backdrop-filter: none;
}

.hq-theme-options {
  border-color: var(--hq-color-border-default);
  background: var(--hq-color-bg-control);
}

.hq-theme-options button[aria-pressed="true"] {
  color: var(--hq-color-text-inverse);
  background: var(--hq-color-bg-accent);
  box-shadow: none;
}

/* Keep the daylight option in the same Acoustic V3 system. The previous
 * daylight layer uses higher-specificity gradients, so these selectors
 * deliberately match that layer and reset only its visual treatment.
 */
html[data-theme="light"] body.hq-body.hq-dashboard-page,
html[data-theme="light"] body.hq-login-web3-page,
html[data-theme="light"] .hq-web3-dashboard,
html[data-theme="light"] .hq-login-web3-layout {
  background: var(--hq-color-bg-app);
  box-shadow: none;
  backdrop-filter: none;
}

html[data-theme="light"] .hq-web3-dashboard::after {
  display: none;
}

html[data-theme="light"] .hq-web3-header .button-primary,
html[data-theme="light"] .hq-login-web3-page .button-primary,
html[data-theme="light"] .hq-login-web3-page .button-primary:hover {
  background: var(--hq-color-bg-accent);
  box-shadow: none;
}

html[data-theme="light"] .hq-web3-overview-card,
html[data-theme="light"] .hq-web3-tasks,
html[data-theme="light"] .hq-dashboard-page :is(.monitoring-section, .panel),
html[data-theme="light"] .hq-dashboard-page :is(.monitor-card, .monitor-card-server, .monitor-card-oss),
html[data-theme="light"] .hq-login-web3-page .hq-login-card {
  border-color: var(--hq-color-border-default);
  background: var(--hq-color-bg-card);
  box-shadow: var(--hq-shadow-card);
  backdrop-filter: none;
}

html[data-theme="light"] .hq-web3-trend,
html[data-theme="light"] .hq-web3-metrics,
html[data-theme="light"] .hq-dashboard-page :is(.server-hero, .oss-detail-grid),
html[data-theme="light"] .hq-login-visual {
  border-color: var(--hq-color-border-default);
  background: var(--hq-color-bg-card-subtle);
  box-shadow: none;
}

html[data-theme="light"] .hq-web3-metrics > div,
html[data-theme="light"] .hq-dashboard-page .oss-detail-grid div {
  background: transparent;
}

html[data-theme="light"] .hq-web3-revenue-card {
  background: var(--hq-color-bg-brand);
  box-shadow: none;
}

html[data-theme="light"] .hq-dashboard-page .hq-alert-card,
html[data-theme="light"] .hq-dashboard-page .hq-alert-card:nth-child(3) {
  color: var(--hq-color-text-primary);
  border-color: var(--hq-color-border-default);
  background: var(--hq-color-bg-card-subtle);
  box-shadow: none;
}

html[data-theme="light"] .hq-dashboard-page .hq-alert-card:first-child {
  color: var(--hq-color-text-inverse);
  border-color: var(--hq-color-border-focus);
  background: var(--hq-color-bg-accent);
}

html[data-theme="light"] .hq-dashboard-page .hq-alert-card:nth-child(2) {
  color: #ffffff;
  border-color: var(--hq-color-border-brand);
  background: var(--hq-color-bg-brand);
}

html[data-theme="light"] .hq-dashboard-page .hq-alert-card:nth-child(3) :is(span, small) {
  color: var(--hq-color-text-secondary);
}

html[data-theme="light"] .hq-dashboard-page .hq-alert-card:nth-child(3) strong {
  color: var(--hq-color-text-primary);
}

html[data-theme="light"] .hq-dashboard-page :is(.server-pulse i, .monitor-progress i) {
  background: var(--hq-color-bg-accent);
}

html[data-theme="light"] .hq-login-web3-page .hq-login-story,
html[data-theme="light"] .hq-login-panel {
  background: var(--hq-color-bg-sidebar);
}

html[data-theme="light"] .hq-login-web3-page .brand-mark,
html[data-theme="light"] .hq-login-card-mark {
  color: var(--hq-color-text-inverse);
  background: var(--hq-color-bg-accent);
}

html[data-theme="light"] .hq-login-web3-page .form-stack input,
html[data-theme="light"] .hq-login-web3-page .form-stack input:focus {
  color: var(--hq-color-text-primary);
  border-color: var(--hq-color-border-default);
  background: var(--hq-color-bg-control);
  box-shadow: none;
}

@media (max-width: 1180px) {
  .hq-web3-hero-grid {
    grid-template-columns: 1fr;
  }

  .hq-web3-overview-card,
  .hq-web3-revenue-card {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  body.hq-body .hq-sidebar,
  html[data-theme="light"] body.hq-body .hq-sidebar,
  .hq-dashboard-page .hq-sidebar {
    width: min(86vw, 310px);
    box-shadow: var(--hq-shadow-shell);
  }

  body.hq-body .main-content,
  .hq-dashboard-page .main-content {
    margin-left: 0;
    padding: 78px 16px 40px;
  }

  body.hq-body .mobile-header,
  html[data-theme="light"] body.hq-body .mobile-header,
  html[data-theme="light"] .hq-dashboard-page .mobile-header {
    border-color: var(--hq-color-border-default);
    background: color-mix(in srgb, var(--hq-color-bg-app) 92%, transparent);
    backdrop-filter: blur(18px);
  }

  .hq-web3-header {
    min-height: 112px;
  }

  .hq-login-web3-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.hq-body .main-content,
  .hq-dashboard-page .main-content {
    padding-inline: 14px;
  }

  .hq-web3-header,
  .hq-web3-card-head,
  .hq-web3-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .hq-web3-metrics,
  .hq-web3-revenue-facts {
    grid-template-columns: 1fr;
  }

  .hq-web3-revenue-card {
    min-height: 360px;
  }

  .hq-login-web3-page .hq-login-story {
    padding: 28px 20px;
  }

  .hq-login-web3-page .hq-login-story h1 {
    font-size: 34px;
  }

  .hq-login-web3-page .hq-login-card,
  html[data-theme="light"] .hq-login-web3-page .hq-login-card {
    width: calc(100% - 28px);
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hq-body *,
  body.hq-login-web3-page * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}