/* ===========================================
   DevOps Hub — Terminal Aesthetic
   =========================================== */

:root {
  --bg: #0a0e14;
  --bg-elev: #11161d;
  --bg-card: #151b23;
  --border: #1f2730;
  --border-bright: #2d3744;
  --text: #c9d1d9;
  --text-dim: #8b949e;
  --text-bright: #f0f6fc;
  --accent: #39d353;        /* terminal green */
  --accent-dim: #2ea043;
  --warn: #f0b72f;
  --danger: #f85149;
  --info: #58a6ff;
  --magenta: #d2a8ff;
  --code-bg: #0d1117;
  --shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4);
  --mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(at 20% 0%, rgba(57, 211, 83, 0.06) 0px, transparent 50%),
    radial-gradient(at 80% 100%, rgba(88, 166, 255, 0.05) 0px, transparent 50%);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--text-bright); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 800px; }

/* ===========================================
   NAV
   =========================================== */
.navbar {
  background: rgba(10, 14, 20, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-bright);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.brand-prompt { color: var(--accent); margin-right: 0.4rem; }
.brand-accent { color: var(--accent); }
.brand .cursor { color: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  align-items: center;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--text-dim);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  transition: all 0.15s;
}
.nav-links a:hover {
  color: var(--text-bright);
  background: var(--bg-elev);
}
.nav-links a.active {
  color: var(--accent);
  background: rgba(57, 211, 83, 0.08);
}
.admin-link {
  color: var(--magenta) !important;
  border: 1px solid var(--border);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  padding: 0;
  background: #1a2e1c;
  border: 2px solid #39d353;
  border-radius: 14px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 0 rgba(57,211,83,0);
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
  background: #213626;
  box-shadow: 0 0 12px rgba(57,211,83,0.25);
  outline: none;
}
.nav-toggle .bar {
  display: block;
  width: 24px;
  height: 3px;
  background: #39d353;
  border-radius: 3px;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1),
              opacity  0.25s cubic-bezier(.4,0,.2,1),
              width    0.25s cubic-bezier(.4,0,.2,1);
}
.nav-toggle.open {
  background: #1a2e1c;
  border-color: #39d353;
  box-shadow: 0 0 12px rgba(57,211,83,0.2);
}
.nav-toggle.open .bar { background: #ffffff; }
.nav-toggle.open .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.open .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ===========================================
   FLASH
   =========================================== */
.flash {
  font-family: var(--mono);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  margin: 1rem auto;
  border-radius: 6px;
  border-left: 3px solid;
  max-width: 1200px;
}
.flash-success { background: rgba(57, 211, 83, 0.08); border-color: var(--accent); color: var(--accent); }
.flash-error { background: rgba(248, 81, 73, 0.08); border-color: var(--danger); color: var(--danger); }

/* ===========================================
   HERO / TERMINAL
   =========================================== */
.hero { padding: 4rem 0 3rem; }

.terminal-window {
  background: var(--code-bg);
  border-radius: 10px;
  border: 1px solid var(--border-bright);
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}
.terminal-bar {
  background: var(--bg-elev);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.terminal-bar .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }
.terminal-title {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-left: auto;
  margin-right: auto;
}
.terminal-body {
  padding: 1.5rem;
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.9;
}
.terminal-body .prompt { color: var(--accent); font-weight: 600; }
.terminal-body .output { color: var(--text); padding-left: 0; }
.terminal-body .accent { color: var(--accent); font-weight: 600; }
.terminal-body .error-text { color: var(--danger); }
.terminal-body .success-text { color: var(--accent); }
.blink { animation: blink 1s steps(2) infinite; color: var(--accent); }

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--code-bg);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: var(--code-bg);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-bright);
}
.btn-secondary:hover {
  background: var(--bg-elev);
  color: var(--text-bright);
  border-color: var(--text-dim);
}

/* ===========================================
   SECTIONS
   =========================================== */
.section { padding: 4rem 0; }
.section-alt { background: var(--bg-elev); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}
.section-head h2 {
  font-family: var(--sans);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-bright);
}
.section-num {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1rem;
  margin-right: 0.5rem;
  font-weight: 500;
}
.see-all {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--text-dim);
}
.see-all:hover { color: var(--accent); }
.tag-count {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ===========================================
   PAGE HEAD
   =========================================== */
.page-head { padding: 3rem 0 2rem; border-bottom: 1px solid var(--border); }
.breadcrumb {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent); }
.page-head h1 {
  font-family: var(--sans);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 0.5rem;
}
.page-sub {
  font-family: var(--mono);
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* ===========================================
   SEARCH
   =========================================== */
.search-bar {
  display: flex;
  align-items: center;
  background: var(--code-bg);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-top: 1.5rem;
  max-width: 500px;
  font-family: var(--mono);
}
.search-prompt { color: var(--accent); font-size: 0.85rem; margin-right: 0.5rem; }
.search-bar input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.9rem;
  outline: none;
}
.search-bar button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 1.1rem;
}

/* ===========================================
   GRID & CARDS
   =========================================== */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(57, 211, 83, 0.08);
}
.card-image {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-elev);
}
.card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border-bright);
}
.card-image-placeholder svg { width: 60px; height: 60px; }
.card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.card h3 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.card h3 a { color: var(--text-bright); }
.card h3 a:hover { color: var(--accent); }
.card p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 1rem; flex: 1; }
.read-more {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  margin-top: auto;
  align-self: flex-start;
}

/* Video card */
.video-card .video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev);
  overflow: hidden;
  cursor: pointer;
}
.video-card .video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.video-card:hover .video-thumb img { transform: scale(1.05); }
.play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: rgba(0,0,0,0.7);
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  padding-left: 4px;
  z-index: 3;
}
button.play-icon {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 0.3s;
  z-index: 1;
  position: relative;
}
.video-card:hover .thumb-video { transform: scale(1.05); }

/* Video play modal */
#vplay-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.vplay-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.vplay-box {
  position: relative;
  z-index: 1;
  width: min(95vw, 1200px);
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.9);
  line-height: 0;
}
.vplay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  line-height: 1;
}
.vplay-close:hover { background: rgba(248,81,73,0.85); border-color: transparent; }
#vplay-video,
#vplay-iframe-wrap iframe {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border: none;
  max-height: 88vh;
  object-fit: contain;
  background: #000;
}
#vplay-iframe-wrap:empty { display: none; }

@media (max-width: 600px) {
  .vplay-box {
    width: 100%;
    border-radius: 0;
    max-height: 100dvh;
  }
  #vplay-video,
  #vplay-iframe-wrap iframe {
    max-height: 56vw;
  }
  .vplay-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }
  .play-icon {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
}

.duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* Tags */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent);
  background: rgba(57, 211, 83, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 4px;
}
a.tag:hover { background: rgba(57, 211, 83, 0.18); }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }

/* Empty state */
.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-dim);
  font-family: var(--mono);
  border: 1px dashed var(--border-bright);
  border-radius: 8px;
}

/* ===========================================
   BLOG POST
   =========================================== */
.blog-post, .video-post { padding: 2.5rem 0 4rem; }
.post-header { margin: 1.5rem 0 2rem; }
.post-header h1 {
  font-family: var(--sans);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.2;
  margin: 0.5rem 0;
}
.post-meta {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.post-cover {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
}
.post-content {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
}
.post-content h1, .post-content h2, .post-content h3 {
  font-family: var(--sans);
  color: var(--text-bright);
  margin: 2rem 0 1rem;
  font-weight: 700;
}
.post-content h1 { font-size: 1.9rem; }
.post-content h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }
.post-content h3 { font-size: 1.25rem; }
.post-content p { margin-bottom: 1.2rem; }
.post-content ul, .post-content ol { margin: 1rem 0 1rem 1.5rem; }
.post-content li { margin-bottom: 0.5rem; }
.post-content a { color: var(--info); text-decoration: underline; text-decoration-color: rgba(88,166,255,0.4); }
.post-content code {
  font-family: var(--mono);
  background: var(--code-bg);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid var(--border);
}
.post-content pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
}
.post-content pre code {
  background: none;
  border: none;
  color: var(--text);
  padding: 0;
}
.post-content blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  color: var(--text-dim);
  font-style: italic;
  margin: 1.5rem 0;
}
.post-content img { max-width: 100%; border-radius: 8px; margin: 1rem 0; }

.post-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Video player */
.video-player {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: black;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 1.5rem;
  border: 1px solid var(--border);
}
.video-player iframe { width: 100%; height: 100%; border: 0; }

/* ===========================================
   TOPICS
   =========================================== */
.topics-by-category {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.topic-category {}

.category-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  border-left: 2px solid var(--accent);
  padding-left: 0.6rem;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.topic {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.25rem;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s;
}
.topic:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  color: inherit;
}
.topic h4 {
  font-family: var(--mono);
  color: var(--text-bright);
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.topic p { font-size: 0.8rem; color: var(--text-dim); font-family: var(--mono); }

/* ===========================================
   ABOUT / PROSE
   =========================================== */
.prose { font-size: 1.05rem; line-height: 1.8; padding: 2rem 0; }
.prose h2 {
  font-family: var(--mono);
  color: var(--accent);
  margin: 2rem 0 1rem;
  font-size: 1.3rem;
}
.prose p, .prose ul { margin-bottom: 1.25rem; }
.prose ul { padding-left: 1.5rem; }

/* ===========================================
   ADMIN
   =========================================== */
.admin-section { padding: 2.5rem 0 4rem; }
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.admin-header h1 { font-size: 2rem; color: var(--text-bright); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 1.25rem;
  border-radius: 6px;
}
.stat-label {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  display: block;
  margin-bottom: 0.5rem;
}
.stat-num {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-bright);
}

.admin-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.admin-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.admin-block h2 {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--text-bright);
}

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.88rem;
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.admin-table th {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-table td a { color: var(--text-bright); }
.admin-table td a:hover { color: var(--accent); }
.actions { display: flex; gap: 0.75rem; }
.link-edit { color: var(--info) !important; cursor: pointer; }
.link-delete {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.88rem;
  padding: 0;
}
.link-delete:hover { text-decoration: underline; }

/* ===========================================
   FORMS
   =========================================== */
.admin-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  margin-top: 1.5rem;
}
.form-row { margin-bottom: 1.25rem; }
.form-row label { display: block; }
.form-row .label {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-bright);
  display: block;
  margin-bottom: 0.4rem;
}
.form-row small {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  display: block;
  margin-top: 0.3rem;
}
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  background: var(--code-bg);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  color: var(--text-bright);
  font-family: var(--mono);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s;
}
.form-row input:focus, .form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(57, 211, 83, 0.1);
}
.markdown-area {
  font-family: var(--mono) !important;
  line-height: 1.6;
}
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

/* ===========================================
   DIFF PREVIEW + VERSION HISTORY  (GitHub-style)
   =========================================== */

/* Wide container so split view has room */
.diff-wide-container { max-width: 1100px; }

/* ── Shared panel shell ───────────────────────────────────── */
.gh-diff-panel, .gh-history-panel {
  background: var(--code-bg);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  margin-top: 1.25rem;
  overflow: hidden;
}

/* ── Header bar ───────────────────────────────────────────── */
.gh-diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-bright);
  flex-wrap: wrap;
}
.gh-diff-header-left, .gh-diff-header-right { display: flex; align-items: center; gap: 0.75rem; }

.gh-diff-title {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-bright);
  font-weight: 600;
}

/* ── Badges ───────────────────────────────────────────────── */
.gh-diff-badge {
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
}
.gh-badge-sm   { font-size: 0.72rem; padding: 1px 6px; }
.gh-badge-changes { background: rgba(57,211,83,0.08); border-color: rgba(57,211,83,0.3); color: var(--accent); }

/* ── Unified / Split toggle ───────────────────────────────── */
.gh-view-toggle {
  display: flex;
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  overflow: hidden;
}
.gh-view-btn {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 3px 12px;
  background: transparent;
  color: var(--text-dim);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.gh-view-btn + .gh-view-btn { border-left: 1px solid var(--border-bright); }
.gh-view-btn:hover  { background: var(--bg-card); color: var(--text-bright); }
.gh-view-btn.active { background: var(--border-bright); color: var(--text-bright); }

/* ── File bar (mimics GitHub file header) ────────────────── */
.gh-diff-file-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.gh-diff-file-bar-inner { border-top: none; background: var(--code-bg); }
.gh-file-icon { color: var(--text-dim); font-size: 0.9rem; }
.gh-file-name { font-family: var(--mono); font-size: 0.82rem; color: var(--text-bright); }

/* ── Table wrapper with scroll ───────────────────────────── */
.gh-diff-table-wrap { overflow-x: auto; }

/* ── Diff table ───────────────────────────────────────────── */
.gh-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.5;
  table-layout: fixed;
}

/* Number cells */
.gd-num {
  width: 46px;
  min-width: 46px;
  padding: 1px 10px;
  text-align: right;
  color: var(--text-dim);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  user-select: none;
  vertical-align: top;
  white-space: nowrap;
}
.gd-num-remove { background: rgba(248,81,73,0.12); color: #f85149; }
.gd-num-add    { background: rgba(57,211,83,0.10); color: #39d353; }
.gd-num-empty  { background: var(--bg-card); }

/* Code cells */
.gd-code {
  padding: 1px 8px;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: top;
  color: var(--text);
}

/* Row colours */
.gd-add    { background: rgba(57, 211, 83, 0.08); color: #39d353; }
.gd-remove { background: rgba(248, 81, 73, 0.08); color: #f85149; }
.gd-same   { color: var(--text-dim); }
.gd-empty  { background: var(--bg-card); color: transparent; }

/* Sign glyph (+ / −) */
.gd-sign {
  display: inline-block;
  width: 1.2ch;
  margin-right: 2px;
  user-select: none;
  opacity: 0.8;
  font-weight: 700;
}

/* Column headers */
.gd-th {
  font-size: 0.72rem;
  color: var(--text-dim);
  background: var(--bg-card);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-bright);
  font-weight: normal;
  text-align: left;
}
.gd-th-left  { border-right: 2px solid var(--border-bright); }
.gd-th-right { }

/* Split: right side column border */
.gh-diff-table td:nth-child(3),
.gh-diff-table th:nth-child(3) {
  border-left: 2px solid var(--border-bright);
}

/* Ellipsis rows */
.gd-ellipsis td {
  padding: 3px 8px;
  text-align: center;
  color: var(--text-dim);
  background: var(--bg-card);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* No-change placeholder */
.gh-diff-no-change {
  padding: 1rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ── Meta field changes ────────────────────────────────────── */
.gh-diff-meta-body { padding: 0.5rem 1rem 0.75rem; }
.gh-meta-row { margin-bottom: 0.6rem; }
.gh-meta-field {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 2px;
}
.gh-meta-vals { display: flex; flex-direction: column; gap: 2px; }
.gh-meta-line {
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 3px;
}

/* ── Version History panel ────────────────────────────────── */
.gh-history-hint {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-left: auto;
}

.gh-history-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.gh-history-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  min-width: 0;
}
.gh-history-ver {
  background: rgba(57,211,83,0.1);
  border: 1px solid rgba(57,211,83,0.3);
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 0.72rem;
  color: var(--accent);
  flex-shrink: 0;
}
.gh-history-dot   { color: var(--border-bright); }
.gh-history-date  { color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.gh-history-title { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gh-history-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.gh-btn-outline, .gh-btn-danger {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 3px 11px;
  border-radius: 5px;
  border: 1px solid;
  cursor: pointer;
  background: transparent;
  transition: all 0.15s;
}
.gh-btn-outline { color: var(--text-dim); border-color: var(--border-bright); }
.gh-btn-outline:hover { color: var(--text-bright); border-color: var(--text-dim); background: var(--bg-elev); }
.gh-btn-danger  { color: var(--danger); border-color: var(--danger); }
.gh-btn-danger:hover  { background: rgba(248,81,73,0.12); }

/* ── Draft banner ────────────────────────────────────────── */
.draft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.9rem;
  margin-bottom: 1.25rem;
  background: rgba(57, 211, 83, 0.06);
  border: 1px solid rgba(57, 211, 83, 0.25);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.draft-banner-text { color: var(--accent); }
.draft-discard-link {
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  transition: all 0.15s;
}
.draft-discard-link:hover { color: var(--danger); border-color: var(--danger); }

/* ── Diff modal overlay ───────────────────────────────────── */
.diff-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.80);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2vh 1rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.diff-modal-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  max-height: 96vh;
  background: var(--code-bg);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

/* Modal header */
.diff-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-bright);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.diff-modal-hdr-left, .diff-modal-hdr-right { display: flex; align-items: center; gap: 0.75rem; }

.diff-modal-title {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-bright);
}

.diff-modal-close {
  background: transparent;
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 3px 9px;
  cursor: pointer;
  line-height: 1.4;
  transition: all 0.15s;
}
.diff-modal-close:hover { color: var(--text-bright); background: var(--bg-card); }

/* Modal scrollable body */
.diff-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Modal footer */
.diff-modal-ftr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--bg-elev);
  border-top: 1px solid var(--border-bright);
  flex-shrink: 0;
}

/* ===========================================
   LOGIN
   =========================================== */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}
