/* ===================================================================
   Right-click context menu
=================================================================== */
#entry-ctx-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  background: var(--bg);   /* opaque menu (owner 2026-09-21: no transparent menus) */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  padding: 4px 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.22s ease;
  pointer-events: none;
  min-width: 140px;
}
#entry-ctx-menu.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ctx-item {
  padding: 8px 16px;
  font-size: 12px;
  color: var(--txt);
  cursor: pointer;
  white-space: nowrap;
}
.ctx-item:hover {
  background: rgba(255,255,255,0.55);
  color: var(--txt);
}


/* Composition banner halves  -  float left/right of the fixed center dot */
.comp-half-left {
  flex: 1;
  text-align: right;
  word-break: normal;
  overflow-wrap: break-word;
  min-width: 0;
  hyphens: none;
}
.comp-half-right {
  flex: 1;
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
  min-width: 0;
  hyphens: none;
}

#app-wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 300px 1fr 300px;
  gap: 0;
  overflow: hidden;
  height: 100vh;
  background: transparent; /* inherits from body */
}

/* Composition banner side colors */
/* comp-side-left: inline color from renderSide */
/* comp-side-right: inline color from renderSide */

/* Center dots: not selectable */
.comp-center,
.seg-preview-sep { user-select: none; -webkit-user-select: none; }

/* ── Community Modal ─────────────────────────────────────────────── */
/* ── Preferences modal ───────────────────────────────────────────── */
#prefs-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
}
#prefs-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,28,26,0.45);
  backdrop-filter: none;
}
#prefs-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 92vw);
  background: var(--bg);   /* owner 2026-09-20: opaque, was translucent */
  border: 1px solid rgba(180,175,168,0.6);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* "Dark / Rad" theme toggle (owner 2026-09-20): highlights the active half via body.dark-mode. */
/* Dark / Rad segmented control: two click targets, the active theme highlighted
   with a filled pill (owner 2026-09-21). */
.prefs-dark-toggle {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 16px;
  background: transparent; font-size: 12px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.prefs-dark-toggle .pd-dark, .prefs-dark-toggle .pd-rad {
  cursor: pointer; padding: 3px 14px; border-radius: 13px;
  color: var(--dim); opacity: 0.55; transition: background 0.15s, color 0.15s, opacity 0.15s;
  user-select: none;
}
.prefs-dark-toggle .pd-dark:hover, .prefs-dark-toggle .pd-rad:hover { opacity: 0.85; }
/* Active half: filled pill, full-strength text, bold. */
body.dark-mode .prefs-dark-toggle .pd-dark,
body:not(.dark-mode) .prefs-dark-toggle .pd-rad {
  opacity: 1; font-weight: 900; color: var(--txt);
  background: rgba(127,127,127,0.28);
}

/* "We | I | View" header control (owner 2026-09-22): same segmented look as Dark / Rad.
   "We" = feed, "I" = studio (the active one highlighted via body.feed-active); "View" is a
   static label that never gets selected. */
.feed-scope-toggle {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 16px;
  background: transparent; font-size: 12px; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
}
.feed-scope-toggle .fst-we, .feed-scope-toggle .fst-i {
  cursor: pointer; padding: 3px 12px; border-radius: 13px;
  color: var(--dim); opacity: 0.55; transition: background 0.15s, color 0.15s, opacity 0.15s;
  user-select: none;
}
.feed-scope-toggle .fst-view {
  padding: 3px 12px; color: var(--dim); opacity: 0.55; user-select: none; /* static, never selected */
}
.feed-scope-toggle .fst-we:hover, .feed-scope-toggle .fst-i:hover { opacity: 0.85; }
body.feed-active   .feed-scope-toggle .fst-we,
body:not(.feed-active) .feed-scope-toggle .fst-i {
  opacity: 1; font-weight: 900; color: var(--txt);
  background: rgba(127,127,127,0.28);
}
/* Hover preview (owner 2026-09-25): hovering anywhere on the toggle LIGHTLY highlights the currently
   INACTIVE half -- the one a click will open -- so it's clear which way the toggle goes. Studio active ->
   preview "We" (feed); feed active -> preview "I" (studio). Half the active background's strength. */
body:not(.feed-active) .feed-scope-toggle:hover .fst-we,
body.feed-active       .feed-scope-toggle:hover .fst-i {
  opacity: 0.9; color: var(--txt);
  background: rgba(127,127,127,0.14);
}

/* Segment-colour picker + preview styles live in css/20-theme.css (.hue-strip, .hue-mock). */

#prefs-header {
  display: flex;
  align-items: center;
  padding: 13px 18px 11px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
#prefs-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dim);
}
#prefs-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--faint);
  padding: 0 4px;
  line-height: 1;
}
#prefs-close:hover { color: var(--dim); }
#prefs-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.prefs-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prefs-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.prefs-desc {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.45;
}
.prefs-desc em { font-style: normal; font-weight: 600; }
.prefs-ize-group {
  display: flex;
  border: 1px solid rgba(180,175,168,0.7);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.prefs-ize-btn {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(180,175,168,0.7);
  padding: 5px 11px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--faint);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}
.prefs-ize-btn:last-child { border-right: none; }
.prefs-ize-btn:hover { background: rgba(0,0,0,0.04); color: var(--dim); }
.prefs-ize-btn.active {
  background: rgba(60,100,160,0.12);
  color: hsl(215,55%,38%);
  font-weight: 600;
}

/* (The two separate hue sliders' own track/thumb styles were removed 2026-10-05: they are now the two handles of the
    one colour strip, styled in css/20-theme.css .hue-strip; these id rules out-ranked and broke that styling.) */

/* community panel CSS removed  -  panel replaced by Feed */

/* ── Gamification panel ─────────────────────────────────────────── */
#gami-panel {
  position: fixed;
  bottom: 38px;
  right: 12px;
  width: 270px;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(160,155,148,0.5);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  z-index: 300;
  padding: 12px 14px 14px;
  font-size: 11px;
  color: var(--txt);
  display: none;
}
#gami-panel.open { display: block; }
.gami-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Tab strip */
.gami-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(180,175,168,0.3);
  padding-bottom: 0;
}
.gami-tab {
  flex: 1;
  text-align: center;
  padding: 3px 4px 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.gami-tab:hover { color: var(--dim); }
.gami-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
/* Stat rows */
.gami-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(180,175,168,0.18);
  line-height: 1.4;
}
.gami-stat:last-child { border-bottom: none; }
.gami-stat-val {
  font-weight: 700;
  font-size: 13px;
  color: var(--blue);
}
.gami-streak { color: hsl(28,80%,38%); }
/* Milestone grid */
.gami-milestone-next {
  margin-top: 4px;
  font-size: 10px;
  color: var(--faint);
  font-style: italic;
}
.gami-bar-wrap {
  height: 4px;
  background: rgba(180,175,168,0.3);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.gami-bar-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
  transition: width 0.4s;
}
.gami-milestone-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}
.gami-ms-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--dim);
  opacity: 0.45;
}
.gami-ms-item.unlocked { opacity: 1; color: var(--txt); }
.gami-ms-badge { font-size: 14px; line-height: 1; flex-shrink: 0; }
/* Vocab category list */
.gami-cat-scroll {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
  scrollbar-width: thin;
}
.gami-cat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px solid rgba(180,175,168,0.12);
  font-size: 10px;
  line-height: 1.5;
}
.gami-cat-row:last-child { border-bottom: none; }
.gami-cat-name { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.gami-cat-count { font-weight: 700; color: var(--blue); font-size: 11px; flex-shrink: 0; margin-left: 6px; }
.gami-cat-bar {
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  margin-top: 1px;
  opacity: 0.35;
  transition: width 0.3s;
}
.gami-longest {
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(53,116,196,0.06);
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.5;
}
.gami-longest-label { color: var(--faint); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; }
.gami-longest-text { color: var(--blue); font-weight: 600; }


/* ── Segment label sticker ─────────────────────────────────────────── */
.seg-label-sticker {
  position: absolute;
  top: 4px;
  left: 7px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--faint);
  background: rgba(245,242,237,0.82);
  border: 1px solid rgba(180,175,168,0.35);
  border-radius: 3px;
  padding: 1px 6px;
  cursor: text;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 3;
  transition: opacity 0.1s, border-color 0.1s;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1.5;
}
.seg-label-sticker-hidden {
  position: absolute;
  top: 4px;
  left: 7px;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--faint);
  background: rgba(245,242,237,0.82);
  border: 1px solid rgba(180,175,168,0.35);
  border-radius: 3px;
  padding: 1px 6px;
  cursor: text;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 3;
  transition: opacity 0.1s, border-color 0.1s;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1.5;
}
.seg-box.active .seg-label-sticker { color: var(--dim); border-color: rgba(180,175,168,0.55); }
.seg-label-sticker:hover { border-color: var(--blue); color: var(--blue); }

