:root {
  color-scheme: light;
  --color-bg: #fbfaf8;
  --color-surface: #ffffff;
  --color-surface-soft: #f8f5fb;
  --color-text: #171329;
  --color-text-muted: #6f6985;
  --color-border: #ded9e8;
  --color-border-strong: #c9c1d8;
  --color-primary: #6f2da8;
  --color-primary-strong: #4d167d;
  --color-primary-soft: #f0e8f8;
  --color-primary-wash: #f7f3fb;
  --color-ai: #1463d6;
  --color-ai-soft: #edf4ff;
  --color-cke: #0f766e;
  --color-cke-soft: #eaf7f4;
  --color-success: #16733a;
  --color-success-soft: #eef9f1;
  --color-danger: #c72c3b;
  --color-danger-soft: #fff1f3;
  --color-warning: #9a6600;
  --color-warning-soft: #fff8e7;
  --color-partial: #a65300;
  --color-partial-soft: #fff0dc;
  --color-correct: #d9f3df;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(35, 24, 53, 0.04), 0 8px 24px rgba(35, 24, 53, 0.06);
  --shadow-raised: 0 12px 36px rgba(35, 24, 53, 0.14);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --content-width: 1080px;
  --page-content-gap: var(--space-2);
  --focus-ring: 0 0 0 3px rgba(111, 45, 168, 0.22);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: var(--space-2);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(236, 225, 246, 0.36), transparent 28rem),
    var(--color-bg);
  color: var(--color-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

body > .user-bar,
body > article,
body > header.strona-glowna,
body > .filtr-pasek,
body > .filtr-panel,
body > nav:not(.pager) {
  width: min(100%, var(--content-width));
  margin-right: auto;
  margin-left: auto;
}

article {
  min-width: 0;
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.16em;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

.user-bar {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin-bottom: var(--page-content-gap);
  padding: 8px 12px;
  overflow-wrap: anywhere;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(35, 24, 53, 0.04);
  color: var(--color-text);
  font-size: 0.95rem;
  backdrop-filter: blur(8px);
}

/* details.user-bar-menu: the greeting IS the dropdown trigger (its <summary>), "Wyloguj" is the one thing in its
   panel. The one part of .user-bar with unpredictable, unbounded length (a name, an e-mail) - everything else in
   the bar (the avatar dot, the points pill) has a fixed width - so this is also the only flexible one: flex: 1 1
   auto + min-width: 0 lets it shrink, and .user-bar-greeting-text (not this element - see below) is what actually
   ellipsizes, so the chevron next to it never gets clipped along with the text. */
.user-bar-menu {
  position: relative;
  justify-self: start;
  min-width: 0;
}

.user-bar-greeting {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.user-bar-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 7px solid #eadcf5;
  border-radius: 50%;
  background: linear-gradient(180deg, #a77acb 0 46%, #8f5fb7 47% 100%);
  box-shadow: inset 0 0 0 4px #f4ecfa;
}

/* min-width: 0 is what lets a flex child ellipsize at all - its default min-width is auto (its content's width),
   which refuses to shrink below that and would push the bar to wrap or overflow instead. */
.user-bar-greeting-text {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Shape and open/closed rotation come from .help-summary-chevron itself (shared with "Sprawdź się"/"Pokaż
   odpowiedź"/etc. - same generic details[open] > summary .help-summary-chevron rule flips it, no rule of its own
   needed here). Only the color changes: .user-bar's own text color is the page's plain dark body text, too heavy
   for a small decorative arrow, where those other sections have a lighter accent color (--color-ai/--color-primary-
   strong) via their own <summary> instead. */
.user-bar-menu-chevron {
  color: var(--color-text-muted);
}

/* The panel floats over the page instead of pushing it down when the <details> opens - a dropdown, not an
   inline-expanding section like details.odpowiedz/ai-elaboration elsewhere. */
.user-bar-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-width: min(320px, 90vw);
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

/* The full "Zalogowano jako ... (e-mail)" sentence the trigger itself no longer has room for (see UserBar.razor's
   own comment) - free to wrap here, unlike the trigger: the panel isn't fighting to stay on one line with the rest
   of .user-bar. */
.user-bar-menu-identity {
  margin: 2px 6px 8px;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  font-size: 0.83rem;
  font-weight: 500;
}

.user-bar a,
.user-bar-link {
  color: var(--color-primary-strong);
  font-weight: 650;
  text-decoration: none;
}

.user-bar-form {
  display: block;
  margin: 0;
}

.user-bar-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.user-bar-link:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.user-bar a:hover {
  color: var(--color-primary);
}

.user-bar-login {
  justify-self: start;
  padding: 8px 10px;
}

.user-bar-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  background: #f8f5fb;
  border: 1px solid #ece3f2;
  border-radius: 11px;
}

.user-bar-nav-item {
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #554b5e;
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.user-bar a.user-bar-nav-item:hover {
  background: #eee4f5;
  color: var(--color-primary-strong);
}

.user-bar-nav-item.is-active {
  background: #fff;
  color: var(--color-primary-strong);
  box-shadow: 0 1px 4px rgba(57, 30, 78, 0.1);
}

.user-bar-nav-item.is-coming {
  color: #81778a;
  cursor: default;
}

.user-bar-nav-item small {
  padding: 2px 5px;
  background: #e9e1ef;
  border-radius: var(--radius-pill);
  color: #776982;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-transform: uppercase;
}

.user-bar-points {
  flex: 0 0 auto;
  justify-self: end;
}

.points-display {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  background: var(--color-warning-soft);
  border: 1px solid #f0d387;
  border-radius: var(--radius-pill);
  color: #5c4516;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.points-display-balance {
  min-height: 40px;
  gap: 7px;
  padding: 5px 7px 5px 8px;
  border-radius: 10px;
  font-size: 1rem;
}

.points-display-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 0;
}

.points-display-balance .points-display-icon {
  width: 24px;
  height: 24px;
}

.points-display-label {
  font-weight: 500;
}

.points-add {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  aspect-ratio: 1;
  padding: 0;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border: 1px solid #c8addd;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.points-add:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

h1.baner {
  position: relative;
  margin: 0;
  padding: 18px 24px;
  overflow: hidden;
  background: linear-gradient(110deg, #eadcf5 0%, #f3ecf8 52%, #dfcceb 100%);
  border: 1px solid #e4d5ef;
  border-radius: var(--radius-md);
  color: #2b1050;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.tagi-zadania {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 18px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.25;
}

.tag-rok {
  background: #f3f2f4;
  border-color: #dedce1;
  color: #686479;
}

.tag-kategoria {
  background: var(--color-primary-wash);
  border-color: #dfd0eb;
  color: var(--color-primary);
}

.tresc {
  margin: 0;
  padding: 24px 28px 28px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.tresc > :first-child {
  margin-top: 0;
}

.tresc p {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

article img:not(.points-display-icon) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto 0;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
}

/* Just a grouping hook now, not a visible frame: the class name stays (a lot of the rules below key off
   ".exercise-help ..." for their own refinements - the grid header layout, tighter radii/backgrounds for the boxes
   inside it), but the outer box itself (border/background/padding/shadow) added nothing next to the three boxes it
   contained, each already bordered on its own - removed, so those boxes get a little more room instead of being
   inset a second time. */
.exercise-help {
  margin-top: 16px;
}

/* One shared "main frame" style for every box in this list (details.odpowiedz/ai-elaboration/sprawozdanie AND
   .review-widget, below): same border-radius, same box-shadow, same margin-top - previously details.ai-check/
   odpowiedz got a tighter 9px radius and no shadow while .review-widget (and a plain, non-boxed
   details.ai-elaboration) kept 12px+shadow, and the gap between boxes was zeroed and patched back inconsistently
   (8px in one place, 16px in another). Now every one of them just uses this rule's own margin-top: 16px, radius and
   shadow - nothing above overrides it, so there is nothing left to keep in sync by hand. */
details.odpowiedz,
details.ai-elaboration,
details.sprawozdanie {
  margin-top: 16px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.exercise-help details.ai-check {
  background: #f7faff;
  border-color: #cfe0fb;
}

.exercise-help details.odpowiedz {
  background: #fbf8fd;
  border-color: #e4d7ed;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details.odpowiedz > summary,
details.ai-elaboration > summary,
details.sprawozdanie > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 52px 12px 64px;
  border-radius: inherit;
  color: var(--color-primary-strong);
  font-weight: 750;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.exercise-help .help-summary {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 12px;
  column-gap: 12px;
  padding: 10px 16px;
}

.exercise-help details.ai-elaboration:not(.ai-check) > summary:not(.help-summary) {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 12px;
  column-gap: 12px;
  padding: 10px 16px;
}

.exercise-help details.ai-elaboration:not(.ai-check) > summary:not(.help-summary)::before,
details.sprawozdanie > summary::before {
  position: absolute;
  left: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 800;
}

.exercise-help details.ai-elaboration:not(.ai-check) > summary:not(.help-summary)::before {
  position: static;
  grid-column: 1;
  left: auto;
}

.exercise-help details.ai-elaboration:not(.ai-check) > summary:not(.help-summary)::before {
  content: "✦";
  background: var(--color-ai-soft);
  color: var(--color-ai);
}

.help-leading-icon {
  display: grid;
  grid-column: 1;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.help-leading-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-leading-icon-check {
  background: #e7f0ff;
  color: var(--color-ai);
}

.help-leading-icon-answer {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.help-leading-icon-ai {
  background: var(--color-ai-soft);
  color: var(--color-ai);
}

.help-leading-icon-ai svg {
  stroke: none;
}

details.sprawozdanie > summary::before {
  content: "i";
  background: var(--color-cke-soft);
  color: var(--color-cke);
}

.help-summary-chevron,
details.ai-elaboration:not(.ai-check) > summary:not(.help-summary)::after,
details.sprawozdanie > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 180ms ease;
}

.exercise-help details.ai-elaboration:not(.ai-check) > summary:not(.help-summary)::after {
  grid-column: 4;
  justify-self: end;
}

.help-summary-chevron {
  grid-column: 4;
  justify-self: end;
}

details[open] > summary .help-summary-chevron {
  transform: rotate(45deg) translateY(-2px);
}

details.ai-elaboration:not(.ai-check)[open] > summary:not(.help-summary)::after {
  transform: rotate(45deg) translateY(-2px);
}

details.sprawozdanie > summary::after {
  position: absolute;
  right: 20px;
  transform: rotate(45deg) translateY(-2px);
}

details.sprawozdanie[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

details.odpowiedz > summary:hover,
details.ai-elaboration > summary:hover,
details.sprawozdanie > summary:hover {
  background: var(--color-primary-wash);
}

details.ai-elaboration > summary {
  color: var(--color-ai);
}

details.sprawozdanie > summary {
  color: var(--color-cke);
}

.help-summary-copy {
  display: flex;
  grid-column: 2;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.help-summary-title {
  color: inherit;
  font-size: 1rem;
}

.help-summary-description {
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 450;
}

.help-summary-cost {
  grid-column: 3;
  justify-self: end;
}

.help-summary-cost-placeholder {
  grid-column: 3;
  width: 38px;
}

details.odpowiedz[open],
details.ai-elaboration[open],
details.sprawozdanie[open] {
  padding-bottom: 20px;
}

details.odpowiedz[open] > summary,
details.ai-elaboration[open] > summary,
details.sprawozdanie[open] > summary {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

details.odpowiedz > :not(summary),
details.ai-elaboration > :not(summary),
details.sprawozdanie > :not(summary) {
  margin-right: 20px;
  margin-left: 20px;
}

.exercise-help details.ai-check[open] {
  padding-bottom: 0;
}

.exercise-help details.ai-check[open] > summary {
  margin-bottom: 0;
}

.exercise-help details.ai-check > .ai-check-form {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 12px 20px 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ai-check-form textarea {
  display: block;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 16px;
  resize: vertical;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.ai-check-form textarea:hover {
  border-color: #a89bbd;
}

.ai-check-form textarea:focus-visible {
  border-color: var(--color-primary);
}

.ai-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--color-ai);
  border-radius: var(--radius-sm);
  background: var(--color-ai);
  color: #fff;
  font-weight: 750;
  cursor: pointer;
  align-self: flex-start;
  margin: 0;
  transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.ai-action-button:hover {
  background: #0d51b5;
}

.ai-action-button:active {
  translate: 0 1px;
}

.ai-action-button:disabled {
  opacity: 0.58;
}

.ai-action-button svg {
  width: 20px;
  height: 20px;
}

.ai-action-button .points-display-in-button {
  min-height: 0;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.ai-action-button .points-display-in-button .points-display-icon {
  width: 18px;
  height: 18px;
}

.ai-elaboration-slot {
  margin: 0;
}

/* Used to be zeroed here because .help-separator (removed - its text now lives as ExplanationButton's own
   help-summary-description) supplied the gap before this box instead; without it this fell flush against "Pokaż
   odpowiedź z arkusza" above. Falls back to the plain details.odpowiedz/ai-elaboration/sprawozdanie rule's own
   margin-top: 16px now - the same gap every other section in this list already has. */

.ai-explanation-form {
  margin: 14px 0 0;
}

.ai-request-body > p {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.ai-action-button.is-busy svg {
  display: none;
}

.ai-action-button.is-busy .btn-spinner {
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* The verdict of the AI (.ai-check-verdict, AiCheck.razor) is one panel: the grade of the AI on top and the bar of the verdict
   (exam.css) as the bottom line of the same box, under the editor inside the form. The state classes (is-correct, is-partial,
   is-wrong) colour the box and the bar as they colour the exam's result. */
.ai-verdict-box {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-surface);
}

.ai-verdict-box .exam-feedback {
  padding: 16px 18px;
}

.ai-verdict-box .exam-feedback h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.ai-verdict-box .ai-check-text,
.ai-verdict-box .ai-saved-text {
  margin: 0;
}

/* The last grade of the visitor, stored (AiCheck.razor), above a new attempt: the same panel as a fresh grade. */
.ai-check-saved {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 20px;
}

.ai-check-again {
  align-self: flex-start;
}

.ai-check-again[hidden] {
  display: none;
}

/* The result of a closed task, pasted into the page: its blocks are 12px apart, like the blocks of the rest of the section. */
.ai-check-result-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ai-check-result-body > .exam-card {
  align-self: stretch;
}

/* One rhythm in the "Sprawdź się" section: 12px between its blocks. The editor, the result of an exam and its panels bring margins of
   their own (an exam's page needs them); in the section they would only add up to its gap, and uneven ones. */
.ai-check .exam-response .response-source {
  margin: 0;
}

.ai-check .exam-response .response-source > :first-child {
  margin-top: 0;
}

.ai-check .exam-response .response-source > :last-child {
  margin-bottom: 0;
}

.ai-check .exam-card {
  margin: 0;
}

.ai-check .exam-bundle > .exam-result-line,
.ai-check .exam-bundle-part > .exam-result-line {
  margin-top: 12px;
}

.ai-check .exam-bundle-part .ai-verdict-box,
.ai-check .exam-bundle-part .ai-hint {
  margin-top: 12px;
}

.ai-check-saved-answer {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-check-pending {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 20px;
}

.ai-check-pending-text {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--color-ai);
  font-weight: 700;
}

.ai-check-pending-text[hidden] {
  display: none;
}

.ai-check-pending-text .btn-spinner {
  display: inline-block;
  flex: none;
}

.ai-check-pending .ai-verdict-box {
  margin: 0;
}

/* What a closed task says about the last answer (LastAnswerSummary.razor): when, and the points in the colour of the result. */
.ai-check-last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.ai-check-last[hidden] {
  display: none;
}

.ai-check-last-when {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.ai-check-last.is-correct { border-color: var(--color-success); background: var(--color-success-soft); }
.ai-check-last.is-correct .ai-check-last-result { color: var(--color-success); }
.ai-check-last.is-partial { border-color: var(--color-partial); background: var(--color-partial-soft); }
.ai-check-last.is-partial .ai-check-last-result { color: var(--color-partial); }
.ai-check-last.is-wrong { border-color: var(--color-danger); background: var(--color-danger-soft); }
.ai-check-last.is-wrong .ai-check-last-result { color: var(--color-danger); }

.ai-check-saved-heading {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.ai-check-saved .ai-verdict-box {
  margin: 0;
}

/* The AI's tip for the student (AiHint.razor): a frame of its own, in the AI's colour, apart from the grade. */
.ai-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  border: 1px solid var(--color-ai);
  border-radius: 13px;
  background: var(--color-ai-soft);
}

.ai-hint[hidden] {
  display: none;
}

.ai-hint-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--color-ai);
}

.ai-hint-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ai-hint-body strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-ai);
}

.ai-hint-body p {
  margin: 0;
}

.exam-bundle-part .ai-hint {
  margin-top: 14px;
}

/* The answer editor takes the whole width of the box: the form is a flex column that aligns its children to the start, which would shrink
   it to the width of what it holds (a short task made it narrower than the box). */
.ai-check-editor {
  width: 100%;
}

/* The editor of a checked answer: locked (exercise-response.js), and shown so. */
.ai-check-editor[inert] {
  opacity: 0.85;
}

.ai-check-text {
  white-space: pre-wrap;
}

/* AI explanations remain plain text, with the model's paragraph boundaries intact. */
.ai-elaboration-text {
  padding:20px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:1.75;
  max-width:78ch;
}

.partial-form-error,
.ai-explanation-error {
  margin-top: 12px;
  color: var(--color-danger);
  font-size: 0.9rem;
}

.partial-form-refresh { margin-top: 10px; }
#ai-check-result, #ai-explanation-result { scroll-margin-top: 110px; }

.review-widget {
  margin-top: 16px;
  padding: 18px 22px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.review-heading {
  margin: 0 0 10px;
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.review-last {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  font-size: 0.84rem;
}

.review-correct {
  color: var(--color-success);
  font-weight: 750;
}

.review-incorrect {
  color: var(--color-danger);
  font-weight: 750;
}

.review-mark {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.review-mark button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  padding: 9px 16px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.review-mark button::before {
  font-size: 1.25rem;
  line-height: 1;
}

.review-knew {
  color: var(--color-success);
}

.review-knew::before {
  content: "✓";
}

.review-did-not-know {
  color: var(--color-danger);
}

.review-did-not-know::before {
  content: "↻";
}

/* Only hovering tints a button; the one that is selected has no background of its own, just the ring below. */
.review-knew:hover {
  background: var(--color-success-soft);
}

.review-did-not-know:hover {
  background: var(--color-danger-soft);
}

.review-mark button.is-selected {
  box-shadow: inset 0 0 0 1px currentColor;
}

.review-mark button:active {
  translate: 0 1px;
}

.review-tag {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

.review-tag-knew { background: var(--color-success); }
.review-tag-did-not-know { background: var(--color-danger); }

footer.zrodlo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 0 4px;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

footer.zrodlo::before {
  content: "▤";
  flex: 0 0 auto;
  color: #77708e;
  font-size: 1rem;
}

nav.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
  padding: 8px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

nav.pager > a,
nav.pager > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

nav.pager .pager-prev { justify-self: start; }
nav.pager .pager-next { justify-self: end; }
nav.pager .pager-index { justify-self: center; }

nav.pager .pager-index::before {
  content: "☷";
  font-size: 1.1rem;
}

nav.pager a:hover {
  background: var(--color-primary-wash);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

nav.pager .pager-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav.pager .pager-disabled {
  background: #f6f5f7;
  border-color: #e4e1e8;
  color: #8b8796;
}

table {
  display: block;
  width: 100%;
  margin: 16px 0;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.94rem;
}

th,
td {
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  text-align: left;
}

th { font-weight: 750; }
table th:not(:first-child),
table td:not(:first-child) { width: 3rem; text-align: center; }
table.tabela-dane th:not(:first-child),
table.tabela-dane td:not(:first-child),
table.tabela-wybor td:not(:first-child) { width: auto; text-align: left; }
table.tabela-wybor td.kod { width: 2rem; text-align: center; font-weight: 750; }
table td.rozwiazanie-komorka { background: var(--color-correct); font-weight: 750; }

.wybor-para {
  display: inline-flex;
  margin: 0 2px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  vertical-align: middle;
}

.wybor-para span { padding: 1px 8px; }
.wybor-para span:not(:last-child) { border-right: 1px solid var(--color-border-strong); }
.wybor-para span.poprawna,
.luka-odpowiedz,
.opcje p.poprawna { background: var(--color-correct); font-weight: 750; }
.luka-odpowiedz { padding: 1px 6px; border-radius: 4px; text-decoration: underline; }
.opcje { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 8px 0; }
.opcje p { margin: 0; }
.opcje p.poprawna { width: fit-content; margin: -2px -6px; padding: 2px 6px; border-radius: 4px; }

.sekwencja-dna { font-family: "Cascadia Mono", "Courier New", monospace; letter-spacing: 0.02em; }
.sekwencja-dna .promotor { color: #a65a16; font-weight: 750; }
.sekwencja-dna .intron { color: var(--color-ai); font-weight: 750; }
.sekwencja-dna .ekson { padding: 0 2px; border: 1px solid var(--color-border-strong); }
p.naglowek { margin-bottom: 4px; font-weight: 750; }
figure.przyklad-odpowiedzi { margin: 0 0 16px; }
figure.przyklad-odpowiedzi figcaption { color: var(--color-text-muted); font-size: 0.82rem; }

.app-tag,
.cke-tag,
.ai-tag {
  display: inline-flex;
  min-width: 30px;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 0.67rem;
  font-weight: 800;
  vertical-align: middle;
  white-space: nowrap;
}

.app-tag-ai,
.ai-tag { background: var(--color-ai-soft); color: var(--color-ai); }

.app-tag-cke,
.cke-tag { background: var(--color-cke-soft); color: var(--color-cke); }

.app-tag-success { background: #eaf7ed; color: #28743a; }
.app-tag-warning { background: var(--color-warning-soft); color: #6b4d0b; }
.app-tag-neutral { background: #f1eef3; color: var(--color-text-muted); }

header.strona-glowna {
  padding: 24px;
  background: linear-gradient(110deg, #eadcf5, #f5eff9);
  border: 1px solid #e4d5ef;
  border-radius: var(--radius-md);
}

header.strona-glowna h1 {
  margin: 0;
  color: #2b1050;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.25;
}

.filtr-pasek {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.filtr-trigger,
.filtr-wyczysc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.filtr-trigger svg,
.filtr-wyczysc svg { width: 18px; height: 18px; }
.filtr-trigger:hover,
.filtr-wyczysc:hover { background: var(--color-primary-wash); }
.filtr-trigger-aktywny { background: var(--color-primary); color: #fff; }
.filtr-trigger-aktywny:hover { background: var(--color-primary-strong); }
.filtr-licznik { padding-left: 8px; border-left: 1px solid currentColor; }

.filtr-panel[popover] {
  width: min(calc(100% - 32px), 680px);
  max-height: min(84vh, 760px);
  padding: 0;
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
}

.filtr-panel[popover]::backdrop { background: rgba(25, 18, 35, 0.38); }
.filtr-naglowek { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.filtr-naglowek h2 { margin: 0; color: var(--color-text); font-size: 1.1rem; text-transform: none; letter-spacing: 0; }
.filtr-zamknij { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.filtr-zamknij svg { display: block; width: 20px; height: 20px; }
.filtr-zamknij:hover { background: var(--color-primary-wash); color: var(--color-primary); }
.filtr-sekcja { padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
p.filtr-etykieta { margin: 0 0 10px; font-weight: 750; }
.filtr-etykieta-note { color: var(--color-text-muted); font-weight: 400; }
.filtr-link { margin-left: 8px; padding: 0; border: 0; background: transparent; color: var(--color-primary); font-size: 0.82rem; cursor: pointer; }
.filtr-link:hover { text-decoration: underline; }
.filtr-lata,
.filtr-trudnosc { display: flex; flex-wrap: wrap; gap: 8px; }
.filtr-chip { padding: 4px 9px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-primary-wash); }
.filtr-chip label,
.filtr-pole { cursor: pointer; }
.filtr-chip small { color: var(--color-text-muted); }
.filtr-akcje { display: flex; gap: 10px; padding: 16px 20px; }
.filtr-akcje button,
.filtr-akcje a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.filtr-akcje a { background: var(--color-surface); color: var(--color-primary); }

body > nav:not(.pager) > details {
  margin-top: 10px;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

body > nav:not(.pager) summary {
  padding: 12px 16px;
  cursor: pointer;
}

body > nav:not(.pager) > details > summary {
  background: var(--color-primary-wash);
  color: var(--color-primary-strong);
}

body > nav:not(.pager) details details { margin: 0; border-top: 1px solid var(--color-border); }
body > nav:not(.pager) ul { margin: 0; padding: 0 20px 14px 46px; }
body > nav:not(.pager) li { margin: 6px 0; }
body > nav:not(.pager) a { color: var(--color-text); text-decoration: none; }
body > nav:not(.pager) a:hover { color: var(--color-primary); text-decoration: underline; }

.login,
.settings {
  margin-top: 48px;
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* Account audit keeps amounts separate from long exercise and topic descriptions. */
.account-audit-balance,.account-audit-panel { min-width:0; padding:24px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; }
.account-audit-balance { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.account-audit-balance .home-feature-link { margin:0; align-self:center; }
.account-audit-balance h2,.account-audit-panel h2 { margin:0; font-size:20px; line-height:1.3; }
.account-audit-balance p { margin:12px 0 4px; }
.account-audit-balance p strong { font-size:32px; color:var(--color-primary); font-variant-numeric:tabular-nums; }
.account-audit-balance small,.account-audit-note { color:var(--color-text-muted); font-size:12px; line-height:1.6; }
.account-audit-note { margin:10px 0 0; }
.account-audit-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.account-audit-totals div { min-width:0; padding-left:16px; border-left:2px solid var(--color-primary-soft); }
.account-audit-totals dt { font-size:13px; color:var(--color-text-muted); }
.account-audit-totals dd { margin:6px 0 0; font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
.account-audit-totals dd small { font-size:13px; font-weight:400; }
.account-audit-services { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px; border-top:1px solid var(--color-border); padding-top:20px; }
.account-audit-services>div { min-width:0; display:grid; gap:4px; font-size:13px; }
.account-audit-services strong { color:var(--color-primary); font-size:18px; font-variant-numeric:tabular-nums; }
.account-audit-services small { color:var(--color-text-muted); font-size:11px; line-height:1.5; }
.account-audit-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.account-audit-filter { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0; font-size:13px; }
.account-audit-filter select,.account-audit-filter button { max-width:100%; min-height:44px; padding:8px 12px; border:1px solid var(--color-border-strong); border-radius:8px; background:var(--color-surface); color:var(--color-text); font:inherit; }
.account-audit-filter button { border-color:var(--color-primary); background:var(--color-primary); color:#fff; cursor:pointer; }
.account-audit-table { display:table; table-layout:fixed; width:100%; margin:20px 0; border-collapse:collapse; font-size:13px; }
.account-audit-table caption { text-align:left; padding-bottom:12px; }
/* Override the narrow, centred answer columns used by P/F exercise tables. */
table.account-audit-table th,table.account-audit-table td { width:auto; padding:14px 10px; border:0; border-bottom:1px solid var(--color-border); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.account-audit-table th { background:var(--color-surface-soft); font-size:11px; color:var(--color-text-muted); font-weight:600; }
.account-audit-table th:first-child { width:18%; }
.account-audit-table th:nth-child(3),.account-audit-table th:nth-child(4) { width:18%; text-align:right; }
.account-audit-description strong,.account-audit-description a,.account-audit-description span,.account-audit-description small { display:block; }
.account-audit-description strong { font-weight:600; }
.account-audit-description a,.account-audit-description span,.account-audit-description small { margin-top:4px; line-height:1.5; }
.account-audit-description small { color:var(--color-text-muted); }
.account-audit-table .account-audit-amount { text-align:right; font-variant-numeric:tabular-nums; }
.account-audit-amount.is-credit { color:var(--color-success); }
.account-audit-empty { padding:20px 0; color:var(--color-text-muted); }
.account-audit-pagination { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px; font-size:13px; }
.account-audit-pagination a { padding:10px 0; }

.wallet-shell {
  width: min(calc(100% - 32px), var(--content-width));
  margin: 0 auto;
}

.wallet-shell > .user-bar { width: 100%; }

.wallet-page {
  display: grid;
  gap: 24px;
  width: 100%;
}

.wallet-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  width: max-content;
  margin: -4px 0 8px;
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.wallet-back:hover {
  color: var(--color-primary-strong);
  text-decoration: underline;
}

.wallet-panel {
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.wallet-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 112px;
  padding: 20px 24px;
  background: linear-gradient(105deg, #f1e7fa 0%, #eee2f7 48%, #e8d8f3 100%);
  border: 1px solid #eadff2;
  border-radius: var(--radius-md);
}

.wallet-hero-icon {
  display: grid;
  flex: 0 0 56px;
  place-items: center;
  width: 56px;
  height: 56px;
  background: rgba(231, 211, 248, 0.9);
  border-radius: 50%;
  color: #4f12a3;
}

.wallet-hero-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wallet-hero h1 {
  margin: 0;
  color: var(--color-primary-strong);
  font-size: clamp(1.65rem, 3vw, 2rem);
  line-height: 1.2;
}

.wallet-hero p {
  margin: 2px 0 0;
  color: #7568bd;
  font-size: 1.08rem;
}

.wallet-panel h2,
.wallet-starter h2,
.wallet-packages h2 { color: #241075; }

.wallet-balance-card h2 {
  margin: 0 0 18px;
  font-size: 1.5rem;
}

.wallet-balance-value {
  display: flex;
  align-items: center;
  gap: 20px;
}

.wallet-balance-value img { width: 64px; height: 64px; margin: 0; }
.wallet-balance-value strong { color: #27108a; font-size: clamp(2.35rem, 6vw, 3.2rem); line-height: 1; }
.wallet-balance-card > p { margin: 14px 0 0; color: #7063bc; }
.wallet-balance-card .wallet-expiry { margin-top: 4px; font-size: 0.86rem; }

.wallet-starter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 32px;
  background: linear-gradient(105deg, #faf8ff, #f2ecff);
  border: 1px solid #d9c9fb;
  border-radius: var(--radius-md);
}

.wallet-starter h2 { margin: 6px 0 0; font-size: 1.45rem; line-height: 1.3; }
.wallet-starter p { margin: 2px 0 0; color: #7568bd; }
.wallet-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 16px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.05em; line-height: 1; text-transform: uppercase; }
.wallet-badge-purple { background: linear-gradient(90deg, #e5d6ff, #d8c1ff); color: #4e0dc1; }
.wallet-badge-green { background: #d9f3dd; color: #18722e; }
.wallet-granted { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; color: #16832c; font-size: 1.1rem; font-weight: 700; }
.wallet-granted > span { display: grid; place-items: center; width: 44px; height: 44px; background: #d4f2d9; border-radius: 50%; font-size: 1.5rem; }

.wallet-packages > h2 { margin: 2px 0 4px; font-size: 1.65rem; }
.wallet-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wallet-package {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 376px;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.wallet-package:hover { border-color: #9c72e6; box-shadow: 0 8px 28px rgba(77, 22, 125, 0.12); }
.wallet-package:active { translate: 0 1px; }
.wallet-package:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.wallet-package:has(input:checked) { border: 2px solid #7430e6; padding: 19px; background: linear-gradient(180deg, #fff 0%, #fbf9ff 100%); }
.wallet-package input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wallet-package-radio { position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border: 2px solid #a6adc0; border-radius: 50%; }
.wallet-package:has(input:checked) .wallet-package-radio { background: #6022dc; border-color: #6022dc; }
.wallet-package:has(input:checked) .wallet-package-radio::after { content: "✓"; display: grid; height: 100%; place-items: center; color: #fff; font-weight: 900; }
.wallet-package > .wallet-badge,
.wallet-package-badge-placeholder { min-height: 28px; margin: 2px 24px 18px; }
.wallet-package-name { margin-bottom: 12px; color: #29117e; font-size: 1.18rem; }
.wallet-package-points { color: #281083; font-size: clamp(2rem, 4vw, 2.55rem); line-height: 1.15; }
.wallet-package-price { margin-top: 8px; color: #281083; font-size: 2rem; line-height: 1.2; }
.wallet-package-unit { color: #7162c4; font-size: 0.98rem; }
.wallet-package-divider { width: 100%; margin: 20px 0 16px; border-top: 1px solid var(--color-border); }
.wallet-package-description { margin-top: auto; color: #7162c4; line-height: 1.4; }

.wallet-checkout { padding: 24px 32px 20px; }
.wallet-checkout-summary { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--color-border); }
.wallet-checkout-summary span { color: #7568bd; }
.wallet-checkout-summary h2 { margin: 4px 0 0; font-size: 1.3rem; line-height: 1.3; }
.wallet-checkout-price { flex: 0 0 190px; padding-left: 32px; border-left: 1px solid var(--color-border); }
.wallet-checkout-price strong { display: block; color: #281083; font-size: 2.45rem; line-height: 1.15; }
.wallet-consents { display: grid; gap: 12px; padding: 18px 0; }
.wallet-consents h3 { margin: 0 0 2px; color: #241075; font-size: 1.18rem; }
.wallet-consents label { display: flex; align-items: center; gap: 12px; color: #7162c4; cursor: pointer; }
.wallet-consents input { width: 24px; height: 24px; margin: 0; accent-color: #6022dc; }
.wallet-consents u { color: #124dd5; font-weight: 650; text-underline-offset: 2px; }
.wallet-consents small { font-size: 0.78rem; }
.wallet-demo-note { margin: 0 0 12px; color: var(--color-text-muted); font-size: 0.9rem; text-align: center; }
.wallet-checkout form { margin: 0; }
.wallet-checkout button { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: center; gap: 14px; padding: 10px 20px; background: linear-gradient(100deg, #5413ce, #6518dc 55%, #4d0bc5); border: 0; border-radius: var(--radius-sm); color: #fff; font-size: 1.15rem; font-weight: 750; cursor: pointer; transition: filter 160ms ease, transform 120ms ease, opacity 160ms ease; }
.wallet-checkout button:hover:not(:disabled) { filter: brightness(1.08); }
.wallet-checkout button:active:not(:disabled) { translate: 0 1px; }
.wallet-checkout button:disabled { opacity: 0.45; }
.wallet-safe { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: #7162c4; font-size: 0.88rem; }
.wallet-safe svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

.wallet-resume-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--color-ai-soft);
  border-radius: var(--radius-sm);
  color: #17477f !important;
  text-align: center;
}

.partial-form-wallet a {
  color: var(--color-ai);
  font-weight: 800;
  text-underline-offset: 2px;
}

.partial-form-wallet a:hover {
  color: #0d51b5;
}

.custom-check-page {
  display: grid;
  gap: 24px;
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.custom-check-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 120px;
  padding: 24px 28px;
  background: linear-gradient(105deg, #f1e7fa 0%, #eee2f7 48%, #e8d8f3 100%);
  border: 1px solid #e4d6ef;
  border-radius: var(--radius-md);
}

.custom-check-hero-icon {
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  place-items: center;
  background: rgba(225, 205, 246, 0.9);
  border-radius: 50%;
  color: var(--color-primary-strong);
}

.custom-check-hero-icon svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-check-hero h1 { margin: 0; color: #241075; font-size: clamp(1.65rem, 4vw, 2rem); line-height: 1.2; }
.custom-check-hero p { max-width: 62ch; margin: 4px 0 0; color: #7162ae; font-size: 1.02rem; line-height: 1.45; }

.custom-check-card {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.custom-check-form { display: grid; gap: 18px; padding: 32px; }
.custom-check-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 16px;
  resize: vertical;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  color: var(--color-text);
  line-height: 1.55;
}
.custom-check-form textarea:hover { border-color: #a996be; }
.custom-check-form textarea:focus { border-color: var(--color-primary); }

.custom-check-input-section { position: relative; display: grid; gap: 14px; }
.custom-check-input-section [hidden] { display: none !important; }
.custom-check-section-heading { display: grid; grid-template-columns: 32px 1fr auto; align-items: start; gap: 12px; }
.custom-check-section-heading > span {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  background: var(--color-primary-soft);
  border-radius: 50%;
  color: var(--color-primary-strong);
  font-weight: 850;
}
.custom-check-section-heading h2 { margin: 0; color: #241075; font-size: 1.25rem; line-height: 1.3; }
.custom-check-section-heading p { margin: 2px 0 0; color: var(--color-text-muted); line-height: 1.45; }
.custom-check-divider { margin: 8px 0; border-top: 1px solid var(--color-border); }
.custom-check-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.custom-check-source-actions { position: relative; }
.custom-check-add-image,
.custom-check-cancel-scan {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid #b9a8c9;
  border-radius: 8px;
  color: var(--color-primary-strong);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.custom-check-add-image:hover,
.custom-check-cancel-scan:hover { background: var(--color-primary-wash); border-color: var(--color-primary); }
.custom-check-chevron { margin-left: 2px; font-size: 1.05rem; line-height: 1; }
.custom-check-source-menu {
  position: absolute;
  z-index: 10;
  top: calc(100% + 7px);
  right: 0;
  width: min(310px, calc(100vw - 48px));
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(45, 25, 75, 0.16);
}
.custom-check-source-menu button { display: grid; width: 100%; grid-template-columns: 28px 1fr; gap: 8px; padding: 10px; background: transparent; border: 0; border-radius: 7px; color: var(--color-text); text-align: left; cursor: pointer; }
.custom-check-source-menu button:hover { background: var(--color-primary-wash); }
.custom-check-source-menu button > span:first-child { color: var(--color-primary); font-size: 1.1rem; text-align: center; }
.custom-check-source-menu strong,
.custom-check-source-menu small { display: block; }
.custom-check-source-menu small { margin-top: 2px; color: var(--color-text-muted); font-weight: 500; }
.custom-check-source-body { display: grid; gap: 9px; }
.custom-check-source-body label { color: var(--color-text); font-weight: 750; }
.custom-check-paste-hint { margin: -1px 0 0; color: var(--color-text-muted); font-size: 0.86rem; }
.custom-check-paste-hint kbd { padding: 1px 5px; background: #f5f1f8; border: 1px solid #d8cce2; border-radius: 4px; color: #61556b; font-family: inherit; font-size: 0.78rem; }

.custom-check-scan {
  display: grid;
  min-height: 330px;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  background: var(--color-primary-wash);
  border: 1px dashed #bda4d3;
  border-radius: 10px;
  text-align: center;
}
.custom-check-scan-qr { width: 220px; max-width: 100%; }
.custom-check-scan-qr svg { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; }
.custom-check-scan strong { color: #2c1e37; }
.custom-check-scan-hint { margin: 5px 0 0; color: var(--color-text-muted); font-size: 0.9rem; }
.custom-check-scan-hint.error { color: #c5221f; }
.custom-check-image-preview { position: relative; display: grid; gap: 0; overflow: hidden; background: #faf8fc; border: 1px solid var(--color-border); border-radius: 10px; }
.custom-check-image-preview > img { display: block; width: 100%; height: min(390px, 46vw); min-height: 250px; object-fit: contain; padding: 14px; background: #f8f5fa; }
.custom-check-image-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--color-border); }
.custom-check-image-meta > span:first-child { min-width: 0; }
.custom-check-image-meta strong,
.custom-check-image-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-check-image-meta small { margin-top: 2px; color: var(--color-text-muted); }
.custom-check-ready { color: #28723f; font-weight: 750; white-space: nowrap; }
.custom-check-remove-image { position: absolute; top: 12px; right: 12px; padding: 7px 11px; background: rgba(255,255,255,0.95); border: 1px solid #d7cbdc; border-radius: 7px; color: #a32935; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(45,25,75,0.09); }
.custom-check-remove-image:hover { background: #fff4f5; border-color: #d79ca2; }

.custom-check-info { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--color-ai-soft); border-radius: 10px; color: #234d83; }
.custom-check-info > span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; border: 1px solid #78a6e7; border-radius: 50%; font-weight: 850; }
.custom-check-info p { margin: 0; line-height: 1.5; }
.custom-check-result { padding: 0 32px 32px; }
.custom-check-result-heading { display: flex; align-items: center; gap: 12px; padding: 20px 0 14px; border-top: 1px solid var(--color-border); }
.custom-check-result-heading > div > span { color: var(--color-text-muted); font-size: 0.82rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; }
.custom-check-result-heading h2 { margin: 0; color: var(--color-ai); font-size: 1.25rem; }
.custom-check-result .ai-check-text { padding: 20px; background: #f8fbff; border: 1px solid #cfe0f8; border-radius: 10px; }
.custom-check-next { min-height: 42px; margin-top: 16px; padding: 8px 14px; background: #fff; border: 1px solid var(--color-ai); border-radius: var(--radius-sm); color: var(--color-ai); font-weight: 750; cursor: pointer; }
.custom-check-next:hover { background: var(--color-ai-soft); }
.custom-check-next:active { translate: 0 1px; }
.login h1,
.settings h1 { margin-top: 0; line-height: 1.25; }
.login-error { color: var(--color-danger); }
.google-button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 16px; border: 1px solid #dadce0; border-radius: var(--radius-sm); background: #fff; color: #3c4043; font-weight: 700; text-decoration: none; }
.google-button:hover { background: #f8f9fa; border-color: #b8c9e8; }
.login-dev-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.login-dev-form label { display: block; margin: 8px 0; }
.login-dev-form input { width: min(100%, 360px); margin-left: 8px; padding: 7px 9px; border: 1px solid var(--color-border-strong); border-radius: 6px; }
.login-dev-form button { padding: 8px 14px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; cursor: pointer; }

@media (max-width: 980px) {
  .user-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .user-bar-menu,
  .user-bar-login { grid-column: 1; grid-row: 1; }
  .user-bar-menu { max-width: min(260px, 55vw); }
  .user-bar-points { grid-column: 2; grid-row: 1; }
  .user-bar-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .user-bar-nav-item { flex: 1 1 0; }
}





@media (min-width: 480px) and (max-width: 820px) {
  .wallet-package-grid { grid-template-columns: 1fr; }
  .wallet-package {
    min-height: 280px;
    padding-right: 40px;
    padding-left: 40px;
  }
  .wallet-package:has(input:checked) { padding-right: 39px; padding-left: 39px; }
}



/* Application header and the new landing page. The header deliberately keeps navigation in one compact disclosure;
   the landing page supplies the visual overview. Borders stay neutral, while purple is reserved for interaction and
   the geometric brand motifs. */
.user-bar {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px 9px 16px;
}

.user-bar-functions,
.user-bar-account {
  position: relative;
  min-width: 0;
}

/* The two dropdowns are native popovers (button[popovertarget] + [popover]): the browser provides outside-click and
   Esc dismissal. Popovers render in the top layer, so each panel is placed against its trigger with CSS anchor
   positioning instead of being absolutely positioned inside the wrapper. */
.user-bar-functions-summary,
.user-bar-greeting {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text);
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.user-bar-functions-summary { anchor-name: --user-bar-functions; }
.user-bar-greeting { anchor-name: --user-bar-account; }

.user-bar-functions:has(:popover-open) .help-summary-chevron,
.user-bar-account:has(:popover-open) .help-summary-chevron {
  transform: rotate(45deg) translateY(-2px);
}

.user-bar-functions-summary:hover,
.user-bar-greeting:hover {
  background: #f6f4f7;
}

.user-bar-functions-summary .help-summary-chevron,
.user-bar-greeting .help-summary-chevron {
  color: #625b70;
}

.user-bar-functions-panel {
  position: fixed;
  inset: auto;
  top: calc(anchor(--user-bar-functions bottom) + 7px);
  left: anchor(--user-bar-functions left);
  width: min(310px, calc(100vw - 32px));
  margin: 0;
  gap: 2px;
  padding: 7px;
  overflow: visible;
  background: var(--color-surface);
  color: inherit;
  border: 1px solid #e2dfe5;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(35, 24, 53, 0.14);
}

.user-bar-functions-panel:popover-open {
  display: grid;
}

.user-bar-function {
  display: grid;
  gap: 1px;
  min-height: 52px;
  align-content: center;
  padding: 8px 11px;
  border-radius: 8px;
  color: #2c2733;
  text-decoration: none;
}

.user-bar-function > span {
  font-size: 0.91rem;
  font-style: normal;
  font-weight: 720;
}

.user-bar-function small {
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.user-bar-function em {
  margin-left: 6px;
  color: #8b8492;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.user-bar a.user-bar-function:hover,
.user-bar-function.is-active {
  background: #f5f2f7;
  color: var(--color-primary-strong);
}

.user-bar-function.is-coming {
  color: #77717d;
  cursor: default;
}

.user-bar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.user-bar-separator {
  width: 1px;
  height: 34px;
  background: #e2dfe5;
}

.user-bar-account .user-bar-menu-panel {
  position: fixed;
  inset: auto;
  top: calc(anchor(--user-bar-account bottom) + 6px);
  right: anchor(--user-bar-account right);
  left: auto;
  margin: 0;
  overflow: visible;
  color: inherit;
}

.user-bar-avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #eee5f8;
  box-shadow: none;
  color: #35145d;
  font-size: 0.92rem;
  font-weight: 800;
}

.user-bar-greeting-text {
  max-width: 150px;
}

.user-bar-login {
  justify-self: auto;
  padding: 8px 10px;
}

.home-page {
  width: min(100%, var(--content-width));
  margin: 42px auto 64px;
}

.home-intro {
  margin-bottom: 28px;
}

.home-intro h1 {
  margin: 0;
  color: #171329;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.home-intro p {
  margin: 8px 0 0;
  color: #716a86;
  font-size: clamp(1rem, 2vw, 1.28rem);
  line-height: 1.45;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-feature {
  position: relative;
  display: grid;
  min-height: 276px;
  grid-template-columns: minmax(0, 61%) 39%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e1dfe3;
  border-radius: 18px;
  box-shadow: 0 2px 9px rgba(35, 24, 53, 0.035);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 180ms ease, transform 180ms ease;
}

a.home-feature:hover {
  color: inherit;
  box-shadow: 0 10px 28px rgba(35, 24, 53, 0.09);
  transform: translateY(-2px);
}

.home-feature-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-direction: column;
  padding: 30px 8px 27px 30px;
}

.home-feature-label {
  margin-bottom: 14px;
  color: #6130a0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-feature strong {
  display: block;
  color: #171329;
  font-size: clamp(1.3rem, 2.35vw, 1.7rem);
  font-weight: 790;
  letter-spacing: -0.035em;
  line-height: 1.17;
}

.home-feature-description {
  display: block;
  margin-top: 11px;
  color: #716a86;
  font-size: 0.98rem;
  line-height: 1.48;
}

.home-feature-link {
  display: inline-flex;
  min-height: 44px;
  align-items: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 15px;
  color: #5f20d2;
  font-size: 0.96rem;
  font-weight: 680;
}

.home-feature-link span {
  transition: transform 160ms ease;
}

a.home-feature:hover .home-feature-link span {
  transform: translateX(4px);
}

.home-feature.is-coming .home-feature-link {
  color: #8a8490;
}

.home-geometry {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-geometry::after {
  position: absolute;
  z-index: 4;
  inset: 0 auto 0 0;
  width: 28%;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
}

.home-geometry img {
  position: absolute;
  top: 50%;
  right: -8%;
  display: block;
  width: 125%;
  height: auto;
  max-width: none;
  margin: 0;
  transform: translateY(-50%);
}





/* Shared page language: every primary application screen uses the same open intro, content width, spacing,
   neutral surfaces and purple interaction accent. */
.app-page {
  display: grid;
  width: min(100%, var(--content-width));
  gap: 28px;
  margin: 40px auto 64px;
}

.page-intro {
  position: relative;
  display: grid;
  min-height: 132px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.page-intro.has-artwork {
  grid-template-columns: minmax(0, 1fr) 230px;
}

.page-intro-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.page-intro-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.page-intro h1 {
  max-width: 820px;
  margin: 0;
  color: var(--color-text);
  font-size: clamp(2.15rem, 4.3vw, 3.35rem);
  font-weight: 790;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.page-intro p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.5;
}

.page-intro-artwork {
  position: absolute;
  top: 50%;
  right: -16px;
  width: 260px;
  max-width: none;
  margin: 0;
  opacity: 0.62;
  transform: translateY(-50%);
}

.home-page {
  margin: 40px auto 64px;
}

.home-feature-grid {
  gap: 18px;
}

.home-feature {
  min-height: 292px;
  border-color: #dedbe2;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(35, 24, 53, 0.045);
}

.catalog-page {
  gap: 24px;
}

.catalog-filter-bar {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(35, 24, 53, 0.025);
}

.catalog-filter-bar .filtr-pasek {
  margin: 0;
}

.catalog-filter-bar .filtr-trigger,
.catalog-filter-bar .filtr-wyczysc {
  min-height: 48px;
  border-color: var(--color-border-strong);
  border-radius: 10px;
  color: var(--color-text-muted);
}

.catalog-filter-bar .filtr-trigger:hover,
.catalog-filter-bar .filtr-wyczysc:hover {
  background: #f7f5f8;
  border-color: #b8adc3;
  color: var(--color-primary);
}

.catalog-filter-bar .filtr-trigger-aktywny {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.catalog-summary {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

body .catalog-tree > details {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body .catalog-tree > details + details {
  border-top: 1px solid var(--color-border);
}

body .catalog-tree > details > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--color-primary-wash);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease;
}

body .catalog-tree > details > summary::-webkit-details-marker {
  display: none;
}

body .catalog-tree > details > summary:hover,
body .catalog-tree > details[open] > summary {
  background: var(--color-primary-wash);
}

body .catalog-tree > details > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

body .catalog-tree > details > summary::after {
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 1.5px solid #736d7b;
  border-bottom: 1.5px solid #736d7b;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

body .catalog-tree > details[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.catalog-roman {
  min-width: 2.2rem;
  color: var(--color-primary);
  font-weight: 820;
}

body .catalog-tree > details > summary strong {
  color: var(--color-text);
  font-weight: 720;
}

.catalog-count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

body .catalog-tree details details {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

body .catalog-tree details details > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 56px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease;
}

body .catalog-tree details details > summary::-webkit-details-marker {
  display: none;
}

body .catalog-tree details details > summary:hover,
body .catalog-tree details details > summary:focus-visible,
body .catalog-tree details details[open] > summary {
  background: #f7f5f8;
}

body .catalog-tree details details > summary:focus-visible {
  outline: 2px solid #8b8491;
  outline-offset: -2px;
}

.catalog-topic-prefix {
  min-width: 2.7rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 720;
}

.catalog-topic-name {
  font-weight: 620;
}

.catalog-topic-count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 620;
}

body .catalog-tree details details > summary::after {
  width: 7px;
  height: 7px;
  margin-right: 2px;
  margin-left: 5px;
  flex: 0 0 auto;
  border-right: 1.5px solid #736d7b;
  border-bottom: 1.5px solid #736d7b;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

body .catalog-tree details details[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

body .catalog-tree ul {
  margin: 0;
  padding: 0 24px 16px 72px;
}

.custom-check-page {
  gap: 28px;
  margin: 40px auto 64px;
}

.custom-check-card {
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(35, 24, 53, 0.055);
}

.custom-check-form {
  gap: 22px;
  padding: 28px;
}

.custom-check-section-heading h2 {
  color: var(--color-text);
  font-size: 1.22rem;
}

.custom-check-form textarea {
  border-color: #cec8d5;
  border-radius: 12px;
}

.custom-check-add-image,
.custom-check-cancel-scan {
  min-height: 44px;
  padding: 8px 14px;
  border-color: var(--color-border-strong);
  border-radius: 10px;
  color: var(--color-text);
}

.custom-check-info {
  border: 1px solid #d8e6f9;
}

.custom-check-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
}





@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Sprawdzian AI: topic picker, player, result and persistent history. */
.ai-test-page { margin-top: var(--page-content-gap); padding-bottom: 72px; }
.ai-test-setup { display: grid; gap: 22px; }
.ai-test-card,
.ai-test-history,
.ai-test-state,
.ai-test-result-summary,
.ai-test-review,
.ai-test-player { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #dce5df); border-radius: 20px; box-shadow: 0 10px 28px rgba(26, 56, 42, .06); }
.ai-test-card { padding: 26px; }
.ai-test-settings { display: grid; gap: 26px; }
.ai-test-builder > .ai-test-settings-section {
  min-width: 0; padding: 24px; border: 0; border-radius: 14px;
  background: var(--color-surface); box-shadow: 0 3px 18px rgb(35 24 53 / .06);
}
.ai-test-builder > .ai-test-settings-section + .ai-test-settings-section { padding-top: 24px; border-top: 0; }
.ai-test-builder .ai-test-step > span { background: var(--color-primary-wash); }
.ai-division-picker { max-width:560px; }
.ai-test-builder { max-width:760px; }
.ai-test-builder [hidden] { display: none; }
.ai-test-builder .ai-topic-tree { max-height: none; border: 0; border-radius: 0; }
.ai-test-builder .ai-test-submit-card { padding: 0; }
.ai-test-builder .ai-test-submit-card > .paid-action { width:560px; max-width:100%; }
.ai-test-builder .ai-test-submit-card .ai-action-button { width:100%; justify-content:center; }
.ai-test-builder .ai-test-counts { max-width:560px; }
.ai-test-builder .ai-test-counts label > span { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ai-test-builder.ai-test-settings .ai-test-counts .ai-test-count-price { position:static; transform:none; }
.ai-test-page .ai-test-history { border: 0; box-shadow: 0 3px 18px rgb(35 24 53 / .06); }
@media (max-width: 760px) {
  .ai-test-builder > .ai-test-settings-section,
  .ai-test-builder > .ai-test-settings-section + .ai-test-settings-section { padding: 14px; border-radius: 10px; }
  .ai-test-builder .ai-test-submit-card .ai-action-button { width: 100%; justify-content: center; }
  .ai-test-builder .ai-test-submit-card > .paid-action { width: 100%; }
  .ai-test-builder .ai-test-counts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .ai-test-builder .ai-test-counts label > span { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 5px; font-size:14px; }
  .ai-test-builder .ai-test-counts .ai-test-count-price { position:static; transform:none; }

}
.ai-test-settings-section + .ai-test-settings-section { padding-top: 26px; border-top: 1px solid var(--color-border, #dce5df); }
.ai-test-step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.ai-test-step > span { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800; }
.ai-test-step h2 { margin: 1px 0 5px; font-size: 1.2rem; }
.ai-test-step p { margin: 0; color: var(--color-text-muted); }
.ai-topic-tree, .catalog-tree { border: 1px solid var(--color-border, #dce5df); border-radius: 14px; overflow: hidden; }
.ai-topic-tree { max-height: 570px; overflow-y: auto; }
.ai-topic-tree details + details { border-top: 1px solid var(--color-border, #dce5df); }
.ai-topic-tree summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--color-primary-wash); cursor: pointer; }
.ai-topic-tree summary { list-style: none; }
.ai-topic-tree summary::-webkit-details-marker { display: none; }
/* The same chevron as the division rows of the catalogue (baza.html, .catalog-tree), only on divisions that have topics. */
.ai-topic-tree details:not(.ai-topic-leaf) > summary::after {
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 1.5px solid #736d7b;
  border-bottom: 1.5px solid #736d7b;
  content: "";
  flex: 0 0 auto;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}
.ai-topic-tree details:not(.ai-topic-leaf)[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.ai-topic-parent { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ai-topic-leaf > summary { cursor: default; }
.ai-topic-children { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 7px 14px 13px 38px; }
.ai-topic-children label { display: flex; gap: 9px; align-items: flex-start; padding: 8px; border-radius: 8px; cursor: pointer; }
.ai-topic-children label:hover { background: var(--color-primary-wash); }
.ai-topic-children > details { grid-column: 1 / -1; }
.ai-topic-group { border-radius: 8px; }
.ai-topic-tree .ai-topic-group + .ai-topic-group, .ai-topic-tree .ai-topic-children > details + details { border-top: 0; }
.ai-topic-tree .ai-topic-group > summary { padding: 8px; background: transparent; border-radius: 8px; }
.ai-topic-tree .ai-topic-group > summary:hover { background: var(--color-primary-wash); }
.ai-topic-group > .ai-topic-children { padding: 0 0 6px 26px; }
.ai-topic-tree input { accent-color: var(--color-primary); width: 17px; height: 17px; flex: 0 0 auto; }
.ai-test-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ai-test-counts label { cursor: pointer; }
.ai-test-counts input { position: absolute; opacity: 0; pointer-events: none; }
.ai-test-counts label > span { display: block; padding: 14px; text-align: center; border: 1px solid var(--color-border, #dce5df); border-radius: 12px; font-weight: 750; }
.ai-test-counts label > span { position: relative; }
/* The text stays centred in the tile; the price sits on its right edge. */
.ai-test-counts .ai-test-count-price { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.ai-test-counts input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-strong); box-shadow: inset 0 0 0 1px var(--color-primary); }
.ai-test-submit-card { padding-top: 2px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ai-test-submit-only { justify-content: flex-start; }
.ai-test-submit-card p { margin: 4px 0 0; color: var(--color-text-muted); max-width: 650px; }
.ai-test-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 12px; padding: 13px 20px; background: var(--color-primary); color: white; text-decoration: none; font: inherit; font-weight: 800; cursor: pointer; }
.ai-test-primary:hover { background: var(--color-primary-strong); color: white; }
.ai-test-primary span { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.35); }
.ai-test-alert { margin-bottom: 18px; padding: 13px 16px; border: 1px solid #efaaa5; border-radius: 12px; background: #fff0ef; color: #8a2420; }
.ai-test-history { margin-top: 34px; padding: 24px; }
.ai-test-history-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.ai-test-history-heading span { color: var(--color-primary); text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; font-weight: 800; }
.ai-test-history-heading h2 { margin: 4px 0 0; }
.ai-test-history-sort { display: grid; gap: 5px; color: var(--color-text-muted); font-size: .78rem; font-weight: 700; }
.ai-test-history-sort span { color: inherit; text-transform: none; letter-spacing: normal; font-size: inherit; }
.ai-test-history-sort select { min-width: 180px; padding: 9px 34px 9px 11px; border: 1px solid var(--color-border, #dce5df); border-radius: 9px; background: white; color: inherit; font: inherit; cursor: pointer; }
.ai-test-history-list { display: grid; border-top: 1px solid var(--color-border); }
/* Reserve the action column even when an unfinished test has no repeat button. */
.ai-test-history-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 148px; align-items: center; gap: 20px; padding: 18px 8px; border: 0; border-bottom: 1px solid var(--color-border); color: inherit; }
.ai-test-history-row:last-child { border-bottom: 0; }
.ai-test-history-row:hover { background: var(--color-primary-wash); }
.ai-test-history-link { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 128px; align-items: center; gap: 20px; color: inherit; text-decoration: none; }
.ai-test-history-link > span:first-child { min-width: 0; display: grid; gap: 6px; }
.ai-test-history-link .ai-test-topic-title { font-size: 14px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.ai-test-history-row small { color: var(--color-text-muted); font-size: 12px; line-height: 1.5; }
.ai-test-history-row > form { min-width: 0; margin: 0; }
.ai-test-history-score { justify-self: end; font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-primary); }
/* The result of a test, wherever it is shown: green above 90%, orange from 50%, red below (AiTestRatings). */
.rating-good { color: #17633d; }
.rating-average { color: #b45309; }
.rating-poor { color: #b42318; }
.ai-test-history-status { justify-self: end; text-align: right; font-size: 12px; line-height: 1.5; font-weight: 600; color: var(--color-text-muted); }
.ai-test-repeat-link { width: 100%; min-height: 44px; border: 0; border-left: 1px solid var(--color-border); padding: 8px 0 8px 16px; background: transparent; color: var(--color-primary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; }
.ai-test-repeat-link:hover { color: var(--color-primary-strong); text-decoration: underline; }
@media (min-width: 761px) and (max-width: 980px) {
  .ai-test-history-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ai-test-repeat-link { width: auto; border-left: 0; padding: 4px 0; }
}
.ai-test-state { max-width: 760px; margin: 70px auto; padding: 52px; text-align: center; }
.ai-test-state h1 { margin: 8px 0 12px; }
.ai-test-state p { color: var(--color-text-muted); }
.ai-test-eyebrow { color: var(--color-primary) !important; text-transform: uppercase; letter-spacing: .1em; font-weight: 850; font-size: .78rem; }
.ai-test-player { overflow: hidden; }
.ai-test-player-header { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--color-border, #dce5df); }
.ai-test-player-header > div:first-child { display: grid; }
.ai-test-topic-title { color: var(--color-text, #18251f); text-transform: none; letter-spacing: normal; font-weight: 800; }
.ai-test-player-header .ai-test-topic-title { font-size: .95rem; }
.ai-test-player-header a { color: var(--color-text-muted); }
.ai-test-progress { height: 7px; background: var(--color-primary-soft); border-radius: 20px; overflow: hidden; }
.ai-test-progress span { display: block; height: 100%; background: var(--color-primary); transition: width .2s ease; }
.ai-test-question-stage { min-height: 500px; padding: 48px clamp(24px, 8vw, 100px); }
.ai-test-question h1 { max-width: 900px; margin: 0 0 10px; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.32; }
.ai-test-instruction { color: var(--color-text-muted); }
.ai-test-options { display: grid; gap: 11px; margin-top: 28px; }
.ai-test-options label { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--color-border, #dce5df); border-radius: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.ai-test-options label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-wash); box-shadow: inset 0 0 0 1px var(--color-primary); }
.ai-test-options input { position: static; opacity: 1; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
/* The verdict on the options once a question is answered: the right ones green, a wrong pick red. */
.ai-test-options label.is-right, .ai-test-options label.is-right:has(input:checked) { border-color: #208a57; background: #e4f5ea; box-shadow: inset 0 0 0 1px #208a57; }
.ai-test-options label.is-missed, .ai-test-options label.is-missed:has(input:checked) { border-color: #208a57; border-style: dashed; background: #f4fbf7; box-shadow: none; }
.ai-test-options label.is-wrong, .ai-test-options label.is-wrong:has(input:checked) { border-color: #b42318; background: #fdeeed; box-shadow: inset 0 0 0 1px #b42318; }
.ai-test-options input:disabled, .ai-test-options input:disabled ~ * { cursor: default; }
.ai-test-question[data-locked] .ai-test-options label { cursor: default; }
.ai-test-option-note { margin-left: auto; padding-left: 12px; font-size: .8rem; font-weight: 750; white-space: nowrap; }
.ai-test-options label.is-right .ai-test-option-note, .ai-test-options label.is-missed .ai-test-option-note { color: #17633d; }
.ai-test-options label.is-wrong .ai-test-option-note { color: #b42318; }
.ai-test-feedback { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--color-border, #dce5df); border-radius: 13px; background: var(--color-primary-wash); }
.ai-test-feedback p { margin: 6px 0 0; color: var(--color-text-muted); }
.ai-test-verdict { font-size: 1.1rem; }
.ai-test-verdict.is-correct { color: #17633d; }
.ai-test-verdict.is-incorrect { color: #b42318; }
.ai-test-retry { margin-top: 10px; padding: 8px 14px; border: 1px solid var(--color-border, #dce5df); border-radius: 9px; background: white; font: inherit; font-weight: 700; cursor: pointer; }
.ai-test-option-letter { display: block; flex: 0 0 20px; color: var(--color-text-muted); font-weight: 850; text-align: center; }
.ai-test-options label:has(input:checked) .ai-test-option-letter { color: var(--color-primary); }
.ai-test-player-footer { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 15px 20px; border-top: 1px solid var(--color-border, #dce5df); }
.ai-test-player-footer > button, .ai-test-player-footer > a { border: 1px solid var(--color-border, #dce5df); border-radius: 10px; background: white; padding: 10px 14px; font: inherit; font-weight: 750; cursor: pointer; color: inherit; text-decoration: none; text-align: center; }
.ai-test-player-footer > button:disabled { opacity: .45; cursor: default; }
.ai-test-player-footer .ai-test-finish { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.ai-test-result-summary { margin-bottom: 28px; padding: 34px; text-align: center; }
.ai-test-result-number { display: flex; justify-content: center; align-items: baseline; gap: 18px; margin: 10px 0; }
.ai-test-result-number strong { font-size: 3rem; color: inherit; }
.ai-test-result-number span { font-size: 1.35rem; color: inherit; }
.ai-test-review-filter { margin: 0 0 14px; }
.ai-test-review-filter label { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid var(--color-border, #dce5df); border-radius: 10px; background: #fff; font-weight: 700; cursor: pointer; }
.ai-test-review-filter input { width: 17px; height: 17px; accent-color: #b42318; }
/* "Show only wrong answers": the correct ones are hidden while the box is ticked. */
main:has([data-only-wrong]:checked) .ai-test-review.is-correct { display: none; }
.ai-test-result-summary > p:not(.ai-test-eyebrow) { max-width: 650px; margin: 0 auto 22px; color: var(--color-text-muted); }
/* After the rule above, which would otherwise paint the rating grey. */
.ai-test-result-summary > p.ai-test-rating { margin: 0 auto 12px; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.ai-test-result-summary > p.rating-good { color: #17633d; }
.ai-test-result-summary > p.rating-average { color: #b45309; }
.ai-test-result-summary > p.rating-poor { color: #b42318; }
.ai-test-result-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ai-test-secondary { display: inline-flex; padding: 12px 18px; color: var(--color-primary); font-weight: 800; text-decoration: none; }
.ai-test-secondary:hover { text-decoration: underline; }
.ai-test-review-list { display: grid; gap: 18px; }
.ai-test-review { overflow: hidden; }
.ai-test-review > header { display: flex; gap: 12px; align-items: center; padding: 13px 20px; background: var(--color-primary-wash); }
.ai-test-review > header span { color: var(--color-text-muted); }
.ai-test-review > header strong { margin-left: auto; }
.ai-test-review.is-correct > header strong { color: #197247; }
.ai-test-review.is-wrong > header strong { color: #ad312b; }
.ai-test-review > h2 { padding: 5px 22px; margin: 20px 0 12px; font-size: 1.15rem; }
.ai-test-review-options { display: grid; gap: 8px; padding: 0 22px 20px; }
.ai-test-review-option { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #dce5df; border-radius: 10px; }
.ai-test-review-option.is-true-false { grid-template-columns: 1fr auto; }
.ai-test-review-option > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-soft); font-weight: 800; }
.ai-test-review-option p { margin: 0; }
.ai-test-review-option small { color: var(--color-text-muted); }
.ai-test-review-option.is-answer { border-color: #55a879; background: #edf9f1; }
.ai-test-review-option.is-answer > span { background: #238854; color: white; }
.ai-test-review-option.is-selected:not(.is-answer) { border-color: #df776f; background: #fff0ef; }
.ai-test-explanation { border-top: 1px solid var(--color-border); padding: 17px 22px; background: var(--color-surface-soft); }
.ai-test-explanation p { margin: 5px 0 0; }