/* Extracted from slowniczek.html inline <style> block.
   CSP M2 enforce: externalized 2026-05-21. */

:root {
      --bg: #0b0d10;
      --card: #14181d;
      --card-hover: #1a1f25;
      --border: #2a3038;
      --text: #e8eaed;
      --muted: #9aa3ab;
      --primary: #2ab88a;
      --pl-red: #dc143c;
      --nl-orange: #ff8c00;
      --emergency: #ef4444;
      --tools: #5eb1ff;
      --bhp: #2ab88a;
      --comm: #a78bfa;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, 'Segoe UI', system-ui, 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    .top-nav {
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
      background: rgba(11,13,16,0.85);
      backdrop-filter: blur(8px);
      position: sticky; top: 0; z-index: 10;
    }
    .top-nav a { color: var(--text); text-decoration: none; font-weight: 600; }
    .brand { font-size: 18px; font-weight: 800; letter-spacing: 0.2px; }
    .brand-icon { color: var(--primary); }
    .top-nav .cta {
      background: var(--primary); color: #04211a;
      padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 14px;
    }

    .hero {
      max-width: 900px; margin: 0 auto;
      padding: 60px 24px 40px;
      text-align: center;
    }
    .hero-flags { font-size: 64px; line-height: 1; margin-bottom: 16px; }
    .hero h1 {
      font-size: clamp(28px, 5vw, 44px);
      margin: 0 0 16px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }
    .hero p {
      color: var(--muted); font-size: 16px;
      max-width: 600px; margin: 0 auto;
    }
    .hero .audio-hint {
      margin-top: 14px;
      display: inline-block;
      padding: 8px 16px;
      background: rgba(42, 184, 138, 0.12);
      border: 1px solid rgba(42, 184, 138, 0.3);
      border-radius: 999px;
      color: var(--text);
      font-size: 13px;
    }

    .tabs {
      max-width: 900px; margin: 0 auto;
      padding: 0 24px 12px;
      display: flex; gap: 8px; flex-wrap: wrap;
      justify-content: center;
    }
    .tab {
      background: var(--card); border: 1px solid var(--border);
      color: var(--text); border-radius: 999px;
      padding: 8px 16px; font-size: 13px; font-weight: 600;
      cursor: pointer; text-decoration: none;
      transition: all 0.15s ease;
    }
    .tab:hover { background: var(--card-hover); transform: translateY(-1px); }
    .tab.bhp:hover { border-color: var(--bhp); color: var(--bhp); }
    .tab.tools:hover { border-color: var(--tools); color: var(--tools); }
    .tab.emergency:hover { border-color: var(--emergency); color: var(--emergency); }
    .tab.comm:hover { border-color: var(--comm); color: var(--comm); }

    .container {
      max-width: 900px; margin: 0 auto;
      padding: 12px 24px 80px;
      display: flex; flex-direction: column; gap: 36px;
    }

    .category {
      display: flex; flex-direction: column; gap: 14px;
    }
    .category-title {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-weight: 700;
      color: var(--muted);
      display: flex; align-items: center; gap: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border);
      margin: 0;
    }
    .category-title .dot {
      width: 10px; height: 10px; border-radius: 50%;
    }
    .category-title.bhp .dot       { background: var(--bhp); }
    .category-title.tools .dot     { background: var(--tools); }
    .category-title.emergency .dot { background: var(--emergency); }
    .category-title.comm .dot      { background: var(--comm); }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
    }

    .phrase {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      display: flex; flex-direction: column; gap: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
      position: relative;
    }
    .phrase:hover {
      background: var(--card-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    }
    .phrase.bhp:hover       { border-color: var(--bhp); }
    .phrase.tools:hover     { border-color: var(--tools); }
    .phrase.emergency:hover { border-color: var(--emergency); }
    .phrase.comm:hover      { border-color: var(--comm); }

    .phrase .pl {
      font-size: 16px; font-weight: 700;
      display: flex; align-items: center; gap: 6px;
      flex-wrap: wrap;
    }
    .phrase .speak {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      border-radius: 6px;
      padding: 2px 8px;
      font-size: 13px;
      cursor: pointer;
      margin-left: auto;
      transition: all 0.15s ease;
      flex-shrink: 0;
    }
    .phrase .speak:hover {
      color: var(--text);
      border-color: var(--text);
      transform: scale(1.05);
    }
    .phrase .speak.speak-primary {
      border-color: var(--primary);
      color: var(--primary);
    }
    .phrase .speak.speak-primary:hover {
      background: var(--primary);
      color: #04211a;
    }
    .phrase .speak.speaking {
      background: var(--primary);
      color: #04211a;
      animation: speak-pulse 0.6s ease-in-out infinite;
    }
    @keyframes speak-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    .phrase .nl {
      font-size: 18px; font-weight: 600; color: var(--text);
      display: flex; align-items: center; gap: 6px;
    }
    .phrase.bhp .nl       { color: var(--bhp); }
    .phrase.tools .nl     { color: var(--tools); }
    .phrase.emergency .nl { color: var(--emergency); }
    .phrase.comm .nl      { color: var(--comm); }

    .phrase .pron {
      font-size: 12px; color: var(--muted);
      font-style: italic;
      letter-spacing: 0.2px;
    }
    .phrase .copy {
      position: absolute; top: 12px; right: 12px;
      width: 28px; height: 28px;
      border-radius: 6px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 13px;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .phrase:hover .copy { opacity: 1; }
    .phrase .copy:hover { color: var(--text); border-color: var(--text); }
    .phrase .copy.copied {
      opacity: 1;
      color: var(--primary);
      border-color: var(--primary);
    }

    footer {
      max-width: 900px; margin: 0 auto;
      padding: 40px 24px;
      border-top: 1px solid var(--border);
      text-align: center; color: var(--muted); font-size: 13px;
    }
    footer .cta {
      display: inline-block;
      background: var(--primary); color: #04211a;
      padding: 12px 24px; border-radius: 8px;
      font-weight: 700; font-size: 14px;
      text-decoration: none; margin-top: 16px;
      transition: transform 0.15s ease;
    }
    footer .cta:hover { transform: translateY(-1px); }

    @media (max-width: 600px) {
      .hero { padding: 40px 16px 24px; }
      .container { padding: 12px 16px 60px; }
      .grid { grid-template-columns: 1fr; }
    }


/* === Auto-generated from inline style attrs in slowniczek.html (CSP M2 strict 2026-05-22) === */
.sl-6e900eb1 { margin-top: 24px; font-size: 11px; }
.sl-3b2ea3de { color: var(--muted); }