/* ── In Progress / Save-to-Wordbank ──────────────────────────────── */
.seg-save-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(180,175,168,0.45);
  border-radius: 4px;
  font-size: 9px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--faint);
  line-height: 1.4;
  transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
  z-index: 3;
  display: none;
}
.seg-box.active .seg-save-btn { display: block; }
.seg-save-btn:hover { background: rgba(255,255,255,0.9); color: var(--dim); border-color: var(--dim); }
.seg-save-btn.saved  { color: var(--green); border-color: rgba(46,122,80,0.5); }

.ip-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--amber);
  border: 1px solid rgba(154,110,24,0.45);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.5;
}

/* ── Suggest handles (search spots) ───────────────────────────────── */
/* Owner 2026-10-02: each spot is an empty letter slot (16px, nearly two letters wide, so it is easy to find with the
   cursor) sitting IN the text flow: right before the first letter or right after the last one, on whatever line
   that is, instead of at the cell's edge. The cell sides lay out inline for this (css/06, "search spots in the
   text flow"). Its highlight is the old blue fade, drawn from the slot inward over the text and rounded at the
   slot's far corners. Sizes are in px: font-size is 0 here (it hides the arrow glyph inside the span). */
.suggest-handle {
  /* Out of flow at its STATIC position (no top/left): the browser puts it exactly where it would sit in the text,
     right before the first letter / right after the last, but it takes no room and can never cause or move a line
     break. Tried first and dropped: an in-flow inline-block (Chromium may always start a new line before one, so the
     end spot fell onto its own line after an over-long last word or a trailing space, whatever white-space said),
     and a plain inline (its negative margins broke the side's intrinsic width: "step on" wrapped). */
  position: absolute;
  display: inline-block;
  width: 16px;
  height: 18px;
  box-sizing: border-box;
  border: 1.5px solid rgba(53,116,196,0.6);
  border-radius: 4px;
  background: none;
  padding: 0;
  opacity: 0;
  transition: opacity 0.4s ease-out, background 0.12s;
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-size: 0;
  color: transparent;
  overflow: visible;
  flex-shrink: 0;
}
/* Offsets from that static position: 2px off the letter, inside the side's 18px padding (css/06). 16 + 2 keeps the
   text width the old 14px edge strips left, so long text wraps where it used to. */
.sh-outer-left,  .sh-inner-right { margin-left: -18px; }   /* before the text */
.sh-inner-left,  .sh-outer-right { margin-left: 2px; }     /* after the text */
/* The static position is the TOP of the line: centre the 18px slot on it. Measured (_temp/k23/vcenter_probe.mjs):
   21px lines (Studio, feed composer) need 1.5px; a joined Studio segment's field sets 1.8 line-height (27px): 4.5px;
   the feed's joined field: 1.5px (measured in the Setup fields, _temp/k23/setup_probe.mjs). */
.suggest-handle { margin-top: 1.5px; }
.cell-sides.cell-connected > .suggest-handle { margin-top: 4.5px; }
.cell-sides.cell-connected.fc-connected > .suggest-handle { margin-top: 1.5px; }   /* feed joined field (all three classes): measured in Setup fields, 3px sat 1.5px low */
/* The fade: starts at the slot's outer edge and runs inward over the letters. */
.suggest-handle::before {
  content: '';
  position: absolute;
  top: -4px; bottom: -4px;
  width: 56px;
  pointer-events: none;
}
/* slot BEFORE the text (cell start): fade runs right, rounded on the left */
.sh-outer-left::before,
.sh-inner-right::before { left: -1.5px;  border-radius: 7px 0 0 7px; background: linear-gradient(to right, rgba(53,116,196,0.26) 0%, transparent 100%); }
/* slot AFTER the text (cell end): fade runs left, rounded on the right */
.sh-inner-left::before,
.sh-outer-right::before { right: -1.5px; border-radius: 0 7px 7px 0; background: linear-gradient(to left,  rgba(53,116,196,0.26) 0%, transparent 100%); }
.suggest-handle:hover,
.suggest-handle.sh-pair-hover,
.suggest-handle.sh-lit { background: rgba(53,116,196,0.1); }
/* Lit state (active suggest mode handle) */
.suggest-handle.sh-lit { opacity: 1 !important; }
/* Paired hover: highlights both handles in the suggest pair (inner↔inner, outer↔outer) */
.suggest-handle.sh-pair-hover {
  opacity: 0.85 !important;
  transition: opacity 0.02s !important;
}
/* Placeholder pair highlight (the active placeholder and its mirror): the placeholder's own hover highlight,
   css/06 .cell-placeholder. */
.cell-placeholder.ph-lit { color: var(--blue); }
/* Drag-drop: highlight handles as valid targets when dragging an entry */
.suggest-handle.sh-drop-target { opacity: 0.5 !important; animation: sh-pulse 1s infinite alternate; }
.suggest-handle.sh-drag-over { opacity: 1 !important; background: rgba(53,116,196,0.25) !important; border-radius: 3px; }
@keyframes sh-pulse { from { opacity: 0.35; } to { opacity: 0.7; } }
/* Faint reveal on cell-side hover so user can discover the handles exist.
   Specific pair highlight is handled by JS shHoverPair() / shUnhoverPair(). */
.cell-side.side-left:hover  .sh-outer-left,
.cell-side.side-left:hover  .sh-inner-left,
.cell-side.side-right:hover .sh-inner-right,
.cell-side.side-right:hover .sh-outer-right { opacity: 0.3; transition: opacity 0.02s; }

/* Wordbank: suggest mode */
#suggest-banner {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(53,116,196,0.12);
  border-bottom: 1px solid rgba(53,116,196,0.28);
  flex-shrink: 0;
}
#suggest-banner.visible { display: flex; }
#suggest-banner-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#suggest-banner-close {
  background: rgba(53,116,196,0.12);
  border: 1px solid rgba(53,116,196,0.28);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue);
  padding: 2px 8px;
  line-height: 1.4;
  flex-shrink: 0;
}
#suggest-banner-close:hover { background: rgba(53,116,196,0.22); }
/* The .search-row dimming rule was REMOVED 2026-07-30 by owner ruling: the "Get a categ." / L / R
   fields must be accessible at ALL times, suggest mode included - the categories chosen there
   govern which entries surface at the top of the Wordbank (02d reads the category filters on
   every search), so locking them during the one activity they steer was wrong by design. */
#vocab-panel.suggest-active .io-bar {
  opacity: 0.32;
  pointer-events: none;
}

