/* ===== Themes — each one named after a gem, switchable via [data-theme] on <html> ===== */

:root, [data-theme="sapphire"] {
  /* Sapphire (default) — crisp modern light, cool blue accent. */
  --bg: #F3F6FC;
  --bg-soft: #E9F0FB;
  --card: #FFFFFF;
  --card-2: #EEF3FC;
  --line: #DCE6F5;
  --ink: #1B2A41;
  --muted: #5C7086;
  --accent: #2C5FE0;
  --accent-deep: #1A3FA6;
  --amber: #E8A93D;
  --danger: #D8434A;
  --ok: #2FA36B;
  --radius: 16px;
  --shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent);
  --bg-gradient: radial-gradient(1200px 600px at 80% -10%, #E9F0FB 0%, var(--bg) 55%);
  --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --card-blur: none;
}

[data-theme="amethyst"] {
  /* Amethyst — bold, glassy, playful. Drifting gradient blobs (see body::before/after). */
  --bg: #FBF5FF;
  --bg-soft: #F3E9FF;
  --card: color-mix(in srgb, #FFFFFF 80%, transparent);
  --card-2: #F3E4FF;
  --line: #E4D2FA;
  --ink: #341C54;
  --muted: #7C6291;
  --accent: #8B3FE0;
  --accent-deep: #6423B0;
  --amber: #E8A93D;
  --danger: #D8437A;
  --ok: #3FA37E;
  --radius: 18px;
  --shadow: 0 10px 30px color-mix(in srgb, var(--accent) 18%, transparent);
  --bg-gradient: radial-gradient(1100px 550px at 85% -10%, #F3E4FF 0%, transparent 60%), var(--bg);
  --topbar-bg: color-mix(in srgb, var(--bg) 78%, transparent);
  --card-blur: blur(14px);
}

[data-theme="onyx"] {
  /* Onyx — premium dark, glowing emerald accent. */
  --bg: #0B0E14;
  --bg-soft: #131824;
  --card: #151B26;
  --card-2: #1C2432;
  --line: #2A3444;
  --ink: #E7ECF5;
  --muted: #8A97AC;
  --accent: #3DDC97;
  --accent-deep: #0F6B4A;
  --amber: #F0B84A;
  --danger: #F0524F;
  --ok: #4AE3A0;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.5);
  --bg-gradient: radial-gradient(1200px 600px at 80% -10%, #131824 0%, var(--bg) 55%);
  --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --card-blur: none;
  --glow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent);
}

[data-theme="ruby"] {
  /* Ruby — warm light, crimson accent, soft rounded cards. */
  --bg: #FDF6F5;
  --bg-soft: #FBEAEA;
  --card: #FFFFFF;
  --card-2: #FCEDED;
  --line: #F1D6D8;
  --ink: #3A1A22;
  --muted: #8A606A;
  --accent: #D62246;
  --accent-deep: #A11133;
  --amber: #E0912D;
  --danger: #B3261E;
  --ok: #2FA36B;
  --radius: 20px;
  --shadow: 0 10px 28px color-mix(in srgb, var(--accent) 16%, transparent);
  --bg-gradient: radial-gradient(1150px 580px at 82% -10%, #FBE0E2 0%, var(--bg) 55%);
  --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --card-blur: none;
}

[data-theme="emerald"] {
  /* Emerald — crisp light green, sharper corners, gradient from the start side. */
  --bg: #F2FBF6;
  --bg-soft: #E3F6EC;
  --card: #FFFFFF;
  --card-2: #E9F7EF;
  --line: #CBE8D6;
  --ink: #123329;
  --muted: #4C7A65;
  --accent: #067A55;
  --accent-deep: #04543B;
  --amber: #C9902A;
  --danger: #D8434A;
  --ok: #067A55;
  --radius: 12px;
  --shadow: 0 8px 24px color-mix(in srgb, var(--accent) 14%, transparent);
  --bg-gradient: radial-gradient(1150px 580px at 16% -10%, #DBF3E5 0%, var(--bg) 55%);
  --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --card-blur: none;
}

[data-theme="citrine"] {
  /* Citrine — honey-gold warm cream, deep amber accent. */
  --bg: #FEFAEF;
  --bg-soft: #FBF1D8;
  --card: #FFFFFF;
  --card-2: #FCF3DD;
  --line: #EEDFBB;
  --ink: #3B2E12;
  --muted: #897548;
  --accent: #B07A0C;
  --accent-deep: #8A5E06;
  --amber: #E0A32E;
  --danger: #C4433F;
  --ok: #2FA36B;
  --radius: 14px;
  --shadow: 0 10px 26px color-mix(in srgb, var(--accent) 18%, transparent);
  --bg-gradient: radial-gradient(1120px 560px at 85% -10%, #FBEBC5 0%, var(--bg) 55%);
  --topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);
  --card-blur: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-gradient);
  color: var(--ink);
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background-color .35s ease, color .35s ease;
}

/* Amethyst signature — two slow-drifting blurred blobs behind everything. */
[data-theme="amethyst"] body::before, [data-theme="amethyst"] body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55;
  animation: drift 22s ease-in-out infinite;
}
[data-theme="amethyst"] body::before {
  width: 480px; height: 480px; top: -120px; inset-inline-end: -100px; background: #D9B8FF;
}
[data-theme="amethyst"] body::after {
  width: 420px; height: 420px; bottom: -140px; inset-inline-start: -100px; background: #FFD1EC;
  animation-delay: -11s;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 25px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="amethyst"] body::before, [data-theme="amethyst"] body::after { animation: none; }
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Topbar */
.topbar { border-bottom: 1px solid var(--line); background: var(--topbar-bg); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; transition: background-color .35s ease, border-color .35s ease; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 20px; min-width: 0; flex: 0 1 auto; }
.brand:hover { text-decoration: none; }
.brand-gem { font-size: 24px; flex: none; }
.brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; align-items: center; gap: 14px; flex: none; }
.nav-link { color: var(--muted); font-weight: 500; font-size: 15px; white-space: nowrap; }
.nav-link:hover { color: var(--ink); text-decoration: none; }
.nav-link.muted { font-size: 14px; }
.nav-user { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; min-width: 0; }
/* The signed-in name is the first thing worth losing when the bar gets tight —
   the avatar still identifies the account. */
.nav-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); }
.btn-ghost { border: 1px solid var(--accent-deep); color: var(--accent); padding: 7px 16px; border-radius: 10px; }
.btn-ghost:hover { background: var(--accent-deep); color: #fff; text-decoration: none; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--ink); font-size: 20px; line-height: 1; padding: 6px 12px; border-radius: 10px; cursor: pointer; }

/* Flash */
.flashes { margin-top: 14px; }
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 10px; font-weight: 500; }
.flash-ok { background: color-mix(in srgb, var(--ok) 13%, transparent); border: 1px solid var(--ok); color: var(--ok); }
.flash-error { background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid var(--danger); color: var(--danger); }

