/* ===== Novi Život Fitness — design tokens ===== */
/* Pismo stiže s ovog poslužitelja, ne s Googleovog (GH #327). Cijelo
   obrazloženje -- mjerenje, privola i zašto su rezovi razdvojeni -- stoji uz
   isti blok u v5-base.css i ne ponavlja se ovdje. Ovdje su dvije obitelji jer
   ih ova stranična obitelj i koristi: Manrope za tekst (--font-body), Syne za
   naslove (--font-heading). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/syne-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/syne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Letterbox ispod ugradjenog playera. Crno je crno u obje teme -- ono nije
     ploha stranice nego rub slike, i tema ga ne dira. Do #211 je tu stajao
     --ink, koji je tinta i okrece se. */
  --video-bg: #000;
  --video-fg: #f8f8f8;

  /* Izvorne kontrole (polja, padajuci izbornici, kliznik) i traka za pomicanje
     prate ovo, ne nase tokene. Bez izricitog svijetlog bi clan koji je izabrao
     svijetlu temu na tamnom uredaju dobio tamna polja na svijetloj stranici. */
  color-scheme: light;

  --ink: #1e1e1e;
  --ink-2: #15191d;
  --sand: #f8f8f8;
  --sand-hi: #ffffff;
  --coral: #579cd9;
  --coral-700: #256294;
  --on-accent: #1e1e1e;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --text: #1e1e1e;
  --text-muted: #565f68;
  --text-faint: #626c75;
  --text-inverse: #fdfdfd;
  --border: rgba(30, 30, 30, .12);
  --border-strong: rgba(30, 30, 30, .28);
  --border-dark: rgba(30, 30, 30, .12);

  --r-card: 22px;
  --r-btn: 12px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --fs-display: clamp(2.25rem, 1.2rem + 4.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --font-body: "Manrope", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Syne", "Manrope", system-ui, -apple-system, sans-serif;

  --container: 1200px;
  --shadow-card: 0 12px 36px -22px rgba(30, 30, 30, .22);
  --shadow-accent: 0 12px 28px -16px rgba(87, 156, 217, .45);

  /* --- boje koje su prije bile upisane u pravila (GH #211, korak 1) ---------
     Nijedna vrijednost nije promijenjena. Imena su namjerno mehanicka
     (baza + prozirnost, odnosno baza + svjetlina), a ne po ulozi: ovaj korak
     samo seli boju iz pravila u jedan blok, a koja je uloga cega odlucuje
     korak 2 kad bira tamnu paletu. Mehanicko ime ne moze biti pogresno.

     Dvije stvari se tek sad vide, i obje su za korak 2, ne za ovaj:
     -- ljestvica sivih ima cetiri stupnja umjesto dva. Uz --text-muted (0.46)
        i --text-faint (0.56) tu su i 0.42 (.lead), 0.48 (.admin-note) i
        0.58 (.footer-legal), sve na istoj nijansi i kromi;
     -- --text-a05 nosi i .ghost-word i .form-success. Danas su to doista
        iste boje, pa se tako i zovu; ako uspjeh treba zelenu podlogu, to je
        odluka o izgledu i spada u korak 2.

     Prozirne inacice bi se dale izvesti iz baze relativnom sintaksom
     (`oklch(from var(--text) l c h / 0.05)`), sto bi znacilo da korak 2
     mijenja samo --text. Namjerno nije napravljeno ovdje: to je promjena
     mehanizma, a korak 1 se obvezao da ne mijenja nista osim mjesta. */

  /* --text razrijeden */
  --text-a04: rgba(30, 30, 30, .04);
  --text-a05: rgba(30, 30, 30, .05);
  --text-a06: rgba(30, 30, 30, .06);
  --text-a08: rgba(30, 30, 30, .08);
  --text-a45: rgba(30, 30, 30, .45);
  --text-a60: rgba(30, 30, 30, .60);

  /* --sand razrijeden -- zaglavlja i sticky trake koje propustaju sadrzaj */
  --sand-a75: rgba(253, 253, 253, .75);
  --sand-a82: rgba(253, 253, 253, .82);
  --sand-a92: rgba(253, 253, 253, .92);

  /* --coral razrijeden */
  --coral-a10: rgba(87, 156, 217, .10);
  --coral-a16: rgba(87, 156, 217, .16);
  --coral-a45: rgba(87, 156, 217, .45);
  --coral-a50: rgba(87, 156, 217, .50);

  /* --ink-2 razrijeden. Ista vrijednost nosi i --on-accent, pa se iz same
     boje ne vidi koja je od te dvije uloge -- otud neutralno ime. */
  --ink2-a60: rgba(30, 30, 30, .76);
  --ink2-a65: rgba(30, 30, 30, .80);
  --ink2-a70: rgba(30, 30, 30, .84);

  /* --ink razrijeden -- zastor ispod otvorenog sidebara */
  --ink-a40: rgba(30, 30, 30, .4);

  /* Stupnjevi svjetline koji nisu u ljestvici gore. */
  --text-42: #47525d;
  --text-42-a40: rgba(71, 82, 93, .4);
  --text-48: #565f68;
  --text-58: #626c75;
  --sand-89: #e8edf1;
  --coral-50: #a63232;
}

/* ===== Reset ===== */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--sand);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 76px; /* room for sticky mobile CTA */
  overflow-x: hidden;
}
img,
svg {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
}
h1,
h2 {
  font-family: var(--font-heading);
  font-weight: 700;
}
h3 {
  font-family: var(--font-body);
  font-weight: 700;
}
h1 {
  font-size: var(--fs-display);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
p {
  margin: 0 0 var(--sp-4);
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}

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

/* ===== Accessibility helpers ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  background: var(--coral);
  color: var(--on-accent);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-btn);
  font-weight: 700;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--sp-4);
}
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

/* ===== Page-load intro panel ===== */
@keyframes introWordUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.intro-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  transform: translateY(0%);
  transition: transform 0.95s cubic-bezier(0.83, 0, 0.17, 1);
  pointer-events: none;
}
.intro-panel__dot {
  width: 12px;
  height: 12px;
  background: var(--on-accent);
  display: inline-block;
  animation: introWordUp 0.6s var(--ease-smooth) 0.15s both;
}
.intro-panel__word {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-accent);
  animation: introWordUp 0.6s var(--ease-smooth) 0.2s both;
}
.intro-panel--hidden {
  transform: translateY(-100%) scale(1.04);
}
.intro-panel--gone {
  display: none;
}

/* Giant faint background word — hero + final CTA */
.ghost-word {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--text-a05);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  line-height: 1;
}
.hero .ghost-word {
  top: 8%;
  font-size: clamp(7rem, 20vw, 20rem);
}

@media (prefers-reduced-motion: reduce) {
  .intro-panel {
    display: none;
  }
}

/* ===== Layout ===== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
section {
  padding-block: var(--sp-8);
}
.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-7);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-700);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--coral);
  display: inline-block;
}
.lead {
  font-size: var(--fs-lead);
  color: var(--text-42);
}
/* Parnjak pravila .v5 .muted u v5-base.css; razlog je tamo (GH #735).
   Ovdje nije .admin-note jer klasu nose i clanske stranice, a ni
   .member-card__muted, koji cita --member-muted deklariran na .member-app. */