/* ── Bottom toolbar ──────────────────────────────────────────────── */
#bottom-toolbar {
  /* z-index 160 (owner 2026-09-20): the account menu now lives in .tb-left and its dropdown opens
     upward, so the toolbar must sit above the feed sidebar (z 150). */
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 160;
  display: flex; align-items: stretch;
  height: 44px;
  background: transparent;
  pointer-events: none;
}
/* .tb-center hidden when feed active  -  Studio only */
.tb-center {
  pointer-events: auto;
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; height: 100%;
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-bottom: none; border-radius: 10px 10px 0 0;
  padding: 0 18px;
}
.tb-right  {
  pointer-events: auto;
  position: absolute; right: 0; bottom: 0; height: 100%;
  width: 294px; display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-bottom: none; border-right: none;
  border-radius: 12px 0 0 0;
  padding: 0 16px;
}
.tb-left   {
  pointer-events: auto;
  position: absolute; left: 0; bottom: 0; height: 100%;
  width: 294px; display: flex; align-items: center; gap: 8px;
  background: var(--glass-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-bottom: none; border-left: none;
  border-radius: 0 12px 0 0;
  padding: 0 16px;
}
.tb-btn {
  background: rgba(255,255,255,0.55); border: 1px solid rgba(180,175,168,0.45);
  border-radius: 7px; color: var(--dim); font-family: var(--mono); font-size: 12px;
  padding: 5px 14px; cursor: pointer; letter-spacing: 0.05em;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tb-btn:hover { background: rgba(255,255,255,0.82); border-color: rgba(140,155,180,0.6); color: var(--txt); }
.tb-btn:disabled { opacity: 0.32; cursor: default; }
.tb-btn-icon {
  background: rgba(255,255,255,0.45); border: 1px solid rgba(180,175,168,0.35);
  border-radius: 6px; color: var(--faint); font-size: 14px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s;
  user-select: none;
}
.tb-btn-icon:hover { background: rgba(255,255,255,0.80); color: var(--dim); border-color: rgba(140,155,180,0.55); }
.tb-btn-icon:disabled { opacity: 0.28; cursor: default; }
/* Nibs Bin (owner 2026-09-20): relocated into #segments-list-footer, justified right, SVG icon +
   label. #segments-list-footer is position:relative, so absolute-right keeps "+ Segment" centred. */
#tb-trash {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px;
  border: 1px solid rgba(180,175,168,0.35); background: rgba(255,255,255,0.45);
  color: var(--faint); font-size: 11px; font-weight: 600; white-space: nowrap;
  user-select: none; cursor: default;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
#tb-trash svg { width: 15px; height: 15px; }
#tb-trash.drag-over, #tb-trash.tb-trash-hover {
  color: var(--red); border-color: rgba(184,48,48,0.5); background: rgba(255,230,230,0.55);
  transform: translateY(-50%) scale(1.12);
}

/* ── Wordbank: always-open layout + footer ───────────────────────── */
#vocab-panel { display: flex; flex-direction: column; }
#vocab-panel-body { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
#vocab-panel #entry-list { flex: 1; min-height: 80px; overflow-y: auto; }
#vocab-panel #entry-list.form-open { flex: 0 1 160px; min-height: 60px; }
#vocab-panel #add-form.visible { display: block; flex-shrink: 0; overflow-y: auto; max-height: 300px; }
#wordbank-footer {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  padding: 8px 10px; border-top: 1px solid var(--line);
  background: rgba(240,237,233,0.35); gap: 6px; position: relative;
}
#btn-add-entry-open { /* inherits .hdr-pill-btn */ }
#btn-add-entry-open:hover { /* inherits .hdr-pill-btn:hover */ }
#btn-filter-reset {
  background: none; border: none; color: var(--faint); font-size: 13px;
  cursor: pointer; visibility: hidden; opacity: 0;
  padding: 3px 6px; border-radius: 4px; line-height: 1;
  transition: color 0.15s, opacity 0.15s;
  /* Owner 2026-09-20: floated to the right edge (absolute) so the three pills keep one centred line. */
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
}
#btn-filter-reset.has-filters { visibility: visible; opacity: 0.6; }
#btn-filter-reset:hover { color: var(--dim); opacity: 1; }

/* ── Hide io-bars, add-form, entry-btns, seg dot/controls ───────── */
.io-bar { display: none; }
#add-form { display: none; }
#add-form.visible { display: block; }
.entry-btns { display: none; }
.seg-box-dot-col { display: none; }
.seg-box-dot { display: none; }
.seg-box-controls { display: none; }
/* #segments-list-footer display managed by switchToFeed/switchToStudio */

/* ── Left column: empty shell ────────────────────────────────────── */
#left-col { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }

/* ── Drop line for segment reorder ──────────────────────────────── */
#seg-drop-line {
  position: absolute; pointer-events: none; z-index: 9998;
  left: 8px; right: 8px; height: 2px; border-radius: 2px;
  background: rgba(53,116,196,0.7);
  box-shadow: 0 0 6px rgba(53,116,196,0.5); display: none;
}

/* ── Add Entry modal ───────────────────────────── */
#add-form-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(30,28,26,0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  align-items: center;
  justify-content: center;
}
#add-form-modal.visible { display: flex; }
/* #add-form-modal-card original removed  -  see three-panel rule below */
#add-form-modal-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
#add-form-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: none; border: none;
  font-size: 17px; color: var(--faint);
  cursor: pointer; line-height: 1; padding: 4px;
}
#add-form-modal-close:hover { color: var(--txt); }


/* ── Wordbank entries: Studio-segment aesthetic ─── */
.entry-card .entry-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
}
.entry-card .entry-left {
  text-align: right;
  padding-right: 6px;
  color: hsl(215,55%,40%);
  white-space: nowrap;
  overflow: visible;
}
.entry-card .entry-right {
  text-align: left;
  padding-left: 6px;
  color: hsl(28,60%,38%);
  white-space: nowrap;
  overflow: visible;
}
.entry-card .entry-arrow {
  flex: 0 0 auto;
  color: rgba(120,114,108,0.5);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  user-select: none;
}
.entry-card {
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 3px;
}
/* Add-form segment input widget */
.add-form-cell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(180,175,168,0.5);
  border-radius: 7px;
  padding: 6px 10px;
  margin-bottom: 14px;
  min-height: 34px;
}
.add-form-cell-left {
  text-align: right;
  padding-right: 6px;
  color: hsl(215,55%,40%);
}
.add-form-cell-dot {
  color: rgba(120,114,108,0.5);
  font-size: 16px;
  user-select: none;
  padding: 0 2px;
}
.add-form-cell-right {
  text-align: left;
  padding-left: 6px;
  color: hsl(28,60%,38%);
}
.add-form-cell input {
  all: unset;
  display: block;
  width: 100%;
  cursor: text;
}
.add-form-cell-left input { text-align: right; }
.add-form-cell-right input { text-align: left; }


/* ── Add Entry mini-editor ──────────────────────────────── */
.add-form-cell { min-height: 36px; }
.add-cell-char {
  display: inline-block;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
}
.add-typing-cursor {
  display: inline-block;
  width: 0;
  height: 18px;
  border-left: 2px solid var(--blue);
  margin-right: -2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}
.add-typing-cursor-mirror {
  display: inline-block;
  width: 0;
  height: 15px;
  border-left: 2px solid rgba(100,100,200,0.4);
  margin-right: -2px;
  vertical-align: middle;
  animation: blink-mirror 2s step-end infinite;
}
#add-cell:focus .add-typing-cursor { border-left-color: var(--blue); }
#add-cell:not(:focus) .add-typing-cursor { opacity: 0.3; animation: none; }
.add-form-cell-left  .add-cell-char { color: hsl(215,55%,40%); }
.add-form-cell-right .add-cell-char { color: hsl(28,60%,38%); }
.add-form-cell-left  { padding-right: 4px; }
.add-form-cell-right { padding-left: 4px; }


