/* ============================================================== tokeny === */
:root {
  color-scheme: light dark;
  --bg:         #f2f3f6;
  --surface:    #ffffff;
  --surface-2:  #f7f8fa;
  --text:       #14171d;
  --muted:      #626b7a;
  --faint:      #8d95a3;
  --border:     #e3e6ec;
  --border-2:   #cdd3dd;
  --accent:     #4f46e5;
  --accent-ink: #ffffff;
  --accent-sub: #eef0fe;
  --ok:         #067647;
  --ok-bg:      #ecfdf3;
  --ok-border:  #a9e5c3;
  --bad:        #b42318;
  --bad-bg:     #fef3f2;
  --bad-border: #f5c2bd;
  --warn:       #b54708;
  --warn-bg:    #fffaeb;
  --warn-border:#f5d492;
  --shadow:     0 1px 2px rgb(16 24 40 / .06), 0 8px 24px rgb(16 24 40 / .06);
  --radius:     14px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0d0f13;
    --surface:    #161920;
    --surface-2:  #1c202a;
    --text:       #e9ebef;
    --muted:      #9aa3b2;
    --faint:      #79828f;
    --border:     #262b36;
    --border-2:   #343b49;
    --accent:     #7c7cf5;
    --accent-ink: #0d0f13;
    --accent-sub: #1e2036;
    --ok:         #5fd39b;
    --ok-bg:      #10241c;
    --ok-border:  #1f4d3a;
    --bad:        #ff9d95;
    --bad-bg:     #2a1614;
    --bad-border: #5a2b26;
    --warn:       #f5c26b;
    --warn-bg:    #2a2113;
    --warn-border:#584327;
    --shadow:     0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .28);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15.5px/1.6 var(--sans);
}

a { color: var(--accent); }

[hidden] { display: none !important; }

/* ============================================================ logowanie === */
body.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.card h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.01em; }
.sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 4px; margin-bottom: 20px;
}
.tabs button {
  border: 0; background: transparent; color: var(--muted);
  padding: 8px; border-radius: 7px; font: inherit; font-weight: 500; cursor: pointer;
}
.tabs button[aria-selected="true"] {
  background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

input[type=text], input[type=password], input[type=email], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-2);
  border-radius: 9px; background: var(--surface); color: var(--text);
  font: inherit;
}
input[type=text], input[type=password], input[type=email] { margin-bottom: 16px; }
:is(input, textarea, select):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}

button.primary {
  padding: 11px 18px; border: 0; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 650; cursor: pointer;
}
button.primary:hover { filter: brightness(1.08); }
button.primary:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.card button.primary { width: 100%; }

button.ghost {
  padding: 9px 16px; border: 1px solid var(--border-2); border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
button.ghost:hover { background: var(--surface-2); }

.hint { margin: 0 0 16px; font-size: 12.5px; color: var(--muted); }

.msg { display: none; margin: 0 0 16px; padding: 10px 12px; border-radius: 9px; font-size: 13.5px; }
.msg.show { display: block; }
.msg.error { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad-border); }
.msg.ok    { background: var(--ok-bg);  color: var(--ok);  border: 1px solid var(--ok-border); }
.msg.info  { background: var(--accent-sub); color: var(--accent); border: 1px solid var(--border-2); }

/* =========================================================== szkielet ==== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 940px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 16px;
}
.brand {
  font-weight: 700; letter-spacing: -.02em; font-size: 16px;
  text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 8px;
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent);
  color: var(--accent-ink); display: grid; place-items: center; font-size: 14px;
}
/* znak graficzny ma własne zaokrąglenie i tło, więc nie dokładamy mu ramki */
.brand-znak { display: block; border-radius: 7px; }
.topbar nav { display: flex; gap: 4px; margin-left: 8px; }
.topbar nav a {
  padding: 6px 11px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: 14px; font-weight: 500;
}
.topbar nav a:hover { background: var(--surface-2); color: var(--text); }
.topbar nav a[aria-current="page"] { background: var(--accent-sub); color: var(--accent); }
.spacer { flex: 1; }
.who { font-size: 13.5px; color: var(--muted); }

main { max-width: 940px; margin: 0 auto; padding: 28px 20px 80px; }

h1.page { margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
p.lede { margin: 0 0 26px; color: var(--muted); }

/* ============================================================ egzaminy === */
.exam-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.exam-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: transform .12s ease, border-color .12s ease;
}
.exam-card:hover { transform: translateY(-2px); border-color: var(--border-2); }