.muted {
  color: var(--text-muted);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), background 0.25s ease, border-color 0.25s ease;
}
/* GH #674: hidden mora skrivati i gumb. Pravilo [hidden] { display: none }
   stoji u pregledniku, a autorski display iz .btn iznad ga nadjacava bez
   obzira na specificnost -- gumb koji skripta sakrije ostaje vidljiv svugdje
   osim na naslovnici, gdje .modern-landing [hidden] to vec pokriva. Ovo je
   povratak na ono sto hidden u HTML-u znaci, ne novi nacin skrivanja. */
.btn[hidden] {
  display: none;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}
.btn--primary {
  background: var(--coral);
  border-color: var(--coral-700);
  color: var(--on-accent);
}
.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sand);
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.btn--on-dark {
  background: var(--coral);
  color: var(--on-accent);
}
.btn--on-dark:hover {
  background: var(--ink-2);
}
.btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--ink);
  background: transparent;
}
.btn--outline-light {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--outline-light:hover {
  border-color: var(--ink);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.75rem;
  min-height: 36px;
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: var(--visina-trake-predstavljanja, 0px); /* GH #646 */
  z-index: 40;
  background: var(--sand-a82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom: 1px solid var(--border-dark);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-4);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.logo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.lang-switch {
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--text-42-a40);
}
.logo__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  display: inline-block;
}

/* ===== Sticky mobile CTA ===== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--sand-a92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-dark);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.sticky-cta__price {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.sticky-cta__price strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}
@media (min-width: 900px) {
  .sticky-cta {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* ===== Hero ===== */
.hero {
  padding-block: var(--sp-8) var(--sp-7);
  position: relative;
}
.hero .container {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.hero__meta span {
  border-left: 1px solid var(--border-strong);
  padding-left: var(--sp-3);
}
.hero__meta strong {
  color: var(--ink);
  display: block;
  font-size: 0.9375rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-5);
}
.hero__secure-note {
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.hero__visual {
  position: relative;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--coral-a50);
  z-index: 0;
}
.media-placeholder {
  border-radius: var(--r-card);
  background: var(--sand-hi);
  color: var(--ink);
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-5);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero__visual .media-placeholder {
  border: 1px solid var(--border);
}
.media-placeholder__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__visual .media-placeholder__art {
  filter: grayscale(1) contrast(1.05) brightness(1.05);
  transform: scale(1.12);
  transition: transform 0.2s linear;
}
.hero__visual .media-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--sand-a75) 100%);
}
.media-placeholder__label {
  position: relative;
  z-index: 2;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
}
@media (min-width: 900px) {
  .hero .container {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* ===== Rezultati — before/after slider ===== */
.results-slider {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  margin: 0 calc(-1 * var(--sp-5));
  padding: 0 var(--sp-5) var(--sp-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.results-slider::-webkit-scrollbar {
  display: none;
}
.result-card {
  flex: 0 0 auto;
  width: 210px;
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.result-card--featured {
  width: 288px;
  border-color: var(--coral-a50);
}
.result-card__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.result-photo {
  aspect-ratio: 3 / 4;
  background: var(--sand-89);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--sp-2);
}
.result-photo__badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-a60);
}
.result-photo__badge--after {
  color: var(--coral-700);
}
.result-photo__icon {
  font-size: 9px;
  color: var(--text-faint);
  text-align: center;
  padding: 0 var(--sp-2);
}
.result-card__body {
  padding: var(--sp-4);
}
.result-card__name {
  font-weight: 700;
  font-size: var(--fs-small);
  margin: 0;
  color: var(--ink);
}
.result-card__meta {
  font-size: 11px;
  color: var(--text-faint);
  margin: 2px 0 var(--sp-2);
}
.result-card__quote {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  font-style: italic;
}
.results-pause {
  margin-top: var(--sp-2);
}
.results-note {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-top: var(--sp-4);
}

/* ===== Pillar cards — clean grid variant ===== */
.pillar-cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
.pillar-card {
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s ease;
}
.pillar-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card);
}
.pillar-card__media {
  aspect-ratio: 4 / 3;
  position: relative;
  margin: var(--sp-3) var(--sp-3) 0;
  border-radius: 0;
  overflow: hidden;
}
.pillar-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pillar-card__lead {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin: var(--sp-1) 0 0;
}
.pillar-card__checklist {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  flex: 1;
}
.pillar-card__checklist li {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--text);
}
.pillar-card__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--coral);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}
.pillar-card__closer {
  font-size: var(--fs-small);
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--sp-3);
  margin: 0;
}
.pillar-card__closer strong {
  color: var(--ink);
}
@media (min-width: 760px) {
  .pillar-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Trust bar ===== */
.trust-bar {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust-bar .container {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
.trust-fact {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.trust-fact__mark {
  color: var(--coral-700);
  font-weight: 800;
}
@media (min-width: 700px) {
  .trust-bar .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .trust-bar .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== Situation list ("Je li ovo za vas?") ===== */
.situations {
  display: grid;
  gap: var(--sp-4);
}
.situation {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
}
.situation__mark {
  color: var(--coral-700);
  font-weight: 800;
  flex-shrink: 0;
}
.not-for {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--border-strong);
  background: var(--text-a04);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
@media (min-width: 800px) {
  .situations {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Timeline ===== */
.timeline {
  display: grid;
  gap: 0;
  counter-reset: step;
}
.timeline__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: var(--sp-6);
  row-gap: var(--sp-1);
  align-items: start;
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--border);
}
.timeline__step:last-child {
  border-bottom: 1px solid var(--border);
}
.timeline__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / 3;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  line-height: 1;
  color: var(--coral-700);
}
.timeline__step h3 {
  grid-column: 2;
  margin: 0;
}
.timeline__step p {
  grid-column: 2;
  margin: 0;
  color: var(--text-muted);
  max-width: 480px;
}
@media (min-width: 700px) {
  .timeline__step {
    grid-template-columns: 100px 1fr;
    padding: var(--sp-7) 0;
  }
}

/* ===== Product preview grid ===== */
.preview-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
.preview-card {
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
}
.preview-card .media-placeholder {
  min-height: 140px;
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
}
.preview-card .media-placeholder__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-a45);
}
.preview-card p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: 0;
}
@media (min-width: 700px) {
  .preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .preview-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Cards (generic) ===== */
.card {
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
}

/* ===== Pricing ===== */
.pricing-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
.pricing-card {
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s ease;
}
.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-card);
}
.pricing-card--featured {
  background: var(--coral);
  color: var(--on-accent);
  border-color: var(--coral-700);
}
.pricing-card--featured:hover {
  box-shadow: 0 24px 48px -20px var(--coral-a45);
}
.pricing-card--featured .pricing-card__price,
.pricing-card--featured h3 {
  color: var(--on-accent);
}
.pricing-card--featured .pricing-card__includes li {
  color: var(--on-accent);
}
.pricing-card--featured .pricing-card__includes li::before {
  color: var(--on-accent);
  font-weight: 700;
}
.pricing-card--featured .pricing-card__excludes {
  color: var(--ink2-a60);
}
.pricing-card__badge {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--ink-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.pricing-card--featured .pricing-card__badge {
  color: var(--coral-700);
  background: var(--ink-2);
}
.pricing-card__price {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
/* EUR protuvrijednost ide u vlastiti redak ispod cijene u KM, namjerno a ne
   kao posljedica prelamanja: cijena je 2.75rem, pa zbroj s protuvrijednoscu
   premasuje sirinu kartice za svega nekoliko piksela. Inline bi zato stao u
   sirim karticama a prelamao se u uzima, tj. izgled bi ovisio o sirini ekrana.
   Boju namjerno ne postavlja -- nasljeduje ju od .pricing-card__price, koji na
   istaknutoj kartici prelazi na --on-accent. */
.pricing-card__price-peg {
  display: block;
  margin-top: var(--sp-1);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.pricing-card__period {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-bottom: var(--sp-6);
}
.pricing-card--featured .pricing-card__period {
  color: var(--ink2-a65);
}
.pricing-card__includes {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-small);
}
.pricing-card__includes li {
  padding-left: var(--sp-5);
  position: relative;
  color: var(--text);
}
.pricing-card__includes li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--coral-700);
  font-weight: 700;
}
.pricing-card__excludes {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-bottom: var(--sp-6);
}
.pricing-card .btn {
  margin-top: auto;
}
.pricing-note {
  font-size: var(--fs-small);
  color: var(--text-faint);
  margin-top: var(--sp-5);
}
@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

