:root {
  --magi-bg: #eef1f3;
  --magi-panel: #ffffff;
  --magi-panel-2: #f6f8fa;
  --magi-ink: #17202a;
  --magi-muted: #637083;
  --magi-line: rgba(23, 32, 42, 0.12);
  --magi-accent: #0f766e;
  --magi-accent-2: #2563eb;
  --magi-warn: #b45309;
  --magi-danger: #dc2626;
  --magi-ok: #15803d;
  --magi-sidebar: #111827;
  --magi-sidebar-2: #1f2937;
  --magi-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  --magi-radius: 8px;
  --magi-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", "PingFang TC", "Helvetica Neue", Arial, sans-serif;
  --magi-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

.site-auth *,
.site-console *,
.site-debt *,
.site-intel *,
.site-nerv *,
.site-ops *,
.site-lottery *,
.site-mobile *,
.site-website *,
.site-wizard * {
  letter-spacing: 0;
}

.site-auth,
.site-console,
.site-debt,
.site-intel,
.site-ops,
.site-lottery,
.site-mobile,
.site-wizard {
  font-family: var(--magi-font);
  color: var(--magi-ink);
  background: var(--magi-bg);
}

.site-auth {
  --magi-touch-target: 44px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--magi-bg);
  box-sizing: border-box;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 20px 14px;
  overflow-x: hidden;
}

.site-auth .auth-clock,
.site-auth .container,
.site-auth .auth-shell {
  box-shadow: var(--magi-shadow);
  max-width: 100%;
}

.site-auth .container,
.site-auth .auth-card {
  box-sizing: border-box;
  display: block !important;
  flex: 0 1 360px;
  width: min(360px, calc(100vw - 28px)) !important;
  max-width: 100%;
  background: var(--magi-panel);
  border: 1px solid var(--magi-line);
  border-radius: var(--magi-radius);
  color: var(--magi-ink);
  opacity: 1 !important;
  visibility: visible !important;
  padding: 32px;
}