.login-wrapper { width: 100%; max-width: 480px; }
.login-terminal { margin: 0; }
.login-form { margin: 1.5rem 0 1rem; }
.login-form label { display: block; margin-bottom: 1rem; }
.login-form label span {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.3rem;
}
.login-form input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-bright);
  color: var(--text-bright);
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 0.92rem;
  outline: none;
}
.login-form input:focus { border-color: var(--accent); }
.login-form button {
  width: 100%;
  background: var(--accent);
  color: var(--code-bg);
  border: none;
  padding: 0.75rem;
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 0.5rem;
}
.login-form button:hover { background: var(--accent-dim); }
.login-hint {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 1rem;
}
.back-link { font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim); }

/* ===========================================
   ERROR
   =========================================== */
.error-page { padding: 5rem 0; }
.error-page .terminal-window { max-width: 600px; margin-bottom: 2rem; }

/* ===========================================
   FOOTER
   =========================================== */
.footer {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding-top: 3rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
}
.footer-brand {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-bright);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.footer-tag {
  font-family: var(--mono);
  color: var(--text-dim);
  font-size: 0.85rem;
}
.footer-col h4 {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.4rem; }
.footer-col a {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text-dim);
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.status { display: flex; align-items: center; gap: 0.4rem; }
.status .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 0.4rem 0.75rem;
    gap: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.45rem 0.5rem; font-size: 0.88rem; }
  .nav-toggle { display: flex; }
  .brand { font-size: 1.55rem; }

  .page-head h1, .admin-header h1 { font-size: 1.75rem; }
  .post-header h1 { font-size: 1.6rem; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .terminal-body { font-size: 0.78rem; padding: 1rem; }
  .hero { padding: 2rem 0; }
}

@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ===========================================
   AUTH MODAL
   =========================================== */

.btn-nav-login {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.btn-nav-login:hover { background: var(--accent); color: var(--bg); }

.nav-member .member-name {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
}

.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  width: 100%;
  max-width: 460px;
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none;
  color: var(--text-dim); font-size: 1.5rem;
  cursor: pointer; line-height: 1;
  transition: color 0.15s;
}
.modal-close:hover { color: var(--text-bright); }

.modal-tabs {
  display: flex; gap: 0.5rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.modal-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-family: var(--mono); font-size: 0.85rem;
  padding: 0.5rem 1rem; cursor: pointer;
  margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.modal-tab:hover { color: var(--text-bright); }

.modal-alert {
  padding: 0.75rem 1rem; border-radius: 4px;
  font-family: var(--mono); font-size: 0.82rem;
  margin-bottom: 1rem;
}
.modal-alert-error { background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3); color: var(--danger); }
.modal-alert-success { background: rgba(57,211,83,0.1); border: 1px solid rgba(57,211,83,0.3); color: var(--accent); }

.btn-full { width: 100%; justify-content: center; }

.modal-switch {
  text-align: center; font-size: 0.82rem;
  color: var(--text-dim); margin-top: 1rem;
}

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Password strength */
.pw-strength { margin-top: 0.5rem; }
.pw-bar {
  height: 4px; background: var(--border);
  border-radius: 2px; margin-bottom: 0.5rem; overflow: hidden;
}
.pw-bar span {
  display: block; height: 100%; width: 0;
  border-radius: 2px; transition: width 0.3s, background 0.3s;
}
.pw-bar span.pw-weak { background: var(--danger); }
.pw-bar span.pw-medium { background: var(--warn); }
.pw-bar span.pw-strong { background: var(--accent); }
.pw-rules {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim);
}
.pw-rules li::before { content: '✗ '; color: var(--danger); }
.pw-rules li.pw-ok { color: var(--accent); }
.pw-rules li.pw-ok::before { content: '✓ '; color: var(--accent); }

/* ===========================================
   COMMENTS
   =========================================== */

.comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.comments-header h3 {
  font-family: var(--mono); font-size: 1rem;
  color: var(--accent); margin-bottom: 1.5rem;
}
.comments-empty {
  font-family: var(--mono); font-size: 0.85rem;
  color: var(--text-dim); margin-bottom: 1.5rem;
}

.comments-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; }

.comment {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.comment-meta {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.comment-author {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--accent); font-weight: 600;
}
.comment-date { font-size: 0.78rem; color: var(--text-dim); }
.comment-body { font-size: 0.9rem; color: var(--text); line-height: 1.6; white-space: pre-wrap; }

.comment-actions { margin-top: 0.5rem; }
.comment-edit-form { margin-top: 0.75rem; }
.comment-edit-form textarea {
  width: 100%; background: var(--bg-elev);
  border: 1px solid var(--border-bright); border-radius: 4px;
  color: var(--text); padding: 0.5rem; font-family: var(--sans);
  font-size: 0.9rem; resize: vertical;
}
.comment-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

.comment-form-section h4 {
  font-family: var(--mono); font-size: 0.9rem;
  color: var(--text-dim); margin-bottom: 0.75rem;
}
.comment-logged-as {
  font-size: 0.82rem; color: var(--text-dim);
  margin-bottom: 1rem; font-family: var(--mono);
}
#comment-content {
  width: 100%; background: var(--bg-elev);
  border: 1px solid var(--border-bright); border-radius: 4px;
  color: var(--text); padding: 0.75rem; font-family: var(--sans);
  font-size: 0.9rem; resize: vertical; margin-bottom: 0.25rem;
}
#comment-content:focus { outline: none; border-color: var(--accent); }
.char-count { font-family: var(--mono); font-size: 0.75rem; color: var(--text-dim); }

.comment-msg {
  padding: 0.6rem 1rem; border-radius: 4px;
  font-family: var(--mono); font-size: 0.82rem; margin-bottom: 0.75rem;
}
.comment-msg-success { background: rgba(57,211,83,0.1); border: 1px solid rgba(57,211,83,0.3); color: var(--accent); }
.comment-msg-error { background: rgba(248,81,73,0.1); border: 1px solid rgba(248,81,73,0.3); color: var(--danger); }

.comment-login-prompt {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; padding: 1.25rem;
  font-family: var(--mono); font-size: 0.85rem; color: var(--text-dim);
  text-align: center;
}

/* Admin comment moderation */
.stat-warn { color: var(--warn) !important; }
.badge-warn {
  background: rgba(240,183,47,0.12); color: var(--warn);
  border: 1px solid rgba(240,183,47,0.3);
  font-family: var(--mono); font-size: 0.75rem;
  padding: 0.2rem 0.6rem; border-radius: 4px;
}
.comment-preview { max-width: 300px; font-size: 0.82rem; color: var(--text-dim); }

.modal-desc { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1rem; }
.field-hint { font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem; display: block; }

/* ===========================================
   COMMENT REPLIES
   =========================================== */

.replies-list {
  margin-left: 1.5rem;
  border-left: 2px solid var(--border-bright);
  padding-left: 1rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.comment-reply {
  background: var(--bg-elev);
  border-color: var(--border);
}

.reply-arrow {
  color: var(--accent);
  font-family: var(--mono);
  margin-right: 0.25rem;
}

.comment-footer {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.comment-action-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.comment-action-btn:hover { color: var(--accent); }

.reply-form-wrap {
  margin-left: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.reply-form { display: flex; flex-direction: column; gap: 0.5rem; }

.reply-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.reply-form textarea {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  color: var(--text);
  padding: 0.6rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  resize: vertical;
}
.reply-form textarea:focus { outline: none; border-color: var(--accent); }

.reply-actions { display: flex; gap: 0.5rem; }

.badge-reply {
  font-family: var(--mono); font-size: 0.7rem;
  background: rgba(88,166,255,0.1); color: var(--info);
  border: 1px solid rgba(88,166,255,0.25);
  padding: 0.1rem 0.4rem; border-radius: 3px;
  margin-left: 0.4rem; vertical-align: middle;
}

/* ===========================================
   COMMENT MODERATION PAGE
   =========================================== */

.comments-mod-list { display: flex; flex-direction: column; gap: 1rem; }

.comment-mod-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.comment-mod-card.mod-warning { border-color: rgba(240,183,47,0.4); }
.comment-mod-card.mod-urgent  { border-color: rgba(248,81,73,0.4); }

.mod-card-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem;
  margin-bottom: 0.75rem; flex-wrap: wrap;
}
.mod-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.mod-post { font-size: 0.8rem; color: var(--text-dim); }
.mod-post a { color: var(--info); }

.mod-expiry {
  font-family: var(--mono); font-size: 0.75rem;
  color: var(--text-dim); white-space: nowrap;
}
.mod-expiry.expiry-warn   { color: var(--warn); }
.mod-expiry.expiry-urgent { color: var(--danger); }

.mod-content {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.75rem 1rem;
  font-size: 0.9rem; color: var(--text);
  line-height: 1.6; white-space: pre-wrap;
  margin-bottom: 1rem;
}

.mod-actions { display: flex; gap: 0.75rem; }

.btn-danger {
  background: rgba(248,81,73,0.15);
  color: var(--danger);
  border: 1px solid rgba(248,81,73,0.3);
  padding: 0.3rem 0.75rem; border-radius: 4px;
  font-family: var(--mono); font-size: 0.8rem;
  cursor: pointer; transition: background 0.15s;
}
.btn-danger:hover { background: rgba(248,81,73,0.3); }

/* Stat card as link */
.stat-card-link { padding: 0; }
.stat-card-anchor {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.25rem 1.5rem; text-decoration: none;
  color: inherit; width: 100%; height: 100%;
  transition: background 0.15s; border-radius: inherit;
}
.stat-card-anchor:hover { background: var(--bg-elev); color: inherit; }
.stat-cta {
  font-family: var(--mono); font-size: 0.75rem;
  color: var(--accent); margin-top: 0.25rem;
}
.badge-ok {
  background: rgba(57,211,83,0.1); color: var(--accent);
  border: 1px solid rgba(57,211,83,0.3);
  font-family: var(--mono); font-size: 0.75rem;
  padding: 0.2rem 0.6rem; border-radius: 4px;
}

/* ===========================================
   LATEST UPDATES + MEMBER DASHBOARD
   =========================================== */

.live-badge {
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--accent); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

.latest-updates-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) { .latest-updates-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .latest-updates-grid { grid-template-columns: 1fr; } }

.latest-card {
  display: flex; flex-direction: column; gap: 0.4rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.25rem;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.latest-card:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; }
.latest-card-featured { border-color: var(--border-bright); background: var(--bg-elev); }
.latest-card-featured:hover { border-color: var(--accent); }

.latest-card-type {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--text-dim); text-transform: lowercase;
}
.latest-card-title {
  font-size: 1rem; font-weight: 600; color: var(--text-bright);
  line-height: 1.4; margin: 0;
}
.latest-card-featured .latest-card-title { font-size: 1.15rem; }
.latest-card-excerpt { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.latest-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; font-size: 0.78rem; color: var(--text-dim); }

/* Footer email */
.footer-contact { margin-top: 0.5rem; }
.footer-email { color: var(--text-dim); font-size: 0.85rem; }
.footer-email:hover { color: var(--accent); }

/* Member dashboard */
.member-dash-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 1rem; flex-wrap: wrap;
}
.dash-edit-wrap { margin-top: 0.75rem; }

/* Session timeout banner */
.timeout-banner {
  background: rgba(240,183,47,0.1);
  border: 1px solid rgba(240,183,47,0.35);
  border-radius: 6px;
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.83rem;
  color: var(--warn);
  margin-bottom: 1.5rem;
}
.timeout-banner a { color: var(--accent); }

.status-badge { font-family: var(--mono); font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 3px; }
.badge-off { background: rgba(139,148,158,0.12); color: var(--text-dim); border: 1px solid var(--border); }
.row-hidden td { opacity: 0.45; }

/* Copy button on code blocks */
.post-content pre { position: relative; }
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.post-content pre:hover .copy-btn { opacity: 1; }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); opacity: 1; }

/* ===========================================
   SCROLL EFFECTS
   =========================================== */

/* Scroll progress bar */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--info));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* Stagger delay for grids */
.grid .reveal:nth-child(2) { transition-delay: 0.07s; }
.grid .reveal:nth-child(3) { transition-delay: 0.14s; }
.topic-grid .reveal:nth-child(2) { transition-delay: 0.05s; }
.topic-grid .reveal:nth-child(3) { transition-delay: 0.10s; }
.topic-grid .reveal:nth-child(4) { transition-delay: 0.15s; }

/* ===========================================
   TOPICS — NEXT-GEN
   =========================================== */

section.topics { position: relative; overflow: hidden; }

/* Animated dot-grid background */
section.topics::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(57,211,83,0.08) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
  animation: gridShift 20s linear infinite;
}
@keyframes gridShift {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 28px; }
}
section.topics .container { position: relative; z-index: 1; }

/* Section heading gradient */
section.topics .section-head h2 {
  background: linear-gradient(120deg, var(--text-bright) 30%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Category label — uppercase + fade line */
.category-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.category-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(57,211,83,0.45), transparent);
}

/* Category stagger animation */
.topic-category {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.topic-category.cat-revealed { opacity: 1; transform: none; }

/* Glassmorphism topic card */
.topic {
  background: rgba(17, 22, 29, 0.72);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(45, 55, 68, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 20px rgba(0,0,0,0.35);
  transition: border-color 0.3s, box-shadow 0.3s;
  transform-style: preserve-3d;
  will-change: transform;
}
.topic:hover {
  border-color: rgba(57,211,83,0.55);
  box-shadow: 0 0 28px rgba(57,211,83,0.14), 0 0 56px rgba(57,211,83,0.06),
              inset 0 1px 0 rgba(255,255,255,0.07);
  color: inherit;
}

/* Gradient topic name */
.topic h4 {
  background: linear-gradient(130deg, var(--text-bright) 0%, #8ec5fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.topic:hover h4 {
  background: linear-gradient(130deg, #ffffff 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ===========================================
   BRAND STATUS (clock + AI)
   =========================================== */
.brand-wrap { display: flex; flex-direction: column; gap: 0.05rem; }

.brand-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  line-height: 1;
}
.brand-clock {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.brand-sep { color: var(--border-bright); }
.brand-ai {
  color: var(--info);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  max-width: 220px;
  text-overflow: ellipsis;
}


/* Brand clock inline fix */
.brand-wrap { display: flex; flex-direction: column; gap: 0.1rem; }
.brand-line  { display: flex; align-items: center; gap: 0.65rem; }
.brand-clock {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0.85;
}

/* Clock matches brand font */
.brand-clock {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 1;
}

/* Clock — exact match to _hub_ style */
.brand-clock {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0;
}

/* Hide weekday on mobile */
@media (max-width: 640px) {
  .clock-day { display: none; }
}

/* Make comment form section always visible */
.comment-form-section {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
}
.comment-login-prompt { text-align: center; padding: 0.5rem 0; }

/* Add Comment CTA bar */
.add-comment-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(57,211,83,0.06), rgba(88,166,255,0.05));
  border: 1px solid rgba(57,211,83,0.25);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 1.5rem;
}
.add-comment-bar-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.add-comment-bar-text p {
  font-size: 0.88rem;
  color: var(--text-dim);
}

/* Add comment bar text — blue, smaller */
.add-comment-bar-label { color: var(--info); font-size: 0.72rem; }
.add-comment-bar-text p { color: var(--info); font-size: 0.78rem; opacity: 0.8; }

/* ===========================================
   ADMIN ACTION BUTTONS
   =========================================== */

.actions-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s;
  background: none;
}

/* Show — green */
.btn-show {
  color: var(--accent);
  border-color: rgba(57,211,83,0.4);
  background: rgba(57,211,83,0.08);
}
.btn-show:hover {
  background: rgba(57,211,83,0.2);
  color: var(--accent);
}

/* Hide — grey */
.btn-hide {
  color: var(--text-dim);
  border-color: var(--border-bright);
  background: transparent;
}
.btn-hide:hover {
  background: var(--bg-elev);
  color: var(--text-bright);
}

/* Edit — blue */
.btn-edit {
  color: var(--info);
  border-color: rgba(88,166,255,0.35);
  background: rgba(88,166,255,0.07);
}
.btn-edit:hover {
  background: rgba(88,166,255,0.18);
  color: var(--info);
}

/* Delete — red */
.btn-delete {
  color: var(--danger);
  border-color: rgba(248,81,73,0.35);
  background: rgba(248,81,73,0.07);
}
.btn-delete:hover {
  background: rgba(248,81,73,0.2);
  color: var(--danger);
}

/* Status pill */
.status-pill {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-live   { color: var(--accent); background: rgba(57,211,83,0.1); border: 1px solid rgba(57,211,83,0.3); }
.pill-hidden { color: var(--text-dim); background: rgba(139,148,158,0.08); border: 1px solid var(--border); }

/* Hidden row dimming */
.row-hidden { opacity: 0.55; }
.text-dim   { color: var(--text-dim) !important; }
.text-dim-sm { font-size: 0.82rem; color: var(--text-dim); }

/* ── Admin action modals (delete confirm, user delete, etc.) ─── */
.admin-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}
.admin-modal[hidden] { display: none !important; }

#delete-modal .modal-box, #user-del-modal .modal-box {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-modal .modal-title {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--danger);
  margin: 0;
}

.admin-modal .modal-sub {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

.modal-error {
  font-size: 0.82rem;
  color: var(--danger);
  background: rgba(248,81,73,0.1);
  border: 1px solid rgba(248,81,73,0.3);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  margin: 0;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.btn-delete-confirm {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s;
  background: var(--danger);
  color: #fff;
  border: none;
}
.btn-delete-confirm:hover { background: #c0392b; }
.btn-delete-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── iOS-style toggle switch ─────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #3a3f47;
  border-radius: 28px;
  transition: background 0.25s ease;
  border: 1px solid rgba(255,255,255,0.08);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.toggle-input:checked + .toggle-slider {
  background: #39d353;
  border-color: #39d353;
}

.toggle-input:checked + .toggle-slider::before {
  transform: translateX(26px);
}

.toggle-input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.toggle-switch:hover .toggle-slider {
  filter: brightness(1.1);
}

/* ── Role badges (admin users page) ─────────────────────────── */
.role-badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.role-super_admin { color: var(--magenta); background: rgba(210,168,255,0.1); border: 1px solid rgba(210,168,255,0.3); }
.role-editor       { color: var(--info);    background: rgba(88,166,255,0.1);  border: 1px solid rgba(88,166,255,0.3); }
.role-moderator    { color: var(--warn);    background: rgba(240,183,47,0.1);  border: 1px solid rgba(240,183,47,0.3); }

/* ── Activity log action colours ────────────────────────────── */
.log-action {
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: nowrap;
}
.log-create  { color: var(--accent); }
.log-update  { color: var(--info); }
.log-delete  { color: var(--danger); }
.log-show    { color: var(--accent); }
.log-hide    { color: var(--text-dim); }
.log-approve { color: var(--accent); }
.log-login   { color: var(--magenta); }
.log-logout  { color: var(--text-dim); }
.log-set     { color: var(--info); }

/* ── Role checkbox group (users invite form) ─────────────────── */
.role-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.role-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
}
.role-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Subscribe modal ─────────────────────────────────────────── */
.sub-modal-box {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 2rem 2rem 1.5rem;
  max-width: 420px;
  width: 100%;
  position: relative;
}
.sub-tag   { font-family:var(--mono);font-size:0.72rem;color:var(--accent);letter-spacing:2px;margin:0 0 0.5rem; }
.sub-title { font-size:1.5rem;font-weight:700;color:var(--text-bright);line-height:1.3;margin:0 0 0.75rem; }
.sub-desc  { font-size:0.88rem;color:var(--text-dim);line-height:1.6;margin:0 0 1.25rem; }
.sub-field { margin-bottom:0.75rem; }
.sub-field input {
  width:100%;padding:0.65rem 0.9rem;
  background:var(--bg-card);border:1px solid var(--border-bright);
  border-radius:6px;color:var(--text-bright);font-size:0.9rem;
  font-family:var(--mono);outline:none;
}
.sub-field input:focus { border-color:var(--accent); }
.sub-submit { margin-top:0.25rem; }
.sub-footer { font-size:0.82rem;color:var(--text-dim);text-align:center;margin-top:1rem; }
.sub-footer a { color:var(--accent); }

/* ── Analytics dashboard ─────────────────────────────────────── */
.analytics-block { background: linear-gradient(135deg,rgba(57,211,83,0.04) 0%,transparent 60%); }

.analytics-chips {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.a-chip {
  flex: 1;
  min-width: 120px;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.a-chip-green { border-color: rgba(57,211,83,0.35); background: rgba(57,211,83,0.05); }
.a-chip-label { font-family:var(--mono);font-size:0.72rem;color:var(--text-dim);letter-spacing:1px; }
.a-chip-num   { font-family:var(--mono);font-size:1.8rem;font-weight:700;color:var(--text-bright);line-height:1; }
.a-chip-green .a-chip-num { color:var(--accent); }

.spark-wrap { margin-bottom:1.75rem; min-height:158px; }
#visit-chart, #reads-chart { background:transparent; min-height:110px; }
.spark-label { font-family:var(--mono);font-size:0.78rem;color:var(--text-dim);margin-bottom:0.75rem; }
.spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}
.spark-col { display:flex;flex-direction:column;align-items:center;flex:1;gap:4px; }
.spark-bar-wrap { flex:1;width:100%;display:flex;align-items:flex-end; }
.spark-bar {
  width:100%;min-height:4px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.spark-bar:hover { opacity:1; }
.spark-day { font-family:var(--mono);font-size:0.65rem;color:var(--text-dim); }

.top-pages { display:flex;flex-direction:column;gap:0.6rem; }
.top-page-row {
  display: grid;
  grid-template-columns: 1fr 120px 48px;
  align-items: center;
  gap: 0.75rem;
}
.top-page-title { font-size:0.85rem;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.top-page-title:hover { color:var(--accent); }
.top-page-type { font-family:var(--mono);font-size:0.72rem;color:var(--text-dim);margin-right:0.35rem; }
.top-page-bar-wrap { height:8px;background:var(--bg-card);border-radius:4px;overflow:hidden; }
.top-page-bar { height:100%;background:var(--info);border-radius:4px;transition:width 0.4s ease; }
.top-page-count { font-family:var(--mono);font-size:0.8rem;color:var(--text-dim);text-align:right; }

/* ── Range selector buttons (analytics dashboard) ────────────── */
.range-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* Segmented control container */
.range-btns {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.range-btn {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 0.32rem 0.85rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, box-shadow 0.25s, transform 0.12s;
  line-height: 1;
  position: relative;
}

.range-btn:hover:not(.active) {
  color: var(--text-bright);
  background: rgba(255,255,255,0.06);
}

.range-btn.active {
  background: var(--accent);
  color: #0a0e14;
  font-weight: 700;
  box-shadow:
    0 0 10px rgba(57,211,83,0.45),
    0 0 20px rgba(57,211,83,0.15),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-0.5px);
}

.range-btn:active { transform: translateY(0); }

/* Summary row */
.range-summary {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Chart tooltip */
.chart-tooltip {
  position: fixed;
  pointer-events: none;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-bright);
  white-space: nowrap;
  z-index: 9000;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.chart-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Content analytics section ───────────────────────────────── */
.content-analytics-block {
  background: linear-gradient(135deg,rgba(88,166,255,0.04) 0%,transparent 60%);
}

.chip-hint {
  font-size: 0.65rem;
  opacity: 0.65;
  font-weight: 400;
}

/* Engagement table */
.eng-table-wrap {
  overflow-x: auto;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.eng-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.eng-table thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  color: var(--text-dim);
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-bright);
  text-align: left;
  white-space: nowrap;
}

.th-hint { font-weight: 400; text-transform: none; opacity: 0.7; }

.eng-table tbody tr { border-bottom: 1px solid var(--border); }
.eng-table tbody tr:last-child { border-bottom: none; }

.eng-row { transition: background 0.12s; }
.eng-row:hover { background: rgba(88,166,255,0.04); }

.eng-table td { padding: 0.7rem 1rem; vertical-align: middle; }

.eng-title {
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.eng-title:hover { color: var(--accent); }

.eng-num {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  white-space: nowrap;
  text-align: right;
}

.eng-type-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}
.eng-blog  { color: var(--accent); background: rgba(57,211,83,0.1);  border: 1px solid rgba(57,211,83,0.25);  }
.eng-video { color: var(--magenta); background: rgba(210,168,255,0.1); border: 1px solid rgba(210,168,255,0.25); }

.eng-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 100px;
}
.eng-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.eng-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.eng-pct {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 34px;
  text-align: right;
}

.eng-new-badge {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: #0a0e14;
  background: var(--accent);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

.eng-loading {
  text-align: center;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 1.5rem;
}

/* ── Type toggle buttons (All / Blog / Video) ────────────────── */
.type-btns {
  display: inline-flex;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.type-btn {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.75rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, box-shadow 0.2s;
  line-height: 1;
  white-space: nowrap;
}

.type-btn:hover:not(.active) {
  background: rgba(255,255,255,0.05);
  color: var(--text-bright);
}

.type-btn.active { color: #0a0e14; font-weight: 700; }

/* Blog = green */
.type-btn[data-reads-type="all"].active,
.type-btn[data-eng-filter="all"].active   { background: var(--info);    box-shadow: 0 0 10px rgba(88,166,255,0.4); }
.type-btn.type-blog.active                { background: var(--accent);  box-shadow: 0 0 10px rgba(57,211,83,0.4);  }
.type-btn.type-video.active               { background: var(--magenta); box-shadow: 0 0 10px rgba(210,168,255,0.4); }

/* Blog/Video breakdown chips row */
.type-chips { margin-top: 0.75rem; }

.a-chip-blog  { border-color: rgba(57,211,83,0.3);  background: rgba(57,211,83,0.05);  }
.a-chip-video { border-color: rgba(210,168,255,0.3); background: rgba(210,168,255,0.05); }

.chip-sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── Service Updates (blog post page) ──────────────────────────── */
.service-updates {
  margin: 2.5rem 0;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  overflow: hidden;
}
.su-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.su-title {
  font-family: var(--mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
}
.su-count {
  font-family: var(--mono);
  font-size: 0.75rem;
  background: rgba(57,211,83,0.12);
  color: var(--accent);
  border: 1px solid rgba(57,211,83,0.25);
  border-radius: 20px;
  padding: 0.1rem 0.6rem;
}
.su-list { display: flex; flex-direction: column; }
.su-entry {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.su-entry-added      { border-left-color: #39d353; background: rgba(57,211,83,0.04); }
.su-entry-updated    { border-left-color: #58a6ff; background: rgba(88,166,255,0.04); }
.su-entry-removed    { border-left-color: #f85149; background: rgba(248,81,73,0.07); }
.su-entry-deprecated { border-left-color: #f0b72f; background: rgba(240,183,47,0.06); }
.su-entry:last-child { border-bottom: none; }
.su-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.su-date {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.su-date-unknown { opacity: 0.5; font-style: italic; }
.su-type {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
}
.su-type-added      { background: rgba(57,211,83,0.15);   color: #39d353; }
.su-type-updated    { background: rgba(88,166,255,0.15);  color: #58a6ff; }
.su-type-removed    { background: rgba(248,81,73,0.15);   color: #f85149; }
.su-type-deprecated { background: rgba(240,183,47,0.15);  color: #f0b72f; }
.su-service {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--magenta);
}
.su-summary {
  font-size: 0.9rem;
  color: var(--text-bright);
  font-weight: 500;
}
.su-summary-strike {
  text-decoration: line-through;
  opacity: 0.75;
}
.su-details {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.6;
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px solid var(--border);
}
.su-details-md p { margin: 0 0 0.6rem; }
.su-details-md p:last-child { margin-bottom: 0; }
.su-details-md ul, .su-details-md ol { padding-left: 1.4rem; margin: 0 0 0.6rem; }
.su-details-md li { margin-bottom: 0.25rem; }
.su-details-md code { background: rgba(255,255,255,0.08); border-radius: 3px; padding: 0.1em 0.35em; font-family: var(--mono); font-size: 0.85em; }
.su-details-md pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; overflow-x: auto; margin: 0 0 0.6rem; }
.su-details-md pre code { background: none; padding: 0; font-size: 0.82em; }
.su-details-md strong { color: var(--text-bright); font-weight: 600; }
.su-details-md a { color: var(--info); text-decoration: underline; }
.su-details-md del { opacity: 0.6; }
.su-locked {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  border: 1px dashed var(--border-bright);
}
.su-lock-text {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  flex: 1;
}
.btn-su-login {
  background: none;
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  color: var(--info);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-su-login:hover { border-color: var(--info); color: var(--text-bright); }

/* ── Admin changelog panel (blog-form.ejs) ─────────────────────── */
.cl-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  overflow: hidden;
}
.cl-add-details {
  border-bottom: 1px solid var(--border);
}
.cl-add-summary {
  padding: 0.7rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--info);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.cl-add-summary::-webkit-details-marker { display: none; }
.cl-add-summary:hover { color: var(--text-bright); }
.cl-add-form {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--bg-card);
}
.cl-form-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cl-form-row input,
.cl-form-row select,
.cl-form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border-bright);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.84rem;
  flex: 1;
  min-width: 0;
}
.cl-form-row textarea { resize: vertical; width: 100%; }
.cl-entry {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cl-entry:last-child { border-bottom: none; }
.cl-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.cl-date {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.cl-badge {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 0.12rem 0.45rem;
}
.cl-badge-added      { background: rgba(57,211,83,0.15);  color: #39d353; }
.cl-badge-updated    { background: rgba(88,166,255,0.15); color: #58a6ff; }
.cl-badge-removed    { background: rgba(248,81,73,0.15);  color: #f85149; }
.cl-badge-deprecated { background: rgba(240,183,47,0.15); color: #f0b72f; }
.cl-service {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--magenta);
}
.cl-summary {
  font-size: 0.87rem;
  color: var(--text-bright);
}
.cl-details-text {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding-left: 0.25rem;
  border-left: 2px solid var(--border-bright);
  line-height: 1.55;
}
.cl-empty {
  padding: 1rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* ── Bulk changelog search results ─────────────────────────────── */
.cl-search-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.cl-search-row:hover { background: var(--bg-card); }
.cl-search-row input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.cl-search-title {
  font-size: 0.88rem;
  color: var(--text-bright);
  flex: 1;
}
.cl-search-tags {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ── Markdown editor toolbar (admin) ──────────────────────────── */
.cl-md-toolbar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.cl-md-tab {
  background: none;
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.77rem;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.cl-md-tab:hover { color: var(--text-bright); border-color: var(--info); }
.cl-md-tab-active { color: var(--info); border-color: var(--info); background: rgba(88,166,255,0.08); }
.cl-md-hint {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-left: 0.25rem;
}
.cl-md-preview {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.6;
  border-radius: 6px;
  padding: 0.65rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border-bright);
  min-height: 80px;
}
.cl-md-preview p { margin: 0 0 0.5rem; }
.cl-md-preview p:last-child { margin-bottom: 0; }
.cl-md-preview ul, .cl-md-preview ol { padding-left: 1.3rem; margin: 0 0 0.5rem; }
.cl-md-preview li { margin-bottom: 0.2rem; }
.cl-md-preview code { background: rgba(255,255,255,0.08); border-radius: 3px; padding: 0.1em 0.3em; font-family: var(--mono); font-size: 0.85em; }
.cl-md-preview pre { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 0.6rem; overflow-x: auto; margin-bottom: 0.5rem; }
.cl-md-preview strong { color: var(--text-bright); font-weight: 600; }
.cl-md-preview a { color: var(--info); }

/* ── Content Blocks (admin management + blog-form insert panel) ─ */
.cb-list-entry {
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.cb-list-entry:last-child { border-bottom: none; }
.cb-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cb-entry-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}
.cb-entry-name {
  font-size: 0.88rem;
  color: var(--text-bright);
  font-weight: 500;
}
.cb-entry-slug {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: rgba(88,166,255,0.1);
  color: var(--info);
  border: 1px solid rgba(88,166,255,0.2);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}
.cb-entry-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Insert panel inside blog form */
.cb-insert-panel {
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  overflow: hidden;
}
.cb-insert-list {
  padding: 0.5rem 0;
}
.cb-insert-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.cb-insert-item:last-child { border-bottom: none; }
.cb-insert-item:hover { background: var(--bg-card); }

.btn-sm {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
}

/* ── Content Blocks Usage Search (two-panel layout) ─────────── */
.cb-usage-wrap {
  display: flex;
  min-height: 280px;
  border-top: 1px solid var(--border);
}

.cb-slug-panel {
  width: 230px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.cb-slug-search-wrap {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.cb-slug-search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-bright);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
}
.cb-slug-search:focus { border-color: var(--info); }
.cb-slug-search::placeholder { color: var(--text-dim); }

.cb-slug-list {
  overflow-y: auto;
  flex: 1;
  max-height: 340px;
}

.cb-slug-item {
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.cb-slug-item:last-child { border-bottom: none; }
.cb-slug-item:hover { background: var(--bg-card); }
.cb-slug-item-active {
  background: rgba(88,166,255,0.07);
  border-left: 2px solid var(--info);
  padding-left: calc(0.85rem - 2px);
}

.cb-slug-code {
  display: block;
  font-family: var(--mono);
  font-size: 0.73rem;
  color: var(--info);
  word-break: break-all;
}

.cb-slug-name-sm {
  display: block;
  font-size: 0.73rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}

/* Right panel */
.cb-usage-detail {
  flex: 1;
  padding: 0.9rem 1.1rem;
  overflow-y: auto;
  max-height: 340px;
}

.cb-usage-placeholder {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.cb-usage-status {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
}

.cb-usage-block-hdr {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.cb-usage-preview {
  margin-bottom: 0.9rem;
  max-height: 160px;
  overflow-y: auto;
}

.cb-usage-posts-wrap { margin-top: 0.15rem; }

.cb-usage-posts-lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.77rem;
  color: var(--text-dim);
  margin-bottom: 0.45rem;
}

.cb-usage-post-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cb-usage-post-link {
  font-size: 0.85rem;
  color: var(--info);
}
.cb-usage-post-link:hover { color: var(--text-bright); }

@media (max-width: 600px) {
  .cb-usage-wrap { flex-direction: column; }
  .cb-slug-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .cb-slug-list  { max-height: 180px; }
  .cb-usage-detail { max-height: none; }
}

/* ── Media Library page ──────────────────────────────────── */
.ml-upload-wrap { padding: 1rem 1.25rem 1.25rem; }

.ml-upload-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ml-upload-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
}
.ml-upload-tab-active {
  border-color: var(--info);
  color: var(--info);
}
.ml-upload-panel { margin-bottom: 0.5rem; }

.ml-file-input { display: none; }
.ml-file-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  color: var(--text-dim);
  transition: border-color 0.15s;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.ml-file-label:hover, .ml-file-label-drag {
  border-color: var(--info);
  color: var(--text-bright);
}
.ml-file-icon {
  font-size: 1.6rem;
  color: var(--info);
  flex-shrink: 0;
}
.ml-file-text small { color: var(--text-dim); font-size: 0.75rem; }
.ml-file-info {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0.5rem 0;
}

.ml-url-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.ml-url-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-bright);
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
}
.ml-url-input:focus { border-color: var(--info); outline: none; }

.ml-upload-status {
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  margin-top: 0.5rem;
}
.ml-upload-status-ok    { background: rgba(57,211,83,0.1); color: var(--green); }
.ml-upload-status-error { background: rgba(248,81,73,0.1);  color: var(--red);   }

.ml-filter-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.ml-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.18rem 0.6rem;
  text-decoration: none;
}
.ml-chip:hover    { border-color: var(--info); color: var(--info); }
.ml-chip-active   { border-color: var(--info); color: var(--info); }

/* Media grid */
.ml-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  padding: 1.25rem;
}

.ml-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ml-card:hover { border-color: var(--info); }

.ml-thumb {
  aspect-ratio: 16/9;
  background: #0a0e14;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ml-thumb-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ml-type-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 2px 5px;
  border-radius: 3px;
}

.ml-card-info {
  padding: 0.4rem 0.6rem 0.2rem;
  flex: 1;
}
.ml-card-name {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ml-card-size {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.7;
}

.ml-card-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem 0.6rem;
  align-items: center;
}

/* ── Blog form Cover Picker ──────────────────────────────── */
.cover-picker-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cover-preview-wrap {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16/9;
  background: #0a0e14;
  border: 1px dashed var(--border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-preview-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover-preview-empty {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-dim);
}
.cover-clear-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.65);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-clear-btn:hover { background: var(--red); }

.cover-picker-tabs {
  display: flex;
  gap: 0.4rem;
}
.cover-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
}
.cover-tab:hover      { border-color: var(--info); color: var(--info); }
.cover-tab-active     { border-color: var(--info); color: var(--info); }

.cover-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--bg-card);
}

/* Library grid inside picker */
.cover-lib-search-wrap { margin-bottom: 0.6rem; }
.cover-lib-search {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-bright);
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.35rem 0.6rem;
}
.cover-lib-search:focus { border-color: var(--info); outline: none; }

.cover-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.6rem;
  max-height: 260px;
  overflow-y: auto;
}
.cover-lib-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s;
}
.cover-lib-card:hover { border-color: var(--info); }
.cover-lib-thumb {
  aspect-ratio: 16/9;
  background: #0a0e14;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover-lib-thumb-media { width: 100%; height: 100%; object-fit: cover; }
.cover-lib-name {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  padding: 0.25rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cover-lib-loading, .cover-lib-empty {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 0.5rem 0;
}

/* Video cover in public blog listing */
.card-image-video { position: relative; overflow: hidden; }
.card-video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Video cover on single blog post */
.post-cover-video {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 2rem;
  display: block;
}

/* ── Media card slug editor ──────────────────────────────── */
.ml-slug-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}
.ml-slug-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.35rem;
  white-space: nowrap;
}
.ml-slug-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-bright);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.18rem 0.4rem;
}
.ml-slug-input:focus { border-color: var(--info); outline: none; }
.ml-slug-input::placeholder { color: var(--text-dim); }

/* ── Blog form image insert thumb ────────────────────────── */
.img-insert-thumb {
  width: 72px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0a0e14;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-insert-thumb .ml-thumb-media { width: 100%; height: 100%; object-fit: cover; }

/* ── Video form source tabs ──────────────────────────────── */
.vf-source-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.vf-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.82rem;
  padding: 0.3rem 0.8rem;
}
.vf-tab:hover    { border-color: var(--info); color: var(--info); }
.vf-tab-active   { border-color: var(--info); color: var(--info); }

.vf-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vf-panel input[type="url"],
.vf-panel input[type="text"] {
  width: 100%;
}

.vf-current-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}
.vf-preview-video {
  width: 100%;
  max-height: 220px;
  border-radius: 6px;
  background: #000;
}

/* ── Public video player ─────────────────────────────────── */
.vp-wrap {
  width: 100%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.vp-player {
  width: 100%;
  max-height: 520px;
  display: block;
  background: #000;
}
.vp-excerpt {
  margin-top: 0.6rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}
.file-dl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent) !important;
  border: 1px solid var(--border-bright);
  padding: 0.3rem 0.75rem;
  border-radius: 4px;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s;
  margin: 0.25rem 0;
}
.file-dl:hover {
  background: var(--bg-card);
  border-color: var(--accent-dim);
}

/* ── In-card video player ────────────────────────────────── */
.video-thumb.is-playing {
  cursor: default;
}
.video-thumb video[controls] {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.video-thumb iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* video card placeholder when no thumbnail */
.video-thumb-no-img {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--bg-elev) 0%, #0d1520 100%);
  color: var(--border-bright);
  font-family: var(--mono);
  font-size: 0.7rem;
  opacity: 0.7;
}
.video-thumb-no-img svg { width: 36px; height: 36px; }

/* ===========================================
   QUIZ
   =========================================== */

/* Section wrapper */
/* ── Quiz widget ─────────────────────────────────────────────── */
.quiz-section {
  margin: 2.5rem 0 1rem;
}

/* Widget card */
.quiz-widget {
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(57,211,83,.05);
}

/* Header */
.quiz-header {
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(57,211,83,.05) 0%, rgba(88,166,255,.03) 100%);
}
.quiz-label {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--accent);
  letter-spacing: .04em;
  display: block;
  margin-bottom: .35rem;
}
.quiz-title { font-size: 1.25rem; font-weight: 600; color: var(--text-bright); line-height: 1.35; margin: .1rem 0 .3rem; }
.quiz-desc  { color: var(--text-dim); font-size: .87rem; line-height: 1.5; }

/* Screens */
.quiz-screen        { display: none; }
.quiz-screen-active { display: block; }

/* ── Start screen ────────────────────────────────────────────── */
.quiz-start-body {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.quiz-ready-txt {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
  letter-spacing: .05em;
  margin-bottom: 1.75rem;
}
.quiz-stats-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin-bottom: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.quiz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 1rem 2rem;
  flex: 1;
  min-width: 0;
}
.quiz-stat + .quiz-stat {
  border-left: 1px solid var(--border);
}
.quiz-stat-val {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
}
.quiz-stat-lbl {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.quiz-start-btn   { display: inline-flex; }
.quiz-guest-note  {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-dim);
  margin-top: .85rem;
  text-align: center;
  line-height: 1.6;
}
.quiz-guest-note a { color: var(--accent); text-decoration: none; }
.quiz-guest-note a:hover { text-decoration: underline; }

/* ── Progress ────────────────────────────────────────────────── */
.quiz-progress-wrap {
  height: 3px;
  background: var(--border);
}
.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #4dd4ac);
  transition: width .4s cubic-bezier(.4,0,.2,1);
  border-radius: 0 2px 2px 0;
}
.quiz-progress-label {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text-dim);
  padding: .65rem 1.75rem .1rem;
  letter-spacing: .03em;
}

/* ── Scenario media ──────────────────────────────────────────── */
.quiz-scenario-area   { padding: 0 1.75rem .5rem; }
.quiz-scenario-img    { max-width: 100%; border-radius: 8px; border: 1px solid var(--border); max-height: 400px; object-fit: contain; }
.quiz-scenario-pdf    { width: 100%; height: 460px; border-radius: 8px; border: 1px solid var(--border); }
.quiz-scenario-video  { width: 100%; max-height: 360px; border-radius: 8px; }

/* ── Question text ───────────────────────────────────────────── */
.quiz-q-text {
  font-size: 1.05rem;
  font-weight: 450;
  color: var(--text-bright);
  line-height: 1.65;
  padding: 1rem 1.75rem .6rem;
}

/* ── Options ─────────────────────────────────────────────────── */
.quiz-options-area {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .4rem 1.75rem .75rem;
}
.quiz-opt-label {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  background: var(--bg-card);
}
.quiz-opt-label:hover {
  border-color: var(--info);
  background: rgba(88,166,255,.06);
  transform: translateX(3px);
}
.quiz-opt-label input { display: none; }
.quiz-opt-marker {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-bright);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg);
  transition: all .15s;
}
.quiz-opt-label:has(input:checked) .quiz-opt-marker {
  background: var(--info);
  border-color: var(--info);
  color: #fff;
  font-weight: 700;
}
.quiz-opt-label:has(input:checked) {
  border-color: var(--info);
  background: rgba(88,166,255,.09);
  transform: translateX(3px);
}
.quiz-opt-text { font-size: .95rem; line-height: 1.5; color: var(--text); }

/* Option states after answering */
.quiz-opt-correct { border-color: var(--accent) !important; background: rgba(57,211,83,.08) !important; transform: none !important; }
.quiz-opt-correct .quiz-opt-marker { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.quiz-opt-wrong   { border-color: var(--danger) !important; background: rgba(248,81,73,.08) !important; transform: none !important; }
.quiz-opt-wrong .quiz-opt-marker   { background: var(--danger); border-color: var(--danger); color: #fff; }

/* ── Drag & drop ─────────────────────────────────────────────── */
.quiz-drag-list  { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.quiz-drag-item  {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: grab;
  background: var(--bg-card);
  transition: opacity .15s, border-color .15s;
  user-select: none;
}
.quiz-drag-item.dragging  { opacity: .35; }
.quiz-drag-item.drag-over { border-color: var(--info); background: rgba(88,166,255,.08); }
.quiz-drag-handle { color: var(--text-dim); font-size: 1rem; flex-shrink: 0; }
.quiz-drag-text   { font-size: .95rem; }

/* ── Feedback ────────────────────────────────────────────────── */
.quiz-feedback {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: .95rem 1.2rem;
  margin: .4rem 1.75rem;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left-width: 3px;
}
.quiz-feedback-icon {
  font-size: 1.15rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: .1rem;
}
.quiz-feedback-icon-correct { color: var(--accent); }
.quiz-feedback-icon-wrong   { color: var(--danger); }
.quiz-feedback-verdict         { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.quiz-feedback-verdict-correct { color: var(--accent); }
.quiz-feedback-verdict-wrong   { color: var(--danger); }
.quiz-feedback-explanation { color: var(--text-dim); font-size: .875rem; margin-top: .25rem; line-height: 1.55; }
.quiz-feedback-correct     { color: var(--info); font-size: .85rem; margin-top: .35rem; }

/* ── Action row ──────────────────────────────────────────────── */
.quiz-action-row { display: flex; gap: .75rem; padding: .65rem 1.75rem 1.5rem; }
.quiz-submit-btn, .quiz-next-btn { display: inline-flex; }

/* ── Gate (locked / login required) ─────────────────────────── */
.quiz-gate-wrap { position: relative; }
.quiz-gate-preview {
  padding: 1.5rem 1.75rem;
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}
.quiz-placeholder-q { font-size: 1.05rem; color: var(--text-bright); margin-bottom: 1rem; }
.quiz-opt-placeholder {
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  font-size: .9rem;
}
.quiz-opt-placeholder-short { width: 60%; }
.quiz-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,14,20,.72);
  backdrop-filter: blur(3px);
  border-radius: 0 0 14px 14px;
}
.quiz-gate-msg {
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.quiz-gate-icon { font-size: 2rem; }
.quiz-gate-msg strong { font-size: 1.1rem; color: var(--text-bright); }
.quiz-gate-msg p { color: var(--text-dim); font-size: .9rem; }

/* Result page */
.quiz-result-card {
  display: flex;
  gap: 2rem;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2.5rem;
}
.quiz-result-score-wrap { flex-shrink: 0; }
.quiz-result-circle {
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 4px solid var(--score-color, var(--accent));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.3);
}
.quiz-result-pct {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--score-color, var(--accent));
  font-family: var(--mono);
  line-height: 1;
}
.quiz-result-grade {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--text-dim);
}
.quiz-result-pass  { color: var(--accent); font-family: var(--mono); font-size: 1.3rem; }
.quiz-result-fail  { color: var(--danger); font-family: var(--mono); font-size: 1.3rem; }
.quiz-result-stats { color: var(--text); margin-top: .5rem; }

/* Review */
.quiz-review-heading {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--text-dim);
  margin-bottom: 1.25rem;
}
.quiz-review-item {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.quiz-review-correct { border-left: 3px solid var(--accent); }
.quiz-review-wrong   { border-left: 3px solid var(--danger); }
.quiz-review-qhead {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.quiz-review-num {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text-dim);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .15rem .45rem;
}
.quiz-review-verdict     { font-size: .85rem; font-weight: 600; }
.quiz-review-verdict-c   { color: var(--accent); }
.quiz-review-verdict-w   { color: var(--danger); }
.quiz-review-qtext       { font-size: 1rem; color: var(--text-bright); margin-bottom: .5rem; }
.quiz-review-opt {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 6px;
  font-size: .9rem;
}
.quiz-review-opt-correct { background: rgba(57,211,83,.08); color: var(--accent); }
.quiz-review-opt-wrong   { background: rgba(248,81,73,.08);  color: var(--danger); }
.quiz-review-opt-neutral { color: var(--text-dim); }
.quiz-review-opt-icon    { flex-shrink: 0; font-weight: 700; width: 16px; }
.quiz-review-expl {
  margin-top: .75rem;
  padding: .75rem;
  background: var(--bg-card);
  border-radius: 6px;
  font-size: .88rem;
  color: var(--text-dim);
}
.quiz-review-expl strong { color: var(--info); font-family: var(--mono); font-size: .78rem; display: block; margin-bottom: .25rem; }

/* Type badges in quiz context */
.quiz-type-badge {
  font-family: var(--mono);
  font-size: .7rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.quiz-type-single   { border-color: var(--info);    color: var(--info);    background: rgba(88,166,255,.08); }
.quiz-type-multiple { border-color: var(--magenta); color: var(--magenta); background: rgba(210,168,255,.08); }
.quiz-type-drag_drop { border-color: var(--warn);   color: var(--warn);   background: rgba(240,183,47,.08); }
.quiz-type-scenario  { border-color: var(--accent);  color: var(--accent);  background: rgba(57,211,83,.08); }

/* Difficulty colours */
.quiz-diff-easy   { color: var(--accent); font-size: .82rem; }
.quiz-diff-medium { color: var(--warn);   font-size: .82rem; }
.quiz-diff-hard   { color: var(--danger); font-size: .82rem; }

/* Level / category badges */
.quiz-level-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  padding: .18rem .5rem;
  border-radius: 4px;
  letter-spacing: .04em;
  text-transform: capitalize;
}
.quiz-level-beginner     { background: rgba(0,200,120,.12);  color: #00c878; }
.quiz-level-intermediate { background: rgba(255,180,0,.12);  color: #f5a623; }
.quiz-level-advanced     { background: rgba(255,80,80,.12);  color: #ff5050; }

/* form-inline-input */
.form-inline-input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: .6rem .9rem;
  font-size: .9rem;
  font-family: var(--sans);
}
.form-inline-input:focus { outline: none; border-color: var(--info); }

/* Responsive */
@media (max-width: 640px) {
  .quiz-result-card { flex-direction: column; align-items: flex-start; }
  .quiz-result-circle { width: 90px; height: 90px; }
  .quiz-result-pct { font-size: 1.3rem; }
  .quiz-action-row { flex-direction: column; }
}

/* ── Quiz widget — mobile ────────────────────────────────────── */
@media (max-width: 600px) {
  .quiz-section {
    padding: 0 .75rem;
    margin: 1.5rem auto .75rem;
  }
  .quiz-widget { border-radius: 12px; }
  .quiz-header { padding: 1.25rem; }
  .quiz-title  { font-size: 1.1rem; }

  .quiz-start-body  { padding: 1.75rem 1.25rem; }
  .quiz-stats-row   { border-radius: 10px; }
  .quiz-stat        { padding: .85rem 1rem; }
  .quiz-stat-val    { font-size: 1.15rem; }
  .quiz-stat-lbl    { font-size: .62rem; }

  .quiz-progress-label  { padding: .6rem 1.25rem .1rem; }
  .quiz-q-text          { padding: .85rem 1.25rem .5rem; font-size: .98rem; }
  .quiz-options-area    { padding: .25rem 1rem .75rem; gap: .4rem; }
  .quiz-opt-label       { padding: .75rem .9rem; gap: .75rem; }
  .quiz-opt-marker      { width: 26px; height: 26px; font-size: .73rem; }
  .quiz-opt-text        { font-size: .9rem; }
  .quiz-feedback        { margin: .4rem 1rem; padding: .85rem 1rem; }
  .quiz-action-row      { padding: .5rem 1.25rem 1.25rem; flex-direction: column; }
  .quiz-action-row .btn { width: 100%; justify-content: center; }

  .quiz-drag-list  { padding: 0; }
  .quiz-drag-item  { padding: .7rem .9rem; }
  .quiz-scenario-area { padding: 0 1.25rem .5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   QUIZ ADMIN — futuristic v2
   ═══════════════════════════════════════════════════════════════ */

@keyframes qz-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}
@keyframes qz-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes qz-pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57,211,83,.3); }
  50%       { box-shadow: 0 0 0 4px rgba(57,211,83,.08); }
}
@keyframes qz-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Futuristic panel ────────────────────────────────────────── */
.qz-panel {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.75rem;
  transition: border-color .25s, box-shadow .25s;
  animation: qz-fade-in .3s ease both;
}
.qz-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.qz-panel:hover { border-color: rgba(57,211,83,.25); box-shadow: 0 2px 20px rgba(57,211,83,.06); }
.qz-panel:hover::before { opacity: 1; }
.qz-panel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(57,211,83,.035), transparent);
  pointer-events: none;
  transform: translateY(-100%);
}
.qz-panel:hover::after { animation: qz-scan 2.5s ease infinite; }