/* ===== Guarantee ===== */
.guarantee-list {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.guarantee-list > div {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-top: 1px solid var(--border);
}
.guarantee-list dt {
  font-weight: 700;
  margin-bottom: var(--sp-1);
  color: var(--ink);
}
.guarantee-list dd {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
@media (min-width: 800px) {
  .guarantee-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== FAQ panel (whole list collapses behind the heading) ===== */
.faq-panel {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.faq-panel__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
}
.faq-panel__summary h2 {
  margin: 0;
}
.faq-panel__summary::-webkit-details-marker {
  display: none;
}
.faq-panel__summary::after {
  content: "+";
  font-size: 2rem;
  font-weight: 300;
  color: var(--coral-700);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.faq-panel[open] > .faq-panel__summary::after {
  transform: rotate(45deg);
}
.faq-panel .faq {
  padding-bottom: var(--sp-6);
}

/* ===== FAQ (native details/summary) ===== */
.faq {
  display: grid;
  gap: 0;
}
.faq details {
  border-top: 1px solid var(--border);
  padding: var(--sp-5) 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--coral-700);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq__answer {
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 640px;
}

/* ===== Final CTA ===== */
.final-cta {
  position: relative;
  padding: clamp(24px, 4vw, 40px) var(--sp-6);
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
  overflow: visible;
}
.final-cta h2 {
  color: var(--ink);
  font-size: clamp(2.5rem, 1.8rem + 4vw, 4.5rem);
  position: relative;
  z-index: 1;
}
.final-cta .lead {
  max-width: 520px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.final-cta__price {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--coral-700);
  margin-block: var(--sp-5);
  position: relative;
  z-index: 1;
}
.final-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}
.final-cta__terms {
  font-size: var(--fs-small);
  color: var(--text-faint);
  text-decoration: underline;
}
.final-cta .ghost-word {
  bottom: -10%;
  top: auto;
  font-size: clamp(6rem, 16vw, 16rem);
}

/* ===== Footer =====
   Podnožje je od GH #458 jedan fragment za sve tri javne stranice i jedna
   datoteka, podnozje.css; ovdje je ostala samo ova bilješka, jer je /vise-
   informacija jedina stranica s main.css koja podnožje uopće ima. */

/* ===== Section rhythm ===== */
.section-tint {
  background: var(--sand-hi);
  position: relative;
}

.accent-mark {
  position: relative;
  white-space: nowrap;
}
.accent-mark::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.06em;
  height: 0.3em;
  background: var(--coral);
  border-radius: 0.2em;
  transform: rotate(-1.5deg);
  z-index: -1;
}

.hero__badge-chip {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  background: var(--coral);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
}

/* ===== Scroll reveal: no-JS/no-motion users see content immediately (progressive enhancement) ===== */
.reveal-init {
  opacity: 0;
  transform: translateY(52px) scale(0.96);
}
.reveal-init.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.9s var(--ease-smooth), transform 1.05s var(--ease-smooth);
}
.reveal-init:nth-child(2) {
  transition-delay: 0.08s;
}
.reveal-init:nth-child(3) {
  transition-delay: 0.16s;
}
.reveal-init:nth-child(4) {
  transition-delay: 0.24s;
}
.reveal-init:nth-child(5) {
  transition-delay: 0.32s;
}
.reveal-init:nth-child(6) {
  transition-delay: 0.4s;
}
.reveal-init:nth-child(7) {
  transition-delay: 0.48s;
}

/* Numbered/step elements get a bouncier pop instead of the plain fade-up */
.timeline.reveal-init .timeline__step::before,
.pricing-grid.reveal-init .pricing-card__price {
  opacity: 0;
  transform: translateY(34px) scale(0.7) rotate(-8deg);
  transition: opacity 0.8s var(--ease-smooth), transform 0.95s var(--ease-bounce);
}
.timeline.is-visible .timeline__step::before,
.pricing-grid.is-visible .pricing-card__price {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

/* Hover energy on interactive cards */
.card,
.preview-card {
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s ease;
}
.card:hover,
.preview-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}
.trust-fact {
  transition: transform 0.2s ease;
}
.trust-fact:hover {
  transform: translateX(4px);
}

/* ===== Splash / coming-soon page ===== */
.splash {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6);
  background: var(--sand);
  color: var(--ink);
}
.splash__logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.splash__art {
  width: 220px;
  height: auto;
  margin-bottom: var(--sp-6);
}
.splash h1 {
  color: var(--ink);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  max-width: 560px;
}
.splash p {
  color: var(--text-muted);
  max-width: 460px;
}
/* GH #225. Jedan broj, jedna oznaka ispod njega. tabular-nums da prijelaz
   s 10 na 9 ne pomakne sredinu, sto se kod proporcionalnog pisma vidi. */
