/* ──────────────────────────────────────────────────────────────────────────
   Dialogue Editor — W0 scaffold styles.
   GitHub-dark by default; [data-theme="light"] flips the palette. Theming is
   driven entirely by CSS custom properties so W6 can add more skins cheaply.
   ────────────────────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --bg:        #0d1117;
  --panel:     #161b22;
  --panel-2:   #1c2230;
  --border:    #30363d;
  --text:      #c9d1d9;
  --text-dim:  #8b949e;
  --accent:    #58a6ff;
  --accent-bg: #1f6feb;
  --green:     #3fb950;
  --purple:    #bc8cff;
  --amber:     #d29922;
  --danger:    #f85149;
  --shadow:    rgba(0,0,0,.4);
}

[data-theme="light"] {
  --bg:        #ffffff;
  --panel:     #f6f8fa;
  --panel-2:   #eaeef2;
  --border:    #d0d7de;
  --text:      #1f2328;
  --text-dim:  #656d76;
  --accent:    #0969da;
  --accent-bg: #0969da;
  --green:     #1a7f37;
  --purple:    #8250df;
  --amber:     #9a6700;
  --danger:    #cf222e;
  --shadow:    rgba(140,149,159,.2);
}

/* Retro Neon Blue — echoes the Event Editor's neon theme. */
[data-theme="neon"] {
  --bg:        #0a0e1a;
  --panel:     #0f1830;
  --panel-2:   #142244;
  --border:    #1f3a6b;
  --text:      #cfe8ff;
  --text-dim:  #6f8fc0;
  --accent:    #34d2ff;
  --accent-bg: #0b6f9c;
  --green:     #39d98a;
  --purple:    #b08cff;
  --amber:     #ffcf5c;
  --danger:    #ff5d6c;
  --shadow:    rgba(0,0,0,.6);
}

/* Retro Neon Ocean — aqua/teal variant. */
[data-theme="ocean"] {
  --bg:        #04161a;
  --panel:     #072329;
  --panel-2:   #0a323b;
  --border:    #13525e;
  --text:      #cdfbff;
  --text-dim:  #67a7ad;
  --accent:    #27e0d0;
  --accent-bg: #0a7d77;
  --green:     #39d98a;
  --purple:    #7fd5ff;
  --amber:     #ffd479;
  --danger:    #ff6b7a;
  --shadow:    rgba(0,0,0,.6);
}

/* Dark Matte — flat charcoal, muted desaturated accents (no gloss/glow). */
[data-theme="matte-dark"] {
  --bg:        #1c1c1e;
  --panel:     #252528;
  --panel-2:   #2e2e32;
  --border:    #3a3a3f;
  --text:      #d6d6d8;
  --text-dim:  #8a8a90;
  --accent:    #8ab4d8;
  --accent-bg: #3f5a73;
  --green:     #7fae7f;
  --purple:    #a892c4;
  --amber:     #cbb273;
  --danger:    #cf7f7f;
  --shadow:    rgba(0,0,0,.5);
}

/* Gray Matte — graphite mid-gray. */
[data-theme="matte-gray"] {
  --bg:        #3a3d42;
  --panel:     #43464c;
  --panel-2:   #4d5158;
  --border:    #5a5e66;
  --text:      #e4e6e9;
  --text-dim:  #aab0b8;
  --accent:    #9fc1dd;
  --accent-bg: #4a6580;
  --green:     #8fbf8f;
  --purple:    #b6a3d0;
  --amber:     #d4be84;
  --danger:    #db8d8d;
  --shadow:    rgba(0,0,0,.4);
}

/* Light Gray Matte — muted light gray (not white), muted blue accent. */
[data-theme="matte-light"] {
  --bg:        #e7e8ea;
  --panel:     #dddfe2;
  --panel-2:   #d2d4d8;
  --border:    #c0c3c8;
  --text:      #2a2d31;
  --text-dim:  #66696e;
  --accent:    #4a6f93;
  --accent-bg: #4a6f93;
  --green:     #4a7a4a;
  --purple:    #6f5f99;
  --amber:     #8a6f33;
  --danger:    #a85454;
  --shadow:    rgba(120,120,125,.25);
}

/* Ubuntu — Yaru-style warm dark content, aubergine header/footer, Ubuntu-orange accent. */
[data-theme="ubuntu"] {
  --bg:        #1e1b1a;
  --panel:     #2c2826;
  --panel-2:   #3a3431;
  --border:    #4b423d;
  --text:      #f6f5f4;
  --text-dim:  #b3a9a1;
  --accent:    #e95420;   /* Ubuntu orange */
  --accent-bg: #c7431a;
  --green:     #4e9a06;
  --purple:    #77216f;   /* light aubergine */
  --amber:     #f99b11;
  --danger:    #c7162b;
  --shadow:    rgba(0,0,0,.5);
}
[data-theme="ubuntu"] .toolbar,
[data-theme="ubuntu"] .statusbar {
  background: #2c001e;    /* Canonical aubergine */
  border-color: #5e2750;
  color: #ffffff;
}

/* Linux — terminal vibe: near-black content, phosphor-green accent, black title bars. */
[data-theme="linux"] {
  --bg:        #0b0f0c;
  --panel:     #121712;
  --panel-2:   #1b231a;
  --border:    #2c3a2a;
  --text:      #d6e8d2;
  --text-dim:  #7fa07a;
  --accent:    #3ad94a;   /* terminal green */
  --accent-bg: #1f7a2b;
  --green:     #3ad94a;
  --purple:    #9b8cff;
  --amber:     #e3c34a;
  --danger:    #ff5f56;
  --shadow:    rgba(0,0,0,.6);
}
[data-theme="linux"] .toolbar,
[data-theme="linux"] .statusbar {
  background: #000000;
  border-color: #1f7a2b;
  color: #d6e8d2;
}
[data-theme="linux"] .brand__name { text-shadow: 0 0 6px currentColor; }   /* faint CRT glow */

/* Steam Deck — dark slate-blue console UI, vivid Steam-blue accent, deep navy chrome. */
[data-theme="steamdeck"] {
  --bg:        #15171c;
  --panel:     #1c2027;
  --panel-2:   #262c36;
  --border:    #3a4250;
  --text:      #dfe6ef;
  --text-dim:  #8aa0b8;
  --accent:    #1a9fff;   /* Steam blue */
  --accent-bg: #1564b3;
  --green:     #5ba32b;
  --purple:    #8f98ff;
  --amber:     #e0a536;
  --danger:    #d94c4c;
  --shadow:    rgba(0,0,0,.6);
}
[data-theme="steamdeck"] .toolbar,
[data-theme="steamdeck"] .statusbar {
  background: #0e1014;    /* deep Steam navy chrome */
  border-color: #2a475e;
  color: #dfe6ef;
}
[data-theme="steamdeck"] .brand__name { text-shadow: 0 0 8px var(--accent); }   /* Deck blue glow */

/* ── Gradient themes ─────────────────────────────────────────────────────── */
/* Any theme whose id starts with "grad-" gets a gradient body background; panels
   go transparent so it shows through, and the bars turn glassy. Per-theme blocks
   below set the palette (translucent --panel/--panel-2) + the body gradient. */
[data-theme^="grad-"] .panel { background: transparent; }
[data-theme^="grad-"] .toolbar,
[data-theme^="grad-"] .statusbar { backdrop-filter: blur(8px); }
/* Transparent panels make the grid-gap divider vanish — restore an explicit one. */
[data-theme^="grad-"] .split { background: transparent; gap: 0; }
[data-theme^="grad-"] .panel--tree,
[data-theme^="grad-"] .panel--inspector { border-left: 1px solid var(--border); }

