/* AI service theme. Load after styles.css, portal.css, and workspace.css. */
:root {
  color-scheme: dark;
  --bg: #10151D;
  --ink: #ECF1F8;
  --muted: #A2B1C4;
  --line: #303C4D;
  --white: #171F2B;
  --teal: #76D6C5;
  --blue: #91B6FF;
  --amber: #F3C580;
  --danger: #FFACB5;
  --soft-blue: #23314A;
  --soft-teal: #1B3535;
  --soft-amber: #382E22;
  --surface: #171F2B;
  --surface-raised: #1D2735;
  --surface-inset: #121923;
  --input-line: #62758D;
  --focus: #BED2FF;
  --radius: 8px;
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

body, .workspace { background: var(--bg); color: var(--ink); }
button, input, select, textarea { font-family: inherit; }
.num, code, pre, .brand small, .route-column-label span, .node-code,
.nav-button .count { font-family: Consolas, "Microsoft YaHei", monospace; }
.num { font-variant-numeric: tabular-nums; }
::selection { color: #10151D; background: #B1CAFB; }

/* Persistent navigation remains readable in all three portal roles. */
.sidebar {
  background: #121923;
  color: #B2C0D2;
  border-right: 1px solid var(--line);
}
.brand { color: var(--ink); }
.brand small, .nav-heading { color: var(--muted); }
.brand-mark { border-color: #506278; background: #1C2736; }
.brand-mark::before { background: var(--teal); }
.brand-mark::after { background: var(--blue); }
.nav-button { color: #B2C0D2; }
.nav-button:hover { color: var(--ink); background: #1D293A; }
.nav-button.active { color: #D7E4FF; background: #26354D; }
.nav-button.active::before { background: var(--teal); }
.nav-button .count { border-color: #677D99; color: #D0DCF0; }
.sidebar-bottom { border-top-color: var(--line); }
.sidebar-bottom .demo-status, .sidebar-site { color: #BCCADC; }
.dot.light { background: var(--teal); }
.reset { color: var(--muted); }
.reset:hover, .sidebar-site:hover, .website-link:hover { color: var(--focus); }
.sidebar .nav { scrollbar-color: #52647C #121923; }
.topbar { background: #141C27; border-bottom-color: var(--line); }
.breadcrumb { color: var(--muted); }
.breadcrumb strong, .mobile-brand { color: var(--ink); }
.website-link { color: var(--blue); }
.demo-label { color: var(--amber); background: #30291F; border-color: #705735; }
.avatar, .portal-large-avatar {
  color: #B8CFFF;
  background: var(--soft-blue);
  border-color: #516990;
}
.skip-link { color: #10151D; background: var(--focus); border-radius: 4px; }

/* Primary controls use ice blue with dark text; status controls keep text labels. */
.button {
  color: var(--ink);
  background: #1F2A3A;
  border-color: #566780;
}
.button:hover { color: var(--ink); background: #2A384C; border-color: #94A9C5; }
.button.primary { color: #111B2B; background: var(--blue); border-color: var(--blue); font-weight: 600; }
.button.primary:hover { color: #111B2B; background: #A9C6FF; border-color: #A9C6FF; }
.button.text { color: var(--blue); background: transparent; border-color: transparent; }
.button.text:hover { color: #BED2FF; background: var(--soft-blue); }
.button.warn { color: var(--amber); background: var(--soft-amber); border-color: #81613A; }
.button.warn:hover { color: #FFDAA2; background: #493824; border-color: #B18750; }
.button.danger { color: var(--danger); background: #33252E; border-color: #835766; }
.button.danger:hover { color: #FFD0D6; background: #452D36; border-color: #B37686; }
button:disabled, .button:disabled, .portal-protocol:disabled {
  color: #A2B1C4;
  background: #1A2230;
  border-color: #455166;
  opacity: 1;
  cursor: not-allowed;
}
.button:disabled .icon { color: #8E9EB4; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.filter { color: var(--muted); background: transparent; }
.filter:hover { color: var(--ink); background: #243044; }
.filter.active { color: #C0D5FF; background: var(--soft-blue); border-color: #5875A0; }
.field input, .field select, .field textarea, .search input,
.role-control select, textarea {
  color: var(--ink);
  background: var(--surface-inset);
  border-color: var(--input-line);
  caret-color: var(--blue);
}
.field input:hover, .field select:hover, .field textarea:hover,
.search input:hover, .role-control select:hover { border-color: #96ABC8; }
input::placeholder, textarea::placeholder { color: #9AAAC0; opacity: 1; }
input[readonly], textarea[readonly] {
  color: #C6D3E6;
  background: #202B3B;
  border-style: dashed;
}
input:disabled, select:disabled, textarea:disabled {
  color: #A2B1C4;
  background: #202735;
  border-color: #455166;
  opacity: 1;
}
option { color: var(--ink); background: var(--surface-inset); }
input[type="checkbox"], input[type="radio"], .portal-checkbox input { accent-color: var(--blue); }
.field label, .field .help, .search .icon { color: var(--muted); }

/* Cards, metrics, routing canvas, and all table states. */
.metric-grid, .panel, .resource-card, .portal-stat-row,
.portal-wallet-metrics, .portal-protocol { background: var(--surface); border-color: var(--line); }
.metric { border-color: var(--line); }
.metric-label, .metric-note, .sub, .muted { color: var(--muted); }
.metric-label .icon { color: #A3B8D5; }
.metric-note .positive { color: var(--teal); }
.panel-head, .toolbar, .table-footer { border-color: var(--line); }
.route-canvas { background: var(--surface-inset); }
.supply-node { background: var(--surface); border-color: var(--line); border-left-color: var(--teal); }
.supply-node.self { background: #1C2A40; border-left-color: var(--blue); }
.supply-node.off { background: #1B2330; border-left-color: #8390A3; }
.supply-node.off strong { color: #B2BED0; }
.supply-node .node-code { color: var(--teal); }
.consumer { border-left-color: var(--blue); }
.consumer .node-code { color: #BED2FF; }
.connector path { stroke: #67A89F; }
.connector.right path { stroke: #7A9BCC; }
.connector text { fill: var(--muted); }
.dispatcher { background: #202D43; border-color: #5576A6; }
.dispatcher .dispatch-icon { color: #101B2A; background: var(--blue); }
.dispatcher p { color: #B3C4DF; }
.dispatcher .dispatch-footer { color: #BED2FF; border-top-color: #496080; }
.legend-line.gray { background: #8390A3; }
.simulator { background: #192332; border-color: var(--line); }
.route-result { color: var(--ink); background: #193231; border-color: #35534D; }
.route-result p { color: #B6CFCB; }
.route-result .icon { color: var(--teal); }
.route-result.error { color: #FFDBA4; background: #352B20; border-color: #705735; }
.route-result.error p { color: #D9C5A6; }
.route-result.error .icon { color: var(--amber); }
th { color: #B4C3D7; background: #141C28; border-color: var(--line); }
td { border-color: #2A3545; }
tr:hover td { background: #1F2C3F; }
.side-progress { background: #303D52; }
.side-progress span { background: var(--blue); }
.side-note { color: #B4C3D7; background: #202B3B; }
.settlement-bar { background: #141C28; border-color: var(--line); }
.resource-card .resource-price { color: var(--ink); }
.empty .icon { color: #A2B1C4; }

/* Status remains encoded by the existing tag text and icon as well as color. */
.tag { color: #C1CDDC; background: #2A3545; }
.tag.good { color: #A0E7D9; background: #1C3837; }
.tag.blue { color: #BAD0FF; background: #283A59; }
.tag.warn { color: #FFD79D; background: #423321; }
.tag.danger { color: #FFC0C8; background: #442C36; }
.notice { color: #BDD0ED; background: #202E44; border-color: #465F83; }
.notice.warn { color: #FFD79D; background: #342B21; border-color: #745B38; }
.error-text { color: var(--danger); }
.portal-reason { color: var(--muted); }

/* Customer keys, protocol examples, wallet, recharge, and administration pages. */
.portal-key-card, .portal-card-actions, .portal-key-meta,
.portal-form-divider, .portal-form-actions, .portal-recharge-row,
.portal-customer-metrics, .portal-channel-meta { border-color: var(--line); }
.portal-protocol:hover { background: #1F2A3B; border-color: #7E97BC; }
.portal-protocol.selected { color: var(--ink); background: #202E44; border-color: var(--blue); }
.portal-protocol strong { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
.portal-protocol code, .portal-http-method { color: var(--blue); }
.portal-code { color: #D1E0F7; background: #0D141F; border-bottom: 1px solid var(--line); }
.portal-code pre, .portal-code code { font-family: Consolas, "Microsoft YaHei", monospace; }
.portal-connection-list > div { border-color: var(--line); }
.portal-connection-list code { color: #C7D8F1; }
.portal-wallet-balance { color: var(--ink); background: #1D2B40; border-color: #4A658D; }
.portal-wallet-balance > span, .portal-wallet-balance p { color: #B8C9E2; }
.portal-wallet-balance > div { color: #B8C9E2; border-color: #455D7F; }
.portal-payment-icon { color: #BDD3FF; background: #283A59; }
.portal-profile-identity > .num, .portal-customer-email { color: var(--muted); }
.portal-endpoint-list > div { border-color: var(--line); }

/* Overlays use raised surfaces rather than light backgrounds or color inversion. */
dialog { color: var(--ink); background: var(--surface-raised); border-color: #566780; box-shadow: 0 24px 80px #00000066; }
dialog::backdrop { background: #080C14B3; }
.modal-head { border-color: #3D4C62; }
.modal-body p { color: #B7C4D6; }
.modal-actions { background: #172131; border-color: #3D4C62; }
.confirm-detail { color: var(--ink); background: #111B29; border: 1px solid #35465E; }
.close { color: #B7C4D6; border-radius: 4px; }
.close:hover { color: var(--ink); background: #314056; }
.toast { color: #DDF3EB; background: #1D3736; border-color: #65958A; box-shadow: 0 8px 26px #0000004D; }

@media (max-width: 700px) {
  .sidebar { background: #141C27; color: var(--ink); border-right: 0; border-bottom-color: var(--line); }
  .nav-button:hover { color: var(--ink); background: #243247; }
  .nav-button.active { color: #C6D9FF; background: #283A59; }
  .mobile-brand .brand-mark { border-color: #657E9F; }
  .connector::after { background: #67A89F; }
  .connector::before { border-right-color: #67A89F; border-bottom-color: #67A89F; }
  .field input, .field select, .field textarea, .search input { min-height: 44px; }
  .simulator .button, .portal-payment-option > .button,
  .portal-modal-actions .button, .modal-actions .button { min-height: 44px; }
  .portal-filter-customer select { min-height: 44px; }
}

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