/* Extracted from index.html (style #1) */
/* --- Theme tokens (colors, shadows, radii) reused throughout the page --- */
    :root{
      --bg:#0f172a; --panel:#0b1220; --muted:#94a3b8; --text:#e5e7eb;
      --accent:#22c55e; --accent-2:#14b8a6; --border:#1f2937; --input:#0a1020;
      --ring:#1d2a3f; --shadow:0 12px 36px rgba(0,0,0,.35);
      --radius:18px;
    }

    /* Reset-ish */
    *{box-sizing:border-box}
    html,body{height:100%}

    /* Page background (dark gradient + optional background image) and base font */
    body{
      margin:0; color:var(--text); font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      background: radial-gradient(1200px 600px at 100% -10%, rgba(20,184,166,0.12), transparent 35%),
                  radial-gradient(800px 400px at -20% -10%, rgba(34,197,94,0.12), transparent 40%),
                  var(--bg);
      background-image:
        radial-gradient(1200px 600px at 100% -10%, rgba(20,184,166,0.12), transparent 35%),
        radial-gradient(800px 400px at -20% -10%, rgba(34,197,94,0.12), transparent 40%),
        url('../pictures/background.png');
      background-size: auto, auto, cover; background-position: center; background-attachment: fixed; background-repeat:no-repeat;
    }

    /* Sticky header/nav bar */
    header{
      position: sticky; top:0; z-index:100; backdrop-filter: blur(8px);
      background: rgba(15, 23, 42, 0.85) !important; border-bottom:1px solid var(--border);
    }
    .nav{ max-width:1100px; margin:0 auto; padding-right:12px; padding-left:16px; padding-top:30px; padding-bottom:30px; display:flex; align-items:center; gap:12px; }
    .brand{display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.3px; color:#e5e7eb; text-decoration:none; }
    .brand img{ width:60px; height:60px; border-radius:16px }
    .brand span{ font-size:30px; font-weight:700; line-height:1; }
    .nav-fill{ flex:1 } /* pushes items to the right */
    .nav-link { padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; color: var(--muted); text-decoration: none; }
    .nav-link:hover { background: #0b1220; color: var(--text); border-color: var(--border); text-decoration: none; }
    .nav-link:active { color: white; border-color: var(--accent-2); background: rgba(20,184,166,0.1); text-decoration: none; border-radius: 10px; }
    .nav-link.active { color: white; border-color: var(--accent-2); background: rgba(20,184,166,0.1); text-decoration: none; }

    /* Page container spacing */
    main{ max-width:1100px; margin:0 auto; padding:24px 16px 60px }

    /* Hero/top intro card */
    .hero{ display:grid; gap:16px; align-items:start; grid-template-columns:1fr }
    .hero-card{
      background: var(--panel); border:1px solid var(--border); border-radius:var(--radius);
      padding:22px; box-shadow:var(--shadow);
    }
    .hero h1{ font-size: clamp(24px, 4.2vw, 40px); margin:0 0 6px; color:var(--muted); text-decoration:none; }
    .lead{ color:var(--muted); margin:0 0 10px; text-decoration:none; }
    .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:#0a1222 }
    .ok{ color:var(--accent) }

    /* Section titles & category filter chips */
    .choose-category { text-align: left; font-size: 1.2rem; font-weight: 500; margin: 16px 0 8px; color: var(--muted); }
    .cat-title{
      margin: 22px 0 10px;
      font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: var(--muted); opacity: .9;
    }

    /* Cards grid */
    .grid{ display:grid; gap:12px; grid-template-columns: 1fr; margin-top:12px }
    @media (min-width:720px){ .grid{ grid-template-columns: repeat(3, 1fr) } }

    /* Individual converter cards */
    .card{
      background: linear-gradient(180deg, #0d1422, #0a111e); border:1px solid var(--border); border-radius:14px;
      padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.3);
      display:flex; flex-direction:column; gap:8px; justify-content:space-between;
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
      min-height:130px; text-decoration:none;
    }
    .card:hover{ transform: translateY(-2px); border-color:#1f3a2d; box-shadow:0 14px 40px rgba(0,0,0,.4) }
    .card h3{ margin:0; font-size:18px; color:var(--muted); font-weight:600; text-decoration:none; }
    .card p{ margin:0; color:var(--muted); font-size:14px; text-decoration:none; }
    .go{ margin-top:8px; align-self:flex-start; padding:8px 12px; border-radius:10px; border:1px solid var(--border);
         background:#0c1526; color:#e5e7eb; font-weight:700; text-decoration:none }
    .go:hover { background: linear-gradient(90deg, #f0f0f0, #bfbfbf); color: #0c1526; border: none; }

    /* Category pills */
    .pillbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin: 18px 0 4px; }
    .pill-btn { cursor: pointer; user-select: none; border: 1px solid var(--border); background: #0a1222; color: var(--text); padding: 8px 14px; border-radius: 999px; font-size: 14px; }
    .pill-btn.is-active{ border-color:#1f3a2d; background: linear-gradient(180deg, #0f1a2d, #0a1324); box-shadow: inset 0 0 0 1px rgba(34,197,94,.25); }

    /* Footer */
    footer{ max-width:1100px; margin:0 auto; padding:24px 16px 75px; color:var(--muted); font-size:12px; margin-bottom: 35px }
    .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }

    /* Mobile layout tweaks for small screens */

    @media (max-width: 430px) {
      html, body { overflow-x: hidden; }
      main { padding: 16px 12px 48px; }
      header { position: sticky; top: 0; }
      .nav-inner { padding: 10px 12px; gap: 8px; }
      .nav-flex .links { gap: 8px; justify-content: center; }
      h1 { font-size: 22px; line-height: 1.2; }
      h2 { font-size: 18px; line-height: 1.25; }
      p, .lead { font-size: 14px; }
      .grid-2, .grid-3 { grid-template-columns: 1fr !important; gap: 10px; }
      .stack { gap: 10px; }
      input[type="text"], input[type="number"], input[type="search"], input[type="email"], select, textarea {
        width: 100%; font-size: 16px; padding: 12px; border-radius: 12px;
      }
      button { width: 100%; padding: 12px 14px; border-radius: 12px; }
      .btn-row { gap: 8px; }
      .card { padding: 14px; border-radius: 14px; }
      .select, .dropdown { width: 100%; }
      .dropdown { max-height: 240px; }
      img, video, canvas, svg { max-width: 100%; height: auto; }
      table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .rate-pill { display: inline-block; margin-top: 6px; }
      [style*="width:"] { max-width: 100% !important; }
    }




/* --- iOS-safe fixed background: image lives in a fixed layer instead of body attachment --- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image: url('../pictures/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
  will-change: transform;
}
@media (hover: none) and (pointer: coarse){
  /* keep it fixed, but iOS renders this reliably as a separate layer */
  body::before{ position:fixed; }
}