.odbrojavanje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-7);
}
.odbrojavanje__broj {
  font-family: var(--font-heading);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 2.2rem + 5vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.odbrojavanje__oznaka {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Scoped pod .splash iz istog razloga kao .error-page__status nize: ovo je <p>
   unutar .splash, pa bi goli .splash__otvaramo izgubio na specificnosti od
   `.splash p` i naslijedio njegovu prigusenu boju. */
.splash .splash__otvaramo {
  margin-top: var(--sp-5);
  color: var(--ink);
  font-weight: 600;
}
.splash__login-link {
  margin-top: var(--sp-8);
  font-size: var(--fs-small);
  color: var(--text-faint);
  text-decoration: underline;
}

/* ===== Error pages (reuse the splash shell, both are single centred columns) =====
   Scoped under .error-page rather than styled bare: these are <p> elements
   inside .splash, so a lone .error-page__x would lose to .splash p on
   specificity and inherit its muted colour and 460px max-width. */
.error-page .error-page__status {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(4.5rem, 2rem + 14vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
  opacity: 0.13;
  margin-bottom: var(--sp-5);
  max-width: none;
}
.error-page .error-page__ref {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--text-faint);
}
.error-page .error-page__ref code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", "Menlo", monospace;
  background: var(--sand-hi);
  border: 1px solid var(--border);
  padding: 2px var(--sp-2);
  word-break: break-all;
}

/* ===== Auth pages ===== */
.auth-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7) var(--sp-5);
}
.auth-card {
  width: 100%;
  max-width: 420px;
}
.auth-card h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
.field {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.field label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.field input {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-family: inherit;
  background: var(--sand-hi);
  color: var(--text);
  min-height: 44px;
}
.field input:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 1px;
}
.field textarea,
.field select {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  font-size: var(--fs-body);
  font-family: inherit;
  background: var(--sand-hi);
  color: var(--text);
}
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 1px;
}
.field textarea {
  min-height: 160px;
  resize: vertical;
}
.form-error {
  background: var(--coral-a10);
  border: 1px solid var(--coral);
  color: var(--coral-700);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-4);
}
.form-success {
  background: var(--text-a05);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-4);
}
.auth-switch {
  margin-top: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--text-muted);
  text-align: center;
}
/* Prazan slot ne smije zauzeti prostor: na /placanje/uspjeh ostaje prazan kad
   sesije nema, a razmak bi tada izgledao kao da nesto nedostaje (GH #83). */
.placanje-stanje:not(:empty) {
  margin-top: var(--sp-5);
}

/* ===== Progress page ===== */
.progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  flex-wrap: wrap;
}
.progress-list {
  display: grid;
  gap: var(--sp-3);
}
.progress-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
}
.progress-item__status {
  flex-shrink: 0;
  font-size: var(--fs-small);
  font-weight: 800;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.progress-item__status--done {
  background: var(--text-a08);
  color: var(--ink);
}
.progress-item__status--wip {
  background: var(--coral-a16);
  color: var(--coral-50);
}
.progress-item__status--next {
  background: var(--text-a06);
  color: var(--text-faint);
}

/* ===== Cookie consent banner ===== */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: var(--sand-hi);
  border-top: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
}
.cookie-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cookie-banner__text {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.cookie-banner__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
@media (min-width: 700px) {
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cookie-banner__text {
    max-width: 640px;
  }
  .cookie-banner__actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}

/* ===== Impersonation banner ===== */
.impersonation-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 310;
  background: var(--coral);
  color: var(--on-accent);
  box-shadow: var(--shadow-card);
}
/* GH #644. Redak, ne stupac, i na mobitelu. Traka je bila mobile-first stupac
   koji na 700px prelazi u redak, pa je na telefonu uzimala preko 110px -- dva
   reda teksta, razmak, pa gumb u svom redu -- a jer je `position: fixed`, toliko
   je i prekrivala stranicu ispod sebe. Gumb zadrzava svojih 36px (`.btn--sm`);
   usteda dolazi iz jednog retka i uzeg odmaka, ne iz manje mete za prst.
   `min-width: 0` je nuzan da se tekst smije stisnuti ispod svoje najduze rijeci,
   inace bi gumb opet izgurao u novi redak. */
.impersonation-banner__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.impersonation-banner__text {
  margin: 0;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--on-accent);
}
.impersonation-banner form {
  flex: 0 0 auto;
}
@media (min-width: 700px) {
  .impersonation-banner__inner {
    padding: var(--sp-3) var(--sp-5);
  }
}

/* GH #646. Traka je `position: fixed`, pa ne zauzima mjesto u tijeku dokumenta
   i lezi preko vrha stranice. To nije bila kozmetika: `.admin-topbar` i
   `.site-header` su `sticky; top: 0` s nizim z-indexom, pa je traka pokrivala
   admin topbar -- a na mobitelu je u njemu hamburger izbornik, zbog cega se s
   telefona nije moglo doci do izbornika uopce.

   Visinu nije moguce zapisati kao konstantu, jer se tekst prelama ovisno o
   sirini ekrana i duljini korisnickog imena. Mjeri je `traka-predstavljanja.js`
   i upisuje u ovu varijablu na `:root`. Dok predstavljanja nema, varijable
   nema, pa svako `var(..., 0px)` ispod pada na nulu i sve ostale stranice
   ostaju nepromijenjene -- zato je rezervna vrijednost posvuda napisana kao
   `0px`, a ne izostavljena. */
body {
  padding-top: var(--visina-trake-predstavljanja, 0px);
}

/* ===== Admin table ===== */
.admin-page {
  padding-block: var(--sp-7);
  max-width: 900px;
}
.legal-page {
  padding-block: var(--sp-7);
  max-width: 720px;
}
.legal-page h2 {
  margin-top: var(--sp-6);
}
.admin-table-wrap {
  overflow-x: auto;
  margin-top: var(--sp-6);
}
/* GH #202: aktivni treneri jednog clana, svaki sa svojim gumbom za uklanjanje.
   Popis, a ne tablica: tri stupca za ime, datum i gumb bila bi tablica koju
   nitko ne cita po stupcima, a povijest ispod vec jest tablica i za nju su
   stupci ono sto se usporedjuje. */
.admin-coach-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.admin-coach-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.admin-coach-list form {
  margin: 0;
}
/* Secondary text inside an admin card -- a row's refund note, a caveat under a
   table. Same hue family as .lead, at body size rather than lead size. */
