:root{
      --bg1: #f8f5ff;
      --bg2: #f1f8ff;
      --card-bg: rgba(255,255,255,0.06);
      --accent: linear-gradient(135deg,#7c3aed 0%,#06b6d4 100%);
      --glass: rgba(255,255,255,0.04);
      --text: #3b305f;
      --muted: #292236;
      --btn-bg: #ffffff;
      --btn-bg-hover: #f3f0ff;
      --btn-radius: 35px;
      font-family: 'Quicksand', 'Raleway', sans-serif;
    }

    /*html,body{height:100%;margin:0;background:radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.12), transparent), radial-gradient(900px 500px at 90% 90%, rgba(6,182,212,0.08), transparent), linear-gradient(180deg,var(--bg1),var(--bg2)); color:var(--text)}*/
    html,body{
      height:100%;
      margin:0;
      color:var(--text);
      /* Użyj koloru tła jako fallback podczas ładowania obrazu */
      background-color: var(--bg1);
      background-image: radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.08), transparent), radial-gradient(900px 500px at 90% 90%, rgba(6,182,212,0.05), transparent), url('../img/bg.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
    }
    
    .wrap{
      min-height:100%;display:flex;align-items:center;justify-content:center;padding: 0 10px;
    }

    .card{
      width:100%;
      max-width:520px;
    /*background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:20px;padding:36px 28px;backdrop-filter: blur(6px);box-shadow: 0 8px 30px rgba(2,6,23,0.1)*/;
    }

    .top{
      display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:22px;
    }

    .logo img {
    max-width: 200px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    }

    .header-text {
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(px);
      border-radius: 5px;
      padding: 16px 24px;
      margin-top: 16px;
      /*border: 1px solid rgba(255, 255, 255, 0.2);*/
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    h1{font-size:20px;margin:0 0 6px 0;letter-spacing:0.2px;color: var(--text);}
    p.lead{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
    
    .links{display:flex;flex-direction:column;gap:20px;padding:6px 2px;margin-top:18px}

    .link{
      position: relative;
      display:flex;align-items:center;padding:14px 16px;min-height:35px;border-radius:var(--btn-radius);background:var(--btn-bg);text-decoration:none;color:#0b1220;font-weight:600;box-shadow: 0 2px 6px rgba(0,0,0,0.1);transition: all 0.25s ease;
    }
    .link:hover{transform: scale(1.03); background: var(--btn-bg-hover);}

    /* Poprawa dostępności: wyraźny wskaźnik fokusu dla nawigacji klawiaturą */
    .link:focus-visible {
      outline: 2px solid var(--text);
      outline-offset: 2px;
    }

    .link .icon{
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;
    }
    .link .icon svg{width:25px;height:25px;stroke:#6b6b8d}
    .link span{flex:1;text-align:center}
    .link small{display:block;color:#667085;font-weight:500;font-size:12px;margin-top:2px;color: #6b6b8d;}

    .link img {
    width: 20px;
    height: 20px;
    }

    /* subtle divider & footer */
    .meta{margin-top:18px;text-align:center;color:var(--muted);font-size:12px}

    /* responsive */
    @media (max-width:420px){.card{padding:22px}.logo{width:150px;height:150px}.link{padding:12px}}

    .modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    z-index: 100;
    }

    .modal[hidden] {
    display: none;
    }

    .modal-content {
    position: relative;
    background: #fff;
    color: #111;
    padding: 24px 32px;
    margin: 0 15px;
    border-radius: 16px;
    max-width: 750px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease;
    }

    .modal-content h2 {
    color: #3a2d64;
    }

    .close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    }

    .close:hover {
    color: #000;
    }

    @keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
    }