/* 🔐 Přihlašovací obrazovky — návrh Bětky z 26. 8. 2026 (balíček „handoff").
 *
 * Barvy NEJSOU zapsané natvrdo: návrh je z naší palety odvozený (zelená #1a9e6f
 * i hnědá #3a3226 v něm sedí na token, béžová #efe7d6 taky), takže všechno jede
 * přes proměnné z `paleta.css`. Díky tomu funguje tmavý režim bez druhé kopie
 * stylů — a nemůže se stát, že po přepnutí zůstane svítivě bílá dlaždice.
 *
 * Písmo Nunito je z NAŠEHO serveru. V návrhu se tahalo z fonts.googleapis.com;
 * to by znamenalo, že prohlížeč každého učitele i dítěte kontaktuje Google, což
 * u dětských účtů nechceme (stejně jako u stránky „Jak to funguje").
 */

/* Nunito je variabilní font — jeden soubor pokryje váhy 400–800. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --zn-radius: 22px;
  --zn-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --zn-podklad: var(--inset-strong);   /* světlá béžová pod ilustrací */
  --zn-zavoj: 243, 236, 225;           /* barva závoje nad ilustrací (RGB kvůli průhlednosti) */
  --zn-scena: .40;                     /* jak silně je ilustrace vidět */
}
html.dark {
  --zn-podklad: var(--page);
  --zn-zavoj: 24, 28, 33;
  --zn-scena: .28;                     /* v tmavém režimu scéna ještě ustoupí */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background: var(--zn-podklad);
  color: var(--ink);
  font-family: var(--zn-font);
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; }

.zn-page { position: relative; display: flex; flex-direction: column;
           min-height: 100vh; overflow: hidden; background: var(--zn-podklad); }

/* ---- Pozadí: ilustrace ustupuje, dlaždice musí zůstat čitelná ---- */
.zn-bg { position: absolute; inset: 0; z-index: 0; }
.zn-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
             opacity: var(--zn-scena); filter: saturate(.85); }
.zn-bg-veil { position: absolute; inset: 0;
              background: radial-gradient(120% 90% at 50% 45%,
                rgba(var(--zn-zavoj), .86) 0%,
                rgba(var(--zn-zavoj), .72) 38%,
                rgba(var(--zn-zavoj), .90) 100%); }

/* ---- Horní lišta ---- */
.zn-topbar { position: relative; z-index: 2; min-height: 60px;
             display: flex; align-items: center; justify-content: space-between;
             gap: 12px; padding: 8px 32px; background: var(--bar);
             box-shadow: 0 2px 14px rgba(58, 50, 38, .25); }
.zn-brand { display: flex; align-items: center; gap: 6px;
            font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.zn-brand:hover { text-decoration: none; }
.zn-brand-mesec { width: 42px; height: auto; display: block; margin-right: 4px; }
.zn-brand-light { color: var(--inset-strong); }
.zn-brand-dark { color: var(--ink); }
html.dark .zn-brand-dark { color: var(--bar-ink); }

/* ---- Dlaždice s formulářem ---- */
.zn-main { position: relative; z-index: 1; flex: 1;
           display: flex; align-items: center; justify-content: center;
           padding: 40px 24px 80px; }
.zn-card { width: 100%; max-width: 420px; padding: 30px 34px;
           border: 1px solid var(--card-line); border-radius: var(--zn-radius);
           background: var(--card); backdrop-filter: blur(6px);
           box-shadow: 0 28px 70px -18px rgba(58, 50, 38, .45),
                       0 4px 14px rgba(58, 50, 38, .10); }
.zn-card-head { display: flex; flex-direction: column; align-items: center; gap: 6px;
                margin-bottom: 24px; }
/* 💰 Měšec nad nadpisem (Bětka 26. 8. 2026: „Nahoru k nadpisu přidej měšec"). */
.zn-mesec { width: 92px; height: auto; margin-bottom: 2px; }
.zn-card-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.3px;
                   color: var(--ink); text-align: center; }
.zn-card-head p { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }

.zn-fields { display: flex; flex-direction: column; gap: 14px; }
.zn-field { display: flex; flex-direction: column; gap: 6px; }
.zn-label { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; color: var(--muted); }
.zn-field input { height: 46px; padding: 0 14px; border: 1.5px solid var(--card-line);
                  border-radius: 12px; background: var(--inset);
                  font-family: inherit; font-size: 15px; color: var(--ink); outline: none; }
.zn-field input::placeholder { color: var(--faint); }
.zn-field input:focus { border-color: var(--green);
                        box-shadow: 0 0 0 3px rgba(26, 158, 111, .16); }
/* Kód od učitele se opisuje z papírku — velká písmena, rozestup, jednotná šířka číslic. */
.zn-field input.zn-kod { text-align: center; font-size: 20px; letter-spacing: .18em;
                         text-transform: uppercase; font-family: ui-monospace, SFMono-Regular,
                         Menlo, Consolas, monospace; }

.zn-row { display: flex; align-items: center; justify-content: space-between;
          gap: 12px; flex-wrap: wrap; }
.zn-check { display: flex; align-items: center; gap: 8px; font-size: 13px;
            color: var(--muted); cursor: pointer; }
.zn-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.zn-link-sm { font-size: 13px; font-weight: 600; }

.zn-submit { height: 50px; margin-top: 6px; width: 100%; border: 0; border-radius: 13px;
             background: var(--btn); color: var(--btn-ink); font-family: inherit;
             font-size: 16px; font-weight: 800; letter-spacing: .2px; cursor: pointer;
             box-shadow: 0 8px 20px -6px rgba(26, 158, 111, .6); }
.zn-submit:hover { background: var(--btn-hover); }
.zn-submit:active { transform: translateY(1px); }
.zn-submit--tmave { background: var(--ink-surface); color: var(--ink-surface-text);
                    box-shadow: 0 8px 20px -6px rgba(58, 50, 38, .5); }
.zn-submit--tmave:hover { background: var(--ink); }

.zn-note { margin: 0; font-size: 12px; color: var(--faint); text-align: center; }
.zn-card-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-line);
                text-align: center; font-size: 13.5px; color: var(--muted); }
.zn-card-foot a { font-weight: 700; }
.zn-card-foot p { margin: 0 0 6px; }
.zn-card-foot p:last-child { margin-bottom: 0; }

.zn-footer { position: relative; z-index: 1; padding: 0 24px 26px;
             text-align: center; font-size: 12.5px; color: var(--faint); }

/* ---- Informační pruh pod lištou (učitel na žákovském přihlášení) ---- */
.zn-subbar { position: relative; z-index: 2; padding: 8px 32px; text-align: center;
             background: var(--subbar); color: var(--subbar-ink); font-size: 14px; }

/* ---- Hlášky (špatné heslo, odeslaný e-mail…) ---- */
.zn-flash { position: relative; z-index: 2; width: 100%; max-width: 420px;
            margin: 20px auto -12px; padding: 0 24px; }
.zn-flash div { border-radius: 12px; border-left: 4px solid; padding: 11px 14px;
                margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.zn-flash .je-chyba { background: var(--red-soft); border-color: var(--red-ink);
                      color: var(--red-ink); }
.zn-flash .je-ok { background: var(--green-soft); border-color: var(--green);
                   color: var(--green-dark); }

@media (max-width: 560px) {
  .zn-topbar { padding: 8px 16px; }
  .zn-brand { font-size: 17px; }
  .zn-brand-mesec { width: 34px; }
  .zn-main { padding: 24px 16px 56px; }
  .zn-card { padding: 24px 22px; border-radius: 18px; }
  .zn-mesec { width: 76px; }
  .zn-flash { padding: 0 16px; }
}