/* Shared visual foundation for every service page and viewport.
   Layout, responsive grids and application behavior stay in their own files. */
body.service-interface {
  --service-bg: #0d222d;
  --service-panel: #112b37;
  --service-rule: #284652;
  --service-text: #eef2f4;
  --service-muted: #b2c6d0;
  --service-positive: #b6ce82;
  --service-negative: #e57b68;
  --service-warning: #c8a56d;
  --text: var(--service-text);
  --muted: var(--service-muted);
  --positive: var(--service-positive);
  --negative: var(--service-negative);
  --success: var(--service-positive);
  --warning: var(--service-warning);
  --feed-positive: var(--service-positive);
  --feed-negative: var(--service-negative);
  --feed-positive-bg: transparent;
  --feed-negative-bg: transparent;
  --feed-positive-border: var(--service-rule);
  --feed-negative-border: var(--service-rule);
  --surface: var(--service-bg);
  --panel-solid: var(--service-bg);
  --panel-top: var(--service-bg);
  --panel-mid: var(--service-panel);
  --border: var(--service-rule);
  --line-soft: var(--service-rule);
  --line-mid: var(--service-rule);
  background: var(--service-bg); color: var(--service-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}
body.service-interface.theme-light {
  --service-bg: #f1f2ed;
  --service-panel: #e5e9e4;
  --service-rule: #cbd2ce;
  --service-text: #263133;
  --service-muted: #586c70;
  --service-positive: #486b37;
  --service-negative: #a74943;
  --service-warning: #856333;
  color-scheme: light;
}
body.service-interface ::selection { background: var(--service-rule); color: var(--service-text); }
body.service-interface :is(input, textarea) { caret-color: var(--service-text); }
body.service-interface :is(input, textarea)::placeholder { color: var(--service-muted); opacity: 1; }
body.service-interface :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--service-positive); outline-offset: 3px;
}
body.service-interface .card {
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; backdrop-filter: none;
}
body.service-interface :is(.primary-action, .ghost-action, .profile-session-action) {
  background: transparent; border: 1px solid var(--service-rule); border-radius: 5px;
  color: var(--service-text); box-shadow: none;
  font-family: inherit; font-size: 13px; font-weight: 500;
}
body.service-interface :is(.primary-action, .ghost-action, .profile-session-action):hover {
  background: transparent; border-color: var(--service-muted); text-decoration: none;
}
body.service-interface :is(.primary-action, .ghost-action):disabled { opacity: .5; cursor: not-allowed; }
body.service-interface .danger-action { color: var(--service-negative); }
body.service-interface :is(.login-field, .admin-users-filters label) {
  color: var(--service-muted); font-size: 12px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}