.admin-note {
  font-size: var(--fs-small);
  color: var(--text-48);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.admin-table td.admin-table__email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-table th {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.admin-role-form {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.admin-role-form select {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: var(--fs-small);
  background: var(--sand-hi);
}
/* Same inline-form shape as .admin-role-form above. Kept separate rather than
   sharing a class: the price field is a narrow fixed-width number sitting next
   to a unit label, which a role <select> is not. */
.admin-price-form {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.admin-price-form__input {
  width: 7ch;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: var(--fs-small);
  background: var(--sand-hi);
  text-align: right;
}
/* .admin-price-form je pisan za /admin/cijene: 7ch i desno poravnanje jesu
   cijena. /admin/prijenosi posudjuje isti raspored za naslov od 200 znakova i
   za polja vremena, gdje 7ch skriva 204 od 271 piksela, a desno poravnanje
   pokazuje kraj naslova umjesto pocetka. Modifikatori, a ne siri osnovni
   selektor: polje za cijenu mora ostati usko.
   Od GH #630 --datetime nosi dva tekstualna polja (datum i sat) umjesto
   nekadasnjeg <input type="datetime-local">; sirinu im daje atribut size,
   pa ovdje i dalje treba samo width: auto. */
.admin-price-form__input--text {
  width: 18ch;
  text-align: left;
}
.admin-price-form__input--datetime {
  width: auto;
  text-align: left;
}
.admin-price-form__unit {
  font-size: var(--fs-small);
  color: var(--text-muted);
}
/* Status filter above the payment ledger (#67). Plain links rather than a
   <select>, so each filter is a shareable address; wraps on narrow screens
   instead of scrolling with the table below it. */
.admin-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.admin-filter__link {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.admin-filter__link:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
/* Same treatment as the sidebar's active link -- a tinted background would be
   invisible here, since --sand-hi is exactly the card colour underneath it. */
.admin-filter__link--active,
.admin-filter__link--active:hover {
  border-color: var(--coral-700);
  background: var(--coral);
  color: var(--on-accent);
}

/* ===== Admin dashboard stat tiles ===== */
.stat-section {
  margin-top: var(--sp-8);
}
.stat-section h2 {
  font-size: var(--fs-h3);
}
.stat-section__meta {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin-top: var(--sp-1);
}
.stat-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-top: var(--sp-4);
}
.stat-tile {
  background: var(--sand-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.stat-tile__value {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.1;
}
.stat-tile__label {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin-top: var(--sp-1);
}
.stat-tile--alert {
  background: var(--coral);
  border-color: var(--coral-700);
  color: var(--on-accent);
}
.stat-tile--alert .stat-tile__label {
  color: var(--ink2-a70);
}
/* #142: the off-site line is prose rather than a tile, because two of its
   three states have no number to show -- "not set up" and "set up but nothing
   has arrived" are sentences, and a tile reading 0 would say neither. */
.stat-section__meta--alert {
  color: var(--coral-700);
  font-weight: 600;
}

/* ===== Admin sidebar (F6 #214) ===== */
.admin-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(100vh - var(--visina-trake-predstavljanja, 0px)); /* GH #646 */
}
.admin-content {
  flex: 1 1 auto;
  min-width: 0;
}
.admin-topbar {
  position: sticky;
  top: var(--visina-trake-predstavljanja, 0px); /* GH #646 */
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--sand-a92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-dark);
}
.admin-topbar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.admin-topbar__toggle svg {
  width: 20px;
  height: 20px;
}
.admin-sidebar__backdrop {
  display: none;
}
.admin-sidebar {
  position: fixed;
  inset: var(--visina-trake-predstavljanja, 0px) auto 0 0; /* GH #646 */
  z-index: 46;
  width: 280px;
  max-width: 84vw;
  display: flex;
  flex-direction: column;
  background: var(--sand-hi);
  border-right: 1px solid var(--border);
  padding: var(--sp-5);
  overflow-y: auto;
  transform: translateX(-100%);
}
.admin-sidebar.is-open {
  transform: translateX(0);
  box-shadow: var(--shadow-card);
}
/* GH #736. Animacija pripada gesti otvaranja i zatvaranja, a ne promjeni
   sirine prozora. Dok je transition stajao na baznom pravilu, suzavanje
   prozora preko granice od 900px pokretalo je klizanje koje nitko nije trazio:
   do tog je trenutka ladica bila sticky stupac s transform: none, pa bi 0,3s
   klizila s ekrana i usput pokrivala lijevih 280px donje trake. Na 375px ta
   traka ima cetiri jednaka stupca, pa joj je sredina druge stavke na oko
   140px -- ispod ladice prvu polovicu animacije.

   Klasu postavlja admin-nav.js pri ucitavanju. Bez JavaScripta se ladica ne
   moze ni otvoriti -- gumb je u predlosku hidden i otkriva ga tek ta skripta
   -- pa ondje nema sto animirati i transform se primijeni odmah. */
.admin-sidebar.is-animirana {
  transition: transform 0.3s var(--ease-smooth);
}
.admin-sidebar.is-open ~ .admin-sidebar__backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--ink-a40);
}
.admin-sidebar__brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.admin-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.admin-sidebar__close svg {
  width: 18px;
  height: 18px;
}
.admin-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex: 1 1 auto;
}
/* GH #233. Section heading inside the sidebar. Same treatment as the eyebrow it
   replaced, one step quieter -- it labels a group of links rather than the
   whole panel, and there are five of them. First-child rule so the topmost
   heading does not push the list away from the brand rule above it. */
.admin-sidebar__section {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-sidebar__section:first-child {
  margin-top: 0;
}
.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-btn);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.admin-sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.admin-sidebar__link:hover {
  background: var(--border-dark);
}
.admin-sidebar__link.is-active {
  background: var(--coral);
  color: var(--on-accent);
}
.admin-sidebar__link.is-active .admin-sidebar__icon {
  color: var(--on-accent);
}
.admin-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.admin-sidebar__logout {
  margin: 0;
}
/* GH #719. Sitni tisak na dnu ladice osoblja: uvjeti, privatnost i kolacici.
   Boja je --text-muted, isti token kojim admin-ui.css boji i same stavke
   izbornika, pa je redak tisi od njih samo velicinom, a ne drugom bojom.
   Mjereno u pregledniku na pokrenutoj aplikaciji: 6,50:1 u svijetloj
   (#565f68 na #ffffff) i 8,16:1 u tamnoj temi (#bdc5cd na #272b30) -- isto
   na /admin/nadzorna-ploca, /admin/moji-klijenti, na /placanje koje gleda
   osoblje i u ladici na 375px. Drugog tla nema: ladica je u obje teme
   --admin-surface, alias za --sand-hi, a i sedam clanskih predlozaka koji
   ovaj izbornik uzimaju prelaze na .admin-shell i main.css cim je gledatelj
   osoblje.
   Bez podcrtavanja u mirovanju i s podcrtavanjem na hover/fokus -- isto
   sto za ista tri imena radi .podnozje__popis a. */
.admin-sidebar__pravno {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.admin-sidebar__pravno a {
  display: block;
  padding: var(--sp-1) 0;
  text-decoration: none;
}
.admin-sidebar__pravno a:hover,
.admin-sidebar__pravno a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}
@media (min-width: 900px) {
  .admin-shell {
    flex-direction: row;
  }
  .admin-topbar {
    display: none;
  }
  .admin-sidebar {
    position: sticky;
    inset: auto;
    top: var(--visina-trake-predstavljanja, 0px); /* GH #646 */
    height: calc(100vh - var(--visina-trake-predstavljanja, 0px)); /* GH #646 */
    transform: none;
    transition: none;
    flex-shrink: 0;
  }
  /* Ponovljeno uz klasu: .admin-sidebar.is-animirana nadjacava .admin-sidebar
     iznad, pa bi se bez ovoga pri sirenju prozora ladica uvlacila klizanjem. */
  .admin-sidebar.is-animirana {
    transition: none;
  }
  .admin-sidebar__close {
    display: none;
  }
  .admin-sidebar.is-open ~ .admin-sidebar__backdrop {
    display: none;
  }
}

/* ===== Mobilni popravci (GH #154) =====

   Izmjereno na 375x812 i 320x568 s tri sjemenska racuna. Puni nalaz je
   docs/qa/mobilni-nalazi-2026-08-26.md. Cetiri stvari koje ovdje treba znati:

   1. body ima overflow-x: hidden (redak 65), pa se stranica NIKAD ne pomice
      bocno. Sadrzaj siri od zaslona zato nije neuredan nego odrezan i
      nedostupan. Jedini put do njega je vlastiti scroll-omotac, a taj vec
      postoji i zove se .admin-table-wrap. Ne dirati redak 65 -- ispravan je;
      ono sto je nedostajalo su omotaci, i dodani su u predloscima.

   2. Datoteka je mobile-first: bazna pravila su za telefon, a @media
      (min-width: ...) ih siri. Zato je popravak zaglavlja napisan kao bazno
      pravilo koje se na 700px vraca na staro, a ne kao max-width iznimka.

   3. Granica je 900px, ista koju vec koriste admin sidebar i donja traka
      clanske ljuske. Jedna granica za cijelu aplikaciju, ne dvije.

   4. Velicina fonta kontrola obrasca je 16px BEZ medijskog upita, namjerno:
      iOS Safari zumira stranicu na fokus svakog polja manjeg od 16px i vise
      se ne vraca, a 13.33px je zadano iz preglednika, sto nitko nije odabrao.
*/

/* Zaglavlje je sticky, pa svaki njegov piksel trajno oduzima zaslon. Na 375px
   logotip (183) + alati (88) + odjava (105) uz dva razmaka od 16 traze 408px
   na raspolozivih 327, pa je gumb padao u drugi red i zaglavlje je naraslo na
   125px -- 15% zaslona, uz donju traku ukupno 24%.

   flex-wrap: nowrap je ono sto to sprjecava; sam min-width: 0 nije dovoljan
   jer flex-wrap: wrap prelama PRIJE nego sto pocne stiskati. Logotip je
   jedini element koji smije izgubiti sirinu, pa nosi elipsu. */
.site-header .container {
  flex-wrap: nowrap;
  padding-block: var(--sp-3);
  gap: var(--sp-3);
}
.site-header .logo {
  min-width: 0;
}
.site-header .logo > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 700px) {
  .site-header .container {
    flex-wrap: wrap;
    padding-block: var(--sp-4);
    gap: var(--sp-4);
  }
}

