/* login-styles.css — samowystarczalny port Logowanie.html (fonty self-host osobno).
   Ładowany WYŁĄCZNIE na stronie logowania; home.css tam NIE jest ładowany. */



    :root {
      --bg: #fafaf9; --card: #ffffff;
      --ink: #0a2530; --ink-2: #21333c; --ink-3: #7a8d95; --ink-4: #a7b6bc;
      --line: #e3e9eb; --line-2: #d3dadd;
      --primary: #0d4b5c; --primary-2: #1d738b; --primary-d: #08323e;
      --accent: #14a085; --warn: #cc3266;
      --ui: 'Onest', sans-serif;
      --body: 'Source Sans 3', sans-serif;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { height: 100%; }
    body { font-family: var(--body); color: var(--ink); background: var(--bg); }
    a { color: var(--primary-2); text-decoration: none; }
    a:hover { color: var(--primary); }

    .split { display: grid; grid-template-columns: minmax(460px, 44%) 1fr; min-height: 100vh; }

    /* ── lewa kolumna ── */
    .pane { display: flex; flex-direction: column; padding: 44px 56px 36px; background: var(--card); }
    .brand img { height: 30px; display: block; }

    .form-wrap { margin: auto 0; padding: 40px 0; max-width: 380px; width: 100%; align-self: center; }
    h1 { font-family: var(--ui); font-weight: 700; font-size: 30px; letter-spacing: -0.01em; line-height: 1.15; }
    .sub { margin-top: 8px; font-size: 15.5px; color: var(--ink-3); line-height: 1.5; }

    /* taby */
    .tabs {
      margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr;
      background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 4px; gap: 4px;
    }
    .tabs button {
      font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--ink-3);
      background: transparent; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .tabs button.on { background: var(--card); color: var(--primary); box-shadow: 0 1px 3px rgba(10,37,48,0.08); }

    form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
    .field { display: flex; flex-direction: column; gap: 7px; }
    .field label { font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--ink-2); }
    .hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
    .field input {
      font-family: var(--body); font-size: 15.5px; color: var(--ink);
      background: var(--card); border: 1px solid var(--line-2); border-radius: 10px;
      padding: 12px 14px; outline: none; width: 100%;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .field input::placeholder { color: var(--ink-4); }
    .field input:focus { border-color: var(--primary-2); box-shadow: 0 0 0 3px rgba(29,115,139,0.12); }
    .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
    .remember { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; user-select: none; }
    .remember input { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }
    .row a { font-weight: 500; }

    /* typ konta */
    .acct { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .acct button {
      font-family: var(--ui); font-weight: 600; font-size: 13.5px; color: var(--ink-2);
      background: var(--card); border: 1px solid var(--line-2); border-radius: 10px;
      padding: 11px 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .acct button.on { border-color: var(--primary-2); background: rgba(29,115,139,0.07); color: var(--primary); }

    .consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
    .consent input { accent-color: var(--primary); width: 15px; height: 15px; margin-top: 2px; flex: none; cursor: pointer; }

    .submit {
      margin-top: 4px;
      font-family: var(--ui); font-weight: 600; font-size: 15.5px; color: #fff;
      background: var(--primary); border: 0; border-radius: 10px;
      padding: 13px 16px; cursor: pointer; transition: background 0.15s, opacity 0.15s;
    }
    .submit:hover { background: var(--primary-d); }
    .submit:disabled { opacity: 0.45; cursor: not-allowed; }

    .alt { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-3); }
    .alt button { font-family: var(--ui); font-weight: 600; font-size: 14.5px; color: var(--primary-2); background: none; border: 0; cursor: pointer; padding: 0; }
    .alt button:hover { color: var(--primary); }

    .foot { font-size: 12.5px; color: var(--ink-4); display: flex; gap: 16px; flex-wrap: wrap; }
    .foot a { color: var(--ink-3); }
    .foot a:hover { color: var(--primary); }

    [hidden] { display: none !important; }

    /* ── prawa kolumna: obraz ── */
    .visual { position: relative; overflow: hidden; }
    .visual img.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
    .visual::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(200deg, rgba(13,75,92,0.10) 0%, rgba(13,75,92,0.42) 62%, rgba(8,50,62,0.78) 100%);
    }
    .claim { position: absolute; left: 52px; right: 52px; bottom: 46px; z-index: 2; color: #fff; max-width: 520px; }
    .claim .k { font-family: var(--ui); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
    .claim h2 { margin-top: 10px; font-family: var(--ui); font-weight: 600; font-size: 30px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }

    @media (max-width: 900px) {
      .split { grid-template-columns: 1fr; }
      .visual { display: none; }
      .pane { padding: 32px 24px 28px; min-height: 100vh; }
    }
  

/* Komunikaty błędów logowania/rejestracji (strona ładuje tylko ten arkusz). */
.of-alert { padding: 11px 14px; border-radius: 9px; font-size: 14px; margin-bottom: 4px;
  background: rgba(204,50,102,0.08); border: 1px solid rgba(204,50,102,0.35); color: #8f2247; }