/* ── Wordbank→Studio drag-to-merge ─────────────────────── */
.entry-card[draggable="true"] { cursor: grab; }
.entry-card[draggable="true"]:active { cursor: grabbing; }
.seg-box.drop-target {  border-color: rgba(80,160,80,0.7) !important;
  background: rgba(220,240,220,0.6) !important;
  box-shadow: 0 0 0 2px rgba(80,160,80,0.3) !important;
  transition: none;
}
/* Segment reorder drop target */
.seg-box.seg-drop-over {
  border-color: rgba(53,116,196,0.7) !important;
  background: rgba(210,225,250,0.5) !important;
  box-shadow: 0 0 0 2px rgba(53,116,196,0.3) !important;
  transition: none;
}

/* Overlap highlight: chars that will be shared with the dragged entry */
.cell-char.drag-overlap,
.cell-spacer.drag-overlap {
  background: rgba(80, 185, 110, 0.28);
  border-radius: 2px;
  outline: 1px solid rgba(60, 160, 90, 0.45);
  outline-offset: 0px;
}
/* Slightly dimmer for mirror side */
.cell-char.drag-overlap-mirror,
.cell-spacer.drag-overlap-mirror {
  background: rgba(80, 185, 110, 0.13);
  border-radius: 2px;
  outline: 1px dashed rgba(60, 160, 90, 0.3);
  outline-offset: 0px;
}
/* Drop-position indicator label inside seg-box */
.drag-drop-hint {
  position: absolute;
  bottom: 4px; right: 6px;
  font-size: 9px;
  color: rgba(50,140,70,0.85);
  pointer-events: none;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}


/* ── Add Entry modal: two-column layout ────────────────── */




#add-form-cat-col {
  display: flex; flex-direction: column; gap: 8px;
  border-left: 1px solid var(--line);
  padding-left: 18px;
}
/* #add-form-cat-col-title removed  -  replaced by .add-side-panel-title */

/* Tag chips */
#cat-chips-row {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 28px; align-items: center;
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: hsl(215,55%,92%); color: hsl(215,55%,30%);
  border-radius: 12px; padding: 2px 8px 2px 10px;
  font-size: 12px; font-weight: 600; cursor: default;
  border: 1px solid hsl(215,45%,80%);
}
/* User-added category chips (not from server's known list) */
.cat-chip.cat-chip-user {
  background: hsl(38,70%,90%);
  color: hsl(28,65%,28%);
  border-color: hsl(38,55%,75%);
}
.cat-chip-remove {
  background: none; border: none; color: hsl(215,40%,55%);
  cursor: pointer; padding: 0; font-size: 13px; line-height: 1;
}
.cat-chip-remove:hover { color: hsl(0,60%,45%); }

/* Typeahead input */
#cat-input-wrap {
  position: relative;
  border: 1px solid rgba(180,175,168,0.5);
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  padding: 4px 6px;
  display: flex; align-items: center; gap: 0;
  font-family: var(--mono); font-size: 13px;
}
#cat-input {
  all: unset; flex: 1; position: relative; z-index: 1;
  caret-color: var(--txt);
}
#cat-ghost {
  position: absolute; left: 6px; top: 4px; bottom: 4px;
  font-family: var(--mono); font-size: 13px;
  color: rgba(140,134,128,0.45);
  pointer-events: none; white-space: pre; z-index: 0;
  display: flex; align-items: center;
}
#cat-hint { font-size: 10px; color: var(--faint); }

/* Subcategory dropdown */
#cat-sublist {
  background: var(--bg2);   /* opaque dropdown (owner 2026-09-25: no transparent overlays) */
  border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden;
  display: none; flex-direction: column;
}
#cat-sublist.visible { display: flex; }
.cat-sub-item {
  padding: 5px 10px; font-size: 12px; cursor: pointer;
  color: var(--dim); transition: background 0.1s;
}
.cat-sub-item:hover, .cat-sub-item.focused { background: hsl(215,50%,93%); color: hsl(215,55%,30%); }

/* Full category browse list */
#cat-browse {
  flex: 1; overflow-y: auto; min-height: 0;
  max-height: 220px;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255,255,255,0.5);
}
.cat-browse-item {
  padding: 5px 10px; font-size: 12px; cursor: pointer;
  color: var(--dim); border-bottom: 1px solid rgba(200,196,190,0.25);
  display: flex; align-items: center; gap: 6px;
  transition: background 0.1s;
}
.cat-browse-item:last-child { border-bottom: none; }
.cat-browse-item:hover { background: hsl(215,50%,93%); color: hsl(215,55%,30%); }
.cat-browse-item.selected { background: hsl(215,50%,90%); color: hsl(215,55%,28%); font-weight: 600; }
.cat-browse-item.selected::after { content: '✓'; margin-left: auto; font-size: 11px; }
.cat-browse-user { color: hsl(28,60%,38%) !important; }
.cat-browse-user.selected { background: hsl(38,70%,90%) !important; }
.cat-browse-sub { padding-left: 22px; font-size: 11px; }


/* ── Add Entry modal card: transparent wrapper ─── */
#add-form-modal-card {
  width: 680px;
  max-width: 96vw;
  max-height: 92vh;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: relative;
}


/* ── Add Entry modal: three-panel layout ────────────────── */
.add-panel {
  background: var(--glass-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  padding: 16px 18px;
  position: relative;
}
#add-panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#add-panel-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.add-panel-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}


/* ── Empty segment placeholder ─────────────────────────── */
/* An empty Segment's dimmed "Palilap" | "palilap", the same on every surface (js/03g-seg-shell.js). It keeps its
   side's own ink (blue left, amber right), only dimmed. */
.seg-ph {
  opacity: 0.3;
  font-style: normal;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}
.cell-empty-placeholder .cell-sep {
  opacity: 0.18;
  font-weight: 400;
  font-size: 0.75em;
  position: relative;
  top: -1px;
}
.add-cell-dot-ph {
  opacity: 0.18 !important;
  font-weight: 400 !important;
  position: relative;
  top: -2px;
}


/* ── Per-side category panels ─────────────────────────── */
#add-panels-row {
  grid-template-columns: 1fr 1fr 1fr !important;
}
.add-side-panel-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.add-panel-side {
  transition: box-shadow 0.2s, border-color 0.2s;
  border-color: var(--glass-border);
}
.add-panel-side.side-active-left {
  box-shadow: var(--glass-shadow), 0 0 0 2px hsl(215,55%,60%,0.35);
  border-color: hsl(215,55%,65%,0.5);
}
.add-panel-side.side-active-right {
  box-shadow: var(--glass-shadow), 0 0 0 2px hsl(28,60%,55%,0.35);
  border-color: hsl(28,60%,60%,0.5);
}
/* Category picker elements (shared classes now) */
.cat-input-wrap {
  position: relative;
  border: 1px solid rgba(180,175,168,0.5);
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
  padding: 4px 6px;
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 13px;
  cursor: text;
}
.cat-input-el {
  all: unset; flex: 1; position: relative; z-index: 1;
  caret-color: var(--txt); font-size: 12px;
}
.cat-ghost {
  position: absolute; left: 6px; top: 4px; bottom: 4px;
  font-family: var(--mono); font-size: 12px;
  color: rgba(140,134,128,0.45);
  pointer-events: none; white-space: pre; z-index: 0;
  display: flex; align-items: center;
}
.cat-hint {
  font-size: 10px; color: var(--faint);
}
.cat-sublist {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden;
  display: none; flex-direction: column;
  z-index: 10010;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.cat-sublist.visible { display: flex; }
.cat-browse {
  flex: 1; overflow-y: auto; min-height: 0;
  max-height: 200px;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255,255,255,0.5);
  margin-top: 4px;
}
/* Side-prefixed tag chips in card */
.tag-side-left  { border-left: 2px solid hsl(215,55%,55%); }
.tag-side-right { border-left: 2px solid hsl(28,60%,50%); }