.preview-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: var(--accent); color: #fff; font-weight: 600; text-align: center; }
.preview-banner-exit { color: #fff; text-decoration: underline; white-space: nowrap; }
.preview-banner-exit:hover { opacity: .85; }

main.wrap { flex: 1; padding-top: 24px; padding-bottom: 48px; }
.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; padding: 22px 0; text-align: center; }

/* Hero / gallery header */
.hero { margin-bottom: 22px; }
.hero h1 { font-size: 30px; margin: 0 0 6px; }
.hero p { color: var(--muted); margin: 0; }

/* "Become a beta tester" recruitment banner (gallery, non-testers only) */
.tester-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 20px; padding: 16px 20px; border-radius: var(--radius);
  color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent); }
.tester-cta-text { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tester-cta-emoji { font-size: 34px; flex: none; animation: ctaWiggle 3.5s ease-in-out infinite; }
@keyframes ctaWiggle { 0%,92%,100% { transform: rotate(0); } 94% { transform: rotate(-14deg); } 97% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .tester-cta-emoji { animation: none; } }
.tester-cta-title { font-weight: 700; font-size: 18px; }
.tester-cta-sub { font-size: 14px; opacity: .92; margin-top: 2px; }
.tester-cta-btn { flex: none; background: #fff; color: var(--accent-deep); font-weight: 700; white-space: nowrap; }
.tester-cta-btn:hover { background: #fff; color: var(--accent); transform: translateY(-1px); }
.tester-cta-pending { flex: none; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5);
  color: #fff; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 10px; white-space: nowrap; }
/* Admin approve/decline row for pending tester requests (admin/users.html) */
.request-decision { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.request-decision:last-child { border-bottom: none; }
.request-decision-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.request-decision-actions { display: flex; gap: 8px; flex: none; }
.request-decision-actions form { display: inline; margin: 0; }

/* Search + filters */
.filters { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 24px; }
.filters-bar { display: flex; gap: 10px; align-items: center; }
.filters-bar .field { flex: 1 1 auto; }
.filters-advanced { display: none; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.filters-advanced.open { display: flex; }
.filters-advanced .field { flex: 1 1 150px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 13px; color: var(--muted); }
.field.grow { flex: 1 1 220px; }
input[type=text], input[type=email], select, textarea {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 15px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 90px; }
.btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font-weight: 600; font-size: 15px; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--accent-deep); }
.btn.secondary { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); }
.btn.secondary:hover { background: var(--line); }
.btn.danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.small { padding: 6px 12px; font-size: 13px; }

/* Admin quick-add floating button (gallery) */
.fab-add {
  position: fixed; left: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 400; line-height: 1;
  color: #fff; text-decoration: none;
  background: var(--accent);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transition: transform .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  overflow: hidden;
}
.fab-add:hover { background: var(--accent-deep); transform: translateY(-2px); }
.fab-add:active { transform: translateY(0); }
.fab-add:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

/* Guided admin tour: a spotlight ring (via an oversized box-shadow) around the
   current step's element, plus a floating tip box with Next/Skip. */
.tour-mask {
  position: fixed; z-index: 300; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.6);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
  pointer-events: none; display: none;
}
.tour-tip {
  position: fixed; z-index: 301; max-width: 320px; display: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; color: var(--ink);
}
.tour-tip h4 { margin: 0 0 6px; font-size: 15px; }
.tour-tip p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-step-count { font-size: 12px; color: var(--muted); }

/* Cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.card { background: var(--card); backdrop-filter: var(--card-blur); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .35s ease; cursor: pointer; }
.card:hover { transform: translateY(-4px); border-color: var(--accent-deep); box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 20%, transparent); }
.card h3 { margin: 0; font-size: 18px; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent); text-decoration: none; }
.card .desc { color: var(--muted); font-size: 14px; flex: 1; }
.desc strong, .detail-desc strong { color: var(--ink); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--card-2); border: 1px solid var(--line); color: var(--muted); font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.chip.type { border-color: var(--accent-deep); color: var(--accent); }
.chip.type.has-tip { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.persona-explain { margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.persona-explain .who { color: var(--accent); font-weight: 600; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.stars { color: var(--amber); font-size: 14px; letter-spacing: 1px; }
.stars .count { color: var(--muted); margin-inline-start: 6px; }
.fav-btn { background: none; border: none; cursor: pointer; font-size: 26px; color: var(--muted); line-height: 1; }
.fav-btn.on { color: var(--danger); }
.fav-btn-lg { font-size: 38px; }
/* A visible caption next to the heart — a hover title alone is invisible on
   mobile, and sitting right next to the star rating read as related to it. */
.fav-wrap { display: inline-flex; align-items: center; gap: 5px; }
.fav-caption { font-size: 11px; color: var(--muted); white-space: nowrap; }

.empty { text-align: center; color: var(--muted); padding: 60px 20px; }

/* Detail */
.detail-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; }
.detail-head h1 { margin: 0 0 8px; font-size: 28px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.panel { background: var(--card); backdrop-filter: var(--card-blur); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 18px 0; transition: background-color .35s ease, border-color .35s ease; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.prompt-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px; white-space: pre-wrap; font-size: 13.5px; max-height: 320px; overflow: auto; color: var(--ink); }
.section-title { font-size: 20px; margin: 26px 0 12px; }
.detail-desc { color: var(--muted); margin: 4px 0 0; font-size: 16px; }

/* Detail — hero CTA */
.cta-panel { text-align: center; padding: 30px 20px; background: linear-gradient(180deg, var(--card-2), var(--card)); }
.btn.hero { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; padding: 16px 44px;
  border-radius: 12px; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, background-color .35s ease;
  animation: pulseGlow 2.6s ease-in-out infinite; }
.btn.hero:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 42%, transparent); text-decoration: none; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 28%, transparent); }
  50% { box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 46%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .btn.hero { animation: none; } }
.secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.secondary-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.share-link { margin: 20px 0 0; color: var(--muted); font-size: 14px; }

/* Detail — optional companion environment (link + description + guide file) */
.companion-box { text-align: center; }
.companion-title { font-size: 17px; margin: 0 0 8px; }
.companion-desc { color: var(--muted); font-size: 15px; margin: 0 0 14px; }

/* Comment composer extras — emoji + GIF picker (WhatsApp-style) */
.composer-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; position: relative; }
/* The three markdown buttons lead the toolbar. A fixed min-width keeps
   B / • / 1. the same size despite very different glyph widths. */
.md-btn { min-width: 34px; padding: 6px 8px; font-weight: 700; }
.emoji-picker, .gif-picker { display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 10px; }
/* Fixed-px columns (not 1fr) on purpose: a `1fr` track's implicit minimum is
   its content's natural size, so 8 emoji buttons wider than 240px (260px panel
   minus padding) overflowed clean past the panel's own rounded border instead
   of shrinking to fit. Fixed tracks + width:max-content can't overflow. */
.emoji-picker.open { display: grid; grid-template-columns: repeat(8, 32px); gap: 4px; width: max-content; animation: menuIn .15s ease; }
.emoji-opt { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; box-sizing: border-box;
  background: none; border: none; font-size: 20px; cursor: pointer; border-radius: 8px; padding: 0; line-height: 1; font-family: inherit; }
.emoji-opt:hover { background: var(--card-2); }
.gif-picker.open { display: block; width: 280px; animation: menuIn .15s ease; }
.gif-search { width: 100%; margin-bottom: 8px; }
.gif-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 240px; overflow-y: auto; }
.gif-thumb { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); display: block; }
.gif-thumb:hover { border-color: var(--accent-deep); }
.gif-loading { grid-column: 1 / -1; color: var(--muted); font-size: 13px; text-align: center; padding: 24px 0; }
.gif-preview { display: inline-flex; align-items: center; gap: 8px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 10px; }
.gif-preview img { height: 44px; border-radius: 6px; display: block; }
.gif-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 2px; }
.gif-remove:hover { color: var(--danger); }

/* Recommended starter prompts (detail page) */
.prompt-list { display: flex; flex-direction: column; gap: 12px; }
.prompt-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.prompt-card .prompt-text { color: var(--ink); font-size: 15px; white-space: pre-wrap; }
.prompt-card .prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Comments */
.comment { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--card); }
.comment.reply { margin-inline-start: 28px; border-right: 3px solid var(--accent-deep); background: var(--card-2); }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.comment-head .who { font-weight: 600; }
.badge-admin { background: var(--accent-deep); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.badge-tester { background: var(--ok); color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 700; }
/* Unread-comment notification badge — nav link ("ניהול") + dashboard tile ("תגובות") */
.nav-badge { background: var(--danger); color: #fff; font-size: 11px; min-width: 16px; padding: 1px 6px;
  border-radius: 999px; font-weight: 700; display: inline-block; margin-inline-start: 5px; vertical-align: middle; }

/* Beta tester tools — crash-test checklist + structured feedback (gem_detail.html) */
.probe-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.probe-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chip.probe-pass { color: var(--ok); border-color: var(--ok); }
.chip.probe-fail { color: var(--danger); border-color: var(--danger); }
.check-q { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.check-q .check-text { flex: 1; min-width: 180px; }
.check-q .check-yn { display: flex; gap: 14px; flex: none; }
.check-q .check-yn label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 14px; }
.check-q .check-yn input { width: auto; }
.comment .date { color: var(--muted); font-size: 12px; }
/* Comment bodies go through the `commentbody` filter (richtext.py), which emits
   <br> and drops the source newline — so NO `white-space: pre-wrap` here, it
   would double every break. `overflow-wrap` keeps a pasted URL from blowing
   the card out. */
.comment-body { line-height: 1.65; overflow-wrap: anywhere; }
.comment-body ul, .comment-body ol { margin: 8px 0; padding-inline-start: 22px; }
.comment-body li { margin: 3px 0; }
.comment-body strong { font-weight: 700; }
/* Actions row under a comment — 👍 like, ↩ reply, ✏️ edit, reply count.
   👍 and not ♥ on purpose: ♥ already means "favorite" and ★ means "rating",
   both on this same page. */
.comment-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; }
.like-btn.on { border-color: var(--accent-deep); color: var(--accent); }
.like-btn.disabled { cursor: default; opacity: .7; }
.like-btn.pop { animation: favPop .4s ease; }
.reply-count { color: var(--muted); font-size: 13px; }
.reply-to { color: var(--muted); font-size: 12px; }
.reply-hint { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
/* Every notification email links to #comment-<id>. Without this, landing on
   the page gives no clue which comment you were sent to. */
.comment:target { border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.rating-input { display: inline-flex; align-self: flex-start; flex-direction: row-reverse; gap: 8px; font-size: 56px; line-height: 1;
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 18px; background: var(--card-2); }
.rating-input input { display: none; }
/* empty stars were nearly invisible on the light glass card (var(--line)) —
   use a clearly-visible muted tone so the picker reads at a glance. Explicit
   font-size: .field label {font-size:13px} is equal-specificity and would
   otherwise win over inheriting this container's 56px, shrinking every star. */
.rating-input label { font-size: inherit; cursor: pointer; color: color-mix(in srgb, var(--muted) 55%, var(--line)); transition: color .12s ease, transform .12s ease; }
.rating-input label:hover { transform: scale(1.12); }
.rating-input label:hover, .rating-input label:hover ~ label,
.rating-input input:checked ~ label { color: var(--amber); }
.comment-img { max-width: 260px; max-height: 260px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; display: block; }
.file-input { font-size: 13px; color: var(--muted); padding: 6px 8px; }
.file-input::file-selector-button { background: var(--card-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; font-family: inherit; font-size: 13px; cursor: pointer; margin-inline-end: 10px; }
.file-input::file-selector-button:hover { border-color: var(--accent-deep); }

/* Gem requests — vote widget */
.request-row { display: flex; gap: 16px; align-items: flex-start; }
.vote-widget { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; min-width: 40px; }
.vote-btn { background: none; border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 30px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 14px; }
.vote-btn:hover { border-color: var(--accent-deep); color: var(--ink); }
.vote-btn.up.on { color: var(--ok); border-color: var(--ok); }
.vote-btn.down.on { color: var(--danger); border-color: var(--danger); }
.vote-btn.disabled { opacity: .4; cursor: default; }
.vote-score { font-weight: 700; font-size: 15px; }
.request-body { flex: 1; min-width: 0; }
.request-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Tables (admin) */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-weight: 600; }
tbody tr { transition: background-color .12s ease; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--card-2) 45%, transparent); }
tbody tr:hover { background: var(--card-2); }
td input[type="checkbox"] { width: auto; cursor: pointer; }
.status-pill { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.status-published { color: var(--ok); border-color: var(--ok); }
.status-test { color: var(--accent); border-color: var(--accent-deep); }
.status-draft { color: var(--amber); border-color: var(--amber); }
.status-hidden { color: var(--muted); }
.status-open { color: var(--amber); border-color: var(--amber); }
.status-planned { color: var(--accent); border-color: var(--accent-deep); }
.status-declined { color: var(--muted); }

/* Multi-select checkbox list (e.g. subjects in the gem editor) */
.checkbox-list { display: flex; flex-wrap: wrap; gap: 8px; }
.checkbox-item { display: inline-flex; align-items: center; gap: 6px; background: var(--card);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
.checkbox-item input { width: auto; }
.checkbox-item:hover { border-color: var(--accent-deep); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 16px; margin: 18px 0; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: center; }
.tile .num { font-size: 34px; font-weight: 700; color: var(--accent); }
.tile .lbl { color: var(--muted); font-size: 14px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.login-card { max-width: 440px; margin: 60px auto; text-align: center; }
.login-card .panel { padding: 32px; }
.google-btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #202124; font-weight: 600; padding: 12px 22px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 15px; }
.google-btn:hover { background: #f1f3f4; text-decoration: none; }

/* The nav collapses into the hamburger well before phone width: signed in as
   admin it carries a menu pill, the account, a sign-out and the theme picker,
   which stops fitting next to the brand somewhere around the tablet range. */
@media (max-width: 900px) {
  .nav-toggle { display: block; flex: none; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 12px 20px 16px;
    z-index: 30;
  }
  .nav.open { display: flex; }
  .nav-user { order: -1; }
  .nav-user-name { max-width: none; }
  .theme-switcher { width: 100%; order: 5; }
  .nav-menu { width: 100%; }
  .nav-pill { width: 100%; justify-content: space-between; height: 40px; }
  /* The panels themselves are un-floated at the very bottom of this file — see
     "Mobile: header panels open inline". */
}

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .detail-head h1 { font-size: 24px; }
  .brand { font-size: 16px; flex: 1 1 auto; }
  .brand-text { max-width: none; white-space: normal; }
}

/* Onyx overrides — placed last so equal-specificity rules above lose the cascade. */
[data-theme="onyx"] .btn { background: var(--accent-deep); }
[data-theme="onyx"] .btn:hover { background: var(--accent); color: #06150F; }
[data-theme="onyx"] .btn:hover, [data-theme="onyx"] .card:hover, [data-theme="onyx"] .btn.hero:hover {
  box-shadow: var(--glow);
}

/* Theme switcher */
.theme-switcher { position: relative; }
.theme-toggle { background: none; border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 500;
  line-height: 1; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  transition: border-color .18s, background-color .18s; }
.theme-toggle:hover { border-color: var(--accent-deep); background: var(--card-2); }
.theme-menu { display: none; position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 40;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 8px; min-width: 220px; }
.theme-menu.open { display: block; animation: menuIn .18s ease; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.theme-option { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
  border-radius: 10px; padding: 8px 10px; cursor: pointer; font-family: inherit; text-align: right; }
.theme-option:hover { background: var(--card-2); }
.theme-option.active { background: var(--card-2); font-weight: 600; }
.theme-swatch { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.08); }
.theme-option .name { color: var(--ink); font-size: 14px; }
.theme-option .desc { color: var(--muted); font-size: 12px; display: block; }

/* Header dropdown (admin tools). Shares the theme-switcher's pill + panel
   shape on purpose, so the two menu triggers in the bar read as one family. */
.nav-menu { position: relative; }
.nav-pill { background: none; border: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 14px;
  font-weight: 500; line-height: 1; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: border-color .18s, background-color .18s; }
.nav-pill:hover, .nav-pill[aria-expanded="true"] { border-color: var(--accent-deep); background: var(--card-2); }
.nav-pill .caret { font-size: 10px; opacity: .6; transition: transform .18s; }
.nav-pill[aria-expanded="true"] .caret { transform: rotate(180deg); }
.drop-menu { display: none; position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 40;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 8px; min-width: 280px; }
.drop-menu.open { display: block; animation: menuIn .18s ease; }
.drop-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none;
  border-radius: 10px; padding: 8px 10px; cursor: pointer; font-family: inherit; text-align: right; color: var(--ink); }
.drop-item:hover { background: var(--card-2); text-decoration: none; }
.drop-emoji { font-size: 18px; flex: none; line-height: 1; }
.drop-text { min-width: 0; flex: 1; }
.drop-text .name { color: var(--ink); font-size: 14px; font-weight: 500; display: block; }
.drop-text .desc { color: var(--muted); font-size: 12px; display: block; }
.drop-kbd { flex: none; font-family: inherit; font-size: 11px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.drop-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* Audience toggle (gallery) */
.audience-toggle { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.audience-pill { background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 14px;
  font-weight: 500; padding: 8px 16px; border-radius: 999px; transition: all .15s ease; }
.audience-pill:hover { border-color: var(--accent-deep); color: var(--ink); text-decoration: none; }
.audience-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="onyx"] .audience-pill.active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.chip.audience-teachers { border-color: var(--accent-deep); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card-2)); }
.chip.audience-students { border-color: var(--ok); color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--card-2)); }

/* Card entrance animation */
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.grid .card { animation: cardIn .5s ease both; }
.grid .card:nth-child(1) { animation-delay: .02s; }
.grid .card:nth-child(2) { animation-delay: .07s; }
.grid .card:nth-child(3) { animation-delay: .12s; }
.grid .card:nth-child(4) { animation-delay: .17s; }
.grid .card:nth-child(5) { animation-delay: .22s; }
.grid .card:nth-child(6) { animation-delay: .27s; }
.grid .card:nth-child(7) { animation-delay: .32s; }
.grid .card:nth-child(8) { animation-delay: .37s; }

/* Micro-interactions */
.btn { transition: background-color .18s ease, color .18s ease, transform .1s ease, box-shadow .18s ease; }
.btn:active { transform: scale(.96); }
.fav-btn { transition: color .15s ease, transform .15s ease; }
.fav-btn.pop { animation: favPop .4s ease; }
@keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.vote-btn { transition: all .15s ease; }
.vote-btn:active { transform: scale(.9); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Admin quick-search palette (Ctrl/Cmd+K) */
/* (Its trigger is a .drop-item in the admin menu — styled with the dropdown.) */
.cmdk-overlay { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--ink) 45%, transparent);
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cmdk-overlay[hidden] { display: none; }
.cmdk-box { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  animation: menuIn .15s ease; backdrop-filter: var(--card-blur); }
.cmdk-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cmdk-icon { font-size: 16px; opacity: .7; flex: none; }
.cmdk-input-row .cmdk-input { width: auto; flex: 1; border: none; background: none; padding: 4px 0;
  font: inherit; font-size: 16px; color: var(--ink); }
