:root {
  --bg: #0b0d11;
  --card: #151922;
  --accent: #5eead4;
  --muted: #9ca3af;
}

body {
  background: radial-gradient(120% 120% at 10% 10%, #0f172a 0%, var(--bg) 40%);
  color: #e5e7eb;
}

.navbar-brand { letter-spacing: 0.5px; }
.text-accent { color: var(--accent); }

.hero {
  background: linear-gradient(120deg, rgba(94,234,212,0.08), rgba(59,130,246,0.08));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
}

.card-tool {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.card-tool:hover {
  transform: translateY(-4px);
  border-color: rgba(94,234,212,0.35);
  box-shadow: 0 15px 30px rgba(0,0,0,0.45);
}

.badge-soft {
  background: rgba(94,234,212,0.15);
  color: var(--accent);
  border: 1px solid rgba(94,234,212,0.3);
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  margin: 2px;
  border-radius: 999px;
  background: rgba(148,163,184,0.15);
  color: #cbd5e1;
  font-size: 12px;
}

input, textarea, select {
  background: #0f172a !important;
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.15rem rgba(94,234,212,0.25);
}

.breadcrumb {
  --bs-breadcrumb-divider: '>';
}

.table-dark td, .table-dark th {
  border-color: rgba(255,255,255,0.05);
}

.lazy {
  filter: blur(8px);
  transition: filter .4s ease;
}
.lazy.loaded { filter: blur(0); }

.code-section .code-box {
  background: #0a0f1a;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 16px;
  border-radius: 12px;
  color: #e5e7eb;
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 14px;
  overflow-x: auto;
}