/* ═══════════════════════════════════════════
   EDITOR.CSS — editor module styles
   Depends on: base.css (tokens + reset)
═══════════════════════════════════════════ */


/* ── 1. LOCAL TOKENS ── */

:root {
  /* Note: --purple, --purple-light, --blue are defined in base.css */
  --orange: #f97316;
  --pink:   #f472b6;
}

/* peel.css overrides body font — restore editor's monospace */
body { font-family: var(--font-mono); }


/* ── 2. LAYOUT ── */

/* ─── Header ─── */
.editor-header-nav {
  display:     flex;
  gap:         8px;
  align-items: center;
  flex-shrink: 0;
}

.editor-nav-link {
  display:         inline-flex;
  align-items:     center;
  padding:         5px 12px;
  border-radius:   6px;
  font-size:       12px;
  font-weight:     600;
  text-decoration: none;
  border:          1px solid var(--border);
  color:           var(--muted);
  transition:      border-color .2s, color .2s, background .2s;
  white-space:     nowrap;
}

.editor-nav-link:hover {
  border-color: var(--accent);
  color:        var(--accent);
  background:   var(--surface);
}

.editor-nav-link--game {
  border-color: rgba(201, 168, 76, 0.3);
  color:        rgba(201, 168, 76, 0.6);
}

.editor-nav-link--game:hover {
  border-color: var(--accent);
  color:        var(--accent);
  background:   var(--surface);
}

.editor-header {
  border-bottom:   1px solid var(--border);
  padding:         16px 24px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  flex-wrap:       wrap;
  position:        sticky;
  top:             0;
  background:      var(--bg);
  z-index:         100;
}
.editor-header-title h1 {
  font-family: var(--font-serif);
  font-size:   20px;
  font-weight: 700;
  color:       var(--accent);
}
.editor-header-title p {
  color:     var(--muted);
  font-size: 10px;
}