.site-auth .auth-shell {
  width: min(420px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}

.site-auth .auth-card {
  margin: 0 auto;
  padding: 30px;
  border-radius: 14px;
}

.site-auth .auth-brand {
  margin: 0;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  font-weight: 700;
}

.site-auth .auth-subtitle {
  margin: 8px 0 16px;
  color: var(--magi-muted);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
}

.site-auth .auth-form {
  margin-top: 8px;
  display: grid;
  gap: 12px;
}

.site-auth .auth-field {
  display: grid;
  gap: 6px;
}

.site-auth .auth-label {
  font-size: 0.8rem;
  color: var(--magi-muted);
}

.site-auth .auth-input {
  width: 100%;
  min-height: var(--magi-touch-target);
  padding: 10px 12px;
  border: 1px solid var(--magi-line);
  border-radius: 10px;
  background: var(--magi-panel-2);
  color: var(--magi-ink);
  font-family: var(--magi-font);
  font-size: 1rem;
  box-sizing: border-box;
}

.site-auth .auth-input:focus {
  outline: none;
  border-color: rgba(15, 118, 110, 0.5);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.site-auth .auth-submit {
  min-height: var(--magi-touch-target);
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--magi-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.98rem;
}

.site-auth .auth-link {
  color: var(--magi-accent-2);
  text-align: center;
  display: block;
  margin-top: 14px;
  text-decoration: none;
  font-size: 0.86rem;
}

.site-auth .auth-flash {
  margin: 0;
  color: var(--magi-warn);
  font-size: 0.88rem;
  text-align: center;
}

.site-auth .auth-clock {
  position: fixed;
  top: 14px;
  right: 14px;
  min-height: 34px;
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
  color: var(--magi-accent);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  letter-spacing: 0;
}

.site-auth h2 {
  color: var(--magi-ink);
  font-size: 1.25rem;
}

.site-auth p,
.site-auth .flash {
  color: var(--magi-muted);
}

.site-auth input,
.site-auth select,
.site-auth textarea {
  min-height: 42px;
  background: var(--magi-panel-2);
  border: 1px solid var(--magi-line);
  border-radius: 6px;
  color: var(--magi-ink);
  font-family: var(--magi-font);
}

.site-auth input:focus,
.site-auth select:focus,
.site-auth textarea:focus {
  outline: none;
  border-color: rgba(15, 118, 110, 0.6);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.site-auth button,
.site-auth a {
  border-radius: 6px;
  font-family: var(--magi-font);
}

.site-auth button {
  min-height: 42px;
  background: var(--magi-accent);
  font-weight: 700;
}

.site-auth a {
  color: var(--magi-accent-2);
  font-size: 0.86rem;
}

.site-auth .login-clock {
  background: var(--magi-panel);
  border-color: var(--magi-line);
  color: var(--magi-accent);
}

.site-console,
.site-console body {
  background: var(--magi-bg);
}

.site-console .topbar,
.site-intel .nav,
.site-ops .top,
.site-website .topbar {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--magi-line);
  color: var(--magi-ink);
  padding: 12px 16px;
  gap: 10px;
}

.site-console .topnav a,
.site-console .topnav button,
.site-console .primary-link,
.site-console .external-grid a,
.site-console .topnav,
.site-intel .nav,
.site-ops .links,
.site-website .topbar-actions,
.site-intel .nav a,
.site-intel .refresh-btn,
.site-ops .btn,
.site-ops .links a,
.site-website .topbar a {
  border-radius: 6px;
}

.site-console .topnav,
.site-intel .nav,
.site-ops .links,
.site-website .topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-console .topnav a,
.site-console .topnav button,
.site-intel .nav a,
.site-ops .links a,
.site-website .topbar a {
  min-height: var(--magi-touch-target, 44px);
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  justify-content: center;
}

.site-console .primary-link,
.site-intel .refresh-btn,
.site-ops .btn,
.site-lottery button {
  min-height: 44px;
}

.site-console .intel-panel,
.site-console .status-card,
.site-console .research-card,
.site-console .collapsible-panel,
.site-console .magi-center,
.site-console .magi-node,
.site-intel .report-card,
.site-ops .card,
.site-ops .panel,
.site-lottery .panel,
.site-lottery .metric,
.site-lottery .table-wrap {
  background: var(--magi-panel);
  border: 1px solid var(--magi-line);
  border-radius: var(--magi-radius);
  box-shadow: var(--magi-shadow);
}

.site-console .primary-link,
.site-intel .refresh-btn,
.site-ops .btn,
.site-lottery button {
  background: var(--magi-accent);
  color: #fff;
  border: 1px solid var(--magi-accent);
}

.site-console .primary-link:hover,
.site-intel .refresh-btn:hover,
.site-ops .btn:hover,
.site-lottery button:hover {
  background: #0b5f59;
}

.site-debt {
  --bg: var(--magi-bg);
  --panel: var(--magi-panel);
  --panel-2: var(--magi-panel-2);
  --line: var(--magi-line);
  --text: var(--magi-ink);
  --muted: var(--magi-muted);
  --accent: var(--magi-accent);
  --sidebar-bg: var(--magi-sidebar);
  --sidebar-text: #d7dde7;
  --sidebar-accent: #5eead4;
}

.site-debt .sidebar,
.site-debt .topbar,
.site-debt .card,
.site-debt .modal-card,
.site-debt .file-drop,
.site-debt .generated-item {
  border-radius: var(--magi-radius);
}

.site-debt .sidebar {
  margin: 12px 0 12px 12px;
  max-height: calc(100vh - 24px);
  box-shadow: var(--magi-shadow);
}

.site-debt .main {
  height: auto;
  min-height: 100vh;
}

.site-debt .topbar {
  margin: 12px 12px 0;
  box-shadow: var(--magi-shadow);
}

.site-debt .content {
  padding: 18px 24px 28px;
}

.site-debt .card {
  box-shadow: var(--magi-shadow);
}

.site-nerv {
  --bg: #111418;
  --surface: #171c22;
  --surface2: #20262d;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #f59e0b;
  --accent2: #5eead4;
  --text: #f1f5f9;
  --muted: #9aa7b8;
  background: #111418;
  color: var(--text);
}

.site-nerv::after {
  opacity: 0.08;
}

.site-nerv .nerv-header,
.site-nerv .warning-bar,
.site-nerv .side-panel,
.site-nerv .center-panel,
.site-nerv .command-chip,
.site-nerv .status-block,
.site-nerv .control-section,
.site-nerv .log-panel {
  border-color: var(--border);
}

.site-nerv .nerv-header,
.site-nerv .side-panel,
.site-nerv .center-panel,
.site-nerv .command-chip,
.site-nerv .status-block,
.site-nerv .control-section,
.site-nerv .log-panel {
  background: var(--surface);
}

.site-nerv .nerv-header h1,
.site-nerv .panel-title,
.site-nerv .command-chip-value {
  color: var(--accent);
  text-shadow: none;
}

.site-nerv .warning-bar {
  background: #1f2937;
  color: #fbbf24;
}

.site-nerv {
  --bg: #101418;
  --surface: #171c22;
  --surface2: #20262d;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #5eead4;
  --accent2: #93c5fd;
  --text: #f1f5f9;
  --muted: #a7b0bf;
  --danger: #f87171;
  --warn: #fbbf24;
  --ok: #34d399;
  min-height: 100vh;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--magi-font) !important;
}

.site-nerv::after {
  display: none !important;
}

.site-nerv .nerv-header {
  min-height: 64px;
  padding: 12px 22px !important;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  background: rgba(23, 28, 34, 0.94) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  text-align: left !important;
}

.site-nerv .nerv-header h1 {
  grid-column: 2;
  color: var(--text) !important;
  font-family: var(--magi-font) !important;
  font-size: 1.18rem !important;
  font-weight: 800;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.site-nerv .nerv-header .subtitle {
  grid-column: 2;
  color: var(--muted) !important;
  font-family: var(--magi-font) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0 !important;
  margin-top: 3px;
  text-align: center;
}

.site-nerv .nerv-header .back-link,
.site-nerv .nerv-header .timestamp {
  position: static !important;
  font-family: var(--magi-font) !important;
  letter-spacing: 0 !important;
}

.site-nerv .nerv-header .back-link {
  justify-self: start;
  color: var(--accent) !important;
  border: 1px solid rgba(94, 234, 212, 0.32);
  border-radius: 6px;
  padding: 8px 12px;
  background: rgba(94, 234, 212, 0.08);
  opacity: 1 !important;
}

.site-nerv .nerv-header .timestamp {
  justify-self: end;
  color: var(--muted) !important;
  font-size: 0.82rem !important;
}

.site-nerv .warning-bar {
  animation: none !important;
  background: rgba(32, 38, 45, 0.92) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-family: var(--magi-font) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  padding: 8px 16px !important;
}

.site-nerv .main-grid {
  grid-template-columns: 280px minmax(0, 1fr) 300px !important;
  gap: 16px !important;
  padding: 16px;
  background: var(--bg) !important;
}

.site-nerv .side-panel,
.site-nerv .center-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--magi-radius) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.site-nerv .side-panel {
  padding: 14px !important;
}

.site-nerv .center-panel {
  padding: 14px 16px 16px !important;
}

.site-nerv .panel-title,
.site-nerv .command-chip-label,
.site-nerv .command-chip-meta,
.site-nerv .runtime-card-subtitle,
.site-nerv .runtime-meta,
.site-nerv .runtime-band-label,
.site-nerv .remote-access-meta,
.site-nerv .skill-template-copy,
.site-nerv .skill-editor-hint,
.site-nerv .skill-modal-subtitle,
.site-nerv .skill-modal-foot-hint,
.site-nerv .node-detail {
  color: var(--muted) !important;
  font-family: var(--magi-font) !important;
  letter-spacing: 0 !important;
}

.site-nerv .panel-title,
.site-nerv .nerv-fold-title,
.site-nerv .runtime-card-title,
.site-nerv .remote-access-title,
.site-nerv .skill-template-title,
.site-nerv .skill-modal-title {
  color: var(--accent) !important;
  font-family: var(--magi-font) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.site-nerv .command-strip {
  gap: 10px !important;
}

.site-nerv .command-chip,
.site-nerv .command-chip-label,
.site-nerv .command-chip-value,
.site-nerv .command-chip-meta,
.site-nerv .node-item,
.site-nerv .node-item .meta,
.site-nerv .route-row,
.site-nerv .route-row .task,
.site-nerv .route-row .meta,
.site-nerv .route-row .model,
.site-nerv .activity-item,
.site-nerv .activity-body,
.site-nerv .runtime-band-value,
.site-nerv .runtime-band-code,
.site-nerv .runtime-meta,
.site-nerv .remote-access-meta,
.site-nerv .nerv-chat-message {
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: balance;
}

.site-nerv .command-chip-label,
.site-nerv .node-item .label,
.site-nerv .panel-title,
.site-nerv .nerv-fold-title {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-wrap: nowrap !important;
}

.site-nerv .command-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nerv .command-chip-value,
.site-nerv .command-chip-meta {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-wrap: wrap !important;
}

.site-nerv .node-item {
  min-width: 0;
}

.site-nerv .node-item .label {
  flex: 0 0 auto !important;
  min-width: max-content;
}

.site-nerv .node-item .meta {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: auto;
  text-align: right;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  text-wrap: wrap !important;
}

.site-nerv .engine-row-head .label,
.site-nerv .remote-access-title {
  min-width: 0;
  max-width: 100%;
}

.site-nerv .command-chip,
.site-nerv .nerv-fold,
.site-nerv .runtime-card,
.site-nerv .remote-access-card,
.site-nerv .skill-category,
.site-nerv .skill-modal-card {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--magi-radius) !important;
  box-shadow: none !important;
}

.site-nerv .command-chip-value,
.site-nerv .runtime-band-value,
.site-nerv .runtime-band-code,
.site-nerv .node-name,
.site-nerv .hex-label {
  color: var(--text) !important;
  font-family: var(--magi-font) !important;
  letter-spacing: 0 !important;
}

.site-nerv .node-item,
.site-nerv .route-row,
.site-nerv .skill-item {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--magi-font) !important;
}

