/* Ekran logowania panelu (/panel/) w stylu nowej strony: papier/atrament + ogień, Inter Tight,
   Playfair (logo), Sometype Mono. Dokładany przez scripts/cf-build.mjs po /css/panel.css —
   tylko tokeny i wygląd; znaczniki, id i JS panelu zostają bez zmian. */

html:has(.auth-split) {
  --bg: #161616; --bg-2: #1e1e1e;
  --surface: #232323; --surface-2: #161616;
  --border: rgba(244,244,244,.12); --border-2: rgba(244,244,244,.22); --border-3: rgba(244,244,244,.4);
  --txt: #f4f4f4; --muted: #b4b4b4; --faint: #9a9a9a;
  --accent: #ff4d1f; --accent-2: #ff6a42; --accent-soft: rgba(255,77,31,.18);
  --btn-bg: #f4f4f4; --btn-fg: #1e1e1e;
  --sans: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --head: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --mono: "Sometype Mono", ui-monospace, Menlo, monospace;
  --serif: "Playfair Display", Georgia, serif;
  --glow: none; --shadow-lg: none; --inset-hi: none;
  --r-card: 0; --r-ctrl: 0; --r-sm: 0; --r-xs: 0;
}
html.html-light-mode:has(.auth-split) {
  --bg: #f4f4f4; --bg-2: #1e1e1e;
  --surface: #ffffff; --surface-2: #f4f4f4;
  --border: rgba(61,61,61,.16); --border-2: rgba(61,61,61,.3); --border-3: rgba(61,61,61,.55);
  --txt: #1e1e1e; --muted: #5c5c5c; --faint: #6e6e6e;
  --accent: #ff4d1f; --accent-2: #d93a10; --accent-soft: rgba(255,77,31,.14);
  --btn-bg: #1e1e1e; --btn-fg: #f4f4f4;
}
html:has(.auth-split) body { background: var(--bg); color: var(--txt); font-family: var(--sans); }

