:root {
  --bg: #f5f7fa;
  --card: #ffffff;
  --text: #1f2933;
  --muted: #616e7c;
  --border: #e4e7eb;
  --accent: #1d63ed;
  --accent-text: #ffffff;
  --notice: #fff8e1;
  --notice-border: #f5c542;
  --pass: #1a7f37;
  --pass-bg: #e6f4ea;
  --fail: #c62828;
  --fail-bg: #fdecea;
  --streak: #ea580c;
  --streak-soft: #fed7aa;
  --accent-hover: #1550c7;
  --accent-soft: #eef4fe;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Dark scheme: chosen by the viewer (<html data-theme="dark">, app.set_theme,
   static/theme.js) or, with no choice saved, the system's. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11161d;
  --card: #1a212b;
  --text: #e4e7eb;
  --muted: #9aa5b1;
  --border: #2c3643;
  --accent: #4c8dff;
  --notice: #3a3016;
  --notice-border: #a8841f;
  --pass: #56d364;
  --pass-bg: #12301b;
  --fail: #ff7b72;
  --fail-bg: #3a1a1a;
  --streak: #fb923c;
  --streak-soft: #7c2d12;
  --accent-hover: #6ea3ff;
  --accent-soft: #16233c;
  --accent-text: #0b1220;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11161d;
    --card: #1a212b;
    --text: #e4e7eb;
    --muted: #9aa5b1;
    --border: #2c3643;
    --accent: #4c8dff;
    --notice: #3a3016;
    --notice-border: #a8841f;
    --pass: #56d364;
    --pass-bg: #12301b;
    --fail: #ff7b72;
    --fail-bg: #3a1a1a;
    --streak: #fb923c;
    --streak-soft: #7c2d12;
  --accent-hover: #6ea3ff;
  --accent-soft: #16233c;
  --accent-text: #0b1220;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* Pictures with a light and a dark version (the logo) */
:root[data-theme="dark"] .theme-light-only, :root[data-theme="light"] .theme-dark-only { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-light-only { display: none !important; } }
@media not (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-dark-only { display: none !important; } }

* { box-sizing: border-box; }

/* Text size chosen by the viewer (<html data-font>, app.set_font_size, static/theme.js): sizes are
   in rem, so the root size scales the site; px pieces (icons, borders) and certificates (cqw) stay. */
html { font-size: 100%; }
:root[data-font="small"] { font-size: 87.5%; }
:root[data-font="large"] { font-size: 115%; }

body {
  margin: 0;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

header img { height: 32px; }

header .who { display: flex; align-items: center; gap: 12px; color: var(--muted); }

main { margin: 0 auto; padding: 24px 16px; }

h1, h2, h3, p, li { unicode-bidi: plaintext; text-align: start; }

.notice {
  padding: 12px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--notice-border);
  background: var(--notice);
  border-radius: 8px;
}


.group > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  user-select: none;
}

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

/* Chevron: points left when closed (the RTL reading direction), down when open. */
.group > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(135deg);
  transition: transform 0.15s;
}

.group[open] > summary::before { transform: rotate(45deg); }

.group > summary .count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  border-radius: 999px;
  padding: 0 10px;
}



.grid {
  display: grid;
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
}

/* Room for two lines so images line up across a row. */

.card .cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  
  background: var(--bg);
}

.card .cover.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
}

.card .cover.placeholder img { width: 56px; height: 56px; opacity: 0.55; }
.card p { margin: 0 0 12px; color: var(--muted); flex: 1; }
.card .meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 12px; }

button, .button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
:where(button, .button):hover { background: var(--accent-hover); }
:where(button, .button):active { transform: translateY(1px); }
:where(button[disabled], button[disabled]:hover) { opacity: 0.55; cursor: not-allowed; background: var(--accent); transform: none; }

button.link, button.link:hover {
  background: none;
  color: var(--accent);
  padding: 0;
}

/* One focus ring for everything a keyboard can reach. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, .button:focus-visible { border-radius: 8px; }

/* Form fields: one look on every page (pages may still size them). */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea) {
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
  transition: border-color 0.15s;
}
:where(input:not([type=checkbox], [type=radio]), select, textarea):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
:where(input:not([type=checkbox], [type=radio]), select, textarea):focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
::placeholder { color: var(--muted); opacity: 0.8; }

.center { text-align: center; padding: 48px 0; }
.center p { text-align: center; }