/* Kontrole obrasca. .field input je vec bio ispravan (44px, 1rem), ali
   .field select i .field textarea nisu imali min-height, a niz obrazaca
   uopce ne koristi .field -- kontrole su goli <p><label><select> i nasljedjuju
   samo zadano iz preglednika: 13.33px i 19-21px visine.

   Checkbox, radio i range su namjerno izvan popisa: njima 44px visine ne
   znaci nista, a font-size ionako ne mijenja njihovu velicinu. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="file"],
input:not([type]),
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}
@media (max-width: 899.98px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  select {
    min-height: 44px;
  }
  textarea {
    min-height: 88px;
  }
  /* .btn--sm gazi min-height: 44px iz .btn na 36px. Na desktopu je to gusca
     traka radnji i u redu je; na telefonu je meta za prst. */
  .btn--sm {
    min-height: 44px;
  }
  /* Jedino pravilo u cijelom repozitoriju koje kontroli obrasca postavlja font
     ispod 16px, pa gazi bazno pravilo iznad specificnoscu klase. Jedanaest
     <select>-a za ulogu na /admin/korisnici; na desktopu 14px ostaje. */
  .admin-role-form select {
    font-size: 1rem;
  }
}

/* Druga polovica istog propusta: pravilo iznad je golim kontrolama dalo font i
   visinu, ali ne i SIRINU, pa su ostale na zadanom iz preglednika -- textarea
   na 20 znakova (183px) i input na 20 znakova (192-196px), u okviru od 327px.
   Devetnaest textarea polja u aplikaciji, samo jedno ima klasu; .field im daje
   punu sirinu rastezanjem, a sve ostalo je golo. Najgori je /admin/vjezbe s 36
   takvih kontrola i /admin/vjezbe/uvoz, gdje se u polje od 183px lijepi
   cetrdeset redaka odvojenih tabulatorom.

   :where() je ovdje bitan, a ne kozmetika: ima specificnost nula, pa svako
   pravilo s klasom i dalje pobjedjuje. Bez njega bi input[type="text"] (0,1,1)
   pregazio .admin-price-form__input (0,1,0) i polje za cijenu bi se rastegnulo
   preko cijele sirine. Pravilo dakle znaci "puna sirina osim ako je netko
   namjerno odredio drugu".

   Broj i datum su namjerno izvan popisa: 31px za "dana tjedno" (1-6) i 130px
   za datum tocno su onoliko koliko treba, a puna sirina bi ih ucinila gorima. */
:where(textarea,
       input[type="text"],
       input[type="email"],
       input[type="password"],
       input[type="search"],
       input[type="tel"],
       input[type="url"]) {
  width: 100%;
  max-width: 100%;
}

/* Jedini <pre> u aplikaciji je primjer formata na /admin/vjezbe/uvoz: 1205px
   sadrzaja u okviru od 262px, uz white-space: pre i overflow: visible. Uz
   body { overflow-x: hidden } to nije neuredno nego mrtvo -- 943px primjera
   koji definira format za lijepljenje nije se moglo dosegnuti nicim. */
pre {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* Ladica administracije: overflow-y: auto ju je cinio skrolabilnom u teoriji.
   U praksi se dodir lancano prenosio na stranicu iza nje, pa je 412px
   izbornika (7 stavki i gumb za odjavu) ostajalo nedostupno. Druga polovica
   popravka je zakljucavanje skrola tijela u admin-nav.js -- overscroll sam
   rjesava lanac, ali ne i to sto stranica ispod uopce ima kamo otici. */
.admin-sidebar {
  overscroll-behavior: contain;
}
/* Hamburger je bio 36x36, a X u ladici 32x32. Jedini su nacin da se izbornik
   otvori i zatvori prstom, pa oba idu na 44. */
.admin-topbar__toggle {
  width: 44px;
  height: 44px;
}
.admin-sidebar__close {
  width: 44px;
  height: 44px;
}

/* Trinaest tablica nije imalo nikakav omotac, pa ih uz body{overflow-x:hidden}
   nije bilo kako dohvatiti: /moj-racun je clanu na telefonu rezao Iznos, Status
   i Karticu -- na stranici novca -- a /mjere gumb "Obrisi", pa krivo upisana
   mjera nije bila popravljiva s telefona.

   .table-scroll je primitiv, a .admin-table-wrap je kartica koja ga sadrzi uz
   vlastiti razmak. Dva imena jer su dvije stvari: postojecih dvadeset mjesta su
   kartice, a ovih trinaest tablica stoji unutar tudje kartice i dodatni
   margin-top bi im pomaknuo raspored.

   overscroll-behavior-x sprjecava da povlacenje siroke tablice do ruba postane
   gesta "natrag" u pregledniku. */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.admin-table-wrap {
  overscroll-behavior-x: contain;
}

/* GH #681: omotac koji pomice mora biti i ishodiste za ono sto je u njemu
   apsolutno pozicionirano. .sr-only je position: absolute bez left i top
   (redak 226), pa mu je sadrzavajuci blok pocetni blok stranice, a ne ovaj
   omotac: skrivena oznaka se zato ovdje ne odsijeca nego ulazi u sirinu
   DOKUMENTA, i to na mjestu koje ima unutar siroke tablice.

   Izmjereno na 375px prije popravka: /admin/prijenosi scrollWidth 538 uz
   clientWidth 375 i tablicu od 964, /admin/cijene 465 uz tablicu od 529. Iz
   tih brojeva se vidi da tablica nije bjezala iz omotaca -- da jest, dokument
   bi bio sirok koliko i ona. Bjezala je jedna <label class="sr-only"> iz
   obrasca u celiji, koja je zavrsila na x=537 odnosno x=463. Uz
   position: relative oznaka ostaje u omotacu i oba dokumenta staju u zaslon.

   Ne medijski upit: propust ne ovisi o sirini zaslona nego o tome je li
   tablica sira od omotaca. */
.table-scroll,
.admin-table-wrap {
  position: relative;
}

/* --- pregled videa u videoteci (#169) --- */
/* Admin ljuska učitava main.css, a ne v5-base.css, pa .player odande ovdje ne
   postoji. Namjerno se ne uvozi ni ne kopira cijeli blok: ovdje treba manji
   okvir jer je ovo popis za provjeru, a ne gledanje — trener otvara ovu
   stranicu da vidi je li zalijepila pravi video, ne da odradi trening.

   Isti gumb klik-pa-učitaj kao na članskoj stranici i ista skripta: bez toga bi
   admin popis od šest redaka otvorio šest stranih okvira odjednom. */
.video-pregled {
  margin-top: var(--sp-3);
  max-width: 420px;
  aspect-ratio: 16 / 9;
  background: var(--video-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.video-pregled iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-pregled .player__okidac {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; height: 100%; border: 0; cursor: pointer;
  background: var(--video-bg); color: var(--video-fg);
  font: inherit; font-size: 14px;
}
.video-pregled .player__okidac::before {
  content: ''; width: 0; height: 0;
  border-left: 14px solid currentColor;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.video-pregled .player__okidac:hover,
.video-pregled .player__okidac:focus-visible { color: var(--coral-700); }

/* --- mreža snimki u videoteci (#668) --- */
/* Ista članska stranica, ali pod administratorskom ljuskom, koja učitava
   main.css umjesto v5-base.css — pa `.player` odande ovdje ne postoji i okidač
   bi ostao gol gumb usred kartice. Pravila su namjerno kratka i ista kao
   `.video-pregled` iznad: okvir, omjer i isti trokut. Bez `max-width`, jer
   ćeliju mreže omeđuje sama mreža. */
.snimke-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.snimke-mreza .player {
  margin-top: var(--sp-3);
  aspect-ratio: 16 / 9;
  background: var(--video-bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.snimke-mreza .player__frame { display: block; width: 100%; height: 100%; border: 0; }
.snimke-mreza .player__okidac {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; height: 100%; border: 0; cursor: pointer;
  background: var(--video-bg); color: var(--video-fg);
  font: inherit; font-size: 14px;
}
.snimke-mreza .player__okidac::before {
  content: ''; width: 0; height: 0;
  border-left: 14px solid currentColor;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.snimke-mreza .player__okidac:hover,
.snimke-mreza .player__okidac:focus-visible { color: var(--coral-700); }
.snimke-mreza .player__fallback { margin-top: var(--sp-3); font-size: 13.5px; }

/* Izbor teme na /moj-racun (GH #211). Prvi radio gumbi u aplikaciji, pa i
   prvo pravilo za njih. Ne koriste `.field`, koji bi ih preko `.field input`
   rastegnuo na 44px visine i punu sirinu s okvirom -- isti razlog zbog kojeg
   su radio i checkbox izuzeti iz pravila o velicini kontrola gore.

   Cilj dodira je cijela oznaka, ne sam gumb: gumb je oko 13px sirok i na
   mobitelu se ne pogada. Zato `<label>` nosi visinu i podlogu. */
.tema-izbor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border: 0;
  padding: 0;
  margin: 0;
}
.tema-izbor__naslov {
  padding: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.tema-izbor__stavka {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  background: var(--sand-hi);
  color: var(--text);
  font-size: var(--fs-small);
  cursor: pointer;
}
.tema-izbor__stavka:has(input:checked) {
  border-color: var(--coral-700);
  background: var(--coral-a10);
}
/* :has() je siroko podrzan, ali oznaka bez njega izgleda odabrano nikako --
   pa je vidljivi fokus na samom gumbu, koji radi svugdje. */
.tema-izbor__stavka:focus-within {
  outline: 3px solid var(--coral);
  outline-offset: 1px;
}
.tema-izbor__stavka input {
  accent-color: var(--coral-700);
  margin: 0;
}

/* ===========================================================================
   TAMNA PALETA (GH #211, korak 2)

   TRI STANJA, NE DVA. Svijetla paleta stoji na golom `:root`, pa vrijedi i
   kad clan nije izabrao nista i uredaj je svijetao. Tamnu nose dva bloka, i
   oba su potrebna:

     @media (prefers-color-scheme: dark) { :root:not([data-tema="svijetlo"]) }
       -- uredaj je taman, a clan nije izabrao svijetlo. Bez `:not(...)` bi
          izricit izbor svijetle teme izgubio od postavke uredaja.
     :root[data-tema="tamno"]
       -- clan je izabrao tamno, bez obzira na uredaj. Dolazi POSLIJE, pa kod
          jednake tezine pobjeduje izbor.

   Cetiri kombinacije se time razrjesavaju bez ijednog daljnjeg pravila:
   izabrano svijetlo pobjeduje tamni uredaj, izabrano tamno pobjeduje svijetli
   uredaj, a bez izbora vrijedi uredaj.

   `color-scheme` nije ukras: bez njega izvorne kontrole (polja, padajuci
   izbornici, kliznik) i traka za pomicanje ostaju svijetle na tamnoj stranici.

   ISTI POPIS JE UPISAN DVAPUT jer CSS nema nacina da jedan blok deklaracija
   veze uz medijski upit I uz atribut bez ponavljanja (nema build koraka koji
   bi to generirao). Da se dvije kopije ne raziđu, `TemaPaletaTest` trazi da
   budu znak po znak jednake, i da zajedno pokriju svaki token svijetle
   palete osim onih koji su izricito izuzeti.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svijetlo"]) {
    color-scheme: dark;

    /* Plohe. --sand je papir, --sand-hi ploha iznad njega; u tamnoj temi
       raste umjesto da pada, jer je iznad znaci blize svjetlu. --ink-2 je
       namjerno TAMNIJI od papira i u tamnoj temi: to je vrpca koja mora
       ostati vrpca, a ne se stopiti sa stranicom.

       --ink nije vrpca nego tinta -- od trideset citanja su dvadeset i osam
       `color:` -- pa prati papir i okrece se. Ostaje za nijansu jaci od
       --text, kao sto je 0.20 jace od 0.22 u svijetloj temi. Dva mjesta gdje
       je bio pozadina su letterbox ispod videa i sada citaju --video-bg. */
    --sand: #1e1e1e;
    --sand-hi: #272b30;
    --ink: #fdfdfd;
    --ink-2: #14171a;

    /* Akcent se diže, ne mijenja ton: na tamnoj podlozi ista svjetlina
       izgleda prigušeno. --on-accent ostaje taman jer plava ploha ostaje
       svijetla ploha i u tamnoj temi. */
    --coral: #579cd9;
    --coral-700: #9bc9ef;
    --on-accent: #1e1e1e;

    /* Tekst. --text-inverse je tekst na svijetloj stvari, pa se okrece
       zajedno s njom. */
    --text: #f8f8f8;
    --text-muted: #bdc5cd;
    --text-faint: #a6b0ba;
    --text-inverse: #1e1e1e;

    /* Rubovi su prozirni, pa se okrece baza: tamna crta na svijetlom papiru
       postaje svijetla crta na tamnom. Prozirnost malo raste jer svijetla
       crta na tamnome slabije cita. */
    --border: rgba(248, 248, 248, .16);
    --border-strong: rgba(248, 248, 248, .32);
    --border-dark: rgba(248, 248, 248, .16);

    /* Sjena na tamnoj podlozi mora biti dublja da se uopce vidi. */
    --shadow-card: 0 16px 40px -24px rgba(0, 0, 0, .55);
    --shadow-accent: 0 12px 28px -18px rgba(87, 156, 217, .32);

    /* --text razrijeden: baza se okrece sa --text. */
    --text-a04: rgba(248, 248, 248, .04);
    --text-a05: rgba(248, 248, 248, .05);
    --text-a06: rgba(248, 248, 248, .06);
    --text-a08: rgba(248, 248, 248, .08);
    --text-a45: rgba(248, 248, 248, .45);
    --text-a60: rgba(248, 248, 248, .60);

    /* --sand razrijeden: ljepljiva zaglavlja koja propustaju sadrzaj ispod
       sebe. Baza je papir, pa prati papir. */
    --sand-a75: rgba(30, 30, 30, .75);
    --sand-a82: rgba(30, 30, 30, .82);
    --sand-a92: rgba(30, 30, 30, .92);

    /* --coral razrijeden. Blage podloge trebaju vise prozirnosti da se na
       tamnome uopce vide. */
    --coral-a10: rgba(87, 156, 217, .10);
    --coral-a16: rgba(87, 156, 217, .16);
    --coral-a45: rgba(87, 156, 217, .45);
    --coral-a50: rgba(87, 156, 217, .50);

    /* --ink-2 razrijeden je tekst NA plavoj kartici, pa ostaje taman. */
    --ink2-a60: rgba(30, 30, 30, .76);
    --ink2-a65: rgba(30, 30, 30, .80);
    --ink2-a70: rgba(30, 30, 30, .84);

    /* Zastor ispod otvorenog sidebara -- taman u obje teme, dublji ovdje. */
    --ink-a40: rgba(14, 17, 20, .65);

    /* Stupnjevi svjetline izvan ljestvice. Poredak medu njima se cuva
       naopako: 0.42 je u svijetloj temi najtamniji od tri, pa je ovdje
       najsvjetliji. */
    --text-42: #c9d2db;
    --text-42-a40: rgba(201, 210, 219, .4);
    --text-48: #bdc5cd;
    --text-58: #a6b0ba;
    --sand-89: #343c44;
    --coral-50: #f6a1a1;
  }
}

:root[data-tema="tamno"] {
  color-scheme: dark;

  /* Plohe. --sand je papir, --sand-hi ploha iznad njega; u tamnoj temi
     raste umjesto da pada, jer je iznad znaci blize svjetlu. --ink-2 je
     namjerno TAMNIJI od papira i u tamnoj temi: to je vrpca koja mora
     ostati vrpca, a ne se stopiti sa stranicom.

     --ink nije vrpca nego tinta -- od trideset citanja su dvadeset i osam
     `color:` -- pa prati papir i okrece se. Ostaje za nijansu jaci od
     --text, kao sto je 0.20 jace od 0.22 u svijetloj temi. Dva mjesta gdje
     je bio pozadina su letterbox ispod videa i sada citaju --video-bg. */
  --sand: #1e1e1e;
  --sand-hi: #272b30;
  --ink: #fdfdfd;
  --ink-2: #14171a;

  /* Akcent se diže, ne mijenja ton: na tamnoj podlozi ista svjetlina
     izgleda prigušeno. --on-accent ostaje taman jer koralna ploha ostaje
     svijetla ploha i u tamnoj temi. */
  --coral: #579cd9;
  --coral-700: #9bc9ef;
  --on-accent: #1e1e1e;

  /* Tekst. --text-inverse je tekst na svijetloj stvari, pa se okrece
     zajedno s njom. */
  --text: #f8f8f8;
  --text-muted: #bdc5cd;
  --text-faint: #a6b0ba;
  --text-inverse: #1e1e1e;

  /* Rubovi su prozirni, pa se okrece baza: tamna crta na svijetlom papiru
     postaje svijetla crta na tamnom. Prozirnost malo raste jer svijetla
     crta na tamnome slabije cita. */
  --border: rgba(248, 248, 248, .16);
  --border-strong: rgba(248, 248, 248, .32);
  --border-dark: rgba(248, 248, 248, .16);

  /* Sjena na tamnoj podlozi mora biti dublja da se uopce vidi. */
  --shadow-card: 0 16px 40px -24px rgba(0, 0, 0, .55);
  --shadow-accent: 0 12px 28px -18px rgba(87, 156, 217, .32);

  /* --text razrijeden: baza se okrece sa --text. */
  --text-a04: rgba(248, 248, 248, .04);
  --text-a05: rgba(248, 248, 248, .05);
  --text-a06: rgba(248, 248, 248, .06);
  --text-a08: rgba(248, 248, 248, .08);
  --text-a45: rgba(248, 248, 248, .45);
  --text-a60: rgba(248, 248, 248, .60);

  /* --sand razrijeden: ljepljiva zaglavlja koja propustaju sadrzaj ispod
     sebe. Baza je papir, pa prati papir. */
  --sand-a75: rgba(30, 30, 30, .75);
  --sand-a82: rgba(30, 30, 30, .82);
  --sand-a92: rgba(30, 30, 30, .92);

  /* --coral razrijeden. Blage podloge trebaju vise prozirnosti da se na
     tamnome uopce vide. */
  --coral-a10: rgba(87, 156, 217, .10);
  --coral-a16: rgba(87, 156, 217, .16);
  --coral-a45: rgba(87, 156, 217, .45);
  --coral-a50: rgba(87, 156, 217, .50);

  /* --ink-2 razrijeden je tekst NA koralnoj kartici, pa ostaje taman. */
  --ink2-a60: rgba(30, 30, 30, .76);
  --ink2-a65: rgba(30, 30, 30, .80);
  --ink2-a70: rgba(30, 30, 30, .84);

  /* Zastor ispod otvorenog sidebara -- taman u obje teme, dublji ovdje. */
  --ink-a40: rgba(14, 17, 20, .65);

  /* Stupnjevi svjetline izvan ljestvice. Poredak medu njima se cuva
     naopako: 0.42 je u svijetloj temi najtamniji od tri, pa je ovdje
     najsvjetliji. */
  --text-42: #c9d2db;
  --text-42-a40: rgba(201, 210, 219, .4);
  --text-48: #bdc5cd;
  --text-58: #a6b0ba;
  --sand-89: #343c44;
  --coral-50: #f6a1a1;
}