[data-theme="grad-midnight"] {
  --bg:        #0a0f1f;
  --panel:     rgba(20,30,58,.55);
  --panel-2:   rgba(34,46,84,.62);
  --border:    rgba(120,150,210,.20);
  --text:      #d6e4ff;
  --text-dim:  #8ea2cc;
  --accent:    #5cc8ff;
  --accent-bg: #1f6feb;
  --green:     #3fb950;
  --purple:    #b08cff;
  --amber:     #ffcf5c;
  --danger:    #ff6b7a;
  --shadow:    rgba(0,0,0,.6);
}
[data-theme="grad-midnight"] body { background: linear-gradient(160deg, #1c2c56 0%, #17244c 55%, #101b3c 100%); }

[data-theme="grad-aurora"] {
  --bg:        #0a1f2a;
  --panel:     rgba(16,42,48,.52);
  --panel-2:   rgba(26,58,64,.60);
  --border:    rgba(140,220,200,.20);
  --text:      #ddfff4;
  --text-dim:  #86b8ad;
  --accent:    #46e3b0;
  --accent-bg: #119a78;
  --green:     #6ee7a8;
  --purple:    #8ad6ff;
  --amber:     #ffe08a;
  --danger:    #ff8a9b;
  --shadow:    rgba(0,0,0,.55);
}
[data-theme="grad-aurora"] body { background: linear-gradient(160deg, #0f4a39 0%, #134c72 48%, #2e2560 100%); }

[data-theme="grad-sunset"] {
  --bg:        #2a1430;
  --panel:     rgba(62,28,60,.52);
  --panel-2:   rgba(84,40,70,.60);
  --border:    rgba(255,180,150,.20);
  --text:      #ffe6dd;
  --text-dim:  #cda396;
  --accent:    #ff8f5e;
  --accent-bg: #c2563a;
  --green:     #8fd17a;
  --purple:    #d79bff;
  --amber:     #ffc266;
  --danger:    #ff6f7e;
  --shadow:    rgba(0,0,0,.55);
}
[data-theme="grad-sunset"] body { background: linear-gradient(160deg, #471e58 0%, #792860 45%, #8f3d24 100%); }

[data-theme="grad-ocean"] {
  --bg:        #052a33;
  --panel:     rgba(12,48,56,.52);
  --panel-2:   rgba(20,66,76,.60);
  --border:    rgba(140,220,230,.24);
  --text:      #d6fbff;
  --text-dim:  #79b3bd;
  --accent:    #2fd6d0;
  --accent-bg: #0a7d8a;
  --green:     #5fd9a0;
  --purple:    #8ad6ff;
  --amber:     #ffe08a;
  --danger:    #ff8a9b;
  --shadow:    rgba(0,0,0,.55);
}
[data-theme="grad-ocean"] body { background: linear-gradient(160deg, #0a4a55 0%, #0d5f76 45%, #0c4a8c 100%); }

/* Gradient Sky — a deep blue sky gradient (light text on translucent panels). */
[data-theme="grad-sky"] {
  --bg:        #16273f;
  --panel:     rgba(26,46,74,.52);
  --panel-2:   rgba(38,62,96,.60);
  --border:    rgba(150,190,235,.24);
  --text:      #dceaff;
  --text-dim:  #8fa9cc;
  --accent:    #5fa8ff;
  --accent-bg: #2f6fd6;
  --green:     #5fd99a;
  --purple:    #b08cff;
  --amber:     #ffd479;
  --danger:    #ff7a8a;
  --shadow:    rgba(0,0,0,.5);
}
[data-theme="grad-sky"] body { background: linear-gradient(160deg, #1b3f6e 0%, #245888 45%, #2f6fa0 100%); }

[data-theme="grad-peach"] {
  --bg:        #3a221c;
  --panel:     rgba(86,46,40,.52);
  --panel-2:   rgba(108,60,50,.60);
  --border:    rgba(255,190,160,.22);
  --text:      #ffe7dc;
  --text-dim:  #cca295;
  --accent:    #ff9e6b;
  --accent-bg: #c2603a;
  --green:     #8fd17a;
  --purple:    #e0a0ff;
  --amber:     #ffc266;
  --danger:    #ff7080;
  --shadow:    rgba(0,0,0,.5);
}
[data-theme="grad-peach"] body { background: linear-gradient(160deg, #7a3b46 0%, #a85a4e 45%, #c98a5e 100%); }

[data-theme="grad-rose"] {
  --bg:        #34182a;
  --panel:     rgba(78,36,58,.52);
  --panel-2:   rgba(98,46,72,.60);
  --border:    rgba(255,170,200,.22);
  --text:      #ffe2ee;
  --text-dim:  #cf9bb1;
  --accent:    #ff8fb5;
  --accent-bg: #c24a72;
  --green:     #8fd1a0;
  --purple:    #d79bff;
  --amber:     #ffc28a;
  --danger:    #ff6f8a;
  --shadow:    rgba(0,0,0,.5);
}
[data-theme="grad-rose"] body { background: linear-gradient(160deg, #5a2440 0%, #8a3a5e 45%, #a8547a 100%); }

[data-theme="grad-coffee"] {
  --bg:        #281c14;
  --panel:     rgba(60,44,32,.52);
  --panel-2:   rgba(78,58,42,.60);
  --border:    rgba(220,180,140,.22);
  --text:      #efe2d4;
  --text-dim:  #b7a08a;
  --accent:    #d2a679;
  --accent-bg: #8a5e38;
  --green:     #9bc27a;
  --purple:    #c8a0e0;
  --amber:     #e0b878;
  --danger:    #e08070;
  --shadow:    rgba(0,0,0,.55);
}
[data-theme="grad-coffee"] body { background: linear-gradient(160deg, #3a2820 0%, #4f3829 45%, #6a4a33 100%); }

[data-theme="neon"]  .dbox__name, [data-theme="ocean"] .dbox__name,
[data-theme="neon"]  .brand__name, [data-theme="ocean"] .brand__name,
[data-theme^="grad-"] .dbox__name, [data-theme^="grad-"] .brand__name { text-shadow: 0 0 8px currentColor; }

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.brand { display: flex; align-items: baseline; gap: 7px; }
.brand__name { font-weight: 600; font-size: 14px; }
.brand__tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border-radius: 9px;
  padding: 1px 7px;
}

.field { display: flex; align-items: center; gap: 6px; }
.field__label { color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.title-field input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  min-width: 220px;
  font-size: 13px;
}
.title-field input:focus { outline: none; border-color: var(--accent); }

.toolbar__spacer { flex: 1 1 auto; }
.toolbar__actions { display: flex; align-items: center; gap: 6px; }

.btn {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent-bg); border-color: transparent; color: #fff; }
.btn--accent:hover { filter: brightness(1.08); }
.btn--icon { padding: 5px 9px; }
.theme-select { padding: 5px 8px; cursor: pointer; }

/* ── Toast / validation banner ────────────────────────────────────────── */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 14px 0;
  padding: 9px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  white-space: pre-wrap;
}
.toast.toast--ok    { border-color: var(--green);  }
.toast.toast--warn  { border-color: var(--amber);  }
.toast.toast--error { border-color: var(--danger); }
.toast__close {
  margin-left: auto;
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 13px;
}

/* ── Main split ───────────────────────────────────────────────────────── */
.split {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 260px 1fr 320px;   /* Library · Tree · Inspector */
  gap: 1px;
  background: var(--border);
  min-height: 0;
}
.lib-collapsed .split { grid-template-columns: 1fr 320px; }
.lib-collapsed .panel--library { display: none; }

.panel {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.panel__title {
  margin: 0;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.tree, .inspector { overflow: auto; padding: 12px 14px; }
.tree { flex: 1 1 auto; }

/* ── Tree (flat rows + branch connectors) ────────────────────────────────── */
.card { position: relative; margin: 1px 0; }
.card__header {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 8px; border-radius: 6px; position: relative;
  cursor: pointer; user-select: none;
}
.card__header:hover { background: var(--panel-2); }
.card.is-selected > .card__header { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--accent); }

.card__chevron {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 15px; width: 18px; padding: 0; line-height: 1;
}
.card__chevron:hover { color: var(--text); }
.card__spacer { flex: 0 0 auto; width: 18px; display: inline-block; }
.card__speaker { font-weight: 600; }
.card__text { color: var(--text); }

/* Type icons (replace the old text chips) */
.kicon { flex: 0 0 auto; width: 16px; text-align: center; font-size: 13px; line-height: 1; }
.kicon--line     { color: var(--green); }
.kicon--event    { color: var(--amber); }
.kicon--choices  { color: var(--purple); }
.kicon--choice   { color: var(--amber); }
.kicon--sequence { color: var(--text-dim); }

/* Branch connectors: a vertical guide per sibling group + an elbow into each row. */
.card__body { padding-left: 16px; }
.card__body > .card { position: relative; }
.card__body > .card::before {                       /* vertical guide between siblings */
  content: ""; position: absolute; left: -9px; top: 0; bottom: 0;
  border-left: 2px solid var(--text-dim);
}
.card__body > .card:last-child::before { bottom: auto; height: 14px; }  /* stop at last elbow */
.card__body > .card > .card__header::before {       /* elbow into the row */
  content: ""; position: absolute; left: -9px; top: 14px; width: 9px;
  border-top: 2px solid var(--text-dim);
}

/* Drag & drop (W6) */
.card[draggable="true"] > .card__header { cursor: grab; }
.card.dragging { opacity: .45; }
.card.drop-before > .card__header { box-shadow: inset 0 2px 0 0 var(--accent); }
.card.drop-after  > .card__header { box-shadow: inset 0 -2px 0 0 var(--accent); }
.addrow.drop-into { outline: 1px dashed var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ── Inspector ───────────────────────────────────────────────────────────── */
.insp__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.insp__id { color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.insp__kind { font-weight: 600; }
.insp__fields { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; align-items: center; }
.insp__fields dt { color: var(--text-dim); }
.insp__fields dd { margin: 0; min-width: 0; word-break: break-word; }

.insp__input {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font: inherit;
}
.insp__input:focus { outline: none; border-color: var(--accent); }
.insp__textarea { resize: vertical; min-height: 54px; }
.insp__divider {
  margin: 14px 0 8px; padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Card actions (move / delete) + add rows (W2) ────────────────────────── */
.card__summary { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card__actions { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .1s; }
.card__header:hover .card__actions,
.card.is-selected > .card__header .card__actions { opacity: 1; }
.icon-btn {
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--text-dim); cursor: pointer;
  font-size: 11px; width: 22px; height: 20px; padding: 0; line-height: 1;
}
.icon-btn:hover { color: var(--text); border-color: var(--border); background: var(--bg); }
.icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }

.addrow { display: flex; gap: 6px; padding: 5px 0 3px; }
.add-btn {
  background: none; border: 1px dashed var(--border); border-radius: 6px;
  color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 3px 10px;
}
.add-btn:hover { color: var(--accent); border-color: var(--accent); }

.empty-state {
  text-align: center;
  color: var(--text-dim);
  padding: 40px 16px;
}
.empty-state h3 { color: var(--text); margin: 0 0 6px; }

.muted { color: var(--text-dim); }
.small { font-size: 11px; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

/* ── Status bar ───────────────────────────────────────────────────────── */
.statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 14px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
}
.statusbar__spacer { flex: 1 1 auto; }
.dirty { color: var(--amber); }
.format-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ── Overlay (Test stub) ──────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(1,4,9,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.overlay__card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 12px 40px var(--shadow);
  padding: 22px 24px;
  max-width: 440px;
}
.overlay__card h3 { margin: 0 0 10px; }
.overlay__actions { margin-top: 16px; text-align: right; }

/* ── Test Playmode player (W5) ───────────────────────────────────────────── */
.player { align-items: stretch; justify-content: stretch; }
.player__frame { display: flex; flex-direction: column; width: 100%; height: 100%; }
.player__topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.player__bottombar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: var(--panel); border-top: 1px solid var(--border);
}
.player__crumb { color: var(--text-dim); font-size: 12px; }
.player__spacer { flex: 1 1 auto; }
.player__stage {
  flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center;
  padding: 24px; overflow: auto;
  background: radial-gradient(circle at 50% 28%, rgba(88,166,255,.10), transparent 62%);
}

.dbox {
  width: 100%; max-width: 720px; display: flex; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 10px 40px var(--shadow); cursor: pointer;
}
.dbox--choices, .dbox--end { flex-direction: column; align-items: center; cursor: default; gap: 14px; }
.dbox__portrait {
  flex: 0 0 84px; height: 84px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 10px; text-align: center; padding: 4px; word-break: break-word;
}
.dbox__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dbox__name { font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.dbox__text { font-size: 15px; line-height: 1.6; min-height: 1.6em; }
.dbox__caret { color: var(--accent); animation: ee-blink 1s step-start infinite; }
@keyframes ee-blink { 50% { opacity: 0; } }
.dbox__hint { margin-top: 8px; color: var(--text-dim); font-size: 11px; text-align: right; }
.dbox--event .dbox__main { text-align: center; }
.dbox--event .dbox__hint { text-align: center; }

.choices__list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; }
.choice-btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; font-size: 14px; cursor: pointer; text-align: left;
}
.choice-btn:hover { border-color: var(--accent); color: var(--accent); }
.choice-btn--cancel { color: var(--text-dim); border-style: dashed; }
.dbox--end { color: var(--text-dim); }
.end-actions { display: flex; gap: 10px; }

/* ── Dialogues Library (server, D2/D3) ───────────────────────────────────── */
.overlay__card.library { width: 680px; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; padding: 0; }
.library__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.library__body { padding: 14px 16px; overflow: auto; }

.lib-login { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.lib-field { display: flex; flex-direction: column; gap: 4px; }

.lib-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
.lib-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lib-controls input[type="search"] { flex: 1 1 auto; }
.lib-controls .insp__input { padding: 5px 8px; }
.lib-list { display: flex; flex-direction: column; gap: 6px; }
.lib-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
}
.lib-row.is-current { border-color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); }
.lib-row__main { min-width: 0; text-align: left; background: none; border: none; color: var(--text); cursor: pointer; padding: 0; }
.lib-row__main:hover .lib-row__title { color: var(--accent); }
.lib-row__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-row__meta { color: var(--text-dim); font-size: 11px; }
.lib-row__acts { display: flex; gap: 3px; opacity: 0; transition: opacity .1s; }
.lib-row:hover .lib-row__acts, .lib-row.is-current .lib-row__acts { opacity: 1; }
.lib-danger:hover { color: var(--danger); border-color: var(--danger); }

/* ── Auth pages (signup.html) ────────────────────────────────────────────── */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 24px; }
.auth-card {
  width: 360px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 40px var(--shadow); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.auth-title { margin: 0; font-size: 20px; }
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-field > span { color: var(--text-dim); font-size: 12px; }
.auth-field em { font-style: normal; }
.auth-go { margin-top: 6px; }
.su-msg { min-height: 1.2em; font-size: 13px; }
.su-msg--err { color: var(--danger); }
.su-msg--ok { color: var(--green); }
.auth-link { color: var(--accent); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

.color-field { display: flex; gap: 6px; align-items: center; }
.color-field input[type="color"] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer; }
.color-field .btn { padding: 4px 8px; font-size: 11px; }

[hidden] { display: none !important; }