/* IVT Media Portal — shared design system.
   Neutral graphite chrome; brand colours (IVT red / GT green) only as tags.
   Self-hosted variable fonts; no CDN at runtime. */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/JetBrainsMono.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ink: #1E2228;      /* graphite chrome / primary buttons */
  --dark: #0E1116;     /* video / media wells */
  --bg: #F7F8FA;       /* app background */
  --panel: #FFFFFF;    /* cards, sidebar, bars */
  --line: #EEF0F2;     /* hairline borders */
  --text: #1A1A1A;     /* primary text */
  --muted: #666666;    /* secondary text */
  --faint: #888888;    /* labels, meta */

  --ivt: #E2001A;      --ivt-soft: #FCE7E9;
  --gt: #5C8A1E;       --gt-soft: #EDF5DE;

  /* per-type hues for default "monogram" card previews (not brand tags) */
  --t-video: #4C63D8;  --t-pdf: #C07A2C;
  --t-image: #12897E;  --t-test: #7A57C0;
  --mono-bg: #EDF0F3;  /* soft graphite well behind a default preview */

  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --r: 10px;           /* card radius */
  --r-sm: 7px;
  --sidebar-w: 236px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1;
}
a { color: inherit; text-decoration: none; }

/* --- label / meta typography --- */
.label {
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.meta { font: 500 12px/1.4 var(--mono); color: var(--faint); }

/* --- brand wordmark --- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark .glyph {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
}
.wordmark .name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 0; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; cursor: pointer;
  font: 600 14px var(--sans); line-height: 1;
  transition: background .15s, transform .05s;
}
.btn:hover { background: #2b3138; }
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-ghost.is-disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }

/* Simple prev/next pager (admin log). */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pager .btn-ghost { text-decoration: none; }

/* --- inputs --- */
.field { display: flex; flex-direction: column; gap: 8px; }
.input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); color: var(--text);
  font: 400 15px var(--sans);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #B4BAC2; }
/* no native spinner on number inputs anywhere — type the value */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(30,34,40,.08);
}

/* --- brand tags --- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 5px;
  font: 600 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
}
.tag-ivt { background: var(--ivt-soft); color: var(--ivt); }
.tag-gt  { background: var(--gt-soft);  color: var(--gt); }
.tag-new { background: var(--ink); color: #fff; }

/* --- form error --- */
.error {
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--ivt-soft); color: var(--ivt);
  font-size: 13px; font-weight: 500;
}

/* ================= AUTH (login / verify) ================= */
.auth { display: flex; flex-direction: column; min-height: 100vh; }
/* The two hero panels sit side by side and grow to fill everything above the
   footer; the footer then sits at its natural height at the bottom. */