/* ══════════════════════════════════════════════════════════════════
   ACTIVE-EDGE GLOW
   The active side's writing edge pulses with a gradient toward the
   center dot, giving a clear directional cue while writing.
══════════════════════════════════════════════════════════════════ */
.cell-side.side-left.edge-active  { position: relative; }
.cell-side.side-right.edge-active { position: relative; }

/* ══════════════════════════════════════════════════════════════════
   WORD MANAGER PANEL
══════════════════════════════════════════════════════════════════ */
#word-manager-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
}
#wm-overlay {
  position: absolute; inset: 0;
  background: rgba(20,18,16,0.55);
  backdrop-filter: none;
}
#wm-panel {
  position: relative; z-index: 1;
  width: min(860px, 96vw); height: min(680px, 90vh);
  background: rgba(250,248,244,0.97);
  border-radius: 14px;
  border: 1px solid rgba(180,170,155,0.4);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#wm-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(180,170,155,0.25);
  flex-shrink: 0;
}
#wm-title { font-size: 15px; font-weight: 600; color: var(--dim); flex: 1; }
#wm-close { background: none; border: none; color: var(--faint); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
#wm-close:hover { color: var(--dim); background: rgba(0,0,0,0.06); }
#wm-body { display: flex; flex: 1; overflow: hidden; }
.wm-tab {
  padding: 2px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.wm-tab:hover { color: var(--dim); }
.wm-tab.active { background: rgba(255,255,255,0.85); color: var(--blue); border-color: rgba(53,116,196,0.3); }
.wm-word-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: rgba(240,237,232,0.7);
  border: 1px solid rgba(180,175,168,0.35);
  border-radius: 12px;
  font-size: 11px; color: var(--dim);
  white-space: nowrap;
}
.wm-word-remove {
  font-size: 9px; color: var(--faint); cursor: pointer; line-height: 1;
  padding: 0 1px; border-radius: 2px;
}
.wm-word-remove:hover { color: var(--red); background: rgba(180,48,48,0.08); }
#wm-sidebar {
  width: 200px; flex-shrink: 0;
  border-right: 1px solid rgba(180,170,155,0.2);
  overflow-y: auto;
  padding: 8px 0;
  background: rgba(240,237,232,0.5);
}
.wm-cat-group { padding: 2px 0; }
.wm-cat-parent {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: var(--dim); cursor: pointer; user-select: none;
  transition: background 0.1s;
}
.wm-cat-parent:hover { background: rgba(255,255,255,0.6); }
.wm-cat-parent.active { background: rgba(255,255,255,0.85); color: var(--ink); }
.wm-cat-count { font-size: 10px; color: var(--faint); margin-left: auto; }
.wm-cat-child {
  padding: 4px 12px 4px 24px; font-size: 11px; color: var(--dim);
  cursor: pointer; user-select: none; transition: background 0.1s;
}
.wm-cat-child:hover { background: rgba(255,255,255,0.5); }
.wm-cat-child.active { background: rgba(255,255,255,0.85); font-weight: 600; color: var(--ink); }
#wm-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#wm-search-row { padding: 10px 14px; flex-shrink: 0; border-bottom: 1px solid rgba(180,170,155,0.18); }
#wm-search { width: 100%; padding: 6px 10px; border-radius: 6px; font-size: 12px;
  border: 1px solid rgba(180,170,155,0.35); background: rgba(255,255,255,0.7);
  outline: none; }
