/* admin.css — Karabas: a 1920s night cabaret of dolls.
   The theme lives in the frame (header, curtain, titles, empty screens, login);
   tables, forms and numbers stay plain and readable. See docs/design.md. */

:root {
  color-scheme: dark;

  /* Backgrounds */
  --wine: #24070d;          /* page */
  --wine-deep: #160407;     /* header, fields, deep plates */
  --bordeaux: #3d0f18;      /* panels, active menu item */
  --velvet: #7a1622;        /* curtain and large decorative planes */
  --velvet-dark: #4e0c15;
  --velvet-light: #95202f;

  /* Light and gold: gold only for what matters */
  --gold: #e3b25a;          /* logo, key numbers, primary button, deco corners */
  --gold-dark: #9c7333;
  --limelight: #f3d48c;     /* lamps, hover, active icons */

  /* Text (WCAG AA on every background it is used on) */
  --ivory: #f1e2c4;         /* main text */
  --text-2: #cdb38a;        /* secondary text */
  --bronze: #a8875c;        /* captions and small spaced labels */

  /* Lines */
  --line: #6e4a26;          /* thin frames */
  --divider: #4a1a22;       /* row and section dividers */
  --field-border: #94693a;  /* form fields: 3:1 against the field */

  /* States */
  --ok: #8fc48a;
  --error: #e0524a;
  --error-text: #ee6b62;    /* error text: AA on panels too */

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 4px;
  --slow: 1.8s;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ivory);
  font: 15px/1.55 var(--font-ui);
  /* A faint warm glow from the stage lights, never under the content itself */
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(122, 22, 34, 0.45), transparent 70%),
    var(--wine);
  background-attachment: fixed;
}

a { color: inherit; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; color: var(--text-2); }
.numeric { font-variant-numeric: tabular-nums; }
.hint { color: var(--bronze); font-size: 13px; }
p.hint { margin: 0; }

/* ---------- Header: marquee, menu, ticket ---------- */

.marquee {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 10px 24px;
  background: var(--wine-deep);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--gold);
  font: 600 25px/1 var(--font-display);
  letter-spacing: 0.02em;
}
.mark { width: 26px; height: 26px; }

.nav { display: flex; gap: 4px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-2);
  transition: color 0.3s, background-color 0.3s;
}
.nav a > span { display: flex; flex-direction: column; line-height: 1.2; }
.nav-title { font-weight: 600; color: var(--ivory); }
.nav-hint { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.nav .icon { color: var(--gold); opacity: 0.75; }
.nav a:hover .icon, .nav a[aria-current="page"] .icon { color: var(--limelight); opacity: 1; }
.nav a:hover .nav-title { color: var(--limelight); }
.nav a[aria-current="page"] { background: var(--bordeaux); box-shadow: inset 0 -2px 0 var(--gold); }

.icon { width: 20px; height: 20px; flex: none; }

.marquee-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Balance as a theatre ticket: notched sides, gold frame */
.ticket {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 18px;
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: 3px;
  background: var(--bordeaux);
  -webkit-mask:
    radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle 6px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 6px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.ticket-amount { font: 600 18px/1 var(--font-display); color: var(--gold); font-variant-numeric: tabular-nums lining-nums; }
.ticket-unit { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.ticket:hover .ticket-amount { color: var(--limelight); }

.icon-button {
  display: flex;
  padding: 6px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--gold);
  cursor: pointer;
}
.icon-button:hover { color: var(--limelight); }

/* ---------- Curtain valance: velvet folds, scalloped edge, gold cord ---------- */

.valance {
  position: relative;
  height: 24px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), transparent 60%),
    repeating-linear-gradient(90deg,
      var(--velvet-dark) 0, var(--velvet) 10px, var(--velvet-light) 18px, var(--velvet) 26px, var(--velvet-dark) 36px);
  /* A 6px band plus a row of hanging scallops */
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% 6px no-repeat,
    radial-gradient(circle 18px at 18px 6px, #000 97%, transparent) top left / 36px 24px repeat-x;
  mask:
    linear-gradient(#000, #000) top / 100% 6px no-repeat,
    radial-gradient(circle 18px at 18px 6px, #000 97%, transparent) top left / 36px 24px repeat-x;
  pointer-events: none;
}
.valance::before {
  content: "";
  position: absolute;
  inset: 2px 0 auto;
  height: 3px;
  background: repeating-linear-gradient(135deg, var(--gold) 0 3px, var(--gold-dark) 3px 5px);
}

/* ---------- Footlights: a row of warm lamps as a divider ---------- */

.footlights {
  height: 16px;
  margin: 10px 0 24px;
  background:
    radial-gradient(circle at 50% 40%, var(--limelight) 0 2px, rgba(243, 212, 140, 0.4) 3px, transparent 7px) center top / 34px 12px repeat-x,
    linear-gradient(var(--divider), var(--divider)) bottom / 100% 1px no-repeat;
  animation: footlights 8s ease-in-out infinite;
}
@keyframes footlights {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* ---------- Page ---------- */

.page { max-width: 1200px; margin: 0 auto; padding: 22px 16px 72px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
h1 {
  margin: 0;
  font: 600 36px/1.1 var(--font-display);
  color: var(--ivory);
  letter-spacing: 0.01em;
}
/* Under a page title: plain sans-serif, small serif italics read badly */
.subtitle {
  margin: 6px 0 0;
  font: 400 15px/1.4 var(--font-ui);
  color: var(--text-2);
}
.back { display: inline-block; margin-bottom: 14px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--limelight); }

/* Small spaced labels: playbill style */
.eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze);
  text-align: center;
}

/* Panels and section titles */
.panel {
  position: relative;
  background: var(--bordeaux);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.panel h2, .panel-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.panel h2::before, .panel-head h2::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.panel-head { margin: 28px 0 12px; }

/* Art-deco gold corners on key frames only (login, playbill, balance) */
.deco {
  --corner: 16px;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / var(--corner) 1px,
    linear-gradient(var(--gold), var(--gold)) top left / 1px var(--corner),
    linear-gradient(var(--gold), var(--gold)) top right / var(--corner) 1px,
    linear-gradient(var(--gold), var(--gold)) top right / 1px var(--corner),
    linear-gradient(var(--gold), var(--gold)) bottom left / var(--corner) 1px,
    linear-gradient(var(--gold), var(--gold)) bottom left / 1px var(--corner),
    linear-gradient(var(--gold), var(--gold)) bottom right / var(--corner) 1px,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1px var(--corner),
    var(--bordeaux);
  background-repeat: no-repeat;
  background-origin: border-box;
}

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack + .stack { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--divider); }
.stack-lg { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.row > label { flex: 1; min-width: 160px; }
.row > label.narrow { flex: 0 0 110px; min-width: 0; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Notices */
.notice {
  margin-bottom: 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  background: rgba(143, 196, 138, 0.08);
}
.notice-error { border-left-color: var(--error); background: rgba(224, 82, 74, 0.08); color: var(--error-text); }

/* ---------- Forms: plain and readable ---------- */

label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); }
label.checkbox { flex-direction: row; align-items: center; gap: 8px; color: var(--ivory); font-size: 15px; padding-bottom: 10px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ivory);
  background: var(--wine-deep);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  padding: 8px 10px;
}
input::placeholder, textarea::placeholder { color: var(--bronze); }
input[type=date] { color-scheme: dark; }  /* The calendar and its button in the dark theme */
.inline-form input[type=text] { width: 240px; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--limelight);
  outline-offset: 1px;
}
input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; }
label.inline-check { padding-bottom: 0; font-size: 14px; }
.prompt-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.file-button { cursor: pointer; }
.gallery-text { font-size: 12px; line-height: 15px; max-height: 72px; overflow: hidden; position: relative; }
.gallery-text p { margin: 0 0 3px; color: var(--text-2); }
.gallery-text b { color: var(--bronze); font-weight: 600; }
.gallery-text .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-text.expanded { max-height: none; }
.gallery-text.expanded .clamp { display: block; -webkit-line-clamp: unset; }
.gallery-text .expand { position: absolute; right: 0; bottom: 0; padding: 0 4px; background: var(--bordeaux); }
.gallery-text.expanded .expand { position: static; padding: 0; }
.meta-cell { white-space: nowrap; vertical-align: top; font-size: 12px; }
/* Where a gallery file came from: uploaded by the owner, or generated here */
.source-badge { display: inline-block; margin-bottom: 4px; padding: 1px 7px; border: 1px solid; border-radius: 999px; font-size: 11px; letter-spacing: 0.02em; }
.source-uploaded { color: var(--limelight); border-color: var(--gold-dark); }
.source-generated { color: var(--text-2); border-color: var(--line); }
.status-icon { display: inline-flex; color: var(--bronze); }
.status-icon .icon { width: 30px; height: 30px; }
.status-active { color: var(--ok); }
.thumb { position: relative; }
.play-badge { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); border: 1.5px solid #fff; pointer-events: none; }
.play-badge::after { content: ""; position: absolute; left: 9px; top: 6px; border-style: solid; border-width: 5.5px 0 5.5px 8px; border-color: transparent transparent transparent #fff; }
/* Save and Cancel of the settings: floating in the bottom left corner while there are changes */
.floating-actions { position: fixed; left: 20px; bottom: 20px; z-index: 39; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bordeaux); border: 1px solid var(--gold-dark); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); animation: call-in 0.25s ease-out; }
.floating-actions[hidden] { display: none; }
/* The doll's look: picture buttons (a figure, a head with hair, a colour, a line icon), words for the ethnicity */
.look-fields { position: relative; display: flex; flex-direction: column; gap: 14px; }
.dice { padding: 0 2px; border: 0; background: none; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.65; transition: opacity 0.2s, transform 0.2s; }
.dice:hover, .dice:focus-visible { opacity: 1; transform: rotate(-15deg); }
.birth-date { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--text-2); }
.birth-date input { width: 170px; }
.birth-date .age { color: var(--gold); font-variant-numeric: tabular-nums; }
.look-height input[type="range"] { flex: 1; min-width: 160px; width: auto; accent-color: var(--gold); }
.look-height .range-end { color: var(--bronze); }
.look-height output { min-width: 4.5em; }
.look-group { display: flex; flex-direction: column; gap: 6px; }
.look-group[hidden] { display: none; }
.look-profile { width: 34px; height: 48px; }
.look-group-label { color: var(--text-2); font-size: 13px; }
.look-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
.look-options-text { display: flex; flex-wrap: wrap; }
/* Her saved look in the words the models read, under the look */
.look-for-models { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.look-for-models p { margin: 0; line-height: 1.5; }
.look-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 4px 6px;
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
  background: var(--wine-deep);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.look-options-text .look-option { flex-direction: row; padding: 5px 12px; border-radius: 999px; font-size: 13px; }
.look-option:hover { border-color: var(--field-border); color: var(--ivory); }
.look-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.look-option:has(input:checked) { color: var(--gold); border-color: var(--gold); background: rgba(227, 178, 90, 0.1); }
.look-option:has(input:focus-visible) { outline: 2px solid var(--limelight); outline-offset: 1px; }
.look-icon { flex: none; width: 34px; height: 34px; }
.look-figure { width: 26px; height: 60px; fill: currentColor; }
.look-head { width: 40px; height: 40px; }
.look-figure .arm { fill: none; stroke: currentColor; stroke-linecap: round; }
.look-head .face, .look-head .shoulders { fill: var(--wine-deep); stroke: currentColor; stroke-width: 1.3; }
.look-head .hair { fill: currentColor; }
.look-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.look-line .dot { fill: currentColor; stroke: none; }
.swatch { width: 26px; height: 26px; margin: 4px 0; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(241, 226, 196, 0.35); }
.look-option:has(input:checked) .swatch { box-shadow: 0 0 0 2px var(--wine-deep), 0 0 0 3.5px var(--gold); }
.look-eye .eye-white { fill: #EFE6D6; stroke: currentColor; stroke-width: 1.2; }
.look-eye .iris { fill: var(--swatch); }
.look-eye .pupil { fill: #140608; }
/* Swatch colours: what the option looks like, not the theme */
.swatch-skin-pale { --swatch: #F6E3D7; }
.swatch-skin-fair { --swatch: #EFCFB5; }
.swatch-skin-light { --swatch: #E2B48F; }
.swatch-skin-olive { --swatch: #C29A6B; }
.swatch-skin-tan { --swatch: #B07A4F; }
.swatch-skin-brown { --swatch: #8A5634; }
.swatch-skin-dark { --swatch: #4F2E1D; }
.swatch-hair_color-black { --swatch: #1B1412; }
.swatch-hair_color-dark_brown { --swatch: #3B2418; }
.swatch-hair_color-brown { --swatch: #6A4128; }
.swatch-hair_color-light_brown { --swatch: #9C7650; }
.swatch-hair_color-blonde { --swatch: #E3C47E; }
.swatch-hair_color-platinum { --swatch: #EDE6D3; }
.swatch-hair_color-red { --swatch: #C0532E; }
.swatch-hair_color-auburn { --swatch: #8E3B22; }
.swatch-hair_color-gray { --swatch: #A9A9A6; }
.swatch-hair_color-pastel { --swatch: conic-gradient(#F4B6C8, #C9B6F0, #A9D3F2, #F4B6C8); }
.swatch-eye_color-brown { --swatch: #6B3E22; }
.swatch-eye_color-hazel { --swatch: #8E7034; }
.swatch-eye_color-green { --swatch: #5E8B4A; }
.swatch-eye_color-blue { --swatch: #5D8CC3; }
.swatch-eye_color-gray { --swatch: #8E9AA3; }
.swatch-eye_color-amber { --swatch: #C68B2C; }
.saved-note { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-size: 15px; font-weight: 600; }
.saved-note[hidden] { display: none; }
.saved-check { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var(--ok); color: var(--wine-deep); }
.saved-check .icon { width: 15px; height: 15px; stroke-width: 3; }

/* The doll's assistant: a round face in the corner, a chat panel above it */
.assistant { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.assistant-toggle { width: 60px; height: 60px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: var(--bordeaux); color: var(--gold); font: 600 24px var(--font-display); overflow: hidden; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
.assistant-toggle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.assistant-toggle:hover, .assistant.is-open .assistant-toggle { border-color: var(--limelight); }
/* The doll's call: a speech bubble above her face */
.assistant-call { position: relative; display: flex; align-items: flex-start; gap: 4px; max-width: 260px; padding: 9px 8px 9px 13px; border: 1px solid var(--gold); border-radius: 12px; background: var(--text-2); color: var(--wine); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); animation: call-in 0.35s ease-out; }
.assistant-call-text { padding: 0; border: 0; background: none; color: inherit; font: 500 14px/1.35 var(--font-ui); text-align: left; cursor: pointer; }
.assistant-call-close { flex: none; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--wine); font: 16px/18px var(--font-ui); opacity: 0.55; cursor: pointer; }
.assistant-call-close:hover { opacity: 1; background: rgba(36, 7, 13, 0.08); }
.assistant-call[hidden] { display: none; }
.assistant-call::after { content: ""; position: absolute; right: 22px; bottom: -8px; border-style: solid; border-width: 8px 7px 0 7px; border-color: var(--text-2) transparent transparent transparent; }
.assistant-call:has(.assistant-call-text:hover) { background: var(--limelight); }
@keyframes call-in { from { opacity: 0; transform: translateY(8px); } }
.assistant-panel { order: -1; width: min(400px, calc(100vw - 32px)); height: min(580px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--bordeaux); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); overflow: hidden; }
.assistant-panel[hidden] { display: none; }
.assistant-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--divider); background: var(--wine-deep); }
.assistant-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-dark); }
.assistant-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.assistant-title b { color: var(--gold); font-family: var(--font-display); font-size: 17px; }
.assistant-title span { color: var(--text-2); font-size: 12px; }
.assistant-close { font-size: 22px; line-height: 1; }
.assistant-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.assistant-message { max-width: 88%; padding: 8px 11px; border-radius: 10px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-message p { margin: 0; }
.assistant-message p + p, .assistant-message .copy-block + p, .assistant-message p + .copy-block { margin-top: 8px; }
.from-assistant { align-self: flex-start; background: var(--wine-deep); border: 1px solid var(--divider); }
.from-user { align-self: flex-end; background: var(--velvet-dark); color: var(--ivory); }
.copy-block { margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--wine); }
.copy-block pre { margin: 0; padding: 8px 10px; white-space: pre-wrap; font: 13px/1.45 var(--font-ui); color: var(--ivory); }
.copy-block .link-button { display: block; margin: 0 10px 8px auto; }
.assistant-error { margin: 0 12px; }
.assistant-status { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.assistant-status:has(:not([hidden])) { padding-bottom: 6px; }
.assistant-typing { color: var(--text-2); font-size: 12px; }
.mic-level { flex: none; width: 160px; height: 22px; color: var(--error); }
.assistant-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--divider); }
.assistant-form textarea { flex: 1; resize: none; }
.square-button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--field-border); border-radius: 8px; background: transparent; color: var(--gold); cursor: pointer; }
.square-button:hover:not(:disabled) { border-color: var(--limelight); color: var(--limelight); }
.square-button:disabled { opacity: 0.5; cursor: progress; }
/* A busy button spins in place of its icon */
.square-button.is-busy { opacity: 1; }
.square-button.is-busy .icon { display: none; }
.square-button.is-busy::after { content: ""; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.square-button.send { background: var(--gold); border-color: var(--gold); color: var(--wine-deep); }
.square-button.send:hover:not(:disabled) { background: var(--limelight); color: var(--wine-deep); }
.assistant-form { align-items: center; }
.assistant-form .mic.is-recording { color: var(--error); border-color: var(--error); animation: mic-pulse 1s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: 0.45; } }
.button.filling { position: relative; overflow: hidden; }
.button-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(227, 178, 90, 0.35); transition: width 0.2s linear; pointer-events: none; }
.button.filling [data-label] { position: relative; }
.fold > summary + form { margin-top: 14px; }
.long-text { display: flex; flex-direction: column; gap: 6px; }
.long-text-head { display: flex; align-items: baseline; gap: 8px; }
.long-text-head > span:first-child { flex: 1; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.char-count { color: var(--bronze); font-size: 11px; font-variant-numeric: tabular-nums; }
.char-count.is-full { color: var(--error-text); }
.stack > .char-count, label + .char-count, textarea + .char-count { align-self: flex-end; margin-top: -6px; }
.text-editor { width: min(1100px, 96vw); height: 92vh; max-width: none; max-height: none; padding: 16px; color: var(--ivory); background: var(--bordeaux); border: 1px solid var(--line); border-radius: var(--radius); }
.text-editor[open] { display: flex; flex-direction: column; gap: 12px; }
.text-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.text-editor-head h2 { margin: 0; }
.text-editor textarea { flex: 1; resize: none; font-size: 15px; line-height: 1.5; }
input[type=file] { color: var(--text-2); font: inherit; font-size: 13px; max-width: 100%; }
input[type=file]::file-selector-button {
  font: inherit;
  margin-right: 10px;
  padding: 6px 10px;
  color: var(--ivory);
  background: var(--wine-deep);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.button {
  align-self: flex-start;
  padding: 9px 18px;
  font: 600 14px/1.2 var(--font-ui);
  letter-spacing: 0.02em;
  color: var(--wine-deep);
  background: var(--gold);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.3s;
}
.button:hover { background: var(--limelight); }
.button:disabled { opacity: 0.6; cursor: progress; }
.button-wide { align-self: stretch; }
.button-secondary { color: var(--ivory); background: transparent; border: 1px solid var(--field-border); }
.button-secondary:hover { background: transparent; border-color: var(--limelight); color: var(--limelight); }
/* What can't be undone: deleting a doll */
.button-danger { color: var(--error-text); background: transparent; border: 1px solid var(--error); }
.button-danger:hover:not(:disabled) { color: var(--ivory); background: var(--error); }
.button-danger:disabled { cursor: not-allowed; }
.danger-zone { border-color: rgba(224, 82, 74, 0.35); }
.delete-dialog { width: min(460px, 92vw); }

.badge {
  display: inline-block;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-2);
}
.badge-active { color: var(--ok); border-color: rgba(143, 196, 138, 0.5); }
.badge-nsfw { color: var(--limelight); border-color: var(--gold-dark); }

/* ---------- Tables: no ornaments inside ---------- */

.table-wrap {
  background: var(--bordeaux);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  background: rgba(22, 4, 7, 0.5);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.table .amount { text-align: right; }
.table td.hint { font-size: 14px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr { transition: background-color 0.3s; }
.table tbody tr:hover { background: rgba(243, 212, 140, 0.05); }
.amount-in { color: var(--ok); }

.doll-cell { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.doll-name { font-weight: 600; }
.doll-cell:hover .doll-name { color: var(--limelight); }

/* Round avatar hanging on three thin marionette strings */
.puppet { position: relative; display: inline-flex; flex: none; }
.puppet::before {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 100%;
  width: 23px;
  height: 12px;
  background: linear-gradient(90deg, var(--gold) 1px, transparent 1px) 0 0 / 11px 100% repeat-x;
  opacity: 0.35;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}
.avatar-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 16px/1 var(--font-display);
  color: var(--gold);
  background: var(--wine-deep);
}

/* ---------- Empty stage ---------- */

.empty-stage { text-align: center; padding: 40px 16px 64px; }
.marionette { width: 120px; height: 150px; color: var(--gold); opacity: 0.8; }
.empty-title { margin: 12px 0 0; font: 600 28px/1.2 var(--font-display); color: var(--ivory); }

/* ---------- Doll page: playbill with a spotlight ---------- */

.doll-layout { display: grid; grid-template-columns: minmax(340px, 500px) minmax(0, 1fr); gap: 20px; align-items: start; }
/* The profile: the face and the account in a narrow column, the settings in a wide one */
.doll-profile, .doll-telegram { max-width: 1100px; }
/* A doll's two pages: Profile and Generation, as tabs under the back link */
.doll-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--divider); }
.doll-tabs a { padding: 9px 18px; color: var(--text-2); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.doll-tabs a:hover { color: var(--limelight); }
.doll-tabs a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.poster { text-align: center; }
.spotlit { position: relative; display: flex; justify-content: center; padding-top: 18px; }
/* Cone of light falling on the doll */
.spotlit::before {
  content: "";
  position: absolute;
  inset: 0 -10% 10%;
  background: conic-gradient(from 162deg at 50% -6%, transparent 0deg, rgba(243, 212, 140, 0.16) 12deg, rgba(243, 212, 140, 0.16) 24deg, transparent 36deg);
  -webkit-mask: linear-gradient(#000 30%, transparent);
  mask: linear-gradient(#000 30%, transparent);
  pointer-events: none;
  animation: lights-up var(--slow) ease-out both;
}
.poster-sheet {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--gold);
  border-radius: 2px;
  box-shadow: 0 0 0 4px var(--bordeaux), 0 0 0 5px var(--line), 0 18px 40px rgba(0, 0, 0, 0.5);
}
.poster-sheet-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze);
  background: var(--wine-deep);
  border-style: dashed;
  border-color: var(--line);
}
.poster-name { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 10px; font-size: 34px; color: var(--gold); }
.poster-name .status-icon .icon { width: 26px; height: 26px; }
.poster-sheet-frame { position: relative; width: 100%; }
.poster-sheet-frame .poster-sheet { display: block; width: 100%; }
/* Without NSFW: the dressed sheet is the 16:9 left of an NSFW doll's sheet, the naked part is cut off. The height
   stays, the frame gets narrower: --dressed-share is the dressed part's share of the width (set by base.html) */
.poster-sheet-frame.dressed-only { width: calc(var(--dressed-share, 1) * 100%); margin: 0 auto; overflow: hidden; }
.poster-sheet-frame.dressed-only .poster-sheet { width: calc(100% / var(--dressed-share, 1)); max-width: none; }
/* Her sheet as it is: two parts at 16:9, an NSFW doll's three parts wider */
img.poster-sheet { aspect-ratio: auto; height: auto; object-fit: contain; }
/* Under her sheet: "Choose a sheet" on the left, the model and "Create a sheet" on the right */
.sheet-buttons { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 14px; text-align: left; }
.sheet-maker { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.sheet-maker select { width: auto; }
.sheet-maker .progress { flex-basis: 100%; }
.sheet-actions { justify-content: center; }

@keyframes lights-up {
  from { opacity: 0; }
  to { opacity: 1; }
}

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.gallery-item { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.gallery-item audio { width: 100%; }
.gallery-item video { display: block; width: 100%; aspect-ratio: 9 / 16; background: var(--wine-deep); border: 1px solid var(--line); border-radius: 2px; }

/* Models in effect for the doll */
/* Three columns: what (chat, photo, video), the model, then Reasoning or the price, so they stay put whatever the name */
.model-list dl { display: grid; grid-template-columns: max-content minmax(220px, 360px) max-content; align-items: center; gap: 8px 16px; margin: 8px 0 0; font-size: 13px; }
.model-list dt { color: var(--bronze); }
.model-list dd { margin: 0; overflow-wrap: anywhere; }

/* Photo picker for a video */
.source-picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.source-picker legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--text-2); }
.source-grid { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.source-option { flex: none; cursor: pointer; }
.source-option input { position: absolute; opacity: 0; }
.source-option img {
  display: block; width: 64px; aspect-ratio: 9 / 16; object-fit: cover;
  border: 1px solid var(--line); border-radius: 2px; opacity: 0.7; transition: opacity 0.3s, border-color 0.3s;
}
.source-option input:checked + img { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.source-option input:focus-visible + img { outline: 2px solid var(--limelight); outline-offset: 1px; }
.gallery-error {
  padding: 10px;
  font-size: 13px;
  word-break: break-word;
  color: var(--error-text);
  background: rgba(224, 82, 74, 0.08);
  border: 1px solid rgba(224, 82, 74, 0.4);
  border-radius: var(--radius);
}
.gallery-item figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.gallery-prompt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Box office ---------- */

.balance-tile { text-align: center; padding: 28px 22px; }
.balance-amount {
  margin: 0 0 6px;
  font: 600 52px/1 var(--font-display);
  color: var(--gold);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Login: the curtain opens, a spotlight finds the form ---------- */

.theatre { overflow-x: hidden; }

.curtain {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 50vw;
  pointer-events: none;
  background:
    linear-gradient(transparent 55%, rgba(0, 0, 0, 0.45)),
    repeating-linear-gradient(90deg,
      var(--velvet-dark) 0, var(--velvet) 1.6vw, var(--velvet-light) 2.6vw, var(--velvet) 3.6vw, var(--velvet-dark) 5vw);
  transition: transform 2.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.curtain-left { left: 0; box-shadow: inset -12px 0 24px rgba(0, 0, 0, 0.5); animation: curtain-left 2.4s cubic-bezier(0.6, 0, 0.2, 1) 0.4s both; }
.curtain-right { right: 0; box-shadow: inset 12px 0 24px rgba(0, 0, 0, 0.5); animation: curtain-right 2.4s cubic-bezier(0.6, 0, 0.2, 1) 0.4s both; }
@keyframes curtain-left { from { transform: translateX(0); } to { transform: translateX(-84%); } }
@keyframes curtain-right { from { transform: translateX(0); } to { transform: translateX(84%); } }

.valance-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 3; height: 34px; }

.spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(from 164deg at 50% -4%, transparent 0deg, rgba(243, 212, 140, 0.13) 10deg, rgba(243, 212, 140, 0.13) 22deg, transparent 32deg),
    radial-gradient(ellipse 260px 46px at 50% 88%, rgba(243, 212, 140, 0.12), transparent 70%);
  animation: lights-up var(--slow) ease-out 2.2s both;
}

.login {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 16px 40px;
  text-align: center;
}
.fan { width: 96px; height: 50px; color: var(--gold); opacity: 0.85; }
.login-title { margin-top: 10px; font-size: 54px; color: var(--gold); letter-spacing: 0.03em; }
.login-title a { text-decoration: none; }
/* Without a tagline the card stands right under the name (the landing, the login) */
.login-title + .panel { margin-top: 28px; }
.login-tagline { margin: 6px 0 26px; font: italic 500 19px/1.3 var(--font-display); color: var(--text-2); }
.login-card { width: 100%; max-width: 380px; text-align: left; }
.login-switch { margin: 18px 0 0; font-size: 14px; color: var(--text-2); }
.login-switch a { color: var(--gold); }
.login-switch a:hover { color: var(--limelight); }
.login-footlights { width: 100%; max-width: 520px; margin-top: 34px; }

/* ---------- Language switch: EN · RU, the current one lit ---------- */

.lang-switch { display: flex; gap: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; }
.lang-switch a {
  padding: 4px 6px;
  color: var(--bronze);
  text-decoration: none;
  border-radius: var(--radius);
}
.lang-switch a:hover { color: var(--limelight); }
.lang-switch a[aria-current] { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); }
/* On the public stage it hangs under the valance, above the curtains */
.lang-switch-stage { position: fixed; top: 42px; right: 16px; z-index: 4; }

/* ---------- Landing: the playbill before the premiere ---------- */

/* Side padding keeps the text clear of the open curtains (each still covers 8vw, 3.5vw on phones) */
.landing { max-width: 980px; margin: 0 auto; padding-inline: calc(8vw + 16px); box-sizing: content-box; }
.landing-notice { width: 100%; max-width: 520px; padding: 28px 24px; }
.landing-notice-title { margin: 0 0 10px; font: 600 26px/1.2 var(--font-display); color: var(--gold); }
.landing-notice-text { margin: 0; color: var(--text-2); }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.landing-actions .button { text-decoration: none; }
.landing-footer { margin: 0; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); }

/* ---------- Between pages: dark screen with a spinner ---------- */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wine-deep);
  visibility: hidden;
}
.page-loader.is-visible { visibility: visible; }
.page-loader-ring {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(227, 178, 90, 0.18);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: page-loader-spin 0.9s linear infinite;
}
@keyframes page-loader-spin { to { transform: rotate(360deg); } }

/* ---------- Small screens ---------- */

/* ---------- Voice fields ---------- */

.voice-fields { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.voice-fields legend { padding: 0 6px; font-size: 13px; color: var(--text-2); }
.voice-listen { align-self: flex-end; white-space: nowrap; }
.voice-fields .row > label.narrow { flex: 1 1 0; min-width: 0; }  /* speed, pitch and volume in one row */
.voice-fields label[hidden] { display: none; }  /* Pitch or Expressiveness, by the chosen voice */
.voice-fields .notice { margin: 0; }
/* Buttons over the voice list: who it sounds like, live or studio. Pressed ones narrow the list */
.voice-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-gap { width: 10px; }
.filter-chip { padding: 4px 11px; font: inherit; font-size: 13px; color: var(--text-2); background: var(--wine-deep); border: 1px solid var(--divider); border-radius: 999px; cursor: pointer; }
.filter-chip:hover { color: var(--ivory); border-color: var(--field-border); }
.filter-chip[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: rgba(227, 178, 90, 0.1); }
.table-actions { margin-top: 14px; }

/* Switch: a checkbox drawn as a sliding toggle */
.switch { position: relative; flex-direction: row; align-items: center; gap: 10px; color: var(--ivory); font-size: 15px; cursor: pointer; padding-bottom: 10px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--wine-deep); border: 1px solid var(--field-border); transition: background-color 0.2s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bronze); transition: transform 0.2s, background-color 0.2s; }
.switch input:checked + .switch-track { background: var(--gold-dark); border-color: var(--gold); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: var(--limelight); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--limelight); outline-offset: 1px; }

.switch { padding-bottom: 0; }
/* Photo and video lists fill the model column */
.model-list select { width: 100%; padding-top: 5px; padding-bottom: 5px; }
.model-list dd { margin: 0; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.model-extra { white-space: nowrap; }
.price { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price .icon { width: 16px; height: 16px; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-actions .button { align-self: auto; }
.status-form { margin-bottom: 14px; }

/* Generation progress: a thin gold bar filling by the model's typical time */
.progress { display: flex; align-items: center; gap: 10px; }
.progress[hidden] { display: none; }
.progress-label { min-width: 44px; text-align: right; }
.progress-track { flex: 1; height: 6px; border-radius: 999px; background: var(--wine-deep); border: 1px solid var(--line); overflow: hidden; }
.progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); transition: width 0.25s linear; }

/* ---------- Generations table and viewer ---------- */

.thumb { display: block; width: 56px; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--wine-deep); overflow: hidden; cursor: zoom-in; }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--bronze); cursor: default; }
.table td.prompt-cell { max-width: none; min-width: 0; width: 100%; }
.error-note { color: var(--error-text); }
.viewer { max-width: min(92vw, 900px); max-height: 92vh; padding: 16px; color: var(--ivory); background: var(--bordeaux); border: 1px solid var(--line); border-radius: var(--radius); }
.viewer::backdrop { background: rgba(22, 4, 7, 0.85); }
/* The account log in the backstage: a window over the page; the padding is inside, so a click on the dialog
   itself is a click outside the log */
.account-log { width: min(760px, 94vw); max-height: 86vh; padding: 0; color: var(--ivory); background: var(--bordeaux); border: 1px solid var(--line); border-radius: var(--radius); }
.account-log::backdrop { background: rgba(22, 4, 7, 0.85); }
.account-log-of { padding: 22px; }
.account-log .panel-head { margin-top: 0; }
.viewer-media img, .viewer-media video { display: block; max-width: 100%; max-height: 76vh; margin: 0 auto; }
.viewer-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

.shop-table { max-width: 760px; }

/* ---------- New doll ---------- */

.required { color: var(--gold); }
.button-icon { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.button-icon span { font-size: 18px; line-height: 1; }
.empty-stage .button { margin-top: 18px; }

/* ---------- Telegram accounts: shop, doll account, backstage ---------- */

.shop-rule, .section-hint { margin: 0 0 14px; }
.amount-full { color: var(--limelight); }

/* Facts about the doll's account: label and value side by side */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 12px; }
.facts dt { color: var(--bronze); font-size: 13px; }
.facts dd { margin: 0; }

/* The account log: time, then what happened */
.event-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.event-list time { margin-right: 8px; }
.table td.event { white-space: normal; min-width: 220px; }

/* Sale states and health: green = fine, gold = attention, red = lost */
.badge-sale-on_sale, .badge-health-alive, .badge-proxy-active { color: var(--ok); border-color: rgba(143, 196, 138, 0.5); }
.badge-sale-bound { color: var(--limelight); border-color: var(--gold-dark); }
.badge-health-cooldown, .badge-health-quarantine, .badge-health-spamblock { color: var(--limelight); border-color: var(--gold-dark); }
.badge-sale-excluded, .badge-health-frozen, .badge-health-session_lost, .badge-health-banned,
.badge-proxy-failed, .badge-proxy-expired { color: var(--error-text); border-color: var(--error); }

/* Backstage tiles: one row of small cards, label and number centered */
.stat-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 8px; }
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;  /* labels may wrap; the numbers stay on one line at the bottom */
  gap: 6px;
  padding: 10px 8px;
  text-align: center;
  background: var(--bordeaux);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat .eyebrow { margin: 0; font-size: 10px; letter-spacing: 0.16em; }
.stat-value { margin: 0; font: 600 24px/1 var(--font-display); color: var(--gold); font-variant-numeric: tabular-nums lining-nums; }

/* Backstage sections fold: the heading is the switch, the count shows what is inside */
.fold > summary { list-style: none; cursor: pointer; user-select: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.5px solid var(--bronze);
  border-bottom: 1.5px solid var(--bronze);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.fold[open] > summary h2::after { transform: rotate(45deg); }
.fold > summary:hover h2, .fold > summary:hover h2::after { color: var(--limelight); border-color: var(--limelight); }
.fold-count { color: var(--text-2); letter-spacing: normal; font-variant-numeric: tabular-nums; }
.fold:not([open]) > summary { margin-bottom: 0; }

/* Narrow numeric table: headers wrap onto two lines so every column fits without scrolling */
.table-compact th { padding: 8px 7px; white-space: normal; letter-spacing: 0.06em; vertical-align: bottom; line-height: 1.3; }
.table-compact td { padding: 8px 7px; font-size: 14px; }
.table-compact th:first-child, .table-compact td:first-child { padding-left: 14px; }
.table td.wrap { white-space: normal; min-width: 124px; max-width: 170px; }
.table .note.numeric, .table .note.online { white-space: nowrap; }
.note.online { color: var(--ok); }
.link-button { padding: 0; font: inherit; font-size: 12px; color: var(--gold); background: none; border: 0; cursor: pointer; }
.link-button:hover { color: var(--limelight); text-decoration: underline; }
/* A value with more in a hint (the backstage): hover or tap it; the hint floats over the page */
.tip { cursor: help; outline-offset: 3px; }
.tip-box { position: fixed; z-index: 50; max-width: 340px; padding: 10px 12px; font-size: 13px; line-height: 1.5; color: var(--ivory); background: var(--wine-deep); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); pointer-events: none; }
.tip-box[hidden] { display: none; }
.tip-box strong { color: var(--gold); }
/* A small bar 0-100 % (--fill): an account's health by its level, how far its rest or warm-up has gone */
.meter { position: relative; display: inline-block; width: 72px; height: 8px; vertical-align: middle; overflow: hidden; background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.meter::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill); background: var(--meter-color); border-radius: 4px; }
.meter-good { --meter-color: #4caf6a; }
.meter-fair { --meter-color: #d9a441; }
.meter-poor { --meter-color: #e0524a; }
.meter-stage { --meter-color: var(--gold); }
/* A proxy rental about to end (PROXY_RENTAL_WARNING_DAYS) or over */
.rental-ending { color: var(--error-text); font-weight: 600; }
/* A proxy in the backstage accounts table: its country code, the address on hover */
.proxy-code { border-bottom: 1px dotted var(--text-2); cursor: help; }
.proxy-code:hover { color: var(--limelight); border-bottom-color: var(--limelight); }
.table-compact .badge { padding: 0 7px; font-size: 11px; }
.table td.wrap-short { white-space: normal; min-width: 90px; }
.table .note { display: block; margin-top: 4px; font-size: 12px; }

@media (max-width: 860px) {
  .doll-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .stat-grid { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .marquee { padding: 10px 16px; gap: 8px 12px; }
  .brand { font-size: 21px; gap: 8px; }
  .mark { width: 22px; height: 22px; }
  .marquee-right { gap: 6px; }
  .ticket { padding: 5px 12px; }
  .ticket-amount { font-size: 16px; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .nav-hint { display: none; }
  h1 { font-size: 30px; }
  .inline-form, .inline-form input[type=text] { width: 100%; }
  .login-title { font-size: 44px; }
  .landing { padding-inline: calc(3.5vw + 16px); }
  @keyframes curtain-left { from { transform: translateX(0); } to { transform: translateX(-93%); } }
  @keyframes curtain-right { from { transform: translateX(0); } to { transform: translateX(93%); } }
}

@media (max-width: 400px) {
  .ticket-unit { display: none; }
}

/* ---------- Less motion: the curtain is already open, lights already on ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .footlights { animation: none; }
}

/* Her reference sheet on the profile: the whole 16:9 picture, and two variants a row in its picker */
/* An avatar is the face half of her sheet: the left side of the 16:9 picture */
img.sheet-face { object-fit: cover; object-position: left center; }
.sheet-picker { width: min(1240px, 94vw); max-width: none; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; overflow: visible; }
/* A sheet whole, as it is (its preview: small enough to load with the page); 16:9 room until it loads */
.sheet-grid .source-option img { width: 100%; height: auto; aspect-ratio: auto 16 / 9; object-fit: contain; background: var(--wine-deep); }
.video-modes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* NSFW under her sheet on the profile */
.nsfw-block { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; }
/* Her source photos on the profile: up to three tiles and one to add */
.source-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.source-photo { position: relative; width: 120px; aspect-ratio: 3 / 4; margin: 0; }
.source-photo img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.source-photo-remove { position: absolute; top: 4px; right: 4px; background: rgba(22, 4, 7, 0.75); }
.source-photo-add { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; color: var(--bronze); border: 1px dashed var(--line); border-radius: 2px; cursor: pointer; }
.source-photo-add:hover { color: var(--gold); border-color: var(--gold); }
/* An upload that takes dropped files: a hint under its button, and a frame while a file is over it */
.source-photo-add { flex-direction: column; gap: 4px; }
.drop-hint { font-size: 11px; color: var(--bronze); }
[data-drop-target] { transition: box-shadow 0.15s, background-color 0.15s; }
[data-drop-target].drop-over { box-shadow: 0 0 0 2px var(--gold); background-color: rgba(227, 178, 90, 0.08); border-radius: var(--radius); }
[data-drop-target].drop-over .source-photo-add { color: var(--gold); border-color: var(--gold); }