/* ─── Stats bar ─── */
.header-stats {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
  align-items: center;
}
.stat {
  text-align:  center;
  min-width:   52px;
  cursor:      pointer;
  padding:     4px 6px;
  border-radius: 6px;
  border:      1px solid transparent;
  transition:  border-color .15s, background .15s;
}
.stat:hover      { border-color: var(--accent); background: var(--accent-dim); }
.stat.stat-active{ border-color: var(--accent); background: var(--accent-mid); }
.stat-num {
  font-size:   18px;
  color:       var(--accent);
  font-family: var(--font-serif);
}
.stat-num--purple { color: var(--purple-light); }
.stat-num--gold   { color: var(--accent); }
.stat-num--blue   { color: var(--blue); }
.stat-num--green  { color: var(--green); }
.stat-label {
  font-size:      9px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.stat-sep {
  width:       1px;
  background:  var(--border);
  margin:      4px 2px;
  align-self:  stretch;
}

/* ─── Data Bar (stats / file-actions swap) ─── */
.data-bar {
  border:        1px solid var(--border);
  border-radius: 12px;
  background:    var(--surface);
  overflow:      hidden;
  position:      relative;
  height:        76px;
  margin-bottom: 14px;
}

.data-bar-menu {
  position:       absolute;
  left:           12px;
  top:            50%;
  transform:      translateY(-50%);
  display:        flex;
  align-items:    center;
  justify-content:center;
  width:          42px;
  height:         42px;
  border:         1px solid var(--border);
  border-radius:  10px;
  background:     none;
  color:          var(--muted);
  font-size:      20px;
  cursor:         pointer;
  z-index:        2;
  transition:     color .2s, background .2s, border-color .2s;
}
.data-bar-menu:hover {
  color:        var(--accent);
  background:   var(--accent-dim);
  border-color: var(--accent);
}
.data-bar.open .data-bar-menu {
  color:        var(--accent);
  background:   var(--accent-dim);
  border-color: var(--accent);
}
.data-bar-menu.is-dirty {
  color:        var(--red, #e05252);
  border-color: var(--red, #e05252);
  animation:    data-bar-pulse 1.5s ease infinite;
}
.data-bar-menu.is-dirty:hover,
.data-bar.open .data-bar-menu.is-dirty {
  color:        var(--accent);
  background:   var(--accent-dim);
  border-color: var(--accent);
  animation:    none;
}

/* Stats layer */
.data-bar-stats {
  position:        absolute;
  top:             0;
  left:            66px;
  right:           12px;
  height:          76px;
  display:         flex;
  align-items:     center;
  gap:             0;
  padding:         0 4px;
  transition:      transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
}
.data-bar.open .data-bar-stats {
  transform:      translateY(-100%);
  opacity:        0;
  pointer-events: none;
}

.mini-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex:           1 1 0;
  min-width:      0;
  cursor:         pointer;
  padding:        6px 4px;
  border-radius:  8px;
  border:         1px solid transparent;
  transition:     background .15s, border-color .15s;
}
.mini-stat:hover        { background: var(--surface3); border-color: var(--accent); }
.mini-stat.stat-active  { background: var(--accent-mid); border-color: var(--accent); }
.mini-stat-num {
  font-size:   18px;
  font-weight: 300;
  line-height: 1.3;
}
.mini-stat-label {
  font-size:      10px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top:     1px;
}
.mini-stat-num--gold   { color: var(--accent); }
.mini-stat-num--purple { color: var(--purple-light); }
.mini-stat-num--blue   { color: var(--blue); }
.mini-stat-num--green  { color: var(--green); }
.mini-stat-num--red    { color: var(--danger); }
.mini-sep {
  width:       1px;
  height:      32px;
  background:  var(--border);
  flex-shrink: 0;
}
@keyframes data-bar-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Info button with dirty-state badge */
.tray-btn--info {
  position: relative;
}
.info-badge {
  position:       absolute;
  top:            6px;
  right:          6px;
  width:          7px;
  height:         7px;
  border-radius:  50%;
  background:     var(--orange);
  opacity:        0;
  transition:     opacity .2s;
  pointer-events: none;
}
.tray-btn--info.has-badge .info-badge {
  opacity:   1;
  animation: data-bar-pulse 1.5s ease infinite;
}

/* Danger tray button (Start from scratch) — always far-right, always red-outlined */
.tray-btn--danger {
  margin-left:  auto;
  color:        var(--red, #e05252);
  border-color: var(--red, #e05252);
}
.tray-btn--danger:hover {
  color:        var(--red, #e05252);
  border-color: var(--red, #e05252);
  background:   rgba(224, 82, 82, 0.12);
}

/* Publish tray button — gold-outlined, sits after the separator */
.tray-btn--publish {
  color:        var(--accent, #e2c96b);
  border-color: var(--accent, #e2c96b);
}
.tray-btn--publish:hover {
  color:        var(--accent, #e2c96b);
  border-color: var(--accent, #e2c96b);
  background:   rgba(226, 201, 107, 0.12);
}

/* Publishing in-progress state (both publish buttons) */
@keyframes publish-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.btn--publishing {
  animation:  publish-pulse .9s ease infinite;
  cursor:     not-allowed;
  font-size:  .75rem;
  min-width:  7ch;
}

/* Big publish button at bottom of Peel settings panel */
.btn-publish-peel {
  display:       block;
  width:         100%;
  padding:       .75rem 1rem;
  background:    transparent;
  border:        1.5px solid var(--accent, #e2c96b);
  border-radius: var(--radius, 8px);
  color:         var(--accent, #e2c96b);
  font-size:     .95rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background .15s;
}
.btn-publish-peel:hover {
  background: rgba(226, 201, 107, 0.12);
}

/* Tray layer */
.data-bar-tray {
  position:       absolute;
  top:            0;
  left:           66px;
  right:          12px;
  height:         76px;
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        0 8px;
  transform:      translateY(100%);
  opacity:        0;
  pointer-events: none;
  transition:     transform .35s cubic-bezier(.4,0,.2,1), opacity .25s .05s;
}
.data-bar.open .data-bar-tray {
  transform:      translateY(0);
  opacity:        1;
  pointer-events: auto;
}

.tray-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border:          1px solid transparent;
  border-radius:   10px;
  background:      none;
  color:           var(--muted);
  font-size:       18px;
  cursor:          pointer;
  flex-shrink:     0;
  transition:      color .15s, border-color .15s, background .15s, transform .1s;
}
.tray-btn:hover {
  color:        var(--accent);
  border-color: var(--border);
  background:   var(--surface2);
}
.tray-btn:active { transform: scale(0.92); }
.tray-btn svg { display: block; }

.tray-sep {
  width:       1px;
  height:      28px;
  background:  var(--border);
  flex-shrink: 0;
  margin:      0 4px;
}

.tray-filename {
  font-size:      11px;
  color:          var(--muted);
  margin-left:    auto;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  max-width:      220px;
}

/* Responsive: smaller data bar on mobile */
@media (max-width: 600px) {
  .data-bar { height: 64px; }
  .data-bar-stats { left: 54px; padding: 0 4px; }
  .data-bar-tray  { left: 54px; }
  .data-bar-menu  { width: 36px; height: 36px; font-size: 17px; left: 8px; }
  .mini-stat       { padding: 4px 2px; }
  .mini-stat-num   { font-size: 15px; }
  .mini-stat-label { font-size: 9px; }
  .tray-btn        { width: 38px; height: 38px; }
  .tray-btn svg    { width: 18px; height: 18px; }
  .data-bar-stats, .data-bar-tray { height: 64px; }
}

/* Analysis status pill */
.analysis-status-pill {
  font-size:    10px;
  padding:      2px 8px;
  border:       1px solid var(--border);
  border-radius:4px;
  white-space:  nowrap;
  cursor:       pointer;
  color:        var(--muted);
}
.analysis-status-pill.unanalysed {
  border-color: var(--warning-border);
  color:        var(--orange);
  background:   rgba(249,115,22,.07);
}
.analysis-status-pill.analysed {
  border-color: var(--green-dark);
  color:        var(--green);
  background:   rgba(82,199,122,.07);
}
.analysis-status-pill.partial {
  border-color: #3a3a1a;
  color:        #e0c050;
  background:   rgba(224,192,80,.07);
}

/* ─── Analysis Info Popup ─── */
.analysis-info-popup {
  position:      absolute;
  top:           calc(100% + 8px);
  right:         0;
  z-index:       150;
  min-width:     280px;
  max-width:     340px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 6px;
  box-shadow:    0 4px 20px rgba(0,0,0,.4);
}
.analysis-info-popup__content {
  padding: 12px 14px;
}
.analysis-info-popup__title {
  font-family:    'Playfair Display', serif;
  font-size:      13px;
  font-weight:    700;
  color:          var(--accent);
  margin:         0 0 10px 0;
}
.analysis-info-popup__table {
  width:          100%;
  border-collapse:collapse;
  margin-bottom:  10px;
}
.analysis-info-popup__table th {
  font-size:      9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--muted);
  text-align:     left;
  padding:        0 4px 4px 0;
  border-bottom:  1px solid var(--border);
}
.analysis-info-popup__table th:not(:first-child) {
  text-align: right;
}
.analysis-info-popup__table td {
  font-size:    11px;
  padding:      3px 4px 3px 0;
  color:        var(--text);
}
.analysis-info-popup__table td:not(:first-child) {
  text-align:   right;
  font-family:  'DM Mono', monospace;
  font-size:    11px;
}
.analysis-info-popup__table td.done-col {
  color: var(--green);
}
.analysis-info-popup__table td.left-col {
  color: var(--orange);
}
.analysis-info-popup__summary {
  font-size:      10px;
  color:          var(--muted);
  margin-bottom:  10px;
  line-height:    1.5;
}
.analysis-info-popup__summary strong {
  color: var(--text);
}
.analysis-info-popup__btn {
  width:   100%;
  padding: 6px 0;
  font-size: 11px;
}
.analysis-info-popup__btn:disabled {
  opacity: 0.35;
  cursor:  not-allowed;
}

/* ─── Toolbar ─── */
.toolbar {
  display:     flex;
  gap:         6px;
  flex-wrap:   wrap;
  padding:     10px 24px;
  border-bottom: 1px solid var(--border);
  background:  var(--surface);
  align-items: center;
}
.tsep {
  width:      1px;
  height:     20px;
  background: var(--border);
  margin:     0 2px;
}
.toolbar-group {
  display:     flex;
  gap:         6px;
  align-items: center;
}
.toolbar-label {
  font-size:      9px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right:   2px;
}
.data-file-indicator {
  font-size:     10px;
  color:         var(--muted);
  padding:       2px 8px;
  border:        1px solid var(--border);
  border-radius: 4px;
  max-width:     240px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ─── Tab nav ─── */
.tab-nav {
  display:       flex;
  gap:           0;
  border-bottom: 1px solid var(--border);
  background:    var(--bg);
  padding:       0 24px;
}
.tab-btn {
  font-family:    var(--font-mono);
  font-size:      11px;
  padding:        9px 16px;
  border:         none;
  border-bottom:  2px solid transparent;
  background:     transparent;
  color:          var(--muted);
  cursor:         pointer;
  letter-spacing: .04em;
  transition:     all .15s;
  margin-bottom:  -1px;
}
.tab-btn:hover        { color: var(--text); }
.tab-btn.active       { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel            { display: none; }
.tab-panel.active     { display: block; }

/* ─── Search & tag filter ─── */
.search-bar         { padding: 12px 24px 0; }
.search-bar input {
  width:         100%;
  max-width:     440px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 5px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       7px 12px;
  outline:       none;
  transition:    border-color .2s;
}
.search-bar input:focus       { border-color: var(--accent); }
.search-bar input::placeholder{ color: var(--muted); }

.tag-filter-bar {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  align-items:   center;
  padding:       6px 24px 8px;
  border-bottom: 1px solid var(--border);
}

.chip-filter-bar {
  display:       none;
  flex-wrap:     wrap;
  gap:           6px;
  align-items:   center;
  padding:       6px 24px 8px;
  border-bottom: 1px solid var(--border);
}
.chip-filter-bar--active {
  display: flex;
}

.chip-filter-label {
  font-size:      9px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space:    nowrap;
  align-self:     center;
  margin-right:   2px;
}

.chip-pill {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  font-size:    10px;
  padding:      2px 6px 2px 8px;
  border-radius:12px;
  border:       1px solid var(--border);
  color:        var(--text);
  white-space:  nowrap;
}
.chip-pill--dedup   { border-color: var(--accent);      color: var(--accent); }
.chip-pill--qtype   { border-color: var(--purple-light); color: var(--purple-light); }
.chip-pill--trans   { border-color: var(--blue);        color: var(--blue); }
.chip-pill--gender  { border-color: var(--green);       color: var(--green); }
.chip-pill--flagged { border-color: var(--danger-light); color: var(--danger-light); }
/* chip-pill--intensity and chip-pill--tag use inline style colors */

.chip-pill-label {
  font-size: 10px;
}

.chip-pill-x {
  background:    none;
  border:        none;
  padding:       0;
  font-size:     12px;
  line-height:   1;
  cursor:        pointer;
  color:         currentColor;
  opacity:       .5;
  margin-left:   1px;
}
.chip-pill-x:hover { opacity: 1; }

.chip-logic-btn {
  font-size:      9px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding:        2px 8px;
  border:         1px solid var(--accent);
  border-radius:  10px;
  background:     transparent;
  color:          var(--accent);
  cursor:         pointer;
}
.chip-logic-btn:hover { background: var(--accent); color: var(--bg); }

.chip-filter-clear {
  font-size:  10px;
  color:      var(--muted);
  cursor:     pointer;
  margin-left:4px;
}
.chip-filter-clear:hover { color: var(--danger-light); }

@media (max-width: 640px) {
  .chip-pill       { font-size: 9px; padding: 1px 5px 1px 7px; }
  .chip-logic-btn  { font-size: 8px; padding: 1px 6px; }
}

/* ─── Landing panel ─── */
.landing-panel {
  padding:        40px 24px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            24px;
}
.upload-zone {
  border:        2px dashed var(--border);
  border-radius: 10px;
  padding:       48px 32px;
  text-align:    center;
  max-width:     560px;
  width:         100%;
  transition:    border-color .2s;
  cursor:        pointer;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  gap:           8px;
}
.upload-zone:hover,
.upload-zone.drag-active { border-color: var(--accent); }
.upload-zone h2 {
  font-family: var(--font-serif);
  font-size:   18px;
  color:       var(--muted);
}
.upload-zone p         { font-size: 11px; color: var(--muted); }
.upload-zone-icon      { font-size: 36px; }
.upload-zone-hint      { font-size: 10px !important; }
.upload-zone-btn       { margin-top: 8px; }
.upload-info           { font-size: 11px; color: var(--green); }
.btn-back {
  font-size:    11px;
  padding:      5px 14px;
  background:   transparent;
  border:       1px solid var(--border);
  color:        var(--muted);
  border-radius:4px;
  cursor:       pointer;
}
/* Info panel flyout — floating overlay, positioned via JS */
.info-panel {
  position:      fixed;
  z-index:       500;
  width:         300px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       8px 12px;
  font-size:     11px;
  box-shadow:    0 4px 16px rgba(0,0,0,0.25);
}
.info-panel-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             12px;
  padding:         4px 0;
}
.info-panel-label {
  color:       var(--muted);
  flex-shrink: 0;
}
.info-panel-val {
  color:       var(--text);
  text-align:  right;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width:   60%;
}
.info-panel-val--warn { color: var(--orange); }
.info-panel-sep {
  height:     1px;
  background: var(--border);
  margin:     6px 0;
}

.upload-preview {
  max-width:     560px;
  width:         100%;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 6px;
  padding:       14px;
  font-size:     11px;
  color:         var(--muted);
  white-space:   pre-wrap;
  max-height:    180px;
  overflow-y:    auto;
}

/* ─── Question list panels ─── */
main#main {
  padding:        16px 24px;
  display:        flex;
  flex-direction: column;
  gap:            18px;
}
.results-panel  { padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }


/* ── 3. COMPONENTS ── */

/* ─── Top-level category ─── */
.top-category {
  border-radius: 10px;
  overflow:      hidden;
  border:        2px solid var(--border);
}
.top-cat-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     13px 18px;
  background:  var(--surface);
  border-bottom:1px solid var(--border);
}
.top-cat-header:hover  { background: var(--surface2); }
.top-cat-toggle {
  flex-shrink:   0;
  font-size:     13px;
  padding:       1px 6px;
  border:        1px solid var(--border);
  border-radius: 3px;
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  line-height:   1.5;
}
.collection-lock-icon {
  flex-shrink: 0;
  font-size:   12px;
  opacity:     .6;
}

.top-cat-label {
  font-family:  var(--font-serif);
  font-size:    15px;
  font-weight:  700;
  color:        var(--text);
  flex:         1;
  cursor:       pointer;
  user-select:  none;
}
.top-cat-desc  { font-size: 10px; color: var(--muted); font-style: italic; cursor: pointer; }
.top-cat-count {
  font-size:    10px;
  color:        var(--muted);
  background:   var(--surface2);
  padding:      2px 8px;
  border-radius:20px;
  white-space:  nowrap;
}
.top-cat-body          { display: none; }
.top-cat-body.open     { display: block; }
.sub-cats {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        12px 14px;
  background:     var(--bg);
}

/* ─── Subcategory ─── */
.category {
  border:        1px solid var(--border);
  border-radius: 7px;
  overflow:      hidden;
}
.cat-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     10px 14px;
  background:  var(--surface);
  border-bottom:1px solid var(--border);
}
.cat-header:hover { background: var(--surface2); }
.cat-toggle {
  flex-shrink:   0;
  font-size:     12px;
  padding:       1px 5px;
  border:        1px solid var(--border);
  border-radius: 3px;
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  line-height:   1.5;
}
.cat-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-name {
  font-family:  var(--font-serif);
  font-size:    13px;
  font-weight:  700;
  flex:         1;
  cursor:       pointer;
  user-select:  none;
}
.cat-count {
  font-size:    10px;
  color:        var(--muted);
  background:   var(--surface2);
  padding:      2px 8px;
  border-radius:20px;
}
.cat-body          { display: none; }
.cat-body.open     { display: block; }
.subcategory {
  padding:      10px 14px;
  border-bottom:1px solid var(--border);
}
.subcategory:last-child { border-bottom: none; }
.sub-label {
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--muted);
  margin-bottom:  7px;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.sub-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.vs-count { font-size: 9px; color: var(--muted); font-style: italic; text-transform: none; letter-spacing: 0; }

/* ─── Virtual scroll "show more" button ─── */
.vs-show-more {
  display:       block;
  width:         100%;
  padding:       7px 12px;
  margin-top:    4px;
  background:    var(--surface2);
  border:        1px dashed var(--border);
  border-radius: 4px;
  color:         var(--muted);
  font-family:   var(--font-mono);
  font-size:     11px;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color 0.15s, color 0.15s;
}
.vs-show-more:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Question rows ─── */
.grp-block {
  border-left:   3px solid transparent;
  border-radius: 3px;
  margin-bottom: 3px;
  padding-left:  4px;
  transition:    border-color .2s, background .2s;
}
.grp-block.highlight  { background: var(--accent-dim); outline: 1px solid var(--accent); outline-offset: 1px; }
.grp-block.dragging   { opacity: .4; }
.grp-block.drag-over  { border-top: 2px solid var(--accent) !important; }

.question-row {
  display:     flex;
  align-items: flex-start;
  gap:         7px;
  padding:     5px 6px;
  border-radius:4px;
  transition:  background .1s;
  cursor:      pointer;
}
.question-row:hover   { background: var(--surface2); }
.question-row.checked { background: rgba(224,82,82,.08); }
.question-row input[type=checkbox] {
  flex-shrink:  0;
  margin-top:   3px;
  accent-color: var(--danger);
  width:        13px;
  height:       13px;
  cursor:       pointer;
}

.drag-handle {
  flex-shrink: 0;
  cursor:      grab;
  color:       var(--border);
  font-size:   14px;
  padding:     0 2px;
  margin-top:  2px;
  user-select: none;
}
.drag-handle:hover { color: var(--accent); }
.drag-handle:active{ cursor: grabbing; }

.move-arrows {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  flex-shrink:    0;
  margin-top:     1px;
}
.arrow-btn {
  font-size:     9px;
  padding:       1px 4px;
  border:        1px solid var(--border);
  border-radius: 2px;
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  line-height:   1.4;
}

.q-id {
  flex-shrink: 0;
  min-width:   40px;
  color:       var(--accent);
  font-size:   11px;
  font-weight: 500;
  margin-top:  1px;
}
.q-text            { flex: 1; min-width: 0; overflow-wrap: break-word; color: var(--text); font-size: 12px; }
.q-text.edited     { color: var(--green-light); }
.q-text.edited::after { content: " ✎"; font-size: 10px; opacity: .6; }

.q-badge {
  flex-shrink:    0;
  font-size:      9px;
  padding:        1px 5px;
  border-radius:  3px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top:     3px;
  white-space:    nowrap;
}

.chip-clickable {
  cursor:     pointer;
  transition: box-shadow .15s, opacity .15s;
}
.chip-clickable:hover {
  box-shadow: 0 0 0 2px var(--accent-dim, rgba(201,168,76,.35));
  opacity:    1;
}
.chip-clickable--active {
  box-shadow: 0 0 0 2px currentColor;
  opacity:    1;
}
.badge-unique    { background: rgba(82,199,122,.12);   color: var(--green); }
.badge-dw        { background: rgba(139,92,246,.18);   color: var(--purple-light); }
.badge-ds        { background: rgba(201,168,76,.15);   color: var(--accent); }
.badge-ds-exact  { background: rgba(201,168,76,.15);   color: var(--accent); }
.badge-ds-similar{ background: rgba(96,165,250,.15);   color: var(--blue); }
.badge-ds-context{ background: rgba(82,199,122,.15);   color: var(--green); }
.badge-na        { background: #1a1a1a; color: var(--muted); border: 1px solid var(--border); font-style: italic; letter-spacing: .02em; }

.badge-intensity {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  font-size:      9px;
  padding:        1px 6px;
  border-radius:  3px;
  font-weight:    600;
  letter-spacing: .04em;
  white-space:    nowrap;
  flex-shrink:    0;
  margin-top:     3px;
}
.int-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.badge-gender {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  font-size:      9px;
  padding:        1px 6px;
  border-radius:  3px;
  font-weight:    500;
  letter-spacing: .04em;
  white-space:    nowrap;
  flex-shrink:    0;
  margin-top:     3px;
}
.badge-gender-male   { background: rgba(96,165,250,.15);  color: var(--blue);  border: 1px solid rgba(96,165,250,.3); }
.badge-gender-female { background: rgba(244,114,182,.15); color: var(--pink);  border: 1px solid rgba(244,114,182,.3); }
.badge-gender-other  { background: rgba(167,139,250,.15); color: var(--purple-light); border: 1px solid rgba(167,139,250,.3); }
.badge-gender-all    { background: rgba(82,199,122,.12);  color: var(--green); border: 1px solid rgba(82,199,122,.25); }

.badge-trans {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  font-size:      9px;
  padding:        2px 7px;
  border-radius:  3px;
  background:     rgba(56,189,248,.10);
  color:          var(--sky);
  border:         1px solid rgba(56,189,248,.22);
  font-weight:    500;
  letter-spacing: .03em;
  white-space:    nowrap;
  flex-shrink:    0;
  margin-top:     3px;
}

.badge-questiontype,
.badge-qtype {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      9px;
  padding:        2px 7px;
  border-radius:  3px;
  background:     rgba(124,58,237,.12);
  color:          var(--purple-light);
  border:         1px solid rgba(124,58,237,.2);
  font-weight:    500;
  letter-spacing: .03em;
  white-space:    nowrap;
  flex-shrink:    0;
  margin-top:     3px;
}

.btn-edit {
  flex-shrink:   0;
  font-size:     10px;
  padding:       2px 7px;
  border:        1px solid var(--border);
  border-radius: 3px;
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  margin-top:    1px;
}
.btn-edit.editing  { border-color: var(--blue); color: var(--blue); }

.row-actions {
  margin-left:    auto;
  flex-shrink:    0;
  display:        flex;
  gap:            2px;
  align-items:    center;
}

.btn-addhere {
  flex-shrink:   0;
  font-size:     10px;
  padding:       2px 6px;
  border:        1px solid var(--green-dark);
  border-radius: 3px;
  background:    transparent;
  color:         rgba(82,199,122,.6);
  cursor:        pointer;
  margin-top:    1px;
}

.sib-note { font-size: 10px; color: var(--muted); padding: 1px 7px 4px 58px; font-style: italic; }
.sib-note a{ text-decoration: underline; cursor: pointer; }

/* ─── Inline question editor ─── */
.inline-editor       { display: none; padding: 5px 6px 8px 58px; }
.inline-editor.open  { display: flex; gap: 8px; align-items: flex-start; }
.inline-editor textarea {
  flex:          1;
  background:    var(--surface2);
  border:        1px solid var(--blue);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       6px 9px;
  resize:        vertical;
  min-height:    52px;
  outline:       none;
  line-height:   1.5;
}
.editor-btns { display: flex; flex-direction: column; gap: 4px; }
.btn-save {
  font-size:    10px;
  padding:      4px 9px;
  background:   var(--green-dark);
  border:       1px solid var(--green);
  color:        var(--green);
  border-radius:3px;
  cursor:       pointer;
}
.btn-cancel {
  font-size:    10px;
  padding:      4px 9px;
  background:   var(--surface2);
  border:       1px solid var(--border);
  color:        var(--muted);
  border-radius:3px;
  cursor:       pointer;
}

/* ─── Category inline editing ─── */
.cat-edit-btn, .cat-move-btn {
  flex-shrink:   0;
  font-size:     10px;
  padding:       2px 6px;
  border:        1px solid transparent;
  border-radius: 3px;
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  line-height:   1.5;
}
.cat-move-btn:disabled { opacity: .2; cursor: default; }
.cat-inline-edit {
  display:    none;
  align-items:center;
  gap:        6px;
  padding:    7px 14px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
}
.cat-inline-edit.open    { display: flex; }
.cat-inline-edit input {
  flex:          1;
  background:    var(--bg);
  border:        1px solid var(--accent);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       4px 8px;
  outline:       none;
}
.cat-ie-save {
  font-size:    10px;
  padding:      4px 9px;
  background:   var(--green-dark);
  border:       1px solid var(--green);
  color:        var(--green);
  border-radius:3px;
  cursor:       pointer;
}
.cat-ie-cancel {
  font-size:    10px;
  padding:      4px 9px;
  background:   var(--surface);
  border:       1px solid var(--border);
  color:        var(--muted);
  border-radius:3px;
  cursor:       pointer;
}

/* ─── Tags ─── */
.tag-chip {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      2px 8px;
  border-radius:20px;
  font-size:    9px;
  font-weight:  500;
  letter-spacing:.04em;
  cursor:       pointer;
  border:       1px solid transparent;
  transition:   opacity .15s, box-shadow .15s;
  white-space:  nowrap;
  user-select:  none;
}
.tag-chip:hover { opacity: .8; }
.tag-chip-toggle        { opacity: .45; }
.tag-chip-toggle.active { opacity: 1; box-shadow: 0 0 0 2px currentColor; }

.tag-group             { display: inline-flex; align-items: center; gap: 2px; }
.tag-chip--parent      { font-weight: 600; cursor: pointer; }
.tag-group-chevron     { font-size: 7px; margin-right: 2px; }
.tag-group-badge       { font-size: 7px; opacity: .7; margin-left: 2px; }
.tag-group-children    { display: inline; }
.tag-chip--child       { font-size: 8px; padding: 1px 6px; }

.tags-picker-group     { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 6px; }
.tags-picker-parent    { font-size: 10px; font-weight: 600; padding: 3px 8px; border: 1px solid; border-radius: 4px; cursor: pointer; opacity: .5; transition: opacity .15s, box-shadow .15s; user-select: none; }
.tags-picker-parent.active { opacity: 1; box-shadow: 0 0 0 2px currentColor; }
.tags-picker-parent--partial { opacity: .75; box-shadow: 0 0 0 1px currentColor; border-style: dashed; }
.tags-picker-children  { display: inline-flex; flex-wrap: wrap; gap: 4px; }

.tag-filter-chip {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      3px 10px;
  border-radius:20px;
  font-size:    10px;
  cursor:       pointer;
  border:       1px solid;
  transition:   all .15s;
  font-family:  var(--font-mono);
  opacity:      .55;
}
.tag-filter-chip.active { opacity: 1; box-shadow: 0 0 0 1px currentColor; }
.tag-filter-chip--partial { border-style: dashed; opacity: .85; }

/* ═══ Tag Tree (explorer-style) ═══ */
.tmgr-node          { position: relative; }
.tmgr-node--dragging { opacity: 0.25; }
.tmgr-row {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 0; min-height: 30px;
  border-radius: 4px; position: relative;
  transition: background 0.12s;
  cursor: default;
}
.tmgr-row:hover { background: rgba(255,255,255,0.025); }

/* Drag handle — 3 horizontal bars */
.tmgr-handle {
  width: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.5px; flex-shrink: 0; opacity: 0;
  transition: opacity 0.15s; cursor: grab; padding: 4px 0;
}
.tmgr-handle span { display: block; width: 8px; height: 1.5px; background: var(--muted); border-radius: 1px; }
.tmgr-row:hover .tmgr-handle { opacity: 0.6; }
.tmgr-row:hover .tmgr-handle:hover { opacity: 1; }

/* Toggle arrow */
.tmgr-toggle {
  width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--muted); font-size: 8px;
  transition: transform 0.18s cubic-bezier(0.4,0,0.2,1), color 0.15s;
  cursor: pointer; user-select: none;
}
.tmgr-toggle--open { transform: rotate(90deg); color: var(--accent); }
.tmgr-toggle--leaf { opacity: 0; pointer-events: none; }

/* Tag chip (pill) */
.tmgr-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px 2px 6px; border-radius: 20px;
  font-size: 12px; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap; flex-shrink: 1; min-width: 0;
}
.tmgr-color-slot { flex-shrink: 0; display: inline-flex; align-items: center; }
.tmgr-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  display: inline-block; border: none;
}
/* Override palette swatch when inside chip */
.tmgr-chip .pal-swatch.tmgr-dot { width: 7px; height: 7px; border-radius: 50%; border: none; }
.tmgr-chip .pal-wrap { display: inline-flex; align-items: center; }
.tmgr-name {
  background: none; border: none; outline: none; color: inherit;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  padding: 0; min-width: 30px; max-width: 160px;
}
.tmgr-name:focus { border-bottom: 1px solid currentColor; }
.tmgr-badge {
  font-size: 9px; opacity: 0.6; font-weight: 400;
  background: rgba(255,255,255,0.08); border-radius: 8px;
  padding: 0 5px; line-height: 1.6;
}

/* Question count */
.tmgr-qcount { font-size: 10px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }

/* Delete — visible on hover */
.tmgr-del {
  font-size: 9px; padding: 1px 6px; border: 1px solid var(--danger-dark);
  color: var(--danger); border-radius: 3px; background: transparent;
  cursor: pointer; opacity: 0; transition: opacity 0.12s; flex-shrink: 0;
}
.tmgr-row:hover .tmgr-del { opacity: 0.7; }
.tmgr-del:hover { opacity: 1 !important; background: var(--danger); color: #fff; border-color: var(--danger); }

/* Collapsed preview */
.tmgr-preview {
  font-size: 10px; color: var(--muted); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; margin-left: 2px; flex-shrink: 1; min-width: 0;
}

/* Children container — vertical indent guide */
.tmgr-children {
  position: relative; padding-left: 20px;
}
.tmgr-children::before {
  content: ''; position: absolute;
  left: 10px; top: 0; bottom: 8px;
  width: 1px; background: var(--border);
}

/* Add child */
.tmgr-add-child { padding: 2px 0 2px 4px; }
.tmgr-add-child-btn {
  font-size: 10px; color: var(--muted); background: none;
  border: 1px dashed var(--border); border-radius: 4px;
  padding: 2px 10px; cursor: pointer; transition: all 0.12s;
}
.tmgr-add-child-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Group selected */
.tmgr-group-chk { flex-shrink: 0; accent-color: var(--accent); width: 12px; height: 12px; }
.tmgr-group-bar { margin-top: 8px; text-align: right; }
.tmgr-group-btn {
  font-size: 10px; padding: 3px 10px; border: 1px solid var(--accent);
  color: var(--accent); border-radius: 4px; background: transparent; cursor: pointer;
}
.tmgr-group-btn:hover { background: var(--accent); color: var(--bg); }

/* ── Drop indicators ── */
.tmgr-node.tmgr-drop-before > .tmgr-row::before {
  content: ''; position: absolute;
  left: -2px; right: 4px; top: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 8px rgba(201,168,76,0.3); z-index: 10; pointer-events: none;
}
.tmgr-node.tmgr-drop-after > .tmgr-row::after {
  content: ''; position: absolute;
  left: -2px; right: 4px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 8px rgba(201,168,76,0.3); z-index: 10; pointer-events: none;
}
.tmgr-node.tmgr-drop-inside > .tmgr-row {
  background: var(--accent-dim);
  outline: 1px solid rgba(201,168,76,0.4); outline-offset: -1px;
}

/* Drag ghost */
#tagDragGhost {
  position: fixed; pointer-events: none; z-index: 9999; display: none;
  align-items: center; gap: 7px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 14px;
  font-size: 11px; color: var(--text);
  box-shadow: 0 10px 36px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.15);
  transform: translate(-50%, -130%);
  font-family: var(--font-mono); white-space: nowrap;
}
#tagDragGhost.tmgr-ghost--on { display: flex; }
.tmgr-ghost-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* Child node fade-in animation */
@keyframes tmgrFadeIn { from { opacity:0; transform:translateY(-3px); } to { opacity:1; transform:translateY(0); } }
.tmgr-children > .tmgr-node { animation: tmgrFadeIn 0.13s ease forwards; }

/* ═══ Tag Tree — Header, Toolbar, Stats, Settings ═══ */

/* Header banner */
.tmgr-header { padding: 12px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.tmgr-header-title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.tmgr-header-title span { font-style: italic; color: var(--accent); }
.tmgr-header-sub { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); margin-top: 4px; }

/* Toolbar */
.tmgr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tmgr-tb {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 12px; border-radius: 4px; font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.05em; cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.tmgr-tb:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.tmgr-tb--accent { color: var(--accent); border-color: var(--accent); }
.tmgr-tb--accent:hover { background: var(--accent); color: var(--bg); }
/* Depth slider */
.tmgr-depth-wrap { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.tmgr-depth-lbl { font-size: 9px; color: var(--muted); letter-spacing: 0.05em; }
.tmgr-depth-val { font-size: 9px; color: var(--accent); min-width: 16px; text-align: center; }
.tmgr-depth-range { width: 60px; height: 3px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; }
.tmgr-depth-range::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; }
.tmgr-depth-range::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; }
.tmgr-tb-sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }

/* Search */
.tmgr-search-wrap { margin-left: auto; position: relative; }
.tmgr-search {
  width: 140px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-family: var(--font-mono); font-size: 11px;
  padding: 4px 8px; outline: none; transition: border-color 0.15s;
}
.tmgr-search:focus { border-color: var(--accent); }
.tmgr-search::placeholder { color: var(--muted); }

/* Inline add-tag row */
.tmgr-add-inline { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.tmgr-add-input {
  flex: 1; max-width: 200px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-family: var(--font-mono); font-size: 11px;
  padding: 4px 8px; outline: none; transition: border-color 0.15s;
}
.tmgr-add-input:focus { border-color: var(--accent); }
.tmgr-add-input::placeholder { color: var(--muted); }

/* Stats bar */
.tmgr-stats { display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 0; border-top: 1px solid var(--border); margin-top: 6px; }
.tmgr-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tmgr-stat-val { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--text); }
.tmgr-stat-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* Settings row */
.tmgr-settings { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; }
.tmgr-settings-lbl { font-size: 11px; color: var(--muted); }

/* Search highlight */
.tmgr-name--search { background: none; border: none; color: inherit; font-family: var(--font-mono); font-size: 12px; font-weight: 500; padding: 0; cursor: default; }
.tmgr-chip mark { background: rgba(201,168,76,0.25); color: var(--accent); border-radius: 2px; padding: 0 1px; }

/* Responsive */
@media (max-width: 420px) {
  .tmgr-header-title { font-size: 16px; }
  .tmgr-search-wrap { width: 100%; margin-left: 0; }
  .tmgr-search { width: 100%; }
}

/* Question types list */
.question-types-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  12px;
  max-height:     280px;
  overflow-y:     auto;
}

.qt-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 10px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 5px;
}

.qt-icon {
  flex-shrink: 0;
  font-size:   14px;
  min-width:   20px;
  text-align:  center;
}

.qt-info {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.qt-label-input {
  width:        100%;
  background:   var(--bg);
  border:       1px solid var(--border);
  border-radius:3px;
  color:        var(--text);
  font-family:  var(--font-mono);
  font-size:    12px;
  padding:      3px 7px;
  outline:      none;
  font-weight:  500;
}

.qt-label-input:focus { border-color: var(--accent); }

.qt-desc-input {
  width:        100%;
  background:   var(--bg);
  border:       1px solid var(--border);
  border-radius:3px;
  color:        var(--muted);
  font-family:  var(--font-mono);
  font-size:    10px;
  padding:      2px 6px;
  outline:      none;
}

.qt-desc-input:focus { border-color: var(--accent); }

/* Shared by question types list */
.tags-mgr-count  { font-size: 10px; color: var(--muted); min-width: 50px; text-align: right; }
.tags-mgr-del-btn {
  flex-shrink:  0;
  font-size:    10px;
  padding:      2px 6px;
  border:       1px solid var(--danger-dark);
  border-radius:3px;
  background:   transparent;
  color:        var(--danger-light);
  cursor:       pointer;
  transition:   border-color .15s, color .15s;
}
.tags-mgr-del-btn:hover {
  border-color: var(--danger);
  color:        var(--danger);
}

.qt-system-badge {
  flex-shrink: 0;
  font-size:   9px;
  padding:     2px 6px;
  border:      1px solid var(--border);
  border-radius:3px;
  background:  var(--bg);
  color:       var(--muted);
  font-weight: 500;
  letter-spacing:.02em;
}

/* ─── Results panel ─── */
.results-section-header {
  font-family:    var(--font-serif);
  font-size:      13px;
  color:          var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding:        6px 0 8px;
  border-bottom:  1px solid var(--border);
  margin-bottom:  8px;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.rs-count {
  font-family:  var(--font-mono);
  font-size:    10px;
  padding:      1px 7px;
  border-radius:10px;
  background:   var(--surface2);
  color:        var(--muted);
}
.res-card               { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.res-card.res-card-unique{ border-left: 3px solid var(--green); }
.res-card-header        { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.res-card-pill          { font-size: 9px; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; flex-shrink: 0; }
.res-card-grp           { font-size: 11px; color: var(--muted); flex: 1; font-style: italic; }
.res-card-count         { font-size: 10px; color: var(--muted); }
.res-row                { display: flex; align-items: flex-start; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); transition: background .1s; cursor: pointer; }
.res-row:last-child     { border-bottom: none; }
.res-row:hover          { background: var(--surface2); }
.res-row.checked        { background: rgba(224,82,82,.08); }
.res-row input[type=checkbox] { flex-shrink: 0; margin-top: 3px; accent-color: var(--danger); width: 13px; height: 13px; cursor: pointer; }
.res-row-id             { flex-shrink: 0; min-width: 42px; color: var(--accent); font-size: 11px; font-weight: 500; margin-top: 1px; }
.res-row-body           { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.res-row-text           { font-size: 12px; color: var(--text); line-height: 1.5; }
.res-row-text.edited    { color: var(--green-light); }
.res-row-meta           { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.res-cat-badge          { font-size: 9px; padding: 1px 6px; border-radius: 3px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.res-actions            { display: flex; gap: 4px; flex-shrink: 0; margin-top: 1px; }
.res-actions button     { font-size: 10px; padding: 2px 7px; }

.results-filter-bar     { display: flex; gap: 6px; padding: 10px 24px 0; flex-wrap: wrap; align-items: center; }
.res-filter-chip {
  font-size:    10px;
  padding:      3px 10px;
  border:       1px solid var(--border);
  border-radius:20px;
  background:   var(--bg);
  color:        var(--muted);
  cursor:       pointer;
  font-family:  var(--font-mono);
}
.res-filter-chip.active           { border-color: var(--accent);       color: var(--accent);       background: var(--accent-dim); }
.res-filter-chip.rf-dw.active     { border-color: var(--purple-light); color: var(--purple-light); background: rgba(139,92,246,.1); }
.res-filter-chip.rf-ds-exact.active  { border-color: var(--accent);    color: var(--accent);       background: var(--accent-dim); }
.res-filter-chip.rf-ds-similar.active{ border-color: var(--blue);      color: var(--blue);         background: rgba(96,165,250,.1); }
.res-filter-chip.rf-ds-context.active{ border-color: var(--green);     color: var(--green);        background: rgba(82,199,122,.1); }

/* ─── Groups panel (duplicate group cards) ─── */
.grp-card             { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.grp-card-header      { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.grp-pill             { font-size: 9px; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.pill-dw              { background: rgba(139,92,246,.18); color: var(--purple-light); }
.pill-ds              { background: rgba(201,168,76,.15); color: var(--accent); }
.pill-ds-exact        { background: rgba(201,168,76,.15); color: var(--accent); }
.pill-ds-similar      { background: rgba(96,165,250,.15); color: var(--blue); }
.pill-ds-context      { background: rgba(82,199,122,.15); color: var(--green); }
.grp-card-name        { font-size: 12px; font-weight: 500; flex: 1; color: var(--text); }
.grp-card-count       { font-size: 10px; color: var(--muted); }
.grp-card-body        { padding: 7px 14px 9px; }
.grp-item             { display: flex; align-items: flex-start; gap: 7px; padding: 4px 5px; border-radius: 4px; cursor: pointer; transition: background .1s; }
.grp-item:hover       { background: var(--surface2); }
.grp-item.checked     { background: rgba(224,82,82,.08); }
.grp-item input[type=checkbox] { flex-shrink: 0; margin-top: 3px; accent-color: var(--danger); width: 13px; height: 13px; cursor: pointer; }
.grp-item-id          { flex-shrink: 0; min-width: 42px; color: var(--accent); font-size: 11px; font-weight: 500; margin-top: 1px; }
.grp-item-cat         { font-size: 10px; color: var(--muted); white-space: nowrap; margin-top: 2px; min-width: 160px; }
.grp-item-text        { flex: 1; font-size: 12px; color: var(--text); }

/* ─── Progress (analyse) ─── */
/* ─── Progress summary grid ─── */
.progress-summary {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  margin-bottom:         12px;
  background:            var(--border);
  border:                1px solid var(--border);
  border-radius:         5px;
  overflow:              hidden;
  font-size:             10px;
  font-family:           var(--font-mono);
}
.progress-summary:empty { display: none; }
.ps-cell {
  display:        flex;
  justify-content: space-between;
  padding:        5px 10px;
  background:     var(--surface2);
  color:          var(--muted);
}
.ps-cell strong { color: var(--text); font-weight: 500; }
.ps-cell--full  { grid-column: 1 / -1; }
.ps-cell--sections {
  display:    flex;
  flex-wrap:  wrap;
  gap:        4px;
  padding:    6px 10px;
}
.ps-section {
  padding:       2px 8px;
  border-radius: 3px;
  font-size:     10px;
  border:        1px solid var(--border);
  color:         var(--muted);
  transition:    color .3s, border-color .3s;
}
.ps-section[data-status="running"] { color: var(--accent);  border-color: var(--accent); }
.ps-section[data-status="done"]    { color: var(--green);   border-color: var(--green); }
.ps-section[data-status="failed"]  { color: var(--danger);  border-color: var(--danger); }
.ps-section[data-status="partial"] { color: var(--amber);   border-color: var(--amber); }
.ps-section[data-status="skipped"] { color: var(--muted);   border-color: var(--border); opacity: 0.5; }
.ps-legend-btn {
  margin-left:   auto;
  padding:       0 5px;
  background:    transparent;
  border:        none;
  color:         var(--muted);
  font-size:     11px;
  cursor:        pointer;
  line-height:   1;
  opacity:       0.6;
}
.ps-legend-btn:hover { opacity: 1; color: var(--text); }

/* ─── Dual progress bars ─── */
.progress-label-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  margin-bottom:   3px;
}
.progress-label {
  font-size:   10px;
  font-family: var(--font-mono);
  color:       var(--muted);
}
.progress-label-pct {
  font-size:   10px;
  font-family: var(--font-mono);
  color:       var(--text);
}
.progress-bar-wrap {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 20px;
  height:        7px;
  overflow:      hidden;
  margin-bottom: 8px;
}
.progress-bar {
  height:        100%;
  border-radius: 20px;
  transition:    width .4s ease;
  width:         0%;
}
.progress-bar--overall { background: var(--accent); }
.progress-bar--task    { background: var(--muted); }

.progress-title {
  font-family:   var(--font-serif);
  font-size:     15px;
  color:         var(--accent);
  margin-bottom: 3px;
}
.progress-sub  { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.progress-log  {
  max-height:    200px;
  border:        1px solid var(--border);
  border-radius: 4px;
  padding:       8px 10px;
  background:    var(--bg);
  font-size:     10px;
  color:         var(--muted);
  overflow-y:    auto;
  white-space:   pre-wrap;
}
.btn-abort {
  background:    var(--danger-bg);
  border:        1px solid var(--danger-dark);
  color:         var(--danger);
  padding:       7px 20px;
  border-radius: 5px;
  font-size:     11px;
  cursor:        pointer;
}
.btn-progress-done {
  background:    var(--green-dark);
  border:        1px solid var(--green);
  color:         var(--green);
  padding:       7px 20px;
  border-radius: 5px;
  font-size:     11px;
  cursor:        pointer;
}
.btn-copy-log {
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--muted);
  padding:       7px 16px;
  border-radius: 5px;
  font-size:     11px;
  cursor:        pointer;
  font-family:   var(--font-mono);
  transition:    border-color .2s, color .2s;
}
.btn-copy-log:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Progress stats bar ─── */
.progress-stats {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  font-size:     10px;
  font-family:   var(--font-mono);
  color:         var(--muted);
  padding:       6px 10px;
  background:    var(--surface);
  border-radius: 4px;
  margin-bottom: 8px;
}
.progress-stats:empty { display: none; }
.progress-stats span { white-space: nowrap; }
.progress-stats strong { color: var(--text); }

/* ─── Retry select ─── */
.retry-select {
  background:    var(--surface2);
  border:        1px solid var(--border);
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       3px 6px;
  border-radius: 3px;
  cursor:        pointer;
}

/* ── Progress modal B Revised layout ── */
.modal-box--progress {
  padding:        0;
  max-width:      780px;
  width:          95%;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  max-height:     92vh;
}

.prog-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px 9px;
  border-bottom:   1px solid var(--border);
  background:      var(--surface2);
  flex-shrink:     0;
  gap:             12px;
}
.prog-title {
  font-family:  var(--font-serif);
  font-size:    15px;
  color:        var(--accent);
  white-space:  nowrap;
}
/* Override #progressStats when inside prog-header */
.prog-header .prog-stats {
  display:     flex;
  gap:         14px;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--muted);
  background:  none;
  padding:     0;
  border-radius: 0;
  margin:      0;
  flex-wrap:   nowrap;
}
.prog-header .prog-stats strong { color: var(--text); font-weight: 500; }

.prog-body {
  display:               grid;
  grid-template-columns: 220px 1fr;
  flex:                  1;
  overflow:              hidden;
  min-height:            320px;
}

.prog-left {
  border-right:   1px solid var(--border);
  padding:        12px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  background:     var(--surface2);
  overflow-y:     auto;
  flex-shrink:    0;
}
.prog-model-name {
  font-family:  var(--font-sans);
  font-size:    12px;
  color:        var(--text);
  font-weight:  500;
  line-height:  1.4;
}
.prog-model-sub {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--muted);
  margin-top:  1px;
}
.prog-divider { height: 1px; background: var(--border); flex-shrink: 0; }

/* Pipeline tracker */
.pipeline { display: flex; flex-direction: column; }
.pipe-row {
  display:     flex;
  align-items: flex-start;
  gap:         7px;
  padding:     5px 0;
}
.pipe-icon {
  font-size:   9px;
  font-family: var(--font-mono);
  color:       var(--border);
  line-height: 1.5;
  flex-shrink: 0;
  width:       10px;
  text-align:  center;
}
.pipe-info { flex: 1; overflow: hidden; }
.pipe-name {
  font-family:     var(--font-mono);
  font-size:       10px;
  color:           var(--muted);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  display:         block;
  line-height:     1.4;
}
.pipe-step {
  font-family:     var(--font-mono);
  font-size:       9px;
  color:           var(--muted);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  display:         block;
  margin-top:      1px;
  line-height:     1.4;
}
.pipe-row[data-status="pending"] .pipe-step { display: none; }

.pipe-row[data-status="done"]    .pipe-icon { color: var(--green); }
.pipe-row[data-status="done"]    .pipe-name { color: var(--muted); }
.pipe-row[data-status="done"]    .pipe-step { color: var(--green); }
.pipe-row[data-status="active"]  .pipe-icon { color: var(--accent); }
.pipe-row[data-status="active"]  .pipe-name { color: var(--text); font-weight: 500; }
.pipe-row[data-status="active"]  .pipe-step { color: var(--accent); }
.pipe-row[data-status="failed"]  .pipe-icon { color: var(--danger); }
.pipe-row[data-status="failed"]  .pipe-name { color: var(--muted); }
.pipe-row[data-status="failed"]  .pipe-step { color: var(--danger); }
.pipe-row[data-status="partial"] .pipe-icon { color: var(--amber); }
.pipe-row[data-status="partial"] .pipe-name { color: var(--muted); }
.pipe-row[data-status="partial"] .pipe-step { color: var(--amber); }

/* Right: log fills the column */
.prog-right {
  padding:        10px 12px;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
}
.prog-right .progress-log {
  flex:       1;
  min-height: 0;
  max-height: none; /* override old max-height: 200px */
}

/* Progress bars zone */
.prog-bars {
  padding:        8px 14px 7px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
  border-top:     1px solid var(--border);
  background:     var(--surface);
  flex-shrink:    0;
}
.prog-bar-row {
  display:               grid;
  grid-template-columns: 100px 1fr 36px;
  align-items:           center;
  gap:                   8px;
  font-family:           var(--font-mono);
  font-size:             10px;
  color:                 var(--muted);
}
.prog-bar-pct { color: var(--text); font-weight: 500; text-align: right; }

/* ─── Analysis preview modal ─── */
.preview-body {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  font-size:      12px;
  margin-bottom:  14px;
}
.preview-section {
  padding:       8px 12px;
  background:    var(--surface);
  border-radius: 5px;
  border:        1px solid var(--border);
}
.preview-section-title {
  font-size:     11px;
  color:         var(--accent);
  font-weight:   700;
  margin-bottom: 4px;
}
.preview-row {
  display:         flex;
  justify-content: space-between;
  padding:         2px 0;
  font-size:       11px;
}
.preview-row-label { color: var(--muted); }
.preview-row-value { color: var(--text); font-weight: 500; }

/* ─── Append result rows ─── */
.append-result-body { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; font-size: 12px; }
.append-stat        { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 4px; background: var(--surface2); }
.append-stat-label  { color: var(--muted); }
.append-stat-val    { color: var(--text); font-weight: 500; }
.append-warn {
  padding:       8px 12px;
  background:    rgba(249,115,22,.1);
  border:        1px solid var(--warning-border);
  border-radius: 5px;
  color:         var(--orange);
  font-size:     11px;
  line-height:   1.6;
}


/* ── 4. MODAL-SPECIFIC COMPONENTS ── */

/* Modal size / layout modifiers */
.modal-box--centered { text-align: center; max-width: 460px; }
.modal-box--wide     { max-width: 860px; width: 95%; }

/* Modal action row modifiers */
.modal-actions--center    { justify-content: center; gap: 10px; margin-top: 18px; }
.modal-actions--end       { justify-content: flex-end; }
.modal-actions--border-top{ border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; }

/* Misc modal helpers */
.modal-title-row {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   6px;
}
.modal-title-row h3   { margin: 0; }
.modal-id             { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.modal-hint           { color: var(--muted); font-size: 11px; margin-bottom: 12px; line-height: 1.5; }
.modal-section-header { margin-bottom: 12px; flex-shrink: 0; }
.required-marker      { color: var(--accent); }
.label-hint           { color: var(--muted); font-weight: normal; }
.modal-footer-split {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid var(--border);
  padding-top:     12px;
}
.modal-input--inline  { flex: 1; margin-bottom: 0; }
.modal-textarea--tall { min-height: 80px; margin-bottom: 12px; }

.confirm-p--left  { text-align: left; font-size: 11px; white-space: pre-wrap; }
.confirm-hint     { font-size: 10px; color: var(--muted); }

/* Exact dedup review modal */
.dedup-review-body        { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.dedup-select-all-row     { padding: 4px 2px 2px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.dedup-keep-toggle--all   { font-size: 12px; font-weight: 600; color: var(--text); }
.dedup-review-group       { background: var(--surface-alt, var(--surface)); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.dedup-review-group-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dedup-group-label        { font-size: 12px; font-weight: 600; color: var(--accent); }
.dedup-keep-toggle        { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); cursor: pointer; user-select: none; }
.dedup-keep-toggle input  { cursor: pointer; }
.dedup-review-list        { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.dedup-review-item        { font-size: 11px; padding: 4px 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
.dedup-review-item--first { background: rgba(82,199,122,.08); color: var(--text); }
.dedup-review-item--dup   { background: rgba(224,82,82,.08); color: var(--muted); }

/* Text utility */
.text-accent      { color: var(--accent); }
.text-muted       { color: var(--muted); }
.btn-right        { margin-left: auto; }

/* Optional expand section */
.optional-toggle {
  display:      flex;
  align-items:  center;
  gap:          8px;
  margin-bottom:8px;
  cursor:       pointer;
  font-size:    10px;
  color:        var(--muted);
}
.optional-toggle-icon { font-size: 10px; color: var(--muted); }
.optional-body {
  border:        1px solid var(--border);
  border-radius: 6px;
  padding:       12px;
  background:    var(--surface2);
}

/* Metadata grid (Modify modal) */
.meta-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-bottom:         14px;
}

/* Tags row in Modify modal */
.tags-row       { margin-bottom: 14px; }
.tags-picker    { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; padding: 6px 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; }
.tags-hint      { font-size: 9px; color: var(--muted); margin-top: 4px; }

/* Apply button (Modify modal) */
.btn-apply {
  background:    var(--green-dark);
  border:        1px solid var(--accent);
  color:         var(--accent);
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       6px 14px;
  border-radius: 4px;
  cursor:        pointer;
}

/* Purple button */
.btn-purple { border-color: var(--purple-light); color: var(--purple-light); }

/* ─── Save modal ─── */
.save-options       { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.save-option {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  padding:       11px 14px;
  border:        1px solid var(--border);
  border-radius: 6px;
  cursor:        pointer;
  background:    var(--surface2);
  transition:    border-color .15s;
}
.save-option:has(input:checked)           { border-color: var(--accent); background: var(--accent-dim); }
.save-option--expandable                  { border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); }
.save-option--expandable:has(input:checked){ border-color: var(--accent); background: var(--accent-dim); }
.save-option-header                       { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; cursor: pointer; }
.save-checkbox                            { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.save-option-text                         { display: flex; flex-direction: column; gap: 2px; }
.save-option-name                         { font-size: 12px; font-weight: 500; color: var(--text); }
.save-option-desc                         { font-size: 10px; color: var(--muted); }
.save-subpanel                            { padding: 0 14px 12px; border-top: 1px solid var(--border); }
.save-fields-label                        { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 10px 0 7px; }
.save-fields-grid                         { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin-bottom: 10px; }
.save-field                               { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text); cursor: pointer; }
.save-field input                         { accent-color: var(--accent); }
.save-format-row                          { display: flex; gap: 12px; }
.save-format                              { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); cursor: pointer; }
.save-format input                        { accent-color: var(--accent); }

/* ─── Structure editor modal ─── */
.sr-header { flex-shrink: 0; }
.sr-header h3  { margin: 0 0 4px; }
.sr-tab-nav {
  display:       flex;
  border-bottom: 1px solid var(--border);
  margin-top:    10px;
}
.sr-tab {
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       8px 16px;
  border:        none;
  border-bottom: 2px solid transparent;
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  letter-spacing:.04em;
  transition:    all .15s;
  margin-bottom: -1px;
}
.sr-tab:hover  { color: var(--text); border-bottom-color: transparent !important; }
.sr-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.sr-footer {
  display:       flex;
  gap:           8px;
  flex-wrap:     wrap;
  border-top:    1px solid var(--border);
  padding-top:   12px;
  margin-top:    14px;
  align-items:   center;
  flex-shrink:   0;
}
.sr-footer-btns    { display: flex; gap: 6px; align-items: center; }
.sr-footer-spacer  { flex: 1; }

/* ── Save/Load modal groups ── */
.sr-save-group {
  border:        1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow:      hidden;
}
.sr-save-group-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 12px;
  cursor:      pointer;
  background:  var(--bg2);
  user-select: none;
}
.sr-save-group-header:hover { background: var(--border); }
.sr-save-group-header label { flex: 1; cursor: pointer; font-weight: 600; font-size: 13px; }
.sr-save-chevron { font-size: 10px; color: var(--muted); }
.sr-save-group-body {
  display:       flex;
  flex-direction: column;
  gap:           4px;
  padding:       8px 12px 10px 36px;
}
.sr-save-option {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   13px;
  cursor:      pointer;
}
.sr-save-option input[type="checkbox"] { cursor: pointer; }
.sr-save-option input:disabled + span,
.sr-save-option:has(input:disabled) { color: var(--muted); }

.sr-save-filename-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  12px;
}
.sr-save-filename-row .modal-label { white-space: nowrap; margin: 0; }
.sr-save-filename-row .modal-input { flex: 1; }

.sr-load-file-row {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 12px;
}
.sr-load-filename {
  font-size:  12px;
  color:      var(--muted);
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width:  200px;
}
.sr-load-warn {
  font-size:  12px;
  color:      var(--orange);
  margin:     10px 0 4px;
}

/* ── Load Mode modal ── */
.load-mode-row       { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.load-mode-row:last-child { border-bottom: none; }
.load-mode-label     { flex: 1; font-size: 12px; font-weight: 600; color: var(--text); }
.load-mode-radios    { display: flex; gap: 10px; font-size: 11px; }
.load-mode-radios label { display: flex; align-items: center; gap: 4px; cursor: pointer; color: var(--muted); }
.load-mode-radios input[type="radio"] { margin: 0; }
.load-mode-note      { font-size: 10px; color: var(--muted); padding: 4px 0; }
.load-mode-impact    { font-size: 11px; color: var(--orange); margin-top: 6px; padding: 8px; background: rgba(249,115,22,.06); border-radius: 5px; border: 1px solid rgba(249,115,22,.15); }
.load-mode-impact:empty { display: none; }

.cat-review-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}
.intensity-review-list { display: flex; flex-direction: column; gap: 6px; }

/* Category review cards */
.cr-top            { border: 1px solid var(--border); border-radius: 6px; overflow: visible; }
.cr-top-header     { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; background: var(--surface2); border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; }
.cr-top-input      { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; outline: none; }
.cr-top-input:focus{ border-color: var(--accent); }
.cr-desc-input     { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; outline: none; }
.cr-desc-input:focus{ border-color: var(--accent); }
.cr-subs           { padding: 6px 12px 8px 24px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); }
.cr-sub-row        { display: flex; align-items: center; gap: 6px; }
.cr-sub-input      { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; outline: none; }
.cr-sub-input:focus{ border-color: var(--accent); }
.cr-del-btn        { flex-shrink: 0; font-size: 11px; padding: 2px 7px; border: 1px solid var(--danger-dark); color: var(--danger-light); border-radius: 3px; background: transparent; cursor: pointer; }
.cr-add-sub        { font-size: 10px; padding: 2px 8px; border: 1px solid var(--green-dark); color: rgba(82,199,122,.53); border-radius: 3px; background: transparent; cursor: pointer; margin-top: 2px; }
.cr-drag-handle    { cursor: grab; color: var(--muted); font-size: 13px; padding: 0 3px; flex-shrink: 0; user-select: none; line-height: 1; }
.cr-drag-handle:active{ cursor: grabbing; }
.cr-top.drag-over  { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--accent-dim); }
.cr-top.dragging   { opacity: .4; }
.cr-sub-row.dragging    { opacity: .4; }
.cr-sub-row.drag-over-sub{ border-top: 2px solid var(--accent); }
.cr-sub-arrow      { flex-shrink: 0; font-size: 10px; padding: 1px 5px; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; background: transparent; cursor: pointer; line-height: 1.4; }
.cr-top-arrows     { display: flex; gap: 3px; flex-shrink: 0; }

/* Intensity review rows */
.ir-row         { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.ir-color-input { width: 28px; height: 22px; padding: 0 2px; border: 1px solid var(--border); border-radius: 3px; background: none; cursor: pointer; flex-shrink: 0; }
.ir-level       { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--accent); width: 18px; }
.ir-name-input  { width: 130px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; outline: none; flex-shrink: 0; }
.ir-name-input:focus{ border-color: var(--accent); }
.ir-desc-input  { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; outline: none; }
.ir-desc-input:focus{ border-color: var(--accent); }

/* Intensity orphan resolution modal */
.int-orphan-options       { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.int-orphan-radio         { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text); }
.int-orphan-radio input   { margin-top: 2px; flex-shrink: 0; }
.int-orphan-radio span    { line-height: 1.5; }
.int-orphan-radio strong  { color: var(--accent); }

/* Tags list */
.tags-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.tag-add-row { display: flex; gap: 8px; align-items: center; padding-top: 10px; }
.tag-add-row--border { border-top: 1px solid var(--border); margin-top: 10px; }
.max-tags-row   { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; margin-top: 10px; font-size: 11px; }
.max-tags-label { color: var(--muted); flex: 1; }
.max-tags-input {
  width:         54px;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     12px;
  padding:       3px 7px;
  outline:       none;
  text-align:    center;
}
.max-tags-input:focus { border-color: var(--accent); }
.color-picker {
  width:         32px;
  height:        30px;
  padding:       2px;
  border:        1px solid var(--border);
  border-radius: 4px;
  background:    var(--surface2);
  cursor:        pointer;
  flex-shrink:   0;
}

/* ── Palette colour picker ── */
.pal-wrap          { position: relative; display: inline-flex; align-items: center; align-self: center; flex-shrink: 0; vertical-align: middle; }
.pal-swatch        { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); cursor: pointer; box-shadow: 0 0 0 1px var(--border); transition: box-shadow .15s; }
.pal-swatch:hover  { box-shadow: 0 0 0 2px var(--accent); }
.pal-dropdown      { display: none; position: fixed; z-index: 400;
                     background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
                     padding: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.35); width: max-content; }
.pal-dropdown.open { display: block; }
.pal-grid          { display: grid; grid-template-columns: repeat(6, 20px); gap: 3px; }
.pal-cell          { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s, border-color .1s; }
.pal-cell:hover    { transform: scale(1.15); border-color: rgba(255,255,255,.4); }
.pal-cell.active   { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pal-custom-row    { display: flex; align-items: center; justify-content: center; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.pal-custom-btn    { font-size: 11px; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; }
.pal-custom-btn:hover { color: var(--accent); }

/* Tag review rows — hierarchical tree */
.tag-review-rows     { display: flex; flex-direction: column; gap: 4px; }
.tr-tag-row          { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; }
.tr-tag-row--parent  { border-width: 2px; background: var(--surface2); }
.tr-tag-row--child   { margin-left: 24px; border-left: 3px solid var(--border); border-radius: 0 5px 5px 0; padding-left: 10px; background: var(--bg); }
.tr-child-indent     { color: var(--muted); font-size: 12px; flex-shrink: 0; line-height: 1; }
.tr-name-input       { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; outline: none; min-width: 0; }
.tr-name-input--parent { font-weight: 600; }
.tr-name-input:focus { border-color: var(--accent); }
.tr-desc             { font-size: 10px; color: var(--muted); flex-shrink: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-child-count      { font-size: 9px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.tr-swatch           { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,.15); cursor: pointer; }
.tr-color-input      { width: 28px; height: 26px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface2); cursor: pointer; flex-shrink: 0; }
.tr-del-btn          { font-size: 10px; padding: 2px 7px; border: 1px solid var(--danger-dark); color: var(--danger); border-radius: 3px; background: transparent; cursor: pointer; flex-shrink: 0; }
.tr-add-child-btn    { font-size: 10px; padding: 2px 7px; border: 1px solid var(--accent); color: var(--accent); border-radius: 3px; background: transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tr-add-child-btn:hover { background: var(--accent); color: var(--bg); }
.tr-promote-btn      { font-size: 10px; padding: 2px 7px; border: 1px solid var(--muted); color: var(--muted); border-radius: 3px; background: transparent; cursor: pointer; flex-shrink: 0; }
.tr-promote-btn:hover{ color: var(--accent); border-color: var(--accent); }

/* ─── Analyse confirm modal ─── */
.analyse-panel-label  { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px; display: flex; align-items: center; gap: 4px; }

.api-key-wrap      { margin-top: 8px; }
.api-key-row       { display: flex; gap: 6px; align-items: center; }
.api-key-input {
  flex:          1;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       5px 9px;
  outline:       none;
}
.api-key-input:focus{ border-color: var(--accent); }
.api-key-input:disabled{ opacity: .4; cursor: not-allowed; }
.api-key-toggle    { font-size: 10px; padding: 5px 8px; white-space: nowrap; }
.api-key-hint      { font-size: 10px; color: var(--muted); margin-top: 5px; line-height: 1.6; }

.analyse-select {
  width:          100%;
  background:     var(--bg);
  border:         1px solid var(--border);
  border-radius:  4px;
  color:          var(--text);
  font-family:    var(--font-mono);
  font-size:      11px;
  padding:        6px 9px;
  outline:        none;
  cursor:         pointer;
  appearance:     none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ca3af'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.analyse-select:focus { border-color: var(--accent); }
.analyse-select option { background: var(--surface); color: var(--text); }
.analyse-select--small { width: auto; min-width: 140px; font-size: 10px; padding: 4px 24px 4px 7px; }

/* ─── Toggle switch ─── */
.ua-toggle             { display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.ua-toggle input       { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.ua-toggle-track       { width: 28px; height: 15px; border-radius: 8px; background: var(--border); transition: background .2s; position: relative; flex-shrink: 0; }
.ua-toggle-track::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); transition: transform .2s; }
.ua-toggle:has(input:checked) .ua-toggle-track            { background: var(--accent); }
.ua-toggle:has(input:checked) .ua-toggle-track::after     { transform: translateX(13px); }

/* ─── Pipeline: aspect rows ─── */
.ua-aspect          { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 5px; overflow: hidden; }
.ua-aspect-head     { display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: var(--surface2); flex-wrap: wrap; min-height: 36px; }
.ua-aspect-name     { font-family: var(--font-serif); font-size: 13px; color: var(--text); flex: 1; min-width: 0; }
.ua-aspect-hint     { font-size: 10px; color: var(--muted); margin-left: auto; }
.ua-aspect-opts     { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.ua-aspect-chevron  { font-size: 9px; color: var(--muted); padding: 2px 4px; cursor: pointer; flex-shrink: 0; display: inline-block; transition: transform .2s, color .15s; user-select: none; }
.ua-aspect-chevron:hover { color: var(--text); }
.ua-aspect--open .ua-aspect-chevron { transform: rotate(90deg); color: var(--accent); }
.ua-aspect-body     { display: none; padding: 10px 13px 12px; border-top: 1px solid var(--border); background: var(--bg); }
.ua-aspect--open .ua-aspect-body   { display: block; }
.ua-aspect.ua-disabled .ua-aspect-body { opacity: .35; pointer-events: none; }
.ua-aspect.ua-disabled .ua-toggle-track { background: var(--border) !important; }

/* ─── Config: collapsible cards ─── */
.ua-card            { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
.ua-card-head       { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--surface2); cursor: pointer; user-select: none; }
.ua-card-head:hover { background: var(--surface); }
.ua-card-title      { font-family: var(--font-serif); font-size: 13px; flex: 1; }
.ua-card-body       { display: none; padding: 10px 13px 12px; border-top: 1px solid var(--border); background: var(--bg); }
.ua-card--open .ua-card-body { display: block; }
.ua-chevron         { font-size: 9px; color: var(--muted); display: inline-block; transition: transform .2s; }
.ua-card--open .ua-chevron  { transform: rotate(90deg); color: var(--accent); }

/* ─── Shared notes ─── */
.ua-section-note    { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.ua-section-note--warn { color: var(--orange); display: none; }

/* ─── Tab bar ─── */
.ua-tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.ua-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ua-tab-btn:hover { color: var(--text); }
.ua-tab-btn--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ─── Tab panels ─── */
.ua-tab-panel { display: none; }
.ua-tab-panel--active { display: block; }

/* Mode row (Suggest / Use current) */
.ua-mode-row        { display: flex; align-items: center; gap: 6px; }
.ua-mode-option     { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); cursor: pointer; padding: 3px 8px; border: 1px solid var(--border); border-radius: 3px; }
.ua-mode-option:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.ua-mode-option:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.ua-mode-option input { accent-color: var(--accent); margin: 0; }

/* Scope row */
.ua-scope-row       { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.ua-scope-label     { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.ua-scope-option    { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); cursor: pointer; }
.ua-scope-option input { accent-color: var(--accent); margin: 0; }
.ua-max-tags        { font-size: 10px; color: var(--muted); margin-left: auto; display: flex; align-items: center; gap: 4px; }
.max-tags-input     { width: 48px; text-align: center; font-size: 11px; padding: 3px 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; color: var(--accent); }
.max-tags-input:focus { border-color: var(--accent); }

/* Prompt row */
.ua-prompt-row      { display: flex; align-items: flex-start; gap: 4px; }
.ua-prompt-row .analyse-hint-ta { margin-top: 0; }

/* Embedding config section */
.emb-config-row     { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-end; }
.emb-config-field   { flex: 1; }
.emb-config-field--key { flex: 1.3; }
.btn-config         { padding: 6px 14px; font-size: 11px; white-space: nowrap; }
.btn-config:disabled { opacity: .35; cursor: not-allowed; }

/* Tier checkboxes (semantic dedup) */
.ua-tier-row        { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.ua-tier-option     { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text); cursor: pointer; }
.ua-tier-option input { accent-color: var(--accent); }

/* Sensitivity slider */
.ua-slider-row      { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ua-slider-label    { font-size: 10px; color: var(--muted); min-width: 80px; display: flex; align-items: center; gap: 3px; }
.ua-slider-label--sub { min-width: 110px; padding-left: 8px; }
.ua-slider          { flex: 1; accent-color: var(--accent); }
.ua-slider-val      { font-size: 11px; color: var(--text); min-width: 34px; text-align: right; font-family: var(--font-mono); }

/* Labeled sensitivity slider (embedding dedup) */
.ua-sensitivity__track      { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ua-sensitivity__track input[type="range"] { flex: 1; }
.ua-sensitivity__badge      { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); white-space: nowrap; }
.ua-sensitivity__desc       { font-size: 10px; color: var(--muted); margin: 2px 0 6px; }
.ua-sensitivity__labels     { display: flex; gap: 4px; }
.ua-sensitivity__label      { flex: 1; text-align: center; padding: 4px 0; border-radius: 6px; border: 1px solid var(--border); font-size: 10px; font-family: var(--font-mono); cursor: pointer; background: transparent; color: var(--muted); transition: all 0.15s; }

/* Info button (tooltip trigger) */
.info-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  width:          15px;
  height:         15px;
  border-radius:  50%;
  border:         1px solid var(--border);
  background:     var(--surface2);
  color:          var(--muted);
  font-size:      9px;
  font-weight:    700;
  font-style:     italic;
  font-family:    serif;
  cursor:         pointer;
  padding:        0;
  flex-shrink:    0;
  line-height:    1;
  vertical-align: middle;
}
.info-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim) !important; }

/* Info tooltip */
.info-tooltip {
  position:       absolute;
  z-index:        300;
  max-width:      260px;
  padding:        8px 10px;
  background:     var(--surface);
  border:         1px solid var(--accent);
  border-radius:  5px;
  font-size:      10px;
  color:          var(--text);
  line-height:    1.5;
  box-shadow:     0 4px 16px rgba(0,0,0,.4);
  pointer-events: none;
}

/* Model override dropdown in header */
.ua-model-override  { margin-left: auto; }

.analyse-hint-ta {
  width:         100%;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       7px 10px;
  resize:        none;
  overflow:      hidden;
  outline:       none;
  line-height:   1.5;
  box-sizing:    border-box;
  min-height:    32px;
  margin-top:    7px;
}
.analyse-hint-ta:focus{ border-color: var(--accent); }

/* Attribute read-only preview chips */
.ua-attr-current    { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ua-attr-chip       { font-size: 10px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); white-space: nowrap; }

/* Retry settings rows */
.retry-row          { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.retry-row:last-child { margin-bottom: 0; }
.retry-label        { font-size: 10px; color: var(--muted); width: 130px; flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.retry-slider       { flex: 1; accent-color: var(--accent); cursor: pointer; }
.retry-value        { font-size: 11px; color: var(--accent); width: 38px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.retry-row--toggle .retry-label { width: auto; flex: 1; }
.retry-row--toggle input[type=checkbox] { accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer; }


/* ── 5. BUTTONS — base styles & hover overrides ── */

/* Base */
button {
  font-family:    var(--font-mono);
  font-size:      11px;
  padding:        5px 11px;
  border:         1px solid var(--border);
  border-radius:  4px;
  cursor:         pointer;
  background:     var(--surface2);
  color:          var(--text);
  transition:     all .15s;
  letter-spacing: .03em;
}
button:disabled { opacity: .35; cursor: default; }

.btn-danger  { border-color: var(--danger-dark)  !important; color: var(--danger-light) !important; }
.btn-delete  { background: var(--danger)  !important; color: #fff !important; border-color: var(--danger)  !important; font-weight: 500; }
.btn-raw-json{
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  border-color:   var(--border);
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      11px;
  padding:        4px 10px;
  border-radius:  var(--radius);
  transition:     all 0.2s ease;
}
.btn-raw-json .toggle-dot {
  width:          8px;
  height:         8px;
  border-radius:  50%;
  background:     var(--muted);
  opacity:        0.4;
  transition:     all 0.2s ease;
}
.btn-raw-json--active {
  border-color:   var(--accent);
  color:          var(--accent);
  background:     color-mix(in srgb, var(--accent) 8%, transparent);
}
.btn-raw-json--active .toggle-dot {
  background:     var(--accent);
  opacity:        1;
  box-shadow:     0 0 6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.btn-file    { border-color: var(--blue); color: var(--blue); }
.btn-green   { border-color: var(--green) !important; color: var(--green) !important; }
.btn-analyse {
  background:    linear-gradient(135deg, var(--purple), var(--purple-light)) !important;
  color:         #fff !important;
  border-color:  var(--purple) !important;
  font-weight:   500;
  padding:       5px 16px;
}

/* Hover overrides — specific beats general */
button:not(:disabled):hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-dim) !important; }
.btn-delete:not(:disabled):hover  { border-color: var(--danger) !important; color: #fff !important; background: var(--danger) !important; }
.btn-file:not(:disabled):hover    { border-color: #93c5fd !important; color: #93c5fd !important; background: rgba(96,165,250,.1) !important; }
.btn-green:not(:disabled):hover   { background: rgba(82,199,122,.12) !important; border-color: #6ee89a !important; color: var(--green) !important; }
.btn-danger:not(:disabled):hover  { border-color: var(--danger) !important; color: var(--danger) !important; background: rgba(224,82,82,.1) !important; }
.btn-analyse:not(:disabled):hover { background: linear-gradient(135deg,#6d28d9,#9370db) !important; color: #fff !important; border-color: #6d28d9 !important; }
.btn-save:not(:disabled):hover    { background: var(--green) !important; color: #000 !important; border-color: var(--green) !important; }
.btn-cancel:not(:disabled):hover  { border-color: var(--danger) !important; color: var(--danger) !important; background: rgba(224,82,82,.06) !important; }
.btn-apply:not(:disabled):hover   { background: var(--accent) !important; color: #000 !important; }
.btn-abort:not(:disabled):hover   { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }
.btn-progress-done:not(:disabled):hover{ background: var(--green) !important; color: #000 !important; }
.btn-purple:not(:disabled):hover  { border-color: var(--purple-light) !important; color: var(--purple-light) !important; background: rgba(167,139,250,.1) !important; }
.sr-tab:not(:disabled):hover      { border-color: transparent !important; border-bottom-color: var(--accent) !important; color: var(--accent) !important; background: transparent !important; }
.cr-add-sub:not(:disabled):hover  { border-color: var(--green) !important; color: var(--green) !important; }
.cr-del-btn:not(:disabled):hover  { border-color: var(--danger) !important; color: var(--danger) !important; }
.cr-sub-arrow:not(:disabled):hover{ border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-dim) !important; }
.tr-del-btn:not(:disabled):hover  { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }
.info-btn:not(:disabled):hover    { border-color: var(--accent) !important; color: var(--accent) !important; }
.tab-btn:not(:disabled):hover     { border-color: transparent !important; color: var(--text) !important; background: transparent !important; }


/* ── 6. ANIMATIONS ── */

.hidden { display: none !important; }

@keyframes flashOut {
  0%   { opacity: 1; background: rgba(224,82,82,.25); }
  100% { opacity: 0; max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}
.deleted-flash { animation: flashOut .4s ease forwards; }


/* ── 7. RESPONSIVE ── */

@media (max-width: 768px) {
  .editor-header   { padding: 12px 16px; }
  .toolbar         { padding: 8px 16px; }
  .search-bar      { padding: 10px 16px 0; }
  main#main        { padding: 12px 16px; }
  .meta-grid       { grid-template-columns: 1fr; }
  .emb-config-row  { flex-direction: column; }
  .cat-review-grid { grid-template-columns: 1fr; }
  .header-stats    { display: none; }
}


/* ── 8. BLUEPRINT BUILDER ── */

/* ─── View transitions ─── */
.bp-view-hidden {
  display: none !important;
}

/* ─── List view ─── */
.bp-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-top:     4px;
}

.bp-list-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 14px;
  border:        1px solid var(--border);
  border-radius: 6px;
  background:    var(--surface2);
  cursor:        pointer;
  transition:    border-color .15s, background .15s;
}
.bp-list-item:hover         { border-color: var(--accent); background: var(--accent-dim); }
.bp-list-item--active       { border-color: var(--green);  background: rgba(82,199,122,.07); }

.bp-list-name {
  flex:        1;
  font-size:   13px;
  font-family: var(--font-serif);
  font-weight: 600;
  color:       var(--text);
}
.bp-list-meta {
  font-size:  10px;
  color:      var(--muted);
  white-space:nowrap;
}
.bp-list-active-badge {
  font-size:    9px;
  padding:      2px 7px;
  border-radius:3px;
  background:   rgba(82,199,122,.15);
  color:        var(--green);
  border:       1px solid rgba(82,199,122,.3);
  font-weight:  500;
  white-space:  nowrap;
}
.bp-list-empty {
  font-size:  12px;
  color:      var(--muted);
  padding:    20px 0;
  text-align: center;
}

/* ─── Blueprint cards (list view) ─── */
.bp-empty {
  font-size:  0.8rem;
  color:      var(--muted);
  padding:    24px 0;
  text-align: center;
}

.bp-card {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       14px 18px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-left:   3px solid transparent;
  border-radius: 8px;
  transition:    all 0.15s;
  cursor:        pointer;
}
.bp-card:hover {
  border-color:      var(--accent);
  border-left-color: var(--accent);
  background:        var(--accent-dim);
}
.bp-card.active {
  border-left-color: var(--green);
  background:        rgba(82, 199, 122, 0.05);
}
.bp-card.active:hover { border-color: var(--green); }

.bp-card-info { flex: 1; min-width: 0; }

.bp-card-name {
  font-size:   0.92rem;
  font-weight: 600;
  color:       var(--text);
  display:     flex;
  align-items: center;
  gap:         8px;
}

.bp-active-badge {
  font-size:      0.6rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--green);
  background:     rgba(82, 199, 122, 0.12);
  padding:        2px 8px;
  border-radius:  10px;
  border:         1px solid rgba(82, 199, 122, 0.25);
}

.bp-card-meta {
  font-size:  0.72rem;
  color:      var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.bp-card-actions {
  display:    flex;
  gap:        6px;
  opacity:    0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.bp-card:hover .bp-card-actions { opacity: 1; }

.bp-card-btn {
  font-size:     0.7rem;
  padding:       4px 10px;
  border:        1px solid var(--border);
  border-radius: 5px;
  background:    var(--surface);
  color:         var(--muted);
  cursor:        pointer;
  transition:    all 0.12s;
}
.bp-card-btn:hover        { color: var(--accent); border-color: var(--accent); }
.bp-card-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

/* ─── Editor view layout ─── */
.bp-header-row {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.bp-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      160px;
}
.bp-field--grow { flex: 1; }

.bp-row {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ─── Section labels ─── */
.bp-section-label {
  font-size:      9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--muted);
  margin:         14px 0 6px;
  display:        flex;
  align-items:    center;
  gap:            8px;
}
.bp-section-label::after {
  content:    "";
  flex:       1;
  height:     1px;
  background: var(--border);
}
.bp-section-hint {
  font-size:  9px;
  color:      var(--muted);
  font-weight:normal;
  text-transform:none;
  letter-spacing:0;
}

.bp-collection-warn {
  font-size:    11px;
  color:        var(--orange);
  background:   rgba(249,115,22,.07);
  border:       1px solid rgba(249,115,22,.25);
  border-radius:4px;
  padding:      6px 10px;
  margin-bottom:8px;
}

.bp-match-count {
  font-family:  var(--font-mono);
  font-size:    10px;
  color:        var(--accent);
  font-weight:  normal;
  text-transform:none;
  letter-spacing:0;
  margin-left:  4px;
}

/* ─── Accordion filter sections ─── */
.bp-accordion {
  border:        1px solid var(--border);
  border-radius: 6px;
  overflow:      hidden;
  margin-bottom: 5px;
  transition:    border-color .15s;
}
.bp-accordion:hover { border-color: rgba(201,168,76,.2); }

.bp-accordion-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     9px 12px;
  background:  var(--surface2);
  cursor:      pointer;
  user-select: none;
  transition:  background .12s;
}
.bp-accordion-header:hover { background: var(--surface3); }

.bp-accordion-chevron {
  font-size:  9px;
  color:      var(--muted);
  transition: transform .2s ease;
  flex-shrink:0;
  width:      12px;
}
.bp-accordion.open .bp-accordion-chevron { transform: rotate(90deg); }

.bp-accordion-title {
  flex:        1;
  font-size:   12px;
  font-weight: 500;
  color:       var(--text);
}

.bp-accordion-badge {
  font-size:    9px;
  font-family:  var(--font-mono);
  color:        var(--accent);
  background:   var(--accent-dim);
  border:       1px solid rgba(201,168,76,.15);
  padding:      2px 8px;
  border-radius:10px;
  white-space:  nowrap;
}

.bp-accordion-body {
  max-height: 0;
  overflow:   hidden;
  padding:    0 12px;
  background: var(--surface);
  transition: max-height .3s ease, padding .3s ease;
}
.bp-accordion.open .bp-accordion-body {
  max-height: 320px;
  padding:    10px 12px;
  border-top: 1px solid var(--border);
}

.bp-accordion-sub-label {
  font-size:      9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--muted);
  margin-bottom:  5px;
}

.bp-intensity-row {
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* ─── Radio group ─── */
.bp-radio-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  padding:   6px 0;
}
.bp-radio {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   11px;
  color:       var(--text);
  cursor:      pointer;
}
.bp-radio input { accent-color: var(--accent); margin: 0; }

/* ─── Chip groups (filter toggles) ─── */
.bp-chip-group {
  display:     flex;
  flex-wrap:   wrap;
  gap:         5px;
  min-height:  28px;
  padding:     4px 6px;
  background:  var(--surface2);
  border:      1px solid var(--border);
  border-radius:4px;
}
.bp-tag-group       { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.bp-chip--parent    { font-weight: 600; }
.bp-chip {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      2px 9px;
  border-radius:20px;
  font-size:    10px;
  font-family:  var(--font-mono);
  cursor:       pointer;
  border:       1px solid var(--border);
  background:   var(--bg);
  color:        var(--muted);
  transition:   all .15s;
  user-select:  none;
  white-space:  nowrap;
}
.bp-chip:hover          { border-color: var(--accent); color: var(--accent); }
.bp-chip.active         { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.bp-chip-check {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      2px 8px;
  border-radius:20px;
  font-size:    10px;
  cursor:       pointer;
  border:       1px solid var(--border);
  background:   var(--bg);
  color:        var(--muted);
  transition:   all .15s;
  user-select:  none;
}
.bp-chip-check:has(input:checked) {
  border-color: var(--accent);
  color:        var(--accent);
  background:   var(--accent-dim);
}
.bp-chip-check input {
  accent-color: var(--accent);
  margin:       0;
  width:        11px;
  height:       11px;
}

/* ─── Game rounds list ─── */
.bp-levels-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  8px;
}

.bp-level-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 10px;
  border:        1px solid var(--border);
  border-radius: 5px;
  background:    var(--surface2);
}
.bp-level-row.bp-level-drag-over { border-top: 2px solid var(--accent); }
.bp-level-row.bp-level-dragging  { opacity: .4; }

.bp-level-drag {
  cursor:      grab;
  color:       var(--border);
  font-size:   14px;
  padding:     0 2px;
  user-select: none;
  flex-shrink: 0;
}
.bp-level-drag:hover  { color: var(--accent); }
.bp-level-drag:active { cursor: grabbing; }

.bp-level-num {
  flex-shrink: 0;
  font-size:   10px;
  color:       var(--muted);
  min-width:   16px;
  text-align:  center;
}

.bp-level-select {
  flex:          1;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: 3px;
  color:         var(--text);
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       4px 8px;
  outline:       none;
  cursor:        pointer;
}
.bp-level-select:focus { border-color: var(--accent); }

.bp-level-del {
  flex-shrink:  0;
  font-size:    10px;
  padding:      2px 7px;
  border:       1px solid var(--danger-dark);
  color:        var(--danger-light);
  border-radius:3px;
  background:   transparent;
  cursor:       pointer;
}
.bp-level-del:hover {
  border-color: var(--danger) !important;
  color:        var(--danger) !important;
  background:   rgba(224,82,82,.07) !important;
}

.bp-add-level-btn {
  width:    100%;
  padding:  6px 0;
  font-size:11px;
}

/* ─── Live preview ─── */
.bp-preview {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: 5px;
  padding:       10px 12px;
  max-height:    220px;
  overflow-y:    auto;
  font-family:   var(--font-mono);
  font-size:     11px;
}

.bp-preview-empty {
  color:      var(--muted);
  font-size:  11px;
  text-align: center;
  padding:    16px 0;
}
.bp-preview-empty.warn { color: var(--orange); }

.bp-preview-flat {
  color:     var(--muted);
  font-size: 11px;
  padding:   10px 0;
}

.bp-preview-perf-warn {
  font-size:     10px;
  color:         var(--orange);
  background:    rgba(249,115,22,.08);
  border:        1px solid rgba(249,115,22,.25);
  border-radius: 4px;
  padding:       5px 8px;
  margin-bottom: 8px;
}

.bp-preview-totals {
  font-size:   10px;
  color:       var(--muted);
  padding-top: 8px;
  border-top:  1px solid var(--border);
  margin-top:  6px;
}

.bp-preview-node {
  display:     flex;
  align-items: center;
  gap:         5px;
  padding:     2px 0;
  color:       var(--text);
  line-height: 1.5;
}
.bp-preview-node--leaf   { padding-left: 14px; color: var(--muted); }
.bp-preview-node--warn   { color: var(--orange); }
.bp-preview-node--count  {
  font-size:  9px;
  color:      var(--muted);
  background: var(--surface2);
  padding:    1px 6px;
  border-radius:10px;
  margin-left:4px;
  white-space:nowrap;
}

/* ─── Tree view (VS Code style) ─── */
.tree-node { position: relative; }

.tree-node-header {
  display:     flex;
  align-items: center;
  gap:         0;
  padding:     3px 6px;
  border-radius: 4px;
  cursor:      pointer;
  transition:  background 0.1s;
  user-select: none;
}
.tree-node-header:hover { background: var(--surface2); }

.tree-indent {
  display:     inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}

.tree-guide {
  width:      20px;
  position:   relative;
  flex-shrink: 0;
}
/* Vertical line for non-last siblings */
.tree-guide.line::before {
  content:    "";
  position:   absolute;
  left:       8px;
  top:        0;
  bottom:     0;
  width:      1px;
  background: var(--border);
}
/* Branch connector */
.tree-guide.branch::before {
  content:    "";
  position:   absolute;
  left:       8px;
  top:        0;
  height:     50%;
  width:      1px;
  background: var(--border);
}
.tree-guide.branch::after {
  content:    "";
  position:   absolute;
  left:       8px;
  top:        50%;
  width:      10px;
  height:     1px;
  background: var(--border);
}
/* Last branch connector */
.tree-guide.branch-last::before {
  content:    "";
  position:   absolute;
  left:       8px;
  top:        0;
  height:     50%;
  width:      1px;
  background: var(--border);
}
.tree-guide.branch-last::after {
  content:    "";
  position:   absolute;
  left:       8px;
  top:        50%;
  width:      10px;
  height:     1px;
  background: var(--border);
}

.tree-chevron {
  width:      16px;
  font-size:  0.6rem;
  color:      var(--muted);
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.tree-node.expanded > .tree-node-header .tree-chevron { transform: rotate(90deg); }

.tree-icon {
  font-size:  0.82rem;
  width:      20px;
  text-align: center;
  flex-shrink: 0;
}

.tree-label {
  font-size:     0.78rem;
  color:         var(--text);
  flex:          1;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.tree-count {
  font-size:     0.65rem;
  color:         var(--muted);
  padding:       1px 7px;
  background:    var(--surface2);
  border-radius: 8px;
  margin-left:   6px;
  flex-shrink:   0;
}

.tree-warn {
  font-size:   0.72rem;
  color:       var(--orange);
  margin-left: 4px;
}

.tree-auto-skip {
  font-size:     0.58rem;
  color:         var(--muted);
  background:    var(--surface3);
  padding:       1px 6px;
  border-radius: 8px;
  margin-left:   4px;
}

.tree-children {
  overflow:   hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.tree-node.expanded > .tree-children { max-height: 4000px; }

/* Leaf question rows */
.tree-leaf {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     2px 6px 2px 0;
  margin-left: 56px;
  font-size:   0.7rem;
  color:       var(--muted);
  border-radius: 3px;
  transition:  background 0.1s;
}
.tree-leaf:hover { background: var(--surface2); }

.tree-leaf-id {
  font-family: var(--font-mono);
  font-size:   0.62rem;
  color:       var(--accent);
  opacity:     0.6;
  flex-shrink: 0;
}
.tree-leaf-text {
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  flex:          1;
}
.tree-leaf-badge {
  font-size:     0.58rem;
  padding:       1px 5px;
  border-radius: 6px;
  flex-shrink:   0;
}

.tree-more {
  margin-left: 56px;
  font-size:   0.68rem;
  color:       var(--accent);
  cursor:      pointer;
  padding:     3px 0;
  opacity:     0.7;
}
.tree-more:hover { opacity: 1; text-decoration: underline; }

.tree-totals {
  margin-top:  12px;
  padding-top: 10px;
  border-top:  1px solid var(--border);
  font-size:   0.72rem;
  color:       var(--muted);
  display:     flex;
  gap:         16px;
}
.tree-totals strong { color: var(--text); font-weight: 600; }

/* ─── Preview header + toggle ─── */
.bp-preview-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin:          20px 0 12px;
}

.bp-preview-label {
  font-size:      0.72rem;
  font-weight:    600;
  color:          var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bp-preview-toggle {
  display:       flex;
  border:        1px solid var(--border);
  border-radius: 6px;
  overflow:      hidden;
}

.bp-toggle-btn {
  font-family: var(--font-sans);
  font-size:   0.68rem;
  padding:     5px 12px;
  border:      none;
  background:  transparent;
  color:       var(--muted);
  cursor:      pointer;
  transition:  background 0.15s, color 0.15s;
}
.bp-toggle-btn:hover  { background: var(--surface2); color: var(--text); }
.bp-toggle-btn.active { background: var(--surface2); color: var(--text); font-weight: 600; }

/* ─── Preview container + view panels ─── */
.bp-preview-container {
  border:        1px solid var(--border);
  border-radius: 5px;
  padding:       10px 12px;
  max-height:    340px;
  overflow-y:    auto;
}

.bp-preview-view          { display: none; }
.bp-preview-view.active   { display: block; animation: fadeIn 0.2s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── Game flow view ─── */
.flow-rounds { display: flex; flex-direction: column; align-items: center; gap: 0; }

.flow-round {
  width:         100%;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent);
  border-radius: 8px;
  padding:       12px 16px;
  transition:    border-color 0.15s;
}
.flow-round:hover { border-color: var(--accent); }

.flow-round-label {
  font-size:      0.68rem;
  font-weight:    600;
  color:          var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom:  10px;
}

.flow-options {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
}

.flow-pill {
  font-size:     0.75rem;
  padding:       6px 14px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 18px;
  color:         var(--text);
  display:       flex;
  align-items:   center;
  gap:           6px;
  transition:    all 0.12s;
}
.flow-pill:hover { border-color: var(--accent); background: var(--accent-dim); }

.flow-pill-count {
  font-size:     0.62rem;
  color:         var(--muted);
  background:    var(--bg);
  padding:       1px 6px;
  border-radius: 8px;
}

.flow-pill.dead {
  color:      var(--danger);
  border-color: rgba(224, 82, 82, 0.3);
  background: rgba(224, 82, 82, 0.05);
}
.flow-pill.dead .flow-pill-count { color: var(--danger); }

.flow-pill.auto-skip { opacity: 0.5; font-style: italic; }

.flow-arrow {
  color:     var(--accent);
  font-size: 1.2rem;
  padding:   6px 0;
  opacity:   0.4;
  text-align: center;
}

.flow-result {
  width:         100%;
  text-align:    center;
  padding:       14px;
  background:    var(--accent-dim);
  border:        1px dashed rgba(201, 168, 76, 0.25);
  border-radius: 8px;
  font-size:     0.78rem;
  color:         var(--accent);
}

.flow-totals {
  margin-top: 12px;
  text-align: center;
  font-size:  0.72rem;
  color:      var(--muted);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .bp-header-row { flex-direction: column; }
  .bp-row        { flex-direction: column; }
  .flow-options  { gap: 6px; }

  /* Accordion: stack controls full-width */
  .bp-accordion-body { padding: 8px 10px; }
  .bp-chip-group     { gap: 5px; }
  .bp-chip,
  .bp-chip-check     { font-size: 10px; padding: 4px 8px; }

  /* Tree: reduce indent depth on narrower screens */
  .tree-guide  { width: 14px; }
  .tree-indent { min-width: 0; }
  .tree-leaf,
  .tree-more   { margin-left: 36px; }

  /* Flow pills: wrap tightly */
  .flow-pill   { padding: 4px 10px; font-size: 0.7rem; }
  .flow-options { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  /* Accordion: full-width chips wrap onto their own lines */
  .bp-chip,
  .bp-chip-check { width: 100%; justify-content: flex-start; }

  /* Tree: minimal indent, leaf rows use less space */
  .tree-guide        { width: 10px; }
  .tree-leaf,
  .tree-more         { margin-left: 20px; }
  .tree-node-header  { padding: 4px 6px; }
  .tree-leaf         { font-size: 0.65rem; }
  .tree-leaf-id      { display: none; }   /* hide ID badge on very small screens */

  /* Totals row: wrap */
  .tree-totals { flex-wrap: wrap; gap: 8px; }

  /* Flow pills: stack */
  .flow-pill   { padding: 4px 8px; font-size: 0.65rem; }
}


/* ── 9. TRANSLATION PANEL (add/modify modals) ── */

.trans-panel {
  margin-top:    12px;
  border:        1px solid var(--border);
  border-radius: 6px;
  overflow:      hidden;
}

.trans-panel-header {
  display:     flex;
  align-items: center;
  padding:     8px 12px;
  cursor:      pointer;
  background:  var(--surface2);
  user-select: none;
}
.trans-panel-header:hover { background: rgba(255,255,255,.06); }

.trans-panel-title {
  font-size:   11px;
  font-weight: 600;
  color:       var(--text2);
  display:     flex;
  align-items: center;
  gap:         6px;
}

.trans-toggle-icon {
  font-size:   9px;
  color:       var(--muted);
}

.trans-count-badge {
  font-size:   10px;
  color:       var(--sky);
  font-weight: 500;
}

.trans-panel-body {
  padding:         10px 12px 12px;
  display:         flex;
  flex-direction:  column;
  gap:             8px;
  background:      var(--bg);
}

.trans-primary-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.trans-label {
  font-size:   11px;
  color:       var(--muted);
  white-space: nowrap;
  min-width:   110px;
}

.trans-primary-select {
  flex:          1;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-size:     11px;
  padding:       4px 8px;
  outline:       none;
  cursor:        pointer;
}
.trans-primary-select:focus { border-color: var(--accent); }

.trans-rows {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.trans-row {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
}

.trans-row-label {
  font-size:   11px;
  color:       var(--text2);
  min-width:   130px;
  padding-top: 5px;
  white-space: nowrap;
}

.trans-row-input {
  flex:          1;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-size:     12px;
  padding:       5px 8px;
  resize:        vertical;
  outline:       none;
  font-family:   var(--font-mono);
  line-height:   1.5;
}
.trans-row-input:focus { border-color: var(--accent); }

.btn-trans-delete {
  flex-shrink:   0;
  padding:       3px 7px;
  font-size:     11px;
  border:        1px solid var(--danger-dark);
  color:         var(--danger-light);
  background:    transparent;
  border-radius: 4px;
  cursor:        pointer;
  margin-top:    2px;
}
.btn-trans-delete:hover { background: rgba(239,68,68,.12); }

.trans-add-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  2px;
}

.trans-add-select {
  flex:          1;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text);
  font-size:     11px;
  padding:       4px 8px;
  outline:       none;
  cursor:        pointer;
}
.trans-add-select:focus { border-color: var(--accent); }

.btn-trans-add {
  padding:       4px 12px;
  font-size:     11px;
  background:    var(--surface2);
  border:        1px solid var(--border);
  border-radius: 4px;
  color:         var(--text2);
  cursor:        pointer;
  white-space:   nowrap;
}
.btn-trans-add:hover { border-color: var(--accent); color: var(--accent); }


/* ── 10. LANGUAGE COVERAGE MODAL ── */

.lc-body {
  margin-top:     8px;
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.lc-section-title {
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--muted);
  margin-bottom:  6px;
}

.lc-rows {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.lc-row {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.lc-row-label {
  font-size:  12px;
  color:      var(--text2);
  min-width:  160px;
  white-space:nowrap;
}

.lc-bar-wrap {
  flex:          1;
  height:        6px;
  background:    var(--surface2);
  border-radius: 3px;
  overflow:      hidden;
}

.lc-bar {
  height:        100%;
  border-radius: 3px;
  transition:    width .3s ease;
}

.lc-row-count {
  font-size:  10px;
  color:      var(--muted);
  min-width:  110px;
  text-align: right;
  white-space:nowrap;
}


/* ── RAW JSON VIEWER (Modify modal) ── */

.raw-json-panel {
  display:        flex;
  flex-direction: column;
  min-height:     0;
  flex:           1;
}

.raw-json-content {
  margin:        0;
  padding:       10px 12px;
  font-family:   'Courier New', Courier, monospace;
  font-size:     11px;
  line-height:   1.5;
  color:         var(--text);
  white-space:   pre-wrap;
  word-break:    break-word;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow-y:    auto;
  flex:          1;
}


/* ── Photo Library Panel ─────────────────────────────────── */

.ph-stats {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface2);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.ph-warn {
  background: #2d1f00;
  border: 1px solid #8b6914;
  color: #fbbf24;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  line-height: 1.5;
}

.ph-warn code {
  background: rgba(0,0,0,.35);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

.ph-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ph-filter-label {
  font-size: 10px;
  color: var(--muted);
  min-width: 54px;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
}

.ph-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ph-tab {
  padding: 4px 13px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.ph-tab:hover {
  background: var(--surface3, #2a2a2a);
  border-color: var(--muted);
}

.ph-tab--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 600;
}

.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.ph-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.ph-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

.ph-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--surface3, #1e1e1e);
}

.ph-card-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px 6px 2px;
}

.ph-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.4;
}

.ph-badge--gender {
  background: #2d3061;
  color: #a5b4fc;
}

.ph-badge--cat {
  background: #1a3a26;
  color: #86efac;
}

.ph-card-footer {
  padding: 4px 6px 8px;
}

.ph-offline-btn {
  width: 100%;
  font-size: 11px;
  padding: 5px 0;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.ph-offline-btn:hover {
  background: var(--surface3, #2a2a2a);
}

.ph-offline-btn--online {
  opacity: 0.55;
}

.ph-empty {
  text-align: center;
  color: var(--muted);
  padding: 36px 0;
  font-size: 14px;
  grid-column: 1 / -1;
}

.ph-actions {
  display: flex;
  gap: 10px;
  margin: 4px 0 20px;
}

.ph-guide-steps {
  color: var(--text);
  font-size: 13px;
  padding-left: 20px;
  margin: 6px 0 10px;
  line-height: 1.7;
}

.ph-guide-steps code {
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--accent);
}

.ph-paths {
  background: var(--surface2);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 4px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ph-paths code {
  font-size: 12px;
  color: var(--accent);
}


/* ── Photo Library v2 — dashboard, pending, modals ─────── */

.ph-health-banner {
  background: #2d1f00;
  border: 1px solid #8b6914;
  color: #fbbf24;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
}

.ph-health-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ph-health-banner--ok {
  background: rgba(60, 190, 140, 0.08);
  border-color: rgba(60, 190, 140, 0.4);
  color: rgba(210, 250, 225, 0.9);
}

.ph-health-header--ok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.ph-health-hint {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.ph-health-dismiss {
  background: transparent;
  border: none;
  color: #fbbf24;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.ph-health-list {
  margin: 8px 0 0;
  padding-left: 20px;
  line-height: 1.6;
}

.ph-health-list code {
  background: rgba(0,0,0,.35);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: #fde68a;
}

.ph-pending-banner {
  background: #1a2e3d;
  border: 1px solid #2d5a80;
  color: #93c5fd;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.ph-pending-text {
  font-size: 13px;
  flex: 1 1 60%;
}

.ph-pending-actions {
  display: flex;
  gap: 8px;
}

.ph-dashboard {
  margin: 14px 0 18px;
}

.ph-dash-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface2);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid var(--border);
}

.ph-dash-row {
  display: grid;
  grid-template-columns: 70px repeat(var(--cat-count, 3), 1fr);
  gap: 4px;
}

.ph-dash-cell {
  padding: 8px 6px;
  border-radius: 6px;
  font-size: 11px;
  text-align: center;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ph-dash-cell--corner,
.ph-dash-cell--head {
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  background: transparent;
  font-size: 10px;
}

.ph-dash-cell--rowhead {
  text-align: left;
  padding-left: 10px;
  align-items: flex-start;
  justify-content: center;
}

.ph-dash-tile {
  background: var(--surface3, #242424);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ph-dash-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 168, 76, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ph-dash-tile--active {
  border-color: var(--accent) !important;
  border-style: solid !important;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25), 0 6px 16px rgba(201, 168, 76, 0.28);
  transform: translateY(-2px);
  z-index: 1;
  position: relative;
}

.ph-dash-tile--active::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface, #1a1a1a), 0 0 6px rgba(201, 168, 76, 0.6);
}

.ph-dash-tile--empty {
  background: linear-gradient(160deg, rgba(60, 60, 66, 0.55) 0%, rgba(40, 40, 46, 0.55) 100%);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  border-style: dashed;
}

.ph-dash-tile--partial {
  background: linear-gradient(160deg, rgba(222, 170, 50, 0.38) 0%, rgba(160, 110, 30, 0.38) 100%);
  color: rgba(255, 235, 175, 1);
  border-color: rgba(222, 170, 50, 0.7);
}

.ph-dash-tile--full {
  background: linear-gradient(160deg, rgba(60, 190, 140, 0.42) 0%, rgba(30, 130, 95, 0.42) 100%);
  color: rgba(210, 250, 225, 1);
  border-color: rgba(60, 190, 140, 0.75);
}

.ph-dash-tile--over {
  background: linear-gradient(160deg, rgba(230, 85, 85, 0.5) 0%, rgba(150, 45, 45, 0.5) 100%);
  color: rgba(255, 220, 220, 1);
  border-color: rgba(230, 85, 85, 0.85);
  animation: ph-pulse 1.6s ease-in-out infinite;
}

@keyframes ph-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}

.ph-dash-gender-icon {
  font-size: 14px;
  margin-right: 4px;
  display: inline-block;
  vertical-align: middle;
}

.ph-dash-capacity {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.ph-dash-sublabel {
  font-size: 9px;
  opacity: 0.75;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ph-dash-showall {
  margin-top: 8px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
}

.ph-dash-showall:hover {
  text-decoration: underline;
}

.ph-label-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ph-label-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ph-label-input {
  flex: 1;
}

.ph-label-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.ph-label-remove:hover:not([disabled]) {
  border-color: #ef4444;
  color: #ef4444;
}

.ph-label-remove[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}

.ph-label-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.ph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}

.ph-toolbar-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ph-toolbar-field select {
  width: auto;
  padding: 4px 10px;
  font-size: 12px;
}

.ph-bulk-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.ph-bulk-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-right: auto;
}

.ph-bulk-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface3, #242424);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

.ph-bulk-btn:hover {
  border-color: var(--accent);
}

.ph-bulk-btn--danger {
  color: #fca5a5;
  border-color: #7f1d1d;
}

.ph-bulk-btn--ghost {
  background: transparent;
  opacity: 0.7;
}

.ph-section {
  margin-top: 18px;
}

.ph-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ph-section-count {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.ph-card {
  position: relative;
}

.ph-card--deleted {
  opacity: 0.5;
  outline: 2px solid #7f1d1d;
  outline-offset: -2px;
}

.ph-card--deleted .ph-card-img {
  filter: grayscale(0.8);
}

.ph-card--new {
  outline: 2px solid #10b981;
  outline-offset: -2px;
}

.ph-card--moved {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.ph-card--modified {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

.ph-card-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  z-index: 2;
}

.ph-card-status {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
}

.ph-card-status--new      { background: #10b981; }
.ph-card-status--deleted  { background: #7f1d1d; }
.ph-card-status--moved    { background: #3b82f6; }
.ph-card-status--modified { background: #f59e0b; color: #000; }

.ph-card-footer {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px 6px 8px;
}

.ph-card-footer .ph-offline-btn {
  flex: 1;
}

.ph-card-icon-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.ph-card-icon-btn:hover {
  color: #ef4444;
  border-color: #7f1d1d;
}

/* Modals */
.ph-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ph-modal[hidden] { display: none !important; }

.ph-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.ph-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ph-modal-close:hover { color: var(--text); }

.ph-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
}

.ph-modal-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 10px 0 4px;
}

.ph-modal-radio-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.ph-modal-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

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

.ph-preview-img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
  margin-bottom: 12px;
}

.ph-preview-meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px 10px;
  font-size: 13px;
  margin: 10px 0;
}

.ph-preview-meta dt {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .05em;
  align-self: center;
}

.ph-preview-meta dd {
  margin: 0;
  color: var(--text);
  word-break: break-all;
}

.ph-preview-meta code {
  font-size: 11px;
  background: var(--surface2);
  padding: 1px 5px;
  border-radius: 3px;
}

.ph-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ph-assign-preview {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.ph-assign-preview img {
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.ph-assign-dims {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin: 0 0 12px;
}

.btn-save--compact {
  padding: 6px 14px;
  font-size: 12px;
}

/* Upload photos — visually distinct from "Add category" (green) */
.btn-upload {
  font-size: 12px;
  padding: 6px 14px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.btn-upload:hover {
  background: var(--accent);
  color: #000;
}

/* Toolbar separator between button groups */
.ph-toolbar-sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 4px 4px;
}

/* Wizard: label row with "Apply to all" button */
.ph-wizard-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.ph-wizard-applyall {
  font-size: 11px;
  padding: 3px 10px;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.ph-wizard-applyall:hover:not(:disabled) {
  background: var(--accent);
  color: #000;
}
.ph-wizard-applyall:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ph-wizard-applyall--active {
  background: var(--accent);
  color: #000;
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.35);
}
.ph-wizard-applyall--active:hover {
  background: rgba(201, 168, 76, 0.85);
  color: #000;
}


/* ── Max bundled row ─────────────────────────────── */

.ph-maxbundled-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
  flex-wrap: wrap;
}

.ph-maxbundled-row .settings-input--short {
  width: 70px;
  flex: 0 0 auto;
}

.ph-maxbundled-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  flex: 1 1 200px;
}


/* ── Health fix button + pending hint ────────────── */

.ph-health-fix {
  background: #fbbf24;
  color: #1a1300;
  border: none;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ph-health-fix:hover {
  background: #fde68a;
}

.ph-pending-hint {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: #93c5fd;
  opacity: 0.75;
  font-style: italic;
}

.ph-postsave-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin: 10px 0 0;
}


/* ── Over-capacity blocker modal ─────────────────── */

.ph-overcap-list {
  background: #2d1f00;
  border: 1px solid #7f1d1d;
  border-left: 3px solid #dc2626;
  border-radius: 6px;
  padding: 10px 14px 10px 30px;
  margin: 10px 0;
  color: #fde68a;
  font-size: 13px;
  list-style: disc;
}

.ph-overcap-list li {
  padding: 3px 0;
}

.ph-overcap-list em {
  color: #fca5a5;
  font-weight: 700;
  font-style: normal;
}

.ph-overcap-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 8px;
}


/* ── Wizard (multi-file upload) ──────────────────── */

.ph-wizard-box {
  max-width: 620px;
  padding: 18px 20px 16px;
}

.ph-wizard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ph-wizard-header .ph-modal-title {
  margin: 0;
}

.ph-wizard-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.ph-wizard-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #475569;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  padding: 0;
}

.ph-wizard-dot:hover {
  transform: scale(1.15);
}

.ph-wizard-dot--unassigned {
  border-color: #64748b;
  background: transparent;
}

.ph-wizard-dot--assigned {
  border-color: #10b981;
  background: #10b981;
}

.ph-wizard-dot--skipped {
  border-color: #64748b;
  background: #334155;
  position: relative;
}

.ph-wizard-dot--skipped::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  background: #64748b;
  transform: translateY(-50%);
}

.ph-wizard-dot--current {
  transform: scale(1.3);
  border-color: #c9a84c;
  background: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.35);
}

.ph-wizard-spinner {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
}

.ph-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #334155;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ph-spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes ph-spin {
  to { transform: rotate(360deg); }
}

.ph-wizard-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
}

.ph-wizard-preview {
  position: relative;
  flex: 1 1 auto;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.06);
}

.ph-wizard-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ph-wizard-preview--skipped img {
  opacity: 0.35;
  filter: grayscale(1);
}

.ph-wizard-dim-overlay {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.ph-wizard-skip-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: .2em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.ph-wizard-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.ph-wizard-arrow:hover:not([disabled]) {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  transform: scale(1.08);
}

.ph-wizard-arrow[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

.ph-wizard-arrow--prev { margin-right: 12px; }
.ph-wizard-arrow--next { margin-left: 12px; }

.ph-wizard-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.ph-wizard-info-name {
  font-family: monospace;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

.ph-wizard-info-dim {
  font-variant-numeric: tabular-nums;
}

.ph-wizard-info-size {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ph-wizard-gender-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 6px 0 14px;
}

.ph-wizard-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 4px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.ph-wizard-tile:hover {
  border-color: var(--muted);
  transform: translateY(-2px);
}

.ph-wizard-tile--selected {
  border-color: var(--accent);
  background: rgba(201, 168, 76, 0.12);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.ph-wizard-tile-icon {
  font-size: 28px;
  line-height: 1;
}

.ph-wizard-tile-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ph-wizard-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 16px;
}

.ph-wizard-chip {
  padding: 6px 14px;
  border-radius: 18px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ph-wizard-chip:hover {
  border-color: var(--muted);
}

.ph-wizard-chip--selected {
  border-color: var(--accent);
  background: rgba(201, 168, 76, 0.15);
  color: var(--accent);
  font-weight: 700;
}

.ph-wizard-footer {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 6px;
}

.ph-wizard-summary {
  display: flex;
  gap: 14px;
  font-size: 11px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ph-wizard-sum {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ph-wizard-sum--ok      { color: #86efac; }
.ph-wizard-sum--skip    { color: #94a3b8; }
.ph-wizard-sum--pending { color: #fbbf24; }

.ph-wizard-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.ph-wizard-footer-actions .btn-save[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════
   AVATAR SIZES MODAL (Peel settings)
   All classes prefixed avs- to avoid conflicts.
   The .avs-phone uses container-type:size so child elements
   can use cqmin units — matching the real device vmin scaling.
═══════════════════════════════════════════════════════════════ */

.modal-box--avs {
  width: min(620px, 95vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.avs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.avs-header__title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e8824a;
}
.avs-header__actions { display: flex; gap: 8px; }
.avs-btn-reset {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.avs-btn-reset:hover { border-color: rgba(232,130,74,0.3); color: #f0a070; }
.avs-btn-done {
  background: #e8824a;
  border: none;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.avs-btn-done:hover { background: #f0a070; }

/* ── Tabs ── */
.avs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px 0;
  flex-shrink: 0;
}
.avs-tab {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.avs-tab:hover { color: var(--text); border-color: rgba(232,130,74,0.3); }
.avs-tab.is-active {
  background: rgba(232,130,74,0.08);
  border-color: #e8824a;
  color: #f0a070;
}

/* ── Caption ── */
.avs-caption {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 10px 20px 4px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}

/* ── Stage & Phone ── */
.avs-stage {
  display: flex;
  justify-content: center;
  padding: 12px 20px 8px;
  flex-shrink: 0;
}
.avs-phone {
  width: 240px;
  height: 430px;
  background: #0d0d0f;
  border: 1px solid #2a2a33;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  container-type: size;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
.avs-phone__notch {
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 4px;
  background: #000;
  border-radius: 2px;
  z-index: 10;
}
.avs-phone__statusbar {
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 14px 5px;
  font-size: 8px;
  color: #888;
}
.avs-phone__body {
  flex: 1;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* ── Screens ── */
.avs-screen { display: none; flex: 1; flex-direction: column; }
.avs-screen.is-active { display: flex; }

/* ── Avatar base (inside phone) ── */
.avs-av {
  border-radius: 50%;
  background: linear-gradient(135deg, #f5d67a, #d49030);
  display: flex; align-items: center; justify-content: center;
  color: #3a2810;
  flex-shrink: 0;
  overflow: hidden;
  font-weight: 700;
  transition: box-shadow 0.2s ease;
}
.avs-av--a1 { background: linear-gradient(135deg, #f5d67a, #d49030); color: #3a2810; }
.avs-av--a2 { background: linear-gradient(135deg, #8fd6ff, #3d7fb8); color: #0a2030; }
.avs-av--a3 { background: linear-gradient(135deg, #ffb0d4, #c74e8a); color: #3d0a20; }
.avs-av--a4 { background: linear-gradient(135deg, #b9ffb0, #3ca04a); color: #0e2d10; }
.avs-av--a5 { background: linear-gradient(135deg, #d0b0ff, #7945c4); color: #1a0a30; }
.avs-av--gm { box-shadow: 0 0 0 2px #5aa6ff; }
.avs-av--gf { box-shadow: 0 0 0 2px #ff6fb3; }

/* Highlight pulse on slider focus */
@keyframes avsPulse {
  0%, 100% { box-shadow: 0 0 0 2px #e8824a, 0 0 0 6px rgba(232,130,74,0.15); }
  50%      { box-shadow: 0 0 0 3px #f0a070, 0 0 0 10px rgba(232,130,74,0.25); }
}
.avs-phone [data-hl].is-highlight { animation: avsPulse 0.9s ease-in-out infinite; }

/* Size classes — all use cqmin relative to phone container */
.avs-av--lobby     { width: calc(var(--avs-sz-lobby)    * 1cqmin); height: calc(var(--avs-sz-lobby)    * 1cqmin); font-size: calc(var(--avs-sz-lobby)    * 0.55cqmin); }
.avs-av--picker    { width: calc(var(--avs-sz-picker)   * 1cqmin); height: calc(var(--avs-sz-picker)   * 1cqmin); font-size: calc(var(--avs-sz-picker)   * 0.5cqmin);  }
.avs-av--pickspot  { width: calc(var(--avs-sz-pickspot) * 1cqmin); height: calc(var(--avs-sz-pickspot) * 1cqmin); font-size: calc(var(--avs-sz-pickspot) * 0.5cqmin);  }
.avs-av--pickbadge { width: calc(var(--avs-sz-pickbadge)* 1cqmin); height: calc(var(--avs-sz-pickbadge)* 1cqmin); font-size: calc(var(--avs-sz-pickbadge)* 0.5cqmin);  border: 1.5px solid rgba(232,130,74,0.3); }
.avs-av--waiting   { width: calc(var(--avs-sz-waiting)  * 1cqmin); height: calc(var(--avs-sz-waiting)  * 1cqmin); font-size: calc(var(--avs-sz-waiting)  * 0.55cqmin); }
.avs-av--answered  { width: calc(var(--avs-sz-answered) * 1cqmin); height: calc(var(--avs-sz-answered) * 1cqmin); font-size: calc(var(--avs-sz-answered) * 0.55cqmin); }
.avs-av--reveal    { width: calc(var(--avs-sz-reveal)   * 1cqmin); height: calc(var(--avs-sz-reveal)   * 1cqmin); font-size: calc(var(--avs-sz-reveal)   * 0.43cqmin); }
.avs-av--modal     { width: calc(var(--avs-sz-modal)    * 1cqmin); height: calc(var(--avs-sz-modal)    * 1cqmin); font-size: calc(var(--avs-sz-modal)    * 0.43cqmin); }

/* Animations for waiting/answered avatars */
@keyframes avsJump   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8%); } }
@keyframes avsWiggle { from { transform:rotate(-8deg); } to { transform:rotate(8deg); } }
.avs-av--waiting { animation: avsJump 1.2s ease-in-out infinite; }
.avs-av--waiting:nth-child(2) { animation-delay:.15s; }
.avs-av--waiting:nth-child(3) { animation-delay:.30s; }
.avs-av--waiting:nth-child(4) { animation-delay:.45s; }
.avs-av--answered:not(.avs-av--unanswered) { animation: avsWiggle 0.45s ease-in-out infinite alternate; }
.avs-av--unanswered { opacity: 0.5; animation: avsJump 1.3s ease-in-out infinite; }

/* Pulse for spotlight avatar */
@keyframes avsSpotPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
.avs-av--pickspot { animation: avsSpotPulse 1.8s ease-in-out infinite; box-shadow: 0 0 16px rgba(232,130,74,0.2); }

/* ── Default CSS vars on phone (JS overrides on open) ── */
/* Override peel.css #peel-app-scoped vars so peel classes work here */
.avs-phone {
  --peel-accent:       #e8824a;
  --peel-accent-light: #f0a070;
  --peel-accent-dim:   rgba(232,130,74,0.08);
  --peel-accent-mid:   rgba(232,130,74,0.16);
  --peel-sz-lobby:     7cqmin;
  --peel-sz-picker:    26cqmin;
  --peel-sz-pickspot:  28cqmin;
  --peel-sz-pickbadge: 14cqmin;
  --peel-sz-waiting:   9cqmin;
  --peel-sz-answered:  11cqmin;
  --peel-sz-reveal:    30cqmin;
  --peel-sz-modal:     48cqmin;
  --peel-sz-toast:     20cqmin;
}

/* ── Lobby screen ── */
.avs-lobby-code  { text-align:center; color:#e8824a; font-size:3.5cqmin; font-weight:700; letter-spacing:.14em; margin-bottom:2cqmin; }
.avs-lobby-title { font-size:2.5cqmin; color:#888; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.5cqmin; }
.avs-lobby-list  { display:flex; flex-direction:column; gap:1.5cqmin; }
.avs-lobby-row   { display:flex; align-items:center; gap:2.5cqmin; background:#1c1c22; border:1px solid #2a2a33; border-radius:2.5cqmin; padding:1.5cqmin 2.5cqmin; }
.avs-lobby-row--host { border-color:rgba(232,130,74,0.3); }
.avs-lobby-name  { flex:1; font-size:3cqmin; color:#e8e6e0; }
.avs-host-tag    { font-size:2cqmin; color:#f0a070; background:rgba(232,130,74,0.1); padding:.4cqmin 1.2cqmin; border-radius:1cqmin; }

/* ── Picker screen ── */
.avs-screen--picker { justify-content:center; align-items:center; text-align:center; gap:3cqmin; }
.avs-picker-youre  { font-size:2.5cqmin; color:#888; text-transform:uppercase; letter-spacing:.1em; }
.avs-picker-name   { font-size:3.5cqmin; color:#e8e6e0; }
.avs-picker-phrase { font-size:4cqmin; color:#e8824a; font-weight:700; }

/* ── Others waiting screen ── */
.avs-screen--others { align-items:center; justify-content:space-between; }
.avs-others-head    { text-align:center; margin-top:1cqmin; }
.avs-others-head b  { display:block; font-size:3.5cqmin; color:#e8824a; margin-bottom:.8cqmin; }
.avs-others-head span { font-size:2.5cqmin; color:#888; text-transform:uppercase; }
.avs-others-pickname { font-size:2.5cqmin; color:#888; text-transform:uppercase; letter-spacing:.08em; }
.avs-others-avatars  { display:flex; flex-wrap:wrap; justify-content:center; gap:2.5cqmin; padding:1cqmin 0; }
.avs-others-footer   { font-size:2.5cqmin; color:#888; padding-bottom:.5cqmin; }

/* ── Answering screen ── */
.avs-screen--answering { justify-content:flex-start; }
.avs-qcard       { background:#1c1c22; border:1px solid rgba(232,130,74,0.2); border-radius:3.5cqmin; padding:3cqmin; display:flex; flex-direction:column; align-items:center; gap:2.5cqmin; flex:1; box-shadow:0 0 20px rgba(232,130,74,0.06); }
.avs-qcard-cat   { font-size:2cqmin; color:#f0a070; background:rgba(232,130,74,0.1); padding:.7cqmin 2cqmin; border-radius:2.5cqmin; text-transform:uppercase; letter-spacing:.1em; }
.avs-qcard-picker { display:flex; flex-direction:column; align-items:center; gap:1cqmin; }
.avs-qcard-askedby { font-size:2cqmin; color:#888; text-transform:uppercase; letter-spacing:.08em; }
.avs-qcard-name  { font-size:3cqmin; color:#e8e6e0; font-weight:600; }
.avs-qcard-text  { font-size:3.2cqmin; color:#e8e6e0; text-align:center; line-height:1.4; margin:1cqmin 0; }
.avs-qcard-input { width:100%; background:#28282f; border:1px solid #2a2a33; border-radius:2cqmin; padding:2cqmin 2.5cqmin; font-size:2.5cqmin; color:#888; margin-top:auto; }

/* ── Answered screen ── */
.avs-screen--answered { align-items:center; justify-content:space-between; }
.avs-answered-head    { text-align:center; margin-top:1cqmin; }
.avs-answered-head b  { display:block; font-size:3.5cqmin; color:#4cc876; margin-bottom:.8cqmin; }
.avs-answered-head span { font-size:2.5cqmin; color:#888; text-transform:uppercase; }
.avs-answered-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:3.5cqmin; padding:2cqmin 0; }
.avs-ans-wrap      { position:relative; display:flex; flex-direction:column; align-items:center; gap:1cqmin; }
.avs-ans-name      { font-size:2.2cqmin; color:#888; }
.avs-ans-check     { position:absolute; top:-.5cqmin; right:-.5cqmin; width:3.5cqmin; height:3.5cqmin; min-width:10px; min-height:10px; background:#4cc876; color:#0c2010; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2cqmin; font-weight:900; border:1.5px solid #0d0d0f; }
.avs-answered-footer { font-size:2.5cqmin; color:#888; padding-bottom:.5cqmin; }

/* ── Reveal screen ── */
.avs-screen--reveal { gap:2cqmin; }
.avs-reveal-q     { font-size:2.8cqmin; color:#888; text-align:center; padding:1cqmin 0 2cqmin; border-bottom:1px solid #2a2a33; }
.avs-reveal-cards { display:grid; grid-template-columns:1fr 1fr; gap:2cqmin; flex:1; }
.avs-reveal-card  { background:#1c1c22; border:1px solid #2a2a33; border-radius:2.5cqmin; padding:2.5cqmin 1.5cqmin; display:flex; flex-direction:column; align-items:center; gap:1.5cqmin; }
.avs-reveal-name  { font-size:2.8cqmin; color:#e8e6e0; font-weight:600; }
.avs-reveal-ans   { font-size:2.2cqmin; color:#f0a070; background:rgba(232,130,74,0.1); padding:1cqmin 2cqmin; border-radius:3cqmin; margin-top:auto; text-align:center; }

/* ── Tap-to-enlarge screen ── */
.avs-screen--modal { padding:0; position:relative; }
.avs-modal-bg-fuzz { position:absolute; inset:0; padding:3cqmin; display:flex; flex-direction:column; gap:1.8cqmin; filter:blur(1px) brightness(.55); }

/* ── Avatar-change toast screen ── */
.avs-screen--toast { padding:0; position:relative; }
.avs-toast-bg      { position:absolute; inset:0; padding:3cqmin; display:flex; flex-direction:column; gap:1.8cqmin; filter:brightness(.45); }
.avs-toast-card    { position:absolute; top:10%; left:50%; transform:translateX(-50%); background:#1c1c22; border:1px solid rgba(232,130,74,0.2); border-radius:3cqmin; padding:3.5cqmin 5cqmin; display:flex; flex-direction:column; align-items:center; gap:2cqmin; box-shadow:0 4px 20px rgba(0,0,0,0.6); min-width:55%; }
.avs-toast-avatar  { width:var(--peel-sz-toast); height:var(--peel-sz-toast); border-radius:50%; background:#28282f; display:flex; align-items:center; justify-content:center; font-size:calc(var(--peel-sz-toast) * 0.5); flex-shrink:0; }
.avs-toast-text    { font-size:3cqmin; font-weight:700; color:#e8e6e0; text-align:center; line-height:1.3; }

/* Answered screen: center-stack peel content */
.avs-screen--answered { justify-content: center; gap: 2cqmin; }

/* ── Peel preview: scale all px-based values to cqmin inside phone ── */
.avs-phone .peel-player-name          { font-size: 3cqmin; }
.avs-phone .peel-player-badge         { font-size: 2cqmin; padding: 0.5cqmin 1.5cqmin; }
.avs-phone .peel-online-dot           { width: 1.5cqmin; height: 1.5cqmin; }
.avs-phone .peel-player-chip          { padding: 1.5cqmin 2.5cqmin; border-radius: 3cqmin; gap: 2cqmin; }
.avs-phone .peel-picking__header      { gap: 2cqmin; }
.avs-phone .peel-picking__title       { font-size: 4cqmin; }
.avs-phone .peel-picker-badge__name   { font-size: 2.5cqmin; }
.avs-phone .peel-picking__waiting     { gap: 3cqmin; }
.avs-phone .peel-picking__waiting-text { font-size: 3.5cqmin; }
.avs-phone .peel-picking__waiting-sub  { font-size: 2.5cqmin; }
.avs-phone .peel-question-card        { padding: 3cqmin; border-radius: 4cqmin; animation: none; }
.avs-phone .peel-question-card__meta  { margin-bottom: 2cqmin; }
.avs-phone .peel-question-card__category { font-size: 2cqmin; }
.avs-phone .peel-question-card__text  { font-size: 3.5cqmin; }
.avs-phone .peel-question-card__picker { gap: 1cqmin; }
.avs-phone .peel-question-card__picker-name { font-size: 2cqmin; }
.avs-phone .peel-waiting__icon        { font-size: 6cqmin; animation: none; }
.avs-phone .peel-waiting__title       { font-size: 4cqmin; }
.avs-phone .peel-waiting__sub         { font-size: 2.5cqmin; max-width: none; }
.avs-phone .peel-waiting-avatars      { gap: 2.5cqmin; margin-top: 2cqmin; }
.avs-phone .peel-answered-avatars     { gap: 3.5cqmin; margin-top: 2cqmin; }
.avs-phone .peel-answered-avatar-name { font-size: 2cqmin; max-width: none; }
.avs-phone .peel-answered-checkmark   { width: 3.5cqmin; height: 3.5cqmin; font-size: 2cqmin; }
.avs-phone .peel-revealing__question  { font-size: 3cqmin; padding: 2cqmin; border-radius: 3cqmin; animation: none; }
.avs-phone .peel-answer-grid          { grid-template-columns: 1fr; gap: 2cqmin; }
.avs-phone .peel-answer-card          { border-radius: 3cqmin; min-height: 0; }
.avs-phone .peel-answer-card__left    { min-width: 0; padding: 2cqmin; }
.avs-phone .peel-answer-card__player-name { font-size: 2cqmin; max-width: none; }
.avs-phone .peel-answer-card__right   { font-size: 3cqmin; padding: 2cqmin; }
.avs-phone .peel-avatar-modal__name   { font-size: 5cqmin; }

/* Tap-to-enlarge overlay: fill phone container, not viewport */
.avs-phone .peel-avatar-modal__inner {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqmin;
}

/* ── Sliders area ── */
.avs-sliders { padding: 14px 22px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }
.avs-srow { display: none; padding: 10px 0; }
.avs-srow.is-active { display: block; }
.avs-srow + .avs-srow.is-active { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.avs-srow__head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; }
.avs-srow__label { font-size:13px; font-weight:600; color:var(--text); }
.avs-srow__val   { font-size:12px; color:#f0a070; background:rgba(232,130,74,0.08); padding:2px 9px; border-radius:6px; min-width:60px; text-align:center; font-variant-numeric:tabular-nums; }
.avs-srow__desc  { font-size:11px; color:var(--text-dim); margin:2px 0 8px; line-height:1.4; }
.avs-srow input[type=range] { width:100%; accent-color:#e8824a; margin:0; }