#wm-search:focus { border-color: rgba(100,140,220,0.5); background: #fff; }
#wm-entry-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.wm-entry {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: 0 10px; align-items: center;
  padding: 6px 14px;
  font-size: 12px; border-bottom: 1px solid rgba(180,170,155,0.12);
  transition: background 0.1s;
}
.wm-entry:hover { background: rgba(255,255,255,0.6); }
.wm-entry-left  { color: var(--ink); font-weight: 500; }
.wm-entry-right { color: var(--dim); }
.wm-entry-cats  { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-entry-actions { display: none; gap: 4px; }
.wm-entry:hover .wm-entry-actions { display: flex; }
.wm-act-btn {
  font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(180,170,155,0.3);
  cursor: pointer; background: rgba(255,255,255,0.8); color: var(--dim);
}
.wm-act-btn:hover { background: rgba(240,236,230,1); }
.wm-act-btn.del { color: #c0392b; border-color: rgba(192,57,43,0.25); }
.wm-act-btn.del:hover { background: rgba(192,57,43,0.08); }
#wm-footer { flex-shrink: 0; padding: 8px 14px; border-top: 1px solid rgba(180,170,155,0.2);
  font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.wm-count { margin-right: auto; }
#wm-admin-btn { font-size: 10px; padding: 3px 8px; border-radius: 5px;
  border: 1px solid rgba(180,170,155,0.3); background: rgba(255,255,255,0.7);
  cursor: pointer; color: var(--dim); }
#wm-admin-btn.unlocked { color: #2a7d4f; border-color: rgba(42,125,79,0.3); }

/* ══════════════════════════════════════════════════════════════════
   GUEST SESSION TIMER
══════════════════════════════════════════════════════════════════ */
#guest-timer {
  position: fixed; bottom: 18px; right: 18px; z-index: 800;
  background: rgba(250,248,244,0.95);
  border: 1px solid rgba(180,170,155,0.35);
  border-radius: 10px;
  padding: 10px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  font-size: 12px; color: var(--dim);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 180px;
  transition: opacity 0.3s;
}
#guest-timer.hidden { opacity: 0; pointer-events: none; }
#guest-timer-label { font-weight: 600; font-size: 11px; color: var(--faint); letter-spacing: 0.04em; }
#guest-timer-clock { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#guest-timer-clock.urgent { color: #c0392b; }
#guest-timer-msg { font-size: 10px; color: var(--faint); line-height: 1.4; }
#guest-timer-cta {
  margin-top: 4px; padding: 5px 12px; border-radius: 6px; font-size: 11px;
  background: rgba(42,90,165,0.12); border: 1px solid rgba(42,90,165,0.2);
  color: #2a5aa5; cursor: pointer; text-align: center; font-weight: 600;
}
#guest-timer-cta:hover { background: rgba(42,90,165,0.2); }
/* ── Email gate overlay (shown before guest timer starts) ── */
#guest-email-gate {
  position: fixed; inset: 0; z-index: 810;
  background: rgba(240,237,232,0.88);
  display: flex; align-items: center; justify-content: center;
}
#guest-email-gate.hidden { display: none; }
#guest-email-gate-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 36px 44px; text-align: center; max-width: 360px; width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}
#guest-email-gate-panel h2 {
  font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 6px;
}
#guest-email-gate-panel p {
  font-size: 12px; color: var(--dim); line-height: 1.6; margin: 0 0 18px;
}
#guest-email-input {
  width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--line); font-size: 13px; font-family: var(--sans);
  outline: none; background: rgba(255,255,255,0.85); color: var(--ink);
}
#guest-email-input:focus { border-color: rgba(42,90,165,0.5); }
#guest-email-submit {
  margin-top: 12px; width: 100%; padding: 10px 0; border-radius: 8px;
  background: rgba(42,90,165,0.12); border: 1px solid rgba(42,90,165,0.3);
  cursor: pointer; font-size: 13px; font-weight: 700; color: #2a5aa5;
  transition: background 0.12s;
}
#guest-email-submit:hover { background: rgba(42,90,165,0.2); }
#guest-email-err { font-size: 10px; color: var(--red); margin-top: 6px; min-height: 14px; }
#guest-email-skip {
  margin-top: 10px; font-size: 10px; color: var(--faint); cursor: pointer;
  background: none; border: none; text-decoration: underline;
}
#guest-email-skip:hover { color: var(--dim); }
/* ── WB2 auto-edge indicator ── */
.wb2-auto-tag {
  font-size: 9px; font-weight: 700; color: var(--blue); background: rgba(53,116,196,0.1);
  border-radius: 3px; padding: 1px 5px; letter-spacing: 0.04em; margin-left: 4px;
}
/* ── Mirror looking-glass overlay ── */
#mirror-overlay {
  position: fixed; pointer-events: none; z-index: 9999;
  background: rgba(30,28,24,0.92); color: #f0ede8;
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
  padding: 6px 12px; font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; max-width: 360px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  display: none; transform: translate(-50%, -100%);
}
#mirror-overlay.visible { display: block; }
/* ── Relay palindrome post styles ── */
.fp-relay-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 10px;
  border: 1px solid; margin-left: 6px; cursor: default;
}
.fp-relay-open     { color: #2a8a2a; border-color: rgba(42,138,42,0.4); background: rgba(42,138,42,0.07); }
.fp-relay-sanc     { color: var(--blue); border-color: rgba(53,116,196,0.4); background: rgba(53,116,196,0.07); }
.fp-relay-tourn    { color: #8a4a2a; border-color: rgba(138,74,42,0.4); background: rgba(138,74,42,0.07); }
.fp-relay-done     { color: var(--faint); border-color: var(--line); }
.fp-relay-bar {
  margin: 6px 14px 2px; padding: 7px 10px;
  background: rgba(53,116,196,0.05); border: 1px solid rgba(53,116,196,0.15);
  border-radius: 7px; font-size: 11px; color: var(--dim);
}
.fp-relay-bar button {
  margin-left: 8px; padding: 3px 11px; font-size: 11px; font-weight: 600;
  border-radius: 12px; cursor: pointer; border: 1px solid rgba(53,116,196,0.4);
  background: rgba(53,116,196,0.1); color: var(--blue);
}
.fp-relay-bar button:hover { background: rgba(53,116,196,0.2); }
.fp-contrib-seg {
  position: relative; display: inline;
  transition: background 0.15s;
}
.fp-contrib-seg.hover-hi { background: rgba(53,116,196,0.13); border-radius: 3px; }
.fp-contrib-hover-label {
  position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%); white-space: nowrap;
  background: rgba(28,24,20,0.92); color: #f0ede8;
  font-size: 10px; font-weight: 600; padding: 3px 9px;
  border-radius: 6px; pointer-events: none; z-index: 9000;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; gap: 5px;
}
.fp-contrib-hover-label .fc-av {
  width: 16px; height: 16px; border-radius: 4px; font-size: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
}
.fp-contributors-btn {
  font-size: 10px; color: var(--faint); cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 9px;
  padding: 1px 8px; margin-left: 6px; transition: color 0.12s, border-color 0.12s;
}
.fp-contributors-btn:hover { color: var(--blue); border-color: rgba(53,116,196,0.4); }
/* Contributors modal */
#fp-contributors-modal {
  position: fixed; inset: 0; z-index: 3000; align-items: center; justify-content: center;
  background: rgba(28,24,20,0.5); backdrop-filter: none; display: none;
}
.contrib-entry {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid var(--line); cursor: default;
}
.contrib-entry:last-child { border-bottom: none; }
.contrib-av {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
}
.contrib-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contrib-handle {
  font-size: 12px; font-weight: 700; color: var(--blue); cursor: pointer;
}
.contrib-handle:hover { text-decoration: underline; }
.contrib-role { font-size: 10px; color: var(--faint); }
.contrib-meta { font-size: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-vote-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0; }
.fp-vote-item {
  flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 10px; background: var(--glass-bg);
  display: flex; align-items: center; justify-content: space-between;
}
.fp-vote-item.winning { border-color: rgba(42,138,42,0.5); background: rgba(42,138,42,0.06); }
.fp-vote-btn {
  font-size: 10px; padding: 2px 9px; border-radius: 9px; cursor: pointer;
  background: rgba(53,116,196,0.1); border: 1px solid rgba(53,116,196,0.3);
  color: var(--blue); font-weight: 600;
}
/* Relay compose panel */
.relay-compose-panel {
  margin: 6px 14px; padding: 8px 10px;
  border: 1px solid rgba(53,116,196,0.2); border-radius: 8px;
  background: rgba(53,116,196,0.04); font-size: 11px;
}
.relay-compose-panel label { color: var(--dim); display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.relay-compose-panel select, .relay-compose-panel input[type=number] {
  background: rgba(255,255,255,0.08); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 6px; font-size: 11px; color: var(--txt); min-width: 80px;
}
#fp-word-ctx-menu {
  position: fixed; z-index: 9998;
  background: var(--bg); backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22); padding: 4px 0;
  min-width: 160px; display: none;
}
#fp-word-ctx-menu.open { display: block; }
.fp-wctx-item {
  padding: 7px 14px; font-size: 12px; cursor: pointer;
  color: var(--txt); display: flex; align-items: center; gap: 7px;
  transition: background 0.1s; user-select: none; white-space: nowrap;
}
.fp-wctx-item:hover { background: rgba(53,116,196,0.09); }
.fp-wctx-item.danger { color: var(--red); }
.fp-wctx-sep { height: 1px; background: var(--line); margin: 3px 0; }
.fp-wctx-label {
  padding: 5px 14px 3px; font-size: 10px; color: var(--faint);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
/* ── Embedded URL word styling ── */
.fp-word-link {
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; transition: opacity 0.1s;
  color: var(--blue);
}
.fp-word-link:hover { opacity: 0.75; }
.fp-word-link.visited { color: #7b5ea7; }
body.dark-mode .fp-word-link { color: #6fa3e8; }
body.dark-mode .fp-word-link.visited { color: #b09ac8; }
/* ── URL preview popup ── */
#fp-url-preview {
  position: fixed; z-index: 10000; pointer-events: none;
  background: rgb(30,28,24); color: #f0ede8;   /* opaque popup (owner 2026-09-25: no transparent overlays) */
  border: 1px solid rgba(255,255,255,0.13); border-radius: 6px;
  padding: 5px 11px; font-size: 11px; font-family: var(--mono);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; box-shadow: 0 3px 14px rgba(0,0,0,0.3);
  display: none; transform: translate(-50%, calc(-100% - 8px));
}
#fp-url-preview.visible { display: block; }
.fp-mirror-btn {
  background: none; border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer; font-size: 10px; color: var(--faint); padding: 1px 5px;
  transition: color 0.12s, border-color 0.12s;
}
.fp-mirror-btn:hover { color: var(--blue); border-color: rgba(53,116,196,0.4); }
.fp-mirror-btn.active { color: var(--blue); border-color: var(--blue); background: rgba(53,116,196,0.08); }
/* ── Bookmarks panel ── */
#bookmarks-panel { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.bm-entry {
  padding: 6px 10px; font-size: 11px; font-family: var(--mono);
  cursor: pointer; border-radius: 4px; transition: background 0.1s;
  display: flex; align-items: baseline; gap: 6px;
}
.bm-entry:hover { background: rgba(255,255,255,0.5); }
.bm-entry .bm-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt); }
.bm-entry .bm-remove { font-size: 9px; color: var(--faint); cursor: pointer; opacity: 0; transition: opacity 0.12s; }
.bm-entry:hover .bm-remove { opacity: 1; }
.bm-entry .bm-remove:hover { color: var(--red); }
/* ── Admin notification dropdown ── */
#admin-notif-dropdown {
  position: fixed; top: 46px; right: 60px; z-index: 900;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18); width: 340px; max-height: 400px;
  overflow-y: auto; scrollbar-width: thin; display: none;
}
#admin-notif-dropdown.open { display: block; }
.admin-notif-header {
  padding: 10px 14px; font-size: 11px; font-weight: 700; color: var(--dim);
  letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.admin-notif-item {
  padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 11px; color: var(--dim); line-height: 1.5; cursor: pointer;
}
.admin-notif-item:hover { background: rgba(53,116,196,0.04); }
.admin-notif-item.unread { background: rgba(53,116,196,0.06); }
.admin-notif-type {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 3px; display: inline-block; margin-right: 4px;
}
.admin-notif-type.report { color: var(--red); background: rgba(184,48,48,0.1); }
.admin-notif-type.long_post { color: var(--amber); background: rgba(200,150,12,0.12); }
#admin-notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px;
  background: var(--red); color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 7px; display: none; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}
