:root {
  --bg-black: #0D1117;
  --bg-deep: #151A23;
  --card-gray: #1E2430;
  --border-gray: #2D3748;
  --text-muted: #A0AEBC;
  --text-main: #E5E9F2;
  --primary-blue: #165DFF;
  --primary-blue-light: #2371FF;
  --tech-cyan: #0FC6C2;
  --deep-purple: #722ED1;
  --warning-orange: #FF7D00;
  --success-green: #00B42A;
  --tech-gradient: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);
  --glass-bg: rgba(30, 36, 48, 0.75);
  --radius: 12px;
  --radius-sm: 8px;
  --space-page: 24px;
  --space-section: 20px;
  --space-card: 16px;
  --shadow-soft: 0 18px 55px rgba(0, 0, 0, 0.18);
  --glow-border: 0 0 0 1px rgba(22, 93, 255, 0.24), 0 0 28px rgba(22, 93, 255, 0.08);
}

html { background: var(--bg-black) !important; }
body {
  font-family: Inter, "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--text-main);
  letter-spacing: 0;
}
h1 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
h2 { font-size: 20px; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
h3 { font-size: 18px; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
p, td, th, input, textarea, select, button { font-size: 14px; line-height: 1.6; }
small, .desc, .toast-text, .provider-pill, .status-chip { font-size: 12px; }

.navbar, .header, .tabs, .card, .stat-card, .feature-card, .workflow-step, .modal-content, .login-box,
.provider-card, .mini-card, .config-item, .tab-content, .ai-panel, .composer, .floating-composer, .result-node {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.navbar {
  background: rgba(13, 17, 23, 0.78) !important;
  border-bottom: 1px solid rgba(45, 55, 72, 0.9) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03);
}
.logo, .hero h1 {
  background: linear-gradient(135deg, #E5E9F2 0%, #0FC6C2 42%, #165DFF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.nav-links a { color: rgba(229, 233, 242, 0.72) !important; }
.nav-links a:hover, .nav-links a.active {
  background: rgba(22, 93, 255, 0.12) !important;
  color: #E5E9F2 !important;
}

.hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(22,93,255,0.22), transparent 38%),
    radial-gradient(circle at 80% 12%, rgba(15,198,194,0.10), transparent 28%),
    linear-gradient(180deg, #0D1117 0%, #151A23 100%) !important;
}
.hero-badge, .category-tag, .status-chip {
  background: rgba(30,36,48,0.68) !important;
  color: var(--text-muted) !important;
  border: 1px solid rgba(45,55,72,0.95) !important;
  border-radius: 999px !important;
}
.hero-btn.primary, .nav-btn, .btn-primary, .btn-submit, .generate-btn {
  background: linear-gradient(135deg, #2371FF 0%, #165DFF 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(35,113,255,0.55) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 0 0 1px rgba(22,93,255,0.16), 0 12px 30px rgba(22,93,255,0.16) !important;
}
.hero-btn.secondary, .btn, .ctrl-btn {
  border-radius: var(--radius-sm) !important;
}
.hero-btn.secondary {
  background: rgba(30,36,48,0.72) !important;
  border: 1px solid rgba(45,55,72,0.95) !important;
  color: var(--text-main) !important;
}

.showcase-section, .features-section, .notice, .footer, .card, .tab-content, .stat-card, .feature-card,
.workflow-step, .modal-content, .provider-card, .mini-card, .config-item, .theme-card, .theme-import,
.login-box {
  background: rgba(30, 36, 48, 0.75) !important;
  border: 1px solid rgba(45, 55, 72, 0.92) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft), var(--glow-border) !important;
}
.feature-icon { display: none !important; }
.section-title, .card-header h2, .provider-card h4, .theme-card h4, .config-item label, label {
  color: var(--text-main) !important;
}
.feature-card p, .workflow-step span, .desc, .sub, .theme-card p, .provider-card label, .mini-card span {
  color: var(--text-muted) !important;
}

input, textarea, select {
  background: rgba(13,17,23,0.66) !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(45,55,72,0.98) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(22,93,255,0.85) !important;
  box-shadow: 0 0 0 3px rgba(22,93,255,0.16) !important;
}
table { color: var(--text-main); }
th {
  background: rgba(21,26,35,0.96) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid rgba(45,55,72,0.95) !important;
}
td { border-bottom: 1px solid rgba(45,55,72,0.65) !important; color: rgba(229,233,242,0.88); }
tr:hover { background: rgba(22,93,255,0.06) !important; }

body:has(.admin-topbar), body:has(.header) {
  background:
    radial-gradient(circle at 18% 0%, rgba(22,93,255,0.12), transparent 32%),
    linear-gradient(180deg, #0D1117 0%, #151A23 100%) !important;
}
.admin-topbar h1, .admin-topbar p, .stat-card .value, .mini-card strong { color: var(--text-main) !important; }
.header {
  background: rgba(13,17,23,0.92) !important;
  border-right: 1px solid rgba(45,55,72,0.95) !important;
}
.header h1 { color: var(--text-main) !important; }
.header-right { background: rgba(30,36,48,0.72) !important; }
.tab {
  color: rgba(229,233,242,0.70) !important;
  border: 1px solid transparent !important;
}
.tab:hover {
  background: rgba(30,36,48,0.92) !important;
  border-color: rgba(45,55,72,0.9) !important;
  color: var(--text-main) !important;
}
.tab.active {
  background: linear-gradient(135deg, rgba(22,93,255,0.28), rgba(114,46,209,0.22)) !important;
  border-color: rgba(22,93,255,0.42) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22,93,255,0.16), 0 10px 32px rgba(22,93,255,0.12) !important;
}
.nav-section { color: rgba(160,174,188,0.72) !important; }
.card-header { border-bottom: 1px solid rgba(45,55,72,0.92) !important; }
.btn-danger { background: rgba(255, 77, 79, 0.88) !important; }
.btn-success { background: rgba(0, 180, 42, 0.88) !important; }
.btn-warning { background: rgba(255, 125, 0, 0.88) !important; }
.toast { background: rgba(30,36,48,0.94) !important; color: var(--text-main) !important; border-color: rgba(45,55,72,0.96) !important; }
.toast-title { color: var(--text-main) !important; }
.toast.success { border-left-color: var(--success-green) !important; }
.toast.error { border-left-color: #ff4d4f !important; }

.canvas-viewport, .canvas-area {
  background:
    radial-gradient(circle at 50% 30%, rgba(22,93,255,0.10), transparent 36%),
    #0D1117 !important;
}
.side-panel, .topbar, .floating-composer, .composer-panel {
  background: rgba(30,36,48,0.76) !important;
  border-color: rgba(45,55,72,0.95) !important;
}

@media (max-width: 768px) {
  body { background: #0D1117 !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}