/* ── lewa kolumna: zawsze ciemna scena z cząsteczkami ── */
.auth-split { grid-template-columns: 1.1fr 1fr; }
.auth-hero,
html.html-light-mode .auth-hero {
  background: radial-gradient(70% 55% at 85% 100%, rgba(255,77,31,.16), rgba(255,77,31,0) 70%), #1e1e1e;
  color: #f4f4f4; border-right: 0; padding: clamp(28px, 4vw, 56px); gap: 32px;
}
.auth-hero .ah-logo {
  font-family: var(--serif); font-weight: 900; font-size: 30px; letter-spacing: -.01em;
  text-transform: uppercase; line-height: 1; display: inline-block; align-self: flex-start;
}
.auth-hero .ah-logo span, .auth-pane .pane-logo span { color: inherit; }
.auth-hero .ah-logo::after, .auth-pane .pane-logo::after {
  content: ""; display: block; height: 4px; margin-top: 6px;
  background: linear-gradient(90deg, currentColor 0 33%, transparent 33% 66%, #ff4d1f 66%);
}
.auth-hero h1 {
  font-family: var(--sans); font-weight: 500; font-size: clamp(40px, 5.2vw, 84px);
  line-height: .95; letter-spacing: -.05em; margin: 0 0 22px; color: #ff4d1f;
}
.auth-hero h1::first-line { color: #f4f4f4; }
.auth-hero .ah-lead { color: rgba(244,244,244,.7); font-size: 18px; max-width: 44ch; }
.auth-feats { gap: 0 24px; margin-top: 32px; border-top: 1px solid rgba(244,244,244,.15); }
.auth-feats li {
  color: #f4f4f4; font-size: 15px; padding: 14px 0 14px 22px;
  border-bottom: 1px solid rgba(244,244,244,.15);
}
.auth-feats li::before { top: 50%; margin-top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #ff4d1f; }
.auth-foot, html.html-light-mode .auth-foot { font-family: var(--mono); color: rgba(244,244,244,.55); letter-spacing: .14em; }
.ah-vid .ah-vid-t { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,244,244,.7); }

/* ── prawa kolumna: czysta kartka, bez szkła i cieni ── */
.auth-pane { background: var(--bg); }
.auth-pane .pane-inner { background: transparent; border: 0; box-shadow: none; padding: 32px 0; max-width: 460px; }
.auth-pane .pane-logo { font-family: var(--serif); font-weight: 900; text-transform: uppercase; font-size: 26px; display: none; width: max-content; margin: 0 auto 10px; }
.auth-pane .eyebrow,
html.html-light-mode .auth-pane .eyebrow {
  font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .2em; text-align: left;
  display: flex; align-items: center; gap: 10px; margin-bottom: 26px;
}
.auth-pane .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4d1f; }

.auth-pane .tabs,
html.html-light-mode .auth-pane .tabs {
  background: transparent; border: 0; border-bottom: 1px solid var(--border-2); padding: 0; gap: 28px; margin-bottom: 20px;
}
.auth-pane .tab {
  flex: 0 0 auto; padding: 0 0 12px; font-family: var(--sans); font-size: 28px; font-weight: 500;
  letter-spacing: -.04em; color: var(--faint); background: none; box-shadow: none;
}
.auth-pane .tab.active { background: none; color: var(--txt); box-shadow: inset 0 -3px 0 #ff4d1f; }
.auth-pane .tab::after, .auth-pane .tab::before { display: none; }

.auth-pane label { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.auth-pane input:not([type=checkbox]):not([type=radio]) {
  background: transparent; border: 0; border-bottom: 1px solid var(--border-3); border-radius: 0;
  padding: 12px 2px; font-family: var(--sans); font-size: 18px; color: var(--txt); box-shadow: none;
}
.auth-pane input:not([type=checkbox]):not([type=radio]):focus { border-bottom-color: #ff4d1f; box-shadow: 0 1px 0 #ff4d1f; }
.auth-pane input[type=checkbox] { accent-color: #ff4d1f; }
.auth-pane label:has(input[type=checkbox]) { font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--txt); }

.auth-split .btn, .modal .btn {
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); border-radius: 0; box-shadow: none; filter: none;
  font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; padding: 16px 22px;
  transition: background .25s, border-color .25s, color .25s;
}
.auth-split .btn:hover, .modal .btn:hover { background: #ff4d1f; border-color: #ff4d1f; color: #1e1e1e; transform: none; box-shadow: none; filter: none; }
.auth-split .btn::after, .modal .btn::after { display: none; }
.auth-split .btn:focus-visible { outline: 2px solid #ff4d1f; outline-offset: 3px; }

.or-sep { font-family: var(--mono); color: var(--faint); }
.btn-google { border-radius: 0; box-shadow: none; border: 1px solid var(--border-3); background: transparent; color: var(--txt); font-family: var(--sans); font-weight: 500; padding: 14px; }
.btn-google:hover { border-color: var(--txt); transform: none; box-shadow: none; }

.auth-pane .demo-entry, html.html-light-mode .auth-pane .demo-entry { background: transparent; filter: none; transform: none; border-radius: 0; }
.demo-entry { display: block; padding: 14px 16px; border: 1px dashed var(--border-3); color: var(--txt); text-decoration: none; font-size: 14px; line-height: 1.45; transition: border-color .25s, color .25s; }
.demo-entry:hover { border-color: #ff4d1f; }
.auth-pane .demo-entry b, html.html-light-mode .auth-pane .demo-entry b { color: #ff4d1f; font-weight: 600; }
.auth-pane a.ww-muted:hover { color: #ff4d1f; }
.auth-pane .auth-about-m { border-radius: 0; background: transparent; border-color: var(--border-2); }
.auth-pane .auth-about-m summary { background: transparent; color: var(--txt); font-weight: 500; }
.auth-about-m .aam-body li::before { background: #ff4d1f; }

.ww-theme-tgl { border-radius: 50%; background: var(--surface); }
.modal { border-radius: 0; }

/* niski ekran laptopa (1366×768): całość bez przewijania — ciaśniejsze odstępy, mniejszy nagłówek i film */
@media (min-width: 901px) and (max-height: 860px) {
  .auth-hero, html.html-light-mode .auth-hero { padding: 24px clamp(28px, 4vw, 56px); gap: 16px; }
  .auth-hero h1 { font-size: clamp(36px, 4.4vw, 64px); margin-bottom: 12px; }
  .auth-hero .ah-lead { font-size: 16px; }
  .ah-vid { max-width: 400px; }
  .auth-feats { margin-top: 12px; }
  .auth-feats li { padding: 9px 0 9px 22px; }
  .auth-pane .pane-inner { padding: 12px 0; }
  .auth-pane .eyebrow { margin-bottom: 14px; }
  .auth-pane .tabs { margin-bottom: 14px; }
  .auth-pane input:not([type=checkbox]):not([type=radio]) { padding: 9px 2px; }
  .auth-split .btn { padding: 13px 22px; }
}

@media (max-width: 900px) {
  .auth-pane .pane-inner { padding: 8px 0; }
  .auth-pane .pane-logo { display: block; }
  .auth-pane .tab { font-size: 24px; }
}