/* ── Panel head ──────────────────────────────────────────────── */
.qz-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(57,211,83,.025) 0%, transparent 60%);
}
.qz-head h2 {
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--text-bright);
  letter-spacing: .02em;
}
.qz-head h2 .qz-accent { color: var(--accent); }
.qz-head p { font-size: .82rem; color: var(--text-dim); margin-top: .15rem; }

/* ── Panel body ──────────────────────────────────────────────── */
.qz-body { padding: 1.5rem; }
.qz-body-bare { padding: 0; }

/* ── Stat grid ───────────────────────────────────────────────── */
.qz-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.qz-stat {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.4rem;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.qz-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.qz-stat:hover { border-color: rgba(57,211,83,.35); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(57,211,83,.08); }
.qz-stat:hover::before { transform: scaleX(1); }
.qz-stat-icon { font-size: .7rem; color: var(--accent); font-family: var(--mono); letter-spacing: .1em; margin-bottom: .35rem; display: block; opacity: .65; }
.qz-stat-num  { font-family: var(--mono); font-size: 2.5rem; font-weight: 700; color: var(--text-bright); line-height: 1; display: block; }
.qz-stat-sub  { font-family: var(--mono); font-size: .7rem; color: var(--text-dim); margin-top: .25rem; display: block; }

/* ── Futuristic table ────────────────────────────────────────── */
.qz-table-wrap { overflow-x: auto; }
.qz-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .85rem;
}
.qz-table th {
  text-align: left;
  padding: .6rem 1rem;
  font-size: .7rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(57,211,83,.2);
  white-space: nowrap;
}
.qz-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.qz-table tbody tr { transition: background .12s; }
.qz-table tbody tr:hover { background: rgba(57,211,83,.04); box-shadow: inset 3px 0 0 var(--accent); }
.qz-table tbody tr:last-child td { border-bottom: none; }
.qz-table .qz-row-num { color: var(--text-dim); font-size: .75rem; }
.qz-table .qz-row-main { color: var(--text-bright); font-size: .88rem; }