.cmdk-input-row .cmdk-input:focus { outline: none; box-shadow: none; }
.cmdk-esc { flex: none; font-size: 11px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 5px; padding: 2px 6px; font-family: inherit; }
.cmdk-results { max-height: 60vh; overflow-y: auto; padding: 6px; }
.cmdk-empty, .cmdk-hint { padding: 18px 14px; color: var(--muted); font-size: 14px; text-align: center; }
.cmdk-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  cursor: pointer; text-decoration: none; color: inherit; }
.cmdk-row:hover, .cmdk-row.active { background: var(--card-2); text-decoration: none; }
.cmdk-row .chip { flex: none; }
.cmdk-row-main { flex: 1; min-width: 0; }
.cmdk-row-title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row-actions { display: flex; gap: 4px; flex: none; }
.cmdk-row-actions button, .cmdk-row-actions a { background: none; border: 1px solid var(--line); color: var(--ink);
  border-radius: 7px; padding: 5px 7px; font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit; }
.cmdk-row-actions button:hover, .cmdk-row-actions a:hover { border-color: var(--accent-deep); background: var(--card); }

/* Mobile: header panels open inline.
   Both dropdowns (theme picker, admin tools) are absolutely positioned on
   desktop. Inside the stacked hamburger nav there is nothing to float over, so
   they become part of the flow. This block sits at the very END of the file on
   purpose — it has the same specificity as the desktop rules above, so only
   source order can make it win. (The theme menu had this bug: its override was
   written earlier in the file and never applied.) */
@media (max-width: 900px) {
  .theme-menu, .drop-menu {
    position: static; width: 100%; min-width: 0; margin-top: 8px;
    box-shadow: none; background: var(--bg-soft);
  }
}

.gallery-lead { display: flex; align-items: flex-start; gap: 20px; margin-block-end: 16px; }
.gallery-lead-main { flex: 1; min-width: 0; }

/* QR for someone watching on a projector or YouTube: holds the fixed public address only. */
.scan { flex: none; margin: 0; display: grid; justify-items: center; gap: 6px; }
.scan img { display: block; width: 124px; height: 124px; border-radius: 8px; border: 1px solid var(--line); }
.scan figcaption { font-size: 13px; color: var(--muted); }
/* Already on a phone: nothing to scan. */
@media (max-width: 560px) { .scan { display: none; } }