#admin-notif-badge.visible { display: flex; }

/* ── The Forge: admin-only bulk palindrome generator ───────────────── */
#forge-backdrop {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.45); display: none;
  align-items: center; justify-content: center;
  will-change: transform;
}
#forge-backdrop.open { display: flex; }

#forge-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.25); width: 480px; max-height: 85vh;
  overflow: hidden; padding: 0;
  contain: layout style paint;
  display: flex; flex-direction: column;
}
.forge-header {
  padding: 16px 20px 12px; display: flex; justify-content: space-between;
  align-items: center; border-bottom: 1px solid var(--line);
}
.forge-header h3 {
  margin: 0; font-size: 15px; font-weight: 800; color: var(--txt);
  letter-spacing: 0.02em;
}
.forge-close { background: none; border: none; cursor: pointer; font-size: 18px;
  color: var(--faint); padding: 4px 8px; border-radius: 6px; }
.forge-close:hover { color: var(--txt); background: rgba(0,0,0,0.05); }
.forge-body { padding: 16px 20px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.forge-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.forge-label {
  font-size: 11px; font-weight: 600; color: var(--dim); min-width: 110px;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.forge-select, .forge-input {
  flex: 1; padding: 5px 8px; font-size: 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--txt);
  font-family: var(--mono);
}
.forge-select:focus, .forge-input:focus { outline: none; border-color: var(--blue); }
.forge-cw-wrap { flex: 1; position: relative; }
.forge-cw-input {
  width: 100%; padding: 5px 8px; font-size: 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--txt);
  font-family: var(--mono); cursor: pointer; box-sizing: border-box;
}
.forge-cw-input:focus { outline: none; border-color: var(--blue); }
.forge-cw-badge {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 700; color: var(--accent); pointer-events: none;
}
.forge-cw-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  max-height: 200px; overflow-y: auto; z-index: 100;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  scrollbar-width: thin;
}
.forge-cw-dropdown.open { display: block; }
.forge-cw-item {
  padding: 4px 10px; font-size: 11px; cursor: pointer; display: flex;
  align-items: center; gap: 6px; color: var(--txt); user-select: none;
}
.forge-cw-item:hover { background: rgba(53,116,196,0.08); }
.forge-cw-item .cw-mark { width: 14px; text-align: center; font-weight: 700; font-size: 10px; }
.forge-cw-item.is-include { background: rgba(34,197,94,0.1); }
.forge-cw-item.is-include .cw-mark { color: #22c55e; }
.forge-cw-item.is-favor { background: rgba(53,116,196,0.1); }
.forge-cw-item.is-favor .cw-mark { color: var(--blue); }
.forge-cw-item.is-disfavor { background: rgba(200,120,40,0.1); }
.forge-cw-item.is-disfavor .cw-mark { color: #c87828; }
.forge-cw-item.is-exclude { background: rgba(200,60,50,0.1); }
.forge-cw-item.is-exclude .cw-mark { color: #c83c32; }
.forge-check-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.forge-check-row label { font-size: 11px; color: var(--dim); cursor: pointer; }
.forge-actions {
  padding: 12px 20px 16px; border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center;
}
#forge-start-btn {
  padding: 7px 18px; font-size: 12px; font-weight: 700; border: none;
  border-radius: 7px; cursor: pointer; background: var(--blue); color: #fff;
  letter-spacing: 0.03em;
}
#forge-start-btn:hover { filter: brightness(1.1); }
#forge-start-btn:disabled { opacity: 0.5; cursor: default; filter: none; }
#forge-cancel-btn {
  padding: 7px 14px; font-size: 11px; border: 1px solid var(--line);
  border-radius: 7px; cursor: pointer; background: transparent; color: var(--dim);
  display: none;
}
#forge-cancel-btn:hover { border-color: var(--red); color: var(--red); }
.forge-progress { padding: 0 20px 14px; display: none; }
.forge-progress.visible { display: block; }
.forge-pbar-wrap {
  height: 8px; background: rgba(0,0,0,0.06); border-radius: 4px;
  overflow: hidden; margin-bottom: 6px;
}
.forge-pbar {
  height: 100%; background: linear-gradient(to right, var(--blue), #2a7d4f);
  border-radius: 4px; transition: width 0.3s ease; width: 0%;
}
.forge-pstats {
  font-size: 10px; color: var(--dim); font-family: var(--mono);
  display: flex; gap: 12px;
}
.forge-download { padding: 0 20px 16px; display: none; }
.forge-download.visible { display: flex; gap: 8px; }
.forge-dl-btn {
  padding: 6px 14px; font-size: 11px; font-weight: 600; border: 1px solid var(--line);
  border-radius: 7px; cursor: pointer; background: transparent; color: var(--blue);
}
.forge-dl-btn:hover { background: rgba(53,116,196,0.06); border-color: var(--blue); }
#guest-timer-progress {
  height: 3px; border-radius: 2px;
  background: rgba(180,170,155,0.25);
  overflow: hidden; margin-top: 2px;
}
#guest-timer-bar {
  height: 100%; border-radius: 2px;
  background: linear-gradient(to right, #2a7d4f, #2a5aa5);
  transition: width 1s linear;
}

/* ══════════════════════════════════════════════════════════════════
   REDDIT IMPORT MODAL
══════════════════════════════════════════════════════════════════ */
#reddit-import-modal {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
}
#reddit-overlay { position: absolute; inset: 0; background: rgba(20,18,16,0.55); backdrop-filter: none; }
#reddit-panel {
  position: relative; z-index: 1;
  width: min(480px, 94vw);
  background: rgba(250,248,244,0.98);
  border-radius: 14px; padding: 24px 28px;
  border: 1px solid rgba(180,170,155,0.4);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; gap: 14px;
}
#reddit-panel h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
#reddit-panel p  { font-size: 12px; color: var(--dim); margin: 0; line-height: 1.6; }
.reddit-input-row { display: flex; gap: 8px; align-items: center; }
.reddit-input-row input {
  flex: 1; padding: 8px 12px; border-radius: 7px; font-size: 13px;
  border: 1px solid rgba(180,170,155,0.4); background: rgba(255,255,255,0.8);
  outline: none;
}
.reddit-input-row input:focus { border-color: rgba(100,140,220,0.5); background: #fff; }
#reddit-import-status { font-size: 11px; color: var(--faint); min-height: 16px; }
#reddit-import-status.ok { color: #2a7d4f; }
#reddit-import-status.err { color: #c0392b; }
.reddit-posts-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.reddit-post-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; font-size: 11px;
  border: 1px solid rgba(180,170,155,0.2); cursor: pointer;
  background: rgba(255,255,255,0.6);
  transition: background 0.1s;
}
.reddit-post-item:hover { background: rgba(255,255,255,0.9); }
.reddit-post-item input[type=checkbox] { flex-shrink: 0; }
.reddit-post-text { flex: 1; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reddit-post-score { font-size: 10px; color: var(--faint); }
#reddit-import-footer { display: flex; gap: 8px; justify-content: flex-end; }


/* ── Corner avatar menu (Phase 2) ──────────────────────────────────── */
.corner-menu-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.corner-menu-item:hover {
  background: rgba(53,116,196,0.12);
  color: var(--blue);
}
.corner-menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
/* Admin "view as" perspective simulator (owner 2026-09-22): highlight the active perspective,
   and hard-hide the admin-only deep-search bar while previewing a lesser view. Body classes
   body.sim-guest / body.sim-subscriber are set by setSimPerspective for further gating. */
.admin-persp-item.active { background: rgba(53,116,196,0.14); color: var(--blue); font-weight: 800; }
body.sim-guest #wb-depth-bar,
body.sim-subscriber #wb-depth-bar { display: none !important; }
/* Class convention (owner 2026-09-22): tag admin affordances .admin-only and paid features
   .paid-only. Previewing a lesser perspective hides them. The sim banner is NOT .admin-only,
   so an admin can always Exit. Guest additionally loses paid-only features (and the wordbank
   suggest shows its real locked upsell -- see 02d). */
body.sim-guest .admin-only,
body.sim-subscriber .admin-only { display: none !important; }
body.sim-guest .paid-only { display: none !important; }

/* Drag-a-Studio-segment-into-a-box import (owner 2026-09-22): a box being hovered with a held
   segment, and the global "holding" state that hints every box is a drop/click target. */
.pal-seg-droptarget { outline: 2px dashed var(--blue); outline-offset: 2px; }
body.pal-seg-holding #btn-feed-header { box-shadow: 0 0 0 2px var(--blue); border-radius: 16px; }
body.pal-seg-holding .pal-seg { outline: 1px dashed rgba(53,116,196,0.55); cursor: copy; }

/* ── Profile dots menu items (Phase 3) ─────────────────────────────── */
.pp-dots-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.pp-dots-item:hover { background: rgba(255,255,255,0.22); }
.pp-endorse-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  transition: opacity 0.12s, transform 0.1s;
  user-select: none;
}
.pp-endorse-chip:hover { opacity: 1 !important; transform: scale(1.04); }
.pp-endorse-chip b { margin-left: 2px; }