/* ── Toggle (replaces checkboxes in quiz settings) ───────────── */
.qz-toggle-group { display: flex; flex-direction: column; gap: 0; }
.qz-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 0;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
}
.qz-toggle-row:last-child { border-bottom: none; }
.qz-toggle-wrap { flex-shrink: 0; margin-top: 2px; }
.qz-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--border-bright);
  border-radius: 11px;
  cursor: pointer;
  position: relative;
  transition: background .2s, border-color .2s, box-shadow .2s;
  display: block;
}
.qz-toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform .2s ease, background .2s;
}
.qz-toggle:checked {
  background: rgba(57,211,83,.15);
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(57,211,83,.3);
}
.qz-toggle:checked::after { transform: translateX(18px); background: var(--accent); }
/* Override .form-row input width:100% so toggle keeps its fixed size */
.form-row input.qz-toggle { width: 40px !important; height: 22px !important; padding: 0 !important; background: var(--bg-elev); }
.form-row input.qz-toggle:checked { background: rgba(57,211,83,.15) !important; border-color: var(--accent) !important; box-shadow: 0 0 8px rgba(57,211,83,.3) !important; }
.qz-toggle-info { flex: 1; }
.qz-toggle-title { font-size: .9rem; color: var(--text); display: block; }
.qz-toggle-desc  { font-size: .78rem; color: var(--text-dim); margin-top: .1rem; display: block; }

/* ── Topic checkbox pills ────────────────────────────────────── */
.qz-cb-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .75rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font-size: .8rem;
  font-family: var(--mono);
  color: var(--text-dim);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.qz-cb-label:hover { border-color: rgba(57,211,83,.4); color: var(--text); }
.qz-cb-label:has(input:checked) {
  border-color: var(--accent);
  background: rgba(57,211,83,.1);
  color: var(--accent);
  box-shadow: 0 0 6px rgba(57,211,83,.18);
}
.qz-cb-label input { display: none; }
.qz-cb-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--border-bright);
  transition: background .15s, box-shadow .15s;
  flex-shrink: 0;
}
.qz-cb-label:has(input:checked) .qz-cb-dot {
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent);
}

/* ── Question picker ─────────────────────────────────────────── */
.qz-q-picker {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border-bright) transparent;
}
.qz-q-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  cursor: pointer;
  transition: background .1s;
}
.qz-q-row:last-child { border-bottom: none; }
.qz-q-row:hover { background: rgba(57,211,83,.04); }
.qz-q-row:has(input:checked) { background: rgba(57,211,83,.06); }
.qz-q-cb {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-bright);
  border-radius: 4px;
  background: var(--bg-card);
  cursor: pointer;
  position: relative;
  margin-top: 3px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.qz-q-cb:checked {
  background: rgba(57,211,83,.15);
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(57,211,83,.35);
}
.qz-q-cb:checked::after {
  content: '✓';
  position: absolute;
  top: -2px; left: 1px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
}
.qz-q-main { font-size: .85rem; color: var(--text-bright); }
.qz-q-meta { font-size: .75rem; color: var(--text-dim); margin-top: .15rem; }

/* ── Neon type badges ────────────────────────────────────────── */
.qz-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: .67rem;
  font-weight: 600;
  padding: .16rem .52rem;
  border-radius: 4px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: box-shadow .15s;
  white-space: nowrap;
}
.qz-badge:hover { box-shadow: 0 0 7px currentColor; }
.qz-badge-single   { color: var(--info);    background: rgba(88,166,255,.08); }
.qz-badge-multiple { color: var(--magenta); background: rgba(210,168,255,.08); }
.qz-badge-drag     { color: var(--warn);    background: rgba(240,183,47,.08); }
.qz-badge-scenario { color: var(--accent);  background: rgba(57,211,83,.08); }
.qz-badge-yaml     { color: #63e6be;        background: rgba(99,230,190,.08); }
.qz-badge-script   { color: #da77f2;        background: rgba(218,119,242,.08); }

/* ── Gate pill ───────────────────────────────────────────────── */
.qz-pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .72rem;
  padding: .18rem .55rem; border-radius: 20px;
}
.qz-pill-members { color: var(--warn);   background: rgba(240,183,47,.08);  border: 1px solid rgba(240,183,47,.2); }
.qz-pill-public  { color: var(--accent); background: rgba(57,211,83,.06);   border: 1px solid rgba(57,211,83,.15); }
.qz-pill-login   { color: #74c0fc;       background: rgba(116,192,252,.06); border: 1px solid rgba(116,192,252,.2); }
.qz-pill-sub     { color: #63e6be;       background: rgba(99,230,190,.06);  border: 1px solid rgba(99,230,190,.2); }

/* ── Topic chip in index ─────────────────────────────────────── */
.qz-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  background: rgba(57,211,83,.06);
  border: 1px solid rgba(57,211,83,.18);
  border-radius: 20px;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--accent);
  transition: background .15s, box-shadow .15s;
}
.qz-topic-chip:hover { background: rgba(57,211,83,.1); box-shadow: 0 0 6px rgba(57,211,83,.15); }
.qz-topic-chip-del {
  background: none; border: none;
  color: rgba(248,81,73,.5);
  cursor: pointer; font-size: .72rem; padding: 0; line-height: 1;
  transition: color .15s;
}
.qz-topic-chip-del:hover { color: var(--danger); }

/* ── Add topic row ───────────────────────────────────────────── */
.qz-add-row {
  display: flex; gap: .75rem; flex-wrap: wrap;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(57,211,83,.012);
}

/* ── Import panel ────────────────────────────────────────────── */
.qz-import {
  border: 1px solid rgba(57,211,83,.22);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.75rem;
  background: rgba(57,211,83,.015);
  animation: qz-fade-in .3s ease both;
}
.qz-import-head {
  padding: .85rem 1.5rem;
  background: rgba(57,211,83,.045);
  border-bottom: 1px solid rgba(57,211,83,.12);
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--accent);
  display: flex; align-items: center; gap: .5rem;
}
.qz-import-body { padding: 1.5rem; }

