/* === S-TierMaker — WordPress Plugin === */

.stm-app {
  --bg: #0d1117;
  --bg-card: #161b22;
  --bg-input: #21262d;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --accent: #58a6ff;
  --accent-hover: #79c0ff;
  --green: #3fb950;
  --red: #f85149;
  --orange: #d29922;
  --purple: #a371f7;

  --tier-s: #FF7F27;
  --tier-a: #D4A017;
  --tier-b: #93C47D;
  --tier-c: #6FA8DC;
  --tier-d: #8E7CC3;
  --tier-f: #E06666;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);

  margin: 0;
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.stm-app * {
  box-sizing: border-box;
}

/* === Header === */
.stm-app #appHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-shrink: 0;
}

.stm-app .shared-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: rgba(88,166,255,0.1);
  border-bottom: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
}
.stm-app .shared-banner.hidden { display: none; }

.stm-app .voting-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.stm-app .voting-bar.hidden { display: none; }

.stm-app .voting-bar-label { color: var(--text-muted); }

.stm-app .voting-user-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 13px;
}
.stm-app .voting-user-select:focus { border-color: var(--accent); }

.stm-app .voting-stats {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 13px;
}

.stm-app .header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stm-app .stm-logo-link {
  display: flex;
  align-items: center;
}

.stm-app .stm-logo-img {
  display: block;
  border-radius: var(--radius-sm);
}

.stm-app .stm-brand {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--accent);
  white-space: nowrap;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

.stm-app .header-right {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* === Buttons === */
#stmApp .btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text) !important;
  background: #21262d !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none;
  text-shadow: none !important;
  text-decoration: none !important;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
#stmApp .btn:hover, #stmApp .btn:focus, #stmApp .btn:active, #stmApp .btn:focus-visible {
  border-color: #6e7681 !important;
  filter: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
#stmApp .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
#stmApp .btn:active { transform: translateY(0); box-shadow: none !important; }
#stmApp .btn:focus { outline: none; }
#stmApp .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#stmApp .btn-primary, #stmApp .btn-primary:active { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
#stmApp .btn-primary:hover, #stmApp .btn-primary:focus { background: #2ea043 !important; border-color: #2ea043 !important; color: #fff !important; }

#stmApp .btn-secondary, #stmApp .btn-secondary:active { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text) !important; }
#stmApp .btn-secondary:hover, #stmApp .btn-secondary:focus { background: #30363d !important; border-color: #6e7681 !important; color: var(--text) !important; }

#stmApp .btn-accent, #stmApp .btn-accent:active { background: #1f6feb !important; border-color: #1f6feb !important; color: #fff !important; }
#stmApp .btn-accent:hover, #stmApp .btn-accent:focus { background: #388bfd !important; border-color: #388bfd !important; color: #fff !important; }

#stmApp .btn-danger, #stmApp .btn-danger:active { background: transparent !important; border-color: var(--red) !important; color: var(--red) !important; }
#stmApp .btn-danger:hover, #stmApp .btn-danger:focus { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }

/* Icon buttons (Export / Share) */
#stmApp .btn-icon { width: 34px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
#stmApp .btn-icon svg { width: 17px; height: 17px; display: block; }

/* BULLETPROOF inline-SVG icons — some themes zero the size, hide, or override
   fill/stroke on all <svg>. Force ours visible, sized, stroked (never filled),
   at id specificity + !important so the theme can't blank them out. */
html body #stmApp svg { visibility: visible !important; opacity: 1 !important; overflow: visible; }
html body #stmApp .btn svg, html body #stmApp .btn-icon svg,
html body #stmApp .stm-back-link svg,
html body #stmApp .item-edit svg, html body #stmApp .item-remove svg, html body #stmApp .item-url-icon svg,
html body #stmApp .stm-search-item svg {
  display: inline-block !important;
  vertical-align: middle;
  fill: none !important;
  stroke: currentColor !important;
}
html body #stmApp .btn-icon svg { width: 17px !important; height: 17px !important; }
html body #stmApp .stm-back-link svg { width: 18px !important; height: 18px !important; }
html body #stmApp .item-edit svg, html body #stmApp .item-remove svg, html body #stmApp .item-url-icon svg { width: 12px !important; height: 12px !important; }
/* The theme may set fill/stroke — or, most commonly, zero stroke-width — on child
   shapes directly. Presentation attributes (stroke-width="2" on the tag) LOSE to a
   theme's `svg *{stroke-width:0}` reset, which makes the outline invisible even
   though stroke=currentColor. Pin all three with !important on every icon child. */
html body #stmApp svg path, html body #stmApp svg circle, html body #stmApp svg rect,
html body #stmApp svg line, html body #stmApp svg polyline, html body #stmApp svg polygon,
html body #stmApp svg ellipse, html body #stmApp svg g {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}
/* Guard against the theme forcing the icon's colour to transparent/inherit-nothing
   (currentColor would then resolve to nothing). Buttons set their own text colour,
   but give bare icons a concrete fallback so the stroke always has a colour. */
html body #stmApp .item-edit, html body #stmApp .item-remove,
html body #stmApp .item-url-icon, html body #stmApp .stm-back-link { color: var(--text) !important; }
#stmApp .btn-export, #stmApp .btn-export:active { background: var(--purple) !important; border-color: var(--purple) !important; color: #fff !important; }
#stmApp .btn-export:hover, #stmApp .btn-export:focus { background: #b88ff5 !important; border-color: #b88ff5 !important; color: #fff !important; }
#stmApp .btn-share, #stmApp .btn-share:active { background: #14b8a6 !important; border-color: #14b8a6 !important; color: #fff !important; }
#stmApp .btn-share:hover, #stmApp .btn-share:focus { background: #2dd4bf !important; border-color: #2dd4bf !important; color: #06281f !important; }

.stm-app .btn-small { padding: 4px 10px; font-size: 12px; }

/* === Leaderboard name (header title) === */
#stmApp #listNameInput {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}
#stmApp #listNameInput:hover:not([readonly]) { background: rgba(255,255,255,0.04); }
#stmApp #listNameInput:focus { border-color: var(--accent); background: var(--bg-input); outline: none; }
#stmApp #listNameInput::placeholder { color: var(--text-muted); font-weight: 700; }
#stmApp #listNameInput[readonly] { cursor: default; }

/* === Tier Area === */
.stm-app #tierArea {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 16px 8px;
  overflow-y: auto;
}

.stm-app .tier-row {
  display: flex;
  gap: 0;
  min-height: 96px;
  flex: 1 1 0;
  max-height: 200px;
  align-items: stretch;
}

.stm-app .tier-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 64px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: filter 0.15s;
  border-radius: var(--radius) 0 0 var(--radius);
}
.stm-app .tier-label:hover { filter: brightness(1.15); }
.stm-app .tier-label:active { filter: brightness(0.9); }

.stm-app .tier-items {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 6px;
  padding: 8px;
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow-y: auto;   /* items beyond one row scroll inside the fixed-height row instead of growing/overlapping it */
  overflow-x: hidden;
}

.stm-app .tier-items.drag-over {
  background: rgba(88,166,255,0.08);
  outline: 2px dashed var(--accent);
}

/* === Tags → Columns (in-chart) ===
   The tier chart is kept as-is; each tier row's item area is sliced into
   equal-width columns (one per tag) with full-height vertical dividers, and a
   thin title row above the top tier labels each column. */
.stm-app .tier-col-header {
  display: flex;
  align-items: stretch;
  margin: 0 0 2px;
}
.stm-app .tier-col-header-spacer {
  width: 64px;
  min-width: 64px;
  flex-shrink: 0;
}
.stm-app .tier-col-header-cells {
  flex: 1;
  display: grid;
}
.stm-app .tier-col-header-cell {
  min-width: 0;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 1px solid var(--border);
}
.stm-app .tier-col-header-cell:first-child { border-left: none; }

.stm-app .tier-items.tag-split {
  display: grid;
  grid-auto-rows: 1fr;      /* single row fills the wrap height */
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  overflow: visible;
}
.stm-app .tag-col-cell {
  min-width: 0;
  height: 100%;             /* dividers span the full row height */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 6px;
  padding: 8px;
  border-left: 1px solid var(--border);
  overflow-y: auto;
}
.stm-app .tag-col-cell:first-child { border-left: none; }
.stm-app .tag-col-cell.drag-over {
  background: rgba(88,166,255,0.08);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
/* Keep column cards a predictable size (the row-scaling rule doesn't apply). */
.stm-app .tag-col-cell .item-card {
  width: 72px;
  height: 72px;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}

/* === Item Cards === */
.stm-app .item-card {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: grab;
  border: 2px solid var(--border);
  background: var(--bg-input);
  transition: border-color 0.15s, opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
/* Inside tier rows, cards scale to fill available row height while staying square.
   The tier row flexes between 96-200px; cards scale proportionally (64-180px). */
.stm-app .tier-items .item-card {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
  min-height: 64px;
  max-height: 180px;
}
.stm-app .item-card:hover { border-color: var(--accent); }
.stm-app .item-card.dragging { opacity: 0.4; transform: scale(0.95); }
.stm-app .item-card:active { cursor: grabbing; }

.stm-app .item-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.stm-app .item-card .item-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: var(--text);
  font-size: 10px;
  padding: 2px 4px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Edit / remove buttons share the upper-RIGHT corner (hover only). */
.stm-app .item-card .item-edit {
  position: absolute;
  top: 2px;
  right: 24px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.6);
  color: var(--text);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 3;
}
.stm-app .item-card:hover .item-edit { display: flex; }
.stm-app .item-edit:hover { background: var(--accent); }

.stm-app .item-card .item-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.6);
  color: var(--text);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 3;
}
.stm-app .item-card:hover .item-remove { display: flex; }
.stm-app .item-remove:hover { background: var(--red); }

/* External-link indicator — pinned flush to the upper-LEFT corner. */
.stm-app .item-url-icon {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.6);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  pointer-events: none;
  z-index: 2;
}
.stm-app .item-card.has-url { cursor: pointer; }

.stm-app .item-vote-bar {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  height: 6px;
}
.stm-app .item-vote-seg {
  height: 100%;
  transition: width 0.2s;
}

/* Vote percentage badge — shown to everyone in voting mode (raw counts stay admin-only) */
.stm-app .item-card .item-pct {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
}
/* Ghost = the current viewer's own pick when it differs from the crowd majority */
.stm-app .item-card.ghost {
  opacity: 0.5;
  border-style: dashed;
  border-color: var(--accent);
}
/* Your-vote indicator on ghost cards */
.stm-app .item-card.ghost .ghost-label {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  z-index: 3;
  pointer-events: none;
}

/* Text-only item card */
.stm-app .item-card.text-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
/* In tier rows, text label font-size scales with card height */
.stm-app .tier-items .item-card.text-item { container-type: inline-size; }
.stm-app .tier-items .item-card.text-item .item-label {
  font-size: clamp(9px, 10cqi, 15px);
}
.stm-app .item-card.text-item .item-label {
  position: static;
  background: none;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* === Unassigned Section ===
 * Compact area: header above, cards scrolling below.
 * Use position:relative so the stmCorner can be absolutely positioned inside. */
.stm-app #unassignedSection {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  flex-shrink: 0;
  height: 120px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Guests with editing OFF get no Unassigned pool: collapse the section so #tierArea
 * (flex:1) reclaims the fixed 120px, and keep the voting-status corner visible as a
 * thin right-aligned strip (it lives inside this section, so we can't just hide it). */
.stm-app #unassignedSection.pool-hidden {
  height: auto;
  min-height: 0;
  border-top: none;
  padding: 4px 16px;
}
.stm-app #unassignedSection.pool-hidden .section-header,
.stm-app #unassignedSection.pool-hidden .item-grid {
  display: none;
}
.stm-app #unassignedSection.pool-hidden .stm-corner {
  position: static;
  align-self: flex-end;
}

.stm-app #unassignedSection .section-header {
  margin-bottom: 0;
  white-space: nowrap;
}

.stm-app .section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.stm-app .section-header h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0;
}

.stm-app .count-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg-input);
  color: var(--text-muted);
}

.stm-app .item-grid {
  display: flex;
  flex: 1;
  min-width: 0;   /* let it shrink below its content's width so overflow scrolls instead of stretching the row */
  flex-wrap: nowrap;
  gap: 6px;
  height: 80px;
  overflow-x: auto;
  overflow-y: hidden;
}

.stm-app .item-grid.drag-over {
  outline: 2px dashed var(--accent);
  border-radius: var(--radius);
}

.stm-app .item-grid:empty::after {
  content: 'Drop items here';
  color: var(--text-muted);
  font-size: 13px;
  padding: 8px;
  font-style: italic;
}

/* === Modal === */
.stm-app .modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stm-app .modal.hidden { display: none; }

.stm-app .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.stm-app .modal-content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow);
  max-height: 90vh;
  overflow-y: auto;
}

.stm-app .modal-sm { max-width: 340px; }
.stm-app .modal-md { max-width: 440px; }

/* Inline-SVG icons inside item chrome + icon buttons render at a fixed size,
   independent of any system/icon font. */
.stm-app .item-edit svg, .stm-app .item-remove svg { width: 12px; height: 12px; display: block; }
.stm-app .item-url-icon svg { width: 12px; height: 12px; display: block; }

/* === Search leaderboards modal === */
#stmApp #searchModal .modal-backdrop { background: rgba(0,0,0,0.8); }
#stmApp .stm-search-modal { max-width: 520px; }
#stmApp .stm-search-row { display: flex; gap: 8px; margin-bottom: 12px; }
#stmApp .stm-search-cat {
  flex: 0 0 auto; max-width: 40%;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; outline: none;
}
#stmApp #searchInput {
  flex: 1; min-width: 0;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 14px; outline: none;
}
#stmApp #searchInput:focus, #stmApp .stm-search-cat:focus { border-color: var(--accent); }
#stmApp .stm-search-results { max-height: 52vh; overflow-y: auto; margin: 0 -4px; }
#stmApp .stm-search-loading { color: var(--text-muted); font-size: 13px; padding: 16px 8px; }
#stmApp .stm-search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
#stmApp .stm-search-item:hover { background: var(--bg-input); border-color: var(--accent); }
#stmApp .stm-search-item-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stmApp .stm-search-item-cats { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.stm-app .modal-content h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}

.stm-app .modal-content label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stm-app .modal-content input[type="text"],
.stm-app .modal-content input[type="url"],
.stm-app .modal-content input[type="email"],
.stm-app .modal-content input[type="number"],
.stm-app .modal-content textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  outline: none;
}
.stm-app .modal-content input[type="text"]:focus,
.stm-app .modal-content input[type="url"]:focus,
.stm-app .modal-content input[type="email"]:focus,
.stm-app .modal-content input[type="number"]:focus,
.stm-app .modal-content textarea:focus { border-color: var(--accent); }

.stm-app .modal-content input[type="color"] {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px;
}

.stm-app .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/* === Modal Tabs === */
.stm-app .modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.stm-app .tab-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s;
}
.stm-app .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.stm-app .tab-btn:hover { color: var(--text); }

.stm-app .tab-panel.hidden { display: none; }

/* === Upload Zone === */
.stm-app .upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 32px 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-top: 4px;
}
.stm-app .upload-zone:hover { border-color: var(--accent); background: rgba(88,166,255,0.05); }
.stm-app .upload-zone.drag-over { border-color: var(--accent); background: rgba(88,166,255,0.1); }

.stm-app .upload-icon {
  font-size: 32px;
  color: var(--text-muted);
}

.stm-app .image-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.stm-app .image-preview-grid img {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* === Saved Lists === */
.stm-app .saved-list {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}

.stm-app .saved-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.stm-app .saved-item:hover { background: #30363d; }

.stm-app .saved-item-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
}

.stm-app .saved-item-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-right: 8px;
}

.stm-app .saved-item-delete {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}
.stm-app .saved-item-delete:hover { background: var(--red); color: #fff; }

.stm-app .empty-msg {
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
}
.stm-app .empty-msg.hidden { display: none; }

/* === Toast === */
.stm-app #toastContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stm-app .toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  box-shadow: var(--shadow);
  animation: toastIn 0.2s ease-out;
}

.stm-app .toast.success { border-color: var(--green); }
.stm-app .toast.error { border-color: var(--red); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Drag ghost === */
.stm-app .drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 80px;
  height: 80px;
  opacity: 0.8;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stm-app .drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Browse button === */
.stm-app .browse-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 4px;
}
.stm-app .browse-btn:hover { background: var(--accent-hover); }

/* === Image Collections === */
.stm-app #collectionsSection {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  flex-shrink: 0;
}

.stm-app .collections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stm-app .collection-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stm-app .collection-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.stm-app .collection-header:hover { background: #1c2128; }

.stm-app .collection-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
}

.stm-app .collection-count {
  font-size: 12px;
  color: var(--text-muted);
}

.stm-app .collection-actions {
  display: flex;
  gap: 4px;
}

.stm-app .collection-body { display: none; }
.stm-app .collection-card.expanded .collection-body { display: block; }

.stm-app .collection-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  max-height: 200px;
  overflow-y: auto;
}
.stm-app .collection-images:empty::after {
  content: 'Drag images here or use + Images to add';
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  padding: 4px;
}

.stm-app .collection-thumb {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.stm-app .collection-thumb:hover { border-color: var(--accent); transform: scale(1.05); }
.stm-app .collection-thumb.selected { border-color: var(--accent); }
.stm-app .collection-thumb.selected::after {
  content: '+';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.stm-app .collection-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stm-app .collection-thumb .thumb-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: var(--text);
  font-size: 9px;
  padding: 1px 3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stm-app .collection-toolbar {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  border-top: 1px solid var(--border);
}

.stm-app .new-collection-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.stm-app .new-collection-row.hidden { display: none; }

.stm-app .new-collection-row input {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  outline: none;
}

.stm-app .collection-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px;
}

/* === Collections hidden input === */
.stm-app input.collection-file-input {
  display: none;
}

/* === Scrollbar === */
.stm-app ::-webkit-scrollbar { width: 6px; }
.stm-app ::-webkit-scrollbar-track { background: transparent; }
.stm-app ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
.stm-app ::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* === Responsive === */
@media (max-width: 500px) {
  #stmApp #appHeader {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  #stmApp .header-right {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #stmApp #listNameInput {
    width: 100%;
    text-align: left;
    font-size: 18px;
  }
  .stm-app .tier-label {
    width: 48px;
    min-width: 48px;
    font-size: 18px;
  }
  .stm-app .tier-col-header-spacer { width: 48px; min-width: 48px; }
}

/* === Custom site logo (single view) === */
.stm-app .custom-logo-link { display: inline-flex; align-items: center; }
.stm-app .custom-logo,
.stm-app .custom-logo-link img { max-width: 200px; height: auto; display: block; }

/* === Back-to-archive link === */
.stm-app .stm-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.stm-app .stm-back-link svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.15s ease;
}
.stm-app .stm-back-link:hover { color: var(--text); border-color: var(--accent); background: rgba(88,166,255,0.08); }
.stm-app .stm-back-link:hover svg { transform: translateX(-2px); }
@media (max-width: 720px) {
  .stm-app .stm-back-link .stm-back-label { display: none; }
  .stm-app .stm-back-link { padding: 5px 8px; }
}

/* === Chart tag control (title bar) === */
.stm-app .chart-tag-control { display: inline-flex; align-items: center; gap: 6px; }
.stm-app #chartTagInput {
  width: 150px;
  padding: 4px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  outline: none;
}
.stm-app #chartTagInput:focus { border-color: var(--accent); }
.stm-app .chart-tag-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); white-space: nowrap; cursor: pointer; }

/* === Chart tag badge (lower-right of chart) === */
.stm-app .chart-tag-badge {
  align-self: flex-end;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  pointer-events: none;
}

/* === Share modal === */
.stm-app .share-visibility { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.stm-app .modal-content label.share-opt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-transform: none;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.stm-app .modal-content label.share-opt:hover { border-color: var(--accent); }
.stm-app .modal-content label.share-opt.selected { border-color: var(--accent); background: rgba(88,166,255,0.08); }
.stm-app .share-opt input { margin-top: 2px; }
.stm-app .share-opt small { display: block; color: var(--text-muted); font-weight: 400; }

/* === Configurable header logo === */
.stm-app .stm-logo-custom { max-height: 40px; width: auto; border-radius: var(--radius-sm); }

/* === Voting / editing status (absolute inside unassigned, bottom-right) === */
.stm-app .stm-corner {
  position: absolute;
  right: 8px;
  bottom: 4px;
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.stm-app .stm-corner > * { pointer-events: auto; }
/* Voting filter toggles (shown when voting is active) */
.stm-app .voting-filters {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  font-size: 12px;
}
.stm-app .voting-filters.hidden { display: none !important; }

/* Clear votes — compact danger button in the corner for owner */
.stm-app .btn-clear-votes {
  background: rgba(220,53,69,0.15);
  color: #f85149;
  border: 1px solid rgba(248,81,73,0.35);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.stm-app .btn-clear-votes:hover { background: rgba(248,81,73,0.25); color: #ff7b72; }
.stm-app .btn-clear-votes.hidden { display: none !important; }
.stm-app .stm-fab { position: fixed; left: 20px; bottom: 20px; z-index: 55; box-shadow: var(--shadow); font-weight: 700; border-radius: 999px; padding: 9px 16px; }
.stm-app .stm-fab-2 { bottom: 64px; }
#stmApp .btn.hidden { display: none !important; }

/* === Admin lock switches === */
.stm-app .modal-content label.stm-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  cursor: pointer;
}
.stm-app .modal-content label.stm-switch.stm-sub { margin-left: 22px; color: var(--text-muted); }

/* Admin-settings switches use the SAME modern sliding toggle as "Hide my vote"
   (they were plain native checkboxes showing the browser's old default checkmark).
   id-specificity + !important so a theme's own checkbox styling can't drag them
   back to the stock look. ::after works because appearance:none makes the input a
   normal styleable box — the exact technique .stm-toggle uses. */
html body #stmApp label.stm-switch input[type="checkbox"] {
  appearance: none !important; -webkit-appearance: none !important;
  width: 36px !important; height: 20px !important; flex-shrink: 0;
  background: var(--border, #30363d) !important;
  border: none !important; border-radius: 10px !important;
  position: relative; cursor: pointer; margin: 0 !important;
  outline: none !important; box-shadow: none !important;
  transition: background 0.2s;
}
html body #stmApp label.stm-switch input[type="checkbox"]::after {
  content: '' !important; position: absolute; top: 2px; left: 2px;
  width: 16px !important; height: 16px !important;
  background: #fff !important; border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  transition: transform 0.2s; display: block !important; opacity: 1 !important;
}
html body #stmApp label.stm-switch input[type="checkbox"]:checked {
  background: var(--accent, #58a6ff) !important;
}
html body #stmApp label.stm-switch input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

/* === Voting status pill (replaces the Vote toggle) === */
#stmApp .voting-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
#stmApp .voting-status.green {
  background: rgba(63, 185, 80, 0.18);
  color: var(--green);
  border-color: var(--green);
}
#stmApp .voting-status.hidden { display: none !important; }
#stmApp .voting-status.active { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
#stmApp .voting-status.blue { background: rgba(88,166,255,0.15); color: var(--accent); border-color: var(--accent); }

/* === +Images button in the Unassigned row (right side) === */
.stm-app #unassignedSection .section-header { display: flex; align-items: center; gap: 6px; }
.stm-app .stm-unassigned-add { margin-left: auto; }

/* === Per-item tag badge (shown on cards when the leaderboard enables it) === */
/* Tag badge — upper-RIGHT corner so it never overlaps the name label along the
   bottom edge. Hidden on hover to make room for the edit / remove buttons. */
.stm-app .item-card .item-tag {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  pointer-events: none;
  max-width: calc(100% - 26px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stm-app .item-card:hover .item-tag { display: none; }

/* === Toggle switch (iOS-style slider) === */
.stm-app .stm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
  color: var(--text);
  font-size: 12px;
  user-select: none;
}
.stm-app .stm-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  margin: 0;
  border: none;
  outline: none;
}
.stm-app .stm-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.stm-app .stm-toggle input[type="checkbox"]:checked {
  background: var(--accent);
}
.stm-app .stm-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
.stm-app .stm-toggle .toggle-label {
  white-space: nowrap;
}

/* Unassigned item-grid fills remaining height */
.stm-app #unassignedSection .item-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* === Voting countdown timer (corner, next to voting status) === */
.stm-app .voting-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green, #3fb950);
  background: rgba(63,185,80,0.12);
  border: 1px solid rgba(63,185,80,0.35);
  border-radius: 999px;
  white-space: nowrap;
}
.stm-app .voting-countdown.urgent {
  color: #f85149;
  background: rgba(248,81,73,0.12);
  border-color: rgba(248,81,73,0.4);
  animation: stmPulse 1s ease-in-out infinite;
}
@keyframes stmPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.stm-app .voting-countdown.hidden { display: none !important; }

/* === Admin modal: field rows (timer select, guest item cap) === */
#stmApp .stm-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--text);
}
#stmApp .stm-field.stm-sub { margin-left: 24px; }
#stmApp .stm-field .stm-field-label { flex: none; }
#stmApp .stm-field select,
#stmApp .stm-field input[type="number"] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
}
#stmApp .stm-field select:focus,
#stmApp .stm-field input[type="number"]:focus { border-color: var(--accent); }
#stmApp .stm-field input[type="number"] { width: 70px; }
#stmApp .stm-field .stm-field-note { font-size: 11px; color: var(--text-muted); }

/* Admin modal can get tall — keep it scrollable on small screens */
#stmApp #adminModal .modal-content { max-height: 86vh; overflow-y: auto; }

/* === Admin modal: category picker === */
#stmApp .stm-cat-picker { display: flex; flex-direction: column; gap: 8px; }
#stmApp .admin-cat-list { display: flex; flex-wrap: wrap; gap: 6px; }
#stmApp .admin-cat-list .admin-cat-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
}
#stmApp .admin-cat-list .admin-cat-item:hover { border-color: var(--accent); color: var(--text); }
#stmApp .admin-cat-list .admin-cat-item input { accent-color: var(--accent); margin: 0; cursor: pointer; }
#stmApp .admin-cat-list .admin-cat-item:has(input:checked) {
  color: #fff;
  background: rgba(31,111,235,0.35);
  border-color: #1f6feb;
}
#stmApp .stm-cat-picker #newCatInput {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
#stmApp .stm-cat-picker #newCatInput:focus { border-color: var(--accent); }