.site-nerv .node-item:hover,
.site-nerv .skill-item:hover,
.site-nerv .skill-item.active {
  background: rgba(94, 234, 212, 0.08) !important;
  border-color: rgba(94, 234, 212, 0.28) !important;
}

.site-nerv .node-item .label,
.site-nerv .route-row .task,
.site-nerv .route-row .model,
.site-nerv .skill-name,
.site-nerv .skill-desc {
  color: var(--text) !important;
  font-family: var(--magi-font) !important;
}

.site-nerv .route-row .model,
.site-nerv .skill-desc {
  color: var(--muted) !important;
}

.site-nerv .engine,
.site-nerv .skill-badge,
.site-nerv .remote-access-link,
.site-nerv .fold-btn,
.site-nerv .runtime-btn,
.site-nerv button,
.site-nerv .skill-modal-toolbar button,
.site-nerv .skill-template-card button,
.site-nerv .skill-modal-close,
.site-nerv .skill-side-tab,
.site-nerv #nerv-chat-send,
.site-nerv #nerv-chat-clear {
  min-height: 34px;
  border: 1px solid rgba(94, 234, 212, 0.32) !important;
  border-radius: 6px !important;
  background: rgba(94, 234, 212, 0.08) !important;
  color: var(--accent) !important;
  font-family: var(--magi-font) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0 !important;
}