.exam-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.exam-card h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.exam-card .year { color: var(--faint); font-size: 13px; font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.pill.subject-matematyka      { background: #eef0fe; color: #4338ca; border-color: #d5d9fb; }
.pill.subject-jezyk-polski    { background: #fdf2f8; color: #a1185c; border-color: #f7cfe3; }
.pill.subject-jezyk-angielski { background: #ecfdf5; color: #04785a; border-color: #b6e8d6; }
@media (prefers-color-scheme: dark) {
  .pill.subject-matematyka      { background: #1e2036; color: #a5a9ff; border-color: #2e3358; }
  .pill.subject-jezyk-polski    { background: #2a1522; color: #f7a8cf; border-color: #4a2138; }
  .pill.subject-jezyk-angielski { background: #0f2620; color: #6fdcb4; border-color: #1d4437; }
}

.meta-row { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 13px; }
.meta-row b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.best {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 13px; color: var(--muted);
}
.best b { color: var(--ok); }

/* ============================================================== egzamin == */
.exam-head {
  position: sticky; top: 51px; z-index: 30;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  margin: -28px -20px 24px; padding: 12px 20px;
}
.exam-head-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.exam-head h1 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.timer {
  font-variant-numeric: tabular-nums; font-weight: 650; font-size: 15px;
  padding: 5px 11px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
}
.timer.low { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.progress-text { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-bar { height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; flex-basis: 100%; }
.progress-bar > i { display: block; height: 100%; background: var(--accent); transition: width .25s ease; }

.audio-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 22px; box-shadow: var(--shadow);
}
.audio-box h3 { margin: 0 0 4px; font-size: 15px; }
.audio-box p { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.audio-box audio { width: 100%; }

.task {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow);
  scroll-margin-top: 120px;
}
.task-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.task-no {
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  padding: 3px 10px; border-radius: 8px; background: var(--accent-sub); color: var(--accent);
}
.task-points { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.prose { line-height: 1.68; }
.prose p { margin: 0 0 .85em; }
.prose > :last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 .85em; padding-left: 1.4em; }
.prose table { border-collapse: collapse; margin: .6em 0; font-size: 14.5px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border-2); padding: 6px 10px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 600; }
.prose blockquote {
  margin: 0 0 .85em; padding: 2px 0 2px 16px; border-left: 3px solid var(--border-2); color: var(--muted);
}

.intro {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 11px; padding: 16px 18px; margin-bottom: 16px;
}
.instruction { font-weight: 600; margin: 16px 0 12px; }

figure.fig { margin: 16px 0; text-align: center; }
figure.fig img {
  max-width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; padding: 6px;
}
figure.fig figcaption { margin-top: 6px; font-size: 12px; color: var(--faint); }

.part { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); }
.task .part:first-of-type { margin-top: 14px; padding-top: 0; border-top: 0; }
.part-no { font-weight: 650; color: var(--muted); font-size: 13.5px; margin-bottom: 6px; }
.part-prompt { margin-bottom: 12px; }

.options { display: grid; gap: 8px; }
.options.inline { grid-auto-flow: column; grid-auto-columns: max-content; gap: 10px; }

.opt {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px; border: 1px solid var(--border-2); border-radius: 10px;
  cursor: pointer; background: var(--surface); transition: border-color .1s, background .1s;
}
.opt:hover { border-color: var(--accent); background: var(--surface-2); }
.opt input { margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-sub); }
.opt .label { font-weight: 700; min-width: 1.2em; }
.opt .body { flex: 1; min-width: 0; }
.opt img { max-width: 100%; border-radius: 6px; }

textarea.answer {
  min-height: 110px; resize: vertical; font-size: 15px; line-height: 1.6;
  font-family: var(--sans);
}
textarea.answer.long { min-height: 320px; }
.answer-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--faint); }

.submit-bar {
  position: sticky; bottom: 0; margin: 26px -20px -80px; padding: 16px 20px 24px;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  display: flex; justify-content: center; gap: 12px; align-items: center;
}

.confirm {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); max-width: 460px; margin: 28px auto 40px;
}
.confirm h3 { margin: 0 0 6px; font-size: 16px; }
.confirm p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.confirm .row { display: flex; gap: 10px; }

/* =============================================================== wynik === */
.score-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.ring { position: relative; width: 108px; height: 108px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring .track { stroke: var(--border); }
.ring .fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ring .pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.score-info h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
.score-info .big { font-size: 15px; color: var(--muted); }
.score-info .big b { color: var(--text); font-variant-numeric: tabular-nums; }
.breakdown { display: flex; gap: 18px; margin-top: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.badge.ok   { background: var(--ok-bg);  color: var(--ok);   border: 1px solid var(--ok-border); }
.badge.bad  { background: var(--bad-bg); color: var(--bad);  border: 1px solid var(--bad-border); }
.badge.part { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); }
/* Odczyt pisma ręcznego ze zdjęć jest w wersji beta: mały znacznik przy nagłówku i nota pod nim. */
.badge.beta {
  background: var(--accent-sub); color: var(--accent); border: 1px solid transparent;
  font-size: 10.5px; letter-spacing: .06em; padding: 1px 7px; vertical-align: middle;
}
.nota-beta, .scan-banner .nota-beta {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.profile-note .nota-beta { margin: -2px 0 12px; }

.task.graded-ok  { border-left: 4px solid var(--ok); }
.task.graded-bad { border-left: 4px solid var(--bad); }
.task.graded-part{ border-left: 4px solid var(--warn); }

.your-answer {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: 10px 0; white-space: pre-wrap; font-size: 14.5px;
}
.your-answer.empty { color: var(--faint); font-style: italic; }

.feedback {
  border-radius: 10px; padding: 13px 15px; margin: 10px 0 0; font-size: 14.5px;
  background: var(--accent-sub); border: 1px solid var(--border);
}
.feedback h4 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.feedback p { margin: 0 0 .6em; white-space: pre-wrap; }
.feedback > :last-child { margin-bottom: 0; }

details.more { margin-top: 12px; }
details.more summary {
  cursor: pointer; font-size: 13.5px; color: var(--muted); font-weight: 600;
  padding: 6px 0; user-select: none;
}
details.more summary:hover { color: var(--text); }
details.more .box {
  margin-top: 8px; padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px; white-space: pre-wrap;
}

.correct-line { font-size: 14px; margin: 8px 0 0; }
.correct-line b { color: var(--ok); }

/* ============================================================ historia === */
table.history { width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.history th, table.history td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; }
table.history th { background: var(--surface-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; }
table.history tr:last-child td { border-bottom: 0; }
table.history td.num { font-variant-numeric: tabular-nums; }
table.history tr:hover td { background: var(--surface-2); }

.empty-state {
  text-align: center; padding: 60px 20px; color: var(--muted);
  background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--radius);
}
.empty-state h2 { margin: 0 0 6px; font-size: 18px; color: var(--text); }

.footnote { margin-top: 34px; font-size: 12.5px; color: var(--faint); text-align: center; line-height: 1.7; }
.footnote a { color: var(--muted); }

.spinner {
  width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; display: inline-block; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 620px) {
  main { padding: 20px 14px 70px; }
  .task { padding: 18px 16px; }
  .exam-head { margin: -20px -14px 20px; padding: 10px 14px; top: 51px; }
  .submit-bar { margin: 22px -14px -70px; padding: 14px 14px 20px; }
  .options.inline { grid-auto-flow: row; }
}

/* --- ocena zadań otwartych: skąd się bierze --- */
.pill.ai-pill {
  background: var(--accent-sub); color: var(--accent); border-color: transparent;
  font-weight: 600;
}
.feedback .graded-by {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted); white-space: normal;
}
.ai-note {
  margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55;
  padding-left: 11px; border-left: 2px solid var(--border-2);
}
details.more .box-label {
  margin-top: 12px; font-size: 12px; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .045em;
}
details.more .box-label + .box { margin-top: 5px; }

/* --- prośba o uzupełnienie e-maila na starym koncie --- */
.notice {
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px;
}
.notice b { font-size: 14.5px; }
.notice p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.notice-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.notice-row input { flex: 1; min-width: 220px; margin: 0; }
.notice-row button { flex-shrink: 0; }
.notice .msg { margin: 12px 0 0; }

/* --- potwierdzanie konta linkiem (serwis nie wysyła poczty) --- */
.verify-note {
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn);
  border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.55;
  margin-bottom: 18px;
}
.link-label {
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .045em;
  color: var(--muted); margin-bottom: 6px;
}
.link-box {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 11px 12px; margin-bottom: 16px;
  word-break: break-all; user-select: all; color: var(--text);
}
.card button.verify-copy { margin-top: 8px; width: 100%; }
.verify-ok {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 26px; font-weight: 700;
  background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border);
}

/* --- eksport arkusza do PDF --- */
.exam-card-wrap { display: flex; flex-direction: column; }
.exam-card-wrap .exam-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.card-actions {
  display: flex; border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius); overflow: hidden;
  background: var(--surface-2);
}
.card-actions a {
  flex: 1; text-align: center; padding: 9px 8px; font-size: 13px; font-weight: 550;
  text-decoration: none; color: var(--muted);
}
.card-actions a:hover { background: var(--surface); color: var(--accent); }
.card-actions a + a { border-left: 1px solid var(--border); }

a.pdf-link {
  padding: 5px 11px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted);
  font-size: 13px; font-weight: 550; text-decoration: none; white-space: nowrap;
}
a.pdf-link:hover { color: var(--accent); border-color: var(--accent); }

/* --- krótkie potwierdzenie po pobraniu --- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 16px);
  z-index: 90; max-width: min(460px, calc(100vw - 32px));
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 11px;
  padding: 11px 16px; font-size: 13.5px; line-height: 1.5;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- tagi umiejętności przy zadaniu --- */
.task-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.task-tags .tag {
  font-size: 11.5px; font-weight: 550; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}

/* --- podpowiedzi --- */
.hints { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.hint-list { display: grid; gap: 10px; }
.hint-list:not(:empty) { margin-bottom: 12px; }
.hint {
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: 10px; padding: 12px 14px;
}
.hint-no {
  display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--warn); margin-bottom: 5px;
}
.hint p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.hint-error {
  background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad);
  border-radius: 10px; padding: 10px 13px; font-size: 13.5px;
}
button.hint-btn {
  padding: 9px 16px; border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 550; cursor: pointer;
}
button.hint-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.hint-btn:disabled { opacity: .5; cursor: not-allowed; }
.hint-note { margin: 9px 0 0; font-size: 12px; color: var(--faint); line-height: 1.55; }