/* === Admin voting insights panel === */
#stmApp .admin-vote-stats { margin: 0 0 12px; }
#stmApp .admin-vote-stats:empty { display: none; }
#stmApp .admin-vote-stats .stat-heading {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}
#stmApp .admin-vote-stats .stat-row {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
#stmApp .admin-vote-stats .stat-row.stat-editors { margin-top: 10px; }
#stmApp .admin-vote-stats .stat-num {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
}
#stmApp .admin-vote-stats .stat-num.green { color: var(--green, #3fb950); }
#stmApp .admin-vote-stats .stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 4px;
}
#stmApp .admin-vote-stats .stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  font-size: 11px;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
}
#stmApp .admin-vote-stats .stat-chip.voted {
  color: var(--green, #3fb950);
  background: rgba(63,185,80,0.1);
  border-color: rgba(63,185,80,0.35);
}
#stmApp .admin-vote-stats .stat-chip.voted b { font-weight: 700; }
#stmApp .admin-vote-stats .stat-chip.editor {
  color: var(--accent);
  background: rgba(88,166,255,0.08);
  border-color: rgba(88,166,255,0.3);
}
#stmApp .admin-vote-stats .stat-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* === Share modal social targets === */
#stmApp .share-targets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 6px;
  margin: 4px 0 16px;
}
#stmApp .share-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  color: var(--text-muted);
  font: inherit;
}
#stmApp .share-target .share-ic {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 17px; font-weight: 800; line-height: 1;
  letter-spacing: -0.5px;
  transition: transform 0.12s, box-shadow 0.12s;
}
#stmApp .share-target:hover .share-ic { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
#stmApp .share-target .share-lbl { font-size: 11px; color: var(--text-muted); }
@media (max-width: 420px) { #stmApp .share-targets { grid-template-columns: repeat(4, 1fr); } }

/* === First-time voter onboarding (spotlight) === */
/* Transparent full-screen catcher: click outside the card/highlight to close. */
#stmApp .stm-onboard-catch { position: fixed; inset: 0; z-index: 100055; background: transparent; }
/* The step's target element is lifted above the dim and ringed. The huge spread
   shadow dims everything else (spotlight) — no separate backdrop needed. */
html body #stmApp .stm-onboard-highlight {
  position: relative !important;
  z-index: 100060 !important;
  box-shadow: 0 0 0 4px var(--accent, #58a6ff), 0 0 0 100vmax rgba(0,0,0,0.62) !important;
  border-radius: 8px;
  transition: box-shadow 0.2s;
}
#stmApp .stm-onboard-card {
  /* Fixed dead-centre — the card NEVER moves between steps; only the dim ring
     glides to the section being described (no page scrolling, no jumping). */
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 100061;
  width: calc(100% - 32px); max-width: 360px;
  background: var(--bg-card, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 14px; padding: 20px 22px 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  text-align: center;
}
#stmApp .stm-onboard-icon {
  width: 52px; height: 52px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: rgba(88,166,255,0.15); color: var(--accent, #58a6ff);
  border-radius: 50%;
}
#stmApp .stm-onboard-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--text, #e6edf3); }
#stmApp .stm-onboard-body { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-muted, #8b949e); }
#stmApp .stm-onboard-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
#stmApp .stm-onboard-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border, #30363d); transition: background 0.2s; }
#stmApp .stm-onboard-dot.on { background: var(--accent, #58a6ff); }
#stmApp .stm-onboard-actions { display: flex; justify-content: space-between; gap: 10px; }
#stmApp .stm-onboard-actions .btn { flex: 1; justify-content: center; }

/* ============================================================
   THEME-PROOF BUTTON HOVER — final word on hover styling.
   Some themes paint a white background on button:hover with
   high-specificity !important rules. These selectors (html body
   + #stmApp id) outrank any class/element-based theme rule and
   re-assert every variant's intended hover state.
   ============================================================ */
/* Generic buttons (no variant). Kills background-IMAGE gradients and inset
   box-shadow fills — the properties a background-color override alone misses. */
html body #stmApp button:hover,
html body #stmApp button:focus,
html body #stmApp button:active,
html body .stm-app button:hover,
html body .stm-app button:focus,
html body .stm-app button:active {
  background: #30363d !important;
  background-color: #30363d !important;
  background-image: none !important;
  color: var(--text, #e6edf3) !important;
  -webkit-text-fill-color: var(--text, #e6edf3) !important;
  border-color: #6e7681 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}
/* Variant re-asserts (1 id + class → beat the generic 1-id rule above). */
html body #stmApp .btn-primary:hover, html body #stmApp .btn-primary:focus,
html body .stm-app .btn-primary:hover, html body .stm-app .btn-primary:focus {
  background: #2ea043 !important; background-color: #2ea043 !important; background-image: none !important;
  border-color: #2ea043 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none !important;
}
html body #stmApp .btn-accent:hover, html body #stmApp .btn-accent:focus,
html body .stm-app .btn-accent:hover, html body .stm-app .btn-accent:focus {
  background: #388bfd !important; background-color: #388bfd !important; background-image: none !important;
  border-color: #388bfd !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none !important;
}
html body #stmApp .btn-danger:hover, html body #stmApp .btn-danger:focus,
html body .stm-app .btn-danger:hover, html body .stm-app .btn-danger:focus {
  background: var(--red, #f85149) !important; background-color: var(--red, #f85149) !important; background-image: none !important;
  border-color: var(--red, #f85149) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none !important;
}
html body #stmApp .btn-export:hover, html body #stmApp .btn-export:focus {
  background: #b88ff5 !important; background-color: #b88ff5 !important; background-image: none !important;
  border-color: #b88ff5 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none !important;
}
html body #stmApp .btn-share:hover, html body #stmApp .btn-share:focus {
  background: #2dd4bf !important; background-color: #2dd4bf !important; background-image: none !important;
  border-color: #2dd4bf !important; color: #06281f !important; -webkit-text-fill-color: #06281f !important; box-shadow: none !important;
}
html body #stmApp .tab-btn:hover, html body #stmApp .tab-btn:focus {
  background-color: transparent !important; border-color: transparent !important; color: var(--text) !important;
}
html body #stmApp .tab-btn.active:hover {
  color: var(--accent) !important;
}
html body #stmApp .btn-clear-votes:hover, html body #stmApp .btn-clear-votes:focus {
  background-color: rgba(248,81,73,0.25) !important; color: #ff7b72 !important; border-color: transparent !important;
}
html body #stmApp .stm-toggle input[type="checkbox"]:hover,
html body #stmApp .stm-toggle input[type="checkbox"]:focus {
  background-color: var(--border) !important; border-color: transparent !important;
}
html body #stmApp .stm-toggle input[type="checkbox"]:checked:hover,
html body #stmApp .stm-toggle input[type="checkbox"]:checked:focus {
  background-color: var(--accent) !important;
}
/* Anchor-styled buttons (back link) get the same protection */
html body #stmApp a.stm-back-link:hover, html body .stm-app a.stm-back-link:hover {
  background-color: rgba(88,166,255,0.08) !important;
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

/* Kill theme pseudo-element hover fills on our buttons (white "rounded overlay"
   that a background override never reaches). Our buttons don't use ::before/::after. */
html body #stmApp button::before, html body #stmApp button::after,
html body #stmApp button:hover::before, html body #stmApp button:hover::after,
html body #stmApp .btn::before, html body #stmApp .btn::after,
html body #stmApp .btn:hover::before, html body #stmApp .btn:hover::after,
html body .stm-app button::before, html body .stm-app button::after,
html body .stm-app button:hover::before, html body .stm-app button:hover::after {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

/* === Live chat (ephemeral) — fixed lower-right, ABOVE the voting corner === */
.stm-app .stm-chat {
  position: fixed;
  right: 10px;
  bottom: 120px;                /* default: clears the voting corner + filters (draggable) */
  z-index: 60;
  width: 280px;
  max-width: calc(100vw - 20px);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  overflow: hidden;
  font-size: 13px;
}
.stm-app .stm-chat.hidden { display: none; }
.stm-app .stm-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; cursor: move; user-select: none;
  background: var(--bg-input); border-bottom: 1px solid var(--border);
}
.stm-app .stm-chat-title { font-weight: 700; color: var(--text); font-size: 12px; }
.stm-app .stm-chat.has-unread .stm-chat-title::after {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px;
  border-radius: 50%; background: var(--accent);
}
.stm-app .stm-chat-toggle {
  background: none; border: 0; color: var(--text-muted); font-size: 16px;
  line-height: 1; cursor: pointer; padding: 0 4px;
}
.stm-app .stm-chat-body { display: flex; flex-direction: column; max-height: min(46vh, 340px); }
.stm-app .stm-chat.collapsed .stm-chat-body { display: none; }
.stm-app .stm-chat-msgs {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 5px; min-height: 56px;
}
.stm-app .stm-chat-msg { color: var(--text); line-height: 1.35; word-break: break-word; }
.stm-app .stm-chat-name { font-weight: 700; color: var(--accent); margin-right: 4px; }
.stm-app .stm-chat-msg a { color: #58a6ff; text-decoration: underline; }
.stm-app .stm-chat-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
.stm-app .stm-chat-form input {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 13px;
}
.stm-app .stm-chat-send {
  flex-shrink: 0; padding: 6px 11px; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; cursor: pointer; font-size: 14px;
}
.stm-app .stm-placeholder-btn { width: 100%; margin-top: 8px; }
@media (max-width: 600px) { .stm-app .stm-chat { width: 210px; } }