/* LearnLab — dark workshop theme */

:root {
  --bg: #0c0f13;
  --surface: #151a21;
  --surface-2: #1b222b;
  --border: #2a333f;
  --text: #d8dee9;
  --text-dim: #8b98a9;
  --accent: #f5b445;        /* CRT amber */
  --accent-dim: #b8843a;
  --green: #7bd88f;
  --red: #f07178;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------------- Header ---------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.brand { display: flex; align-items: center; gap: 0.7rem; }

.brand-mark {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
}

.brand-name { font-weight: 650; letter-spacing: 0.01em; }

.header-actions { display: flex; align-items: center; gap: 0.8rem; }

.status {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  border: 1px solid var(--border);
}
.status-connecting { color: var(--accent); }
.status-ok { color: var(--green); border-color: #2c4a36; }
.status-error { color: var(--red); border-color: #55333a; }

/* ---------------- Buttons ---------------- */

.btn {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: filter 120ms ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-quiet {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.btn-quiet:hover { color: var(--text); }

.btn-verify { background: var(--green); }

/* ---------------- Catalog page ---------------- */

.catalog {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.catalog h1 { font-size: 1.9rem; margin: 0 0 0.4rem; }
.catalog-intro { color: var(--text-dim); max-width: 46rem; margin-bottom: 2.2rem; }

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

.course-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 140ms ease, transform 140ms ease;
}
.course-card:hover { border-color: var(--accent-dim); transform: translateY(-2px); }
.course-card h2 { font-size: 1.1rem; margin: 0.6rem 0 0.35rem; }
.course-card p { color: var(--text-dim); font-size: 0.88rem; margin: 0 0 0.9rem; }

.card-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pill {
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.12rem 0.5rem;
  border-radius: 99px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.pill-quiet { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }

.card-cta { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); }
.empty-state { color: var(--text-dim); }

/* ---------------- Lab layout ---------------- */

.lab-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.lab-header { flex: 0 0 auto; }

.lab-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(340px, var(--lab-split, 44%)) 6px minmax(0, 1fr);
  min-height: 0;
}

/* Lesson pane */
.lesson-pane {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  min-height: 0;
  background: var(--surface);
}

.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
}
.step-indicator {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: center;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-bar { height: 3px; background: var(--surface-2); }
#progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 220ms ease; }

.lesson-content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.4rem 1.6rem 2rem;
  min-height: 0;
}
.lesson-content h1 { font-size: 1.45rem; margin-top: 0; }
.lesson-content h2 { font-size: 1.15rem; margin-top: 1.6em; }
.lesson-content a { color: var(--accent); }
.lesson-content code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.08em 0.35em;
}
.lesson-content blockquote {
  margin: 1em 0;
  padding: 0.6em 1em;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
  color: var(--text-dim);
}

.code-block {
  position: relative;
  background: #101418;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
}
.code-block code { background: none; border: none; padding: 0; font-size: 0.85rem; }
.code-block.runnable { border-color: var(--accent-dim); padding-right: 4.5rem; }

.run-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
}
.run-btn:hover { filter: brightness(1.12); }

/* Error banner */
.error-banner {
  margin: 0.8rem 1rem 0;
  padding: 0.7rem 1rem;
  border: 1px solid #55333a;
  border-radius: 10px;
  background: #241419;
  color: var(--red);
  font-size: 0.88rem;
}

/* Verify box */
.verify-box {
  flex: 0 0 auto;
  padding: 0.9rem 1.6rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.verify-box.hidden { display: none; }
.verify-result { font-size: 0.88rem; margin-top: 0.55rem; min-height: 1.2em; }
.verify-pass { color: var(--green); }
.verify-fail { color: var(--red); }

/* Terminal pane */
.terminal-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #101418;
}

.terminal-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot-red { background: #f07178; }
.dot-yellow { background: var(--accent); }
.dot-green { background: #7bd88f; }
.terminal-title { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); margin-left: 0.4rem; }

#terminal { flex: 1 1 0; min-height: 0; padding: 0.5rem 0.3rem 0.3rem 0.7rem; }
#terminal .xterm { height: 100%; }

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .lab-layout { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .pane-divider { display: none; }
  .lesson-pane { border-right: none; border-bottom: 1px solid var(--border); }
  
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------------- Auth / user chip ---------------- */

.user-chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
}
.user-chip::before { content: "@"; opacity: 0.6; }
.hidden { display: none !important; }

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-card {
  width: min(360px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem 1.8rem;
}
.login-card h1 { font-size: 1.3rem; margin: 0 0 0.2rem; text-align: center; }
.login-hint { color: var(--text-dim); font-size: 0.85rem; text-align: center; margin: 0 0 1.4rem; }
.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.3rem; font-family: var(--mono); }
.field input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  font-family: var(--sans);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.login-btn { width: 100%; margin-top: 0.4rem; padding: 0.6rem; }
#login-error { margin-top: 0.7rem; text-align: center; }

/* ---------------- Port preview buttons ---------------- */

.port-buttons { display: flex; gap: 0.4rem; }
.port-btn { text-decoration: none; color: var(--accent); border-color: var(--accent-dim); }
.port-btn:hover { color: var(--accent); filter: brightness(1.15); }

/* ---------------- Quiz ---------------- */

.quiz { margin-top: 1.6rem; border-top: 1px dashed var(--border); padding-top: 1.2rem; }
.quiz-question {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1rem;
}
.quiz-question legend {
  font-weight: 600;
  padding: 0 0.4rem;
  font-size: 0.95rem;
}
.quiz-option {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.92rem;
}
.quiz-option:hover { background: var(--surface); }
.quiz-option input { accent-color: var(--accent); margin-right: 0.35rem; }
.quiz-q-result { font-size: 0.85rem; margin-top: 0.4rem; min-height: 0; color: var(--text-dim); }
.quiz-correct { border-color: #2c4a36; }
.quiz-correct .quiz-q-result { color: var(--green); }
.quiz-wrong { border-color: #55333a; }
.quiz-wrong .quiz-q-result { color: var(--red); }

/* ---------------- Admin dashboard ---------------- */

.admin-section { overflow-x: auto; }
.admin-table {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.88rem;
}
.admin-table th, .admin-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.admin-table th { font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); font-weight: 600; }
.admin-table small { color: var(--text-dim); }
.user-cell { font-family: var(--mono); color: var(--accent); }
.cell-done { color: var(--green); }
.cell-empty { color: var(--text-dim); }
.pill-done { background: var(--green); color: var(--bg); }

.site-footer {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Typing practice mode */
.typing-note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--accent);
}

/* Admin: typing practice toggle */
.ft-reset { margin-left: 0.6rem; padding: 0.1rem 0.5rem; font-size: 0.72rem; }

/* Remote desktop pane (RDP courses) */
.rdp-display {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
  outline: none;
  cursor: none;
  /* CRITICAL - do not remove: guacamole-common-js gives every layer canvas
     z-index -1. Without a stacking context here, those canvases paint
     BEHIND this element's background = "black screen, cursor works".
     position + z-index create the stacking context that contains them. */
  position: relative;
  z-index: 0;
}
.rdp-display:focus { box-shadow: inset 0 0 0 2px var(--accent-dim); }

/* Language selector (course overview header) */
.lang-select {
  background: var(--bg-raised, #1c1f27);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, #333845);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.lang-select:focus, .lang-select:hover { outline: none; border-color: rgba(255, 255, 255, 0.65); }

/* Course editor */
.editor-layout { display: flex; gap: 1.5rem; padding: 1.5rem 2rem; max-width: none; margin: 0 auto; align-items: flex-start; }
.editor-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); }
.editor-sidebar h2 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim, #9aa0ae); margin-bottom: 0.6rem; }
.editor-course-list { display: flex; flex-direction: column; gap: 0.35rem; }
.editor-course { text-align: left; background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 8px; padding: 0.55rem 0.7rem; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 0.1rem; }
.editor-course small { color: var(--text-dim, #9aa0ae); font-size: 0.72rem; }
.editor-course:hover { border-color: var(--accent-dim, #8a6a2f); }
.editor-course.selected { border-color: var(--accent, #f5b445); }
.editor-form { display: flex; flex-direction: column; gap: 0.5rem; }
.editor-form input, .editor-form select { background: var(--bg-raised, #1c1f27); color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.85rem; }
.editor-error { color: #e06c75; font-size: 0.8rem; }
.editor-note { color: var(--text-dim, #9aa0ae); font-size: 0.75rem; margin-top: 0.8rem; line-height: 1.4; }
.editor-main { flex: 1; min-width: 0; }
.editor-toolbar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.editor-files { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.editor-file { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.3rem 0.6rem; cursor: pointer; color: inherit; font-family: var(--mono, monospace); font-size: 0.78rem; }
.editor-file.selected { border-color: var(--accent, #f5b445); color: var(--accent, #f5b445); }
.editor-newfile { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.editor-newfile input { flex: 1; background: var(--bg-raised, #1c1f27); color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.35rem 0.6rem; font-family: var(--mono, monospace); font-size: 0.8rem; }
.editor-filebar { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.editor-dirty { color: var(--accent, #f5b445); font-size: 0.8rem; }
#ed-text { width: 100%; height: 60vh; background: #12141a; color: #e6e6e6; border: 1px solid var(--border, #333845); border-radius: 8px; padding: 0.8rem 1rem; font-family: var(--mono, monospace); font-size: 0.85rem; line-height: 1.5; resize: vertical; }
#ed-text:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.editor-feedback { margin-top: 0.6rem; border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.85rem; }
.editor-feedback ul { margin: 0.4rem 0 0 1.1rem; }
.editor-feedback-ok { background: rgba(80, 200, 120, 0.12); border: 1px solid rgba(80, 200, 120, 0.4); }
.editor-feedback-warn { background: rgba(245, 180, 69, 0.1); border: 1px solid rgba(245, 180, 69, 0.4); }
.editor-feedback-error { background: rgba(224, 108, 117, 0.1); border: 1px solid rgba(224, 108, 117, 0.45); }

/* Editor help drawer */
.help-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 92vw); background: var(--bg-raised, #1c1f27); border-left: 1px solid var(--border, #333845); box-shadow: -12px 0 30px rgba(0,0,0,0.45); z-index: 50; display: flex; flex-direction: column; }
.help-head { display: flex; gap: 0.5rem; padding: 0.8rem; border-bottom: 1px solid var(--border, #333845); }
.help-head input { flex: 1; background: #12141a; color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.5rem 0.7rem; font: inherit; font-size: 0.85rem; }
.help-head input:focus { outline: none; border-color: var(--accent, #f5b445); }
.help-body { overflow-y: auto; padding: 0.6rem 1rem 2rem; }
.help-section { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent, #f5b445); margin: 1.2rem 0 0.4rem; }
.help-article { border: 1px solid var(--border, #333845); border-radius: 8px; margin-bottom: 0.4rem; background: #171a21; }
.help-article summary { padding: 0.55rem 0.8rem; cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.help-article summary::marker { color: var(--accent, #f5b445); }
.help-md { padding: 0 1rem 0.8rem; font-size: 0.86rem; line-height: 1.55; }
.help-md code { background: #12141a; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.82em; }
.help-md pre { background: #12141a; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.6rem 0.8rem; overflow-x: auto; }
.help-md pre code { background: none; padding: 0; }
.help-md table { border-collapse: collapse; margin: 0.5rem 0; }
.help-md th, .help-md td { border: 1px solid var(--border, #333845); padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.help-md blockquote { border-left: 3px solid var(--accent-dim, #8a6a2f); margin: 0.5rem 0; padding: 0.2rem 0.8rem; color: var(--text-dim, #b8bcc6); }
.help-md ul, .help-md ol { padding-left: 1.3rem; }

/* Editor: markdown preview + build log */
.editor-split { display: flex; gap: 0.8rem; }
.editor-split #ed-text { flex: 1; min-width: 0; }
.editor-preview { flex: 1; min-width: 0; height: 60vh; overflow-y: auto; background: var(--bg, #14161c); border: 1px solid var(--border, #333845); border-radius: 8px; padding: 1rem 1.3rem; }
.editor-preview pre { position: relative; }
.preview-norun { position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.68rem; color: var(--text-dim, #9aa0ae); border: 1px dashed var(--border, #333845); border-radius: 4px; padding: 0.1rem 0.4rem; }
.build-log { margin-top: 0.8rem; max-height: 40vh; overflow-y: auto; background: #0d0f13; border: 1px solid var(--border, #333845); border-radius: 8px; padding: 0.7rem 1rem; font-size: 0.78rem; line-height: 1.45; white-space: pre-wrap; }
.build-log.build-ok { border-color: rgba(80, 200, 120, 0.5); }
.build-log.build-failed { border-color: rgba(224, 108, 117, 0.55); }


/* Pane divider (drag to resize lesson/terminal split) */
.pane-divider {
  cursor: col-resize;
  background: var(--border);
  position: relative;
}
.pane-divider::after {          /* wider invisible grab area */
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -4px; right: -4px;
}
.pane-divider:hover, body.pane-dragging .pane-divider { background: var(--accent); }
body.pane-dragging { cursor: col-resize; user-select: none; }
body.pane-dragging iframe, body.pane-dragging #terminal, body.pane-dragging .rdp-display { pointer-events: none; }

/* Pop-out terminal button */
.popout-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim, #9aa0ae);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
}
.popout-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Versions panel + diff coloring + quiz preview */
.versions-panel { margin-top: 0.8rem; border: 1px solid var(--border, #333845); border-radius: 8px; padding: 0.7rem 0.9rem; background: #171a21; }
.vp-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.vp-state { color: var(--accent, #f5b445); font-size: 0.78rem; }
.vp-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 6px; font-size: 0.82rem; }
.vp-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.vp-row.vp-active { outline: 1px solid var(--accent-dim, #8a6a2f); }
.vp-meta { color: var(--text-dim, #9aa0ae); font-size: 0.76rem; }
.vp-files { color: var(--text-dim, #9aa0ae); font-size: 0.74rem; cursor: help; }
.vp-btn { font-size: 0.72rem; padding: 0.15rem 0.5rem; }
.dl-add { color: #50c878; }
.dl-del { color: #e06c75; }
.dl-ctx { color: #6b7280; }
.preview-verify { margin-top: 1.2rem; border: 1px dashed var(--accent-dim, #8a6a2f); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.85rem; }
.preview-quiz { margin-top: 1.2rem; border: 1px dashed var(--border, #333845); border-radius: 8px; padding: 0.7rem 1rem; }
.preview-quiz h3 { margin-top: 0; font-size: 0.95rem; }
.pq-q { margin-bottom: 0.9rem; }
.pq-opt { display: block; padding: 0.15rem 0; font-size: 0.86rem; }
.pq-correct { color: #50c878; }
.pq-check { font-size: 0.72rem; }
.pq-multi { font-size: 0.7rem; color: var(--text-dim, #9aa0ae); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.3rem; }
.pq-explain { color: var(--text-dim, #b8bcc6); font-size: 0.8rem; }
.pq-note { font-size: 0.7rem; }


/* Recent changes feed */
.feed-filters { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.feed-filters select { background: var(--bg-raised, #1c1f27); color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.82rem; }
.feed-count { color: var(--text-dim, #9aa0ae); font-size: 0.78rem; margin-left: auto; }
.feed-day { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent, #f5b445); margin: 1.4rem 0 0.4rem; }
.feed-row { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.88rem; }
.feed-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.feed-icon { width: 1.4rem; text-align: center; }
.feed-time { color: var(--text-dim, #9aa0ae); font-size: 0.75rem; white-space: nowrap; }
.feed-text code { background: #12141a; padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.8em; }

.feed-diff { font-size: 0.78rem; margin-left: 0.4rem; color: var(--accent, #f5b445); }

/* Markdown formatting toolbar */
.md-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-bottom: 0.4rem; }
.mdb { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 6px; color: var(--text-dim, #c8ccd6); font: inherit; font-size: 0.76rem; padding: 0.22rem 0.55rem; cursor: pointer; }
.mdb:hover { color: var(--accent, #f5b445); border-color: var(--accent-dim, #8a6a2f); }
.mdb-b { font-weight: 700; }
.mdb-i { font-style: italic; }
.mdb-sep { width: 1px; height: 1.2rem; background: var(--border, #333845); margin: 0 0.25rem; }
.mdb-templates { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 6px; color: var(--text-dim, #c8ccd6); font: inherit; font-size: 0.76rem; padding: 0.2rem 0.4rem; cursor: pointer; }

/* Collapsible hint boxes (::: hint) */
.lesson-content details.hint-box {
  border: 1px dashed var(--accent-dim, #8a6a2f);
  border-radius: 8px;
  margin: 0.9rem 0;
  background: rgba(245, 180, 69, 0.04);
}
.lesson-content details.hint-box summary {
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  font-weight: 600;
  color: var(--accent, #f5b445);
  user-select: none;
}
.lesson-content details.hint-box summary::marker { color: var(--accent, #f5b445); }
.lesson-content details.hint-box[open] summary { border-bottom: 1px dashed var(--accent-dim, #8a6a2f); }
.lesson-content details.hint-box .hint-body { padding: 0.2rem 1rem 0.6rem; }

/* Skip warning (Next pressed on an unpassed check) */
.skip-warning {
  margin: 0 1rem 0.4rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(245, 180, 69, 0.55);
  background: rgba(245, 180, 69, 0.08);
  border-radius: 8px;
  font-size: 0.85rem;
}
/* Armed skip state: outline style so the label stays readable on the
   normally amber-filled Next button (amber-on-amber = invisible text). */
.btn-warn {
  background: transparent !important;
  border: 1px solid var(--accent, #f5b445) !important;
  color: var(--accent, #f5b445) !important;
}


/* Platform settings page */
.settings-card { border: 1px solid var(--border, #333845); border-radius: 10px; background: var(--surface, #171a21); padding: 1rem 1.3rem; margin-bottom: 1.2rem; }
.settings-card h2 { margin: 0 0 0.8rem; font-size: 1rem; color: var(--accent, #f5b445); }
.setting-row { padding: 0.6rem 0; border-top: 1px solid rgba(255,255,255,0.05); }
.setting-row.row-pending { background: rgba(245, 180, 69, 0.05); }
.setting-head { display: flex; align-items: center; gap: 0.6rem; }
.setting-head code { font-size: 0.85rem; }
.setting-desc { color: var(--text-dim, #9aa0ae); font-size: 0.8rem; margin: 0.25rem 0 0.4rem; }
.setting-row input, .setting-row select { width: min(480px, 100%); background: #12141a; color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.85rem; }
.setting-row input:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.setting-row select:focus { outline: none; border-color: rgba(255, 255, 255, 0.65); }
.src-badge { font-size: 0.68rem; border-radius: 4px; padding: 0.08rem 0.4rem; border: 1px solid var(--border, #333845); color: var(--text-dim, #9aa0ae); }
.src-override { border-color: var(--accent, #f5b445); color: var(--accent, #f5b445); }
.src-env { border-color: #5b8dd9; color: #5b8dd9; }
.clear-btn { font-size: 0.7rem; padding: 0.1rem 0.4rem; }
.settings-savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 0.8rem; background: var(--bg-raised, #1c1f27); border: 1px solid var(--accent-dim, #8a6a2f); border-radius: 10px; padding: 0.7rem 1rem; margin-top: 0.5rem; }
.settings-restart { margin-top: 2rem; border-top: 1px solid var(--border, #333845); padding-top: 1rem; }
.settings-restart h2 { font-size: 1rem; }

/* Extra service terminals (multi-terminal courses) */
.terminal-slot { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.terminal-extra { flex: 1 1 auto; min-height: 0; padding: 0.5rem 0.3rem 0.3rem 0.7rem; }
.terminal-extra .xterm { height: 100%; }


/* Horizontal terminal divider (multi-terminal courses) */
.terminal-hdivider { height: 6px; flex: 0 0 auto; cursor: row-resize; background: var(--border, #333845); position: relative; }
.terminal-hdivider::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.terminal-hdivider:hover, body.pane-dragging-v .terminal-hdivider { background: var(--accent, #f5b445); }
body.pane-dragging-v { cursor: row-resize; user-select: none; }
body.pane-dragging-v #terminal, body.pane-dragging-v .terminal-extra { pointer-events: none; }

/* Help article manager */
.help-manager { margin-bottom: 0.6rem; }
.hm-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.hm-list { max-height: 34vh; overflow-y: auto; border: 1px solid var(--border, #333845); border-radius: 8px; background: #171a21; margin-bottom: 0.6rem; }
.hm-item { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.05); color: inherit; font: inherit; font-size: 0.83rem; padding: 0.4rem 0.7rem; cursor: pointer; }
.hm-item:hover { background: rgba(255,255,255,0.03); }
.hm-item.selected { outline: 1px solid var(--accent-dim, #8a6a2f); }
.hm-item small { color: var(--text-dim, #9aa0ae); }
.hm-badge { font-size: 0.66rem; border: 1px solid var(--border, #333845); border-radius: 4px; padding: 0.05rem 0.35rem; color: var(--text-dim, #9aa0ae); width: 5.2rem; text-align: center; flex-shrink: 0; }
.hm-overridden .hm-badge, .hm-custom .hm-badge { border-color: var(--accent, #f5b445); color: var(--accent, #f5b445); }
.hm-hidden { opacity: 0.45; }
.hm-act { margin-left: auto; font-size: 0.72rem; color: var(--text-dim, #9aa0ae); border: 1px dashed var(--border, #333845); border-radius: 4px; padding: 0.05rem 0.4rem; }
.hm-act:hover { color: var(--accent, #f5b445); border-color: var(--accent, #f5b445); }
.hm-meta { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.hm-meta input { flex: 1; background: #12141a; color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.82rem; }
.hm-meta input:disabled { opacity: 0.6; }

/* Outline badge - .pill is amber-filled with dark text, so overriding only
   the text color makes it invisible (amber on amber). Full outline style: */
.badge-hidden {
  background: transparent !important;
  border: 1px dashed var(--accent, #f5b445) !important;
  color: var(--accent, #f5b445) !important;
}

.course-hidden { opacity: 0.65; border-style: dashed !important; }

.vp-published { border-color: var(--accent, #f5b445) !important; color: var(--accent, #f5b445) !important; }

/* WYSIWYG editing */
.ed-visual { flex: 1; min-height: 0; overflow-y: auto; background: #12141a; border: 1px solid var(--border, #333845); border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.9rem; outline: none; }
.ed-visual:focus { border-color: var(--accent-dim, #8a6a2f); }
.ed-visual pre { background: #0d0f13; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.5rem 0.7rem; }
.raw-md { white-space: pre-wrap; font-family: var(--mono, monospace); font-size: 0.82rem; color: var(--text-dim, #c8ccd6); }


/* Category sections on the overview */
.course-sections { display: block; }
.cat-header { font-size: 1.05rem; color: var(--accent, #f5b445); margin: 1.6rem 0 0.7rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border, #333845); }
.cat-header:first-child { margin-top: 0.4rem; }
.cat-grid { margin-bottom: 0.4rem; }
.pill-seq { background: transparent; border: 1px solid var(--accent, #f5b445); color: var(--accent, #f5b445); }

/* Course search + category filter */
.course-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
#course-search { background: var(--surface, #171a21); border: 1px solid var(--border, #333845); border-radius: 8px; color: inherit; font: inherit; font-size: 0.88rem; padding: 0.45rem 0.8rem; width: min(340px, 100%); }
#course-search:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.cat-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cat-chip { background: transparent; border: 1px solid var(--border, #333845); border-radius: 99px; color: var(--text-dim, #9aa0ae); font: inherit; font-size: 0.76rem; padding: 0.22rem 0.75rem; cursor: pointer; }
.cat-chip:hover { color: var(--accent, #f5b445); border-color: var(--accent-dim, #8a6a2f); }
.cat-chip.active { color: var(--accent, #f5b445); border-color: var(--accent, #f5b445); }

/* Custom branding */
.brand-logo { height: 1.9rem; max-width: 200px; object-fit: contain; display: block; }
.brand-mark-logo { background: none !important; border: none !important; padding: 0 !important; }

/* Running-session pill on course cards */
/* Session status row: larger than meta chips - it's live state, not a tag.
   0.85rem matches the card body text; tabular-nums keeps the countdown
   from wobbling; the dot pulses gently while running. */
.pill-running {
  background: color-mix(in srgb, #3fbf6f 8%, transparent);
  border: 1px solid #3fbf6f; color: #3fbf6f;
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem; padding: 0.3rem 0.75rem;
  display: inline-flex; align-items: center; gap: 0.15rem;
}
.pill-running::first-letter { animation: run-pulse 2s ease-in-out infinite; }
@keyframes run-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .pill-running::first-letter { animation: none; } }

/* RDP hand-off placeholder (desktop moved to the pop-out window) */
.rdp-handoff { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
               gap: 0.6rem; text-align: center; color: var(--text-dim, #9aa0ae); padding: 1rem; }
.rdp-handoff-icon { font-size: 2.2rem; color: var(--accent, #f5b445); }
.rdp-handoff p { margin: 0; }
.rdp-handoff-sub { font-size: 0.82rem; max-width: 420px; }
.rdp-handoff .btn { margin-top: 0.6rem; }

/* Editor sidebar: actions pinned on top, list scrolls independently */
.sidebar-top { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }
.sidebar-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sidebar-action { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
#course-filter { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 8px; color: inherit; font: inherit; font-size: 0.85rem; padding: 0.45rem 0.7rem; width: 100%; box-sizing: border-box; }
#course-filter:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.editor-sidebar .editor-course-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 2px; }

.running-header { color: #3fbf6f; border-bottom-color: #2a5c3f; }

.pill-stop {
  background: transparent; border: 1px solid var(--border, #333845);
  color: var(--text-dim, #9aa0ae); cursor: pointer; font: inherit;
  font-size: 0.85rem; padding: 0.3rem 0.75rem;
}
.pill-stop:hover { border-color: #e06c75; color: #e06c75; }


/* RDP connect form (host/credentials prompts) */
.rdp-connect { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.7rem; padding: 1rem; cursor: default; }
.rdp-connect h3 { margin: 0 0 0.3rem; }
.rdp-connect label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-dim, #9aa0ae); width: min(340px, 90%); }
.rdp-connect input { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 8px; color: inherit; font: inherit; padding: 0.5rem 0.7rem; }
.rdp-connect input:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.rdp-connect-note { font-size: 0.75rem; color: var(--text-dim, #9aa0ae); margin: 0; max-width: 340px; text-align: center; }
.rdp-connect-error { color: #e06c75; font-size: 0.85rem; margin: 0; max-width: 380px; text-align: center; }

.prog-reset { background: transparent; border: 1px solid var(--border, #333845); border-radius: 6px; color: var(--text-dim, #9aa0ae); cursor: pointer; font-size: 0.7rem; padding: 0.1rem 0.45rem; margin-top: 0.25rem; }
.prog-reset:hover { border-color: var(--accent-dim, #8a6a2f); color: var(--accent, #f5b445); }

/* Settings: inactive-setting marking + toolbar */
.settings-toolbar { margin: 0.5rem 0 1rem; }
.hide-inactive-toggle { font-size: 0.85rem; color: var(--text-dim, #9aa0ae); display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.cat-active-count { font-size: 0.7rem; font-weight: 400; color: var(--text-dim, #9aa0ae); }
.setting-inactive { opacity: 0.5; }
.setting-inactive:hover { opacity: 0.85; }
.inactive-badge { font-size: 0.68rem; background: #2a2f3a; color: #9aa0ae; border-radius: 99px; padding: 0.08rem 0.5rem; }

/* Settings: category sidebar + single-panel layout */
.settings-layout { display: flex; gap: 1rem; align-items: flex-start; }
.settings-nav { flex: 0 0 220px; display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 1rem; }
.cat-btn { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-dim, #9aa0ae); font: inherit; font-size: 0.85rem; padding: 0.45rem 0.7rem; cursor: pointer; }
.cat-btn:hover { background: var(--bg-raised, #1c1f27); color: inherit; }
.cat-btn-current { background: var(--bg-raised, #1c1f27); border-color: var(--border, #333845); color: inherit; }
.cat-count { font-size: 0.7rem; color: var(--text-dim, #9aa0ae); float: right; margin-top: 0.15rem; }
.cat-dirty { color: var(--accent, #f5b445); }
.settings-layout #settings-root { flex: 1 1 auto; min-width: 0; }
.settings-toolbar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
#setting-search { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 8px; color: inherit; font: inherit; font-size: 0.85rem; padding: 0.45rem 0.7rem; width: min(320px, 100%); }
#setting-search:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
@media (max-width: 800px) {
  .settings-layout { flex-direction: column; }
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; width: 100%; }
  .cat-count { float: none; }
}


/* Logons feed */
.logon-failed { border-left: 3px solid #c0504d; }
.logon-failed .feed-icon { filter: none; }
.feed-detail { color: var(--text-dim, #9aa0ae); font-size: 0.8rem; margin-left: 0.4rem; }


/* Toggle switch (settings: hide inactive) */
.hide-inactive-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; color: var(--text-dim, #9aa0ae); user-select: none; }
.hide-inactive-toggle:hover { color: inherit; }
.hide-inactive-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track { flex: 0 0 34px; width: 34px; height: 18px; border-radius: 9px; background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); position: relative; transition: background 0.15s, border-color 0.15s; }
.toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-dim, #9aa0ae); transition: transform 0.15s, background 0.15s; }
.hide-inactive-toggle input:checked + .toggle-track { background: color-mix(in srgb, var(--accent, #f5b445) 25%, var(--bg-raised, #1c1f27)); border-color: var(--accent, #f5b445); }
.hide-inactive-toggle input:checked + .toggle-track::after { transform: translateX(16px); background: var(--accent, #f5b445); }
.hide-inactive-toggle input:focus-visible + .toggle-track { outline: 2px solid var(--accent-dim, #8a6a2f); outline-offset: 2px; }


/* Local accounts create row */
.la-create { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border, #333845); }
.la-create input, .la-create select { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 8px; color: inherit; font: inherit; font-size: 0.85rem; padding: 0.4rem 0.6rem; }
.la-create input:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.la-create select:focus { outline: none; border-color: rgba(255, 255, 255, 0.65); }


/* Local accounts: name left, actions in a fixed right-aligned column */
#la-list .feed-entry { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.2rem; border-bottom: 1px solid var(--border, #333845); }
#la-list .feed-entry:last-child { border-bottom: none; }
#la-list .feed-icon { flex: 0 0 1.4rem; text-align: center; }
#la-list .feed-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; }
#la-list .la-pw { flex: 0 0 auto; font-size: 0.8rem; padding: 0.3rem 0.7rem; }
#la-list .la-del { flex: 0 0 2rem; font-size: 0.8rem; padding: 0.3rem 0; text-align: center; }
#la-list .la-del:hover { border-color: #e06c75; color: #e06c75; }


/* Egress not-enforced warning on settings */
.egress-warning { border: 1px solid #c0504d; }
.egress-warning h2 { color: #e06c75; }


/* ---------------- Structured course form ---------------- */
.course-form-wrap { overflow-y: auto; max-height: 70vh; padding: 0.25rem 0.25rem 2rem; }
/* Width is user-adjustable via the ↔ slider in the editor (persisted in
   localStorage); 780px is the classic default. */
.course-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: var(--cf-width, 780px); }
.cf-section { border: 1px solid var(--border, #333845); border-radius: 12px; background: var(--bg-raised, #1c1f27); }
.cf-section-head { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border, #333845); }
.cf-section-head h3 { margin: 0; font-size: 0.95rem; }
.cf-sub { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--text-dim, #9aa4b2); line-height: 1.4; }
.cf-section-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.cf-field { display: flex; flex-direction: column; gap: 0.25rem; }
.cf-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim, #cbd2dc); }
.cf-hint { font-size: 0.75rem; color: var(--text-dim, #9aa4b2); line-height: 1.35; }
.cf-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: flex-end; }
.cf-row .cf-field { flex: 0 0 auto; }
.course-form input[type=text], .course-form input[type=password], .course-form input[type=number], .course-form textarea, .course-form select {
  background: var(--bg, #14171d); border: 1px solid var(--border, #333845); border-radius: 8px;
  color: inherit; font: inherit; font-size: 0.85rem; padding: 0.4rem 0.6rem; width: 100%; box-sizing: border-box;
}
.course-form textarea { resize: vertical; font-family: inherit; }
.course-form input:focus, .course-form textarea:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.cf-net { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-seg { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cf-seg-btn { background: var(--bg, #14171d); border: 1px solid var(--border, #333845); border-radius: 8px; color: inherit; font: inherit; font-size: 0.82rem; padding: 0.45rem 0.8rem; cursor: pointer; }
.cf-seg-btn.active { border-color: var(--accent, #d99a3a); background: var(--accent-dim-bg, rgba(217,154,58,0.14)); color: var(--accent, #e6ab4f); font-weight: 600; }
.cf-rep, .cf-svc-list, .cf-steps { display: flex; flex-direction: column; gap: 0.5rem; }
.cf-rep-row { display: flex; gap: 0.4rem; align-items: center; }
.cf-svc, .cf-step { border: 1px solid var(--border, #333845); border-radius: 10px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; background: var(--bg, #14171d); }
.cf-svc-head, .cf-step-head { display: flex; gap: 0.5rem; align-items: center; }
.cf-step-num { font-size: 0.8rem; color: var(--text-dim, #9aa4b2); font-weight: 600; flex: 0 0 auto; }
.cf-steps-add { display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.cf-quiz { border-top: 1px dashed var(--border, #333845); padding-top: 0.55rem; display: flex; flex-direction: column; gap: 0.55rem; }
.cf-quiz-label { font-size: 0.78rem; font-weight: 600; color: var(--accent, #e6ab4f); }
.cf-quiz-q { border-left: 2px solid var(--border, #333845); padding-left: 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cf-quiz-qhead { display: flex; gap: 0.4rem; }
.cf-quiz-opts { display: flex; flex-direction: column; gap: 0.3rem; }
.cf-quiz-opt { display: flex; gap: 0.4rem; align-items: center; }
.cf-quiz-opt input[type=radio] { width: auto; flex: 0 0 auto; }


.cf-sliders { display: flex; gap: 1.5rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--border, #333845); }
.cf-rdp-group { display: flex; flex-direction: column; gap: 0.8rem; }
.course-form .hide-inactive-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; }
.course-form .hide-inactive-toggle input { position: absolute; opacity: 0; }


/* form row alignment: labels top-aligned so hints don't push siblings around */
.cf-row { align-items: flex-start; }
.cf-row .cf-field { justify-content: flex-start; }
.cf-verify-row { display: flex; gap: 0.8rem; align-items: flex-end; }
.cf-verify-row .cf-field { flex: 1; }
.cf-step-strict { flex: 0 0 auto; padding-bottom: 0.5rem; }
.cf-sliders { flex-wrap: wrap; row-gap: 0.5rem; }


/* Languages panel */
.lp-card { border: 1px solid var(--border, #333845); border-radius: 10px; padding: 0.8rem; margin-bottom: 0.8rem; background: var(--bg, #14171d); }
.lp-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.lp-grid { display: grid; grid-template-columns: 6rem 1fr 1fr; gap: 0.4rem 0.7rem; align-items: start; }
.lp-lab { font-size: 0.78rem; font-weight: 600; color: var(--text-dim, #9aa4b2); padding-top: 0.45rem; }
.lp-en { font-size: 0.83rem; color: var(--text-dim, #b9c0cc); padding: 0.45rem 0.2rem; border-left: 2px solid var(--border, #333845); padding-left: 0.5rem; }
.lp-grid input, .lp-grid textarea { background: var(--bg-raised, #1c1f27); border: 1px solid var(--border, #333845); border-radius: 8px; color: inherit; font: inherit; font-size: 0.85rem; padding: 0.4rem 0.6rem; width: 100%; box-sizing: border-box; }
.lp-grid input:focus, .lp-grid textarea:focus { outline: none; border-color: var(--accent-dim, #8a6a2f); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0.5rem; }
.lp-chip { font-size: 0.75rem; padding: 0.25rem 0.55rem; }
.lp-chip-missing { border-style: dashed; opacity: 0.75; }
.lp-foot { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.5rem; }


/* language groups in the file list */
.editor-file.lang-group { border-style: dashed; opacity: 0.9; }
.editor-file.lang-group.open { border-color: var(--accent-dim, #8a6a2f); opacity: 1; }


/* btn-primary was referenced everywhere but never defined - the accent
   button style (Save, active panel toggles, Create). */
.btn-primary { background: var(--accent, #d99a3a) !important; border-color: var(--accent, #d99a3a) !important; color: #1a1408 !important; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.08); color: #1a1408 !important; }

/* file list: dividers + language boxes below */
.file-divider { flex-basis: 100%; height: 0; border-top: 1px solid var(--border, #333845); margin: 0.25rem 0; }
.file-divider.file-divider-strong { border-top-width: 2px; }


/* language box with untranslated lessons */
.editor-file.lang-group.lang-missing { border-color: #d9863a; color: #e6a35f; }
.editor-feedback .fb-create { font-size: 0.72rem; padding: 0.15rem 0.5rem; margin-left: 0.4rem; }


.cf-svc-foot { display: flex; align-items: center; gap: 1rem; }


.lp-head-btn { width: 100%; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0.1rem 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.lp-head-btn:hover strong { color: var(--accent, #e6ab4f); }


/* Languages panel: nesting + correct-answer highlight */
.lp-depth-1 { padding-left: 1rem !important; }
.lp-depth-2 { padding-left: 2.2rem !important; }
.lp-en.lp-depth-1, .lp-en.lp-depth-2 { border-left-color: var(--accent-dim, #8a6a2f); }
.lp-grid input.lp-depth-1-inp { margin-left: 0.6rem; width: calc(100% - 0.6rem); }
.lp-grid input.lp-depth-2-inp { margin-left: 1.4rem; width: calc(100% - 1.4rem); }
.lp-en.lp-correct { color: #7ec98f; }
.lp-grid input.lp-correct { border-color: #3f7a4c; }
.lp-grid input.lp-correct:focus { border-color: #5aa76b; }


.pill-team {
  background: transparent;
  border: 1px solid #5a7fb8;
  color: #8fb3e8;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  vertical-align: middle;
}


.cf-teams { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cf-team-chips { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.cf-chip-x { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.65rem; padding: 0 0 0 0.15rem; opacity: 0.7; }
.cf-chip-x:hover { opacity: 1; }


/* team filter: its own labeled row, visually distinct from categories */
.team-filter { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.45rem; }
.team-filter-label { font-size: 0.75rem; color: var(--text-dim, #9aa4b2); font-family: var(--mono); margin-right: 0.15rem; }
.team-chip { font-family: var(--mono); font-size: 0.72rem; padding: 0.15rem 0.6rem; border-radius: 99px; background: transparent; border: 1px solid var(--border, #333845); color: var(--text-dim, #9aa4b2); cursor: pointer; }
.team-chip:hover { border-color: #5a7fb8; color: #8fb3e8; }
.team-chip.active { border-color: #5a7fb8; color: #8fb3e8; background: rgba(90, 127, 184, 0.12); }


.pill-staged { background: transparent; border: 1px solid var(--accent, #d99a3a); color: var(--accent, #e6ab4f); white-space: nowrap; }


/* Selects: the arrow sits in its own subtly lighter well that follows the
   border-radius. No divider. Hover: well brightens, chevron and box outline
   go white. !important because several theme rules use the background
   SHORTHAND with higher specificity. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa4b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045)) !important;
  background-repeat: no-repeat !important;
  background-position: right 0.7rem center, right center !important;
  background-size: 10px 6px, 2.1rem 100% !important;
  padding-right: 2.7rem !important;
  cursor: pointer;
}
select:hover, select:focus {
  border-color: rgba(255, 255, 255, 0.65);
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) !important;
}
select::-ms-expand { display: none; }


/* Languages panel: card head row with the remove button beside the toggle */
.lp-head-row { display: flex; align-items: stretch; gap: 0.35rem; }
.lp-head-row .lp-head-btn { flex: 1; }
.lp-del { align-self: center; padding: 0.25rem 0.5rem; opacity: 0.65; }
.lp-del:hover { opacity: 1; border-color: #e06c75; color: #e06c75; }


.cf-xs-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.cf-xs-row { align-items: center; gap: 0.4rem; }
.cf-xs-rows + button { margin-top: 0.3rem; align-self: flex-start; }


.cf-svc-vols { display: flex; flex-direction: column; gap: 0.3rem; }
.cf-svc-vol { align-items: center; gap: 0.4rem; }
.cf-vol-arrow { color: var(--text-dim, #9aa4b2); }
.cf-svc-vols > button { align-self: flex-start; margin-top: 0.2rem; }
.cf-svc textarea { background: var(--bg-raised, #1c1f27); color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.4rem 0.6rem; font-family: var(--mono, monospace); font-size: 0.8rem; resize: vertical; }


.editor-feedback { position: relative; }
.fb-close { position: absolute; top: 0.35rem; right: 0.45rem; background: transparent; border: none; color: inherit; opacity: 0.55; cursor: pointer; font-size: 0.85rem; padding: 0.15rem 0.3rem; }
.fb-close:hover { opacity: 1; }


.cf-vol-ro { white-space: nowrap; font-size: 0.78rem; }


/* Languages panel: the completeness stats earn their space */
.lp-head-btn { display: flex; align-items: center; gap: 0.6rem; }
.lp-head-btn strong { font-size: 1.05rem; }
.lp-head-btn .feed-count { margin-left: auto; font-size: 0.95rem; letter-spacing: 0.01em; }


/* Users page: raw users.yaml editor */
.uy-text { width: 100%; background: #12141a; color: inherit; border: 1px solid var(--border, #333845); border-radius: 8px; padding: 0.7rem 0.9rem; font-family: var(--mono, monospace); font-size: 0.85rem; line-height: 1.5; resize: vertical; }
.uy-text:focus { outline: none; border-color: var(--accent, #f5b445); }


/* Settings: startup warnings card */
.boot-warnings-card { border-color: #8a6a2f; }
.boot-warnings-card h2 { color: #f0d9a8; }
.bw-list { margin: 0.4rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.85rem; line-height: 1.5; }
.bw-src { display: inline-block; background: rgba(138,106,47,0.25); border: 1px solid #8a6a2f; color: #f0d9a8; border-radius: 4px; padding: 0 0.4rem; font-size: 0.72rem; font-family: var(--mono, monospace); margin-right: 0.3rem; }


.cf-kernel-group { border: 1px solid var(--border, #333845); border-radius: 8px; padding: 0.7rem 0.9rem 0.9rem; margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cf-kernel-group > .cf-label { opacity: 0.85; }
.cf-kernel-group textarea { background: #12141a; color: inherit; border: 1px solid var(--border, #333845); border-radius: 6px; padding: 0.4rem 0.6rem; font-family: var(--mono, monospace); font-size: 0.8rem; resize: vertical; }


/* Performance page */
.perf-bar { position: relative; height: 1.6rem; background: #12141a; border: 1px solid var(--border, #333845); border-radius: 8px; overflow: hidden; margin-top: 0.6rem; }
.perf-fill { height: 100%; background: linear-gradient(90deg, #3f7d4e, #5aa86b); transition: width 0.6s; }
.perf-fill.perf-warm { background: linear-gradient(90deg, #8a6a2f, #c99a3f); }
.perf-fill.perf-hot { background: linear-gradient(90deg, #8a2f2f, #c94a3f); }
.perf-bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-family: var(--mono, monospace); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.perf-user-row td { border-top: 2px solid var(--border, #333845); padding-top: 0.55rem; }
.perf-detail-row td { color: var(--text-dim, #9aa0ae); font-size: 0.82rem; }


/* form width slider */
.cf-width-ctl { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 0.6rem; color: var(--text-dim, #9aa0ae); font-size: 0.8rem; }
.cf-width-ctl input[type=range] { width: 9rem; accent-color: var(--accent, #f5b445); }


/* "everyone" state chip: same shape as team pills, muted - it's the
   absence of a restriction, not a team. */
.pill-everyone { border-color: var(--border, #333845); color: var(--text-dim, #9aa4b2); background: transparent; }


/* Settings header link when startup warnings exist */
.btn.has-warnings { color: #e8b84a; border-color: #8a6a2f; }
.btn.has-warnings:hover { color: #f0d9a8; border-color: #c99a3f; }


/* Main container styled as a card like the extra services */
.cf-main-card { border: 1px solid var(--border, #333845); border-radius: 10px; padding: 0.9rem 1rem; }
.cf-svc-envs { display: flex; flex-direction: column; gap: 0.4rem; }