body.service-interface :is(.login-field input, .admin-users-filters input, .admin-users-filters select,
  .admin-user-actions input, .route-setting-row input) {
  background: transparent; color: var(--service-text); border: 0;
  border-bottom: 1px solid var(--service-rule); border-radius: 0; box-shadow: none;
  font-family: inherit; font-size: 13px; font-weight: 400;
}
body.service-interface :is(.login-field input, .pair-list-input):focus {
  border-color: var(--service-positive); box-shadow: none;
}
body.service-interface select option { background: var(--service-bg); color: var(--service-text); }
body.service-interface .pair-list-input {
  background: transparent; color: var(--service-text);
  border: 1px solid var(--service-rule); border-radius: 4px; box-shadow: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body.service-interface :is(.login-brand h1, .settings-title-row h1, .settings-card > h1) {
  color: var(--service-text); font-family: inherit; font-size: 24px;
  font-weight: 600; line-height: 1.25; letter-spacing: -.02em;
}
body.service-interface .auth-modal-backdrop { background: rgba(5, 16, 23, .76); backdrop-filter: none; }
body.service-interface.theme-light .auth-modal-backdrop { background: rgba(38, 49, 51, .32); }
body.service-interface .card.auth-modal-card {
  background: var(--service-bg); border: 1px solid var(--service-rule);
  border-radius: 8px; box-shadow: none; backdrop-filter: none;
}
body.service-interface .auth-modal-close {
  color: var(--service-muted); background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
body.service-interface .auth-modal-close:hover { color: var(--service-text); background: transparent; }
body.service-interface :is(.profile-section, .settings-section, .setting-block, .pair-list-card,
  .profile-history-block, .profile-history-row, .route-toggle-row, .route-setting-row) {
  background: transparent; border: 0; border-bottom: 1px solid var(--service-rule);
  border-radius: 0; box-shadow: none;
}
body.service-interface :is(.setting-label, .profile-section h2, .profile-history-summary h3) {
  font-family: inherit; color: var(--service-text); font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
body.service-interface :is(.pair-list-help, .payment-copy, .profile-history-empty) {
  color: var(--service-muted); font-size: 12px; line-height: 1.45;
}
body.service-interface :is(.profile-history-status, .profile-history-badge, .admin-subscription-chip,
  .system-count-chip, .system-freshness-chip, .pill) {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
body.service-interface :is(.login-error, .payment-message, .profile-message) {
  background: transparent; border: 0; border-left: 1px solid var(--service-rule);
  border-radius: 0; padding: 8px 12px; font-size: 13px; font-weight: 400; line-height: 1.45;
}
body.service-interface :is(.login-error, .profile-message-error, .payment-message-invalid,
  .payment-message-used, .payment-message-login_required) {
  color: var(--service-negative); border-color: var(--service-negative);
}
body.service-interface :is(.payment-message-success, .profile-message-success) {
  color: var(--service-positive); border-color: var(--service-positive);
}
body.service-interface .payment-message-admin { color: var(--service-warning); border-color: var(--service-warning); }
body.service-interface :is(.system-freshness-fresh, .profile-history-status-paid, .profile-history-status-active) {
  color: var(--service-positive);
}
body.service-interface :is(.system-freshness-stale, .profile-history-status-pending) { color: var(--service-warning); }
body.service-interface :is(.system-freshness-dead, .profile-history-status-failed,
  .profile-history-status-revoked, .profile-history-status-expired) { color: var(--service-negative); }
body.service-interface :is(.profile-history-shell-icon, .profile-history-empty) {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
body.service-interface :is(.profile-subscription-row strong, .profile-history-row strong,
  .admin-payment-row, .system-table td, .system-runtime-chip strong) {
  font-variant-numeric: tabular-nums lining-nums;
}
body.service-interface .checkbox-shell { width: 32px; height: 18px; }
body.service-interface .switch-ui {
  width: 32px; height: 18px; box-sizing: border-box;
  background: transparent; border: 1px solid var(--service-rule); box-shadow: none;
}
body.service-interface .switch-ui::after {
  width: 12px; height: 12px; top: 2px; left: 2px; background: var(--service-muted); box-shadow: none;
}
body.service-interface .checkbox-shell input[type="checkbox"]:checked + .switch-ui {
  background: transparent; border-color: var(--service-rule); box-shadow: none;
}
body.service-interface .checkbox-shell input[type="checkbox"]:checked + .switch-ui::after {
  background: var(--service-positive); transform: translateX(14px);
}

/* No gradients in diagnostics, history or overview on narrow screens either. */
body.service-interface :is(.metric-card, .system-runtime-panel, .system-runtime-chip,
  .system-table-card, .service-status-card, .system-event-row, .admin-user-row, .admin-payment-row) {
  background: transparent; border: 0; border-bottom: 1px solid var(--service-rule);
  border-radius: 0; box-shadow: none;
}
body.service-interface .system-table .system-table-row { background: transparent; }
body.service-interface .system-table :is(th, td) { border-color: var(--service-rule); }
body.service-interface .system-table th {
  background: transparent; color: var(--service-muted); font-weight: 500; text-transform: none; letter-spacing: 0;
}
body.service-interface .system-table td { color: var(--service-text); }
body.service-interface :is(.system-event-meta span, .system-event-empty, .system-retry-link, .service-links a) {
  background: transparent; border: 0; border-radius: 0; color: var(--service-muted);
}
body.service-interface .admin-foldout-summary { background: transparent; border-bottom: 1px solid var(--service-rule); }
body.service-interface :is(.admin-users-head, .admin-payments-head) {
  color: var(--service-muted); font-weight: 500; text-transform: none; letter-spacing: 0;
}
body.service-interface :is(.board-loading-state, .empty-state) {
  background: transparent; color: var(--service-muted); border-color: var(--service-rule);
}
body.service-interface :is(.board-loading-state strong, .empty-state strong) { color: var(--service-text); font-weight: 600; }
body.service-interface :is(.info-tip-popover, .price-warning-popover) {
  background: var(--service-panel); color: var(--service-text); border-color: var(--service-rule);
  border-radius: 5px; box-shadow: none; font-weight: 400;
}
body.service-interface .board-card .ff-data-bubble {
  background: transparent; border-color: var(--service-rule); box-shadow: none;
}
body.service-interface .service-status-card:hover {
  background: transparent; border-color: var(--service-rule); transform: none;
}
body.service-interface .metric-card { background: transparent; }
body.service-interface :is(.system-runtime-title, .system-exchange-name) {
  text-transform: none; letter-spacing: 0;
}

/* Welcome surface is part of the service, rather than a separate glossy skin. */
body.service-interface .home-splash-card {
  background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
}
body.service-interface .home-splash-title {
  color: var(--service-text); font-family: inherit; font-weight: 600;
  line-height: 1.2; letter-spacing: -.025em;
}
body.service-interface .home-splash-copy { color: var(--service-muted); font-size: 15px; line-height: 1.6; }
body.service-interface .home-splash-eyebrow { color: var(--service-muted); font-weight: 400; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  body.service-interface :is(.frame-indicator-dot, .group-toggle-icon, .profile-history-shell-icon) {
    animation: none; transition: none;
  }
}