/* ── Option rows in question form ────────────────────────────── */
.qz-opt-list { padding: .75rem 1.25rem; }
.qz-opt-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .35rem;
  border-bottom: 1px solid var(--border);
  border-radius: 4px;
  cursor: grab;
  transition: background .1s;
}
.qz-opt-row:hover { background: rgba(57,211,83,.03); }
.qz-opt-row:last-child { border-bottom: none; }
.qz-opt-handle { color: var(--text-dim); cursor: grab; flex-shrink: 0; opacity: .45; transition: opacity .15s; user-select: none; }
.qz-opt-row:hover .qz-opt-handle { opacity: 1; }
.qz-opt-cb {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-bright);
  border-radius: 4px;
  background: var(--bg);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.qz-opt-cb:checked {
  background: rgba(57,211,83,.12);
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(57,211,83,.35);
}
.qz-opt-cb:checked::after {
  content: '✓';
  position: absolute;
  top: -2px; left: 2px;
  font-size: 12px; color: var(--accent); font-weight: 700;
}
.qz-opt-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: .42rem .7rem;
  font-size: .88rem;
  transition: border-color .15s, box-shadow .15s;
}
.qz-opt-input:focus { outline: none; border-color: rgba(57,211,83,.4); box-shadow: 0 0 0 2px rgba(57,211,83,.07); }

/* ── Info note ───────────────────────────────────────────────── */
.qz-note {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .78rem;
  color: var(--warn);
  background: rgba(240,183,47,.06);
  border: 1px solid rgba(240,183,47,.18);
  border-radius: 6px; padding: .35rem .75rem;
}
.qz-note-info { color: var(--info); background: rgba(88,166,255,.06); border-color: rgba(88,166,255,.18); }

/* ── Breadcrumb & title chrome ───────────────────────────────── */
.qz-eyebrow {
  font-family: var(--mono); font-size: .65rem;
  color: var(--accent); letter-spacing: .2em;
  text-transform: uppercase; opacity: .6;
  margin-bottom: .2rem;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .qz-stat-num { font-size: 2rem; }
  .qz-head { padding: .75rem 1rem; }
  .qz-body { padding: 1rem; }
  .qz-table th, .qz-table td { padding: .6rem .75rem; }
  .qz-import-body { padding: 1rem; }
  .qz-add-row { padding: .75rem 1rem; }
}

/* =================================================================
   ADMIN GLOBAL — futuristic upgrade (applies to all admin pages)
   ================================================================= */

/* ── Admin page header ───────────────────────────────────────────── */
.admin-header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(57,211,83,.12);
  margin-bottom: 2rem;
}
.admin-header h1 {
  font-family: var(--mono);
  background: linear-gradient(90deg, var(--text-bright) 0%, var(--accent) 60%, var(--text-bright) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: qz-shimmer 4s linear infinite;
}
.admin-header .breadcrumb {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
  margin-bottom: .3rem;
}

/* ── Admin block: scan-line panel ───────────────────────────────── */
.admin-block {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  overflow: hidden;
  margin-bottom: 1.75rem;
  transition: border-color .25s, box-shadow .25s;
  animation: qz-fade-in .3s ease both;
}
.admin-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .3s;
}
.admin-block::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(57,211,83,.035), transparent);
  pointer-events: none;
  transform: translateY(-100%);
}
.admin-block:hover { border-color: rgba(57,211,83,.25); box-shadow: 0 2px 20px rgba(57,211,83,.06); }
.admin-block:hover::before { opacity: 1; }
.admin-block:hover::after { animation: qz-scan 2.5s ease infinite; }

/* Head spans full width via negative margin bleed */
.admin-block-head {
  margin: -1.5rem -1.5rem 1.25rem;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(57,211,83,.025) 0%, transparent 60%);
}
.admin-block-head h2, .admin-block > h2 {
  font-family: var(--mono);
  font-size: .95rem;
  color: var(--text-bright);
  letter-spacing: .02em;
}

/* ── Stat cards ─────────────────────────────────────────────────── */
.stat-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  animation: qz-fade-in .3s ease both;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.stat-card:hover { border-color: rgba(57,211,83,.35); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(57,211,83,.08); }
.stat-card:hover::before { transform: scaleX(1); }
.stat-num { color: var(--accent); }

/* ── Admin table ────────────────────────────────────────────────── */
.admin-table th {
  color: var(--accent);
  font-size: .7rem;
  letter-spacing: .12em;
  border-bottom: 1px solid rgba(57,211,83,.2);
  background: rgba(57,211,83,.015);
}
.admin-table tbody tr {
  transition: background .12s, box-shadow .12s;
}
.admin-table tbody tr:hover {
  background: rgba(57,211,83,.04);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── a-chip upgrade ─────────────────────────────────────────────── */
.a-chip {
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.a-chip:hover { border-color: rgba(57,211,83,.3); box-shadow: 0 4px 14px rgba(57,211,83,.07); transform: translateY(-2px); }

/* ── Action links ───────────────────────────────────────────────── */
.link-edit {
  font-family: var(--mono);
  font-size: .83rem;
  color: var(--info) !important;
  transition: color .15s, text-shadow .15s;
  text-decoration: none;
}
.link-edit:hover { text-shadow: 0 0 6px rgba(88,166,255,.5); }
.link-delete {
  transition: color .15s, text-shadow .15s;
}
.link-delete:hover { color: var(--danger); text-shadow: 0 0 6px rgba(248,81,73,.4); text-decoration: none; }

/* ── Admin section fade-in ──────────────────────────────────────── */
.admin-section { animation: qz-fade-in .35s ease both; }

/* ── Button micro-interactions ──────────────────────────────────── */
.btn-primary {
  transition: background .15s, box-shadow .15s, transform .1s;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover { box-shadow: 0 0 14px rgba(57,211,83,.35); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px rgba(57,211,83,.12); }

/* ── Admin form inputs glow on focus ────────────────────────────── */
.form-row input:focus:not(.qz-toggle),
.form-row textarea:focus,
.form-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(57,211,83,.1), 0 0 10px rgba(57,211,83,.07);
  outline: none;
}

/* ── Admin modal polish ─────────────────────────────────────────── */
.admin-modal {
  border: 1px solid rgba(57,211,83,.18);
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(57,211,83,.06);
}

/* ── Mobile responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .admin-block { padding: 1rem; }
  .admin-block-head { margin: -1rem -1rem 1rem; padding: .75rem 1rem; }
  .admin-header h1 { font-size: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════
   Quiz Import Tool
   ════════════════════════════════════════════════════════════════ */

/* Tabs */
.qit-tabs { display: flex; gap: .25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: .5rem; flex-wrap: wrap; }
.qit-tab { background: none; border: 1px solid transparent; border-radius: 6px 6px 0 0; color: var(--text-dim); cursor: pointer; font-family: var(--mono); font-size: .82rem; padding: .45rem .9rem; transition: color .15s, border-color .15s; }
.qit-tab:hover { color: var(--text); border-color: var(--border); }
.qit-tab-active { color: var(--accent); border-color: var(--border); border-bottom-color: transparent; background: var(--surface); }

/* Panels */
.qit-panel { display: none; }
.qit-panel-active { display: block; }

/* Drop zone */
.qit-drop-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 2rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.qit-drop-zone:hover, .qit-drop-zone-over { border-color: var(--accent); background: rgba(57,211,83,.04); }
.qit-drop-icon { font-size: 2rem; margin-bottom: .5rem; }
.qit-drop-link { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* Paste area */
.qit-paste-area { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: var(--mono); font-size: .82rem; padding: .75rem 1rem; resize: vertical; }
.qit-paste-area:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(57,211,83,.1); }

/* Alerts */
.qit-alert { border-radius: 7px; font-size: .88rem; padding: .75rem 1rem; }
.qit-alert-error { background: rgba(248,81,73,.08); border: 1px solid rgba(248,81,73,.3); color: #f85149; }
.qit-alert-success { background: rgba(57,211,83,.07); border: 1px solid rgba(57,211,83,.25); color: var(--accent); }

/* Assignment bar */
.qit-assign-bar { display: flex; gap: 1rem; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; align-items: flex-end; }
.qit-quiz-check-list { display: flex; flex-wrap: wrap; gap: .4rem .75rem; max-height: 96px; overflow-y: auto; padding: .35rem 0; }
.qit-quiz-check-item { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--text-dim); cursor: pointer; }
.qit-quiz-check-item input { accent-color: var(--accent); }

/* Question cards */
.qit-cards { display: flex; flex-direction: column; gap: 1rem; }
.qit-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; overflow: hidden; transition: box-shadow .15s; }
.qit-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.25); }
.qit-card-head { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; background: var(--bg); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.qit-card-num { color: var(--accent); font-family: var(--mono); font-size: .82rem; font-weight: 700; min-width: 2.5rem; }
.qit-card-type, .qit-card-difficulty { background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-size: .78rem; padding: .25rem .5rem; }
.qit-card-confidence { background: rgba(248,190,73,.1); border: 1px solid rgba(248,190,73,.3); border-radius: 4px; color: #f8be49; font-size: .72rem; padding: .2rem .5rem; }
.qit-card-delete { margin-left: auto; }
.qit-card-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.qit-card-question, .qit-card-expl { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: .88rem; padding: .5rem .75rem; resize: vertical; width: 100%; }
.qit-card-question:focus, .qit-card-expl:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(57,211,83,.08); }
.qit-card-expl { font-style: italic; color: var(--text-dim); font-size: .82rem; }

/* Option rows */
.qit-opts { display: flex; flex-direction: column; gap: .4rem; }
.qit-opt-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 6px; transition: background .1s; cursor: default; }
.qit-opt-row:hover { background: rgba(255,255,255,.04); }
.qit-opt-handle { color: var(--text-dim); cursor: grab; font-size: .85rem; padding: 0 .15rem; }
.qit-opt-correct { accent-color: var(--accent); flex-shrink: 0; }
.qit-opt-text { background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); flex: 1; font-size: .84rem; padding: .3rem .55rem; }
.qit-opt-text:focus { border-color: var(--accent); outline: none; }
.qit-opt-row.dragging { opacity: .4; }
.qit-opt-row.drag-over { background: rgba(57,211,83,.06); border: 1px dashed var(--accent); }
.qit-opts-actions { display: flex; align-items: center; gap: .75rem; margin-top: .25rem; }
.qit-opts-hint { color: var(--text-dim); font-size: .78rem; }

/* JSON export */
.qit-json-pre { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-family: var(--mono); font-size: .75rem; max-height: 360px; overflow: auto; padding: 1rem; white-space: pre; }

/* Empty state */
.qit-empty-state { padding: 2.5rem; text-align: center; color: var(--text-dim); font-family: var(--mono); }
.qit-empty-state p { margin-bottom: 1rem; }

/* ════════════════════════════════════════════════════════════════
   Quiz Suggestions
   ════════════════════════════════════════════════════════════════ */

