/* =========================================================
   BRANDING AULA – jasny, błękitno-biały styl gamingowy
   ========================================================= */
:root {
  --brand-bg: #e6f0fb;
  --brand-bg-2: #c9def5;
  --brand-surface: rgba(255, 255, 255, 0.74);
  --brand-surface-solid: #ffffff;
  --brand-surface-2: #eef5fd;
  --brand-border: rgba(255, 255, 255, 0.95);
  --brand-line: #d3e2f3;
  --brand-text: #0d1a2e;          /* granat jak klawisze Esc/Enter */
  --brand-muted: #5d6f8a;
  --brand-accent: #1f7bff;        /* błękit Aula */
  --brand-accent-2: #6fc3ff;
  --brand-accent-ink: #ffffff;
  --brand-key: #121a2b;           /* czarny klawisz */
  --brand-key-2: #2a3448;
  --rgb: linear-gradient(90deg, #36e0ff, #2f8cff 30%, #8a7dff 60%, #ff74d4 85%, #36e0ff);
  --brand-gold: #e0a400;
  --brand-silver: #8b9ab0;
  --brand-bronze: #c4733a;
  --danger: #e5336b;
  --shadow: 0 24px 60px rgba(31, 92, 170, 0.16), 0 2px 6px rgba(31, 92, 170, 0.08);
  --font-display: 'Rajdhani', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--brand-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background:
    /* smugi światła jak na zdjęciach produktowych */
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.75) 44%, transparent 52%),
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.55) 62%, transparent 68%),
    radial-gradient(1200px 700px at 80% -10%, #ffffff 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(111, 195, 255, .35), transparent 60%),
    linear-gradient(160deg, #f8fbff 0%, var(--brand-bg) 45%, var(--brand-bg-2) 100%);
  background-attachment: fixed;
}

/* ---------- Logo Aula (pliki z public/img/logo) ---------- */
.logo { display: block; height: 56px; width: auto; user-select: none; -webkit-user-drag: none; }
.logo-lg { height: 72px; }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; margin: 0; }
.muted { color: var(--brand-muted); }
.accent { color: var(--brand-accent); }
.accent-grad {
  background: linear-gradient(90deg, #1f7bff, #36b8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Karty „szkło” ---------- */
.card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- Przycisk jak czarny klawisz z podświetleniem ---------- */
.btn {
  position: relative;
  appearance: none;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--brand-key-2), var(--brand-key));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 26px;
  cursor: pointer;
  box-shadow: 0 6px 0 #05080f, 0 14px 30px rgba(18, 26, 43, .28), 0 0 0 2px rgba(111,195,255,.0);
  transition: transform .08s ease, box-shadow .15s ease;
}
.btn::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 16px;
  background: var(--rgb);
  z-index: -1;
  opacity: 0;
  filter: blur(8px);
  transition: opacity .2s ease;
}
.btn:hover::after, .btn:focus-visible::after { opacity: .85; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #05080f, 0 8px 18px rgba(18, 26, 43, .25); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost {
  background: rgba(255,255,255,.8);
  color: var(--brand-text);
  border: 1px solid var(--brand-line);
  box-shadow: 0 4px 0 #c9d8ea, 0 10px 20px rgba(31,92,170,.1);
}

input[type="text"], input[type="email"], input[type="password"], input[inputmode="numeric"] {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--brand-line);
  border-radius: 14px;
  color: var(--brand-text);
  font: inherit;
  font-size: 17px;
  padding: 14px 16px;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(31,92,170,.06);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 4px rgba(31,123,255,.15); }

.error { color: var(--danger); font-size: 15px; font-weight: 500; min-height: 1.2em; }
.hidden { display: none !important; }

/* Pasek RGB jak podświetlenie klawiatury */
.rgb-line { height: 4px; border-radius: 4px; background: var(--rgb); background-size: 200% 100%; animation: rgb-flow 6s linear infinite; }
@keyframes rgb-flow { to { background-position: 200% 0; } }