.site-nerv .panel-title {
  border-bottom-color: var(--border) !important;
}

.site-nerv code {
  color: var(--accent2) !important;
  font-family: var(--magi-mono) !important;
}

.site-nerv .remote-access-link.primary,
.site-nerv .skill-side-tab.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #082f2c !important;
  font-weight: 700;
}

.site-nerv button:not(:disabled):hover,
.site-nerv .remote-access-link:hover {
  filter: brightness(1.08);
}

.site-nerv input,
.site-nerv select,
.site-nerv textarea,
.site-nerv .runtime-select,
.site-nerv .runtime-input,
.site-nerv .skill-wizard-input,
.site-nerv .skill-wizard-reply,
.site-nerv .skill-template-preview,
.site-nerv .skill-modal-editor textarea,
.site-nerv .skill-modal-toolbar input,
.site-nerv #nerv-chat-input {
  background: #11161b !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--magi-font) !important;
}

.site-nerv input:focus,
.site-nerv select:focus,
.site-nerv textarea:focus {
  outline: none;
  border-color: rgba(94, 234, 212, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.14);
}

.site-nerv .magi-node .hex-bg,
.site-nerv .tri-lines line {
  border-color: rgba(94, 234, 212, 0.5) !important;
  stroke: rgba(94, 234, 212, 0.35) !important;
  box-shadow: none !important;
}