.sug-counts { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sug-count-item { align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: .1rem; min-width: 72px; padding: .65rem 1rem; position: relative; text-align: center; text-decoration: none; transition: border-color .15s; }
.sug-count-item:hover { border-color: var(--accent); }
.sug-count-active { border-color: var(--accent); background: rgba(57,211,83,.06); }
.sug-count-num { color: var(--text); font-size: 1.3rem; font-weight: 700; line-height: 1; }
.sug-count-label { color: var(--text-dim); font-size: .75rem; }
.sug-badge { background: var(--danger); border-radius: 50%; color: #fff; font-size: .6rem; height: 16px; line-height: 16px; position: absolute; right: 6px; top: 6px; width: 16px; }

.sug-list { display: flex; flex-direction: column; gap: .75rem; }
.sug-item { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.sug-item-head { align-items: center; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; padding: .6rem 1rem; }
.sug-item-meta { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.sug-item-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.sug-from { font-size: .85rem; }
.sug-time { color: var(--text-dim); font-size: .78rem; }

.sug-status-badge { border-radius: 4px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .2rem .5rem; text-transform: uppercase; }
.sug-status-pending  { background: rgba(248,190,73,.12); color: #f8be49; }
.sug-status-reviewed { background: rgba(88,166,255,.12); color: #58a6ff; }
.sug-status-approved { background: rgba(57,211,83,.12);  color: var(--accent); }
.sug-status-rejected { background: rgba(248,81,73,.1);   color: var(--danger); }

.sug-source { border-bottom: 1px solid var(--border); font-size: .8rem; padding: .4rem 1rem; }
.sug-source-link { color: var(--accent); text-decoration: none; }
.sug-source-link:hover { text-decoration: underline; }
.sug-content { color: var(--text); font-size: .9rem; line-height: 1.6; padding: .85rem 1rem; white-space: pre-wrap; word-break: break-word; }
.sug-note { background: rgba(88,166,255,.06); border-top: 1px solid var(--border); color: var(--text-dim); font-size: .82rem; padding: .5rem 1rem; }

/* ════════════════════════════════════════════════════════════════
   Suggest a question button (frontend)
   ════════════════════════════════════════════════════════════════ */

.suggest-btn-wrap { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.suggest-btn { align-items: center; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; display: inline-flex; font-family: var(--mono); font-size: .78rem; gap: .4rem; padding: .35rem .75rem; transition: border-color .15s, color .15s; }
.suggest-btn:hover { border-color: var(--accent); color: var(--accent); }

.suggest-modal-overlay { align-items: center; background: rgba(0,0,0,.65); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 9999; }
.suggest-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.5); max-width: 460px; width: 100%; }
.suggest-modal-head { align-items: center; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; padding: .85rem 1.25rem; }
.suggest-modal-head h3 { color: var(--accent); font-family: var(--mono); font-size: .9rem; margin: 0; }
.suggest-modal-body { padding: 1.25rem; }
.suggest-modal-body textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font-size: .88rem; padding: .65rem .9rem; resize: vertical; width: 100%; }
.suggest-modal-body textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(57,211,83,.1); }
.suggest-modal-footer { border-top: 1px solid var(--border); display: flex; gap: .75rem; justify-content: flex-end; padding: .85rem 1.25rem; }
.suggest-modal-hint { color: var(--text-dim); font-size: .78rem; margin-top: .5rem; }

/* ════════════════════════════════════════════════════════════════
   Quiz Question Form — redesigned options, link panel, JSON panel
   ════════════════════════════════════════════════════════════════ */

/* 4-column grid for type/topic/difficulty/level */
.qf-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
@media (max-width:900px) { .qf-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:500px) { .qf-grid-4 { grid-template-columns: 1fr; } }

/* Required marker */
.qf-required { color: var(--danger); }

/* Character counter */
.qf-charcount { display: block; text-align: right; font-size: .75rem; color: var(--text-dim); margin-top: .2rem; }

/* ── Option rows ──────────────────────────────────────────────── */
.qf-opt-list { padding: .75rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }

.qf-opt-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .75rem;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: grab;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.qf-opt-row:hover { border-color: rgba(57,211,83,.25); background: rgba(57,211,83,.02); }
.qf-opt-row.qf-opt-correct {
  border-color: rgba(57,211,83,.45);
  background: rgba(57,211,83,.04);
  box-shadow: 0 0 0 2px rgba(57,211,83,.08);
}
.qf-opt-row.qf-opt-dragging { opacity: .4; border-style: dashed; }
.qf-opt-row.qf-opt-drag-over { border-color: var(--accent); background: rgba(57,211,83,.06); }

.qf-opt-handle { color: var(--text-dim); cursor: grab; flex-shrink: 0; opacity: .4; font-size: 1rem; transition: opacity .15s; user-select: none; }
.qf-opt-row:hover .qf-opt-handle { opacity: .9; }

/* Letter badge (A / B / C …) */
.qf-opt-letter {
  flex-shrink: 0; width: 24px; height: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--text-dim);
  transition: background .15s, border-color .15s, color .15s;
}
.qf-opt-row.qf-opt-correct .qf-opt-letter { background: rgba(57,211,83,.12); border-color: var(--accent); color: var(--accent); }

/* Custom checkbox */
.qf-opt-check-wrap { flex-shrink: 0; display: flex; align-items: center; cursor: pointer; }
.qf-opt-check-wrap input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.qf-opt-check-ui {
  width: 20px; height: 20px; border-radius: 5px;
  border: 1.5px solid var(--border-bright);
  background: var(--bg); display: block; position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.qf-opt-check-wrap input:checked + .qf-opt-check-ui {
  background: rgba(57,211,83,.12); border-color: var(--accent);
  box-shadow: 0 0 6px rgba(57,211,83,.3);
}
.qf-opt-check-wrap input:checked + .qf-opt-check-ui::after {
  content: '✓'; position: absolute; top: -1px; left: 3px;
  font-size: 12px; font-weight: 700; color: var(--accent);
}

/* Option text input */
.qf-opt-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: .9rem; padding: .1rem .2rem;
  caret-color: var(--accent);
}
.qf-opt-row.qf-opt-correct .qf-opt-input { color: var(--text); }

/* Remove button */
.qf-opt-remove {
  flex-shrink: 0; width: 22px; height: 22px; padding: 0;
  background: rgba(248,81,73,.08); border: 1px solid rgba(248,81,73,.18);
  border-radius: 5px; color: var(--danger); cursor: pointer; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
  opacity: .6;
}
.qf-opt-remove:hover { background: rgba(248,81,73,.18); border-color: rgba(248,81,73,.45); opacity: 1; }
.qf-opt-remove:disabled { opacity: .2; cursor: not-allowed; }

/* ── Link to content panel ────────────────────────────────────── */
.qf-link-tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.qf-link-tab {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); cursor: pointer; font-family: var(--mono); font-size: .8rem;
  padding: .35rem .9rem; transition: border-color .15s, color .15s, background .15s;
}
.qf-link-tab:hover { border-color: rgba(57,211,83,.3); color: var(--text); }
.qf-link-tab-active { border-color: var(--accent); color: var(--accent); background: rgba(57,211,83,.06); }

.qf-link-section { margin-top: .25rem; }

/* Status badge in panel head */
.qf-link-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .75rem; padding: .25rem .65rem;
  border-radius: 99px; border: 1px solid;
}
.qf-link-badge-ok  { color: var(--accent); border-color: rgba(57,211,83,.3); background: rgba(57,211,83,.06); }
.qf-link-badge-new { color: var(--info);   border-color: rgba(88,166,255,.3); background: rgba(88,166,255,.06); }

/* Quiz assignment info box */
.qf-quiz-box {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; border-radius: 8px; border: 1px solid;
  margin-top: .25rem;
}
.qf-quiz-box-exists { border-color: rgba(57,211,83,.25); background: rgba(57,211,83,.04); }
.qf-quiz-box-new    { border-color: rgba(88,166,255,.25); background: rgba(88,166,255,.04); }
.qf-quiz-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(57,211,83,.12); border: 1px solid rgba(57,211,83,.3);
  color: var(--accent); font-weight: 700; font-size: .85rem;
}
.qf-quiz-icon-new { background: rgba(88,166,255,.1); border-color: rgba(88,166,255,.3); color: var(--info); }

/* Toggle inside new-quiz box */
.qf-toggle-wrap { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.qf-toggle-wrap input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.qf-toggle-ui {
  width: 34px; height: 18px; border-radius: 99px;
  background: var(--border-bright); border: 1px solid var(--border-bright);
  position: relative; transition: background .2s, border-color .2s; flex-shrink: 0;
}
.qf-toggle-ui::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-surface, #fff); transition: transform .2s;
}
.qf-toggle-wrap input:checked + .qf-toggle-ui { background: var(--accent); border-color: var(--accent); }
.qf-toggle-wrap input:checked + .qf-toggle-ui::after { transform: translateX(16px); }

.qf-quiz-title-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: .88rem; padding: .4rem .7rem;
  transition: border-color .15s;
}
.qf-quiz-title-input:focus { outline: none; border-color: rgba(57,211,83,.4); box-shadow: 0 0 0 2px rgba(57,211,83,.07); }

/* ── JSON preview ─────────────────────────────────────────────── */
.qf-json-pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  color: var(--accent); font-family: var(--mono); font-size: .78rem;
  line-height: 1.6; margin: 0; overflow: auto; padding: 1rem; max-height: 360px;
  white-space: pre; word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════
   Features 1-8 — New CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── Terminal search line (inside hero terminal window) ──────── */
.terminal-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  line-height: 1.9;    /* matches .terminal-body line-height */
  margin: 0;
}
.terminal-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.92rem;   /* matches .terminal-body font-size */
  line-height: 1.9;
  padding: 0 0.45rem;
  caret-color: var(--accent);
  min-width: 0;
  -webkit-appearance: none;
}
.terminal-search-input::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}
.terminal-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.terminal-search-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  border-radius: 4px;
  transition: color .15s;
  line-height: 1;
}
.terminal-search-btn:hover { color: var(--accent); }
/* Active caret — show blinking block cursor when focused, hide otherwise */
.terminal-search-form:not(:focus-within) .terminal-search-input:placeholder-shown::after {
  content: '_';
  animation: blink 1s steps(2) infinite;
  color: var(--accent);
}