/* --- profil ucznia --- */
.profile-note {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 22px; box-shadow: var(--shadow);
}
.profile-note h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.profile-note .summary { margin: 0 0 18px; font-size: 15px; line-height: 1.65; }
.note-cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.note-col h3 {
  margin: 0 0 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
}
.note-col.ok h3   { color: var(--ok); }
.note-col.bad h3  { color: var(--bad); }
.note-col.warn h3 { color: var(--warn); }
.note-col ul { margin: 0; padding-left: 17px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.note-col li { margin-bottom: 5px; }
.note-foot { margin: 18px 0 14px; font-size: 12px; color: var(--faint); }

.skills {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.skills h2 {
  margin: 0 0 16px; font-size: 15px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.skill { margin-bottom: 16px; }
.skill:last-child { margin-bottom: 0; }
.skill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.skill-name { font-weight: 600; font-size: 14.5px; }
.skill-pct { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.skill-bar {
  height: 7px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 6px 0 7px;
}
.skill-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.poziom-mocna   .skill-bar > i { background: var(--ok); }
.poziom-niezla  .skill-bar > i { background: var(--accent); }
.poziom-chwiejna .skill-bar > i { background: var(--warn); }
.poziom-slaba   .skill-bar > i { background: var(--bad); }
.poziom-mocna .skill-pct { color: var(--ok); }
.poziom-slaba .skill-pct { color: var(--bad); }
.skill-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  font-size: 12.5px; color: var(--muted);
}
.skill-meta .sygnaly { display: flex; gap: 10px; }
.skill-meta .sygnaly b { font-variant-numeric: tabular-nums; font-weight: 600; }
.skill-meta .sygnaly .ok   { color: var(--ok); }
.skill-meta .sygnaly .part { color: var(--warn); }
.skill-meta .sygnaly .bad  { color: var(--bad); }

.after-result {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-top: 24px; box-shadow: var(--shadow); text-align: center;
}
.after-result p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.after-result .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.after-result a { padding: 10px 20px; border-radius: 9px; }
.after-result a.ghost { border: 1px solid var(--border-2); color: var(--text); }

.skills-legend {
  margin: 0 0 16px; font-size: 12.5px; color: var(--faint); line-height: 1.6;
  padding-left: 11px; border-left: 2px solid var(--border-2);
}
.skill.domyslny { opacity: .5; }
.skill.domyslny .skill-bar > i { background: var(--border-2); }

/* --- klikalne wiersze i przegląd zadań --- */
tr.klikalny { cursor: pointer; }
tr.klikalny:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.overview {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 24px; box-shadow: var(--shadow);
}
.overview h2 { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; }
.overview-hint { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.overview-table { box-shadow: none; }
.overview-table td, .overview-table th { font-size: 13px; padding: 8px 11px; }
.overview-table td:nth-child(2) { color: var(--muted); font-size: 12.5px; }
.overview-table td:last-child { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.task.podswietlone {
  animation: blysk 1.6s ease;
}
@keyframes blysk {
  0%, 100% { box-shadow: var(--shadow); }
  20%, 60% { box-shadow: 0 0 0 3px var(--accent-sub), var(--shadow); }
}

/* --- wgrywanie zdjęć rozwiązanego arkusza --- */
.scan-form {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow);
}
.drop {
  border: 2px dashed var(--border-2); border-radius: 12px; padding: 30px 22px;
  text-align: center; transition: border-color .15s, background .15s;
}
.drop.nad { border-color: var(--accent); background: var(--accent-sub); }
.drop-ikona { font-size: 34px; line-height: 1; margin-bottom: 10px; }
.drop-tytul { margin: 0 0 8px; font-size: 15px; font-weight: 550; }
.drop-opis { margin: 0 0 4px; font-size: 13px; color: var(--muted); line-height: 1.55; }
button.link {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}

.miniatury { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.miniatura { position: relative; margin: 0; width: 92px; }
.miniatura img {
  width: 92px; height: 118px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border-2); background: var(--surface-2);
}
.miniatura figcaption {
  font-size: 11px; color: var(--faint); margin-top: 4px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.miniatura .usun {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.miniatura .usun:hover { color: var(--bad); border-color: var(--bad); }

.scan-progress {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); text-align: center;
}
.scan-progress h2 { margin: 0 0 8px; font-size: 17px; display: flex; gap: 10px;
  align-items: center; justify-content: center; }
.scan-progress p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.scan-progress .progress-bar { margin-bottom: 12px; }

/* --- przegląd arkusza odczytanego ze zdjęć --- */
.scan-banner {
  background: var(--accent-sub); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px;
}
.scan-banner h3 { margin: 0 0 5px; font-size: 15px; color: var(--accent); }
.scan-banner p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }

.scan-src {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 16px; padding: 10px 12px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
}
.scan-src.pewnosc-niska { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad); }
.scan-src.pewnosc-srednia { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.scan-src.pusto { border-style: dashed; }
.scan-src a { color: inherit; font-weight: 600; }
.scan-note { color: var(--faint); font-size: 12px; }

/* --- zdjęcie rozwiązania pojedynczego zadania --- */
.answer-photos { margin-top: 12px; }
.answer-photos.polecane {
  padding: 12px 14px; border-radius: 10px;
  background: var(--accent-sub); border: 1px solid var(--border);
}
.foto-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.foto-lista:not(:empty) { margin-bottom: 10px; }
.foto { position: relative; margin: 0; display: block; }
.foto img {
  max-width: 190px; max-height: 150px; border-radius: 9px;
  border: 1px solid var(--border-2); background: var(--surface); display: block;
}
.foto .usun {
  position: absolute; top: -7px; right: -7px; width: 23px; height: 23px;
  border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface);
  color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer;
}
.foto .usun:hover { color: var(--bad); border-color: var(--bad); }
.foto-lista.wynik .foto img { max-width: 260px; max-height: 220px; }

button.foto-btn {
  padding: 8px 15px; border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px;
  font-weight: 550; cursor: pointer;
}
button.foto-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.foto-btn:disabled { opacity: .5; cursor: not-allowed; }
.foto-opis { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.foto-blad {
  margin: 8px 0 0; font-size: 13px; color: var(--bad);
  background: var(--bad-bg); border: 1px solid var(--bad-border);
  border-radius: 9px; padding: 8px 11px;
}

/* --- zakładka „Ucz się" --- */
.learn-filters {
  display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow);
}
.learn-filters .etykieta {
  display: block; font-size: 11.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 7px;
}
.chipy { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-2);
  background: var(--surface); color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.learn-section { margin-bottom: 30px; }
.learn-section h2 {
  margin: 0 0 3px; font-size: 17px; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 9px;
}
.learn-section h2 .ile {
  font-size: 12px; font-weight: 650; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.learn-section.poziom-slaba h2 { color: var(--bad); }
.learn-section.poziom-neutralna h2 { color: var(--warn); }
.learn-section.poziom-dobra h2 { color: var(--ok); }
.learn-section-opis { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }

.learn-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.learn-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--border-2);
  border-radius: var(--radius); padding: 17px 18px; box-shadow: var(--shadow);
}
.learn-card.poziom-slaba { border-left-color: var(--bad); }
.learn-card.poziom-neutralna { border-left-color: var(--warn); }
.learn-card.poziom-dobra { border-left-color: var(--ok); }

.learn-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.learn-card h3 { margin: 0 0 5px; font-size: 15px; letter-spacing: -.01em; }
.learn-card h3 .tytul { font-weight: 500; color: var(--muted); }
.learn-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--faint); }
.learn-score { text-align: right; flex-shrink: 0; }
.learn-score .pct { font-size: 21px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.learn-score .etyk { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.poziom-slaba .learn-score .pct { color: var(--bad); }
.poziom-neutralna .learn-score .pct { color: var(--warn); }
.poziom-dobra .learn-score .pct { color: var(--ok); }

.learn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.learn-tags .tag {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.learn-tags .tag b { font-variant-numeric: tabular-nums; color: var(--text); }
.learn-tags .tag.nieznany { border-style: dashed; opacity: .7; }
button.learn-start { margin-top: auto; width: 100%; }
.scan-banner.nauka { background: var(--ok-bg); border-color: var(--ok-border); }
.scan-banner.nauka h3 { color: var(--ok); }

/* --- fragment nagrania przy zadaniu na słuchanie --- */
.fragment-audio {
  margin-top: 14px; padding: 12px 14px; border-radius: 11px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.fa-gora { display: flex; align-items: center; gap: 12px; }
.fa-play {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--accent); color: var(--accent-ink);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.fa-play:hover { filter: brightness(1.08); }
.fa-opis { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fa-opis b { font-size: 13.5px; }
.fa-opis span { font-size: 12px; color: var(--muted); }
.fa-czas { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fa-pasek {
  height: 6px; border-radius: 99px; background: var(--border);
  margin-top: 10px; cursor: pointer; overflow: hidden;
}
.fa-pasek > i { display: block; height: 100%; width: 0; background: var(--accent); }

/* --- koniec regulaminowego czasu --- */
.czas-ekran {
  position: fixed; inset: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 24px;
  animation: pojaw .18s ease;
}
@keyframes pojaw { from { opacity: 0; } to { opacity: 1; } }
.czas-okno {
  max-width: 460px; text-align: center;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 18px; padding: 34px 30px; box-shadow: 0 18px 50px rgb(0 0 0 / .25);
}
.czas-ikona {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
}
.czas-okno h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -.02em; }
.czas-okno p { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.czas-akcje { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.czas-drobne { margin: 18px 0 0 !important; font-size: 12.5px; color: var(--faint); }

.timer.po-czasie {
  background: var(--bad-bg); color: var(--bad); border-color: var(--bad-border);
}
.po-czasie-pas {
  flex-basis: 100%; margin-top: 8px; padding: 7px 12px; border-radius: 8px;
  background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad);
  font-size: 12.5px; font-weight: 550;
}
.po-czasie-znacznik {
  display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px;
  background: var(--bad-bg); border: 1px solid var(--bad-border); color: var(--bad);
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
.po-czasie-znacznik.duzy { font-size: 13px; padding: 5px 12px; white-space: normal; }

.rodzaj { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.rodzaj.online { color: var(--muted); }
.rodzaj.zdjecia { color: var(--accent); }
.rodzaj.nauka { color: var(--ok); }
.rodzaj b { font-variant-numeric: tabular-nums; }
.skill-meta .sygnaly.koszty b { color: var(--faint); font-weight: 550; }

/* ---------------------------------------------------------- panel admina --- */
/* Zestawienie jest szerokie, więc daje mu więcej miejsca niż zwykłym stronom. */
main.admin-main { max-width: 1240px; }

table.admin-table td { vertical-align: top; }
tr.admin-wiersz { cursor: pointer; }
tr.admin-akcje td { background: var(--surface-2); }
tr.admin-akcje:hover td { background: var(--surface-2); }

.drobne { font-size: 12px; color: var(--muted); line-height: 1.45; }
.znacznik { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-sub);
  border-radius: 5px; padding: 1px 6px; vertical-align: 2px; }

.admin-panel { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 4px 0 8px; }
.admin-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-form .etykieta { font-size: 12.5px; font-weight: 650; color: var(--muted); }
.admin-form input[type="text"], .admin-form input[type="email"], .admin-form input[type="number"] {
  width: 170px; padding: 7px 10px; font-size: 13.5px; border: 1px solid var(--border-2);
  border-radius: 8px; background: var(--surface); color: var(--text); }
.admin-form input[type="number"] { width: 120px; }
.admin-form button { padding: 7px 14px; font-size: 13.5px; border-radius: 8px; }
.admin-form .ptaszek { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--muted); }
.admin-form .ptaszek input { width: auto; }

.admin-komunikat { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--ok); }
.admin-komunikat.blad { color: var(--bad); }
.admin-historia { flex-basis: 100%; margin-top: 6px; overflow-x: auto; }
.admin-historia table.history { font-size: 12.5px; }
.admin-form select { padding: 7px 10px; font-size: 13.5px; border: 1px solid var(--border-2);
  border-radius: 8px; background: var(--surface); color: var(--text); max-width: 320px; }

/* Panel ma teraz dwie części: zgłoszenia i konta. Nagłówek rozdziela je na tyle,
   żeby dało się je odróżnić z góry strony, i na tyle mało, żeby nie udawał
   osobnego ekranu. */
.admin-sekcja { margin-bottom: 38px; }
.admin-sekcja h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.01em; }

/* Przełącznik widoków: zwykłe przyciski, wybrany jest pełny, reszta obrysowana.
   Nic nowego pod to nie budujemy, bo panel nie ma i nie potrzebuje zakładek. */
.zgl-widoki { gap: 8px; margin-bottom: 14px; }
.zgl-widoki .znacznik { margin-left: 6px; }

.zgl-panel { flex-direction: column; gap: 12px; }
.zgl-metryka { margin: 0; }
.zgl-metryka a { color: var(--accent); margin-left: 8px; }
.zgl-powod { margin: -6px 0 0; color: var(--warn); }
.zgl-ocena { margin: -6px 0 0; }

/* Rozkład ocen rozmów. Słupek mówi to samo co liczba obok, tylko szybciej: pięć
   liczb w kolumnie wygląda tak samo bez względu na to, czy to same jedynki, czy
   same piątki. Wąski, bo to podsumowanie, a nie wykres. */
.ankieta-rozklad { max-width: 520px; margin-bottom: 18px; }
.ankieta-rozklad td { padding: 4px 10px 4px 0; vertical-align: middle; }
.ankieta-tlo { background: var(--surface-2); border-radius: 5px; width: 100%; min-width: 80px;
  height: 9px; }
.ankieta-slupek { height: 9px; min-width: 3px; border-radius: 5px; background: var(--accent); }
.ankieta-komentarz { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Wątek w panelu jest szerszy niż na stronie zgłaszającego i nie odrywa się od
   listy, więc dostaje ramkę zamiast marginesu. */
.zgl-watek { width: 100%; margin: 0; padding: 14px 16px; max-height: 460px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.zgl-guziki { gap: 8px; }
.zgl-odpowiedz { width: 100%; }

.admin-form textarea { flex-basis: 100%; min-height: 84px; padding: 9px 11px;
  font: 14px/1.55 var(--sans); color: var(--text); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: 8px; resize: vertical; }

/* ------------------------------------------------------------ moje konto --- */
.karta-konta { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 18px; }
.karta-konta h2 { margin: 2px 0 6px; font-size: 20px; letter-spacing: -.01em; }
.etykieta-mala { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); }

.zapas { margin-top: 18px; }
.zapas-naglowek { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.zapas-naglowek b { font-variant-numeric: tabular-nums; }
.zapas-tor { height: 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); overflow: hidden; }
.zapas-wypelnienie { height: 100%; border-radius: 999px; transition: width .3s ease; }
.zapas-wypelnienie.sporo  { background: var(--ok); }
.zapas-wypelnienie.srednio { background: #b7791f; }
.zapas-wypelnienie.malo   { background: var(--bad); }
.zapas .drobne { margin: 6px 0 0; }

.kwoty { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
button.kwota { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 128px; padding: 11px 14px; border: 1px solid var(--border-2); border-radius: 11px;
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
button.kwota:hover { border-color: var(--accent); background: var(--accent-sub); }
button.kwota b { font-size: 16px; }
button.kwota .bonus { font-size: 12px; color: var(--muted); }
.wynik-doladowania { margin: 10px 0 0; padding: 11px 14px; border-radius: 10px;
  background: var(--accent-sub); font-size: 13.5px; }

.plany-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin: 14px 0 10px; }
.plan-kafel { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); }
.plan-kafel.biezacy { border-color: var(--accent); background: var(--accent-sub); }
.plan-kafel .cena { font-size: 13.5px; font-weight: 650; color: var(--accent); }

/* ------------------------------------------------ zaznaczenia w odpowiedzi --- */
/* Błędy językowe podkreślamy na czerwono, tak jak robi to nauczyciel na kartce.
   Pozostałe rodzaje dostają własny kolor tła, żeby dało się je odróżnić. */
mark.blad { background: none; color: inherit; padding: 0 1px; border-radius: 3px; cursor: help; }
mark.blad-jezyk { text-decoration: underline wavy var(--bad); text-decoration-thickness: 2px;
  text-underline-offset: 3px; }
mark.blad-rzeczowy   { background: #fdf0d5; box-shadow: inset 0 -2px 0 #b7791f; }
mark.blad-logiczny   { background: #f1ebfd; box-shadow: inset 0 -2px 0 #7c3aed; }
mark.blad-styl       { background: #e8f1fd; box-shadow: inset 0 -2px 0 #2563eb; }
mark.blad-kompozycja { background: #e9f7ef; box-shadow: inset 0 -2px 0 #067647; }

.legenda-bledow { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; font-size: 12.5px; }
.legenda-wpis { padding: 2px 9px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); }
.legenda-wpis.blad-jezyk { border-color: var(--bad-border); color: var(--bad); }
.legenda-wpis.blad-rzeczowy   { border-color: #e6c88a; color: #8a5a08; background: #fdf0d5; }
.legenda-wpis.blad-logiczny   { border-color: #cdb8f7; color: #5b21b6; background: #f1ebfd; }
.legenda-wpis.blad-styl       { border-color: #b8d0f7; color: #1d4ed8; background: #e8f1fd; }
.legenda-wpis.blad-kompozycja { border-color: #a9e5c3; color: var(--ok); background: #e9f7ef; }

/* ----------------------------------------------------- wybór roli przy rejestracji --- */
.label-jak { display: block; font-size: 13px; font-weight: 600; margin: 0 0 7px; color: var(--text); }
.wybor-roli { display: grid; gap: 8px; margin-bottom: 14px; }
.wybor-roli label { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  align-items: baseline; padding: 11px 13px; border: 1px solid var(--border-2);
  border-radius: 10px; cursor: pointer; background: var(--surface); }
.wybor-roli label:has(input:checked) { border-color: var(--accent); background: var(--accent-sub); }
.wybor-roli input { grid-row: span 2; align-self: center; }
.wybor-roli b { font-size: 14px; }
.wybor-roli span { grid-column: 2; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------- rejestracja w krokach (app.js) --- */
fieldset.krok { margin: 0; padding: 0; border: 0; min-width: 0; }
.krok-tytul { padding: 0; margin: 0 0 3px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.krok-opis { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
/* przy logowaniu te same pola stoją bez nagłówków i podpowiedzi z kroków */
form:not(.kreator) .tylko-kreator { display: none; }
.pod-polem { margin: -10px 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.kroki { margin: 0 0 18px; }
.kroki-kreski { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 0; padding: 0; list-style: none; }
.kroki-kreski li { height: 5px; border-radius: 999px; background: var(--border);
  transition: background-color .25s ease; }
.kroki-kreski li.zrobiony, .kroki-kreski li.biezacy { background: var(--accent); }
.kroki-napis { margin: 7px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }

.kreator-przyciski { display: flex; gap: 10px; margin-top: 4px; }
.kreator-przyciski .ghost { flex: none; }
.card .kreator-przyciski button.primary { flex: 1; width: auto; }
/* generator hasła stoi tuż nad przyciskami kroku, więc potrzebuje odstępu od nich */
.kreator .krok button.generuj { margin: -6px 0 18px; }

.podsumowanie { margin: 0 0 14px; padding: 2px 13px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.podsumowanie div { padding: 8px 0; }
.podsumowanie div + div { border-top: 1px solid var(--border); }
.podsumowanie dt { font-size: 12px; color: var(--muted); }
.podsumowanie dd { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin: 0; min-width: 0; }
.podsumowanie dd span { font-weight: 600; overflow-wrap: anywhere; }
.podsumowanie button.link { flex: none; font-size: 12.5px; }

form.kreator input[aria-invalid="true"] { border-color: var(--bad); }

.kreator .krok:not([hidden]) { animation: krok-wejscie .2s ease-out; }
@keyframes krok-wejscie { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .kreator .krok:not([hidden]) { animation: none; }
  .kroki-kreski li { transition: none; }
}

/* na wąskim telefonie karta logowania nie potrzebuje podwójnego marginesu */
@media (max-width: 400px) {
  body.centered { padding: 16px; }
  body.centered .card { padding: 22px 18px; }
}

/* ------------------------------------------------------ panel nauczyciela --- */
.form-zgloszenia { display: grid; gap: 12px; margin-top: 12px; }
.form-zgloszenia label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; }
.form-zgloszenia input[type="text"], .form-zgloszenia select {
  padding: 9px 11px; font-size: 14px; font-weight: 400; border: 1px solid var(--border-2);
  border-radius: 9px; background: var(--surface); color: var(--text); }
.form-zgloszenia input[type="file"] { font-size: 13px; font-weight: 400; }
.form-zgloszenia button { padding: 10px 20px; border-radius: 9px; }
.form-zgloszenia .ghost.maly { padding: 6px 13px; }
.postep { margin: 0; font-size: 13.5px; color: var(--muted); }
.postep.blad { color: var(--bad); }

/* Nauczyciel nie wgrywa jednej pracy, tylko całą klasę, więc formularz jest listą
   wierszy. Od 780px wzwyż wiersz mieści się w jednej linii: przy trzydziestu
   pracach to różnica między jednym ekranem a metrem przewijania. Niżej rozkłada
   się na kolumnę, bo na telefonie cztery pola obok siebie są nie do trafienia. */
.zestawy { display: grid; gap: 10px; }
.zestaw-wiersz { display: grid; gap: 4px 12px; align-items: end;
  grid-template-columns: 26px minmax(130px, 1.3fr) minmax(115px, 1fr)
    minmax(140px, 1.2fr) minmax(130px, 1fr) auto;
  padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 11px;
  background: var(--surface); }
.zestaw-numer { font-size: 12.5px; font-weight: 700; color: var(--faint); padding-bottom: 9px; }
.zestaw-wiersz .z-pole { display: grid; gap: 4px; font-size: 12px; font-weight: 600;
  color: var(--muted); min-width: 0; }
/* margin zerujemy celowo: samotne pole tekstowe w formularzu ma pod sobą 16px
   odstępu (reguła globalna), a tutaj rozjeżdżałoby wiersz względem list wyboru */
.form-zgloszenia .zestaw-wiersz input, .form-zgloszenia .zestaw-wiersz select {
  width: 100%; margin: 0; padding: 7px 9px; font-size: 13.5px; font-weight: 400;
  line-height: 1.35; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface); color: var(--text); }
.form-zgloszenia .zestaw-wiersz input[type="file"] { padding: 4px 0; border: 0; font-size: 12px; }
.zestaw-usun { border: 0; background: none; cursor: pointer; color: var(--faint);
  font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: 7px; }
.zestaw-usun:hover { background: var(--surface-2); color: var(--bad); }
.zestaw-stan { grid-column: 2 / -1; margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.zestaw-stan.blad { color: var(--bad); }
.zestaw-stan:empty { display: none; }
.zestawy-akcje { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (max-width: 780px) {
  .zestaw-wiersz { grid-template-columns: 1fr auto; align-items: center; }
  .zestaw-wiersz .z-pole, .zestaw-stan { grid-column: 1 / -1; }
  .zestaw-numer { padding-bottom: 0; }
}

/* Kolejka odczytów: co czytamy teraz i co czeka. Panel znika, gdy kolejka
   jest pusta, więc nie ma stanu „w kolejce: 0" zajmującego górę ekranu. */
.kolejka-panel { display: grid; gap: 10px; }
.kolejka-teraz { display: grid; gap: 4px; padding: 11px 13px;
  border: 1px solid var(--accent); border-radius: 11px; background: var(--accent-sub); }
.kolejka-glowa { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kolejka-glowa b { font-size: 14.5px; }
.kolejka-glowa .ghost.maly { margin-left: auto; }
.kolejka-teraz .progress-bar { margin-top: 4px; }
.kolejka-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kolejka-lista li { display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.kolejka-pozycja { flex: none; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--border-2); font-size: 11.5px; font-weight: 700; color: var(--muted); }
.kolejka-tresc { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kolejka-tresc a { font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; }
.kolejka-tresc a:hover { color: var(--accent); }
.kolejka-lista .ghost.maly { flex: none; }
.drobne.blad { color: var(--bad); }

td.akcje-zgloszenia { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ghost.maly, select.maly { padding: 5px 11px; font-size: 12.5px; border-radius: 7px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  text-decoration: none; cursor: pointer; }
.ghost.maly:hover { border-color: var(--accent); color: var(--accent); }

/* poprawianie oceny przez nauczyciela */
.poprawka { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  margin-top: 10px; padding: 11px 13px; border: 1px dashed var(--border-2);
  border-radius: 10px; background: var(--surface-2); }
.poprawka .etykieta { font-size: 12.5px; font-weight: 650; color: var(--muted); align-self: center; }
.poprawka input[type="number"] { width: 92px; padding: 6px 9px; font-size: 13.5px;
  border: 1px solid var(--border-2); border-radius: 8px; background: var(--surface); color: var(--text); }
.poprawka textarea { flex: 1 1 320px; min-height: 62px; padding: 8px 10px; font: inherit;
  font-size: 13.5px; border: 1px solid var(--border-2); border-radius: 8px;
  background: var(--surface); color: var(--text); resize: vertical; }
.poprawka button { padding: 7px 15px; font-size: 13.5px; border-radius: 8px; align-self: center; }
.poprawka .stan { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ok); }
.poprawka .stan.blad { color: var(--bad); }
.score-info .eksport { margin: 10px 0 0; }

.wlasna-kwota { margin: 14px 0 4px; }
.wlasna-kwota label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pole-kwoty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pole-kwoty input { width: 130px; padding: 9px 11px; font-size: 15px; text-align: right;
  border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface); color: var(--text); }
.pole-kwoty .waluta { font-size: 14px; color: var(--muted); margin-left: -4px; }
.pole-kwoty button { padding: 9px 20px; border-radius: 9px; }
.wynik-doladowania.blad { background: var(--bad-bg); color: var(--bad); }

/* ------------------------------------------------- przełącznik jakości --- */
.przelacznik { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  align-items: start; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--border-2);
  border-radius: 11px; cursor: pointer; background: var(--surface); }
.przelacznik:has(input:checked) { border-color: var(--accent); background: var(--accent-sub); }
.przelacznik.zablokowany { cursor: default; opacity: .62; }
.przelacznik input { margin-top: 3px; }
.przelacznik b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.przelacznik .drobne { display: block; }
.przelacznik .uwaga { margin-top: 5px; color: var(--accent); font-weight: 600; }
.stan-jakosci { margin: 9px 0 0; font-size: 13px; color: var(--ok); }
.stan-jakosci.blad { color: var(--bad); }

/* ----------------------------------------------------------- pole hasła --- */
.pole-hasla { position: relative; display: block; }
.pole-hasla input { width: 100%; padding-right: 44px; }
.oczko { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; opacity: .55; border-radius: 7px; }
.oczko:hover { opacity: 1; background: var(--surface-2); }
.oczko.wlaczone { opacity: 1; }
button.ghost.generuj { margin-top: 8px; padding: 7px 14px; font-size: 13px; border-radius: 8px; }

/* ------------------------------------------------------------- zgoda --- */
.zgoda-box { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
  align-items: start; margin: 4px 0 14px; padding: 11px 13px; border: 1px solid var(--border-2);
  border-radius: 10px; background: var(--surface); cursor: pointer; }
.zgoda-box:has(input:checked) { border-color: var(--ok-border); background: var(--ok-bg); }
.zgoda-box input { margin-top: 3px; }
.zgoda-box b { font-size: 13.5px; }
.zgoda-box .drobne { grid-column: 2; }
.zgoda-box .ostrzezenie { grid-column: 2; margin-top: 5px; font-size: 12.5px;
  font-weight: 600; color: var(--bad); }

/* ------------------------------------------------------- dokumenty prawne --- */
body.dokument main { max-width: 780px; padding-top: 36px; }
body.dokument h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 6px; }
body.dokument .lede { margin: 0 0 26px; }
body.dokument h2 { font-size: 18px; margin: 30px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--border); letter-spacing: -.01em; }
body.dokument p, body.dokument li { font-size: 15px; line-height: 1.68; color: var(--text); }
body.dokument ul { padding-left: 20px; }
body.dokument li { margin-bottom: 7px; }
body.dokument code { font-size: 13.5px; background: var(--surface-2); padding: 1px 6px;
  border-radius: 5px; border: 1px solid var(--border); }
body.dokument .powrot { margin: 0 0 20px; font-size: 14px; }
body.dokument .powrot a { color: var(--muted); text-decoration: none; }
body.dokument .powrot a:hover { color: var(--accent); }

.uwaga-prawna { background: #fdf6e3; border: 1px solid #e6c88a; border-radius: 11px;
  padding: 14px 17px; margin: 22px 0; font-size: 14px; line-height: 1.6; color: #6b4c07; }
.uwaga-prawna b { display: block; margin-bottom: 4px; }

table.dok-tabela { width: 100%; border-collapse: collapse; margin: 14px 0 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; font-size: 14px; }
table.dok-tabela th, table.dok-tabela td { padding: 10px 13px; text-align: left;
  border-bottom: 1px solid var(--border); vertical-align: top; }
table.dok-tabela th { background: var(--surface-2); font-size: 12.5px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
table.dok-tabela tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- formularz pomocy --- */
.kontakt-form {
  margin: 22px 0 8px; padding: 22px 22px 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.kontakt-form select, .kontakt-form textarea { margin-bottom: 16px; }
.kontakt-form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.kontakt-form .msg { margin-bottom: 18px; }
.kontakt-form button.primary { width: 100%; }
.kontakt-form .licznik { margin: -10px 0 16px; font-size: 12px; color: var(--faint);
  text-align: right; }
.kontakt-form .licznik.blisko { color: var(--warn); font-weight: 600; }
.kontakt-dziekujemy { margin: 0 0 8px; border: 0; padding-top: 0; text-align: center; }
.kontakt-form .verify-ok + .kontakt-dziekujemy + p { text-align: center; }

/* Pułapka na boty: pole ma istnieć w formularzu i być niedostępne dla człowieka.
   Nie `display:none` ani `hidden` — część botów pomija to, czego przeglądarka nie
   rysuje, więc wyprowadzamy pole poza ekran, zamiast je chować. */
.pulapka {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ------------------------------------------------------- wątek zgłoszenia ---
   Trzej autorzy muszą się różnić na pierwszy rzut oka, bo od tego zależy, czy
   czytający wie, z kim rozmawia. Podpis nad treścią jest tu ważniejszy od koloru:
   kolor da się przeoczyć, a człowiek podszywający się pod asystenta albo asystent
   udający człowieka to wprowadzanie w błąd.                                    */
.watek { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 26px; }
.watek-wiadomosc { max-width: 88%; padding: 12px 15px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); }
.watek-wiadomosc p { margin: 0; }
.watek-kto { font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-bottom: 5px !important;
  color: var(--muted); }
.watek-tresc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px !important;
  line-height: 1.6 !important; }
.watek-kiedy { margin-top: 7px !important; font-size: 11.5px; color: var(--faint); }

/* Zgłaszający po prawej, jak własne dymki w oknie czatu. */
.watek-ja { align-self: flex-end; background: var(--accent-sub); border-color: var(--accent); }
.watek-ja .watek-kto { color: var(--accent); }

/* Obsługa po lewej, z wyraźną krawędzią: to jest odpowiedź, na którą się czeka. */
.watek-obsluga { align-self: flex-start; border-left: 3px solid var(--ok); }
.watek-obsluga .watek-kto { color: var(--ok); }

/* Wiadomość systemowa nie jest niczyją wypowiedzią, więc nie dostaje dymka. */
.watek-system { align-self: center; max-width: 100%; text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--faint); padding: 2px 8px; }

/* Asystent w zapisie rozmowy. Widzi go wyłącznie panel: wątek zgłaszającego
   rysują trzej autorzy z tabeli wiadomości, a rozmowa z modelem leży osobno
   i dokłada czwartego. Szary, bo to tło sprawy, a nie jej bieg. */
.watek-asystent { align-self: flex-start; border-left: 3px solid var(--border-2);
  background: var(--surface-2); }
.watek-asystent .watek-kto { color: var(--faint); }

.watek-nota { margin: 0 0 18px !important; padding: 10px 13px; border-radius: 10px;
  background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok);
  font-size: 13.5px !important; }
.watek-forma label { display: block; margin-bottom: 6px; font-weight: 650; font-size: 14px; }
.watek-forma textarea { min-height: 110px; }

/* Odnośnik „Nie pamiętasz hasła" pod polem hasła na ekranie logowania. */
.pod-haslem { margin: -8px 0 16px; text-align: right; font-size: 12.5px; }
.pod-haslem a { color: var(--muted); text-decoration: none; }
.pod-haslem a:hover { color: var(--accent); text-decoration: underline; }

/* ----------------------------------------------------------- pasek cookies --- */
.pasek-cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 14px; padding: 16px 18px; box-shadow: 0 12px 34px rgba(20,23,29,.18);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pasek-cookies p { margin: 0; flex: 1 1 320px; font-size: 13.5px; line-height: 1.55;
  color: var(--muted); }
.pasek-cookies a { color: var(--accent); }
.pasek-cookies button { padding: 9px 18px; border-radius: 9px; white-space: nowrap; }

/* ------------------------------------------------------------ asystent --- */
.czat-guzik { position: fixed; right: 18px; bottom: 18px; z-index: 55;
  display: flex; align-items: center; gap: 8px; padding: 11px 17px;
  border: 1px solid var(--border-2); border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--text); font: 600 14px/1 var(--sans);
  box-shadow: 0 8px 24px rgb(16 24 40 / .16); }
.czat-guzik:hover { border-color: var(--accent); color: var(--accent); }
/* pasek cookies zajmuje dół ekranu, więc na wąskim ekranie przycisk musi ustąpić */
body.ma-cookies .czat-guzik { bottom: 18px; }
@media (max-width: 700px) {
  body.ma-cookies .czat-guzik { bottom: 152px; }
  .czat-guzik-tekst { display: none; }
  .czat-guzik { padding: 12px 14px; }
}

.czat-panel { position: fixed; right: 18px; bottom: 18px; z-index: 56;
  width: min(380px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 36px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px;
  box-shadow: 0 18px 48px rgb(16 24 40 / .24); }
.czat-naglowek { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-bottom: 1px solid var(--border); }
.czat-naglowek > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.czat-naglowek b { font-size: 14px; }
.czat-podtytul { font-size: 12px; color: var(--faint); }
.czat-zamknij, .czat-opcje { border: 0; background: none; cursor: pointer; color: var(--faint);
  font-size: 15px; padding: 4px 6px; border-radius: 7px; }
.czat-zamknij:hover, .czat-opcje:hover { background: var(--surface-2); color: var(--text); }
.czat-opcje { font-size: 18px; line-height: 1; }

/* Opcje rozmowy ROZSUWAJĄ okno, a nie kładą się na nim. Rozmowa jest tu jedyną
   treścią, więc przykrycie jej menu, choćby na sekundę, zabierałoby człowiekowi
   to, po co przyszedł. Pasek zajmuje swoje miejsce, a lista wiadomości (flex: 1)
   po prostu o tyle się kurczy. */
.czat-menu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 15px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.czat-menu button { padding: 6px 12px; border-radius: 8px; font-size: 13px; }
.czat-menu-nota { font-size: 11.5px; color: var(--faint); }
/* Tryb automatyczny stoi w drugim wierszu paska, z objaśnieniem pod spodem na całą
   szerokość: to zdanie mówi, czego ten tryb NIE robi, więc nie może się schować. */
.czat-auto { display: flex; align-items: center; gap: 7px; flex-basis: 100%;
  font-size: 13px; cursor: pointer; }
.czat-auto input { margin: 0; accent-color: var(--accent); }
.czat-auto-nota { flex-basis: 100%; margin-top: -6px; line-height: 1.45; }

.czat-rozmowa { flex: 1; overflow-y: auto; padding: 14px 15px;
  display: flex; flex-direction: column; gap: 10px; }
.czat-wiadomosc { padding: 9px 12px; border-radius: 12px; font-size: 13.5px;
  line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
.czat-ja { align-self: flex-end; background: var(--accent); color: var(--accent-ink);
  border-bottom-right-radius: 4px; }
.czat-bot { align-self: flex-start; background: var(--surface-2);
  border: 1px solid var(--border); border-bottom-left-radius: 4px; }
/* Agent zalogowanego pracuje kilkanaście sekund. Sam tekst „Sprawdzam…" nie
   odróżnia pracy od zawieszonego okna, więc dymek delikatnie pulsuje, na tyle
   dyskretnie, żeby nie ciągnąć oka, gdy w rozmowie stoi już odpowiedź. */
.czat-czeka { color: var(--faint); font-style: italic; animation: czat-puls 1.5s ease-in-out infinite; }
@keyframes czat-puls { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* Kto ruch na ekranie wyłączył w systemie, zostaje przy samym tekście. Pulsowanie
   chodzi bez końca, a to jest rodzaj animacji, który potrafi męczyć. */
@media (prefers-reduced-motion: reduce) { .czat-czeka { animation: none; } }
.czat-blad { border-color: var(--bad-border); background: var(--bad-bg); color: var(--bad); }
.czat-zrodla { margin: 8px 0 0; font-size: 12px; color: var(--faint); white-space: normal; }
.czat-zrodla a { color: var(--accent); margin-right: 8px; }

.czat-propozycja { align-self: stretch; padding: 11px 12px; border-radius: 12px;
  background: var(--accent-sub); border: 1px solid var(--accent); font-size: 13.5px; }
.czat-propozycja p { margin: 0; }
.czat-propozycja .czat-adres { display: block; margin-top: 3px; font: 12px/1.4 var(--mono);
  color: var(--muted); }
.czat-propozycja .czat-poco { margin-top: 4px !important; font-size: 12.5px; color: var(--faint); }
.czat-wybor { display: flex; gap: 8px; margin-top: 10px !important; }
.czat-wybor button { padding: 7px 14px; border-radius: 8px; font-size: 13px; }

/* Ankieta po zakończonej rozmowie.
   Pięć minek w równym rzędzie, każda z podpisem: sama buzia znaczy dla każdego
   co innego, a „poniżej przeciętnej" to nie to samo co „źle". Podpis jest częścią
   pytania, nie ozdobą, więc zostaje także na najwęższym ekranie. */
.czat-minki { display: flex; gap: 3px; margin-top: 10px; }
.czat-minka { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 7px 1px; cursor: pointer;
  border: 1px solid transparent; border-radius: 10px; background: none;
  color: var(--muted); font: inherit; }
.czat-minka:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); }
.czat-minka:disabled { cursor: default; opacity: .45; }
.czat-minka.wybrana { opacity: 1; border-color: var(--accent); background: var(--surface); }
.czat-buzia { font-size: 22px; line-height: 1.1; }
/* Podpis jest częścią pytania, nie ozdobą, więc musi się zmieścić także na
   telefonie. Dzielimy go tam po sylabach (`hyphens`, strona jest lang="pl"),
   a nie w dowolnym miejscu: „przeciętn / ej" czyta się jak literówka. */
.czat-minka-opis { font-size: 9.5px; line-height: 1.3; text-align: center;
  hyphens: auto; }
.czat-ankieta-forma { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.czat-ankieta-forma input { width: 100%; padding: 8px 10px; font: 13.5px/1.4 var(--sans);
  color: var(--text); background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 9px; }
.czat-ankieta-forma input:focus { outline: 2px solid var(--accent-sub); border-color: var(--accent); }
.czat-ankieta-forma .czat-wybor { margin-top: 0 !important; }
.czat-ankieta-blad { margin-top: 8px !important; font-size: 12.5px; color: var(--bad); }
/* Człowiek z obsługi w oknie czatu.
   Musi się różnić od dymka asystenta na tyle, żeby nikt nie wziął jednego za
   drugiego: inny kolor, inna krawędź i podpis nad treścią. Asystent udający
   człowieka i człowiek udający asystenta to ten sam błąd, więc nie zostawiamy
   tego samemu kolorowi, którego część osób i tak nie rozróżni. */
.czat-czlowiek { align-self: flex-start; background: var(--ok-bg);
  border: 1px solid var(--ok-border); border-left: 3px solid var(--ok);
  border-bottom-left-radius: 4px; }
.czat-kto { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ok); }
/* Nagłówek okna przejętej rozmowy mówi to samo słowami, więc ma być widoczny. */
.czat-panel.czat-zywy .czat-podtytul { color: var(--ok); font-weight: 650; }

/* Zapis tego, co zmieniło się w rozmowie: kto ją teraz prowadzi. Nie jest niczyją
   wypowiedzią, więc nie dostaje dymka. */
.czat-system { align-self: center; max-width: 100%; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--faint); padding: 2px 6px;
  white-space: pre-wrap; }

.czat-forma { border-top: 1px solid var(--border); padding: 11px 12px 12px;
  display: flex; flex-direction: column; gap: 8px; }
.czat-forma textarea { width: 100%; resize: none; padding: 9px 11px; font: 14px/1.5 var(--sans);
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 10px; }
.czat-forma textarea:focus { outline: 2px solid var(--accent-sub); border-color: var(--accent); }
.czat-dol { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.czat-licznik { font-size: 12px; color: var(--faint); }
.czat-licznik.blisko { color: var(--warn); }
.czat-dol button { padding: 8px 18px; border-radius: 9px; }

/* ------------------------------------------- wskaźnik odczytu zdjęć --- */
/* Odczyt zdjęć trwa minuty i chodzi na serwerze, nie w karcie przeglądarki,
   więc jego ślad musi być widoczny z każdej strony serwisu. Lewy dolny róg to
   jedyne wolne miejsce: prawy dolny należy do asystenta pomocy, środek dołu do
   krótkich potwierdzeń (.toast), a górę zajmuje pasek nawigacji. Niższy
   z-index niż asystent, żeby jego okno zawsze wygrywało spór o piksele. */
.wskaznik-rog { position: fixed; left: 18px; bottom: 18px; z-index: 54;
  display: flex; flex-direction: column; gap: 8px;
  /* Na szerokim ekranie 290px, na telefonie tyle, ile zostaje po odliczeniu
     przycisku asystenta: 18px naszego marginesu, ~46px samego przycisku, 18px
     jego marginesu i 18px przerwy między nimi. Bez tego odliczenia kartka na
     ekranie węższym niż 372px wchodziła pod przycisk pomocy. */
  width: min(290px, calc(100vw - 100px)); pointer-events: none; }
.wskaznik-rog > * { pointer-events: auto; }
.wskaznik-gotowe { display: flex; flex-direction: column; gap: 8px; }
.wskaznik-gotowe:empty { display: none; }

.wskaznik-odczytu, .wskaznik-karta { display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 12px; box-shadow: 0 8px 24px rgb(16 24 40 / .16);
  color: var(--text); text-decoration: none; }
.wskaznik-odczytu:hover, .wskaznik-karta:hover { border-color: var(--accent); }
.wskaznik-ikona { flex: none; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; font-size: 14px; color: var(--accent); }
.wskaznik-karta.ok .wskaznik-ikona { color: var(--ok); }
.wskaznik-karta.blad .wskaznik-ikona { color: var(--bad); }
.wskaznik-tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  color: inherit; text-decoration: none; }
.wskaznik-tytul { font: 650 13px/1.35 var(--sans); }
/* Dwa wiersze, nie jeden: w opisie stoi i nazwa zestawu („Klasa 8a, praca
   Antoniny K."), i to, czego od człowieka chcemy („Wskaż arkusz z listy").
   Przy jednym wierszu długa nazwa zjadała całą zachętę. Dalej niż dwa wiersze
   nie idziemy, żeby kartka została kartką. */
.wskaznik-opis { font-size: 11.5px; line-height: 1.4; color: var(--faint);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; }
/* .progress-bar ma flex-basis: 100%, co w kolumnie znaczy „całą wysokość" —
   tu wyszłaby z tego kreska o zerowej wysokości, więc zdejmujemy jej elastyczność */
.wskaznik-tresc .progress-bar { margin-top: 5px; flex: none; height: 4px; }
.wskaznik-zamknij { flex: none; border: 0; background: none; cursor: pointer;
  color: var(--faint); font-size: 13px; padding: 3px 5px; border-radius: 7px; }
.wskaznik-zamknij:hover { background: var(--surface-2); color: var(--text); }

/* Pasek cookies leży na dole ekranu i jest od nas wyżej, więc na węższych
   ekranach przykrywał wskaźnik. Jego wysokość zależy od tego, ile razy zawinie
   się tekst, dlatego mierzy go common.js (mountNotaCookies) i podaje tutaj —
   żadna stała w CSS nie trafiłaby we wszystkie szerokości. */
body.ma-cookies .wskaznik-rog { bottom: calc(var(--dol-paska, 96px) + 26px); }

/* --------------------------------------------------------------- stopka --- */
.stopka-prawna { margin: 40px auto 0; padding: 18px 20px 30px; max-width: 940px;
  border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 12.5px; color: var(--faint); }
.stopka-prawna a { color: var(--muted); text-decoration: none; }
.stopka-prawna a:hover { color: var(--accent); text-decoration: underline; }
.znacznik-arkusza { display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--accent-sub); color: var(--accent); border: 1px solid var(--accent); }
.znacznik-arkusza.wlasny { background: var(--warn-bg); color: var(--warn);
  border-color: var(--warn-border); }

.nota-regulaminu { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.nota-regulaminu a { color: var(--accent); }
.nota-rabatu { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text);
  background: var(--accent-sub); border: 1px solid var(--accent); border-radius: 10px;
  padding: 9px 12px; }

.wybor-okresu { display: flex; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.wybor-okresu .okres { padding: 8px 14px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--border-2); background: var(--surface); color: var(--muted);
  cursor: pointer; }
.wybor-okresu .okres.wybrany { border-color: var(--accent); background: var(--accent);
  color: var(--accent-ink); font-weight: 600; }

.plan-kafel .dla-kogo { font-size: 13px; line-height: 1.5; color: var(--text); font-weight: 500; }

.zgoda-box.wymagane:has(input:checked) { border-color: var(--accent); background: var(--accent-sub); }
.zgoda-box .drobne a { color: var(--accent); }

.wiz-sekcja.wiz-dobro { background: var(--accent-sub); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 28px 26px; }
.wiz-sekcja.wiz-dobro h2 { margin-top: 0; }

/* ------------------------------------------------------------- wizytówka --- */
body.wizytowka { background: var(--bg); }
body.wizytowka main { max-width: 1040px; padding: 0 20px 40px; }

.wiz-pasek { display: flex; align-items: center; gap: 18px; max-width: 1040px;
  margin: 0 auto; padding: 18px 20px; flex-wrap: wrap; }
.wiz-pasek nav { display: flex; gap: 18px; }
.wiz-pasek nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 550; }
.wiz-pasek nav a:hover { color: var(--accent); }
.wiz-pasek .spacer { flex: 1; }
a.jako-przycisk { display: inline-block; text-decoration: none; padding: 9px 18px;
  border-radius: 9px; font-weight: 650; font-size: 14px; }
a.jako-przycisk.primary { background: var(--accent); color: var(--accent-ink); }
a.jako-przycisk.primary:hover { filter: brightness(1.08); }
a.jako-przycisk.ghost { border: 1px solid var(--border-2); color: var(--text); }
a.jako-przycisk.ghost:hover { border-color: var(--accent); color: var(--accent); }
a.jako-przycisk.duzy { padding: 13px 26px; font-size: 15.5px; }
.wiz-pasek a.ghost { text-decoration: none; color: var(--text); font-size: 14px; font-weight: 550; }

.wiz-glowna { text-align: center; padding: 46px 0 34px; }
.wiz-glowna h1 { font-size: 42px; line-height: 1.18; letter-spacing: -.03em; margin: 0 0 18px; }
.wiz-lead { max-width: 680px; margin: 0 auto 26px; font-size: 17px; line-height: 1.65;
  color: var(--muted); }
.wiz-lead-maly { max-width: 640px; font-size: 15.5px; line-height: 1.6; color: var(--muted);
  margin: 0 0 18px; }
.wiz-akcje { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 12px; }
.wiz-drobne { font-size: 13px; color: var(--faint); text-align: center; margin: 0; }

.wiz-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin: 28px 0 12px; }
.wiz-liczby div { background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 20px 18px; text-align: center; }
.wiz-liczby b { display: block; font-size: 30px; letter-spacing: -.02em; color: var(--accent); }
.wiz-liczby span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }

.wiz-sekcja { padding: 46px 0 8px; }
.wiz-sekcja h2 { font-size: 27px; letter-spacing: -.02em; margin: 0 0 20px; }
.wiz-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.wiz-kafle article { background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 22px 22px 24px; }
.wiz-kafle h3 { font-size: 17px; margin: 0 0 9px; letter-spacing: -.01em; }
.wiz-kafle p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }

.wiz-tabela { max-width: 560px; }
.wiz-tabela td.num, .wiz-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }

.wiz-ciemna { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 34px 30px 30px; margin-top: 46px; }
.wiz-ciemna h2 { margin-top: 0; }
.wiz-ciemna .wiz-akcje { margin-top: 22px; }

.wiz-uczciwie p { font-size: 15px; line-height: 1.68; color: var(--muted); max-width: 760px; }
.wiz-koniec { text-align: center; padding-top: 52px; }
.wiz-koniec h2 { margin-bottom: 12px; }
.wiz-koniec .wiz-lead-maly { margin-left: auto; margin-right: auto; }

@media (max-width: 640px) {
  .wiz-glowna h1 { font-size: 31px; }
  .wiz-pasek nav { display: none; }
}

/* ------------------------------------------------------------- pomoc --- */
body.pomoc main { max-width: none; padding-top: 30px; }
.pomoc-uklad { display: grid; grid-template-columns: 260px minmax(0, 780px); gap: 40px;
  max-width: 1120px; margin: 0 auto; padding: 0 20px; align-items: start; }

.pomoc-spis { position: sticky; top: 24px; padding: 24px 0 30px; font-size: 13.5px; }
.pomoc-spis b { display: block; margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); }
.pomoc-spis ol { list-style: none; margin: 0; padding: 0; counter-reset: sekcja; }
.pomoc-spis li { margin: 0; counter-increment: sekcja; }
.pomoc-spis li a { display: block; padding: 6px 10px 6px 30px; color: var(--muted);
  text-decoration: none; border-radius: 8px; position: relative; line-height: 1.4; }
.pomoc-spis li a::before { content: counter(sekcja) "."; position: absolute; left: 9px;
  color: var(--faint); font-variant-numeric: tabular-nums; }
.pomoc-spis li a:hover { background: var(--surface-2); color: var(--accent); }
.pomoc-spis li a.aktywna { background: var(--accent-sub); color: var(--accent); font-weight: 600; }
.pomoc-kontakt { margin: 22px 0 0; padding: 12px 10px 0; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--faint); line-height: 1.6; }

.pomoc-sekcja { scroll-margin-top: 20px; }
.pomoc-sekcja h2 { margin-top: 44px; }
.pomoc-sekcja:first-of-type h2 { margin-top: 26px; }
.pomoc-sekcja h3 { font-size: 16px; margin: 24px 0 8px; letter-spacing: -.01em; }
.pomoc-sekcja ol, .pomoc-sekcja ul { padding-left: 22px; }
.pomoc-sekcja ol li { margin-bottom: 9px; }

.wskazowka { background: var(--accent-sub); border: 1px solid #cdd3f7; border-radius: 11px;
  padding: 13px 16px; margin: 16px 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.wskazowka b { display: block; margin-bottom: 3px; color: var(--accent); }

@media (max-width: 900px) {
  .pomoc-uklad { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pomoc-spis { position: static; padding-bottom: 10px; }
  .pomoc-spis ol { columns: 2; column-gap: 18px; }
}
@media (max-width: 560px) { .pomoc-spis ol { columns: 1; } }

/* Treść pomocy nie może rozpychać siatki: długie tabele i fragmenty kodu
   przewijają się same zamiast wypychać stronę w bok. */
.pomoc-uklad > main { min-width: 0; }
.pomoc-sekcja code { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .pomoc-sekcja table.dok-tabela { display: block; overflow-x: auto; max-width: 100%; }
  body.dokument main { padding-left: 0; padding-right: 0; }
}

/* Nota pod polem pytania: krótka, ma nie zasłaniać rozmowy, ale ma być widoczna. */
.czat-nota {
  margin: 0 0 6px; font-size: 10px; line-height: 1.4; color: var(--cichy, #6b7280);
}
.czat-nota a { color: inherit; text-decoration: underline; }

/* Baner odczytu, gdy nie udało się odczytać nic. To ostrzeżenie, nie podsumowanie wyniku,
   więc nie może wyglądać tak samo jak baner udanego odczytu. */
.scan-banner-uwaga { background: #fff7ed; border-color: #f7b267; }
.scan-banner-uwaga h3 { color: #9a3412; }
.scan-banner-uwaga a { color: #9a3412; }

/* ----------------------------------------------------------- anty bot --- */

/* Miejsce na widget w formularzu: nad przyciskiem wysyłki, nic nie zasłania. */
.antybot-miejsce { margin: 14px 0 4px; }
.antybot-miejsce:empty { margin: 0; }

/*
 * Okienko przy czynnościach, które wołają model (oddanie pracy, odczyt zdjęć,
 * podpowiedź). Widać je tylko na czas weryfikacji, a gdy wynik jest niepewny,
 * pojawia się w nim zadanie do wykonania, więc musi być klikalne i nad treścią.
 * Dół po lewej zajmuje wskaźnik odczytu, po prawej przycisk asystenta, więc to
 * okienko siada pośrodku.
 */
.antybot-okienko { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 58; max-width: min(92vw, 380px); padding: 12px 14px;
  border: 1px solid var(--border-2); border-radius: 14px; background: var(--surface);
  box-shadow: 0 10px 30px rgb(16 24 40 / .18); }
.antybot-okienko[hidden] { display: none; }
/* pasek cookies zajmuje dół ekranu, więc okienko musi nad niego ustąpić */
body.ma-cookies .antybot-okienko { bottom: calc(var(--dol-paska, 96px) + 26px); }

/* Widget asystenta jest poziomu ukrytego: nie pokazuje nic i nie ma zajmować miejsca. */
.czat-antybot:empty { display: none; }