.site-nerv .magi-node.online .hex-bg {
  border-color: var(--ok) !important;
}

.site-nerv .magi-node.busy .hex-bg {
  border-color: var(--warn) !important;
}

.site-nerv .magi-node.offline .hex-bg {
  border-color: var(--danger) !important;
}

.site-nerv .indicator.green {
  color: var(--ok) !important;
  background: var(--ok) !important;
}

.site-nerv .indicator.yellow {
  color: var(--warn) !important;
  background: var(--warn) !important;
}

.site-nerv .indicator.red {
  color: var(--danger) !important;
  background: var(--danger) !important;
}

.site-nerv .nerv-fold summary {
  background: transparent !important;
  color: var(--text) !important;
}

.site-nerv .nerv-fold summary::after,
.site-nerv .nerv-footer {
  color: var(--muted) !important;
  font-family: var(--magi-font) !important;
  letter-spacing: 0 !important;
}

.site-nerv .nerv-footer {
  background: #0b0f14 !important;
  border-top: 1px solid var(--border) !important;
}

.site-nerv .skill-modal {
  background: rgba(2, 6, 23, 0.66) !important;
}

.site-nerv .skill-modal-shell {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--magi-radius) !important;
}

.site-nerv .skill-modal-head,
.site-nerv .skill-modal-foot {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
}

.site-nerv #nerv-chat-messages {
  background: #11161b !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text) !important;
  font-family: var(--magi-font) !important;
}

@media (max-width: 900px) {
  .site-nerv {
    overflow: auto !important;
    height: auto !important;
  }

  .site-nerv .main-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .site-nerv .nerv-header {
    grid-template-columns: 1fr !important;
    justify-items: stretch;
    text-align: left !important;
  }

  .site-nerv .nerv-header h1,
  .site-nerv .nerv-header .subtitle,
  .site-nerv .nerv-header .back-link,
  .site-nerv .nerv-header .timestamp {
    grid-column: 1 !important;
    justify-self: stretch !important;
    text-align: left !important;
  }
}

.site-intel {
  background: var(--magi-bg);
}

.site-intel .nav {
  height: 58px;
}

.site-intel .page-wrap {
  max-width: 1040px;
}

.site-intel .page-header h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.site-intel .report-body {
  color: var(--magi-ink);
}

.site-ops {
  --bg: #101418;
  --panel: #171c22;
  --line: rgba(255, 255, 255, 0.12);
  --txt: #f1f5f9;
  --muted: #9aa7b8;
  background: var(--bg);
  color: var(--txt);
}