.tag {
  font-size: 0.85rem;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.tag b { color: var(--accent); font-weight: 600; }

header .who { flex-wrap: wrap; justify-content: flex-end; }

.hint { color: var(--muted); }

/* Challenges */

h1.section { margin-top: 40px; }

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

button.secondary, .button.secondary {
  background: var(--card);
  color: var(--accent);
  border: 1px solid var(--accent);
}
button.secondary:hover, .button.secondary:hover { background: var(--accent-soft); }

.card .cover.placeholder.challenge span {
  font-size: 64px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0.6;
}

.crumbs { color: var(--muted); font-size: 0.9rem; margin: 0 0 8px; }
.crumbs a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.lead { font-size: 1.05rem; color: var(--muted); }

.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

.panel, .question, .resource {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.panel p { margin: 4px 0; }

.resources { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.resource { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
.resource p { margin: 4px 0 0; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.actions form { margin: 0; }

.badge {
  display: inline-block;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge.pass, .verdict.pass, .score.pass { background: var(--pass-bg); color: var(--pass); }
.badge.fail, .verdict.fail, .score.fail { background: var(--fail-bg); color: var(--fail); }

.progress-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }

.steps { display: flex; flex-wrap: wrap; gap: 6px; }
.step {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.steps.large .step { min-width: 44px; height: 44px; font-size: 1rem; }
.step.done { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.step.current { outline: 2px solid var(--accent); outline-offset: 2px; }

.timer { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.timer.low { color: var(--fail); }

.question h2 { font-size: 1.1rem; margin: 0 0 12px; }
.question.compact h3 { font-size: 1rem; margin: 0 0 8px; }

pre {
  direction: ltr;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  font-size: 0.9rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  direction: ltr;
  unicode-bidi: isolate;
}

:not(pre) > code { background: var(--bg); border-radius: 4px; padding: 1px 5px; }

.options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.option.selectable { justify-content: flex-start; cursor: pointer; }
.option.selectable:has(input:checked) { border-color: var(--accent); outline: 1px solid var(--accent); }
.option input { margin: 0; accent-color: var(--accent); }
.option.right { border-color: var(--pass); background: var(--pass-bg); }
.option.wrong { border-color: var(--fail); background: var(--fail-bg); }
.option .mark { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.option.right .mark { color: var(--pass); }
.option.wrong .mark { color: var(--fail); }

.verdict { margin-top: 16px; padding: 12px 16px; border-radius: 8px; }
.verdict p { margin: 6px 0 0; color: var(--text); }

.explanation { color: var(--muted); margin: 10px 0 0; }

.score { display: flex; align-items: center; gap: 24px; padding: 20px 24px; border-radius: 12px; margin-bottom: 24px; }
.score .big { font-size: 2.6rem; font-weight: 700; }
.score p { margin: 4px 0 0; color: var(--text); }

@media (max-width: 600px) {
  .resource { flex-direction: column; align-items: stretch; }
  .progress-row { flex-direction: column; align-items: flex-start; }
}

/* Challenge text is Persian that often starts with a Latin word or code
   ("Secret به اسم ..."). The plaintext rule above would lay those lines out
   left to right, so keep them right to left. */
.lead, .panel p, .resource p, .question h2, .question h3, .option span,
.verdict p, .explanation, .card p, .card h3, main h1, .crumbs, .muted,
.score p, .resource b, .lab-bar b, .center p { unicode-bidi: isolate; direction: rtl; }

/* Split challenge pages: questions on one side, the lab on the other. */

main.split { max-width: none; padding: 12px; }

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  height: calc(100vh - 57px - 24px);
}

.quiz-pane { overflow-y: auto; padding: 4px 8px; }

.lab-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.lab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.lab-actions { display: flex; gap: 16px; white-space: nowrap; }
.lab-actions a { text-decoration: none; }

.lab-pane iframe { flex: 1; width: 100%; border: 0; background: #000; }

body.lab-message { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

@media (max-width: 900px) {
  .split-layout { grid-template-columns: 1fr; height: auto; }
  .quiz-pane { overflow: visible; }
  .lab-pane { height: 75vh; }
}

/* Hints: collapsed until the user asks for one. */
.q-hint {
  margin: 0 0 10px;
  border: 1px dashed var(--notice-border);
  border-radius: 8px;
  background: var(--notice);
}
.q-hint > summary { cursor: pointer; padding: 6px 12px; font-size: 0.9rem; font-weight: 600; }
.q-hint > summary::marker { color: var(--notice-border); }
.q-hint > p { margin: 0; padding: 0 12px 10px; unicode-bidi: isolate; direction: rtl; }
.muted { color: var(--muted); margin: 8px 0 0; }

/* Practical challenges */
.task-text { margin: 0 0 12px; unicode-bidi: isolate; direction: rtl; }
/* Markdown of practical challenges (intro, task content). Code blocks keep
   the global left-to-right pre style. */
.md { margin: 0 0 12px; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md li, .md h1, .md h2, .md h3, .md h4, .md blockquote, .md th, .md td {
  unicode-bidi: isolate; direction: rtl;
}
.md h1, .md h2, .md h3, .md h4 { font-size: 1rem; margin: 16px 0 8px; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 10px; padding-inline-start: 1.5rem; }
.md li { margin: 2px 0; }
.md pre { margin: 0 0 10px; }
.md blockquote { margin: 0 0 10px; padding: 4px 12px; border-inline-start: 3px solid var(--border); color: var(--muted); }
.md table { border-collapse: collapse; margin: 0 0 10px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: start; }
.md th { background: var(--bg); }
.task-no {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent); color: var(--accent-text); font-size: 0.9rem; margin-inline-end: 6px;
}
/* Check messages are mostly Persian, sometimes with English lines (command
   errors). bidi_lines gives each line its direction; the normal (joining)
   font is kept so Persian letters connect. */
.check-output {
  margin: 8px 0;
  padding: 10px 12px;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.check-output > div { unicode-bidi: isolate; text-align: start; }

/* Report page (report.html) and workshop progress on the cards. */
a.link { color: var(--accent); text-decoration: none; }
.badge { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.badge.pass, .badge.fail { border-color: transparent; }
.badge.run { background: var(--bg); color: var(--accent); border-color: var(--accent); }

/* The report has one part for workshops and one for challenges, built the same way. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 20px; }
.report-part { margin: 28px 0 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.part-title { margin: 0; font-size: 1.3rem; }
.section-head h3 { margin: 8px 0; font-size: 1.05rem; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.stat b { font-size: 1.35rem; color: var(--text); }
.stat span { color: var(--muted); font-size: 0.9rem; }

.table-wrap { overflow-x: auto; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
table.report { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.report th, table.report td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.report tr:last-child td { border-bottom: none; }
table.report th { color: var(--muted); font-weight: 600; background: var(--bg); }
table.report td:first-child { white-space: normal; min-width: 180px; }
table.report small { color: var(--muted); }
.muted-inline { display: block; color: var(--muted); font-size: 0.8rem; }

.progress { display: inline-block; vertical-align: middle; width: 90px; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-inline-end: 6px; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.progress.inline { width: 60px; }
.report-head, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.report-head h1 { margin: 0 0 8px; }
.section-head { margin-top: 8px; }
.section-head h2 small, .section-head h3 small { display: inline; margin-inline-start: 8px; font-weight: 400; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -12px 0 24px; }

/* Report histories: collapsed by default, with a page size choice. */
details.history { margin: 8px 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
details.history > summary { cursor: pointer; padding: 10px 16px; list-style-position: inside; }
details.history > summary h3 { display: inline; margin: 0; font-size: 1.05rem; }
details.history[open] > summary { border-bottom: 1px solid var(--border); }
details.history .table-wrap { margin: 0 12px 12px; }
details.history > .muted { padding: 0 16px 12px; }
.history-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; }
.sizes { color: var(--muted); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.sizes a, .sizes b { padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; }
.sizes b { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
details.history .pager { margin: 0 0 12px; }

/* Badges: report grid, "new badge" notice, admin page. */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.badge-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 12px;
}
.badge-card img { width: 88px; height: 88px; object-fit: contain; }
.badge-card b { font-size: 0.95rem; }
.badge-card p { margin: 0; color: var(--muted); font-size: 0.85rem; text-align: center; }
.badge-card small { color: var(--muted); font-size: 0.8rem; }
.badge-card.earned { border-color: var(--accent); }
.badge-card.locked img { filter: grayscale(1); opacity: 0.35; }
.badge-card.locked b { color: var(--muted); }
.badge-card .how { color: var(--text); opacity: 0.8; }
.badge-note { font-style: italic; }
.badge-notice { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.badge-notice img { width: 36px; height: 36px; object-fit: contain; }
.badge-cell { display: flex; align-items: center; gap: 10px; }
.badge-cell img { width: 40px; height: 40px; object-fit: contain; }
table.report tr.selected td { background: var(--bg); }
table.report tr.revoked td { opacity: 0.55; }
.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.admin-form textarea, .admin-form input[type=text], .admin-form input[type=number], .admin-form input[type=password] {
  font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.admin-form button { align-self: flex-start; }
.result-line { margin: 4px 0; text-align: left; }

/* Admin panel (templates/admin/): see the admin section at the end. */
.stat.live b { color: var(--pass); }
.low-time { color: var(--fail); font-weight: 600; }
table.report td.wrap { white-space: normal; min-width: 260px; }
.hbar { display: inline-block; width: 110px; height: 8px; background: var(--border); border-radius: 4px; margin-inline-end: 8px; vertical-align: middle; overflow: hidden; }
.hbar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
table.daily td { min-width: 150px; }
.two-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.search { display: flex; gap: 8px; }
.search input, .inline-form input[type=text] {
  font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.inline-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.admin-login { max-width: 360px; margin: 16px auto; text-align: start; }
.facts time { font-weight: 600; }

/* The report's badges: collapsed box with the earned badges in its header. */
details.badges-box > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; list-style: none; }
details.badges-box > summary::-webkit-details-marker { display: none; }
details.badges-box > summary h2 { display: inline; margin: 0; }
.badge-strip { display: inline-flex; gap: 4px; }
.badge-strip img { width: 32px; height: 32px; object-fit: contain; }
details.badges-box .show-more { margin-inline-start: auto; font-size: 0.9rem; padding: 4px 12px; }
details.badges-box[open] .show-more { display: none; }
details.badges-box .badge-grid { padding: 12px 16px 16px; margin: 0; }
.badge-card .got { color: var(--pass); }
.badge-card .how-earned { opacity: 0.7; }
.badge-card .how b { color: var(--accent); }
/* Admin: tag filter, activity filters, score distribution, status. */
.tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 16px; }
.tag-chip { padding: 2px 10px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; color: var(--text); font-size: 0.85rem; }
.tag-chip b { color: var(--accent); font-weight: 600; }
.tag-chip small { color: var(--muted); margin-inline-start: 4px; }
.tag-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.tag-chip.on b, .tag-chip.on small { color: var(--accent-text); }
.tag-clear { font-size: 0.85rem; color: var(--fail); text-decoration: none; }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions form { margin: 0; }
.kind-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; }
.kind-tabs a { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.kind-tabs a.current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
.filters input, .filters select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.score-dist { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding: 12px; margin-bottom: 20px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; direction: ltr; }
.score-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.score-bar { width: 100%; max-width: 48px; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; }
.score-col small { color: var(--muted); font-size: 0.75rem; }
.score-col b { font-size: 0.85rem; }
.stat b.ok { color: var(--pass); }
.stat b.bad { color: var(--fail); }
/* Admin tag filter: a dropdown per key. */
.tag-key { position: relative; }
.tag-key > summary {
  list-style: none; cursor: pointer; padding: 3px 12px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.85rem; background: var(--card);
}
.tag-key > summary::-webkit-details-marker { display: none; }
.tag-key > summary::after { content: " ▾"; color: var(--muted); }
.tag-key.on > summary { border-color: var(--accent); }
.tag-key.on > summary b { color: var(--accent); }
.tag-key > summary small { color: var(--muted); }
.tag-values {
  position: absolute; z-index: 10; top: calc(100% + 4px); inset-inline-start: 0; min-width: 180px; max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.tag-values label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.tag-values label:hover { background: var(--bg); }
.tag-values small { color: var(--muted); margin-inline-start: auto; }
/* Admin headings often start with a Latin tag key ("company"); keep them right to left. */
main.admin h1, main.admin h2, main.admin h3 { unicode-bidi: isolate; direction: rtl; }

/* ------------------------------------------------------------------ Admin panel */
main.admin { max-width: 1480px; padding: 16px; }
.admin-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }

.admin-side {
  position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 88px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 8px;
}
.side-title { font-weight: 700; font-size: 1.05rem; padding: 2px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.side-group { font-size: 0.75rem; font-weight: 600; color: var(--muted); padding: 12px 10px 4px; }
.admin-side nav { display: flex; flex-direction: column; gap: 2px; }
.admin-side nav a, .side-foot a, .side-foot button {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 0.9rem; width: 100%; text-align: start;
}
.admin-side nav a:hover, .side-foot a:hover, .side-foot button:hover { background: var(--bg); }
.admin-side nav a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.admin-side .icon { width: 18px; height: 18px; flex: none; }
.side-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.side-foot form { margin: 0; }
.side-foot button.link { color: var(--fail); background: none; font: inherit; cursor: pointer; }
.side-who { font-size: 0.8rem; color: var(--muted); padding: 0 10px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-version { font-size: 0.75rem; color: var(--muted); padding: 0 10px 6px; }

.admin-main { min-width: 0; }
.admin-main > h1, .admin-main .section-head h1 { font-size: 1.45rem; margin: 4px 0 14px; }
.admin-main h1 small.muted-inline { display: inline; font-size: 0.85rem; font-weight: 400; margin-inline-start: 8px; }
.admin-main h2 { font-size: 1.1rem; margin: 28px 0 10px; }
.admin-main h2 small.muted-inline { display: inline; font-weight: 400; margin-inline-start: 6px; }
.admin-main .crumbs { margin: 0 0 4px; }
.admin-main .notice { border-radius: 10px; }

/* Summary cards */
.admin-main .stats { gap: 12px; margin: 8px 0 18px; }
.admin-main .stat {
  position: relative; padding: 14px 16px 12px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);
}
.admin-main .stat b { font-size: 1.6rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.admin-main .stat span { font-size: 0.86rem; }
.admin-main .stat.live b { color: var(--pass); }
.admin-main .stat.live::after {
  content: ""; position: absolute; top: 14px; inset-inline-end: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pass); box-shadow: 0 0 0 4px var(--pass-bg); animation: live-pulse 2s infinite;
}
@keyframes live-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }

/* Tables */
.admin-main .table-wrap { margin-bottom: 18px; box-shadow: var(--shadow); }
.admin-main table.report { font-size: 0.88rem; }
.admin-main table.report th { font-size: 0.8rem; text-transform: none; padding: 9px 12px; white-space: nowrap; }
.admin-main table.report td { padding: 9px 12px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.admin-main table.report tbody tr:hover td { background: var(--bg); }
.admin-main table.report td a { text-decoration: none; font-weight: 600; }
.admin-main table.report td a:hover { text-decoration: underline; }
.admin-main table.report .muted-inline { margin-top: 2px; }
.admin-main .row-actions button, .admin-main .row-actions .button, .admin-main td form button {
  padding: 4px 11px; font-size: 0.82rem; border-radius: 7px;
}
.admin-main .badge { font-size: 0.78rem; padding: 1px 9px; }
.admin-main .actions { gap: 8px; }
.admin-main .facts { margin: 4px 0 14px; }

/* Tag filter bar sits above the page title */
.admin-main .tag-filter {
  margin: 0 0 14px; padding: 8px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}

/* Details boxes and panels */
.admin-main details.history { box-shadow: var(--shadow); }
.admin-main .panel { border-radius: 12px; }
.admin-main .filters { padding: 12px 14px; }

/* Login */
.admin-login-page { display: flex; justify-content: center; padding: 48px 0; }
.admin-login-card {
  width: 100%; max-width: 380px; background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 28px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; gap: 14px;
}
.admin-login-card .logo { align-self: center; }
.admin-login-card .logo img { height: 34px; display: block; }
.admin-login-card h1 { text-align: center; margin: 0; font-size: 1.3rem; }
.admin-login-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.admin-login-card input {
  font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.admin-login-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.admin-login-card button { width: 100%; padding: 10px; font-weight: 600; }
.admin-login-card .muted { text-align: center; margin: 0; }
.admin-login-card > .button { text-align: center; padding: 10px; font-weight: 600; }
.admin-emergency { border-top: 1px solid var(--border); padding-top: 0.75em; }
.admin-emergency summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.admin-emergency form { display: flex; flex-direction: column; gap: 0.75em; margin-top: 0.75em; }

/* Phones and narrow screens: the sidebar becomes a scrolling bar on top. */
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-side { position: static; max-height: none; flex-direction: row; align-items: center; overflow-x: auto; padding: 6px; gap: 2px; }
  .side-title, .side-group, .side-who, .side-version { display: none; }
  .admin-side nav { flex-direction: row; }
  .admin-side nav a, .side-foot a, .side-foot button { white-space: nowrap; width: auto; }
  .side-foot { flex-direction: row; margin: 0; padding: 0 0 0 0; border: 0; }
  .admin-main .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Admin tables fit the page: cells may wrap (headers and buttons stay on one line). */
.admin-main table.report td { white-space: normal; }
.admin-main table.report td:first-child { min-width: 140px; }
.admin-main table.report td .progress + small { white-space: nowrap; }
.admin-main .row-actions, .admin-main td form { white-space: nowrap; }

/* ------------------------------------------------------------ Site (user pages) */
main { max-width: 1140px; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }

/* Header: brand, menu, user chip */
.site-header { position: sticky; top: 0; z-index: 20; gap: 12px; padding: 10px 20px; box-shadow: 0 1px 0 var(--border); }
.site-header .brand img { height: 30px; display: block; }
.site-nav { display: flex; gap: 4px; margin-inline-end: auto; margin-inline-start: 16px; overflow-x: auto; }
.site-nav a {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 0.93rem; white-space: nowrap;
}
.site-nav a:hover { background: var(--bg); }
.site-nav a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.user-menu { position: relative; }
.user-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--card);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { border-color: var(--accent); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #6f42c1); color: #fff; font-weight: 700; font-size: 0.95rem;
}
.user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.user-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 30; min-width: 240px;
  display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.user-pop small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.user-pop .tag { align-self: flex-start; white-space: normal; }
.user-pop a, .user-pop button.logout {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--text);
  font: inherit; width: 100%; text-align: start;
}
.user-pop a:hover, .user-pop button.logout:hover { background: var(--bg); }
.user-pop form { margin: 0; border-top: 1px solid var(--border); padding-top: 8px; }
.user-pop button.logout { color: var(--fail); }
.pop-label { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }
.user-pop form.theme-picker { border-top: 0; padding-top: 0; }

/* Light / dark controls (_icons.html theme_toggle, theme_picker; static/theme.js) */
.theme-toggle { margin: 0; flex: none; }
.theme-toggle button {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
  color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
}
.theme-toggle button:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .icon { width: 18px; height: 18px; }
/* The button shows what a click switches to: the moon in the light scheme, the sun in the dark one. */
.theme-toggle .icon:last-child { display: none; }
:root[data-theme="dark"] .theme-toggle .icon:first-child { display: none; }
:root[data-theme="dark"] .theme-toggle .icon:last-child { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon:first-child { display: none; }
  :root:not([data-theme]) .theme-toggle .icon:last-child { display: inline; }
}
.theme-picker { display: flex; gap: 4px; margin: 0; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.theme-picker button, .side-foot .theme-picker button {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 0;
  padding: 5px 6px; font: inherit; font-size: 0.8rem; color: var(--muted); background: none; border: 0; border-radius: 7px; cursor: pointer;
}
.theme-picker button .icon { width: 15px; height: 15px; }
.theme-picker button:hover { color: var(--text); background: var(--card); }
.theme-picker button[aria-pressed="true"] { color: var(--accent); background: var(--card); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.side-foot .theme-picker { margin: 0 0 6px; }

/* Signed-out landing */
.landing {
  max-width: 720px; margin: 40px auto; text-align: center; background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 36px 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.landing > .icon { width: 40px; height: 40px; color: var(--muted); }
.landing h1, .landing p { text-align: center; }
.landing-logo { margin-bottom: 8px; }
.landing-logo img { height: 44px; display: block; }
.landing .lead { margin: 4px auto 22px; max-width: 520px; }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.button.big { padding: 12px 28px; font-size: 1.05rem; font-weight: 600; border-radius: 12px; }
.social-sep { display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 22px auto 12px; color: var(--muted); font-size: 0.88rem; }
.social-sep::before, .social-sep::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.social-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.button.social {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 150px; padding: 10px 18px;
  color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 12px; font-weight: 600;
}
.button.social:hover { border-color: var(--accent); background: var(--bg); }
.brand-logo { width: 20px; height: 20px; flex: none; }
.landing-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 30px; }
.landing-points div {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px; border-radius: 12px; background: var(--bg);
}
.landing-points .icon { width: 26px; height: 26px; color: var(--accent); }
.landing-points span { color: var(--muted); font-size: 0.88rem; }

/* Welcome strip on the main page */
.hello {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 22px; border-radius: 16px;
  background: linear-gradient(120deg, var(--accent-soft), var(--card) 65%); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.hello h1 { margin: 0 0 4px; font-size: 1.45rem; }
.hello p { margin: 0; color: var(--muted); }
.hello-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.hello-stats a {
  display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color 0.15s;
}
.hello-stats a:hover { border-color: var(--accent); }
.hello-stats b { font-size: 1.4rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hello-stats span { font-size: 0.82rem; color: var(--muted); }

/* Section heading bar */
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 10px; }
.section-bar h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.3rem; }
.section-bar h2 .icon { width: 24px; height: 24px; color: var(--accent); }
.section-bar h2 small { font-size: 0.8rem; font-weight: 500; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0 10px; }
.section-bar .jump { font-size: 0.9rem; text-decoration: none; }
.hint { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.hint .icon { color: #f59e0b; }
.empty { color: var(--muted); padding: 18px; text-align: center; background: var(--card); border: 1px dashed var(--border); border-radius: 12px; }

/* Minimizing a section to one row (static/sections.js) */
.section-bar .minimize {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 12px; font-size: 0.88rem;
  color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.section-bar .minimize:hover { color: var(--accent); border-color: var(--accent); }
.section-bar .minimize .icon { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.15s; }
.home-section.minimized .minimize .icon { transform: none; }
.section-bar .minimize[hidden], .resource-body[hidden], .strip[hidden] { display: none; }
.strip {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 6px;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.strip > .card, .strip > .path-card { flex: 0 0 min(280px, 82vw); scroll-snap-align: start; background: var(--card); }

/* Cards */
.grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { padding: 0; overflow: hidden; border-radius: 14px; transition: transform 0.15s, box-shadow 0.15s; }
.group .card { background: var(--card); }
.card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.cover-wrap { position: relative; }
.card .cover { border-radius: 0; margin: 0; }
.card .cover.placeholder .icon { width: 56px; height: 56px; color: var(--accent); opacity: 0.6; stroke-width: 1.4; }
.ribbon {
  position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(4px);
  background: rgba(15, 23, 42, 0.72); color: #fff;
}
.ribbon .icon { width: 14px; height: 14px; }
.ribbon.pass { background: rgba(22, 128, 61, 0.9); }
.ribbon.fail { background: rgba(185, 28, 28, 0.88); }
.ribbon.run { background: rgba(29, 78, 216, 0.9); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 6px; flex: 1; }
.card h3 { margin: 0; min-height: 0; font-size: 1.05rem; line-height: 1.5; }
.card .desc {
  margin: 0; color: var(--muted); font-size: 0.9rem; flex: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 0.8rem; white-space: nowrap;
}
.chip .icon { width: 14px; height: 14px; }
.card-progress { display: flex; align-items: center; gap: 8px; }
.card-progress .progress { flex: 1; width: auto; }
.card-progress small { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.card-foot { padding: 10px 16px 16px; margin: 0; }
.card-foot button, .card-foot .button {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; font-weight: 600; border-radius: 10px;
}
.card-foot .icon { width: 15px; height: 15px; }
/* A row of cards: soft buttons that fill in on hover, so the page is not a wall of blue. */
.card-foot button:not(.secondary):not([disabled]), .card-foot .button:not(.secondary) { background: var(--accent-soft); color: var(--accent); }
.card-foot button:not(.secondary):not([disabled]):hover, .card-foot .button:not(.secondary):hover { background: var(--accent); color: var(--accent-text); }

/* Groups (categories) */
.group { background: none; border: 0; border-radius: 0; margin-bottom: 8px; }
.group > summary { font-size: 1rem; padding: 10px 2px; color: var(--text); }
.group > summary:hover { color: var(--accent); }
.group > summary .count { background: var(--card); border: 1px solid var(--border); }
.group > .grid { padding: 0 0 12px; }

/* Summary cards and tables of the report share the admin look */
.report-part .stat { border-radius: 12px; box-shadow: var(--shadow); }
.report-part .stat b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.report-part table.report tbody tr:hover td, details.history table.report tbody tr:hover td { background: var(--bg); }
.part-title { display: flex; align-items: center; gap: 10px; }
.report-head h1 { font-size: 1.5rem; }

/* Challenge pages */
.panel { border-radius: 12px; }
.facts .tag { background: var(--card); }
.question { border-radius: 14px; }

@media (max-width: 720px) {
  .site-header { padding: 8px 12px; flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; margin: 0; }
  .site-nav a span { font-size: 0.85rem; }
  .user-name { display: none; }
  .user-menu > summary { padding: 3px; }
  .user-menu { margin-inline-start: auto; }
  .hello { padding: 16px; }
  .hello-stats { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 8px; }
  .hello-stats a { min-width: 0; padding: 8px 6px; text-align: center; }
  .hello-stats span { font-size: 0.75rem; line-height: 1.4; }
}
/* Admin: formula and weight breakdowns */
.formula p { margin: 6px 0; }
details.parts > summary { cursor: pointer; color: var(--accent); }
details.parts ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 0.82rem; color: var(--muted); white-space: normal; }
.formula-code { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.9; }

/* Tokens and memberships (user pages) */
.memberships { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; color: var(--muted); font-size: 0.88rem; }
.memberships span { display: inline-flex; align-items: center; gap: 5px; }
.memberships b { color: var(--text); }
.memberships svg { color: var(--accent); }
.memberships svg { width: 15px; height: 15px; }
.hello-stats a.low { border-color: var(--fail); background: var(--fail-bg); }
.hello-stats a.low b { color: var(--fail); }
.chip.rate { color: var(--accent); }
.card-foot .short { display: block; color: var(--fail); font-size: 0.82rem; margin-bottom: 6px; }
.card-foot button[disabled] { opacity: 0.55; cursor: not-allowed; }
.admin-form.inline-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
/* Company tokens: a number and a button per member row. */
.report .inline-form input[type=number] { width: 6rem; }
.admin-form.inline-form label { flex: 1 1 200px; }
.admin-form.inline-form button { align-self: flex-end; }

/* Admin: company scope */
.scope-switch { margin: 0 0 10px; }
.scope-switch label { display: flex; align-items: center; gap: 6px; }
.scope-switch select { flex: 1; font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.scope-switch .icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
.scope-note { display: flex; align-items: center; gap: 6px; }
.company-card { margin-bottom: 16px; }
.company-card .section-head h2 { display: flex; align-items: center; gap: 6px; margin: 0; }
.company-card .tag.bad { color: var(--fail); }
.inline-reset { display: inline-flex; gap: 6px; }
.inline-reset input { font: inherit; width: 9em; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.admin-form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }

/* Courses and learning paths (user pages) */
.path-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 10px 0 28px; }
.path-card {
  display: flex; flex-direction: column; gap: 8px; border-radius: 14px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
}
.path-card:hover { border-color: var(--accent); }
.path-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.path-head b { font-size: 1.05rem; }
.path-count { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.path-card .desc { margin: 0; color: var(--muted); font-size: 0.9rem; }
.path-dots { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.path-dots li {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--muted); background: var(--bg);
}
.path-dots li .icon { width: 15px; height: 15px; }
.path-dots li.started { border-color: var(--accent); color: var(--accent); }
.path-dots li.done { background: var(--pass); border-color: var(--pass); color: #fff; }
.path-dots li.optional { border-style: dashed; }

.course-hero { display: flex; gap: 20px; align-items: flex-start; }
.course-cover { width: 280px; max-width: 40%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
@media (max-width: 640px) { .course-hero { flex-direction: column; } .course-cover { width: 100%; max-width: none; } }
.course-state { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.course-state .card-progress { flex: 1 1 240px; margin: 0; }
.course-state p { margin: 0; }
.course-state form { margin: 0; }
p.short, .short { color: var(--fail); }
.lesson-list { list-style: none; counter-reset: lesson; padding: 0; margin: 0 0 24px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lesson-list li {
  counter-increment: lesson; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--card);
}
.lesson-list li:first-child { border-top: 0; }
.lesson-list li::before { content: counter(lesson); color: var(--muted); min-width: 1.6em; font-variant-numeric: tabular-nums; }
.lesson-list li > a, .lesson-list li > span:first-of-type { flex: 1; }
.lesson-list li.done > a { color: var(--muted); }
.lesson-meta { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lesson-meta .icon { width: 16px; height: 16px; color: var(--pass); }

.lesson-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .lesson-layout { grid-template-columns: 1fr; } .lesson-side { position: static; } }
.lesson-side { position: sticky; top: 76px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.lesson-side ol { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 2px; }
.lesson-side a { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.92rem; }
.lesson-side a:hover { background: var(--bg); }
.lesson-side li.current a { background: var(--accent); color: var(--accent-text); }
.lesson-side li.done:not(.current) a { color: var(--muted); }
.lesson-side .icon { width: 14px; height: 14px; flex: none; }
.lesson-main h1 { margin-top: 0; }
.media { margin: 0 0 18px; }
.media video, .media img { width: 100%; max-height: 70vh; border-radius: 12px; background: #000; display: block; }
.media img { background: none; object-fit: contain; }
.media audio { width: 100%; }
.media iframe { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; background: #fff; }
.media figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }
.lesson-text img { max-width: 100%; border-radius: 8px; }
.lesson-nav { display: flex; gap: 10px; justify-content: space-between; margin: 24px 0; flex-wrap: wrap; }
.lesson-nav form { margin: 0; margin-inline-start: auto; }

.path-steps { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-direction: column; gap: 0; }
.path-step { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.path-step:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 17px; top: 38px; bottom: 0; width: 2px; background: var(--border);
}
.step-mark {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  border: 2px solid var(--border); background: var(--card); color: var(--muted); z-index: 1;
}
.path-step.started .step-mark { border-color: var(--accent); color: var(--accent); }
.path-step.done .step-mark { background: var(--pass); border-color: var(--pass); color: #fff; }
.step-mark .icon { width: 18px; height: 18px; }
.step-body { flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
.step-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.step-body p { margin: 6px 0 0; }
.step-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.step-foot form { margin: 0; }
.step-foot small { color: var(--muted); }
.pdf-pages { display: flex; flex-direction: column; gap: 10px; max-height: 80vh; overflow-y: auto; padding: 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.pdf-pages img { width: 100%; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); user-select: none; -webkit-user-drag: none; }
.pdf-pages .page-no { align-self: center; color: var(--muted); font-size: 0.8rem; margin-top: -4px; }
.media .media-error { display: none; }
.media.media-failed .media-error { display: block; }
.media video, .media img, .pdf-pages { -webkit-touch-callout: none; }
.path-card { padding: 0 0 16px; overflow: hidden; }
.path-card > :not(.path-cover) { margin-inline: 16px; }
.path-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-bottom: 4px; }
.path-card:not(:has(.path-cover)) { padding-top: 16px; }

/* Admin panel: KPI cards, profile card, path funnel */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 8px 0 22px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.kpi-title { font-weight: 700; font-size: 0.95rem; }
.kpi-title a { color: var(--text); text-decoration: none; }
.kpi-title a:hover { color: var(--accent); }
.kpi-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kpi-values > div { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 10px; background: var(--bg); }
.kpi-values > div:first-child { background: var(--accent-soft); }
.kpi-values > div:first-child b { color: var(--accent); }
.kpi-values b { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.2; }
.kpi-values span { font-size: 0.78rem; color: var(--muted); }
.kpi-values small { font-size: 0.74rem; color: var(--muted); }
.kpi-note { font-size: 0.8rem; color: var(--muted); }

.profile-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; margin: 4px 0 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; }
.profile-card h1 { margin: 0; font-size: 1.4rem; }
.profile-card .facts { margin: 8px 0 0; }
.profile-main { flex: 1 1 280px; min-width: 0; }
.profile-main small { color: var(--muted); }
.avatar.big { width: 64px; height: 64px; font-size: 1.6rem; flex: none; }
.profile-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-stats > a, .profile-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 86px; padding: 10px 12px;
  border-radius: 12px; background: var(--bg); text-decoration: none; color: var(--text); }
.profile-stats > a:hover { outline: 1px solid var(--accent); }
.profile-stats b { font-size: 1.2rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.profile-stats b.bad { color: var(--fail); }
.profile-stats span { font-size: 0.78rem; color: var(--muted); }

.path-progress-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 20px; }
.path-progress { display: flex; flex-direction: column; gap: 10px; }
.path-progress-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.path-progress .path-dots li { font-size: 0.8rem; font-weight: 700; }

.path-admin { margin-bottom: 18px; }
.path-admin-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.path-admin-head img { width: 180px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.path-admin-head > div:nth-child(2) { flex: 1 1 260px; }
.path-admin-head h2 { margin: 0 0 4px; }
.funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.funnel li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.funnel li.missing { border-color: var(--fail); }
.funnel-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none;
  background: var(--card); border: 1px solid var(--border); color: var(--muted); }
.funnel-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.funnel-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.funnel-title .icon { width: 16px; height: 16px; color: var(--muted); }
.funnel-bars { position: relative; height: 10px; border-radius: 5px; background: var(--card); overflow: hidden; }
.funnel-bars span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 5px; }
.funnel-bars .started { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.funnel-bars .done { background: var(--accent); }
.funnel-numbers { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.funnel-numbers b { font-size: 1.1rem; color: var(--accent); }
.funnel-numbers small { color: var(--muted); font-size: 0.78rem; }

/* User pages: continue strip, section bar, search */
.continue { margin: 0 0 18px; }
.continue-title { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; margin: 0 0 10px; }
.continue-title .icon { width: 16px; height: 16px; color: var(--accent); }
.continue-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.continue-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.continue-item:hover { border-color: var(--accent); }
.continue-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); }
.continue-icon .icon { width: 20px; height: 20px; }
.continue-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.continue-text b { overflow: hidden; text-overflow: ellipsis; }
.continue-text small { color: var(--muted); font-size: 0.82rem; }
.continue-item .button, .continue-item button { padding: 6px 14px; font-size: 0.88rem; flex: none; }
.progress.thin { height: 5px; margin-top: 2px; }

.section-nav { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px; margin: 0 0 16px; border-radius: 14px; background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid var(--border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.section-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; color: var(--text);
  text-decoration: none; font-size: 0.9rem; }
.section-nav a:hover { background: var(--bg); color: var(--accent); }
.section-nav a .icon { width: 15px; height: 15px; color: var(--muted); }
.section-search { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); }
.section-search .icon { width: 15px; height: 15px; color: var(--muted); }
.section-search input { border: 0; background: transparent; color: var(--text); font: inherit; padding: 7px 0; width: 180px; outline: none; }
@media (max-width: 640px) { .section-search { margin-inline-start: 0; flex: 1 1 100%; } .section-search input { width: 100%; } .section-nav { top: 56px; } }
.card[hidden], .path-card[hidden], details.group[hidden], .path-grid[hidden] { display: none !important; }
.section-level { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); }
.section-level + .section-search { margin-inline-start: 0; }
.section-level .icon { width: 15px; height: 15px; color: var(--muted); }
.section-level select { border: 0; background: transparent; color: var(--text); font: inherit; padding: 7px 0; outline: none; }
.section-level select option { background: var(--card); color: var(--text); }

/* Difficulty level (templates/_level.html): five bars, the first `level` filled */
.level-meter { width: 17px; height: 12px; flex: none; }
.level-meter rect { fill: currentColor; opacity: 0.22; }
.level-meter rect.on { opacity: 1; }
.level.l1 .level-meter, .level.l2 .level-meter { color: var(--pass); }
.level.l3 .level-meter { color: var(--accent); }
.level.l4 .level-meter { color: var(--streak); }
.level.l5 .level-meter { color: var(--fail); }
.tag.level { display: inline-flex; align-items: center; gap: 5px; }
.path-chips .chip.level { padding: 0; border: 0; background: none; font-size: inherit; }
[id] { scroll-margin-top: 130px; }
a.path-progress { text-decoration: none; color: var(--text); }
a.path-progress:hover { border-color: var(--accent); }
.in-paths { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); margin: 0 0 14px; }
.in-paths .icon { width: 16px; height: 16px; color: var(--accent); }
.continue-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; }
.profile-stats b small { font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.kpi-values b { white-space: nowrap; }
.kpi-values b .unit { font-size: 0.72rem; font-weight: 500; color: var(--muted); }

/* Admin user page: companies and tags, deleting a user */
.group-form fieldset { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.group-form legend { padding: 0 6px; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.group-form label.check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.group-form label.check input { width: auto; margin: 0; accent-color: var(--accent); }
.danger-zone { border-color: var(--fail); background: var(--fail-bg); }
.danger-zone p { color: var(--text); }
button.danger, .button.danger { background: var(--fail); color: #fff; }
button.danger:hover, .button.danger:hover { filter: brightness(0.92); }

/* Feedback (templates/_feedback.html, feedback.html, report "بازخوردهای من", admin/feedback.html) */
.feedback-box {
  display: flex; align-items: center; gap: 14px; margin: 28px 0 8px; padding: 14px 16px;
  background: var(--card); border: 1px dashed var(--border); border-radius: 14px;
}
.feedback-box > .icon { width: 28px; height: 28px; flex: none; color: var(--accent); }
.feedback-box > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.feedback-box > div span { color: var(--muted); font-size: 0.88rem; }
.feedback-box .button { flex: none; }
@media (max-width: 600px) { .feedback-box { flex-wrap: wrap; } .feedback-box .button { width: 100%; text-align: center; } }
.feedback-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.feedback-link:hover { color: var(--accent); }
.feedback-link .icon { width: 15px; height: 15px; }
.card-foot .feedback-link { margin-inline-start: auto; }
.feedback-page { max-width: 640px; margin: 0 auto; }
.feedback-page h1 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.feedback-page h1 .icon { color: var(--accent); }
.feedback-form .rating { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.feedback-form .rating legend { padding: 0 6px; font-weight: 600; }
.feedback-form .rating label { position: relative; margin: 0; }
.feedback-form .rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.feedback-form .rating span {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
  color: #f5b301; background: var(--bg); letter-spacing: 1px;
}
.feedback-form .rating input:checked + span { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 2px var(--accent) inset; }
.feedback-form .rating input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.feedback-done { text-align: center; padding: 18px 0; }
.feedback-done > .icon { width: 44px; height: 44px; color: var(--pass); }
.feedback-done .actions { justify-content: center; }
.stars { color: #f5b301; letter-spacing: 1px; white-space: nowrap; }
.stars .off { color: var(--border); }
.feedback-list { display: flex; flex-direction: column; gap: 10px; }
.feedback-item { padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.feedback-item.low { border-inline-start: 4px solid var(--fail); }
.feedback-item.done { opacity: 0.85; }
.feedback-item.unread { border-color: var(--accent); }
.feedback-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feedback-head input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.feedback-meta { margin: 6px 0 0; font-size: 0.86rem; color: var(--muted); }
.feedback-text { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-reply { margin-top: 10px; padding: 10px 12px; background: var(--bg); border-inline-start: 3px solid var(--accent); border-radius: 8px; }
.feedback-reply b { display: inline-flex; align-items: center; gap: 6px; }
.feedback-reply .icon { width: 16px; height: 16px; color: var(--accent); }
.feedback-reply p { margin: 4px 0 0; white-space: pre-wrap; }
.feedback-actions { margin-top: 8px; }
.feedback-actions summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.feedback-actions form { margin-top: 8px; }
.feedback-notice { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.feedback-notice .icon { color: var(--accent); flex: none; }

/* Daily streak: main page tile and notice, report part (report.html #streak) */
.hello-stats a.streak-stat b { display: inline-flex; align-items: center; gap: 4px; }
.hello-stats a.streak-stat .icon { width: 20px; height: 20px; opacity: 0.6; }
.hello-stats a.streak-stat.lit .icon { opacity: 1; color: var(--streak); }
.streak-notice { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.streak-notice .icon { color: var(--streak); flex: none; width: 22px; height: 22px; }
.stat b.streak-count { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.stat b.streak-count.lit { color: var(--streak); }
.stat b.streak-count .icon { width: 22px; height: 22px; }
.streak-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.streak-next .progress { width: 160px; }
.streak-next .progress > span { background: var(--streak); }
.streak-calendar {
  display: flex; width: fit-content; max-width: 100%; gap: 3px; overflow-x: auto; padding: 12px; margin: 8px 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.streak-week { display: grid; grid-template-rows: 16px repeat(7, 14px); gap: 3px; flex: none; }
.streak-weekdays span { width: 14px; font-size: 0.7rem; line-height: 14px; color: var(--muted); text-align: center; }
.streak-month { width: 14px; font-size: 0.68rem; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: visible; }
.streak-day { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: var(--border); }
.streak-day.active { background: var(--streak-soft); }
.streak-day.active.run { background: var(--streak); }
.streak-day.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.streak-day.future { visibility: hidden; }
.streak-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.streak-legend .streak-day { width: 12px; height: 12px; margin-inline-start: 8px; }
.streak-tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.streak-tier {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
}
.streak-tier b { font-size: 1.1rem; }
.streak-tier span { color: var(--streak); font-weight: 600; }
.streak-tier small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.8rem; }
.streak-tier small .icon { width: 14px; height: 14px; }
.streak-tier.got { border-color: var(--pass); background: var(--pass-bg); }
.streak-tier.got small { color: var(--pass); }
.streak-tier.next { border-color: var(--streak); }
.streak-tier.later { opacity: 0.7; }
.count-dot {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-inline-start: auto; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--fail); border-radius: 999px;
}
.section-nav .count-dot { margin-inline-start: 4px; }
.feedback-when { font-size: 0.82rem; font-weight: 400; color: var(--muted); }
.feedback-meta span { margin-inline-start: 2px; }
.feedback-form .rating .rating-hint { flex-basis: 100%; margin: 0; font-size: 0.82rem; color: var(--muted); }
.feedback-form select, .feedback-form textarea {
  width: 100%; padding: 9px 12px; font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px;
}

/* Learning path: what it contains (templates/path.html overview, index card chips) */
.path-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 6px; font-size: 0.82rem; color: var(--muted); }
.path-chips span { display: inline-flex; align-items: center; gap: 4px; }
.path-chips .icon { width: 14px; height: 14px; color: var(--accent); }
.path-chips small { font-size: 0.75rem; }
.path-overview { margin: 18px 0 8px; }
.path-overview h2 { margin: 0 0 12px; font-size: 1.15rem; }
.path-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.path-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none;
}
a.path-tile:hover { border-color: var(--accent); }
.path-tile > .icon { width: 22px; height: 22px; padding: 9px; flex: none; color: var(--accent); background: var(--bg); border-radius: 12px; box-sizing: content-box; }
.path-tile > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; }
.path-tile b { font-size: 1.4rem; line-height: 1.25; }
.path-tile span { font-weight: 600; }
.path-tile small { flex-basis: 100%; color: var(--muted); font-size: 0.8rem; }
.path-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.path-group { padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; }
.path-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; }
.path-group h3 .icon { width: 18px; height: 18px; color: var(--accent); }
.path-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.path-group li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.path-group li > a { color: var(--text); text-decoration: none; font-weight: 500; }
.path-group li > a:hover { color: var(--accent); }
.path-group li.done > a { color: var(--muted); }
.state-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; border: 2px solid var(--border); border-radius: 50%; }
li.started .state-dot { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
li.done .state-dot { border-color: var(--pass); background: var(--pass); color: #fff; }
.state-dot .icon { width: 11px; height: 11px; }
.path-badges li { flex-wrap: nowrap; align-items: flex-start; }
.path-badges img { width: 36px; height: 36px; flex: none; border-radius: 8px; }
.path-badges li:not(.done) img { filter: grayscale(1); opacity: 0.6; }
.path-badges div { display: flex; flex-direction: column; }
.steps-title { margin: 22px 0 10px; font-size: 1.15rem; }
.path-step { scroll-margin-top: 80px; }

/* Challenge solutions (templates/_solution.html) */
.q-solution { margin: 10px 0 4px; }
.solution-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.solution-form button { display: inline-flex; align-items: center; gap: 8px; }
.solution-form .tag { font-size: 0.78rem; }
.solution-open { padding: 12px 14px; background: color-mix(in srgb, var(--pass) 8%, var(--card)); border: 1px solid var(--pass); border-radius: 10px; }
.solution-open .solution-title { display: block; margin-bottom: 6px; color: var(--pass); }
.solution-answer { margin: 0 0 6px; }
.solution-open .md { margin-top: 6px; }

/* Interviews (templates/interview.html, index "مصاحبه‌های شما") */
.interview-rules ul { margin: 10px 0 16px; padding-inline-start: 1.4rem; display: flex; flex-direction: column; gap: 6px; }
.interview-rules h2, .interview-result h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1.1rem; }
.interview-running { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.interview-result { display: flex; align-items: center; gap: 16px; }
.interview-result > .icon { width: 44px; height: 44px; flex: none; color: var(--pass); }
.interview-result.fail > .icon { color: var(--muted); }
.interview-score { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.interview-score b { font-size: 2rem; color: var(--accent); }
.interview-card .path-head .badge { flex: none; }
.option.chosen { border-color: var(--accent); }
.interview-admin-steps { margin: 10px 0; padding-inline-start: 1.4rem; display: flex; flex-direction: column; gap: 4px; }
.invite-links ul { margin: 8px 0 0; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: 6px; }
.invite-links code, code.invite-link { font-size: 0.78rem; overflow-wrap: anywhere; user-select: all; }

/* Certificates (templates/_certificate.html, certificates.html, verify.html, admin/certificates.html).
   The certificate is paper: light in both schemes; sizes follow its width (cqw). */
.cert { container-type: inline-size; width: 100%; max-width: 1100px; margin: 0 auto 16px; }
.cert-page { position: relative; overflow: hidden; background: #fff; border-radius: 0.4cqw; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); }
.cert-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cert-page > .cp-text, .cert-page > .cp-image, .cert-page > .cp-qr, .cert-page > .cp-box { position: absolute; box-sizing: border-box; }
.cp-text { white-space: nowrap; font-family: inherit; }
.cp-text > div { overflow: visible; }
.cp-qr svg { width: 100%; height: 100%; display: block; }
.cp-qr span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border: 1px dashed #b9c3d0; background: #fff; color: #5f6b78; font-size: 2cqw; }
.cert-page.cert-revoked, .cert-page.cert-expired { filter: grayscale(1); opacity: 0.75; }
.cert-small { margin: 0; }

.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.cert-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.cert-card > a { display: block; text-decoration: none; }
.cert-card h3 { margin: 0; font-size: 1rem; }
.cert-card-body { display: flex; flex-direction: column; gap: 8px; }
.cert-card.revoked, .cert-card.expired { opacity: 0.8; }
.cert-profile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cert-profile.missing { border-color: var(--notice-border); background: var(--notice); }
.cert-profile small { display: block; margin-top: 4px; }
.cert-how p { margin: 8px 0; }
.button.linkedin { background: #0a66c2; border-color: #0a66c2; color: #fff; }

.cert-offers { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.cert-offer {
  display: grid; grid-template-columns: minmax(160px, 240px) 1fr; gap: 16px; align-items: center; text-decoration: none;
  color: var(--text); background: var(--card); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent);
  border-radius: 10px; padding: 12px;
}
.cert-offer:hover { border-color: var(--accent); }
.cert-offer > div:last-child { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cert-offer.held { border-inline-start-color: var(--pass); }
.cert-offer .link-more { color: var(--accent); font-weight: 600; font-size: 0.9rem; }

.verify-form form { display: flex; gap: 8px; flex-wrap: wrap; }
.verify-form input { flex: 1; min-width: 0; }
.verify-status { display: flex; gap: 16px; align-items: flex-start; border-inline-start: 5px solid var(--muted); }
.verify-status h1 { margin: 0 0 6px; font-size: 1.3rem; }
.verify-status h1 small { display: block; font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.verify-status p { margin: 4px 0; }
.verify-mark .icon { width: 40px; height: 40px; }
.verify-status.valid { border-inline-start-color: var(--pass); }
.verify-status.valid .verify-mark { color: var(--pass); }
.verify-status.revoked { border-inline-start-color: var(--fail); }
.verify-status.revoked .verify-mark { color: var(--fail); }
.verify-status.expired, .verify-status.pending { border-inline-start-color: var(--notice-border); }
.owner-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.owner-actions small { flex-basis: 100%; }
.verify-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.verify-details dt { color: var(--muted); }
.verify-details dd { margin: 0; }

@media (max-width: 640px) {
  .cert-offer { grid-template-columns: 1fr; }
  .verify-details dl { grid-template-columns: 1fr; }
  .verify-details dt { margin-top: 6px; }
}
.row-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > form { margin-top: 6px; min-width: 220px; }
/* Text size picker (_icons.html font_picker): the letter shows each size. */
.font-picker .font-sample { font-weight: 700; line-height: 1; display: inline-block; width: 1.1em; text-align: center; }
.font-picker .font-sample.small { font-size: 12px; }
.font-picker .font-sample.medium { font-size: 15px; }
.font-picker .font-sample.large { font-size: 19px; }

/* Public profile (templates/profile.html, profile-settings.html) */
.profile-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile-who { flex: 1; min-width: 220px; }
.profile-who h1 { margin: 0; }
.profile-en { margin: 2px 0 6px; color: var(--muted); font-size: 1.1rem; font-weight: 600; }
.profile-share { display: flex; flex-direction: column; gap: 8px; }
.profile-part { margin-top: 24px; }
.profile-skills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.skill-chip { border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 3px 12px; font-size: 0.9rem; }
.skill-chip b { font-weight: 600; opacity: 0.75; }
.profile-link { display: flex; flex-direction: column; gap: 8px; }
.profile-link > a { overflow-wrap: anywhere; font-weight: 600; }
.profile-link.compact { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* Registration (index.html link, pending.html) */
.landing-register { margin: 0.75em 0 0; text-align: center; }
.pending-page { max-width: 34rem; margin: 2em auto; text-align: center; }
.pending-page .actions { justify-content: center; }

/* Account page (account.html) */
.account-page h2 { margin: 1.5em 0 0.5em; font-size: 1.1rem; }
.account-field { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; margin: 0.5em 0; }
.account-field > span[dir="ltr"] { overflow-wrap: anywhere; }
.account-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75em; }
.account-pending { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; flex-wrap: wrap;
                   border-color: var(--notice-border); background: var(--notice); margin: 0.5em 0; }
.holder-profile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.profile-foot { margin-top: 24px; }
@media (max-width: 640px) { .profile-share { flex-direction: row; flex-wrap: wrap; } }

/* Admin panel: audit log (admin/_audit.html, audit.html) */
.audit-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.audit-summary h3 { margin: 0 0 8px; font-size: 1rem; }
.audit-counts { list-style: none; margin: 0; padding: 0; }
.audit-counts li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.audit-counts li:last-child { border-bottom: 0; }
.audit-table td { vertical-align: top; }
.audit-table .tag { white-space: nowrap; }
@media (max-width: 640px) { .audit-summary { grid-template-columns: 1fr; } }

/* "How is this counted?": long explanations stay one click away (report.html). */
details.explain { margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }
details.explain > summary { cursor: pointer; width: fit-content; color: var(--accent); list-style-position: inside; }
details.explain > p { margin: 6px 0 0; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }

/* Admin: rarely used forms (a user's groups, deleting a user) stay closed until asked for (admin/user.html). */
details.edit-box { margin: 8px 0 16px; }
details.edit-box > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 14px; font-size: 0.9rem;
  color: var(--accent); background: var(--card); border: 1px solid var(--border); border-radius: 8px; list-style: none;
}
details.edit-box > summary::-webkit-details-marker { display: none; }
details.edit-box > summary::after { content: "▾"; color: var(--muted); }
details.edit-box[open] > summary { margin-bottom: 10px; }
details.edit-box[open] > summary::after { content: "▴"; }
details.edit-box:has(.danger-zone) > summary { color: var(--fail); }

/* Appearance and text size as one row each, label and dropdown (_icons.html theme_select, font_select):
   the user menu and the user panel's side menu. */
.pick-row { margin: 0; }
.pick-row label { display: flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 0.9rem; color: var(--text); }
.pick-row label > span { flex: 1; white-space: nowrap; }
.pick-row .icon, .pick-row .font-sample { width: 18px; flex: none; text-align: center; color: var(--muted); }
.pick-row select { padding: 3px 8px; font-size: 0.85rem; min-width: 5.5rem; }
.user-pop form.pick-row { border-top: 0; padding-top: 0; }
.user-pop form.pick-row:first-of-type { border-top: 1px solid var(--border); padding-top: 8px; }
.side-foot .pick-row label { padding: 4px 10px; }

/* User panel (user_panel.html): the admin panel's frame at the site's width. */
main.user-panel { max-width: 1240px; }
.admin-side nav a.sub { padding-inline-start: 34px; font-size: 0.86rem; }
.user-main .feedback-page { max-width: none; margin: 0; }
.account-part { margin-top: 1.5em; padding-top: 1em; border-top: 1px solid var(--border); }
.account-part h2 { display: flex; align-items: center; gap: 8px; }
.names-edit { margin: 0; flex-basis: 100%; }
@media (max-width: 900px) { .admin-side .pick-row { display: none; } }

/* User menu: the plan and one group on a line, the rest on a click (base.html). */
.pop-groups { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.more-groups > summary { display: inline-flex; gap: 4px; cursor: pointer; list-style: none; }
.more-groups > summary::-webkit-details-marker { display: none; }
.more-groups > summary .tag { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.more-groups .tag.more { color: var(--accent); border-color: var(--accent); }
.more-groups[open] > summary { display: none; }
.more-groups > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.more-groups .tag { white-space: normal; }

/* Admin: minimizing a section (static/fold.js). */
.foldable { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.section-head .foldable { flex: 1; }
.fold {
  display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; padding: 2px 10px; flex: none;
  font-size: 0.78rem; font-weight: 500; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
.fold:hover { color: var(--accent); border-color: var(--accent); background: var(--card); }
.fold svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.15s; }
.folded .fold svg { transform: rotate(90deg); }
.folded { color: var(--muted); }
.fold-body[hidden] { display: none; }

/* Admin: tabs over pages merged under one menu item (admin/_macros.html tabs). */
.page-tabs { gap: 2px; padding: 3px; margin: 0 0 14px; width: fit-content; max-width: 100%; overflow-x: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; flex-wrap: nowrap; }
.page-tabs a { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 6px 14px; border-radius: 8px; white-space: nowrap; color: var(--muted); }
.page-tabs a:hover { color: var(--text); background: var(--bg); }
.page-tabs a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.page-tabs .count-dot { margin-inline-start: 2px; }

/* Main page: category chips over a section's groups (static/categories.js). */
.cat-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: thin; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 12px; font-size: 0.88rem;
  color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
.cat-chip small { color: var(--muted); font-size: 0.78rem; }
.cat-chip:hover { background: var(--card); border-color: var(--accent); color: var(--accent); }
.cat-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cat-chip[aria-pressed="true"] small { color: var(--accent); }
details.group.cat-off { display: none; }

/* Main page: the welcome strip's way in for a user with nothing to count yet (index.html). */
.hello-stats a.hello-start { flex-direction: row; gap: 10px; text-align: start; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.hello-start .icon { width: 22px; height: 22px; }
.hello-start span { display: flex; flex-direction: column; font-size: 0.82rem; color: var(--muted); }
.hello-start b { font-size: 1rem; color: var(--accent); }
.report-part > .empty, .fold-body > .empty { margin: 10px 0; }

/* Tables as cards on phones (static/tables.js labels the cells): a row is a card, its first cell the title. */
@media (max-width: 640px) {
  .admin-main table.report.cards thead { display: none; }
  .admin-main table.report.cards, .admin-main table.report.cards tbody { display: block; }
  .admin-main table.report.cards tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .admin-main table.report.cards tr:last-child { border-bottom: 0; }
  .admin-main table.report.cards td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 12px;
    border: 0; min-width: 0; text-align: start;
  }
  .admin-main table.report.cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 0.8rem; flex: none; }
  .admin-main table.report.cards td:first-child { display: block; font-weight: 600; padding-bottom: 6px; }
  .admin-main table.report.cards td:first-child::before { content: none; }
  .admin-main table.report.cards tbody tr:hover td { background: none; }
}

/* Text only screen readers read (the names of action columns in tables). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Topics (playgrounds): main page cards by type, a topic's header, the search and the "all resources" link
   (index.html, app.catalog_page). Skills are blue, paths green, job roles orange. */
.topic-search {
  display: flex; align-items: center; gap: 8px; max-width: 40rem; margin: 0 0 8px; padding: 4px 4px 4px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.topic-search:focus-within { border-color: var(--accent); }
.topic-search > .icon { color: var(--muted); }
.topic-search input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; }
.topic-search input:focus { outline: none; }
.topic-search button { padding: 7px 16px; }
.topic-section { margin-top: 8px; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 14px; }
.topic-card {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; color: var(--text); text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.topic-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.topic-head { display: flex; align-items: center; gap: 12px; }
.topic-head b { font-size: 1.08rem; line-height: 1.5; }
.pg-icon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); object-fit: cover;
}
.pg-icon .icon { width: 22px; height: 22px; }
.pg-icon.path { background: var(--pass-bg); color: var(--pass); }
.pg-icon.role { background: color-mix(in srgb, var(--streak) 14%, var(--card)); color: var(--streak); }
.pg-icon.big { width: 64px; height: 64px; border-radius: 16px; }
.pg-icon.big .icon { width: 30px; height: 30px; }
.topic-card .desc {
  margin: 0; color: var(--muted); font-size: 0.9rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-counts { margin: 0; }
.topic-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 4px; }
.topic-foot .card-progress { flex: 1; }
.topic-go { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
.topic-go .icon { width: 16px; height: 16px; transition: transform 0.15s; }
.topic-card:hover .topic-go .icon { transform: translateX(-3px); }
.all-resources {
  display: flex; align-items: center; gap: 14px; margin: 28px 0 8px; padding: 14px 18px; color: var(--text);
  text-decoration: none; background: var(--card); border: 1px dashed var(--border); border-radius: 14px;
}
.all-resources:hover { border-style: solid; border-color: var(--accent); }
.all-resources > span:not(.pg-icon) { display: flex; flex-direction: column; flex: 1; }
.all-resources small { color: var(--muted); font-size: 0.86rem; }
.all-resources > .icon { color: var(--accent); }
.pg-hero { margin: 0 0 18px; }
.pg-hero h1 { margin: 0 0 4px; font-size: 1.6rem; }
.pg-hero .lead { margin: 0; }
.pg-hero-main { display: flex; align-items: center; gap: 16px; }
.pg-hero-image { width: 88px; height: 88px; border-radius: 16px; object-fit: cover; flex: none; }
.pg-hero-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 14px; }
.pg-progress { flex: 0 1 22rem; min-width: 14rem; }
@media (max-width: 640px) {
  .pg-hero-main { align-items: flex-start; }
  .pg-icon.big { width: 48px; height: 48px; }
  .topic-search { max-width: none; }
}
/* Inside a topic a kind's cards are one group with no heading. */
details.group.flat > summary { display: none; }
/* A topic's picture (images/pg-*.svg) as the card's cover, and beside the topic page's title. */
.topic-card { overflow: hidden; }
.topic-cover { display: block; width: calc(100% + 32px); margin: -16px -16px 2px; aspect-ratio: 16 / 7; object-fit: cover; object-position: top; }
.pg-hero-image { width: 220px; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: top; border-radius: 14px; }
@media (max-width: 640px) { .pg-hero-image { width: 120px; } }
@media (max-width: 720px) { .hello-stats a.hello-start { grid-column: 1 / -1; } }

/* Admin: topics (admin/playgrounds.html). */
.pg-admin-head { display: flex; gap: 16px; align-items: flex-start; }
.pg-admin-head img { width: 180px; aspect-ratio: 16 / 7; object-fit: cover; object-position: top; border-radius: 10px; flex: none; }
.pg-admin-head h3 { margin: 0 0 4px; }
.pg-admin-head .muted { margin: 0 0 6px; }
.pg-admin-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 12px; margin-top: 12px; }
.pg-admin-kinds b { display: inline-flex; align-items: center; gap: 6px; }
.pg-admin-kinds ul { margin: 6px 0 0; padding-inline-start: 1.2rem; font-size: 0.88rem; }
@media (max-width: 640px) { .pg-admin-head { flex-direction: column; } .pg-admin-head img { width: 100%; } }

/* Topics: resources behind premium, and the suggested order of a "layout: ordered" topic (index.html). */
.topic-locked { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 0.84rem; }
.topic-locked .icon { width: 15px; height: 15px; color: var(--streak); }
.pg-hero .topic-locked { margin-top: 10px; }
.topic-steps { margin: 6px 0 20px; }
.topic-steps h2 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin: 0 0 10px; }
.topic-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.topic-steps li {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
}
.topic-steps li .step-mark { width: 32px; height: 32px; }
.topic-steps li.started .step-mark { border-color: var(--accent); color: var(--accent); }
.topic-steps li.done .step-mark { background: var(--pass); border-color: var(--pass); color: #fff; }
.topic-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.topic-step-text small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.8rem; }
.topic-step-text small .icon { width: 14px; height: 14px; }
.topic-steps form { margin: 0; }
.topic-steps .button, .topic-steps button { padding: 5px 14px; font-size: 0.86rem; }
.pg-admin-head > div:nth-child(2) { flex: 1; min-width: 0; }
.pg-funnel { margin-top: 12px; }
.pg-funnel > summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.pg-funnel .funnel { margin-top: 10px; }
/* Signed-out landing: the topics as a preview (index.html). */
.landing-topics-title { text-align: center; font-size: 1.2rem; margin: 30px 0 12px; }
.landing-topics { text-align: start; }
.landing-topics .topic-foot { justify-content: flex-end; }
.landing-more { text-align: center; margin: 12px 0 0; }