.auth-split { display: flex; flex-wrap: wrap; flex: 1 1 auto; }
.auth-brand {
  flex: 1 1 50%; background: var(--panel); position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px;
}
.auth-brand .lede { max-width: 560px; }
.wordmark .glyph svg { width: 23px; height: 23px; }
.auth-brand .wordmark { gap: 13px; }
.auth-brand .wordmark .glyph { width: 48px; height: 48px; border-radius: 12px; }
.auth-brand .wordmark .name { font-size: 25px; }
.auth-brand h1 {
  font-size: 40px; line-height: 1.12; letter-spacing: -.02em;
  margin: 30px 0 0; font-weight: 700; color: var(--text);
}
.pill {
  display: inline-flex; align-items: center; margin-top: 24px;
  padding: 11px 20px; border-radius: 11px;
  background: var(--ink); color: #fff;
  font: 600 17px var(--sans); letter-spacing: .01em;
}
/* decorative oversized glyphs behind the heading — fly in, drift, occasional glint */
.auth-brand { overflow: hidden; }
.auth-brand .lede { position: relative; z-index: 2; }
.deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.deco .gl {
  position: absolute; color: rgba(30,34,40,.07);
  opacity: 0; transform: translateX(-70px);
  animation: gl-in 1s cubic-bezier(.2,.75,.2,1) forwards;
}
.deco .gl svg {
  display: block; width: 100%; height: auto;
  animation: gl-float var(--fd,8s) ease-in-out infinite, gl-glint var(--gd,10s) ease-in-out infinite;
}
@keyframes gl-in { to { opacity: 1; transform: none; } }
@keyframes gl-float {
  0%,100% { transform: translateY(0) rotate(var(--r,0deg)); }
  50%     { transform: translateY(-14px) rotate(var(--r,0deg)); }
}
@keyframes gl-glint {
  0%,88%,100% { filter: none; }
  94%         { filter: drop-shadow(0 0 6px rgba(226,0,26,.30)) brightness(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .deco .gl, .deco .gl svg, .brand-marquee .track,
  .new-pill, .nav-item.pulse::before { animation: none; }
  .deco .gl { opacity: 1; transform: none; }
  .nav-item.pulse::before { display: none; }
  .nav-item.pulse { box-shadow: inset 0 0 0 1.5px rgba(230,119,0,.35); }
  .post { animation: none; }
}

/* infinite logo marquee — fades out at both edges (web edge + divider) */
.brand-marquee {
  position: absolute; left: 0; bottom: 46px; width: 100%; z-index: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 11%, #000 89%, transparent);
}
.brand-marquee .track {
  display: flex; align-items: center; gap: 56px; width: max-content;
  padding-left: 56px;
  animation: marquee 42s linear infinite;
}
.brand-marquee:hover .track { animation-play-state: paused; }
.brand-marquee img { height: 32px; width: auto; object-fit: contain; display: block; filter: saturate(.95); }
.brand-marquee img.sq { height: 44px; }
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.auth-form {
  flex: 1 1 50%; background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 64px 72px;
}
.auth-form .box { width: 100%; max-width: 440px; }
.auth-form h2 { font-size: 29px; margin: 0 0 10px; font-weight: 700; letter-spacing: -.01em; }
.auth-form p.sub { margin: 0 0 30px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.auth-form .field { margin-bottom: 18px; }
.auth-form .btn { width: 100%; }
.auth-back { margin: 16px 0 0; font-size: 13px; }
.auth-back a { color: var(--muted); }
.auth-back a:hover { color: var(--text); }

/* segmented one-time-code entry */
.otp { display: flex; gap: 10px; margin-bottom: 18px; }
.otp .cell {
  flex: 1 1 0; min-width: 0; height: 60px; text-align: center;
  font: 600 24px var(--mono); color: var(--text);
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel);
  transition: border-color .15s, box-shadow .15s;
}
.otp .cell::placeholder { color: #C9CED4; }
.otp .cell:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,34,40,.09); }
.otp .cell.filled { border-color: #C4CAD1; }

.resend { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.resend a { color: var(--text); font-weight: 600; }
.resend a:hover { text-decoration: underline; }
.resend a[aria-disabled="true"] { color: var(--faint); font-weight: 500; pointer-events: none; text-decoration: none; }
.resend .cd { color: var(--faint); font-variant-numeric: tabular-nums; }


/* ================= APP SHELL (header + sidebar + main) — Pencil 1:1 ================= */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* full-width top header */
.appbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 32px; background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.appbar .brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.appbar .mark {
  width: 30px; height: 30px; background: var(--ink); color: #fff;
  display: grid; place-items: center; flex: 0 0 auto;
}
.appbar .mark svg { width: 17px; height: 17px; }
.appbar .brand .name { font-weight: 700; font-size: 18px; letter-spacing: -.017em; }

.appbar .search { flex: 1 1 380px; max-width: 380px; position: relative; }
.appbar .search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--faint);
}
.appbar .search input {
  width: 100%; padding: 9px 14px 9px 40px;
  border: 1px solid var(--line); background: var(--bg);
  font: 400 14px var(--sans); color: var(--text);
}
.appbar .search input::placeholder { color: var(--faint); }
.appbar .search input:focus { outline: none; border-color: var(--ink); background: var(--panel); }

.appbar .who { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.appbar .userchip {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--line); background: var(--bg);
}
.appbar .userchip svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.appbar .userchip .email { font: 400 13px var(--mono); color: var(--text); white-space: nowrap; }
.appbar .logout {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 6px;
  color: var(--muted); font: 600 14px var(--sans);
  background: none; border: 0; cursor: pointer;
}
.appbar .logout:hover { color: var(--text); }
.appbar .logout svg { width: 16px; height: 16px; }
.appbar .adminlink { color: var(--muted); font: 600 14px var(--sans); }
.appbar .adminlink:hover { color: var(--text); }

/* row: sidebar + main */
.app-row { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; transition: opacity .12s ease; }

.sidebar {
  flex: 0 0 220px; width: 220px;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 24px 16px; display: flex; flex-direction: column; gap: 4px;
}
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-group > .label { padding: 0 12px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; color: var(--muted); font: 500 14px var(--sans);
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; }
.nav-item .count {
  margin-left: auto; padding: 1px 7px;
  background: var(--bg); color: var(--muted); font: 600 11px var(--mono);
}
.nav-item.active {
  background: var(--bg); color: var(--text); font-weight: 600;
  border-left: 3px solid var(--ink); padding-left: 9px;
}
.nav-item.active svg { opacity: 1; }

/* library tree */
.tree { display: flex; flex-direction: column; gap: 1px; }
.tree .brand-head {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px 4px; font: 600 14px var(--sans); color: var(--text);
}
.tree .brand-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.tree .brand-head.ivt .dot { background: var(--ivt); }
.tree .brand-head.gt  .dot { background: #7DB82A; }
.tree .leaf {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px 9px 26px; color: var(--faint); font: 400 13px var(--sans);
}
.tree .leaf:hover { background: var(--bg); color: var(--text); }
.tree .leaf.active { background: var(--bg); color: var(--text); font-weight: 600; }
.tree .leaf .n { margin-left: auto; font: 500 11px var(--mono); color: var(--faint); }
.tree .empty { padding: 6px 12px 8px 26px; font-size: 12.5px; color: #AAB0B8; font-style: italic; }

/* main */
.main { flex: 1 1 auto; min-width: 0; }
.content { padding: 32px; display: flex; flex-direction: column; gap: 30px; }
.page-head { display: flex; flex-direction: column; gap: 5px; }
.page-head h1 { font-size: 26px; margin: 0; font-weight: 700; letter-spacing: -.02em; }
.page-head p { margin: 0; color: var(--muted); font-size: 15px; }

/* "Nové" section + horizontal strip */
.section { display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; align-items: center; gap: 8px; }
.section-head svg { width: 18px; height: 18px; color: var(--ink); flex: 0 0 auto; }
.section-head h2 { font-size: 17px; margin: 0; font-weight: 600; }
.section-head .hint { margin-left: auto; font: 400 12px var(--mono); color: var(--faint); }
.strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mini {
  flex: 0 0 220px; width: 220px; background: var(--panel);
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: border-color .15s;
}
.mini:hover { border-color: #DDE1E5; }
.mini .thumb { height: 112px; background: var(--dark); position: relative; display: grid; place-items: center; }
.mini .thumb > svg { width: 24px; height: 24px; color: #fff; }
.mini .info { padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.mini .tt {
  font: 600 13px/1.25 var(--sans); color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mini .tx { font: 400 11px var(--mono); color: var(--faint); }
/* resume progress bar on the thumb */
.mini .thumb .pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.2); }
.mini .thumb .pbar i { display: block; height: 100%; background: #fff; }

/* subtle "browse the library" footer link on the dashboard */
.browse-hint { margin: 2px 0 0; }
.browse-hint a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 600 13px var(--sans); }
.browse-hint a svg { width: 16px; height: 16px; opacity: .8; }
.browse-hint a:hover { color: var(--text); }
.empty.small .btn { margin-top: 4px; text-decoration: none; }

/* company tag + NOVÉ badge (on media wells) */
.ctag {
  position: absolute; top: 10px; left: 10px; padding: 3px 6px;
  font: 600 9px var(--mono); letter-spacing: .03em; text-transform: uppercase;
}
.ctag.ivt { background: var(--ivt-soft); color: var(--ivt); }
.ctag.gt  { background: var(--gt-soft); color: #6DA524; }
.card .ctag { top: 12px; left: 12px; padding: 3px 7px; font-size: 10px; }
.nbadge {
  position: absolute; top: 10px; right: 10px; padding: 3px 7px;
  background: var(--ink); color: #fff; font: 600 9px var(--mono); letter-spacing: .04em;
}

/* filter chips (Vše / S videem / Dokumenty / S testem) */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters a {
  padding: 7px 13px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font: 400 13px var(--sans);
}
.filters a:hover { color: var(--text); border-color: #DDE1E5; }
.filters a.active { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

/* card grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 25px; }
/* fixed 2-up grid (e.g. "Nové pro vás": max 2 across, wraps to 2×4) */
.grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s, transform .1s, border-color .15s;
}
.card:hover { box-shadow: 0 8px 26px rgba(20,24,30,.09); transform: translateY(-2px); border-color: #DDE1E5; }
.card .thumb { aspect-ratio: 302 / 172; background: var(--dark); position: relative; display: grid; place-items: center; overflow: hidden; }
.card .thumb > svg { width: 36px; height: 36px; color: #fff; }

/* default "monogram" preview — a soft light graphite well, one type-hued glyph +
   a faint oversized watermark. Used when a case has no custom image. */
.card .thumb.mono { background: linear-gradient(160deg, #F3F5F8 0%, #E6EAEE 100%); }
.card .thumb.mono.type-video { --hue: var(--t-video); }
.card .thumb.mono.type-pdf   { --hue: var(--t-pdf); }
.card .thumb.mono.type-image { --hue: var(--t-image); }
.card .thumb.mono::after { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 100% at 50% 14%, color-mix(in srgb, var(--hue) 14%, transparent), transparent 68%); }
.card .thumb.mono .mono-ic { position: relative; z-index: 2; display: grid; place-items: center; }
.card .thumb.mono .mono-ic svg { width: 46px; height: 46px; color: var(--hue); }
.card .thumb.mono .mono-glyph { position: absolute; z-index: 1; bottom: -30px; right: -22px;
  transform: rotate(-8deg); opacity: .10; color: var(--hue); pointer-events: none; }
.card .thumb.mono .mono-glyph svg { width: 134px; height: 134px; }
/* a real uploaded/generated preview image fills the well and wins over the monogram */
.card .thumb .thumb-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.card .chips { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.card .chips .k {
  background: #ffffffee; padding: 4px; line-height: 0;
  display: inline-flex; align-items: center; border-radius: 4px;
}
.card .chips .k svg { width: 14px; height: 14px; color: var(--ink); display: block; }
.card .info { padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.card .info .tt { font: 600 15px/1.27 var(--sans); color: var(--text); }
.card .info .tx { font: 400 12px var(--mono); color: var(--faint); }

/* empty states */
.empty {
  border: 1px dashed #DCE0E5;
  padding: 48px 24px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--panel), var(--bg));
}
.empty svg { width: 30px; height: 30px; color: #C2C7CE; }
.empty h3 { margin: 4px 0 0; font-size: 16px; color: var(--text); font-weight: 700; }
.empty p { margin: 0; font-size: 13.5px; max-width: 400px; line-height: 1.55; }
.empty.small { padding: 30px 20px; }

/* dashboard: title row + pulsing "new" pill */
.page-head .head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.new-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: #FFF3E6; color: #B4530A; border: 1px solid #FFD7A8;
  font: 600 12px var(--sans);
  animation: new-pill-pulse 2.2s ease-in-out infinite;
}
.new-pill svg { width: 14px; height: 14px; }
.new-pill:hover { background: #FFE9D0; }
@keyframes new-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,119,0,0); }
  50%      { box-shadow: 0 0 0 4px rgba(230,119,0,.16); }
}

/* dashboard: actionable test tiles */
.tasks { display: flex; gap: 14px; flex-wrap: wrap; }
.task {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--line);
  flex: 1 1 240px; max-width: 360px; transition: border-color .15s, box-shadow .15s;
}
.task:hover { border-color: #DDE1E5; box-shadow: 0 6px 20px rgba(20,24,30,.06); }
.task > svg { width: 22px; height: 22px; color: var(--ink); flex: 0 0 auto; }
.task b { display: block; font: 600 14px var(--sans); color: var(--text); }
.task span { font: 400 12.5px var(--sans); color: var(--muted); }

/* dashboard: brand section header */
.section-head.brandhead .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.section-head.brandhead .dot.ivt { background: var(--ivt); }
.section-head.brandhead .dot.gt  { background: #7DB82A; }
.section-head.brandhead .cnt { font: 500 12px var(--mono); color: var(--faint); }
.section-head.brandhead .more { margin-left: auto; font: 600 13px var(--sans); color: var(--muted); white-space: nowrap; }
.section-head.brandhead .more:hover { color: var(--text); }

/* sidebar: a fast orange arc runs around the Nový rail item when new materials
   exist — a conic gradient masked to a border ring, angle animated. */
@property --nb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.nav-item.pulse { position: relative; border-radius: var(--r-sm); }
.nav-item.pulse svg { color: #E67700; opacity: 1; }
.nav-item.pulse .count { background: #FFE3C2; color: #B4530A; }
.nav-item.pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--nb-angle),
      rgba(230,119,0,0) 0deg 250deg, #E67700 300deg, #FFC182 330deg, rgba(230,119,0,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: nav-run 1.25s linear infinite;
  pointer-events: none;
}
@keyframes nav-run { to { --nb-angle: 360deg; } }

/* editor: save/publish actions + draft */
.editor-bar .bar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.editor-bar .bar-actions .btn-ghost { box-shadow: none; }
.draft-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px; background: #FFF3E6; color: #B4530A; font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }

/* leave-editor warning modal (go to test builder) */
.leave-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; }
.leave-modal[hidden] { display: none; }
.leave-modal .lm-back { position: absolute; inset: 0; background: rgba(14,17,22,.5); backdrop-filter: blur(3px); animation: pm-fade .16s both; }
.leave-modal .lm-sheet {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 26px; box-shadow: 0 30px 80px rgba(14,17,22,.3); animation: pm-rise .22s cubic-bezier(.2,.7,.2,1) both;
}
.leave-modal .lm-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: #FFF3E6; color: #C25A00; margin-bottom: 14px; }
.leave-modal .lm-icon svg { width: 22px; height: 22px; }
.leave-modal h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.leave-modal p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.leave-modal .lm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .leave-modal .lm-back, .leave-modal .lm-sheet { animation: none; } }

/* ---- save buttons that morph into a spinner, then a success tick ---- */
/* the button itself becomes the progress indicator: label → spinner → tick */
.anim-save { position: relative; overflow: hidden; transition: background .32s ease, border-color .32s ease; }
.anim-save[disabled] { opacity: 1; cursor: default; }
.anim-save .lms-label { display: inline-flex; align-items: center; gap: 8px; transition: opacity .18s ease, transform .18s ease; }
.anim-save.is-busy .lms-label,
.anim-save.is-done .lms-label { opacity: 0; transform: translateY(-6px); }
.anim-save .lms-spin, .anim-save .lms-tick {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none;
}
.anim-save.is-busy .lms-spin { opacity: 1; }
.anim-save .lms-spin::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.32); border-top-color: #fff;
  animation: lm-spin .62s linear infinite;
}
/* ghost (light) buttons need a dark spinner track */
.anim-save.btn-ghost .lms-spin::before { border-color: rgba(20,24,30,.18); border-top-color: var(--ink, #1b2129); }
.anim-save.is-done { background: #5B8C1E !important; border-color: #5B8C1E !important; color: #fff; }
.anim-save.is-done .lms-tick { opacity: 1; animation: lm-pop .34s cubic-bezier(.2,1.5,.35,1) both; }
.anim-save.is-done .lms-tick svg { color: #fff; }
.anim-save .lms-tick svg { width: 19px; height: 19px; }
@keyframes lm-spin { to { transform: rotate(360deg); } }
@keyframes lm-pop { from { transform: scale(.35); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .anim-save .lms-spin::before { animation: none; }
  .anim-save.is-done .lms-tick { animation: none; }
}

/* ================= WELCOME / EMPTY DASHBOARD ================= */
.welcome {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
  padding: 52px 48px; display: flex; flex-direction: column; gap: 34px;
}
.welcome-lede { position: relative; z-index: 2; max-width: 660px; }
.welcome .brandbar { display: inline-flex; gap: 4px; margin-bottom: 22px; }
.welcome .brandbar i { width: 26px; height: 4px; border-radius: 2px; display: block; }
.welcome .brandbar i.ivt { background: var(--ivt); }
.welcome .brandbar i.gt  { background: #7DB82A; }
.welcome .glyph.big {
  width: 56px; height: 56px; border-radius: 15px;
  background: var(--ink); color: #fff; display: grid; place-items: center;
}
.welcome .glyph.big svg { width: 28px; height: 28px; }
.welcome h1 { font-size: 30px; letter-spacing: -.02em; margin: 20px 0 12px; font-weight: 700; }
.welcome-lede p { color: var(--muted); font-size: 15.5px; line-height: 1.62; margin: 0 0 24px; }
.welcome-lede p b { color: var(--text); font-weight: 600; }
.welcome-lede .btn { text-decoration: none; }

.features { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature {
  border: 1px solid var(--line); background: var(--bg);
  padding: 18px; display: flex; flex-direction: column; gap: 9px;
}
.feature .fi {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line);
}
.feature .fi svg { width: 18px; height: 18px; color: var(--ink); }
.feature b { font-size: 14.5px; color: var(--text); }
.feature > span:last-child { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* faint oversized icons drifting behind the lede */
.welcome-deco { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.welcome-deco .g { position: absolute; color: rgba(30,34,40,.05); }
.welcome-deco .g svg {
  display: block; width: 100%; height: auto;
  transform: rotate(var(--r,0deg));
  animation: wl-float var(--fd,8s) ease-in-out infinite;
}
@keyframes wl-float {
  0%,100% { transform: rotate(var(--r,0deg)) translateY(0); }
  50%     { transform: rotate(var(--r,0deg)) translateY(-12px); }
}

/* staggered entrance */
.welcome .brandbar, .welcome .glyph.big, .welcome h1, .welcome-lede p,
.welcome-lede .btn, .feature { animation: wl-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.welcome .glyph.big { animation-delay: .04s; }
.welcome h1 { animation-delay: .10s; }
.welcome-lede p { animation-delay: .16s; }
.welcome-lede .btn { animation-delay: .22s; }
.feature:nth-child(1) { animation-delay: .26s; }
.feature:nth-child(2) { animation-delay: .33s; }
.feature:nth-child(3) { animation-delay: .40s; }
@keyframes wl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .welcome-deco .g svg,
  .welcome .brandbar, .welcome .glyph.big, .welcome h1, .welcome-lede p,
  .welcome-lede .btn, .feature { animation: none; }
}

@media (max-width: 720px) {
  .welcome { padding: 34px 24px; }
  .welcome h1 { font-size: 25px; }
  .features { grid-template-columns: 1fr; }
  .welcome-deco { display: none; }
}

/* ================= DASHBOARD 2-COL + FEED (nástěnka) ================= */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: stretch; }
.dash-main { display: flex; flex-direction: column; gap: 30px; min-width: 0; }

.feed {
  border: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column;
  min-height: 460px; overflow: hidden;
}
.feed-head {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.feed-head svg { width: 17px; height: 17px; color: var(--ink); }
.feed-head h2 { font-size: 14px; margin: 0; font-weight: 700; }
.feed-list { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; }

.post { padding: 13px 16px; animation: wl-rise .5s both; cursor: pointer; transition: background .12s; }
.post:hover { background: var(--bg); }
.post:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.post:not(:last-child) { border-bottom: 1px solid var(--line); }
.post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.post .avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font: 700 11px var(--sans);
}
.post .who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; margin-right: auto; }
.post .who .name { font: 600 12.5px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post .who .when { font: 400 10.5px var(--mono); color: var(--faint); }
.post .mini-thumb { width: 42px; height: 42px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.post-snippet {
  font-size: 13px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post:nth-child(1) { animation-delay: .03s; }
.post:nth-child(2) { animation-delay: .09s; }
.post:nth-child(3) { animation-delay: .15s; }
.post:nth-child(4) { animation-delay: .21s; }
.post:nth-child(5) { animation-delay: .27s; }
.feed-empty {
  padding: 36px 22px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.feed-empty svg { width: 26px; height: 26px; color: #C2C7CE; }
.feed-empty p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 240px; }

/* bigger greeting + attention tiles that fill the column */
.page-head.greet h1 { font-size: 31px; letter-spacing: -.025em; }
.page-head.greet p { font-size: 16px; }
.dash .tasks { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.dash .task { max-width: none; padding: 16px 18px; }
.dash .task b { font-size: 15px; }

/* feed post reader overlay */
.pmodal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }
.pmodal[hidden] { display: none; }
.pmodal-back { position: absolute; inset: 0; background: rgba(14,17,22,.5); backdrop-filter: blur(3px); animation: pm-fade .18s ease both; }
.pmodal .sheet {
  position: relative; z-index: 1; width: 100%; max-width: 620px; max-height: 86vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 26px 26px; box-shadow: 0 30px 80px rgba(14,17,22,.28);
  animation: pm-rise .24s cubic-bezier(.2,.7,.2,1) both;
}
.pmodal .sheet-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 8px;
  background: var(--bg); color: var(--muted); cursor: pointer;
}
.pmodal .sheet-close:hover { background: var(--line); color: var(--text); }
.pmodal .sheet-close svg { width: 17px; height: 17px; }
.pmodal .sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-right: 40px; }
.pmodal .sheet-head .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 15px var(--sans); flex: 0 0 auto; }
.pmodal .sheet-head .who { display: flex; flex-direction: column; line-height: 1.25; }
.pmodal .sheet-head .name { font: 700 15px var(--sans); color: var(--text); }
.pmodal .sheet-head .when { font: 400 12px var(--mono); color: var(--faint); }
.pmodal .sheet-body { font-size: 15px; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.pmodal .sheet-img { display: block; width: 100%; margin-top: 16px; border-radius: 10px; border: 1px solid var(--line); }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pmodal-back, .pmodal .sheet { animation: none; } }

/* admin: nástěnka composer + post list */
.adminform.stackform { flex-direction: column; align-items: stretch; gap: 10px; }
.adminform.stackform textarea { width: 100%; }
.adminform .formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.adminform .file { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--sans); color: var(--muted); cursor: pointer; }
.postlist { display: flex; flex-direction: column; gap: 12px; }
.apost { border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; }
.apost-head { display: flex; align-items: center; gap: 10px; }
.apost-head .who { font: 600 13px var(--sans); }
.apost-head .when { font: 400 11px var(--mono); color: var(--faint); }
.apost-head .del { margin-left: auto; }
.iconbtn { background: none; border: 0; color: var(--faint); cursor: pointer; padding: 4px; display: inline-flex; }
.iconbtn:hover { color: var(--ivt); }
.iconbtn svg { width: 15px; height: 15px; }
.apost-body { margin-top: 8px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.apost-img { display: block; max-width: 340px; width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; }

/* ================= ADMIN ================= */
.admintag {
  margin-left: 8px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px;
  font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.content.admin { gap: 26px; }
.section-head .more { margin-left: auto; font: 600 13px var(--sans); color: var(--muted); white-space: nowrap; }
.section-head .more:hover { color: var(--text); }

.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.stat {
  border: 1px solid var(--line); background: var(--panel);
  padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 9px;
}
.stat .k { font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.stat .v { font: 700 28px var(--sans); letter-spacing: -.02em; color: var(--text); }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 10px 14px; white-space: nowrap;
  font: 600 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.mono { font-family: var(--mono); }
.tbl td.mut { color: var(--faint); }
.tbl td.role { font: 500 12px var(--mono); color: var(--muted); }

.adminform {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 14px; border: 1px solid var(--line); background: var(--panel);
}
.adminform.inline { padding: 0; border: 0; background: none; gap: 5px; }
.adminform .lbl { font: 600 12px var(--sans); color: var(--muted); margin-right: 2px; }
.adminform input, .adminform select, .adminform textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); font: 400 13px var(--sans); color: var(--text);
}
.adminform textarea { font-family: var(--mono); font-size: 12px; resize: vertical; }
.adminform input:focus, .adminform select:focus, .adminform textarea:focus { outline: none; border-color: var(--ink); }
.adminform .chk { display: inline-flex; align-items: center; gap: 5px; font: 400 12.5px var(--sans); color: var(--muted); }
.adminform button {
  padding: 8px 13px; border: 0; border-radius: 6px;
  background: var(--ink); color: #fff; font: 600 12.5px var(--sans); cursor: pointer;
}
.adminform button:hover { background: #2b3138; }
.adminform button.ghost { background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.adminform button.ghost:hover { border-color: #DDE1E5; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.hint-line { color: var(--faint); font-size: 12.5px; margin: 0; }
.hint-line code { font-family: var(--mono); color: var(--muted); }

.tag-ivt { background: var(--ivt-soft); color: var(--ivt); padding: 2px 7px; border-radius: 4px; font: 600 10px var(--mono); }
.tag-gt  { background: var(--gt-soft); color: #6DA524; padding: 2px 7px; border-radius: 4px; font: 600 10px var(--mono); }

/* ================= MEDIA CASE EDITOR ================= */
.edpage .appbar { position: static; }
.editor-wrap { background: var(--bg); }
.editor { max-width: 940px; margin: 0 auto; padding: 0 24px 96px; }
.editor.wide { max-width: 1180px; }

.editor-bar {
  position: sticky; top: 0; z-index: 9;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  padding: 16px 0; margin-bottom: 8px;
  background: var(--bg);
}
.editor-bar .back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 600 13px var(--sans); flex: 0 0 auto; }
.editor-bar .back svg { width: 16px; height: 16px; }
.editor-bar .back:hover { color: var(--text); }
.editor-bar .et { flex: 1 1 260px; min-width: 0; margin-right: auto; }
.editor-bar .et h1 { font-size: 20px; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
.editor-bar .et .sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.editor-bar .save { flex: 0 0 auto; box-shadow: 0 6px 18px rgba(30,34,40,.18); }
.editor-bar .save svg { width: 16px; height: 16px; }

.err-box {
  border: 1px solid #F3C7CD; background: var(--ivt-soft); color: #8E0014;
  border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
  animation: wl-rise .35s both;
}
.err-box b { display: block; margin-bottom: 6px; font-size: 13.5px; }
.err-box ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }

.ed-body { display: flex; flex-direction: column; gap: 18px; }
.ed-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; animation: wl-rise .4s both;
}
.ed-card:nth-child(2) { animation-delay: .04s; }
.ed-card:nth-child(3) { animation-delay: .10s; }
.ed-card:nth-child(4) { animation-delay: .16s; }
.ed-card:nth-child(5) { animation-delay: .22s; }
.ed-card-h { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.ed-card-h .step {
  width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 12px var(--mono);
}
.ed-card-h h2 { font-size: 16px; margin: 0; font-weight: 700; }
.ed-card-h .count-pill { padding: 1px 8px; background: var(--bg); border-radius: 999px; font: 600 11px var(--mono); color: var(--muted); }
.ed-card-h .add { margin-left: auto; }

.ed-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld.grow { flex: 1 1 240px; min-width: 200px; }
.fld > label { font: 600 12px var(--sans); color: var(--muted); }
.fld .opt { font-weight: 400; color: var(--faint); }
.ed-card .input {
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); font: 400 14px var(--sans); color: var(--text); width: 100%;
}
.ed-card select.input { cursor: pointer; }
.ed-card .input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,34,40,.07); }
.ed-card textarea.input { resize: vertical; font-size: 13.5px; line-height: 1.5; }
.ed-card .input.narrow { max-width: 260px; }

/* firma segmented */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg-opt span { display: block; padding: 9px 18px; font: 600 13px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg-opt + .seg-opt span { border-left: 1px solid var(--line); }
.seg-opt input:checked ~ span { background: var(--ink); color: #fff; }
.seg-opt.ivt input:checked ~ span { background: var(--ivt-soft); color: var(--ivt); }
.seg-opt.gt input:checked ~ span { background: var(--gt-soft); color: #4E7A16; }

/* dynamic rows (items / exercises) */
.rows { display: flex; flex-direction: column; gap: 12px; }
.rows:empty { display: none; }
.row {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 12px;
}
.row .grip { color: #C2C7CE; padding-top: 8px; cursor: grab; flex: 0 0 auto; touch-action: none; }
.row .grip svg { pointer-events: none; }
.row .grip:active { cursor: grabbing; }
.row .grip:hover { color: var(--muted); }
/* the grabbed row's original slot — a highlighted empty gap (landing target) */
.item-row.placeholder { border: 2px dashed var(--ink); background: rgba(30,34,40,.06); }
.item-row.placeholder > * { visibility: hidden; }
/* the floating clone that follows the cursor */
.item-row.drag-ghost {
  position: fixed; z-index: 60; margin: 0; pointer-events: none;
  background: var(--panel); border: 1px solid #DDE1E5; border-radius: 10px;
  box-shadow: 0 18px 44px rgba(20,24,30,.24);
  transform: scale(1.02); opacity: .98; cursor: grabbing;
}
.row .grip svg { width: 16px; height: 16px; }
.row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.row-line { display: flex; gap: 9px; flex-wrap: wrap; }
.row-line .grow { flex: 1 1 200px; }
.row-line .kind { max-width: 130px; }
.row-line .pts { max-width: 90px; }
.filewrap .file-input { font: 400 12.5px var(--sans); color: var(--muted); }
.filewrap .existing { font: 400 12px var(--mono); color: var(--faint); }
.row-flags { display: flex; gap: 16px; }
.row-flags .chk { display: inline-flex; align-items: center; gap: 6px; font: 400 12.5px var(--sans); color: var(--muted); }
.sc-fields { display: flex; flex-direction: column; gap: 9px; }
.row-del { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer; }
.row-del:hover { background: var(--ivt-soft); color: var(--ivt); }
.row-del svg { width: 16px; height: 16px; }
.empty-rows { padding: 22px; text-align: center; color: var(--faint); font-size: 13px; border: 1px dashed #DCE0E5; border-radius: 10px; }
.item-row .row-main { gap: 12px; }

/* item: kind segmented (icons) */
.kindseg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--panel); }
.kseg { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 0; background: transparent; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; transition: background .12s, color .12s; }
.kseg + .kseg { border-left: 1px solid var(--line); }
.kseg svg { width: 16px; height: 16px; opacity: .85; }
.kseg:hover { background: var(--bg); color: var(--text); }
.kseg.on { background: var(--ink); color: #fff; }
.kseg.on svg { opacity: 1; }

/* item: dropzone */
.dropzone { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1.5px dashed #CDD3DA; border-radius: 10px; background: var(--panel); cursor: pointer; transition: border-color .14s, background .14s; }
.dropzone:hover { border-color: var(--ink); background: var(--bg); }
.dropzone.drag { border-color: var(--ink); background: rgba(30,34,40,.05); }
.dropzone.has { border-style: solid; border-color: var(--line); }

/* unified uploader (uploader.js) — same look everywhere */
.uploader { display: flex; flex-direction: column; gap: 8px; }
/* the .up-* display rules below would otherwise override the UA [hidden] rule
   (equal specificity, author wins) and leave hidden panels visible */
.uploader [hidden] { display: none !important; }
.up-zone { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed #CDD3DA; border-radius: 10px; background: var(--panel); cursor: pointer; transition: border-color .14s, background .14s; }
.up-zone:hover { border-color: var(--ink); background: var(--bg); }
.up-zone.drag { border-color: var(--ink); background: rgba(30,34,40,.05); }
.up-zone .up-ic svg { width: 22px; height: 22px; color: var(--muted); }
.up-zone .up-text { font: 400 13px var(--sans); color: var(--muted); }
.up-zone .up-text b { color: var(--text); font-weight: 600; }
.up-progress { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.up-bar { flex: 1 1 auto; height: 8px; border-radius: 8px; background: #E6E9ED; overflow: hidden; }
.up-bar span { display: block; height: 100%; width: 0; background: var(--ivt); border-radius: 8px; transition: width .18s ease; }
.up-pct { flex: 0 0 auto; font: 600 12.5px var(--sans); color: var(--muted); min-width: 92px; text-align: right; }
.up-file { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.up-file-thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 7px; background: var(--bg); display: grid; place-items: center; overflow: hidden; }
.up-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.up-file-thumb svg { width: 18px; height: 18px; color: var(--muted); }
.up-file-name { flex: 1 1 auto; min-width: 0; font: 500 13px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* scoped under .uploader so surrounding form button styles (e.g. .adminform
   button) can't turn this into a big dark block */
.uploader .up-file-x { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer; font: inherit; }
.uploader .up-file-x:hover { background: var(--ivt-soft); color: var(--ivt); }
.uploader .up-file-x svg { width: 15px; height: 15px; }
.up-err { font: 500 12.5px var(--sans); color: var(--ivt); }
/* case editor — Náhled (card cover) chooser: three selectable option cards */
.pv-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 4px; }
@media (max-width: 640px) { .pv-modes { grid-template-columns: 1fr; } }
.pv-mode { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px 13px 15px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer;
  transition: border-color .14s, box-shadow .14s; }
.pv-mode input { position: absolute; opacity: 0; width: 0; height: 0; }
.pv-mode:hover { border-color: #CDD3DA; }
.pv-mode:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,34,40,.06); }
.pv-vis { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
.pv-vis svg { width: 22px; height: 22px; }
.pv-vis-mono { background: linear-gradient(160deg, #F3F5F8, #E6EAEE); color: #4C63D8; }
.pv-vis-pick { background: #E4F2F0; color: #12897E; }
.pv-vis-up { background: var(--ivt-soft); color: var(--ivt); }
.pv-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pv-txt b { font: 600 13.5px var(--sans); color: var(--text); }
.pv-txt small { font-size: 11.5px; color: var(--faint); }
.pv-mode::after { content: ""; position: absolute; top: 11px; right: 11px; width: 17px; height: 17px;
  border-radius: 50%; border: 1.5px solid #CDD3DA; transition: border-color .14s, background .14s, box-shadow .14s; }
.pv-mode:has(input:checked)::after { border-color: var(--ivt); background: var(--ivt); box-shadow: inset 0 0 0 3.5px #fff; }
.pv-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pv-lbl { display: block; font: 600 12.5px var(--sans); color: var(--muted); margin-bottom: 6px; }
.pv-empty { font: 400 12.5px var(--sans); color: var(--faint); margin: 6px 0 0; }
.pv-current { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.pv-cur-img { width: 96px; height: 60px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.pv-panel #pvItemSelect { max-width: 360px; }

.feed-upload { display: flex; flex-direction: column; gap: 7px; }
.feed-upload-h { font: 600 12.5px var(--sans); color: var(--muted); }
.feed-upload-h .opt { font-weight: 400; color: var(--faint); }

/* item: per-item visibility override (Model B) — one switch + audience picker */
.item-vis { border-top: 1px dashed var(--line); padding-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.item-vis-switch { display: inline-flex; align-items: center; gap: 9px; font: 500 12.5px var(--sans); color: var(--muted); cursor: pointer; user-select: none; }
.item-vis-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.item-vis-switch .track { position: relative; width: 34px; height: 20px; border-radius: 20px; background: #CDD3DA; transition: background .16s; flex: 0 0 auto; }
.item-vis-switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s; }
.item-vis-switch input:checked + .track { background: var(--ivt); }
.item-vis-switch input:checked + .track::after { transform: translateX(14px); }
.item-vis-pick { max-width: 460px; }
.item-vis-hint { font: 400 12px var(--sans); color: var(--faint); margin: 0; }
.dropzone .dz-ic { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: var(--bg); color: var(--ink); }
.dropzone .dz-ic svg { width: 19px; height: 19px; }
.dropzone .dz-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dropzone .dz-main { font: 500 13.5px var(--sans); color: var(--text); }
.dropzone .dz-main b { color: var(--ink); }
.dropzone .dz-sub { font: 400 12px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone.has .dz-sub { color: #4E7A16; }

/* mini toggle (item flags) */
.toggle { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--sans); color: var(--muted); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle .tk { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; flex: 0 0 auto; }
.toggle .tk::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .16s; }
.toggle input:checked + .tk { background: var(--ink); }
.toggle input:checked + .tk::after { transform: translateX(14px); }
.item-row .row-flags { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 2px; }

/* test toggle switch */
.switch { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--muted); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .16s; }
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::after { transform: translateX(16px); }
.test-block { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.test-block[hidden] { display: none; }

/* editor: visibility fields as proper controls */
.vis-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.visfld-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.visfld-t { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--sans); color: var(--text); }
.visfld-t svg { width: 15px; height: 15px; color: var(--muted); }
.visfld-h .opt { font: 400 12px var(--sans); color: var(--faint); }
.picker.inset {
  min-height: 50px; padding: 9px 10px; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.picker-empty { font: 400 13px var(--sans); color: var(--faint); align-self: center; margin-right: auto; padding-left: 2px; }
.picker.inset:has(.pick-chip) .picker-empty { display: none; }
.picker.inset .picker-add { margin-left: auto; }
.picker.inset:has(.pick-chip) .picker-add { margin-left: 0; }
.tax-grid { margin-top: 14px; }
.picker.inset.single .picker-empty { color: var(--faint); }
.picker.is-disabled { opacity: .5; }
.picker.is-disabled .picker-add { cursor: not-allowed; }
.picker.single:has(.pick-chip) .picker-add { display: none; }

/* visibility chips */
.chips-check { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kartotéka: chips + add-to-group picker on ONE horizontal row (no stacking),
   and the columns packed to the left so there is no dead gap. */
.chips-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-inline .chip { font: 600 11.5px var(--sans); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; color: var(--text); white-space: nowrap; }
.chips-inline .mut { font-size: 12px; }
.grp-cell { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
/* pack ID/E-mail/Role to content width; let the Skupiny column take the slack */
.tbl.kart th, .tbl.kart td { white-space: nowrap; }
.tbl.kart th:last-child, .tbl.kart td.grp { width: 100%; white-space: normal; }
.kart-forms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.kart-forms .adminform { margin: 0; }
.chk-chip { position: relative; }
.chk-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chk-chip span { display: block; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; font: 500 13px var(--sans); color: var(--muted); cursor: pointer; transition: .12s; }
.chk-chip input:checked ~ span { background: var(--ink); border-color: var(--ink); color: #fff; }
.userpick { margin-top: 14px; }
.userpick summary { cursor: pointer; font: 600 12.5px var(--sans); color: var(--muted); margin-bottom: 10px; }
.userpick summary:hover { color: var(--text); }

/* admin cases: header action + row link */
.page-head.hasaction { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.head-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.btn.newcase { flex: 0 0 auto; text-decoration: none; }
.btn.newcase svg { width: 16px; height: 16px; }
.gc-btn { white-space: nowrap; }
.gc-btn svg { width: 15px; height: 15px; }
.tbl td.right { text-align: right; }
.rowlink { color: var(--muted); font: 600 12.5px var(--sans); white-space: nowrap; }
.rowlink:hover { color: var(--text); }
.rowacts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.rowdel {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.rowdel svg { width: 15px; height: 15px; }
.rowdel:hover { color: #C0392B; border-color: #E7B7B0; background: #FCEEEC; }

/* generic danger button + typed-code confirmation modal */
.btn-danger { background: #C0392B; border-color: #C0392B; color: #fff; }
.btn-danger:hover { background: #A93226; border-color: #A93226; }
.confirm-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.confirm-modal[hidden] { display: none; }
.confirm-modal .cm-back { position: absolute; inset: 0; background: rgba(14,17,22,.5); backdrop-filter: blur(3px); animation: pm-fade .16s both; }
.confirm-modal .cm-sheet {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 26px; box-shadow: 0 30px 80px rgba(14,17,22,.3); animation: pm-rise .22s cubic-bezier(.2,.7,.2,1) both;
}
.confirm-modal .cm-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; margin-bottom: 14px; }
.confirm-modal .cm-icon.danger { background: #FCEEEC; color: #C0392B; }
.confirm-modal .cm-icon svg { width: 22px; height: 22px; }
.confirm-modal h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.confirm-modal p { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.confirm-modal .cm-hint { margin-top: 14px; }
.confirm-modal .cm-code {
  margin: 8px 0 14px; padding: 12px; text-align: center; user-select: all;
  font: 700 22px var(--mono); letter-spacing: 6px; color: var(--text);
  background: var(--bg); border: 1px dashed var(--line); border-radius: 10px;
}
.confirm-modal .cm-input { width: 100%; text-align: center; font: 600 16px var(--mono); letter-spacing: 3px; }
.confirm-modal .cm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.confirm-modal .btn[disabled] { opacity: .5; cursor: not-allowed; }
.confirm-modal .anim-save[disabled] { opacity: .5; }
.confirm-modal .anim-save.is-busy[disabled], .confirm-modal .anim-save.is-done[disabled] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .confirm-modal .cm-back, .confirm-modal .cm-sheet { animation: none; } }

@media (prefers-reduced-motion: reduce) { .ed-card, .err-box { animation: none; } }
@media (max-width: 680px) {
  .editor { padding: 0 16px 90px; }
  .editor-bar .et .sub { display: none; }
  .ed-grid { gap: 12px; }
}

/* ================= TEST BUILDER (variant C) ================= */
/* settings header: labelled groups of compact controls above the editor */
.settings-groups { margin-top: 18px; }
.setgroup { padding: 15px 0 17px; border-top: 1px solid var(--line); }
.setgroup:first-child { padding-top: 17px; }
.setgroup-h {
  font: 700 11px var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.setgroup-h .opt { font: 400 11px var(--sans); letter-spacing: 0; text-transform: none; color: var(--faint); }
.setgroup-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 30px; align-items: start; }

.setfld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.setfld > label { font: 600 12px var(--sans); color: var(--muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.setfld .opt { font-weight: 400; color: var(--faint); }
.setfld .input.narrow { max-width: 130px; }
.setfld-hint { font: 400 11px var(--sans); color: var(--faint); }
.setfld .unit { font: 500 12.5px var(--sans); color: var(--faint); }
/* segments in the settings header size to their content, never stretch */
.seg-fit { align-self: flex-start; width: -moz-fit-content; width: fit-content; max-width: 100%; }
.seg-fit .seg-opt span { padding: 8px 15px; }
/* toggles sit at input height so their row baseline lines up with segments */
.setfld > .toggle { min-height: 36px; }

.timer-mins { display: flex; align-items: center; gap: 7px; min-height: 36px; }

.threshold-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.threshold-points { font: 500 12px var(--mono); color: var(--faint); white-space: nowrap; }

/* two-pane exercise editor: card list (left) + detail panel (right) */
.twopane { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 20px; align-items: start; }
.ex-pane {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px;
}
.ex-pane-h { display: flex; align-items: center; gap: 10px; }
.ex-pane-h h2 { font-size: 15px; margin: 0; font-weight: 700; }
.ex-pane-h .count-pill { padding: 1px 8px; background: var(--bg); border-radius: 999px; font: 600 11px var(--mono); color: var(--muted); }
.ex-list { display: flex; flex-direction: column; gap: 10px; }
.ex-list:empty { display: none; }

/* compact "add" in the pane header */
.ex-add-top {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--muted); font: 600 12.5px var(--sans); cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.ex-add-top svg { width: 15px; height: 15px; }
.ex-add-top:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* bottom add: dashed "next slot" tile, not a raw plus */
.ex-add-tile {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; border: 1.5px dashed #D3D8DE; border-radius: 12px; background: transparent;
  color: var(--muted); font: 600 13px var(--sans); cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.ex-add-tile:hover { border-color: var(--ink); color: var(--text); background: var(--bg); }
.ex-add-tile-ic {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); color: var(--muted); flex: 0 0 auto;
  transition: background .14s, color .14s;
}
.ex-add-tile:hover .ex-add-tile-ic { background: var(--ink); color: #fff; }
.ex-add-tile-ic svg { width: 16px; height: 16px; }

/* exercise card in the list — self-contained (no .row): taller and legible so a
   long list stays scannable. Type tag + position number on top, the custom name
   as the heading, the question as a two-line hint below. */
.ex-card {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
  padding: 12px 13px; cursor: pointer;
  transition: margin .14s ease, opacity .14s ease, border-color .12s, box-shadow .12s, background .12s;
}
.ex-card:hover { border-color: #C7CDD4; background: var(--panel); }
.ex-card.is-selected { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(30,34,40,.07); background: var(--panel); }
.ex-card.is-dragging { opacity: .4; }
.ex-card.is-gap { }

.exc-top { display: flex; align-items: center; gap: 8px; }
.exc-top .ex-grip { display: inline-flex; color: #C2C7CE; flex: 0 0 auto; touch-action: none; }
.exc-top .ex-grip svg { width: 15px; height: 15px; pointer-events: none; }
.exc-num {
  min-width: 21px; height: 21px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  font: 700 11px var(--mono); color: var(--muted);
}
.is-selected .exc-num { background: var(--ink); border-color: var(--ink); color: #fff; }
.exc-type {
  font: 700 10px var(--sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); background: var(--panel); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 130px;
}
.exc-pts { margin-left: auto; font: 600 11.5px var(--mono); color: var(--muted); white-space: nowrap; }
.exc-name { font: 700 14px var(--sans); color: var(--text); line-height: 1.3; word-break: break-word; }
.exc-name.is-empty { font-weight: 500; font-style: italic; color: var(--faint); }
.exc-q {
  font: 400 12px var(--sans); color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ex-grip { cursor: grab; }
.ex-grip:active { cursor: grabbing; }

/* module-type tag beside the "Název úlohy" label in the right editor */
.ex-type-tag { margin-left: 8px; font: 600 11px var(--sans); color: var(--faint); }

/* labelled "Nápověda" button in the editor head */
.ex-help-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--muted); font: 600 12.5px var(--sans); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ex-help-btn:hover { border-color: var(--ink); color: var(--text); background: var(--bg); }
.ex-help-btn svg { flex: 0 0 auto; }

/* delete-exercise button in the editor head */
.ex-del-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--faint); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.ex-del-btn:hover { background: var(--ivt-soft); border-color: #E7B7B0; color: var(--ivt); }

/* combined options editor (choice modules): row = correct toggle + text + × */
.opts-editor { display: flex; flex-direction: column; gap: 8px; }
.opt-row { display: flex; align-items: center; gap: 8px; }
.opt-row .input { flex: 1 1 auto; min-width: 0; }
.opt-correct {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 11px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--faint); font: 600 12px var(--sans); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.opt-correct svg { opacity: .4; }
.opt-correct:hover { border-color: #A9C97E; color: #4E7A16; }
.opt-correct.is-on { background: var(--gt-soft); border-color: #A9C97E; color: #4E7A16; }
.opt-correct.is-on svg { opacity: 1; }
.opt-del {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--faint); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.opt-del:hover { background: var(--ivt-soft); border-color: #E7B7B0; color: var(--ivt); }
.opts-add {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px;
  padding: 8px 13px; border: 1.5px dashed #D3D8DE; border-radius: 9px; background: transparent;
  color: var(--muted); font: 600 12.5px var(--sans); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.opts-add:hover { border-color: var(--ink); color: var(--text); background: var(--bg); }

/* custom native drag image (see makeDragImage): a full-size clone of the
   dragged card, floating with a shadow. Wrapped in a transparent padded box so
   the shadow falls inside the drag-image snapshot bounds. */
.ex-drag-ghost-wrap { position: fixed; top: -1000px; left: -1000px; z-index: -1; padding: 20px; background: transparent; pointer-events: none; }
.ex-drag-ghost {
  box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--ink); border-radius: 12px;
  box-shadow: 0 16px 38px rgba(14,17,22,.32);
}
.ex-detail {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; min-height: 380px; display: flex; align-items: center; justify-content: center;
}
.ex-detail-empty { text-align: center; color: var(--faint); display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 280px; }
.ex-detail-ic svg { width: 28px; height: 28px; opacity: .7; }
.ex-detail-empty p { margin: 0; font-size: 13.5px; line-height: 1.5; }

@media (max-width: 900px) {
  .twopane { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .setgroup-body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
}
@media (max-width: 460px) {
  .setgroup-body { grid-template-columns: 1fr; }
}

/* module picker overlay: search + filter chips + card grid */
.picker-overlay { position: fixed; inset: 0; z-index: 65; display: grid; place-items: start center; padding: 8vh 20px 20px; }
.picker-overlay[hidden] { display: none; }
.pal-back { position: absolute; inset: 0; background: rgba(14,17,22,.5); backdrop-filter: blur(3px); animation: pm-fade .16s both; }
.pal-sheet {
  position: relative; z-index: 1; width: 100%; max-width: 1000px; max-height: 86vh;
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(14,17,22,.3); animation: pm-rise .22s cubic-bezier(.2,.7,.2,1) both;
}
.pal-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.pal-head-ic { color: var(--faint); display: inline-flex; }
.pal-head-ic svg { width: 17px; height: 17px; }
.pal-search { flex: 1 1 auto; border: 0; outline: none; font: 400 15px var(--sans); background: transparent; color: var(--text); }
.pal-x { border: 0; background: var(--bg); color: var(--muted); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.pal-x:hover { background: var(--line); color: var(--text); }
.pal-x svg { width: 15px; height: 15px; }
.pal-filters { display: flex; gap: 8px; padding: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pal-filters:empty { display: none; }
/* up to 4 exercise-type cards per row, then wrap; big thumbs so previews read */
.pal-grid { padding: 18px 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .pal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .pal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* mobile: single-column list, cards go horizontal (thumb left, text right) */
@media (max-width: 520px) {
  .picker-overlay { padding: 4vh 12px 12px; }
  .pal-grid { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .pal-card { flex-direction: row; align-items: stretch; }
  .pal-thumb { height: auto; width: 104px; flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .pal-cb { flex: 1 1 auto; justify-content: center; }
}
.pal-fc { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font: 700 11.5px var(--sans); color: var(--muted); background: var(--panel); cursor: pointer; }
.pal-fc:hover { color: var(--text); }
.pal-fc.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pal-card {
  display: flex; flex-direction: column; text-align: left; gap: 0; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel); overflow: hidden;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.pal-card:hover { border-color: var(--ink); box-shadow: 0 10px 26px rgba(14,17,22,.12); transform: translateY(-1px); }
.pal-thumb { height: 132px; display: grid; place-items: center; background: var(--bg); border-bottom: 1px solid var(--line); }
.pal-cb { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 8px; }
.pal-nm { font: 800 14px var(--sans); color: var(--text); }
.pal-pr { display: flex; gap: 5px; flex-wrap: wrap; }
.pal-pr .t { background: var(--bg); color: var(--muted); border-radius: 5px; padding: 2px 7px; font: 700 10.5px var(--sans); }
/* per-category thumbnails (no icon runtime; drawn with CSS) — scaled up so the
   preview is clearly legible in the larger overlay */
.pal-th { display: inline-flex; }
/* single choice → option rows with a radio dot (first one selected) */
.pal-th.th-radio { flex-direction: column; gap: 9px; }
.pal-th.th-radio i { display: flex; align-items: center; gap: 9px; }
.pal-th.th-radio i b { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid var(--line); box-sizing: border-box; flex: 0 0 auto; }
.pal-th.th-radio i.on b { border-color: var(--gt, #5B8C1E); border-width: 4.5px; }
.pal-th.th-radio i u { display: block; width: 50px; height: 9px; border-radius: 3px; background: var(--line); }
.pal-th.th-radio i.on u { background: var(--gt, #5B8C1E); }
/* multi choice → option rows with checkboxes (several ticked) */
.pal-th.th-check { flex-direction: column; gap: 9px; }
.pal-th.th-check i { display: flex; align-items: center; gap: 9px; }
.pal-th.th-check i b { width: 15px; height: 15px; border-radius: 4px; border: 1.6px solid var(--line); box-sizing: border-box; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.pal-th.th-check i.on b { background: var(--gt, #5B8C1E); border-color: var(--gt, #5B8C1E); }
.pal-th.th-check i b svg { width: 11px; height: 11px; }
.pal-th.th-check i u { display: block; width: 50px; height: 9px; border-radius: 3px; background: var(--line); }
.pal-th.th-check i.on u { background: var(--gt, #5B8C1E); }
.pal-th.th-bool { gap: 12px; align-items: center; font: 800 22px var(--sans); }
.pal-th.th-bool .y { color: #2f8a4c; } .pal-th.th-bool .n { color: #c0392b; }
.pal-th.th-text u { display: flex; align-items: center; gap: 5px; width: 84px; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.pal-th.th-text b { display: block; width: 36px; height: 6px; border-radius: 3px; background: #C6CCD4; }
.pal-th.th-text s { display: block; width: 2px; height: 18px; border-radius: 1px; background: var(--ink); }
.pal-th.th-generic { width: 72px; height: 52px; border-radius: 9px; border: 1px dashed var(--line); }
@media (prefers-reduced-motion: reduce) { .pal-back, .pal-sheet, .pal-card { animation: none; transition: none; } }

/* per-exercise help drawer: slides in from the right */
.help-drawer { position: fixed; inset: 0; z-index: 66; }
.help-drawer[hidden] { display: none; }
.hd-back { position: absolute; inset: 0; background: rgba(14,17,22,.4); animation: pm-fade .16s both; }
.hd-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -20px 0 60px rgba(14,17,22,.18);
  display: flex; flex-direction: column; animation: hd-slide .22s cubic-bezier(.2,.7,.2,1) both;
}
.hd-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.hd-head h3 { margin: 0; font-size: 15px; flex: 1 1 auto; }
.hd-x { border: 0; background: var(--bg); color: var(--muted); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.hd-x:hover { background: var(--line); color: var(--text); }
.hd-x svg { width: 15px; height: 15px; }
.hd-body { padding: 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.hd-body .hd-summary { color: var(--text); font-weight: 600; margin: 0 0 14px; }
.hd-body .hd-sec { margin: 16px 0 5px; font: 800 10.5px var(--sans); letter-spacing: .4px; text-transform: uppercase; color: var(--faint); }
.hd-body p { margin: 0 0 6px; }
.hd-body .hd-img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; }
.ex-help { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 800 13px var(--sans); cursor: pointer; }
.ex-help:hover { border-color: var(--ink); color: var(--text); }
.ex-media-drop { display: block; border: 1.5px dashed var(--line); border-radius: 9px; padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; cursor: pointer; transition: border-color .14s, background .14s; }
.ex-media-drop:hover, .ex-media-drop.is-over { border-color: var(--ink); background: var(--bg); color: var(--text); }
.ex-media-prev { display: block; max-width: 100%; max-height: 220px; border: 1px solid var(--line); border-radius: 8px; }
/* attached media preview: framed thumbnail with an overlay remove button */
.ex-media-slot { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ex-media-view { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); line-height: 0; }
.ex-media-view .ex-media-prev { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; }
.ex-media-remove {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: rgba(14,17,22,.6); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background .12s;
}
.ex-media-remove:hover { background: #C0392B; }
.ex-media-remove svg { width: 15px; height: 15px; }
.ex-media-kind { font: 500 11px var(--sans); color: var(--faint); }
@keyframes hd-slide { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd-back, .hd-panel { animation: none; } }

/* ================= REUSABLE PICKER ================= */
.picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.picker-chips { display: contents; }
.pick-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font: 500 13px var(--sans); animation: wl-rise .2s both;
}
.pick-chip .lbl { color: var(--text); }
.pick-chip .chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--bg); color: var(--faint); cursor: pointer; }
.pick-chip .chip-x:hover { background: var(--ivt-soft); color: var(--ivt); }
.pick-chip .chip-x svg { width: 11px; height: 11px; }
.picker-add {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  color: var(--text); font: 600 13px var(--sans); cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.picker-add:hover { border-color: #C9D0D8; background: var(--bg); box-shadow: 0 2px 8px rgba(20,24,30,.05); }
.picker-add svg { width: 16px; height: 16px; color: var(--muted); }

.pick-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: 8vh 20px 20px; }
.pick-overlay[hidden] { display: none; }
.pick-back { position: absolute; inset: 0; background: rgba(14,17,22,.5); backdrop-filter: blur(3px); animation: pm-fade .16s both; }
.pick-sheet {
  position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 80vh;
  display: flex; flex-direction: column; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(14,17,22,.3); animation: pm-rise .22s cubic-bezier(.2,.7,.2,1) both;
}
.pick-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.pick-head .pi { color: var(--faint); display: inline-flex; }
.pick-head .pi svg { width: 17px; height: 17px; }
.pick-search { flex: 1 1 auto; border: 0; outline: none; font: 400 15px var(--sans); background: transparent; color: var(--text); }
.pick-x { border: 0; background: var(--bg); color: var(--muted); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; }
.pick-x:hover { background: var(--line); color: var(--text); }
.pick-x svg { width: 15px; height: 15px; }
.pick-title { padding: 10px 16px 4px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pick-list { overflow-y: auto; padding: 4px; flex: 1 1 auto; }
.pick-loading { padding: 24px; text-align: center; color: var(--faint); font-size: 13px; }
.pick-opt { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.pick-opt:hover { background: var(--bg); }
.pick-box { width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 6px; display: grid; place-items: center; color: #fff; flex: 0 0 auto; }
.pick-opt.on .pick-box { background: var(--ink); border-color: var(--ink); }
.pick-box svg { width: 13px; height: 13px; }
.pick-lbl { font: 500 14px var(--sans); color: var(--text); display: flex; flex-direction: column; }
.pick-sub { font: 400 11px var(--mono); color: var(--faint); }
.pick-create { padding: 6px; border-top: 1px solid var(--line); }
.pick-create-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--bg); color: var(--ink); font: 600 13px var(--sans); cursor: pointer; }
.pick-create-btn:hover { background: var(--line); }
.pick-create-btn svg { width: 15px; height: 15px; }
.pick-new { display: flex; align-items: center; gap: 8px; }
.pick-new-input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--ink); border-radius: 8px; font: 400 14px var(--sans); color: var(--text); outline: none; box-shadow: 0 0 0 3px rgba(30,34,40,.07); }
.pick-new-go, .pick-new-cancel { width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.pick-new-go { background: var(--ink); color: #fff; }
.pick-new-go:hover { background: #2b3138; }
.pick-new-go svg { width: 16px; height: 16px; }
.pick-new-cancel { background: var(--bg); color: var(--muted); }
.pick-new-cancel:hover { background: var(--line); color: var(--text); }
.pick-new-cancel svg { width: 15px; height: 15px; }
.pick-err { color: var(--ivt); font-size: 12.5px; padding: 8px 12px; display: block; }
.pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.pick-count { font: 500 12.5px var(--mono); color: var(--muted); }
.pick-foot .btn { padding: 9px 18px; }
@media (prefers-reduced-motion: reduce) { .pick-back, .pick-sheet, .pick-chip { animation: none; } }

/* ================= RESPONSIVE ================= */
@media (max-width: 1140px) {
  .dash { grid-template-columns: 1fr; }
  .feed { min-height: 0; max-height: 600px; }
}
@media (max-width: 1024px) {
  .content { padding: 24px 22px 56px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* auth stacks below the split breakpoint */
@media (max-width: 900px) {
  .auth { flex-direction: column; }
  .auth-brand {
    flex: 0 0 auto; justify-content: flex-start; padding: 40px 32px 28px;
  }
  .auth-brand .lede { max-width: none; }
  .auth-brand h1 { font-size: 32px; }
  .deco { display: none; }
  .auth-form {
    flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--line);
    align-items: stretch; padding: 34px 32px 108px;
  }
  .auth-form .box { max-width: none; }
  .brand-marquee {
    position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
    background: var(--panel); border-top: 1px solid var(--line);
    padding: 13px 0;
  }
}

/* app shell: header wraps, sidebar becomes a horizontal scroller under it */
@media (max-width: 860px) {
  .app-row { flex-direction: column; }
  .sidebar {
    flex: 0 0 auto; width: 100%;
    flex-direction: row; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding: 10px 14px;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .nav-group { flex-direction: row; align-items: center; gap: 4px; }
  .nav-group + .nav-group { margin-top: 0; margin-left: 8px; }
  .nav-group > .label { display: none; }
  .nav-item { white-space: nowrap; }
  .nav-item.active { border-left: 0; padding-left: 12px; border-bottom: 2px solid var(--ink); }
  .nav-group.library, .tree { display: none; }
  .appbar { flex-wrap: wrap; gap: 12px; padding: 12px 18px; }
  .appbar .search { order: 3; flex-basis: 100%; max-width: none; }
  .appbar .userchip .email { display: none; }
}

@media (max-width: 560px) {
  .auth-brand h1 { font-size: 27px; }
  .auth-brand .wordmark .name { font-size: 22px; }
  .content { padding: 18px 14px 48px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid.grid-2 { grid-template-columns: 1fr; }
  .page-head h1, .page-head.greet h1 { font-size: 22px; }
}

@media (max-width: 400px) {
  .grid { grid-template-columns: 1fr; }
}

/* ================= TEST RUNNER ================= */
.run-wrap { max-width: 860px; margin: 0 auto; padding: 24px 20px 60px; }
.run-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
  padding: 14px 4px; margin-bottom: 8px; background: var(--bg); border-bottom: 1px solid var(--line); }
.run-title { font: 700 17px var(--sans); color: var(--text); }
.run-preview-chip { font: 700 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: #4E7A16; background: var(--gt-soft, #EAF3E0); border: 1px solid #A9C97E; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.rd-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rd-actions .btn { text-decoration: none; }
.run-timer { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  font: 700 14px var(--mono); color: var(--text); }
.run-timer.is-warn { color: #C25A00; border-color: #F0C089; background: #FFF7EC; }
.run-timer.is-crit { color: #C0392B; border-color: #E7B7B0; background: #FCEEEC; }
.run-timer.is-out { color: #C0392B; border-color: #E7B7B0; background: #FCEEEC; }
/* prominent countdown notice next to the timer */
.run-timer-warn { font: 700 12px var(--sans); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.run-timer-warn.is-warn { color: #C25A00; background: #FFF3E0; border: 1px solid #F0C089; }
.run-timer-warn.is-crit { color: #fff; background: #C0392B; border: 1px solid #C0392B; animation: tw-pulse 1s ease-in-out infinite; }
@keyframes tw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .run-timer-warn.is-crit { animation: none; } }

.run-q { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 28px 30px; margin: 16px 0; min-height: 220px;
  display: flex; flex-direction: column; }
/* heading + question form one text block, clearly set apart from media/options */
.run-q-head { margin-bottom: 20px; }
.run-q-name { font: 800 18px var(--sans); color: var(--text); line-height: 1.3; margin: 0 0 9px; word-break: break-word; }
.run-q-name + .run-q-title { position: relative; padding-top: 11px; }
.run-q-name + .run-q-title::before { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--line); border-radius: 2px; }
.run-q-title { font: 500 15.5px var(--sans); color: var(--text); margin: 0; line-height: 1.6; white-space: pre-wrap; }
/* media: a centered, framed figure that hugs the image — never stuck to the left */
.run-q-media { width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 4px auto 22px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; line-height: 0;
  box-shadow: 0 4px 16px rgba(14,17,22,.06); }
.run-q-media-el { display: block; max-width: 100%; max-height: 380px; width: auto; height: auto; }
.run-q-body { display: flex; flex-direction: column; gap: 8px; }
.run-opt { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: 9px; cursor: pointer; font: 500 14px var(--sans); color: var(--text); transition: border-color .12s, background .12s; }
.run-opt:hover { border-color: var(--muted); }
.run-opt:has(input:checked) { border-color: var(--ink); background: var(--bg); box-shadow: 0 0 0 2px rgba(30,34,40,.06); }
.run-opt input { flex: 0 0 auto; width: 17px; height: 17px; }
.run-q-body > .input { max-width: 340px; }
.run-foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 4px; }
.run-foot .btn.save { margin-left: auto; }

.run-prestart { max-width: 460px; margin: 12vh auto 0; text-align: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 34px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 20px 60px rgba(14,17,22,.1); }
.run-prestart h1 { margin: 0; font-size: 20px; }
.run-prestart p { margin: 0; color: var(--muted); line-height: 1.55; }
.run-prestart .rp-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px;
  background: #FFF3E0; color: #C25A00; }
.run-prestart .rp-ic.ok { background: var(--gt-soft, #EAF3E0); color: #4E7A16; }
.run-prestart .rp-ic.no { background: #FCEEEC; color: #C0392B; }
.rp-warn { font-size: 12.5px; color: #7A5A10; background: #FFFAF0; border: 1px solid #F2D999;
  border-radius: 9px; padding: 11px 13px; line-height: 1.5; }
.run-prestart .btn { text-decoration: none; }
/* pre-start facts (count / limit / attempts) + pass scale */
.rp-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rp-fact { font: 500 12.5px var(--sans); color: var(--muted); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.rp-fact b { color: var(--text); font-weight: 700; }
.rp-scale { font-size: 13.5px; }
.rp-scale b { color: var(--text); }
.rd-score { font: 800 46px var(--sans); }
.rd-score.ok, .rd-pass { color: #4E7A16; } .rd-score.no, .rd-fail { color: #C0392B; }
@media (max-width: 560px) { .run-top { flex-wrap: wrap; } }
/* stepper progress */
.run-progress { display: inline-flex; align-items: center; gap: 12px; }
.run-progress .rp-count { font: 700 13px var(--mono); color: var(--text); letter-spacing: .02em; }
.run-progress .rp-count::after { content: ""; }
.run-progress .rp-bar { position: relative; display: block; width: 200px; height: 9px; border-radius: 999px;
  background: var(--line); overflow: hidden; box-shadow: inset 0 1px 2px rgba(14,17,22,.08); }
.run-progress .rp-bar > span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #3A4149, var(--ink)); transition: width .3s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 560px) { .run-progress .rp-bar { width: 120px; } }

/* bottom step-rail: connected question nodes, clickable to jump (desktop). On
   mobile the simple header bar is used instead. */
.step-rail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 2px; margin: 36px auto 0; max-width: 700px; }
.sr-item { margin: 0; display: inline-flex; align-items: center; }
.sr-item:not(:last-child)::after { content: ""; width: 22px; height: 2px; background: var(--line); border-radius: 2px; }
.sr-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 2px solid var(--line); background: var(--panel); color: var(--muted); font: 700 13px var(--mono);
  cursor: default; transition: border-color .14s, background .14s, color .14s, transform .14s, box-shadow .14s; }
button.sr-dot { cursor: pointer; }
button.sr-dot:hover { border-color: var(--ink); color: var(--text); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(14,17,22,.16); }
.sr-dot.is-current { border-color: var(--ink); background: var(--ink); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 5px rgba(30,34,40,.09); }
.sr-dot.is-done { border-color: #A9C97E; background: var(--gt-soft, #EAF3E0); color: #4E7A16; }
.sr-dot.is-done svg { width: 15px; height: 15px; }
.sr-dot.is-locked { opacity: .5; color: var(--faint); }
.sr-dot.is-locked.is-done { opacity: .75; }
.step-rail-label { text-align: center; font: 500 12px var(--sans); color: var(--faint); margin: 12px 0 0; }
@media (min-width: 721px) { .run-top .run-progress { display: none; } }
@media (max-width: 720px) { .step-rail, .step-rail-label { display: none; } }

/* end-of-stepper review slide */
.run-review { max-width: 760px; margin: 3vh auto 0; }
.run-review h1 { font-size: 22px; margin: 0 0 6px; }
.rv-sum { color: var(--muted); margin: 0 0 18px; font-size: 14px; }
.rv-sum b { color: var(--text); }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.rv-cellform { margin: 0; display: flex; }
.rv-cell { width: 100%; display: flex; flex-direction: column; gap: 9px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: 13px 14px; font: inherit;
  transition: border-color .12s, box-shadow .12s, transform .12s; }
button.rv-cell:hover { border-color: var(--ink); box-shadow: 0 8px 22px rgba(14,17,22,.1); transform: translateY(-1px); }
.rv-cell.is-static { cursor: default; }
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rv-no { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px;
  background: var(--bg); font: 700 12px var(--mono); color: var(--muted); }
.rv-state { font: 700 10px var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.rv-cell.is-done .rv-no { background: var(--gt-soft, #EAF3E0); color: #4E7A16; }
.rv-cell.is-done .rv-state { color: #4E7A16; background: var(--gt-soft, #EAF3E0); }
.rv-cell.is-empty .rv-state { color: #C25A00; background: #FFF3E0; }
.rv-title { font: 700 13.5px var(--sans); color: var(--text); line-height: 1.35; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rv-hint { color: var(--faint); font-size: 12.5px; margin: 14px 0 0; }
.rv-finish { margin-top: 22px; }
.rv-finish .btn { text-decoration: none; }

/* ===== runner motion: entrance + interaction polish ===== */
/* NOTE: the stepper renders its question with JS, so #runExercises is briefly
   empty on load. We deliberately do NOT use cross-document @view-transition here
   — it snapshots the new page before JS fills it, cross-fading into a blank card.
   Instead each element animates itself in the moment JS creates it, so there is
   no dead gap. Keep durations short and delays tiny so the card appears at once. */

@keyframes q-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes opt-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes sel-pop { 0% { transform: scale(1); } 45% { transform: scale(1.015); } 100% { transform: scale(1); } }
@keyframes dot-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* question card + heading appear immediately (no delay), gently */
.run-q { animation: q-in .24s cubic-bezier(.2,.7,.2,1) both; }
.run-q:nth-of-type(2) { animation-delay: .04s; }
.run-q:nth-of-type(3) { animation-delay: .08s; }
.run-q:nth-of-type(n+4) { animation-delay: .1s; }

/* choices fade in with a small, capped stagger */
.run-q-body .run-opt { animation: opt-in .24s cubic-bezier(.2,.7,.2,1) both; transition: border-color .15s, background .15s, box-shadow .15s, transform .13s; }
.run-q-body .run-opt:nth-child(2) { animation-delay: .04s; }
.run-q-body .run-opt:nth-child(3) { animation-delay: .08s; }
.run-q-body .run-opt:nth-child(4) { animation-delay: .12s; }
.run-q-body .run-opt:nth-child(n+5) { animation-delay: .15s; }
.run-opt:hover { transform: translateX(3px); }
.run-opt:has(input:checked) { animation: sel-pop .28s ease-out; }
.run-q-body > .input { transition: border-color .15s, box-shadow .15s; }

/* buttons feel tactile on the runner pages (scoped, so admin stays calm) */
.run-wrap .btn { transition: background .16s, border-color .16s, color .16s, transform .12s, box-shadow .16s; }
.run-wrap .btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(30,34,40,.16); }
.run-wrap .btn:active { transform: translateY(0); box-shadow: none; }

/* step-rail nodes pop in */
.step-rail .sr-item { animation: dot-in .3s cubic-bezier(.2,.7,.2,1) both; }
.step-rail .sr-item:nth-child(2) { animation-delay: .04s; }
.step-rail .sr-item:nth-child(3) { animation-delay: .08s; }
.step-rail .sr-item:nth-child(4) { animation-delay: .12s; }
.step-rail .sr-item:nth-child(n+5) { animation-delay: .16s; }

/* review cells + prestart card entrances */
.rv-cell { animation: opt-in .34s cubic-bezier(.2,.7,.2,1) both; }
.rv-grid > :nth-child(2) .rv-cell { animation-delay: .05s; }
.rv-grid > :nth-child(3) .rv-cell { animation-delay: .1s; }
.rv-grid > :nth-child(n+4) .rv-cell { animation-delay: .14s; }
.run-prestart { animation: q-in .4s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  .run-q, .run-q-name, .run-q-body .run-opt, .step-rail .sr-item, .rv-cell, .run-prestart { animation: none; }
  .run-wrap .btn:hover, .run-opt:hover { transform: none; box-shadow: none; }
  .run-opt:has(input:checked) { animation: none; }
}

/* ============================ MEDIA-CASE READER (case.html) ============================ */
.cr-crumb { max-width: 1180px; margin: 0 auto; padding: 16px 24px 0; display: flex; align-items: center; gap: 8px; font: 500 12.5px var(--mono); color: var(--faint); }
.cr-crumb a { color: var(--muted); } .cr-crumb a:hover { color: var(--text); }
.cr-crumb .sep { opacity: .5; } .cr-crumb .cur { color: var(--text); }
.cr-crumb .back { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; color: var(--muted); }
.cr-crumb .back svg { width: 15px; height: 15px; }
.cr-wrap { max-width: 1180px; margin: 0 auto; padding: 14px 24px 60px; }

/* hero */
.cr-hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 22px; padding: 22px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.cr-htext { flex: 1; min-width: 280px; }
.cr-toprow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cr-ctag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 5px; font: 600 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.cr-ctag.ivt { background: var(--ivt-soft); color: var(--ivt); }
.cr-ctag.gt { background: var(--gt-soft); color: #6DA524; }
.cr-ctag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cr-tax { font: 500 12px var(--mono); color: var(--faint); }
.cr-hero h1 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.cr-lede { margin: 9px 0 0; max-width: 640px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.cr-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.cr-mchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 20px; background: #fff; font: 600 11.5px var(--mono); color: var(--muted); }
.cr-mchip svg { width: 14px; height: 14px; color: var(--faint); } .cr-mchip b { color: var(--text); font-weight: 700; }
.cr-progwrap { flex: 0 0 200px; align-self: center; }
.cr-plabel { display: flex; justify-content: space-between; font: 600 11px var(--mono); color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.cr-plabel b { color: var(--text); }
.cr-ptrack { height: 7px; border-radius: 5px; background: var(--line); overflow: hidden; }
.cr-ptrack i { display: block; height: 100%; background: var(--ink); border-radius: 5px; }
@media (max-width: 640px) { .cr-progwrap { flex-basis: 100%; } }

/* reader grid */
.cr-reader { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 960px) { .cr-reader { grid-template-columns: 1fr; } }

/* stage shell */
.cr-stage { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; min-height: 420px; }
.cr-empty { padding: 70px 24px; text-align: center; color: var(--muted); }
.cr-empty svg { width: 34px; height: 34px; color: var(--faint); }
.cr-empty h3 { margin: 12px 0 4px; font-size: 16px; color: var(--text); }
.cr-well { position: relative; }
.cr-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--dark); font-size: 14px; z-index: 3; }
.cr-poster { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; text-align: center; color: #fff; padding: 24px; background: radial-gradient(120% 120% at 50% 0%, #181d24, var(--dark) 70%); }
.cr-poster h2 { font-size: 20px; margin: 0; font-weight: 600; }
.cr-poster p { max-width: 420px; font-size: 13.5px; line-height: 1.5; color: #9AA4AE; margin: 0; }
.cr-shield { color: #fff; opacity: .9; } .cr-shield svg { width: 30px; height: 30px; }
.cr-play { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; padding: 12px 22px; border-radius: var(--r-sm); font: 600 15px var(--sans); color: #fff; background: var(--ink); }
.cr-play:hover { background: #2b3138; } .cr-play svg { width: 17px; height: 17px; }

/* video */
.cr-video { aspect-ratio: 16/9; background: var(--dark); display: grid; place-items: center; overflow: hidden; }
.cr-video video { width: 100%; height: 100%; display: block; }
/* Video watermark overlay — same visual language as the baked image/PDF marks:
   a sparse diagonal identity (white text + dark shadow so it reads on any frame,
   no colour sampling possible over live video) plus a bottom-right chip. */
.cr-wm { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.cr-wm .wm-mark { position: absolute; white-space: nowrap; color: #fff;
  font: 600 13px var(--mono); letter-spacing: .02em;
  transform: translate(-50%,-50%) rotate(-30deg);
  text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .6s ease; } /* roams in for 5 s every 20 s (JS) */
.cr-wm .wm-chip { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center;
  background: rgba(12,14,18,.6); color: #fff; font: 600 12px var(--mono); letter-spacing: .02em;
  padding: 5px 11px; border-radius: 20px; }

/* custom video fullscreen (fullscreens the CONTAINER so the watermark overlay
   stays visible — native fullscreen would show only the bare <video>). */
.cr-vfull { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px;
  display: grid; place-items: center; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(14,16,21,.55); color: #fff; opacity: 0; transition: opacity .15s; }
.cr-video:hover .cr-vfull, .cr-video:fullscreen .cr-vfull { opacity: 1; }
.cr-vfull svg { width: 17px; height: 17px; }
.cr-video:fullscreen { display: flex; align-items: center; justify-content: center; background: #000; }
.cr-video:fullscreen video { width: 100%; height: 100%; object-fit: contain; }

/* Canvas watermark player (protected video only): the <video> keeps decoding
   underneath (MSE-fed) and the visible <canvas> composites each frame + the
   per-user watermark into the pixels, so the mark can't be removed by deleting a
   DOM node. The video must NOT be display:none (it would stop decoding). */
.cr-video-cv #crV { position: absolute; inset: 0; z-index: 0; }
.cr-video canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.cr-video-cv:fullscreen canvas { width: 100%; height: 100%; object-fit: contain; }

/* custom control bar (drives the hidden <video>) */
.cr-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: linear-gradient(to top, rgba(6,8,11,.82), rgba(6,8,11,0));
  opacity: 0; transition: opacity .18s; }
#crVideo.cc-active .cr-controls { opacity: 1; }
.cr-video-cv.cc-live:not(.cc-active) { cursor: none; } /* hide cursor when the bar auto-hides */
.cc-btn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0;
  border-radius: 8px; cursor: pointer; background: transparent; color: #fff; }
.cc-btn:hover { background: rgba(255,255,255,.14); }
.cc-btn svg { width: 18px; height: 18px; }
.cc-seek { position: relative; flex: 1 1 auto; height: 18px; display: flex; align-items: center; }
.cc-buf { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 4px;
  width: 0; background: rgba(255,255,255,.26); border-radius: 3px; pointer-events: none; }
.cc-seek input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  border-radius: 3px; background: rgba(255,255,255,.2);
  background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 0% 100%;
  cursor: pointer; position: relative; z-index: 1; }
.cc-seek input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px;
  border-radius: 50%; background: #fff; cursor: pointer; }
.cc-seek input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.cc-time { flex: none; color: #fff; font: 500 12px var(--mono); white-space: nowrap; }
@media (max-width: 560px) { .cc-time { display: none; } .cr-controls { gap: 6px; padding: 7px 8px; } }

/* image */
.cr-image { min-height: 60vh; background: linear-gradient(160deg, #F3F5F8, #E6EAEE); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cr-image .cr-img { max-width: 100%; max-height: 78vh; display: block; }

/* pdf */
.cr-pdf { display: flex; flex-direction: column; height: min(78vh, 760px); }
.cr-pdf-tools { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.cr-pdf-tools button { border: 1px solid #DDE1E6; background: #fff; color: var(--text); height: 30px; min-width: 30px; padding: 0 8px; cursor: pointer; font-size: 15px; line-height: 1; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cr-pdf-tools button:hover { background: var(--bg); }
.cr-pdf-tools .lvl { font: 12px var(--mono); color: var(--muted); min-width: 44px; text-align: center; }
.cr-pdf-tools .cr-full { margin-left: auto; font: 600 12.5px var(--sans); padding: 0 12px; } .cr-pdf-tools .cr-full svg { width: 14px; height: 14px; }
.cr-pdf-reader { flex: 1 1 auto; overflow: auto; background: #3A3F45; padding: 22px; cursor: grab; }
.cr-pdf-reader:active { cursor: grabbing; }
/* min-width:min-content keeps the column at least as wide as the widest page, so
   a zoomed page overflows and BOTH sides stay reachable by scroll/drag (centering
   alone would hide the left edge). No max-width on the canvas → true aspect ratio. */
.cr-pdf-doc { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: min-content; }
.cr-pdf-doc canvas.page { background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.35); max-width: none; }
/* fullscreen overlay: same doc, still scroll + zoom, no page chrome */
.cr-pdf.cr-pdf-fs { position: fixed; inset: 0; z-index: 60; height: 100vh; border-radius: 0; box-shadow: none; background: #23272c; }
.cr-pdf.cr-pdf-fs .cr-full::after { content: " · zavřít (Esc)"; }

/* test intro */
.cr-test { padding: 40px 34px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cr-tico { width: 66px; height: 66px; border-radius: 16px; background: color-mix(in srgb, var(--t-test) 12%, #fff); display: grid; place-items: center; margin-bottom: 18px; }
.cr-tico svg { width: 30px; height: 30px; color: var(--t-test); }
.cr-tkicker { font: 600 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--t-test); margin-bottom: 8px; }
.cr-test h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.cr-tdesc { margin: 11px 0 0; max-width: 460px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.cr-tstats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 20px; }
.cr-tstat { min-width: 92px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.cr-tstat .k { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.cr-tstat .v { font-size: 20px; font-weight: 700; margin-top: 4px; } .cr-tstat .v small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cr-anote { margin: 0 0 20px; font: 500 12.5px var(--mono); color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.cr-anote svg { width: 14px; height: 14px; color: var(--faint); } .cr-anote.ok { color: var(--gt); } .cr-anote.ok svg { color: var(--gt); }
/* test locked-behind-media gate: a calm "uzamčeno" panel with a progress bar */
.cr-lock { display: flex; gap: 13px; align-items: flex-start; text-align: left; margin: 2px auto 16px; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px; width: 100%; max-width: 440px; }
.cr-lock-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.cr-lock-ic svg { width: 16px; height: 16px; }
.cr-lock-body { flex: 1; min-width: 0; }
.cr-lock-t { font: 700 13.5px var(--sans); color: var(--ink); margin-bottom: 3px; }
.cr-lock-body p { margin: 0 0 11px; font: 500 12.5px var(--sans); color: var(--muted); line-height: 1.5; }
.cr-lock-prog { display: flex; align-items: center; gap: 11px; }
.cr-lock-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cr-lock-bar span { display: block; height: 100%; background: var(--ink); border-radius: 4px; transition: width .35s ease; }
.cr-lock-count { font: 600 11px var(--mono); color: var(--muted); white-space: nowrap; }
.cr-start { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; border-radius: var(--r-sm); background: var(--t-test); color: #fff; font: 600 15px var(--sans); }
.cr-start:hover { background: #6a49ad; } .cr-start svg { width: 17px; height: 17px; }
.cr-start.disabled { background: var(--bg); border: 1px solid var(--line); color: var(--faint); cursor: not-allowed; pointer-events: none; }
.cr-start.disabled svg { width: 15px; height: 15px; }

/* stage caption under the media */
.cr-cap { padding: 18px 22px 20px; border-top: 1px solid var(--line); }
.cr-cap .kicker { display: flex; align-items: center; gap: 8px; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.cr-cap .kicker svg { width: 14px; height: 14px; }
.cr-cap h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }
.cr-cap p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } .cr-cap p.muted { color: var(--faint); font-style: italic; }
.cr-cap .acts { margin-top: 14px; }
.cr-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); font: 600 13px var(--sans); }
.cr-ghost:hover { background: var(--bg); color: var(--text); } .cr-ghost svg { width: 15px; height: 15px; }

/* rail (playlist) */
.cr-rail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; position: sticky; top: 16px; }
.cr-rail-head { display: flex; align-items: center; gap: 9px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.cr-rail-head svg { width: 16px; height: 16px; color: var(--muted); }
.cr-rail-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.cr-rail-head .cnt { margin-left: auto; font: 600 11px var(--mono); color: var(--faint); }
.cr-item { display: flex; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); position: relative; }
.cr-item:last-child { border-bottom: 0; } .cr-item:hover { background: var(--bg); }
.cr-item.active { background: color-mix(in srgb, var(--ink) 4%, #fff); }
.cr-item.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink); }
.cr-thumb { flex: 0 0 76px; height: 50px; border-radius: 6px; position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #F3F5F8, #E6EAEE); }
.cr-thumb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 90% at 78% 20%, transparent 40%, rgba(20,24,30,.05)); }
.cr-thumb .glyph { position: absolute; right: -14px; bottom: -18px; color: #fff; opacity: .5; z-index: 0; }
.cr-thumb .glyph svg { width: 62px; height: 62px; }
.cr-thumb .ic { position: relative; z-index: 1; } .cr-thumb .ic svg { width: 22px; height: 22px; }
.cr-thumb.video .ic svg { color: var(--t-video); } .cr-thumb.image .ic svg { color: var(--t-image); }
.cr-thumb.pdf .ic svg { color: var(--t-pdf); } .cr-thumb.test .ic svg { color: var(--t-test); }
.cr-thumb .num { position: absolute; left: 5px; top: 4px; z-index: 2; font: 700 10px var(--mono); color: var(--muted); background: rgba(255,255,255,.82); border-radius: 4px; padding: 1px 5px; }
.cr-rmeta { flex: 1; min-width: 0; align-self: center; }
.cr-rmeta .rt { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.cr-rmeta .rx { margin-top: 3px; font: 500 11px var(--mono); color: var(--faint); }
.cr-rmeta .rx .type { text-transform: uppercase; letter-spacing: .03em; }
.cr-status { flex: 0 0 auto; align-self: center; display: grid; place-items: center; }
.cr-status svg { width: 20px; height: 20px; } .cr-status.done { color: var(--gt); } .cr-status.prog { color: var(--faint); }
.cr-status .newpill { font: 700 8.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; background: var(--ink); color: #fff; padding: 2px 6px; border-radius: 4px; }
/* live "completed" pop when an item finishes without a page reload */
@keyframes cc-done-pop { 0% { transform: scale(.2); opacity: .2; } 55% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
.cr-status.cc-done-anim { animation: cc-done-pop .45s cubic-bezier(.2,.8,.2,1.4) both; }

/* disclaimer */
.cr-disc { display: flex; gap: 13px; align-items: flex-start; margin-top: 26px; padding: 15px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--muted); }
.cr-disc .di { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--bg); display: grid; place-items: center; color: var(--faint); }
.cr-disc .di svg { width: 18px; height: 18px; }
.cr-disc .dt { font-size: 13px; line-height: 1.6; } .cr-disc .dt b { color: var(--text); font-weight: 600; }

/* --- reader: per-medium protection notice (under a protected medium) --- */
.cr-protnote { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 11px 13px; border-radius: var(--r-sm); background: #F4F6F8; border: 1px solid #E4E8EC; color: #4A5057; font-size: 12.5px; line-height: 1.55; }
.cr-protnote svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: var(--muted); }
.cr-protnote b { color: var(--text); font-weight: 600; }

/* --- reader: pdf toolbar always above loading/poster so fullscreen stays reachable --- */
.cr-pdf-tools { position: relative; z-index: 6; }
.cr-pdf .cr-poster { z-index: 7; }
.cr-pdf-tools .cr-full .lbl { }
@media (max-width: 520px) { .cr-pdf-tools .cr-full .lbl { display: none; } }

/* --- pre-start test screen: test's own description --- */
.rp-desc { margin: -2px auto 4px; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 440px; }

/* --- fullscreen overlay viewer (image): zoom + rotate + pan --- */
.cr-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(10,12,15,.93); display: flex; flex-direction: column; }
.cr-ov-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px; }
.cr-ov-tools button { border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; height: 34px; min-width: 34px; padding: 0 11px; border-radius: 7px; cursor: pointer; font: 600 13px var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1; }
.cr-ov-tools button:hover { background: rgba(255,255,255,.16); }
.cr-ov-tools .lvl { font: 12px var(--mono); color: rgba(255,255,255,.7); min-width: 48px; text-align: center; }
.cr-ov-tools .cr-ov-close { margin-left: auto; }
.cr-ov-tools svg { width: 15px; height: 15px; }
.cr-ov-stage { flex: 1 1 auto; overflow: hidden; display: grid; place-items: center; }
.cr-ov-stage img { max-width: 92%; max-height: 92%; transform-origin: center center; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.cr-ov-stage img:active { cursor: grabbing; }

/* author display on these beats the UA [hidden] rule — restore hide-ability */
.cr-overlay[hidden], .cr-loading[hidden], .cr-poster[hidden] { display: none !important; }
/* author display rules above override the UA [hidden] rule — restore it for these */
.cr-video canvas[hidden], .cr-controls[hidden] { display: none !important; }

/* reader: a locked action (e.g. fullscreen before consent) */
.cr-ghost:disabled { opacity: .45; cursor: not-allowed; }

/* ---- admin results viewer (Run 3) ---- */
.subnav { display: flex; gap: 6px; margin: 20px 0 14px; border-bottom: 1px solid var(--line); }
.subnav-item { padding: 8px 14px; font: 600 13px var(--sans); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav-item:hover { color: var(--ink); }
.subnav-item.active { color: var(--ink); border-bottom-color: var(--ink); }
.rchip { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 11px var(--sans); white-space: nowrap; }
.rchip.ok   { background: var(--gt-soft);  color: #3C5C14; }
.rchip.bad  { background: var(--ivt-soft); color: #A5121F; }
.rchip.warn { background: #FFF3E6; color: #B4530A; }
.rchip.wait { background: #EEF0F2; color: #666; }
.submail { font: 400 11px var(--mono); color: var(--faint); margin-top: 2px; }
table.tbl.matrix th { position: sticky; top: 0; }
table.tbl.matrix td { text-align: center; }
table.tbl.matrix td:first-child { text-align: left; }

/* results filter controls — overlay pickers laid out in a row */
.results-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 4px 0 16px; }
.rc-field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.rc-field .lbl { font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.rc-field .picker.inset.single { min-width: 240px; }
.results-controls .rc-csv { margin-left: auto; }

/* results pickers keep their open button visible even with a selection, so the
   admin can switch the test/user/group without first clearing it */
.rc-field .picker.single:has(.pick-chip) .picker-add { display: inline-flex; }
.rc-field .picker.inset { flex-wrap: wrap; }

/* ---- image_choice: builder photo-options ---- */
.img-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.img-opt-row { display: flex; align-items: center; gap: 10px; }
.img-opt-slot { position: relative; flex: 0 0 auto; width: 92px; height: 72px; }
.img-opt-prev { width: 92px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; background: var(--bg); }
.img-opt-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; }
.img-opt-x svg { width: 12px; height: 12px; }
.img-opt-drop { width: 92px; height: 72px; display: grid; place-items: center; text-align: center; font: 600 11px var(--sans); color: var(--faint); border: 1.5px dashed #C9D0D8; border-radius: 8px; cursor: pointer; padding: 4px; }
.img-opt-drop.is-over { border-color: var(--ink); background: var(--bg); }
.img-opt-status { display: block; font: 500 11px var(--sans); color: var(--faint); margin-top: 2px; }
.img-opt-cap { flex: 1 1 auto; }

/* ---- image_choice: runner photo grid ---- */
.run-imgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; }
.run-imgtile { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; border-radius: 12px; padding: 6px; border: 1px solid var(--line); background: #fff; transition: border-color .12s, box-shadow .12s; outline: none; }
.run-imgtile:hover { border-color: #C9D0D8; }
.run-imgtile:focus-visible { box-shadow: 0 0 0 3px rgba(30,34,40,.12); }
.run-imgtile > input { position: absolute; opacity: 0; pointer-events: none; }
.run-imgtile-fig { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--bg); }
.run-imgtile-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.run-imgtile-fig.is-missing::after { content: "Fotka chybí"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 12px var(--sans); color: var(--faint); }
.run-imgtile-chk { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.85); color: transparent; border: 1px solid var(--line); transition: background .12s, color .12s; }
.run-imgtile-chk svg { width: 15px; height: 15px; }
.run-imgtile.selected { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(30,34,40,.10); }
.run-imgtile.selected .run-imgtile-chk { background: var(--ink); color: #fff; border-color: var(--ink); }
.run-imgtile-cap { font: 500 13px var(--sans); color: var(--ink); text-align: center; }

/* ---- palette thumb: image_choice (2×2 tiles) ---- */
.pal-th.th-imgs { display: grid; width: 74px; height: 60px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.pal-th.th-imgs i { border-radius: 4px; background: #D5DAE0; position: relative; }
.pal-th.th-imgs i.on { background: var(--gt); box-shadow: 0 0 0 2px var(--gt-soft); }
.pal-th.th-imgs i.on::after { content: ""; position: absolute; inset: 0; margin: auto; width: 40%; height: 40%; border-radius: 50%; background: #fff; }

/* ---- image_choice runner: zoom button + fullscreen lightbox ---- */
.run-imgtile-zoom { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(12,14,18,.55); color: #fff; cursor: zoom-in; opacity: 0; transition: opacity .12s, background .12s; }
.run-imgtile:hover .run-imgtile-zoom, .run-imgtile:focus-within .run-imgtile-zoom { opacity: 1; }
.run-imgtile-zoom:hover { background: rgba(12,14,18,.8); }
.run-imgtile-zoom:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 1px; }
.run-imgtile-zoom svg { width: 16px; height: 16px; }
@media (hover: none) { .run-imgtile-zoom { opacity: 1; } } /* touch: always show */

.run-lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.run-lightbox[hidden] { display: none; }
.run-lightbox-back { position: absolute; inset: 0; background: rgba(8,10,14,.86); backdrop-filter: blur(2px); }
.run-lightbox-fig { position: relative; margin: 0; max-width: min(96vw, 1400px); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.run-lightbox-fig img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #000; }
.run-lightbox-fig figcaption { color: #fff; font: 500 15px var(--sans); text-align: center; }
.run-lightbox-fig figcaption[hidden] { display: none; }
.run-lightbox-x { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.run-lightbox-x svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .run-lightbox-x { top: 6px; right: 6px; } }

/* question medium photo: zoom-to-fullscreen button (video keeps native fullscreen) */
.run-q-media.has-zoom { position: relative; }
.run-q-media-zoom { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: rgba(12,14,18,.55); color: #fff; cursor: zoom-in; opacity: 0; transition: opacity .12s, background .12s; }
.run-q-media.has-zoom:hover .run-q-media-zoom, .run-q-media-zoom:focus-visible { opacity: 1; }
.run-q-media-zoom:hover { background: rgba(12,14,18,.8); }
.run-q-media-zoom svg { width: 18px; height: 18px; }
@media (hover: none) { .run-q-media-zoom { opacity: 1; } }

/* ---- site footer (GT Energy / IVT · version) ---- */
.site-footer { border-top: 1px solid var(--line); background: #fff; margin-top: 44px; }
.site-footer .sf-inner { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 22px; }
.sf-name { font: 700 14px var(--sans); color: var(--ink); letter-spacing: .01em; }
.sf-tag { font: 500 12px var(--sans); color: var(--faint); margin-top: 2px; }
.sf-right { text-align: right; }
.sf-copy { font: 500 12px var(--sans); color: var(--muted); }
.sf-copy strong { color: var(--ink); font-weight: 700; }
.sf-links { font: 500 12px var(--sans); color: var(--faint); margin-top: 4px; }
.sf-links a { color: var(--muted); text-decoration: none; }
.sf-links a:hover { color: var(--ink); text-decoration: underline; }
.sf-dot { margin: 0 7px; color: #C9D0D8; }
.sf-ver { font: 600 11px var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; color: var(--muted); }
/* auth (login) page: body is a column (hero split + footer). The footer keeps its
   natural height at the bottom, blended onto the branded background. */
body.auth .site-footer { flex: 0 0 auto; background: transparent; border-top-color: rgba(20,24,30,.08); margin-top: 0; }
@media (max-width: 620px) {
  .site-footer .sf-inner { flex-direction: column; align-items: flex-start; }
  .sf-right { text-align: left; }
}