.site-ops .wrap {
  max-width: 1480px;
}

.site-ops .links a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  color: #cde7ff;
}

.site-ops th,
.site-ops td {
  border-top-color: var(--line);
}

.site-lottery {
  --bg: var(--magi-bg);
  --panel: var(--magi-panel);
  --line: var(--magi-line);
  --text: var(--magi-ink);
  --muted: var(--magi-muted);
  --accent: var(--magi-accent);
  --accent-dark: #0b5f59;
  --soft: #eefbf8;
}

.site-lottery main {
  width: min(1180px, calc(100vw - 36px));
}

.site-lottery .drop {
  background: var(--magi-panel);
}

.site-lottery .controls,
.site-lottery th,
.site-lottery .hint {
  background: var(--magi-panel-2);
}

.site-mobile {
  background: var(--magi-bg);
}

.site-mobile .mobile-hero,
.site-mobile .connection-card,
.site-mobile .action-card,
.site-mobile .install-card,
.site-mobile .admin-panel {
  border-radius: var(--magi-radius);
  box-shadow: var(--magi-shadow);
}

.site-mobile .action-card.primary {
  border-color: rgba(15, 118, 110, 0.35);
}

.site-website {
  background: #101418;
  color: #f1f5f9;
}

.site-website .topbar {
  background: #171c22;
  border-color: rgba(255, 255, 255, 0.12);
}

.site-website .topbar h1 {
  color: #5eead4;
}

.site-website .topbar .btn-back {
  color: #5eead4;
  border-color: rgba(94, 234, 212, 0.4);
}

.site-website .topbar .btn-site {
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.35);
}

.site-wizard {
  --bg: #101418;
  --surface: #171c22;
  --surface2: #20262d;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #5eead4;
  --accent2: #93c5fd;
  --text: #f1f5f9;
  --muted: #a7b0bf;
}