/* ── Modsdom page (Phase 5e) ────────────────────────────────────────── */
.modsdom-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  transition: background 0.1s;
}
.modsdom-row:hover { background: rgba(255,255,255,0.1); }
.modsdom-avatar {
  width: 32px; height: 32px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.modsdom-handle {
  font-size: 12px; font-weight: 700; color: var(--txt);
  font-family: var(--mono); flex: 1;
}
.modsdom-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  letter-spacing: 0.04em; white-space: nowrap;
}

/* ── Phase 7d: Setup modal ──────────────────────────────────────────── */
.skiniks-btn {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  transition: background 0.1s, border-color 0.12s, color 0.1s;
  white-space: nowrap;
}
.skiniks-btn:hover { background: rgba(255,255,255,0.15); }
.skiniks-btn.active {
  background: rgba(53,116,196,0.12);
  border-color: rgba(53,116,196,0.5);
  color: var(--blue);
}
.setup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--txt);
  cursor: pointer;
}
.setup-toggle input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Phase 11b: Llama Mall billing page ─────────────────────────────── */
.llama-section {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 18px;
}
.llama-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.llama-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
}

/* Phase 10d: Spectator floating emoji animation */
@keyframes float-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(1.3); }
}
@keyframes fpDblTapPop {
  0% { opacity: 1; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.5) translateY(-20px); }
}
@keyframes fpHotPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes fpRxFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.4); }
}
@keyframes fpPostIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.feed-post { animation: none; }

/* Right-click menus must be OPAQUE (owner 2026-07-28: "The popup menu upon clicking the right mouse button
   should not have transparency on it.").
   They were painted with var(--glass-bg), which is translucent by design in every theme (0.62 alpha in light,
   0.75 in dark, 0.80-0.85 in the coloured themes), so page content read through the menu.
   Forcing a flat colour here would break the themes, which each retint --glass-bg. Instead the translucent
   glass colour is composited OVER the opaque --bg: the gradient is a solid fill of --glass-bg, and
   background-color underneath it is opaque, so the result keeps each theme's tint and passes no light.
   Covers all three menus: entry (Wordbank), segment, and forum word. */
#entry-ctx-menu,
#seg-ctx-menu,
#fp-word-ctx-menu {
  background-color: var(--bg);
  background-image: linear-gradient(var(--glass-bg), var(--glass-bg));
}

/* "We / I - View" (owner 2026-09-29): each half carries an icon inside its highlight, social spaces (people)
   for "We" and the personal studio (person with a pen) for "I"; the icon is currentColor, so it takes exactly
   the half's colour and opacity. The "/" and "- View" are static text, never highlighted. */
.feed-scope-toggle .fst-we, .feed-scope-toggle .fst-i { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; }
.feed-scope-toggle .fst-ico { width: 14px; height: 14px; stroke-width: 2.2; vertical-align: 0; }
.feed-scope-toggle .fst-sep { align-self: center; padding: 0 1px; color: var(--dim); opacity: 0.55; user-select: none; }
.feed-scope-toggle .fst-view { padding: 3px 10px 3px 4px; align-self: center; }
/* Full width of the top-left corner box (owner 2026-10-02): the box keeps the toggle 9px from its top and bottom,
   so its side padding is 9px too and the toggle fills the rest. "We" and "I" share the extra width; "-" and
   "View" get a wider gap so the static label balances the two halves. */
#header-left { padding: 0 9px; }
#header-left > #btn-feed-header.feed-scope-toggle { flex: 1 1 auto; min-width: 0; }
.feed-scope-toggle .fst-we, .feed-scope-toggle .fst-i { flex: 1 1 0; justify-content: center; }
.feed-scope-toggle .fst-view { display: inline-flex; align-items: center; gap: 9px; padding: 3px 12px 3px 8px; }
.feed-scope-toggle .fst-dash { opacity: 0.8; }

/* Wordbank row menu (owner 2026-09-30: "not coloristically consistent with the light/dark mode"). Same opaque
   theme surface as the other right-click menus above; hover and text from the theme tokens. */
#sug-item-ctx {
  display: none; position: fixed; z-index: 9100; min-width: 160px; padding: 4px 0;
  background-color: var(--bg);
  background-image: linear-gradient(var(--glass-bg), var(--glass-bg));
  border: 1px solid var(--glass-border); border-radius: 8px; box-shadow: var(--glass-shadow);
  font-family: var(--sans, sans-serif); font-size: 13px; color: var(--txt);
}
#sug-item-ctx .sug-ctx-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 16px; margin: 2px 4px; border-radius: 4px;
  cursor: pointer; color: var(--txt); transition: background 0.1s;
}
#sug-item-ctx .sug-ctx-item:hover { background: color-mix(in srgb, var(--theme) 12%, transparent); }
#sug-item-ctx .sug-ctx-danger { color: var(--red); }
#sug-item-ctx .sug-ctx-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
#sug-item-ctx .sug-ctx-hint { margin-left: auto; font-size: 10px; color: var(--faint); font-family: var(--mono); }
#sug-item-ctx .ico { width: 14px; height: 14px; flex-shrink: 0; }