/* ── Search page ─────────────────────────────────────────────── */
.search-form { margin-bottom: 2rem; }
.search-input-wrap { display:flex; gap:.75rem; }
.search-input {
  flex: 1; background: var(--bg); border: 1px solid var(--border-bright);
  border-radius: 8px; padding: .75rem 1rem; color: var(--text);
  font-family: var(--mono); font-size: .95rem;
}
.search-input:focus { outline: none; border-color: var(--accent); }
.search-result-card {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .85rem 1rem; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; transition: border-color .15s;
}
.search-result-card:hover { border-color: var(--accent); }
.sr-type {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  padding: .15rem .45rem; border-radius: 4px; width: fit-content;
}
.sr-type-blog      { background:#1c3c2c; color:#39d353; }
.sr-type-video     { background:#1a2c4a; color:#58a6ff; }
.sr-type-interview { background:#3a2a1a; color:#f0b72f; }
.sr-level          { font-family:var(--mono); font-size:.7rem; padding:.15rem .45rem; border-radius:4px; }
.sr-title { color: var(--text); font-weight: 600; font-size: .95rem; }
.sr-excerpt { color: var(--text-dim); font-size: .82rem; }

/* ── Interview questions page ────────────────────────────────── */
.iq-filter-bar { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-bottom:1.25rem; }
.iq-select {
  background: var(--bg); border: 1px solid var(--border-bright); border-radius: 6px;
  padding: .5rem .85rem; color: var(--text); font-family: var(--mono); font-size: .85rem;
}
.iq-list { display: flex; flex-direction: column; gap: .75rem; }
.iq-card {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-secondary); overflow: hidden;
}
.iq-card[open] { border-color: var(--accent); }
.iq-summary {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: start; gap: .75rem;
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
}
.iq-summary::-webkit-details-marker { display: none; }
.iq-meta { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; grid-column:1; grid-row:1/3; }
.iq-num { font-family:var(--mono); font-size:.75rem; color:var(--text-dim); }
.iq-question { font-weight: 600; font-size: .95rem; grid-column:2; }
.iq-toggle-icon { font-size:.75rem; color:var(--text-dim); transition:transform .2s; grid-column:3; grid-row:1; }
.iq-card[open] .iq-toggle-icon { transform: rotate(90deg); }
.iq-answer {
  padding: 0 1.25rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border); margin-top: .5rem; padding-top: 1rem;
}
.iq-answer p, .iq-answer li { font-size: .9rem; line-height: 1.7; color: var(--text-dim); }
.iq-answer code { font-family: var(--mono); background: var(--bg); padding:.1rem .35rem; border-radius:3px; font-size:.85em; }
.iq-answer pre { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:.85rem; overflow-x:auto; margin:.75rem 0; }
.iq-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.75rem; }
.iq-level {
  font-family: var(--mono); font-size: .7rem; padding: .15rem .5rem;
  border-radius: 4px; font-weight: 600; white-space: nowrap;
}
.iq-level-beginner     { background:#1c3c2c; color:#39d353; }
.iq-level-intermediate { background:#1a2c4a; color:#58a6ff; }
.iq-level-advanced     { background:#3a1c1c; color:#ff7b72; }
.iq-topic { font-family:var(--mono); font-size:.72rem; color:var(--text-dim); }

/* ── Changelog page ──────────────────────────────────────────── */
.cl-timeline { position: relative; }
.cl-date-divider {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.75rem 0 1rem;
}
.cl-date-label {
  font-family: var(--mono); font-size: .78rem; color: var(--text-dim);
  white-space: nowrap;
}
.cl-date-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.cl-entry {
  display: flex; gap: 1rem; padding: .85rem 1rem;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: .6rem;
}
.cl-entry-left { display:flex; flex-direction:column; gap:.35rem; min-width:100px; flex-shrink:0; }
.cl-badge {
  display:inline-block; font-family:var(--mono); font-size:.7rem; font-weight:600;
  padding:.15rem .55rem; border-radius:4px; width:fit-content;
}
.cl-badge-updated    { background:#1a2c4a; color:#58a6ff; }
.cl-badge-added      { background:#1c3c2c; color:#39d353; }
.cl-badge-removed    { background:#3a1c1c; color:#ff7b72; }
.cl-badge-deprecated { background:#3a2a1a; color:#f0b72f; }
.cl-service-tag {
  font-family:var(--mono); font-size:.72rem; color:var(--text-dim);
  background:var(--bg); padding:.1rem .4rem; border-radius:4px; border:1px solid var(--border);
}
.cl-entry-head { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin-bottom:.35rem; }
.cl-entry-summary { font-weight:600; font-size:.9rem; }
.cl-post-link { font-family:var(--mono); font-size:.78rem; color:var(--accent); text-decoration:none; }
.cl-post-link:hover { text-decoration:underline; }
.cl-entry-details { font-size:.85rem; color:var(--text-dim); line-height:1.6; margin-top:.35rem; }
.cl-entry-details p { margin:.2rem 0; }
.cl-entry-details code { font-family:var(--mono); background:var(--bg); padding:.1rem .3rem; border-radius:3px; font-size:.9em; }
.cl-pagination { display:flex; gap:.75rem; margin-top:2rem; }

/* ── Roadmap list ────────────────────────────────────────────── */
.rm-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;
}
.rm-card {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1.25rem; background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; transition: border-color .15s, transform .1s;
}
.rm-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.rm-card-icon { font-size: 2rem; flex-shrink: 0; }
.rm-card-body { flex: 1; }
.rm-card-title { font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: .35rem; }
.rm-card-desc { font-size: .82rem; color: var(--text-dim); line-height: 1.5; margin-bottom: .5rem; }
.rm-card-meta { display:flex; gap:.4rem; flex-wrap:wrap; }
.rm-arrow { font-size: 1.1rem; color: var(--text-dim); margin-top: .25rem; flex-shrink: 0; }

/* ── Roadmap detail ──────────────────────────────────────────── */
.rm-progress-bar-wrap { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.rm-progress-bar-track {
  flex:1; max-width:400px; height:8px; background:var(--border);
  border-radius:4px; overflow:hidden;
}
.rm-progress-bar-fill {
  height:100%; background:var(--accent); border-radius:4px;
  transition:width .4s ease;
}
.rm-progress-label { font-family:var(--mono); font-size:.82rem; color:var(--text-dim); }
.rm-steps { display:flex; flex-direction:column; }
.rm-step {
  display:flex; gap:1rem; padding:.75rem 0;
  border-bottom:1px solid var(--border);
}
.rm-step:last-child { border-bottom:none; }
.rm-step-left { display:flex; flex-direction:column; align-items:center; }
.rm-step-check {
  width:36px; height:36px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.82rem; color:var(--text-dim);
  background:var(--bg); flex-shrink:0; transition:all .2s;
}
.rm-step-check-done { background:var(--accent); border-color:var(--accent); color:#000; font-weight:700; }
.rm-step-connector { flex:1; width:2px; background:var(--border); margin:.35rem auto; }
.rm-step-body { flex:1; padding-top:.35rem; }
.rm-step-meta { display:flex; gap:.5rem; align-items:center; margin-bottom:.35rem; flex-wrap:wrap; }
.rm-step-type { font-family:var(--mono); font-size:.72rem; color:var(--text-dim); }
.rm-step-optional { font-family:var(--mono); font-size:.68rem; color:var(--text-dim); background:var(--bg); padding:.1rem .35rem; border-radius:3px; border:1px solid var(--border); }
.rm-step-title { font-weight:600; font-size:.95rem; color:var(--text); text-decoration:none; display:block; margin-bottom:.25rem; }
a.rm-step-title:hover { color:var(--accent); }
.rm-step-excerpt { font-size:.82rem; color:var(--text-dim); line-height:1.5; margin:.2rem 0 .5rem; }
.rm-step-done .rm-step-title { color:var(--text-dim); }
.rm-mark-btn {
  font-family:var(--mono); font-size:.75rem; background:none;
  border:1px solid var(--border); border-radius:5px;
  color:var(--text-dim); padding:.25rem .65rem; cursor:pointer;
  transition:all .15s; margin-top:.35rem;
}
.rm-mark-btn:hover { border-color:var(--accent); color:var(--accent); }
.rm-mark-done { border-color:var(--accent); color:var(--accent); background:rgba(57,211,83,.08); }

/* ── Bookmarks ───────────────────────────────────────────────── */
.bookmark-btn { transition:color .15s, border-color .15s; }
.bookmark-btn.bookmarked { color:var(--accent); border-color:var(--accent); }
.bk-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.65rem 1rem; border-bottom:1px solid var(--border); gap:.75rem; flex-wrap:wrap;
}
.bk-row:last-child { border-bottom:none; }
.bk-info { flex:1; min-width:0; }
.bk-title { font-weight:600; font-size:.9rem; color:var(--text); text-decoration:none; display:block; }
.bk-title:hover { color:var(--accent); }
.bk-excerpt { font-size:.8rem; color:var(--text-dim); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Changelog suggestion button + panel ────────────────────── */
.cl-suggest-btn {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-dim); font-family: var(--mono); font-size: .72rem;
  padding: .15rem .5rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.cl-suggest-btn:hover { border-color: var(--accent); color: var(--accent); }
.cl-suggest-panel {
  margin-top: .75rem; padding: .85rem; background: var(--bg);
  border: 1px solid var(--border-bright); border-radius: 8px;
}
.cl-suggest-textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border-bright);
  border-radius: 6px; padding: .55rem .8rem; color: var(--text);
  font-family: var(--mono); font-size: .85rem; resize: vertical;
}
.cl-suggest-textarea:focus { outline: none; border-color: var(--accent); }

/* ── KNova auth gate ─────────────────────────────────────────── */
.knova-auth-gate { display: flex; justify-content: center; padding: 1rem 0 2rem; }
.knova-auth-terminal {
  width: 100%; max-width: 560px;
  background: #0d1117; border: 1px solid #2d3744; border-radius: 12px;
  box-shadow: 0 0 40px rgba(57,211,83,.08), 0 8px 32px rgba(0,0,0,.4);
  overflow: hidden;
}
.knova-auth-bar {
  display: flex; align-items: center; gap: .45rem;
  background: #161b22; border-bottom: 1px solid #2d3744;
  padding: .65rem 1rem;
}
.knova-auth-body { padding: 1.5rem; font-family: var(--mono); font-size: .9rem; }
.knova-auth-line  { color: var(--text); margin-bottom: .15rem; }
.knova-auth-prompt { color: var(--accent); font-weight: 700; margin-right: .5rem; }
.knova-auth-output { color: var(--text-dim); padding-left: 1.5rem; margin-bottom: .15rem; line-height: 1.6; }
.knova-auth-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .82rem;
  border-radius: 6px; padding: .55rem 1rem;
  cursor: pointer; transition: all .2s; border: 1px solid;
}
.knova-auth-btn-primary {
  background: rgba(57,211,83,.1); color: var(--accent);
  border-color: rgba(57,211,83,.4);
}
.knova-auth-btn-primary:hover {
  background: rgba(57,211,83,.2); border-color: var(--accent);
  box-shadow: 0 0 12px rgba(57,211,83,.2);
}
.knova-auth-btn-secondary {
  background: rgba(88,166,255,.08); color: #58a6ff;
  border-color: rgba(88,166,255,.3);
}
.knova-auth-btn-secondary:hover {
  background: rgba(88,166,255,.15); border-color: #58a6ff;
  box-shadow: 0 0 12px rgba(88,166,255,.15);
}
.knova-auth-btn-prompt { color: var(--accent); }

/* ── KNova daily usage bar ───────────────────────────────────── */
.knova-usage-bar {
  display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.knova-usage-track {
  flex: 1; max-width: 260px; height: 6px; background: var(--border);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
.knova-usage-fill {
  height: 100%; background: var(--accent); border-radius: 3px;
  transition: width .4s ease;
}
.knova-usage-label {
  font-family: var(--mono); font-size: .75rem; color: var(--text-dim);
}

/* ── KNova AI Agent chat ──────────────────────────────────────── */
.agent-messages {
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 200px; margin-bottom: 1.5rem;
}
.agent-msg { display: flex; flex-direction: column; }
.agent-msg-user { align-items: flex-end; }
.agent-msg-assistant { align-items: flex-start; }
.agent-bubble {
  max-width: 85%; padding: .75rem 1rem; border-radius: 10px;
  font-size: .92rem; line-height: 1.65; word-break: break-word; white-space: pre-wrap;
}
.agent-msg-user .agent-bubble {
  background: var(--accent); color: #000; border-bottom-right-radius: 3px;
}
.agent-msg-assistant .agent-bubble {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.agent-thinking { color: var(--text-dim); font-family: var(--mono); font-size: .85rem; }
.agent-sources {
  margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; max-width: 85%;
}
.agent-src-label {
  font-family: var(--mono); font-size: .7rem; color: var(--text-dim);
  width: 100%; margin-bottom: .1rem;
}
.agent-src-link {
  font-family: var(--mono); font-size: .75rem; color: var(--accent);
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: .15rem .5rem; text-decoration: none;
}
.agent-src-link:hover { border-color: var(--accent); }
.agent-input-wrap { background: var(--bg-secondary); border: 1px solid var(--border-bright); border-radius: 10px; padding: .85rem; }
.agent-input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--text); font-size: .95rem; resize: none;
  font-family: inherit; line-height: 1.5;
}

/* ── Settings toggle ─────────────────────────────────────────── */
.settings-toggle-wrap { position: relative; display: inline-block; width: 48px; height: 26px; cursor: pointer; }
.settings-toggle-wrap input { opacity: 0; width: 0; height: 0; }
.settings-toggle-ui {
  position: absolute; inset: 0; background: var(--border-bright);
  border-radius: 26px; transition: background .2s;
}
.settings-toggle-ui::before {
  content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.settings-toggle-wrap input:checked + .settings-toggle-ui { background: var(--accent); }
.settings-toggle-wrap input:checked + .settings-toggle-ui::before { transform: translateX(22px); }

/* ── AI source tab buttons ───────────────────────────────────── */
.ai-src-tab {
  background: none; border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-dim); font-family: var(--mono); font-size: .75rem;
  padding: .2rem .6rem; cursor: pointer; transition: all .15s;
}
.ai-src-tab:hover { border-color: var(--accent); color: var(--accent); }
.ai-src-tab-active { border-color: var(--accent); color: var(--accent); background: rgba(57,211,83,.08); }

/* ── AI quiz multi-select ───────────────────────────────────── */
.ai-multi-list {
  max-height: 180px; overflow-y: auto; border: 1px solid var(--border-bright);
  border-radius: 6px; padding: .3rem;
}
.ai-multi-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .5rem; border-radius: 4px; cursor: pointer; font-size: .83rem;
}
.ai-multi-item:hover { background: var(--bg-secondary); }
.ai-multi-item input { accent-color: var(--accent); flex-shrink: 0; }

/* ── Content suggestion security UI ─────────────────────────── */
.cs-flagged { border-color: #ff7b72 !important; background: rgba(255,123,114,.04); }
.cs-flag-badge {
  background: rgba(255,123,114,.15); color: #ff7b72;
  border: 1px solid #ff7b72; border-radius: 5px;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  padding: .15rem .55rem;
}
.cs-blurred-wrap { position: relative; margin-bottom: .75rem; border-radius: 6px; overflow: hidden; }
.cs-blurred-content { filter: blur(6px); user-select: none; pointer-events: none; }
.cs-blur-text {
  font-size: .9rem; line-height: 1.65; color: var(--text);
  background: var(--bg); border-left: 3px solid #ff7b72;
  padding: .6rem .9rem; border-radius: 0 6px 6px 0; word-break: break-word;
}
.cs-blur-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(10,14,20,.75); border-radius: 6px;
}

/* ── Admin table (generic) ───────────────────────────────────── */
.admin-table { border-collapse:collapse; }
.admin-table th, .admin-table td {
  padding:.6rem .85rem; text-align:left; border-bottom:1px solid var(--border); font-size:.88rem;
}
.admin-table th { font-family:var(--mono); font-size:.75rem; color:var(--text-dim); }
.admin-table tbody tr:hover { background:var(--bg); }

/* ── Form labels/inputs (missing) ────────────────────────────── */
.form-label { display:block; font-family:var(--mono); font-size:.8rem; color:var(--text-dim); margin-bottom:.3rem; }
.form-input {
  width:100%; background:var(--bg); border:1px solid var(--border-bright);
  border-radius:6px; padding:.6rem .9rem; color:var(--text);
  font-family:var(--mono); font-size:.88rem;
}
.form-input:focus { outline:none; border-color:var(--accent); }
select.form-input { appearance:none; }
textarea.form-input { resize:vertical; }

/* ═══════════════════════════════════════════════════════════════
   Portfolio / About Page
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */
.pf-hero {
  padding: 4rem 0 3rem;
  background: linear-gradient(180deg, rgba(57,211,83,.04) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.pf-hero-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  align-items: center;
}
.pf-eyebrow {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--accent);
  margin-bottom: .6rem;
}
.pf-name {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: .65rem;
}
.pf-title-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.pf-title-line { font-size: .95rem; color: var(--text-dim); }
.pf-title-sep  { color: var(--border-bright); }
.pf-tagline {
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-dim);
  max-width: 540px;
  margin-bottom: 1.5rem;
}
.pf-hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; }

/* Terminal card */
.pf-hero-terminal {
  background: #0d1117;
  border: 1px solid #2d3744;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(57,211,83,.07), 0 8px 32px rgba(0,0,0,.5);
}
.pf-term-bar {
  display: flex; align-items: center; gap: .45rem;
  background: #161b22; border-bottom: 1px solid #2d3744;
  padding: .65rem 1rem;
}
.pf-term-title {
  margin-left: auto;
  font-family: var(--mono); font-size: .72rem; color: var(--text-dim);
}
.pf-term-body {
  padding: 1.25rem 1.5rem;
  font-family: var(--mono); font-size: .85rem; line-height: 1.9;
}
.pf-prompt { color: var(--accent); font-weight: 700; margin-right: .5rem; }
.pf-term-json { padding: .35rem 0 .35rem 1rem; font-size: .82rem; }
.pf-jk { color: #79c0ff; }
.pf-jp { color: var(--text-dim); }
.pf-jv { color: #a5d6ff; }
.pf-jn { color: #f8c555; }
.pf-js { color: #a5d6ff; }
.pf-term-line { font-family:var(--mono); font-size:.82rem; color:var(--text-dim); margin-bottom:.4rem; }

/* ── Stats ──────────────────────────────────────────────────── */
.pf-stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.pf-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem .75rem;
  text-align: center;
  transition: border-color .2s, transform .1s;
}
.pf-stat:hover { border-color: var(--accent); transform: translateY(-2px); }
.pf-stat-num {
  display: block;
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.pf-stat-unit { font-family: var(--mono); font-size: 1.1rem; color: var(--accent); }
.pf-stat-label { display: block; font-size: .72rem; color: var(--text-dim); margin-top: .4rem; }

/* ── Certifications ─────────────────────────────────────────── */
.pf-cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.pf-cert-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid;
  transition: transform .15s, box-shadow .15s;
}
.pf-cert-card:hover { transform: translateY(-2px); }
.pf-cert-azure  { border-color: rgba(88,166,255,.4); background: rgba(88,166,255,.06); }
.pf-cert-ai     { border-color: rgba(179,136,255,.4); background: rgba(179,136,255,.06); }
.pf-cert-github { border-color: rgba(57,211,83,.4);  background: rgba(57,211,83,.06); }
.pf-cert-azure:hover  { box-shadow: 0 0 20px rgba(88,166,255,.15); }
.pf-cert-ai:hover     { box-shadow: 0 0 20px rgba(179,136,255,.15); }
.pf-cert-github:hover { box-shadow: 0 0 20px rgba(57,211,83,.15); }
.pf-cert-icon { font-size: 1.6rem; flex-shrink: 0; }
.pf-cert-name { font-weight: 600; font-size: .88rem; }
.pf-cert-code { font-family: var(--mono); font-size: .75rem; color: var(--accent); margin-top: .15rem; }
.pf-cert-issuer { font-size: .72rem; color: var(--text-dim); }

/* ── Skills ─────────────────────────────────────────────────── */
.pf-section-title {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--text-dim);
  margin-bottom: 1.75rem;
  display: flex; align-items: center; gap: .75rem;
}
.pf-section-title::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.pf-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.pf-skill-group {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
  transition: border-color .2s;
}
.pf-skill-group:hover { border-color: var(--border-bright); }
.pf-skill-cat {
  font-family: var(--mono); font-size: .82rem;
  color: var(--text-dim); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .4rem;
}
.pf-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .65rem; }
.pf-chip {
  font-family: var(--mono); font-size: .72rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; padding: .2rem .6rem;
  color: var(--text-dim); transition: border-color .15s, color .15s;
}
.pf-chip:hover { border-color: var(--accent); color: var(--accent); }
.pf-chip-azure  { border-color: rgba(88,166,255,.4);  color: #58a6ff; }
.pf-chip-aws    { border-color: rgba(240,183,47,.4);  color: #f0b72f; }
.pf-chip-hot    { border-color: rgba(57,211,83,.4);   color: var(--accent); }
.pf-chip-ai     { border-color: rgba(179,136,255,.4); color: #b392f0; }
.pf-skill-detail { font-size: .78rem; color: var(--text-dim); line-height: 1.6; }

/* ── Timeline ───────────────────────────────────────────────── */
.pf-timeline { position: relative; padding-left: 2rem; }
.pf-timeline::before {
  content: ''; position: absolute; left: 8px; top: 8px; bottom: 0;
  width: 2px; background: var(--border);
}
.pf-tl-item { position: relative; margin-bottom: 2.5rem; }
.pf-tl-dot {
  position: absolute; left: -2rem; top: 5px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--border);
  transition: border-color .2s, background .2s;
}
.pf-tl-current .pf-tl-dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px rgba(57,211,83,.4);
}
.pf-tl-edu .pf-tl-dot { border-color: #58a6ff; }
.pf-tl-content {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.25rem 1.4rem;
  transition: border-color .2s;
}
.pf-tl-current .pf-tl-content { border-color: rgba(57,211,83,.25); }
.pf-tl-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.pf-tl-role { font-weight: 700; font-size: .95rem; display: block; }
.pf-tl-company { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
.pf-tl-period { font-family: var(--mono); font-size: .75rem; color: var(--text-dim); white-space: nowrap; }
.pf-tl-bullets { list-style: none; padding: 0; margin-bottom: .75rem; }
.pf-tl-bullets li { font-size: .87rem; color: var(--text-dim); line-height: 1.65; padding-left: 1rem; position: relative; margin-bottom: .3rem; }
.pf-tl-bullets li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); }
.pf-tl-awards { display: flex; gap: .4rem; flex-wrap: wrap; }
.pf-award { font-family: var(--mono); font-size: .7rem; background: rgba(57,211,83,.08); border: 1px solid rgba(57,211,83,.25); color: var(--accent); padding: .2rem .55rem; border-radius: 4px; }

/* ── Projects ───────────────────────────────────────────────── */
.pf-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.pf-project-card {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.35rem;
  transition: border-color .2s, transform .1s;
  display: flex; flex-direction: column; gap: .65rem;
}
.pf-project-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pf-project-tag { font-family: var(--mono); font-size: .7rem; color: var(--text-dim); }
.pf-project-title { font-weight: 700; font-size: .95rem; color: var(--text); }
.pf-project-desc { font-size: .85rem; color: var(--text-dim); line-height: 1.65; flex: 1; }
.pf-project-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ── Opportunities ──────────────────────────────────────────── */
.pf-opps-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; }
.pf-opp-list { display: flex; flex-direction: column; gap: 1rem; }
.pf-opp-item { display: flex; align-items: flex-start; gap: .85rem; }
.pf-opp-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
.pf-contact-card {
  background: #0d1117; border: 1px solid #2d3744; border-radius: 12px;
  padding: 1.4rem; font-family: var(--mono);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pf-hero-inner { grid-template-columns: 1fr; }
  .pf-hero-terminal { display: none; }
  .pf-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .pf-opps-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pf-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-skills-grid, .pf-projects-grid { grid-template-columns: 1fr; }
}