.site-wizard .wizard-header,
.site-wizard .card,
.site-wizard .spec-item,
.site-wizard .model-card {
  border-radius: var(--magi-radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.site-wizard .wizard-header {
  background: var(--surface);
}

.site-wizard .wizard-header h1 {
  color: var(--accent);
  -webkit-text-fill-color: currentColor;
}

@media (max-width: 760px) {
  .site-debt .sidebar {
    margin: 0;
    max-height: 100vh;
    border-radius: 0;
  }

  .site-debt .topbar {
    margin: 8px;
  }

  .site-console .topbar,
  .site-intel .nav,
  .site-ops .top,
  .site-website .topbar {
    align-items: flex-start;
    flex-direction: column;
    height: auto;
  }
}

/* === MAGI 全站手機可用性底線 ==========================================
   各頁面仍保留自己的版型；這裡只負責在手機上避免水平溢出、桌面表格硬擠、
   頁首按鈕太小，以及 iframe/工具面板超出視窗。 */
@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  .site-dashboard,
  .site-console,
  .site-debt,
  .site-intel,
  .site-nerv,
  .site-ops,
  .site-lottery,
  .site-mobile,
  .site-website,
  .site-wizard,
  .site-auth {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .site-dashboard *,
  .site-console *,
  .site-debt *,
  .site-intel *,
  .site-nerv *,
  .site-ops *,
  .site-lottery *,
  .site-mobile *,
  .site-website *,
  .site-wizard *,
  .site-auth * {
    max-width: 100%;
  }

  .site-dashboard button,
  .site-dashboard a,
  .site-console button,
  .site-console a,
  .site-intel button,
  .site-intel a,
  .site-ops button,
  .site-ops a,
  .site-lottery button,
  .site-lottery a,
  .site-website button,
  .site-website a,
  .site-wizard button,
  .site-wizard a,
  .site-auth button,
  .site-auth a {
    min-height: 42px;
  }

  .site-dashboard input,
  .site-dashboard select,
  .site-dashboard textarea,
  .site-console input,
  .site-console select,
  .site-console textarea,
  .site-intel input,
  .site-intel select,
  .site-intel textarea,
  .site-ops input,
  .site-ops select,
  .site-ops textarea,
  .site-lottery input,
  .site-lottery select,
  .site-lottery textarea,
  .site-website input,
  .site-website select,
  .site-website textarea,
  .site-wizard input,
  .site-wizard select,
  .site-wizard textarea,
  .site-auth input,
  .site-auth select,
  .site-auth textarea {
    min-height: 42px;
    font-size: 16px;
  }

  .site-console .console-shell,
  .site-intel .page-wrap,
  .site-ops .wrap,
  .site-lottery main,
  .site-mobile .mobile-shell,
  .site-wizard .wizard-shell,
  .site-wizard .container,
  .site-auth .container {
    width: min(100% - 20px, 720px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-auth {
    min-height: 100dvh !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: column;
    padding: 14px !important;
    overflow-y: auto;
  }

  .site-auth .container {
    flex: 0 0 auto;
    width: min(360px, 100%) !important;
  }

  .site-dashboard {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: auto !important;
  }

  .site-dashboard .header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 56px;
    padding: 10px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .site-dashboard .header h1 {
    font-size: 1.1rem !important;
    line-height: 1.2;
  }

  .site-dashboard .content-area {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  .site-dashboard .main-three-col,
  .site-dashboard .bottom-full,
  .site-dashboard .bottom-panels {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .site-dashboard .left-col,
  .site-dashboard .center-col,
  .site-dashboard .right-col {
    min-height: 0 !important;
    overflow: visible !important;
  }

  .site-console .topbar,
  .site-intel .nav,
  .site-ops .top,
  .site-website .topbar {
    padding: 10px 12px;
    gap: 10px;
  }

  .site-console .topnav,
  .site-ops .links,
  .site-website .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .site-console .topnav a,
  .site-console .topnav button,
  .site-ops .links a,
  .site-website .topbar a {
    margin: 0 !important;
    padding: 9px 10px;
    text-align: center;
    justify-content: center;
  }

  .site-console .research-grid,
  .site-console .panel-grid,
  .site-console .external-grid,
  .site-intel .cards,
  .site-ops .cards,
  .site-lottery .summary,
  .site-mobile .action-grid {
    grid-template-columns: 1fr !important;
  }

  .site-console .research-card,
  .site-console .intel-panel,
  .site-console .status-card,
  .site-intel .report-card,
  .site-ops .card,
  .site-ops .panel,
  .site-lottery .panel,
  .site-lottery .metric,
  .site-mobile .mobile-hero,
  .site-mobile .connection-card,
  .site-mobile .install-card,
  .site-mobile .admin-panel {
    border-radius: 8px !important;
  }

  .site-console .table-wrap,
  .site-console .panel,
  .site-intel .report-body,
  .site-ops .panel,
  .site-lottery .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .site-console table,
  .site-intel table,
  .site-ops table,
  .site-lottery table {
    width: 100%;
  }

  .site-website .topbar-left,
  .site-website .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .site-website .admin-frame {
    height: calc(100dvh - 148px);
    min-height: 520px;
  }

  .site-nerv .main-grid {
    padding: 10px !important;
  }

  .site-nerv .side-panel,
  .site-nerv .center-panel {
    max-height: none !important;
    overflow: visible !important;
  }

  .site-nerv .command-strip,
  .site-nerv .runtime-grid,
  .site-nerv .remote-access-grid,
  .site-nerv .skill-modal-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 430px) {
  .site-console .topnav,
  .site-ops .links,
  .site-website .topbar-actions {
    grid-template-columns: 1fr;
  }

  .site-lottery main,
  .site-console .console-shell,
  .site-intel .page-wrap,
  .site-ops .wrap {
    width: calc(100% - 16px) !important;
  }
}