:root {
  /* Neutral dark base — no purple/blue tint */
  --bg:       #0c0c0e;
  --bg2:      #141416;
  --bg3:      #1f1f23;
  --bg4:      #2a2a30;
  /* Cards sit above bg */
  --surface:  #19191c;
  /* Solid borders — alpha borders are invisible on dark */
  --border:   #252528;
  --border2:  #35353a;
  /* Text — high contrast for readability */
  --text:     #eeeeef;
  --text2:    #94949e;
  --text3:    #73737e;
  /* Accent — warm coral, sharp against neutral dark */
  --ember:    #e96449;
  --ember2:   #f0785f;
  --ember-bg: #1f1412;
  /* Semantic */
  --gold:     #d6b04e;
  --gold-bg:  #1c1a12;
  --jade:     #3cd490;
  --jade-bg:  #111c16;
  --rose:     #e85888;
  --switch-off: #303036;
  --switch-thumb: #a3a3ac;
  --r: 10px;
  --r-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
  --modal-bg: rgba(0,0,0,0.7);
  --grain-opacity: 0.025;
  /* Inputs sit a step below the card, not in a pure-black hole. */
  --field-bg: #111113;
  --ring: rgba(233,100,73,0.28);
  /* Gallery-surface chips: two hues distinct from `published` green. */
  --sky: #4fc3e0;
  --sky-bg: rgba(60,180,212,0.15);
  --violet: #8f9bff;
  --violet-bg: rgba(126,138,246,0.16);
  /* Inset panels inside a card (pack cards, totals strip). */
  --inset-bg: var(--bg3);
  /* Fonts and easing — shared across themes; without these the dark theme
     falls back to browser-default serif fonts, causing layout shifts on
     theme toggle. */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Icons drawn as data URIs can't read CSS vars, so each theme ships its own
     stroke colour here instead of hardcoding one that only reads on dark. */
  --select-arrow: url("data:image/svg+xml,%3Csvg width='10' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l4 4 4-4' fill='none' stroke='%2394949e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --search-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2373737e' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.5'/%3E%3Cpath d='M10.2 10.2L14 14'/%3E%3C/g%3E%3C/svg%3E");
}

[data-theme="light"] {
  --bg:       #f0f0f3;
  --bg2:      #e8e8ec;
  --bg3:      #dddde2;
  --bg4:      #d2d2d8;
  --surface:  #ffffff;
  --border:   #d0d0d6;
  --border2:  #b8b8c0;
  --text:     #1a1a1e;
  --text2:    #55555f;
  --text3:    #6e6e7a;
  --ember:    #d04828;
  --ember2:   #dc5c3e;
  --ember-bg: #fceee8;
  --gold:     #a08020;
  --gold-bg:  #f8f4e6;
  --jade:     #1a9a5e;
  --jade-bg:  #e8f6ef;
  --rose:     #c83868;
  --switch-off: #dddde3;
  --switch-thumb: #ffffff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
  --modal-bg: rgba(0,0,0,0.25);
  --grain-opacity: 0;
  --field-bg: #fafafb;
  --ring: rgba(208,72,40,0.2);
  --sky: #0d7f9f;
  --sky-bg: #e2f3f8;
  --violet: #5058c4;
  --violet-bg: #ebedfd;
  --inset-bg: #f4f4f6;
  --select-arrow: url("data:image/svg+xml,%3Csvg width='10' height='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5l4 4 4-4' fill='none' stroke='%235c5c68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --search-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%237b7b88' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='6.8' cy='6.8' r='4.5'/%3E%3Cpath d='M10.2 10.2L14 14'/%3E%3C/g%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}
.theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

body {
  font-family: var(--font-body); background: var(--bg); color: var(--text);
  height: 100vh; overflow: hidden; font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Grain overlay */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
}

button { cursor: pointer; font-family: var(--font-body); transition: all 0.2s var(--ease); }
input, textarea, select { font-family: var(--font-body); transition: border-color 0.2s, box-shadow 0.2s; }
input[type="checkbox"] { accent-color: var(--ember); }
/* Borderless buttons had no visible keyboard focus at all on the dark theme. */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
kbd {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  padding: 0 6px; border-radius: 5px; color: var(--text3);
  background: var(--bg3); border: 1px solid var(--border2); box-shadow: inset 0 -1px 0 var(--border2);
}

/* ---- Auth ---- */
#auth-overlay {
  position: fixed; inset: 0; z-index: 1000; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#auth-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(233,100,73,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(214,176,78,0.03) 0%, transparent 50%);
}
#auth-box {
  position: relative; background: var(--surface); border: 1px solid var(--border2);
  border-radius: 24px; padding: 52px 44px; text-align: center;
  max-width: 380px; width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: authIn 0.6s var(--ease);
}
@keyframes authIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } }
#auth-box h1 {
  font-family: var(--font-display); font-size: 26px; font-weight: 800;
  letter-spacing: -0.5px; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--text) 0%, var(--ember) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
#auth-box p { color: var(--text3); font-size: 13px; margin-bottom: 32px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; }
#auth-box input {
  width: 100%; padding: 13px 18px; background: var(--field-bg); border: 1px solid var(--border2);
  border-radius: var(--r); color: var(--text); font-size: 14px; margin-bottom: 16px;
  font-family: var(--font-mono); letter-spacing: 0.5px;
}
#auth-box input::placeholder { color: var(--text3); font-family: var(--font-body); letter-spacing: 0; }
#auth-box input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-bg), 0 0 20px rgba(232,96,76,0.1); }
#auth-box button {
  width: 100%; padding: 13px; background: var(--ember); color: #fff;
  border: none; border-radius: var(--r); font-size: 14px; font-weight: 600;
  letter-spacing: 0.3px;
}
#auth-box button:hover { background: var(--ember2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,96,76,0.3); }
#auth-error { color: var(--ember); font-size: 13px; margin-top: 12px; display: none; font-weight: 500; }

