:root {
  --brand-primary: #0f172a;
  --brand-accent: #3b82f6;
  --brand-bg: #f8fafc;
  --brand-surface: #ffffff;
  --brand-text: #0f172a;
  --brand-text-muted: #64748b;
  --brand-border: #e2e8f0;
  --brand-success: #10b981;
  --brand-warning: #f59e0b;
}
body {
  font-family: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  background: var(--brand-bg);
  color: var(--brand-text);
}
.view { display: none; }
.view.active { display: block; }
.card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-online { background: var(--brand-success); }
.status-building { background: var(--brand-warning); }
.btn-primary {
  background: var(--brand-primary);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }