/* Motyw „skills”: przestrzeń latentna nocą. Głęboki atrament, zorza cyjan-magenta-limonka,
   siatka kropek jak macierz wag, karty jak szkło, komendy jak terminal. Bez pomarańczu
   i bez czerwieni (to są inne strony). Ciemny domyślnie. */
:root[data-theme="skills"] {
  color-scheme: dark;
  --bg: #07081A; --bg-2: #0E1130; --fg: #EEF1FF; --muted: #A3AACF; --border: #232A55;
  --accent: #3DE8FF; --accent-fg: #04121A; --accent-text: #7DF0FF; --accent-soft: rgba(61,232,255,.14);
  --magenta: #FF5CD6; --lime: #C6FF5C;
  --radius: 16px; --radius-s: 10px; --shadow: 0 0 0 1px rgba(125,240,255,.06), 0 18px 48px rgba(0,0,0,.45);
}
:root[data-theme="skills"] body { background: var(--bg); color: var(--fg); }
:root[data-theme="skills"] .top { background: rgba(7,8,26,.78); border-bottom-color: var(--border); }
:root[data-theme="skills"] .hero {
  background:
    radial-gradient(circle, rgba(125,240,255,.16) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(ellipse 55% 60% at 78% 30%, rgba(255,92,214,.30), transparent 70%),
    radial-gradient(ellipse 50% 55% at 92% 75%, rgba(61,232,255,.28), transparent 70%),
    radial-gradient(ellipse 40% 40% at 60% 95%, rgba(198,255,92,.14), transparent 70%),
    var(--bg);
}
:root[data-theme="skills"] .hero h1 {
  letter-spacing: -.03em;
  background: linear-gradient(100deg, #EEF1FF 0%, #EEF1FF 40%, var(--accent) 70%, var(--magenta) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="skills"] .kicker { color: var(--lime); }
:root[data-theme="skills"] .kicker::before { background: var(--lime); }
:root[data-theme="skills"] h2 { letter-spacing: -.02em; }
:root[data-theme="skills"] .hero-photo-cutout { background: radial-gradient(circle at 50% 35%, rgba(61,232,255,.35) 0%, rgba(255,92,214,.22) 55%, transparent 71%); }
:root[data-theme="skills"] .hero-photo-cutout::before { border-color: rgba(61,232,255,.55); }
:root[data-theme="skills"] .hero-photo-cutout::after { border-color: rgba(255,92,214,.45); }
:root[data-theme="skills"] .btn-primary { background: linear-gradient(100deg, var(--accent), #8AF5FF); color: var(--accent-fg); box-shadow: 0 8px 28px rgba(61,232,255,.35); }
:root[data-theme="skills"] .btn-ghost { background: rgba(255,255,255,.04); color: var(--fg); border-color: var(--border); }
:root[data-theme="skills"] .how-item {
  background: linear-gradient(180deg, rgba(20,24,64,.9), rgba(12,14,40,.9));
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
:root[data-theme="skills"] .how-item h3 code { background: none; padding: 0; color: var(--accent-text); }
:root[data-theme="skills"] .skills-list .how-item:first-child { border-color: rgba(255,92,214,.45); box-shadow: 0 0 0 1px rgba(255,92,214,.15), 0 18px 60px rgba(255,92,214,.12); }
:root[data-theme="skills"] .skills-cmd { background: #03040F; border-color: rgba(61,232,255,.22); }
:root[data-theme="skills"] .skills-cmd-label { color: var(--lime); }
:root[data-theme="skills"] a:not(.btn) { color: var(--accent-text); }
:root[data-theme="skills"] .faq details { border-color: var(--border); }
:root[data-theme="skills"] .cta-box { background: linear-gradient(160deg, rgba(255,92,214,.10), rgba(61,232,255,.08) 60%, rgba(14,17,48,.95)); border: 1px solid var(--border); }
:root[data-theme="skills"] .tag { background: var(--bg-2); }