/* ---- Layout ---- */
#app { display: none; height: 100vh; animation: fadeIn 0.4s var(--ease); }
.layout { display: flex; height: 100%; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---- Sidebar ---- */
.sidebar {
  width: 300px; min-width: 300px; background: var(--bg2);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
}
.sidebar-backdrop { display: none; }
.sidebar-fab { display: none; }
/* On narrow windows the sidebar becomes an overlay drawer so the editor gets
   the full width. */
@media (max-width: 980px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1500;
    transform: translateX(-100%); transition: transform 0.25s var(--ease);
    box-shadow: 8px 0 32px rgba(0,0,0,0.35);
  }
  .layout.sidebar-open .sidebar { transform: translateX(0); }
  .layout.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1400;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
  }
  .sidebar-fab {
    display: inline-flex; position: fixed; right: 16px; bottom: 16px; z-index: 1600;
    width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--ember); color: #fff; border: none; font-size: 17px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  }
  .sidebar-fab:hover { background: var(--ember2); }
}
.sidebar-header {
  padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 14px;
}
.sidebar-top-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
/* Brand block: mark + name, so the panel has an identity instead of a bare
   list heading. */
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--ember2) 0%, #c8432a 100%);
  box-shadow: 0 4px 12px rgba(233,100,73,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text3); margin-top: 3px;
}
.sidebar-new-btn {
  height: 38px; min-height: 38px; padding: 0 16px; border-radius: 9px; font-size: 13px;
  box-shadow: 0 4px 12px rgba(208,72,40,0.18);
}
.sidebar-toolbar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
}
.sidebar-toolbar > .btn,
.sidebar-toolbar > .sidebar-menu > summary {
  width: 100%; height: 36px; min-height: 36px; padding: 0 13px; justify-content: center;
  background: var(--surface); border-color: var(--border2); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sidebar-menu, .action-menu { position: relative; min-width: 0; }
.sidebar-menu > summary,
.action-menu > summary {
  list-style: none; user-select: none;
}
.sidebar-menu > summary::-webkit-details-marker,
.action-menu > summary::-webkit-details-marker { display: none; }
.menu-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 12px; height: 12px; color: var(--text3);
  transition: transform 0.15s var(--ease);
}
.menu-chevron::before {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.sidebar-menu[open] > summary .menu-chevron,
.action-menu[open] > summary .menu-chevron { transform: rotate(180deg); }
.sidebar-menu-popover,
.action-menu-popover {
  position: absolute; z-index: 1300; top: calc(100% + 7px); left: 0;
  min-width: 224px; padding: 6px; border: 1px solid var(--border2);
  border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-lg);
}
.sidebar-menu-popover button,
.action-menu-popover button {
  display: flex; width: 100%; min-height: 38px; border: none; border-radius: 8px;
  padding: 9px 11px; background: transparent; color: var(--text2);
  align-items: flex-start; justify-content: center; flex-direction: column;
  font-size: 13px; font-weight: 600; text-align: left;
}
.sidebar-menu-popover button:hover,
.action-menu-popover button:hover { color: var(--text); background: var(--bg3); }
.sidebar-menu-popover button small {
  margin-top: 2px; color: var(--text3); font-size: 10px; font-weight: 400;
}
.search-wrap {
  position: relative;
}
.search-wrap::before {
  content: ''; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; pointer-events: none;
  background: var(--search-icon) no-repeat center / 16px 16px;
}
.search-input {
  width: 100%; padding: 10px 32px 10px 40px; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 13px;
}
.search-input:hover { border-color: var(--border2); }
.search-input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
/* Slash hint: shown while the box is idle, gone as soon as it is used. */
.search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-wrap.has-value .search-kbd, .search-wrap:focus-within .search-kbd { display: none; }
.search-input::placeholder { color: var(--text3); }
.search-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: var(--bg4); color: var(--text2); font-size: 12px; line-height: 1;
  display: none; align-items: center; justify-content: center; padding: 0;
}
.search-wrap.has-value .search-clear { display: inline-flex; }
.search-clear:hover { background: var(--rose); color: #fff; }

/* Buttons */
.btn {
  min-height: 36px; padding: 0 15px; border: none; border-radius: 9px; font-size: 13px;
  font-weight: 600; display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.2px;
  justify-content: center; white-space: nowrap; line-height: 1;
}
.btn-primary {
  background: linear-gradient(180deg, var(--ember2) 0%, var(--ember) 100%); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 2px 8px rgba(233,100,73,0.2), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover {
  background: var(--ember2); transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(233,100,73,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.btn-sm { min-height: 30px; padding: 0 11px; font-size: 12px; }
.btn-danger { background: var(--bg3); color: var(--rose); border: 1px solid var(--border); }
[data-theme="light"] .btn-danger { background: #fdf0f4; }
.btn-danger:hover { background: var(--rose); color: #fff; border-color: var(--rose); }
.btn-ghost {
  background: var(--surface); color: var(--text2); border: 1px solid var(--border2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn-ghost:hover { color: var(--text); background: var(--bg3); border-color: var(--border2); }

/* Character list */
.char-list { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.char-item {
  padding: 8px 10px; border-radius: 12px; cursor: pointer; margin-bottom: 3px;
  display: flex; gap: 11px; align-items: center; transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  border: 1px solid transparent;
}
.char-item:hover { background: var(--bg3); }
.char-item.active {
  background: var(--ember-bg);
  border-color: color-mix(in srgb, var(--ember) 34%, var(--border));
}
.char-item.active .char-item-name { color: var(--text); }
/* The selected row rings its portrait instead of drawing a rail on the
   row edge — the ring survives the row being narrow or scrolled. */
.char-item.active .char-avatar { box-shadow: 0 0 0 2px var(--ember-bg), 0 0 0 3.5px var(--ember); }
.char-avatar {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--bg4); border: 1px solid var(--border); object-fit: cover;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; color: var(--text3);
  transition: box-shadow 0.15s var(--ease);
}
.char-item-info { flex: 1; min-width: 0; }
.char-item-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-item-meta { display: flex; gap: 6px; font-size: 11px; color: var(--text3); align-items: center; flex-wrap: wrap; margin-top: 3px; }
.char-item-meta > span + span::before { content: '\00b7'; margin-right: 6px; color: var(--text3); }
.badge {
  padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px; font-family: var(--font-mono);
}
.badge-anime { background: var(--bg3); color: #a882ff; }
[data-theme="light"] .badge-anime { background: #efe8ff; color: #7c5cc7; }
.badge-realistic { background: var(--jade-bg); color: var(--jade); }
.badge-furry { background: var(--gold-bg); color: var(--gold); }
.badge-mystic { background: var(--ember-bg); color: var(--ember); }
.badge-public { background: var(--gold-bg); color: var(--gold); }
.char-item-meta .badge {
  padding: 0; background: transparent; font-family: var(--font-body); font-size: 11px;
  font-weight: 600; text-transform: capitalize; letter-spacing: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.char-item-meta .badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}

/* Avatar reorder modal */
.avatar-sort-layout {
  display: block; height: 100%; min-height: 0;
}
.avatar-sort-zone {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}
.avatar-sort-zone-header {
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2);
}
.avatar-sort-zone-title {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--text2);
}
.avatar-sort-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
}
.avatar-sort-preview-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg3);
}
.avatar-sort-preview-toggle button {
  min-width: 48px; padding: 5px 8px; border: none; border-radius: 5px;
  background: transparent; color: var(--text3); font-size: 11px; font-weight: 700;
}
.avatar-sort-preview-toggle button.active {
  background: var(--ember); color: #fff;
}
.avatar-sort-grid {
  --avatar-sort-cols: 4;
  flex: 1; overflow: auto; padding: 14px; display: grid;
  grid-template-columns: repeat(var(--avatar-sort-cols), minmax(150px, 190px));
  justify-content: center; align-content: start; gap: 14px; min-height: 180px;
}
.avatar-sort-grid.drag-over {
  outline: 2px dashed var(--ember); outline-offset: -6px; background: var(--ember-bg);
}
.avatar-sort-card {
  position: relative; border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--bg2); cursor: grab; user-select: none;
  height: 354px; display: flex; flex-direction: column;
}
.avatar-sort-card:hover { border-color: var(--ember); box-shadow: var(--shadow-sm); }
.avatar-sort-card.dragging { opacity: 0.45; cursor: grabbing; }
.avatar-sort-img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; background: var(--bg3);
  flex: 0 0 auto; min-height: 0;
}
.avatar-sort-img-empty {
  width: 100%; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--text3); font-size: 11px;
  flex: 0 0 auto; min-height: 0;
}
.avatar-sort-name {
  padding: 7px 8px 3px; font-size: 12px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.avatar-sort-meta {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 0 8px 8px; min-height: 24px;
  max-height: 44px; overflow: hidden;
}
.avatar-sort-rank {
  position: absolute; top: 5px; left: 5px; width: 42px; height: 22px; padding: 0 4px;
  border-radius: 5px; background: rgba(0,0,0,0.72); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.avatar-sort-rank-input {
  width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-align: center;
  -moz-appearance: textfield;
}
.avatar-sort-rank-input::-webkit-outer-spin-button,
.avatar-sort-rank-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.avatar-sort-empty {
  grid-column: 1 / -1; color: var(--text3); font-size: 13px; text-align: center; padding: 34px 10px;
}
.avatar-sort-panel {
  width: min(1120px, 96vw); background: var(--bg2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; animation: slideLeft 0.25s var(--ease);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
}
.avatar-sort-body { flex: 1; overflow: hidden; padding: 16px; min-height: 0; }
.avatar-sort-pager {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg2);
  flex: 0 0 53px;
}
.avatar-sort-page-info {
  min-width: 92px; text-align: center; font-family: var(--font-mono);
  font-size: 11px; color: var(--text3);
}
@media (max-width: 1000px) {
  .avatar-sort-layout { height: 100%; }
  .avatar-sort-grid { --avatar-sort-cols: 2; max-height: 620px; }
  .avatar-sort-card { height: 340px; }
}

.sidebar-footer {
  padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text3);
}
.pagination { display: flex; gap: 10px; align-items: center; justify-content: center; }
.pagination span {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--text2);
  padding: 4px 11px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border);
}
.sidebar-account {
  padding: 10px 12px 12px; border-top: 1px solid var(--border); background: var(--bg2);
}
.account-menu { width: 100%; }
.account-trigger {
  display: flex; align-items: center; width: 100%; min-height: 48px; gap: 10px;
  padding: 6px 9px; border-radius: var(--r); cursor: pointer; list-style: none;
  transition: background 0.15s var(--ease);
}
.account-trigger:hover,
.account-menu[open] > .account-trigger { background: var(--bg3); }
.account-trigger > .menu-chevron { margin-left: auto; flex: none; }
.account-menu .menu-up { top: auto; bottom: calc(100% + 7px); left: 0; right: 0; min-width: 0; }

/* ---- Editor ---- */
.editor {
  /* No top padding: the sticky form header owns that space (see .form-header),
     so scrolled sections can't show through above it. */
  flex: 1; overflow-y: auto; padding: 0 48px 36px;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(233,100,73,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 90%, rgba(214,176,78,0.02) 0%, transparent 50%),
    var(--bg);
}
.editor-empty {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
  height: 100%; color: var(--text3); font-size: 14px; font-weight: 400; text-align: center; padding: 0 24px;
}
/* Three fanned cards drawn in CSS: reads as "a character card goes here"
   without shipping an illustration. */
.empty-art { position: relative; width: 150px; height: 100px; margin-bottom: 20px; }
.empty-art span {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 84px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border2); box-shadow: var(--shadow-sm);
  transform: translate(-50%, -50%) translateX(var(--dx)) rotate(var(--rot));
}
.empty-art span:nth-child(1) { --dx: -38px; --rot: -12deg; opacity: 0.55; }
.empty-art span:nth-child(2) { --dx: 0px; --rot: 0deg; z-index: 1; background: linear-gradient(160deg, var(--bg3), var(--surface)); }
.empty-art span:nth-child(3) { --dx: 38px; --rot: 12deg; opacity: 0.55; }
.empty-art span::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px;
  border-radius: 3px; background: var(--border2);
}
.empty-art span:nth-child(2)::before {
  content: ''; position: absolute; top: 14px; left: 50%; width: 24px; height: 24px; border-radius: 50%;
  transform: translateX(-50%); background: color-mix(in srgb, var(--ember) 45%, var(--bg4));
  box-shadow: 0 0 16px rgba(233,100,73,0.35);
}
.empty-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.empty-text { font-size: 13px; color: var(--text3); }
.empty-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }
.empty-actions kbd { margin-left: 2px; }
.editor-form { max-width: 1040px; margin: 0 auto; animation: formIn 0.4s var(--ease); }
@keyframes formIn { from { opacity: 0; transform: translateY(12px); } }

.form-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0; flex-wrap: wrap; gap: 10px 16px;
  /* Stays pinned while the long form scrolls so Save / "Unsaved" are always
     reachable. Scroll container is .editor, whose top padding this header
     carries itself — otherwise sections scroll through the uncovered strip
     above it and read as a stray line of text next to the title. */
  position: sticky; top: 0; z-index: 100;
  padding: 36px 0 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow 0.2s var(--ease);
}
/* Hairline appears only once content has scrolled under the header. */
.form-header.scrolled { box-shadow: 0 1px 0 var(--border), 0 12px 24px -16px rgba(0,0,0,0.6); }
.form-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
.form-avatar {
  width: 44px; height: 44px; border-radius: 13px; flex: none; overflow: hidden;
  display: grid; place-items: center; background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text3); font-family: var(--font-display); font-size: 16px; font-weight: 700;
}
.form-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.form-heading-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.form-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--ember);
}
.form-header h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.5px;
  line-height: 1.1; min-width: 0; overflow-wrap: anywhere;
}
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.form-actions > .btn,
.form-actions > .action-menu > summary { height: 36px; }
.action-menu-popover { left: auto; right: 0; min-width: 170px; }
.action-menu-popover button { align-items: flex-start; min-height: 36px; }
.btn:disabled {
  opacity: 0.45; cursor: default; transform: none !important; box-shadow: none;
}
.btn-primary:disabled:hover { background: var(--ember); }

/* Tabs */
.tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 16px 0 26px; padding: 4px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
}
.tab {
  padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text3);
  background: none; border: none; border-radius: 9px; cursor: pointer; letter-spacing: 0.1px;
  transition: color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.tab:hover { color: var(--text2); background: color-mix(in srgb, var(--text) 6%, transparent); }
.tab.active {
  color: var(--ember); background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.22), 0 0 0 1px var(--border2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.tab.active:hover { color: var(--ember); }
.tab.disabled { opacity: 0.35; cursor: default; }
.tab.disabled:hover { color: var(--text3); }
.tab-badge {
  font-size: 9px; font-family: var(--font-mono); font-weight: 600;
  background: var(--bg4); color: var(--text3); padding: 2px 6px; border-radius: 4px;
  margin-left: 8px; text-transform: uppercase; letter-spacing: 0.5px; vertical-align: 1px;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Starter editor */
.starter-tabs {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.starter-tabs.starter-lang-tabs {
  margin-top: 6px; padding-bottom: 6px; border-bottom: none;
}
.starter-pill {
  padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--text3);
  background: var(--bg3); border: 1px solid var(--border); border-radius: 99px;
  cursor: pointer; letter-spacing: 0.2px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-family: var(--font-mono); user-select: none;
}
.starter-pill:hover { color: var(--text2); border-color: var(--border2); }
.starter-pill.active {
  color: var(--ember); border-color: var(--ember); background: var(--ember-bg);
}
.starter-pill .pill-count {
  margin-left: 6px; font-size: 10px; opacity: 0.7;
}
/* Group heading inside a wrapping pill row. `flex-basis:100%` forces the
   break, so the poses read as their own block instead of trailing off the
   end of a 20-pill line. */
.starter-tabs-sep {
  flex-basis: 100%; display: flex; align-items: center; gap: 8px;
  margin: 10px 0 2px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text3);
  user-select: none;
}
.starter-tabs-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
/* Mainstream/Adult kind selectors are binary mode switches — render them as
   segmented controls (same look as Personality SFW/NSFW) instead of pills.
   Pills stay for long wrappable lists (fetishes, languages, slots). */
#desc-kind-tabs, #starter-kind-tabs {
  display: inline-flex; flex-wrap: nowrap; gap: 3px; align-self: flex-start;
  padding: 3px; border-bottom: none;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
}
#desc-kind-tabs .starter-pill, #starter-kind-tabs .starter-pill {
  border: none; background: transparent; border-radius: 7px;
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  padding: 7px 14px; letter-spacing: 0.2px;
}
#desc-kind-tabs .starter-pill:hover, #starter-kind-tabs .starter-pill:hover {
  /* White-on-white is invisible in light mode — tint with the text colour so
     the hover reads in both themes. */
  color: var(--text2); background: color-mix(in srgb, var(--text) 7%, transparent);
}
#desc-kind-tabs .starter-pill.active, #starter-kind-tabs .starter-pill.active {
  background: var(--bg4); color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
#desc-kind-tabs .pill-count, #starter-kind-tabs .pill-count {
  font-family: var(--font-mono);
}
.starter-msgs-list {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.starter-msg-row {
  display: flex; gap: 8px; align-items: stretch;
}
.starter-msg-row textarea {
  flex: 1; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 14px; line-height: 1.5;
  min-height: 56px; resize: vertical;
}
.starter-msg-row textarea:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-bg);
}
.starter-msg-row .row-del {
  flex-shrink: 0; width: 36px; padding: 0; font-size: 16px;
  color: var(--text3); background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--r); cursor: pointer;
}
.starter-msg-row .row-del:hover { color: var(--rose); border-color: var(--rose); }
.starter-empty {
  padding: 20px; text-align: center; color: var(--text3); font-size: 13px;
  background: var(--bg3); border-radius: var(--r); margin-bottom: 14px;
}
.starter-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.starter-imgs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.starter-thumb {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg3);
}
.starter-thumb img,
.starter-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Stands in until the presigned URL arrives, and permanently for a key that
   could not be signed — a glyph rather than a broken-image icon. */
.starter-thumb .thumb-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 26px;
}
.starter-thumb .type-badge {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 99px;
  font-size: 10px; font-family: var(--font-mono); background: rgba(0,0,0,0.65); color: #fff;
}
.starter-thumb .type-badge-warn { background: var(--rose); }
.starter-thumb .thumb-del {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%;
  font-size: 14px; cursor: pointer; line-height: 1;
}
.starter-thumb .thumb-del:hover { background: var(--rose); }

/* Card media (cover + video pairs) */
.card-media-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.card-media-block {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px;
}
.card-media-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--text3);
  font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;
}
.card-media-pair {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.card-media-slot {
  position: relative; aspect-ratio: 2/3; border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.card-media-slot.card-media-video { aspect-ratio: 9/16; background: #000; }
.card-media-slot img,
.card-media-slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media-empty {
  color: var(--text3); font-size: 12px; font-family: var(--font-mono);
}
.card-media-clear {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  background: rgba(0,0,0,0.65); color: #fff; border: none; border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer; z-index: 2;
}
.card-media-clear:hover { background: var(--rose); }
.card-media-upload { text-align: center; cursor: pointer; }

/* Visibility section */
.visibility-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 700px) { .visibility-grid { grid-template-columns: 1fr; } }
.visibility-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg3); cursor: pointer; transition: border-color 0.15s;
  position: relative;
}
.visibility-item:hover { border-color: var(--border2); }
.visibility-item input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--ember); cursor: pointer;
  align-self: flex-start;
}
.visibility-item input[type="checkbox"]:disabled { cursor: not-allowed; }
.visibility-item.disabled {
  opacity: 0.55; cursor: not-allowed; background: var(--bg);
}
.visibility-item.disabled:hover { border-color: var(--border); }
.visibility-label {
  font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.2px;
}
.visibility-hint {
  font-size: 11px; color: var(--text3); line-height: 1.4;
}
.visibility-item.disabled .visibility-hint {
  color: var(--ember); font-weight: 500;
}
/* Manual sync reuses .visibility-item for plain checkbox rows, inside a .field —
   where `.field label { display: block }` outranks the card's own display:flex
   and drops the gap, gluing every box to its label. */
.visibility-list { display: flex; flex-direction: column; gap: 8px; }
.visibility-list .visibility-item {
  display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 11px 14px;
}
.visibility-list .visibility-item input[type="checkbox"] { align-self: center; }
.visibility-list .visibility-item span { font-size: 13px; font-weight: 500; }
/* Runtime settings modal (feature switches) */
.setting-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg3); margin-bottom: 10px;
}
.setting-row input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--ember); cursor: pointer;
  margin-top: 2px; flex: none;
}
.setting-row input[type="checkbox"]:disabled { cursor: wait; opacity: 0.5; }
/* The rows are built from <span>s, so each part needs an explicit block or the
   label, hint and meta collapse onto one line and their margins do nothing. */
.setting-body { min-width: 0; display: block; }
.setting-label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.2px;
}
.setting-hint { display: block; font-size: 11px; color: var(--text3); line-height: 1.4; margin-top: 4px; }
.setting-meta { display: block; font-size: 10px; color: var(--text3); margin-top: 6px; opacity: 0.8; }
.visibility-banner {
  background: rgba(232,96,76,0.08); border: 1px solid rgba(232,96,76,0.2);
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 14px;
  font-size: 13px; color: var(--ember); line-height: 1.5;
}
.visibility-banner strong { font-weight: 700; }
/* Publish checklist: one ✓/✕ list instead of repeating the same blocker text
   in the banner and on every env card. */
.visibility-checklist-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 14px;
}
.visibility-checklist-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--text3);
  margin-bottom: 9px;
}
.visibility-checklist { display: flex; flex-wrap: wrap; gap: 7px 18px; }
.vis-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
}
.vis-check.ok { color: var(--jade); }
.vis-check.missing { color: var(--ember); }
.vis-check .vis-check-icon {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
}
.vis-check.ok .vis-check-icon { background: var(--jade-bg); }
.vis-check.missing .vis-check-icon { background: var(--ember-bg); }
.vis-check .vis-prod-only {
  font-size: 9px; font-family: var(--font-mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--text3);
  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px;
}

/* Dirty indicator (unsaved changes) */
.dirty-indicator {
  font-size: 12px; font-weight: 600; color: var(--ember);
  letter-spacing: 0.3px; align-self: center; white-space: nowrap;
  animation: dirtyPulse 1.6s ease-in-out infinite;
}
@keyframes dirtyPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* Tag picker on character page */
.tags-cloud {
  display: flex; flex-wrap: wrap; gap: 8px;
  min-height: 40px;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 500;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 99px;
  color: var(--text2); cursor: pointer; user-select: none;
  font-family: var(--font-mono); letter-spacing: 0.2px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tag-chip:hover { color: var(--text); border-color: var(--border2); }
.tag-chip.selected {
  background: var(--ember-bg); border-color: var(--ember); color: var(--ember);
}
/* Hidden from the site: still assignable, but dimmed and struck so nobody
   expects it to show up on the storefront. */
.tag-chip.hidden-tag { opacity: 0.55; border-style: dashed; text-decoration: line-through; }
.tag-chip.hidden-tag.selected { opacity: 0.75; }
.tag-chip-empty { color: var(--text3); font-size: 12px; padding: 6px 0; }

/* Early-access duration, shown only while the "coming soon" chip is on */
.early-access-box {
  margin-top: 16px; padding: 14px 16px;
  background: var(--ember-bg); border: 1px solid var(--ember);
  border-radius: var(--r);
}
.early-access-box .field { margin-bottom: 0; }
.early-access-box input { max-width: 140px; }

/* Tags manager modal */
.tags-manager-overlay {
  position: fixed; inset: 0; background: var(--modal-bg); z-index: 2500;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 60px; backdrop-filter: blur(6px);
}
.tags-manager-panel {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 16px;
  padding: 24px; max-width: 900px; width: 95%; max-height: 80vh;
  display: flex; flex-direction: column; gap: 14px;
}
.tags-manager-header {
  display: flex; align-items: center; justify-content: space-between;
}
.tags-manager-header h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
}
.tags-manager-list {
  overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg);
}
.tags-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.tags-table th {
  text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; color: var(--text3);
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--bg);
}
.tags-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.tags-table tr:last-child td { border-bottom: none; }
.tags-table tr:hover td { background: var(--bg3); }
.tags-table tr.dragging td { opacity: 0.45; background: var(--bg3); }
.tags-table tr.drop-target td { box-shadow: inset 0 2px 0 var(--ember); }
.tag-drag-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid var(--border);
  border-radius: 6px; color: var(--text3); cursor: grab;
  font-family: var(--font-mono); font-size: 12px; user-select: none;
}
.tag-drag-handle:active { cursor: grabbing; }
.tags-table .slug { font-family: var(--font-mono); font-size: 12px; color: var(--text3); }
.tags-table .filter-chip {
  display: inline-block; padding: 2px 8px; margin-right: 4px; margin-bottom: 2px;
  background: var(--bg3); border-radius: 4px; font-size: 11px;
  font-family: var(--font-mono); color: var(--text2);
}
.tags-table .actions { display: flex; gap: 4px; justify-content: flex-end; }
.tag-action-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; font-size: 11px; cursor: pointer; color: var(--text2);
}
.tag-action-btn:hover { border-color: var(--border2); color: var(--text); }
.tag-action-btn.danger:hover { color: var(--rose); border-color: var(--rose); }
.tags-table tr.tag-hidden td { color: var(--text3); }
.tag-hidden-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.3px;
  background: var(--bg3); border: 1px dashed var(--border2); color: var(--text3);
  vertical-align: middle;
}

.tag-form {
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.tag-form-row { display: flex; gap: 10px; }
.tag-form-row .field { flex: 1; margin-bottom: 0; }
.tag-form-checkboxes {
  display: flex; flex-wrap: wrap; gap: 14px; padding-top: 4px;
}
.tag-form-checkbox {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text2); cursor: pointer;
}
.tag-form-checkbox input { width: 14px; height: 14px; accent-color: var(--ember); }

/* LoRA tab */
.lora-runs-row {
  display: flex; align-items: center; gap: 8px;
}
.lora-runs-row select {
  flex: 1; padding: 9px 30px 9px 14px; background-color: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text); font-size: 13px; cursor: pointer;
  appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 12px center;
}
.lora-runs-row select:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-bg);
}
.lora-history-panel {
  margin-top: 12px; padding: 14px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
}
.lora-stage-block {
  margin-bottom: 14px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
.lora-stage-block > summary {
  position: relative; display: flex; align-items: center; min-height: 56px;
  padding: 11px 44px 11px 14px; cursor: pointer; list-style: none;
  color: var(--text2);
}
.lora-stage-block > summary::-webkit-details-marker { display: none; }
.lora-stage-block > summary::after {
  content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text3); font-family: var(--font-mono); font-size: 18px;
}
.lora-stage-block[open] > summary::after { content: '−'; }
.lora-stage-block > summary span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lora-stage-block > summary strong { color: var(--text); font-size: 13px; }
.lora-stage-block > summary small {
  color: var(--text3); font-size: 11px; font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lora-stage-block-body { padding: 14px; border-top: 1px solid var(--border); }
.lora-dataset-review, .lora-training-status { margin: 16px 0; }
.lora-stage-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.lora-stage-heading .section-title { margin-bottom: 3px; }
.lora-stage-footer { display: flex; justify-content: flex-end; margin-top: 16px; }
.lora-inline-empty {
  padding: 14px; color: var(--text3); font-size: 12px; line-height: 1.5;
  background: var(--bg3); border: 1px dashed var(--border); border-radius: var(--r);
}
.lora-artifact-card {
  padding: 14px; margin-bottom: 14px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r);
  font-family: var(--font-mono); font-size: 12px; word-break: break-all;
}
.lora-artifact-card .field-hint { margin-bottom: 6px; font-family: var(--font-body); }
.lora-stage-card {
  margin-bottom: 14px; padding: 14px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: var(--r);
}
details.lora-stage-card { padding: 0; overflow: hidden; }
.lora-stage-card > summary {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px;
  cursor: pointer; list-style: none; font-weight: 600; color: var(--text2);
}
.lora-stage-card > summary::-webkit-details-marker { display: none; }
.lora-stage-card-body { padding: 0 14px 14px; }
.lora-stage-card-body .field-hint { margin-bottom: 10px; }
.lora-stage-card-title { margin-bottom: 12px; color: var(--text2); font-weight: 600; }
.lora-stage-state {
  font-family: var(--font-mono); font-size: 10px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.lora-test-fields {
  display: grid; grid-template-columns: minmax(0, 1fr) 140px 180px; gap: 12px;
}
.lora-test-fields .field { margin: 0; }
.lora-test-fields textarea { min-height: 72px; resize: vertical; }
.lora-test-fields input, .lora-test-fields textarea {
  width: 100%; padding: 9px 10px; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
}
.lora-test-fields input:focus, .lora-test-fields textarea:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-bg);
}
.lora-test-real-skin-controls {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px;
}
.lora-test-real-skin-controls input:disabled { opacity: 0.5; cursor: not-allowed; }
.lora-test-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 12px;
}
.lora-progress {
  height: 5px; margin-top: 12px; overflow: hidden; background: var(--bg);
  border-radius: 99px;
}
.lora-progress > div {
  width: 0; height: 100%; background: var(--ember); transition: width 180ms ease;
}
.lora-test-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px; margin-top: 14px;
}
.lora-test-result {
  position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r);
}
.lora-test-result img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.lora-test-result-meta { padding: 8px; font-size: 10px; color: var(--text3); }
.lora-test-result.failed { border-color: rgba(232,88,136,0.35); }
.lora-test-result.failed .lora-test-result-meta { color: var(--rose); }
.lora-test-remove {
  position: absolute; z-index: 2; top: 7px; right: 7px; width: 28px; height: 28px;
  display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,0.24);
  border-radius: 50%; color: #fff; background: rgba(14,14,17,0.72); cursor: pointer;
  font-size: 19px; line-height: 1; backdrop-filter: blur(5px);
}
.lora-test-remove:hover { background: var(--rose); border-color: var(--rose); }
.lora-test-log-details {
  margin-top: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg2);
}
.lora-test-log-details > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; list-style: none; color: var(--text3); font-size: 12px;
}
.lora-test-log-details > summary::-webkit-details-marker { display: none; }
.lora-test-log-details[open] > summary { border-bottom: 1px solid var(--border); }
.lora-test-log-details .lora-log { border: 0; border-radius: 0 0 var(--r) var(--r); }

@media (max-width: 760px) {
  .lora-test-fields { grid-template-columns: 1fr; }
}
.lora-create {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
}
.lora-create-ref {
  display: flex; flex-direction: column; gap: 8px;
}
.lora-create-fields .field { margin-bottom: 0; }
.lora-create-fields .field label {
  margin-bottom: 4px; font-size: 11px; letter-spacing: 0.2px;
}
.lora-create-fields input,
.lora-create-fields select {
  padding: 7px 26px 7px 10px; font-size: 12px;
}
.lora-opt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 10px;
}
.lora-run-opts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
@media (max-width: 900px) {
  .lora-create { grid-template-columns: 1fr; }
  .lora-opt-grid, .lora-run-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lora-ref-area {
  display: flex; gap: 14px; align-items: flex-start;
}
.lora-ref-area > .btn { flex-shrink: 0; }
.lora-ref-preview {
  width: 120px; aspect-ratio: 3/4; background: var(--bg3);
  border: 1px dashed var(--border2); border-radius: var(--r); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lora-ref-preview img { width: 100%; height: 100%; object-fit: cover; }
.lora-ref-empty { color: var(--text3); font-size: 11px; text-align: center; padding: 0 12px; line-height: 1.5; }
.lora-progress-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.lora-progress-bar {
  width: 100%; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden;
  margin-bottom: 8px;
}
.lora-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--ember) 0%, var(--ember2) 100%);
  transition: width 0.3s ease-out;
}
.lora-progress-stats {
  font-size: 11px; color: var(--text3); font-family: var(--font-mono);
  letter-spacing: 0.4px; margin-bottom: 16px;
}
.lora-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
}
.lora-cell {
  position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden;
  background: var(--bg3); border: 1px solid var(--border);
}
.lora-cell.pending::before, .lora-cell.generating::before {
  /* Shimmer wave: bright sliver scrubs across the cell while waiting. */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(232,96,76,0.18) 50%, transparent 70%);
  background-size: 200% 100%; animation: loraShimmer 1.4s linear infinite;
}
@keyframes loraShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.lora-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 0.3s;
}
.lora-cell.deleted img { opacity: 0.25; filter: grayscale(0.8); }
.lora-cell.failed {
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--rose); font-size: 11px; font-family: var(--font-mono);
  padding: 8px; text-align: center;
}
.lora-cell .lora-score {
  position: absolute; left: 6px; top: 6px;
  padding: 2px 7px; border-radius: 99px; font-size: 10px;
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.3px;
  background: rgba(0,0,0,0.65); color: #fff;
}
.lora-cell .lora-score.low { background: rgba(232,96,76,0.85); }
.lora-cell .lora-del {
  position: absolute; right: 6px; top: 6px; width: 24px; height: 24px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 14px; line-height: 1;
}
.lora-cell .lora-del:hover { background: var(--rose); }
.lora-cell.deleted .lora-del { background: rgba(60,212,144,0.85); }
.lora-cell.deleted .lora-del::before { content: '↻'; }
.lora-cell.deleted .lora-del span { display: none; }
.lora-cell img { cursor: zoom-in; }

/* Retry sits opposite the drop button so the two cannot be misclicked for each
   other — one is cheap and reversible, the other spends an API call. */
.lora-cell .lora-retry {
  position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 13px; line-height: 1;
  opacity: 0; transition: opacity 0.15s;
}
.lora-cell:hover .lora-retry { opacity: 1; }
.lora-cell .lora-retry:hover { background: var(--ember); }
.lora-cell.failed .lora-retry { opacity: 1; }

.lora-steps { flex-wrap: wrap; }

.lora-bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin: 12px 0;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
}
.lora-bulk-sep { width: 1px; height: 20px; background: var(--border2); }
.lora-bulk-label { font-size: 12px; color: var(--text2); }
.lora-bulkbar input[type="number"] {
  width: 64px; padding: 5px 8px; font-size: 12px; font-family: var(--font-mono);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text);
}
.lora-bulkbar input[type="number"]:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-bg);
}
.lora-bulk-hint {
  font-size: 11px; color: var(--text3); flex: 1 1 240px; line-height: 1.5;
}

/* Full-size review. Fixed rather than absolute so the overlay is not clipped by
   the panel's own scroll container. */
.lora-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* One opaque panel, not floating chrome: at 82% backdrop the page behind still
   shows through translucent controls and the overlay stops reading as modal. */
.lora-lightbox-inner {
  display: flex; flex-direction: column;
  max-width: min(900px, 92vw); max-height: 92vh;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.lora-lightbox-inner img {
  max-width: 100%; max-height: 66vh; object-fit: contain;
  background: var(--bg3); display: block;
}
.lora-lightbox-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border);
}
.lora-lightbox-meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--text2);
}
.lora-lightbox-actions { display: flex; gap: 6px; }
.lora-lightbox-caption {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: var(--text3); max-height: 96px; overflow-y: auto;
  background: var(--bg); padding: 8px 12px; border-top: 1px solid var(--border);
}
.lora-lightbox-caption:empty { display: none; }

.lora-caption-preview {
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--bg); padding: 4px 0; max-height: 260px; overflow-y: auto;
}
.lora-caption-row {
  display: flex; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.lora-caption-row:last-child { border-bottom: none; }
.lora-caption-idx {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  flex-shrink: 0; padding-top: 1px;
}
.lora-caption-texts { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lora-caption-before {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text3); text-decoration: line-through; word-break: break-word;
}
.lora-caption-after {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text); word-break: break-word;
}

.lora-train-summary {
  padding: 12px 14px; margin: 14px 0;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r);
  font-size: 13px; color: var(--text2);
}
.lora-train-summary code {
  font-family: var(--font-mono); font-size: 12px; color: var(--ember);
}
.lora-summary-warn { color: var(--ember); }

.lora-advanced {
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 14px; background: var(--bg);
}
.lora-advanced > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2);
}
.lora-adv-group { margin-top: 14px; }
.lora-adv-group-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text3); margin-bottom: 8px;
}
.lora-adv-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px;
}
.lora-adv-field label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; color: var(--text2); margin-bottom: 4px;
}
.lora-adv-range {
  font-family: var(--font-mono); font-size: 10px; color: var(--text3);
}
.lora-adv-field input[type="number"], .lora-adv-field select {
  width: 100%; padding: 7px 10px; font-size: 12px; font-family: var(--font-mono);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text);
}
.lora-adv-field input:focus, .lora-adv-field select:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-bg);
}
/* An overridden value is the one thing worth spotting at a glance in a form
   of thirty defaults. */
.lora-adv-field.changed label { color: var(--ember); }
.lora-adv-field.changed input[type="number"],
.lora-adv-field.changed select { border-color: var(--ember); }

.lora-lease {
  font-family: var(--font-mono); font-size: 12px; padding: 4px 10px;
  border-radius: 99px; background: var(--bg3); color: var(--text2);
}
.lora-lease.warn { background: var(--ember-bg); color: var(--ember); font-weight: 600; }

.lora-sample-strip {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px;
}
.lora-sample-strip .lora-cell { width: 140px; flex-shrink: 0; }

.lora-log {
  margin: 0; padding: 10px 12px; max-height: 180px; overflow: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  color: var(--text2); white-space: pre-wrap; word-break: break-word;
}
.lora-log.has-error { color: var(--rose); border-color: rgba(232,88,136,0.35); }

.lora-job-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  margin-bottom: 8px; cursor: pointer; background: var(--bg);
}
.lora-job-row:hover { border-color: var(--border2); }
.lora-job-row.active { border-color: var(--ember); background: var(--ember-bg); }
.lora-job-status {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 3px 8px; border-radius: 99px; flex-shrink: 0;
  background: var(--bg3); color: var(--text2);
}
.lora-job-status.s-trained { background: var(--jade-bg); color: var(--jade); }
.lora-job-status.s-finished { background: var(--jade-bg); color: var(--jade); }
.lora-job-status.s-failed,
.lora-job-status.s-cancelled { background: rgba(232,88,136,0.15); color: var(--rose); }
.lora-job-status.s-rejected { background: var(--ember-bg); color: var(--ember); }
.lora-job-status.s-expired { background: var(--ember-bg); color: var(--ember); }
.lora-job-main { flex: 1; min-width: 0; }
.lora-job-name { font-size: 13px; color: var(--text); }
.lora-job-name code { font-family: var(--font-mono); font-size: 12px; color: var(--ember); }
.lora-job-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.lora-job-artifact {
  font-family: var(--font-mono); font-size: 11px; color: var(--text3);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Making a rented GPU visible is half of not leaking one. */
.lora-gpu-banner {
  padding: 12px 14px; margin-bottom: 14px; border-radius: var(--r);
  background: var(--bg3); border: 1px solid var(--border);
  font-size: 13px; color: var(--text2);
}
.lora-gpu-banner.danger { background: rgba(232,88,136,0.10); border-color: var(--rose); }
.lora-gpu-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lora-gpu-chip {
  font-family: var(--font-mono); font-size: 11px; padding: 3px 8px;
  border-radius: 99px; background: var(--bg); border: 1px solid var(--border);
}
.lora-gpu-chip.orphan { border-color: var(--rose); color: var(--rose); }

/* Marks a field owned by work that has not landed yet — see the WD14 slot. */
.field-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 99px; font-size: 9px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; vertical-align: middle;
  background: var(--ember-bg); color: var(--ember);
}

@media (max-width: 800px) {
  .card-media-grid { grid-template-columns: 1fr; }
}

/* Media library + packs */
.media-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.media-toolbar .spacer { flex: 1; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.media-cell {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r); overflow: hidden;
  background: var(--bg3); border: 1px solid var(--border); cursor: pointer;
}
.media-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-cell.archived img { opacity: 0.3; filter: grayscale(0.8); }
.media-cell.selected { outline: 2px solid var(--rose); outline-offset: -2px; }
.media-cell .video-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 26px;
}
.media-cell .sel-badge {
  position: absolute; left: 6px; top: 6px; min-width: 22px; height: 22px; border-radius: 99px;
  background: var(--rose); color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; padding: 0 6px; z-index: 2;
}
.media-cell .type-badge {
  position: absolute; right: 6px; top: 6px; padding: 2px 7px; border-radius: 99px;
  font-size: 10px; font-family: var(--font-mono); background: rgba(0,0,0,0.65); color: #fff;
}
.media-cell .flag-badge {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 99px;
  font-size: 10px; font-family: var(--font-mono); background: rgba(0,0,0,0.55); color: #fff;
}
.media-cell .cell-actions { position: absolute; right: 6px; bottom: 6px; display: none; gap: 4px; z-index: 2; }
.media-cell:hover .cell-actions { display: flex; }
.media-cell .cell-btn {
  min-width: 24px; height: 24px; border: none; border-radius: 99px; cursor: pointer;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 12px; line-height: 1; padding: 0 6px;
}
.media-cell .cell-btn:hover { background: var(--rose); }
.pack-card { border: 1px solid var(--border); border-radius: var(--r); padding: 12px; margin-bottom: 10px; background: var(--inset-bg); }
.pack-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pack-card-head .pack-title { font-weight: 600; }
.pack-card-head .spacer { flex: 1; }
.pack-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.pack-thumb {
  width: 54px; height: 72px; border-radius: 6px; object-fit: cover;
  background: var(--bg); border: 1px solid var(--border);
}
.pack-thumb-ph {
  width: 54px; height: 72px; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 16px;
}
.pack-sel-item { position: relative; }
.pack-sel-item .pack-sel-rm {
  position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border: none;
  border-radius: 50%; cursor: pointer; background: var(--rose); color: #fff; font-size: 10px; line-height: 1;
}
.pack-status { padding: 2px 8px; border-radius: 99px; font-size: 11px; font-family: var(--font-mono); font-weight: 600; }
.pack-status.draft { background: var(--bg4); color: var(--text2); }
.pack-status.published { background: var(--jade-bg); color: var(--jade); }
.pack-status.archived { background: rgba(232,96,76,0.12); color: var(--rose); }
/* Gallery packs carry several chips, not one status: visibility (`published` /
   `draft`, shared with chat packs above, plus `nowhere`), whether the consumer
   has our latest contents, and one chip per surface the pack is marked for —
   Media Gallery and the Private Content showcase. */
.pack-status.unsent { background: var(--bg4); color: var(--text2); }
.pack-status.stale { background: var(--gold-bg); color: var(--gold); }
/* Published, but marked for neither surface — live and unreachable. The one
   state that deserves the error colour. */
.pack-status.nowhere { background: rgba(232,96,76,0.12); color: var(--rose); }
/* Deliberately not the green of `published`: a surface is a destination, not
   a stronger degree of being published. Two hues so the pair reads apart. */
.pack-status.gallery { background: var(--sky-bg); color: var(--sky); }
.pack-status.showcase { background: var(--violet-bg); color: var(--violet); }
.pack-card-pending { border-left: 2px solid var(--gold); }
.pack-price { font-family: var(--font-mono); font-size: 12px; color: var(--gold); }
.pack-move { display: flex; gap: 2px; }
.pack-move .btn { padding: 4px 8px; line-height: 1; }
.pack-move .btn[disabled] { opacity: 0.35; cursor: default; }
/* Its own row under the card head: the head is already full, and the switch
   needs room for the sentence explaining what the pack will and will not do.
   The same row is reused in the pack editor, deliberately *outside* a .field —
   `.field label { display: block }` outranks the flex below and
   `.field input { width: 100% }` would stretch the checkbox across the form,
   the trap .visibility-list documents above. */
.pack-showcase-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.pack-showcase-row .field-hint { margin-top: 0; }
.pack-showcase { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text2); cursor: pointer; }
.pack-showcase input[type="checkbox"] { width: 16px; height: 16px; flex: none; cursor: pointer; }
.pack-showcase-pos {
  width: 66px; padding: 3px 6px; font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--border2); border-radius: 6px; background: var(--bg2); color: var(--text);
}
.pack-sel-item .pack-sel-dur {
  position: absolute; left: 3px; bottom: 3px; padding: 1px 4px; border-radius: 4px;
  background: rgba(0,0,0,0.65); color: #fff; font-family: var(--font-mono); font-size: 9px;
}

/* Every pack this character has, summed — the number an operator is building
   toward, kept next to the list rather than inside a card. */
.gallery-totals:not(:empty) {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--inset-bg);
}
.gallery-total-main { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--gold); }
.gallery-total-main span { font-size: 12px; color: var(--text3); font-weight: 400; }
.gallery-total-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text2); font-size: 12px; }
.gallery-total-pending { color: var(--gold); font-size: 12px; }
.media-modal-overlay {
  /* Above the narrow-window sidebar drawer (1500) and its FAB (1600), which
     used to float on top of this modal. */
  position: fixed; inset: 0; background: var(--modal-bg); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  backdrop-filter: blur(6px);
}
.media-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: min(1100px, 100%); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.media-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.media-modal-body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.media-modal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }

/* LoRA placeholder */
.lora-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 40px; text-align: center; color: var(--text3);
  background: var(--surface); border: 1px dashed var(--border2); border-radius: var(--r-lg);
}
.lora-placeholder-icon { font-size: 40px; opacity: 0.3; margin-bottom: 16px; }
.lora-placeholder h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--text2); margin-bottom: 8px;
}
.lora-placeholder p { font-size: 13px; max-width: 360px; line-height: 1.6; }

/* Details uses the extra desktop width for navigation, not stretched text. */
.details-layout {
  display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 24px;
  align-items: start;
}
.details-content { min-width: 0; }
.details-nav {
  position: sticky; top: 104px; display: flex; flex-direction: column; gap: 3px;
  padding: 6px; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.details-nav button {
  width: 100%; min-height: 36px; padding: 0 11px; border: none; border-radius: 8px;
  background: transparent; color: var(--text3); font-size: 12px; font-weight: 600;
  text-align: left; line-height: 1;
}
.details-nav button:hover { color: var(--text); background: var(--bg3); }
.details-nav button.active {
  color: var(--ember); background: var(--ember-bg);
  box-shadow: inset 2px 0 0 var(--ember);
}
.details-content > .section { scroll-margin-top: 104px; }
@media (max-width: 1180px) {
  .details-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .details-nav {
    top: 96px; z-index: 20; flex-direction: row; overflow-x: auto;
    scrollbar-width: none;
  }
  .details-nav::-webkit-scrollbar { display: none; }
  .details-nav button { width: auto; flex: none; padding: 0 13px; }
}

/* Section cards */
.section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color 0.3s;
}
[data-theme="light"] .section { box-shadow: var(--shadow-sm); }
.section:hover { border-color: var(--border2); }
.section-title {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: -0.2px; color: var(--text); margin-bottom: 18px;
}
.danger-zone {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-color: color-mix(in srgb, var(--rose) 32%, var(--border));
  background: color-mix(in srgb, var(--rose) 4%, var(--surface));
}
.danger-zone:hover { border-color: color-mix(in srgb, var(--rose) 52%, var(--border)); }
.danger-zone-title { font-size: 14px; font-weight: 650; color: var(--text); }
.danger-zone .field-hint { margin-top: 4px; }
.danger-zone .btn { flex: none; }

/* Fields */
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px;
  color: var(--text2); letter-spacing: 0.1px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 10px 14px; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 14px;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--border2); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text3); }
.field input[readonly] { opacity: 0.6; cursor: not-allowed; }
.field textarea { resize: vertical; min-height: 80px; line-height: 1.65; }
.field textarea.large { min-height: 130px; }
.field select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
  text-overflow: ellipsis;
}
/* Selects outside .field (toolbars, modal and panel headers) used to fall back
   to the raw OS widget next to the styled ones. Same look, smaller metrics. */
.media-toolbar select,
.media-modal-head select,
select.search-input {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-color: var(--field-bg); color: var(--text); font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 8px 30px 8px 12px;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 11px center;
  text-overflow: ellipsis;
}
.media-toolbar select:focus,
.media-modal-head select:focus,
select.search-input:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 2px var(--ember-bg);
}
.field-hint { font-size: 11px; color: var(--text3); margin-top: 6px; }
.field-row { display: flex; gap: 16px; }
.field-row .field { flex: 1; }
.field-row.wrap { flex-wrap: wrap; }
.field-row.wrap .field { flex: 1 1 160px; min-width: 140px; }
.field-uuid input { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.3px; }
.req { color: var(--ember); font-weight: 600; }

/* Style pills */
.style-pills { display: flex; gap: 8px; }
.style-pill {
  flex: 1; padding: 10px; text-align: center; border-radius: var(--r);
  background: var(--field-bg); border: 1px solid var(--border); cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text2); transition: all 0.15s var(--ease);
}
.style-pill:hover { border-color: var(--border2); color: var(--text); }
.style-pill.active { border-color: var(--ember); color: var(--ember); background: var(--ember-bg); }

/* Personality inner tabs */
.p-tabs {
  display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px;
  background: var(--bg); border-radius: var(--r); padding: 3px;
  border: 1px solid var(--border);
}
.p-tab {
  flex: 1; padding: 9px 12px; text-align: center; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--text3); cursor: pointer;
  border: none; background: none; transition: all 0.2s var(--ease);
  letter-spacing: 0.2px; white-space: nowrap;
}
.p-tab:hover { color: var(--text2); background: color-mix(in srgb, var(--text) 7%, transparent); }
.p-tab.active {
  background: var(--bg4); color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.personality-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.personality-header .section-title { margin-bottom: 0; }
.personality-mode {
  display: inline-flex; gap: 3px; padding: 3px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r);
}
.personality-mode button {
  border: none; background: transparent; color: var(--text3); border-radius: 7px;
  font-size: 11px; font-weight: 700; padding: 7px 12px; letter-spacing: 0.8px;
}
.personality-mode button.active {
  background: var(--bg4); color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.personality-mode-hidden { display: none !important; }
.p-panel { display: none; }
.p-panel.active { display: block; }
.p-panel textarea {
  width: 100%; padding: 11px 16px; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 14px; resize: vertical; line-height: 1.65;
}
.p-panel textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
.p-panel textarea::placeholder { color: var(--text3); }

/* Compact setting rail: one stable baseline for all boolean controls. */
.settings-toggle-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  margin-bottom: 20px; overflow: hidden; border: 1px solid var(--border);
  border-radius: 10px; background: var(--border);
}
.setting-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0; min-height: 52px; padding: 0 12px; background: var(--bg);
  color: var(--text2); cursor: pointer; font-size: 12px; font-weight: 550;
  user-select: none; transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.setting-toggle:hover { background: var(--bg3); color: var(--text); }
.setting-toggle > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggles-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.toggles-row:last-child { margin-bottom: 0; }
.toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.toggles-row .toggle-row { margin-bottom: 0; }
.lora-dataset-toggles {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px; align-items: center; margin: 16px 0 0;
}
.lora-dataset-toggles .toggle-row { min-width: 0; }
.lora-dataset-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
}
.toggle-row > label:not(.switch) {
  color: var(--text2); cursor: pointer; font-size: 13px; user-select: none;
}

/* Toggle */
.switch { position: relative; width: 34px; height: 18px; flex: none; }
.switch input {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.switch .sl {
  position: absolute; inset: 0; background: var(--switch-off); border-radius: 999px;
  cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
  border: 1px solid color-mix(in srgb, var(--text3) 34%, var(--border)); overflow: hidden;
}
.switch .sl::before {
  content: ''; position: absolute; width: 12px; height: 12px;
  left: 2px; top: 2px; background: var(--switch-thumb); border-radius: 50%;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.switch input:checked + .sl { background: var(--ember); border-color: var(--ember); }
.switch input:checked + .sl::before { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .sl { box-shadow: 0 0 0 3px var(--ember-bg), 0 0 0 1px var(--ember); }
@media (max-width: 1180px) {
  .settings-toggle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .lora-dataset-toggles { grid-template-columns: 1fr; gap: 12px; }
  .lora-dataset-actions .btn { width: 100%; justify-content: center; }
}

/* Slider */
.slider-row { display: flex; align-items: center; gap: 16px; }
.slider-row input[type="range"] {
  flex: 1; -webkit-appearance: none; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--bg4) 0%, var(--bg4) 100%);
  outline: none;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ember); cursor: pointer;
  box-shadow: 0 2px 8px rgba(232,96,76,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
}
.slider-row input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15); box-shadow: 0 4px 16px rgba(232,96,76,0.5);
}
.slider-val {
  min-width: 44px; text-align: center; font-family: var(--font-mono);
  font-size: 14px; font-weight: 500; color: var(--ember);
  background: var(--ember-bg); padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--border);
}

/* Enhance card */
.enhance-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ember-bg), var(--gold-bg));
  border: 1px solid var(--border2); border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 24px;
}
.enhance-card::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ember), var(--gold));
  opacity: 0.6;
}
.enhance-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--ember);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.enhance-card textarea {
  width: 100%; padding: 12px 16px; background: rgba(0,0,0,0.3); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 14px; min-height: 56px;
  resize: vertical; line-height: 1.5; margin-bottom: 12px;
}
.enhance-card textarea::placeholder { color: var(--text3); }
.enhance-card textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
.enhance-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--ember) 0%, #d44a38 100%);
  color: #fff; border: none; border-radius: var(--r); font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(232,96,76,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  letter-spacing: 0.3px;
}
.enhance-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(232,96,76,0.4); }
.enhance-btn:disabled { opacity: 0.5; cursor: wait; transform: none; box-shadow: none; }

/* Chat */
.chat-container {
  display: flex; flex-direction: column; height: calc(100vh - 200px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.chat-messages {
  flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.chat-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 13px;
}
.chat-msg {
  max-width: 75%; padding: 10px 16px; border-radius: 14px;
  font-size: 14px; line-height: 1.55; animation: msgIn 0.2s var(--ease);
  word-wrap: break-word;
}
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } }
.chat-msg.user {
  align-self: flex-end; background: var(--ember); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.assistant {
  align-self: flex-start; background: var(--bg3); color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-msg.typing {
  align-self: flex-start; background: var(--bg3); color: var(--text3);
  font-style: italic;
}
.chat-input-row {
  display: flex; gap: 10px; padding: 16px; border-top: 1px solid var(--border);
  background: var(--bg2);
}
.chat-input-row textarea {
  flex: 1; padding: 10px 16px; background: var(--field-bg); border: 1px solid var(--border);
  border-radius: var(--r); color: var(--text); font-size: 14px; font-family: var(--font-body);
  resize: none; line-height: 1.5; max-height: 120px;
}
.chat-input-row textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--ring); }
.chat-input-row textarea::placeholder { color: var(--text3); }
.chat-controls {
  display: flex; align-items: center; gap: 16px; padding: 8px 16px 12px;
  background: var(--bg2); font-size: 12px;
}
.chat-control-label { display: flex; align-items: center; gap: 6px; color: var(--text3); cursor: pointer; }
.chat-control-label input { accent-color: var(--ember); }

/* History panel */
.history-overlay {
  position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: flex-end;
  background: var(--modal-bg); backdrop-filter: blur(4px); animation: fadeIn 0.15s;
}
.history-panel {
  width: 480px; max-width: 90vw; background: var(--bg2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; animation: slideLeft 0.25s var(--ease);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
}
@keyframes slideLeft { from { transform: translateX(100%); } }
.history-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.history-header h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.history-list { flex: 1; overflow-y: auto; padding: 12px; }
.history-item {
  padding: 14px 16px; border-radius: var(--r); margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  transition: all 0.15s;
}
.history-item:hover { border-color: var(--border2); background: var(--bg3); }
.history-date { font-family: var(--font-mono); font-size: 11px; color: var(--text3); margin-bottom: 6px; }
.history-fields { font-size: 12px; color: var(--text2); }
.history-actions { padding: 16px 24px; border-top: 1px solid var(--border); }

/* Reference image */
.ref-image-area { display: flex; gap: 20px; align-items: flex-start; }
.ref-image-preview {
  width: 140px; height: 180px; border-radius: var(--r); overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ref-image-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.ref-image-empty { color: var(--text3); font-size: 12px; text-align: center; padding: 12px; }
.ref-image-controls { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* Info grid */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-item { background: var(--bg); padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--border); }
.info-label {
  font-family: var(--font-mono); font-size: 10px; color: var(--text3); margin-bottom: 6px;
  font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
}
.info-value { font-size: 13px; font-weight: 500; }
.vision-ok { color: var(--jade); }
.vision-warning { color: var(--gold); font-size: 12px; }

.missing-banner {
  background: rgba(232,96,76,0.08); border: 1px solid rgba(232,96,76,0.2);
  border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px;
  font-size: 13px; color: var(--ember); display: none;
}
.missing-banner strong { font-weight: 700; }

/* ---- Toast ---- */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px; border-radius: 12px; font-size: 13px; font-weight: 500;
  animation: toastIn 0.35s var(--ease); min-width: 280px; max-width: 440px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border2);
  box-shadow: var(--shadow-lg);
}
.toast::before {
  content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1;
}
.toast-success::before { content: '\2713'; background: var(--jade-bg); color: var(--jade); box-shadow: 0 0 0 1px color-mix(in srgb, var(--jade) 40%, transparent); }
.toast-error::before { content: '!'; background: var(--ember-bg); color: var(--ember); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ember) 40%, transparent); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: var(--modal-bg); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); animation: fadeIn 0.15s;
}
.modal-box {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 20px;
  padding: 36px; max-width: 420px; width: 90%; text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5); animation: modalIn 0.25s var(--ease);
}
.modal-box h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.modal-box p { color: var(--text2); font-size: 14px; margin-bottom: 28px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(10px); } }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* Light mode: chat bubbles */
[data-theme="light"] .chat-msg.user { background: var(--ember); color: #fff; }
[data-theme="light"] .chat-msg.assistant { background: var(--bg3); }
[data-theme="light"] .enhance-card textarea { background: var(--bg); }
[data-theme="light"] .p-panel textarea { background: var(--bg); }

/* Theme toggle */
.theme-toggle {
  flex-direction: row !important; justify-content: flex-start !important; gap: 9px;
}
.theme-toggle > span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 14px; line-height: 1;
}

/* User badge */
.user-badge {
  display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1;
  font-size: 11px; color: var(--text3);
}
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px; background: var(--ember-bg);
  border: 1px solid color-mix(in srgb, var(--ember) 38%, var(--border));
  color: var(--ember); font-family: var(--font-mono); font-size: 10px; font-weight: 700;
}
.user-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-email {
  display: block; font-family: var(--font-mono); color: var(--text2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-roles {
  display: block; font-family: var(--font-mono); font-size: 9px;
  color: var(--text3); letter-spacing: 0.4px; text-transform: uppercase;
}

#auth-status { color: var(--text3); font-size: 13px; margin-bottom: 16px; }
#auth-error { margin-top: 12px; color: var(--ember); font-size: 12px; }
#auth-login-btn {
  margin-top: 8px; padding: 11px 22px; font-size: 14px; font-weight: 600;
  background: var(--ember); color: #fff; border: none; border-radius: var(--r);
  cursor: pointer;
}
#auth-login-btn:hover { background: var(--ember2); }

/* Crop modal */
.crop-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.crop-modal {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 16px;
  padding: 20px; max-width: 760px; width: 92%; max-height: 92vh;
  display: flex; flex-direction: column; gap: 14px;
}
.crop-modal-header {
  display: flex; align-items: center; justify-content: space-between;
}
.crop-modal-header h3 {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
}
.crop-modal-hint {
  font-size: 12px; color: var(--text3); line-height: 1.5;
}
.crop-canvas-wrap {
  position: relative; max-height: 60vh; min-height: 320px;
  background: #000; border-radius: var(--r); overflow: hidden;
}
.crop-canvas-wrap img,
.crop-canvas-wrap video { display: block; max-width: 100%; }
/* Blur-zone overlay sits inside Cropper's view box and shows where the site
   will paint a frosted-glass blur over the description text. 90/441 ≈ 20.41%
   of card height. We use real backdrop-filter so contributors see the actual
   blur, not just a darkening — matches how the user-facing card renders. */
.crop-blur-overlay {
  position: absolute; pointer-events: none; z-index: 5;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 100%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-top: 2px solid var(--ember);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.35);
}
.crop-blur-label {
  position: absolute; pointer-events: none; z-index: 6;
  font-size: 11px; font-family: var(--font-mono); font-weight: 700;
  color: #fff; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 4px;
  background: var(--ember);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.crop-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Mini dramas manager: the tag-manager overlay, widened and split into the
   list of dramas on the left and the editor for the selected one on the
   right. Chapters are rows in a .tags-table; each row edits in place. */
.dramas-panel { max-width: 1200px; max-height: 88vh; }
.dramas-layout { display: flex; gap: 16px; flex: 1; min-height: 0; }
.drama-list {
  width: 300px; flex: none; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--bg);
}
.drama-item {
  display: flex; gap: 10px; align-items: center; padding: 10px;
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.drama-item:last-child { border-bottom: none; }
.drama-item:hover { background: var(--bg3); }
.drama-item.active { background: var(--bg3); box-shadow: inset 2px 0 0 var(--ember); }
.drama-item.deleted { opacity: 0.5; }
.drama-item-body { flex: 1; min-width: 0; }
.drama-item-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drama-item-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 3px; font-size: 11px; color: var(--text3); }
.drama-cover, .chapter-thumb {
  width: 40px; height: 60px; flex: none; border-radius: 6px; object-fit: cover;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 14px;
}
.drama-cover-lg {
  width: 120px; height: 180px; flex: none; border-radius: var(--r); object-fit: cover;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text3);
}
.drama-editor { flex: 1; min-width: 0; overflow-y: auto; padding-right: 4px; }
.drama-editor-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.drama-editor-head h4 {
  flex: 1; min-width: 120px; font-family: var(--font-display); font-size: 16px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drama-meta { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.drama-meta .drama-fields { flex: 1; min-width: 0; }
.drama-chapters-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 8px; }
.drama-chapters-head .section-title { margin: 0; flex: 1; }
.chapter-input {
  width: 100%; padding: 5px 8px; font-size: 13px; color: var(--text);
  border: 1px solid var(--border2); border-radius: 6px; background: var(--bg2);
}
.chapter-input:focus { outline: none; border-color: var(--ember); }
.chapter-input { min-width: 160px; }
.chapter-input.price { width: 84px; min-width: 0; font-family: var(--font-mono); }
.chapter-info { font-family: var(--font-mono); font-size: 11px; color: var(--text3); white-space: nowrap; }
.chapter-free { color: var(--jade); }
.drama-upload { margin-top: 8px; }
.drama-upload-bar { height: 6px; border-radius: 3px; background: var(--bg4); overflow: hidden; margin-top: 6px; }
.drama-upload-bar i { display: block; height: 100%; width: 0; background: var(--ember); transition: width 0.2s var(--ease); }
@media (max-width: 900px) {
  .dramas-layout { flex-direction: column; }
  .drama-list { width: auto; max-height: 220px; }
  .drama-meta { flex-direction: column; align-items: stretch; }
  .drama-meta .drama-fields { width: 100%; }
}