:root{
      color-scheme: light dark;
      /* Paleta z załączonego pliku */
      --bg: #0b1020;
      --surface: rgba(255,255,255,0.06);
      --card: rgba(255,255,255,0.08);
      --text: #e9edf7;
      --muted: #a9b2c7;
      --primary: #6ea8fe;
      --primary-strong:#4a90ff;
      --ok:#22c55e;
      --warn:#f59e0b;
      --err:#ef4444;
      --radius: 18px;
      --ring: 0 0 0 6px color-mix(in srgb, var(--primary) 25%, transparent);
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --glass: blur(12px) saturate(120%);
    }
    @media (prefers-color-scheme: light){
      :root{
        --bg: #f2f5fb;
        --surface: rgba(255,255,255,0.8);
        --card: rgba(255,255,255,0.9);
        --text: #0c142a;
        --muted: #44506b;
        --shadow: 0 10px 30px rgba(10, 20, 60, .08);
      }
    }

    *{ box-sizing: border-box; }
    html, body{ height:100%; }
    body{
      margin: 0;
      display: grid; place-items: center;
      min-height: 100vh;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 100%, black) 0%, var(--bg) 0%);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    .wrap{ width:min(960px, 96vw); padding: 24px; }

    h1{ margin:0 0 14px; letter-spacing:.2px; }
    .sub{ color: var(--muted); margin:0 0 22px; }

    /* Pasek języka */
    .langbar{ /*display:flex; justify-content:flex-end; gap:10px;*/position: absolute;top:5px;right:5px; /*margin-bottom:16px;*/ }
    .langbar label{ align-self:center; color:var(--muted); font-size:14px; }
    .langbar select{
      appearance:none; -webkit-appearance:none; -moz-appearance:none;
      background: color-mix(in srgb, var(--card) 90%, transparent);
      color: var(--text);
      padding: 10px 12px; border-radius: var(--radius);
      border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass);
      cursor: pointer;
    }

    /* --- OKRĄGŁE MENU --- */
    .circle-menu{
      position: relative;
      width: min(520px, 90vw);
      height: min(520px, 90vw);
      border-radius: 50%;
      display: grid; place-items: center;
      margin-inline: auto;
    }
    .center-card{
      position: absolute;
      width: 58%; height: 58%;
      display: grid; place-items: center; text-align:center;
      padding: 18px;
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--card) 90%, transparent);
      border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass);
    }

    .tile{
      position: absolute;
      width: clamp(84px, 16vw, 110px);
      height: clamp(84px, 16vw, 110px);
      border-radius: 10%;
      background: color-mix(in srgb, var(--card) 80%, transparent);
      border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass);
      display: flex; flex-direction: column; align-items:center; justify-content:center;
      gap: 6px;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
      outline: none;
      color: var(--text);
    }
    .tile:hover{ transform: translateY(-1px); filter: brightness(1.05); }
    .tile:focus-visible{ box-shadow: var(--shadow), var(--ring); }
    .tile[aria-selected="true"]{
      border-color: color-mix(in srgb, var(--primary) 55%, transparent);
      box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 20%, transparent), var(--shadow);
      transform: scale(1.06);
    }
    .thumb{ width: 60%; aspect-ratio:1/1; border-radius: 50%; object-fit: cover; }
    .label{ font-weight:700; font-size: 12px; letter-spacing:.2px; }

    /* --- PANELE (opcjonalne) --- */
    .panels{ margin-top: 22px; max-width: 720px; margin-inline:auto; }
    .panel{
      display:none;
      padding: 18px 20px;
      border-radius: var(--radius);
      background: color-mix(in srgb, var(--card) 90%, transparent);
      border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
      box-shadow: var(--shadow);
      backdrop-filter: var(--glass);
    }
    .panel[aria-hidden="false"]{ display:block; }
    .panel h2{ margin:0 0 8px; font-size: 22px; }
    .panel p{ margin:0; color: var(--muted); }

.disabled-kafel{
      opacity: 0.1;
      pointer-events: none;
      cursor: not-allowed;
      filter: grayscale(1);
    }

    @media (max-width: 520px){ .center-card{ width:64%; height:64%; } }