:root {
  --bg-base: #020617;
  --bg-surface: #0f172a;
  --bg-elevated: #1e293b;
  --bg-input: rgba(15, 23, 42, 0.7);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --accent-primary: #22d3ee;
  --accent-secondary: #3b82f6;
  --accent-security: #34d399;
  --accent-warning: #fbbf24;
  --accent-danger: #f87171;
  --accent-purple: #a78bfa;
  --border: rgba(148, 163, 184, 0.12);
  --border-accent: rgba(34, 211, 238, 0.35);
  --glow-cyan: rgba(34, 211, 238, 0.18);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg-base); color: var(--text-secondary); line-height: 1.6; }
h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; color: var(--text-primary); font-weight: 700; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.app-header { background: var(--bg-elevated); padding: 1rem 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.brand-logo { font-size: 1.25rem; font-weight: 800; font-family: 'Outfit', sans-serif; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
.gradient-brand { background: linear-gradient(135deg, #22d3ee, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.tool-badge { font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 20px; background: rgba(34,211,238,0.1); color: var(--accent-primary); border: 1px solid var(--border-accent); }
.header-nav { display: flex; gap: 1.2rem; align-items: center; }
.header-nav a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s; }
.header-nav a:hover { color: var(--accent-primary); }
.glass-card { background: rgba(15, 23, 42, 0.65); border: 1px solid var(--border); backdrop-filter: blur(16px); border-radius: 16px; padding: 1.5rem; transition: all 0.3s; }
.glass-card:hover { border-color: var(--border-accent); box-shadow: 0 10px 30px -10px var(--glow-cyan); }
.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #22d3ee, #3b82f6); color: #020617; font-weight: 700; padding: 0.75rem 1.6rem; border-radius: 12px; border: none; cursor: pointer; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.88rem; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(34,211,238,0.35); }
.btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.03); color: var(--text-secondary); border: 1px solid var(--border); padding: 0.65rem 1.2rem; border-radius: 10px; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 0.82rem; transition: all 0.2s; }
.btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(34,211,238,0.05); }
.btn-outline.active { border-color: var(--accent-primary); background: rgba(34,211,238,0.12); color: var(--accent-primary); }
.gradient-text { background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 50%, #34d399 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.grid { display: grid; gap: 1.5rem; }
@media(min-width: 768px) { .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } }
.code-block { background: #0b1120; border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; color: #38bdf8; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; overflow-x: auto; line-height: 1.5; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: #334155; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-primary); }
input:checked + .slider:before { transform: translateX(20px); }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid rgba(148,163,184,0.08); }
.badge { font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 12px; font-weight: 700; text-transform: uppercase; }
.badge-success { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.badge-warning { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }