/* Naheryu V28 arcane skin.
   Layered after tokens.css and layout.css. */

:root {
  --arcane-texture: url("./assets/arcane-starmap-texture.jpg");
  --arcane-sigil: url("./assets/arcane-sigil-glow.jpg");

  --bg-deep: #020202;
  --bg-base: #050403;
  --bg-card: rgba(9, 8, 7, 0.88);
  --bg-elevated: rgba(15, 12, 10, 0.94);
  --bg-hover: rgba(37, 25, 17, 0.92);
  --bg-input: rgba(3, 3, 3, 0.82);

  --gold: #d7a56d;
  --gold-soft: #f5d99b;
  --gold-dim: rgba(215, 165, 109, 0.5);
  --gold-line: rgba(215, 165, 109, 0.28);
  --gold-bg: rgba(215, 165, 109, 0.09);

  --purple: #9a6bff;
  --purple-soft: #d6b6ff;
  --purple-dim: rgba(154, 107, 255, 0.5);
  --purple-line: rgba(154, 107, 255, 0.34);
  --purple-bg: rgba(106, 45, 159, 0.18);

  --cyan: #4ec4d9;
  --cyan-dim: rgba(78, 196, 217, 0.48);
  --cyan-line: rgba(78, 196, 217, 0.24);
  --cyan-bg: rgba(78, 196, 217, 0.09);

  --green: #6dae74;
  --amber: #d79a4b;
  --red: #d05a4f;
  --red-dim: rgba(208, 90, 79, 0.46);
  --red-bg: rgba(208, 90, 79, 0.11);

  --text-strong: #fff2d5;
  --text-main: #e8dcc8;
  --text-muted: #a99d8c;
  --text-faint: #756957;
  --text-disabled: #51483c;

  --border: rgba(215, 165, 109, 0.22);
  --border-soft: rgba(215, 165, 109, 0.16);
  --border-strong: rgba(215, 165, 109, 0.44);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.62);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.66);
  --shadow-lg: 0 22px 64px rgba(0, 0, 0, 0.76);
  --shadow-glow-gold: 0 0 26px rgba(215, 165, 109, 0.2);
  --shadow-glow-purple: 0 0 30px rgba(154, 107, 255, 0.32);
  --shadow-glow-cyan: 0 0 24px rgba(78, 196, 217, 0.24);
}

/* ==========================================================================
   V28.180 · Account-scoped Grimoire Appearance Workshop
   ========================================================================== */

body[data-nh-theme] {
  font-family: var(--nh-theme-font, inherit);
  font-size: var(--fs-body);
}

/* 字體選擇是全站層級：覆蓋各模組殘留的局部 serif/sans 宣告，
   但保留程式碼與數學排版所需的專用字型。 */
body[data-nh-theme] :where(
  main, aside, section, article, header, footer, nav,
  div, span, p, a, label, button, input, select, textarea, option,
  h1, h2, h3, h4, h5, h6, li, dt, dd, summary, blockquote,
  table, thead, tbody, tfoot, tr, th, td, [contenteditable]
):not(:where(code, code *, pre, pre *, kbd, kbd *, samp, samp *, .katex, .katex *, .MathJax, .MathJax *)) {
  font-family: var(--nh-theme-font, inherit) !important;
}

body[data-nh-theme] .app-shell,
body[data-nh-theme] .workspace,
body[data-nh-theme] .workspace::before {
  background-color: var(--bg-deep) !important;
}

body[data-nh-theme] .workspace::before,
body[data-nh-theme] .workspace-inner::before {
  background-image:
    linear-gradient(rgba(2, 2, 2, calc(1 - var(--nh-theme-texture-opacity, .42))), rgba(2, 2, 2, calc(1 - var(--nh-theme-texture-opacity, .42)))),
    var(--nh-theme-workspace-image, var(--arcane-texture)) !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: 1 !important;
}

body[data-nh-theme] .dashboard-panel,
body[data-nh-theme] .summon-card,
body[data-nh-theme] .inspector-section,
body[data-nh-theme] .panel,
body[data-nh-theme] .card {
  background-color: var(--bg-card) !important;
  background-image: linear-gradient(var(--bg-card), var(--bg-card)), var(--nh-theme-panel-image, none) !important;
  background-size: auto, cover !important;
  backdrop-filter: blur(var(--nh-theme-blur, 0));
}

body[data-nh-theme] h1 { font-size: var(--fs-h1); }
body[data-nh-theme] h2 { font-size: var(--fs-h2); }
body[data-nh-theme] h3 { font-size: var(--fs-h3); }
body[data-nh-theme] .dashboard-panel-kicker,
body[data-nh-theme] .shell-kicker,
body[data-nh-theme] .summon-result-kicker,
body[data-nh-theme] .trace-kicker { font-size: var(--fs-tiny) !important; letter-spacing: var(--nh-theme-letter-spacing, 1px); }

/* Legacy workbench/Tailwind surfaces are routed into the same live palette. */
body[data-nh-theme] .bg-zinc-950\/40,
body[data-nh-theme] .bg-zinc-950\/50,
body[data-nh-theme] .bg-zinc-950\/60,
body[data-nh-theme] .bg-zinc-900\/40,
body[data-nh-theme] .bg-zinc-900\/60 { background-color: var(--bg-card) !important; }
body[data-nh-theme] .bg-black,
body[data-nh-theme] .bg-black\/40,
body[data-nh-theme] .bg-black\/50 { background-color: var(--bg-deep) !important; }
body[data-nh-theme] .border-zinc-700,
body[data-nh-theme] .border-zinc-800,
body[data-nh-theme] .border-zinc-900 { border-color: var(--border) !important; }
body[data-nh-theme] .text-zinc-100,
body[data-nh-theme] .text-zinc-200,
body[data-nh-theme] .text-zinc-300 { color: var(--text-main) !important; }
body[data-nh-theme] .text-zinc-400,
body[data-nh-theme] .text-zinc-500 { color: var(--text-muted) !important; }
body[data-nh-theme] .text-zinc-600 { color: var(--text-faint) !important; }
body[data-nh-theme] .text-purple-100,
body[data-nh-theme] .text-purple-200,
body[data-nh-theme] .text-purple-300,
body[data-nh-theme] .text-violet-200,
body[data-nh-theme] .text-violet-300,
body[data-nh-theme] .text-fuchsia-300 { color: var(--purple-soft) !important; }
body[data-nh-theme] .text-cyan-100,
body[data-nh-theme] .text-cyan-200,
body[data-nh-theme] .text-cyan-300 { color: var(--cyan) !important; }
body[data-nh-theme] .text-amber-200,
body[data-nh-theme] .text-amber-300,
body[data-nh-theme] .text-amber-400 { color: var(--gold-soft) !important; }
body[data-nh-theme] #dialogue-messages { background: var(--nh-bg-chat) !important; }
body[data-nh-theme] #dialogue-messages .bg-cyan-950\/60,
body[data-nh-theme] #dialogue-messages .bg-purple-950\/60 { background: var(--nh-bg-user-msg) !important; border-color: var(--border) !important; }
body[data-nh-theme] #dialogue-messages .bg-zinc-900\/60 { background: var(--nh-bg-bot-msg) !important; border-color: var(--border) !important; }
body[data-nh-theme] #dialogue-messages .dialogue-md em { color: var(--purple-soft) !important; }
body[data-nh-theme] #dialogue-messages .dialogue-md blockquote { color: var(--text-muted) !important; border-left-color: var(--border-strong) !important; }

body[data-nh-density="compact"] { --gap-4: 12px; --gap-6: 18px; --gap-8: 24px; }
body[data-nh-density="spacious"] { --gap-4: 20px; --gap-6: 30px; --gap-8: 40px; }

body[data-nh-theme] .naheryu-login-gate {
  background:
    radial-gradient(circle at 30% 52%, color-mix(in srgb, var(--purple) 20%, transparent), transparent 26%),
    linear-gradient(120deg, color-mix(in srgb, var(--bg-deep) 92%, transparent), color-mix(in srgb, var(--bg-base) 96%, transparent)),
    var(--nh-theme-login-image, var(--arcane-texture)) center / cover !important;
}

body[data-nh-theme] .naheryu-login-sigil-layer {
  /* V28.187 旋轉的登入圓陣一律用無模糊 flat 版：主題的 --nh-theme-sigil-image
     多半含高斯模糊，套在會旋轉的圖層上就是卡頓來源，這裡強制蓋掉。 */
  background-image: var(--nh-login-sigil-flat) !important;
}
body[data-nh-theme] .naheryu-login-panel::before {
  background-image: var(--nh-theme-sigil-image, var(--nh-login-sigil-asset)) !important;
  /* V28.184 這顆徽章會旋轉；旋轉+drop-shadow 濾鏡每幀重算 → 卡頓。移除濾鏡。 */
  filter: none;
}

body[data-nh-theme] .naheryu-login-brand::before,
body[data-nh-theme] .topbar-brand::before {
  content: "";
  display: none;
  width: 82px;
  height: 82px;
  margin: 0 auto 14px;
  background: var(--nh-theme-logo-image) center / contain no-repeat;
}

body[data-nh-theme].nh-theme-has-logo .naheryu-login-brand::before { display: block; }
body[data-nh-theme] .naheryu-login-brand { container-type: inline-size; }

body.nh-theme-no-motion *,
body.nh-theme-no-motion *::before,
body.nh-theme-no-motion *::after { animation: none !important; }
body.nh-theme-no-stars .workspace::before,
body.nh-theme-no-stars .workspace-inner::before { background-image: none !important; }
body.nh-theme-no-corners .dashboard-panel::before,
body.nh-theme-no-corners .summon-card::before,
body.nh-theme-no-corners .inspector-section::before { display: none !important; }

body[data-nh-icon-style="minimal"] .nav-item .ico,
body[data-nh-icon-style="minimal"] .dashboard-stat-icon,
body[data-nh-icon-style="minimal"] .inspector-section-head .ico { display: none !important; }
body[data-nh-icon-style="line"] .nav-item .ico,
body[data-nh-icon-style="line"] .dashboard-stat-icon { filter: saturate(.3); opacity: .72; }
body[data-nh-icon-style="etched"] .nav-item .ico,
body[data-nh-icon-style="etched"] .dashboard-stat-icon { color: var(--gold) !important; filter: sepia(1) saturate(.65); }

.dashboard-theme-panel {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: visible !important;
}

#theme-studio { min-width: 0; }

.theme-studio-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gold-line);
}

.theme-studio-hero h2 { margin: 3px 0 6px; color: var(--gold-soft); }
.theme-studio-hero p { max-width: 760px; margin: 0; color: var(--text-muted); line-height: 1.65; font-size: var(--fs-caption); }
.theme-studio-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.theme-font-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.theme-font-quick {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  background: rgba(5, 4, 3, .72);
  color: var(--gold-soft);
  font-size: var(--fs-tiny);
  white-space: nowrap;
}

.theme-font-quick span {
  padding-right: 8px;
  letter-spacing: .08em;
}

.theme-font-quick select {
  min-width: 126px;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--gold-line);
  border-radius: 0;
  padding: 0 24px 0 9px;
  background-color: transparent;
  color: var(--text-main);
}

.theme-font-quick select:focus { outline: 1px solid var(--purple-line); outline-offset: 1px; }

.theme-font-local input {
  width: 150px;
  height: 36px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-md);
  padding: 0 10px;
  background: rgba(5, 4, 3, .72);
  color: var(--text-main);
  font-size: var(--fs-tiny);
}

.theme-font-local input:focus { outline: 1px solid var(--purple-line); outline-offset: 1px; }

.theme-studio-layout {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 18px;
}

.theme-preset-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.theme-preset-rail h3 {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: var(--fs-tiny);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.theme-preset {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-main) !important;
  background: color-mix(in srgb, var(--bg-input) 82%, transparent) !important;
  text-align: left;
  cursor: pointer;
}

.theme-preset:hover,
.theme-preset.active { border-color: var(--purple-dim) !important; background: var(--purple-bg) !important; }
.theme-preset.active { box-shadow: inset 3px 0 var(--purple), 0 0 calc(18px * var(--nh-theme-glow,.38)) var(--purple-line); }
.theme-preset i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--c1) 0 42%, var(--c2) 42% 68%, var(--c3) 68%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.06); }
.theme-preset span { min-width: 0; }
.theme-preset strong,.theme-preset small { display: block; overflow: hidden; text-overflow: ellipsis; }
.theme-preset strong { color: var(--text-strong); font-size: 11px; white-space: nowrap; }
.theme-preset small { margin-top: 3px; color: var(--text-faint); font-size: 9px; line-height: 1.35; }
.theme-preset em { padding: 4px; color: var(--text-faint); font-size: 16px; font-style: normal; }
.theme-preset em:hover { color: var(--red); }

.theme-studio-editor { display: grid; gap: 12px; min-width: 0; }

.theme-live-preview {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  align-items: center;
  gap: 20px;
  min-height: 150px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(100deg, var(--bg-card), color-mix(in srgb, var(--purple) 10%, var(--bg-card))),
    var(--nh-theme-panel-image, none) center / cover;
}

.theme-live-preview::after { content:""; position:absolute; inset:8px; border:1px solid var(--gold-line); pointer-events:none; }
.theme-preview-sigil { width: 82px; aspect-ratio:1; background: var(--nh-theme-sigil-image, var(--nh-login-sigil-asset)) center/contain no-repeat; filter:drop-shadow(0 0 18px var(--purple-dim)); animation:nhCleanInnerTurn 45s linear infinite; }
.theme-preview-kicker,.theme-preview-title,.theme-preview-tagline { display:block; }
.theme-preview-kicker { color:var(--gold); font-size:var(--fs-tiny); letter-spacing:.18em; }
.theme-preview-title { margin-top:4px; color:var(--text-strong); font-size:var(--fs-h1); }
.theme-preview-tagline { margin:4px 0 14px; color:var(--text-muted); font-size:var(--fs-caption); }
.theme-live-preview b,.theme-live-preview em,.theme-live-preview mark { display:inline-flex; margin-right:7px; padding:4px 9px; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--bg-input); color:var(--text-muted); font-size:var(--fs-tiny); font-style:normal; }
.theme-live-preview em { color:var(--magic-soft); border-color:var(--purple-line); }
.theme-live-preview mark { color:var(--gold-soft); border-color:var(--gold-line); }

.theme-studio-editor details { border:1px solid var(--border-soft); border-radius:var(--radius-md); background:color-mix(in srgb, var(--bg-card) 72%, transparent); overflow:hidden; }
.theme-studio-editor summary { padding:13px 15px; color:var(--gold-soft); font-weight:900; font-size:12px; letter-spacing:.05em; cursor:pointer; list-style:none; }
.theme-studio-editor summary::before { content:'✦'; margin-right:9px; color:var(--purple-soft); }
.theme-studio-editor summary small { margin-left:8px; color:var(--text-faint); font-weight:400; letter-spacing:0; }
.theme-studio-editor details[open] summary { border-bottom:1px solid var(--border-soft); background:var(--gold-bg); }

.theme-color-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:14px; }
.theme-color-control { display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:9px; min-width:0; padding:7px; border:1px solid var(--border-soft); border-radius:var(--radius-sm); background:var(--bg-input); cursor:pointer; }
.theme-color-control input { grid-row:1/3; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; }
.theme-color-control span { color:var(--text-main); font-size:10px; }
.theme-color-control code { color:var(--text-faint); font-size:9px; }

.theme-control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 18px; padding:16px; }
.theme-studio-control { display:grid; grid-template-columns:minmax(90px,.7fr) minmax(0,1.3fr); align-items:center; gap:12px; color:var(--text-muted); font-size:11px; }
.theme-studio-control input[type="text"],.theme-studio-control select { width:100%; min-width:0; height:36px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 10px; background:var(--bg-input); color:var(--text-main); }
.theme-studio-control input[type="range"] { width:100%; accent-color:var(--purple); }
.theme-toggle { display:flex; align-items:center; gap:9px; color:var(--text-muted); font-size:11px; }
.theme-toggle input { accent-color:var(--purple); }

.theme-asset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:14px; }
.theme-asset-card { display:grid; grid-template-columns:92px minmax(0,1fr); gap:12px; align-items:center; min-height:92px; padding:9px; border:1px solid var(--border-soft); border-radius:var(--radius-md); background:var(--bg-input); }
.theme-asset-thumb { height:72px; border:1px dashed var(--border-strong); border-radius:var(--radius-sm); background:radial-gradient(circle,var(--purple-bg),transparent 65%),var(--asset-preview) center/cover; }
.theme-asset-card strong,.theme-asset-card span { display:block; }
.theme-asset-card strong { color:var(--text-main); font-size:11px; }
.theme-asset-card span { margin-top:4px; color:var(--text-faint); font-size:9px; }
.theme-asset-actions { display:flex; gap:6px; margin-top:9px; }
.theme-asset-actions button { border:1px solid var(--purple-line) !important; border-radius:var(--radius-sm) !important; padding:4px 7px !important; background:var(--purple-bg) !important; color:var(--purple-soft) !important; font-size:9px !important; }

.theme-legacy-link { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text-muted); }

@media (max-width: 1080px) {
  .theme-font-tools { justify-content:flex-start; }
  .theme-studio-layout { grid-template-columns:1fr; }
  .theme-preset-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .theme-preset-rail h3 { grid-column:1/-1; }
}

@media (max-width: 720px) {
  .theme-studio-hero { flex-direction:column; }
  .theme-studio-actions { justify-content:flex-start; }
  .theme-preset-rail,.theme-color-grid,.theme-control-grid,.theme-asset-grid { grid-template-columns:1fr; }
  .theme-live-preview { grid-template-columns:64px minmax(0,1fr); padding:14px; }
  .theme-preview-sigil { width:58px; }
  .theme-studio-control { grid-template-columns:1fr; gap:6px; }
}

html,
body {
  background:
    radial-gradient(circle at 16% 12%, rgba(154, 107, 255, 0.12), transparent 28vw),
    radial-gradient(circle at 92% 78%, rgba(78, 196, 217, 0.08), transparent 30vw),
    #020202;
  color: var(--text-main);
  font-family: "Noto Serif TC", "Microsoft JhengHei", "PingFang TC", Georgia, serif;
}

body::selection {
  background: rgba(154, 107, 255, 0.35);
  color: var(--text-strong);
}

.app-shell {
  background: transparent;
  isolation: isolate;
  overflow: hidden;
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.app-shell::before {
  z-index: 0;
  background-image:
    radial-gradient(circle at 50% 40%, rgba(154, 107, 255, 0.08), transparent 34%),
    linear-gradient(120deg, rgba(215, 165, 109, 0.05), transparent 30%, rgba(78, 196, 217, 0.035) 70%, transparent),
    var(--arcane-texture);
  background-size: auto, auto, 960px 960px;
  background-position: center, center, center;
  opacity: 0.7;
}

.app-shell::after {
  z-index: 3;
  border: 1px solid rgba(215, 165, 109, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.9),
    inset 0 0 0 3px rgba(215, 165, 109, 0.08),
    inset 0 0 64px rgba(0, 0, 0, 0.84);
  background:
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.65), transparent) left 18px top 18px / 120px 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(215, 165, 109, 0.65), transparent) left 18px top 18px / 1px 120px no-repeat,
    linear-gradient(270deg, transparent, rgba(215, 165, 109, 0.65), transparent) right 18px top 18px / 120px 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(215, 165, 109, 0.65), transparent) right 18px top 18px / 1px 120px no-repeat,
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.65), transparent) left 18px bottom 18px / 120px 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(215, 165, 109, 0.65), transparent) left 18px bottom 18px / 1px 120px no-repeat,
    linear-gradient(270deg, transparent, rgba(215, 165, 109, 0.65), transparent) right 18px bottom 18px / 120px 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(215, 165, 109, 0.65), transparent) right 18px bottom 18px / 1px 120px no-repeat;
}

.topbar,
.leftrail,
.workspace,
.inspector,
.dock {
  position: relative;
  z-index: 1;
}

.topbar,
.leftrail,
.inspector,
.dock,
.card,
.stepper,
.split-3 > .pane,
.drawer,
.focus-modal,
.dock-meter,
.dock-input .input-row {
  background-image:
    linear-gradient(180deg, rgba(255, 244, 210, 0.035), rgba(0, 0, 0, 0.2)),
    var(--arcane-texture);
  background-size: auto, 620px 620px;
  background-blend-mode: normal, soft-light;
}

.topbar {
  min-height: var(--topbar-h);
  background-color: rgba(2, 2, 2, 0.9);
  border-bottom: 1px solid rgba(215, 165, 109, 0.45);
  box-shadow:
    0 1px 0 rgba(255, 226, 166, 0.08),
    0 12px 30px rgba(0, 0, 0, 0.7);
}

.topbar::after,
.dock::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.64), transparent),
    linear-gradient(90deg, transparent 49%, rgba(154, 107, 255, 0.9) 50%, transparent 51%);
  pointer-events: none;
}

.topbar-brand {
  min-width: 280px;
  color: var(--gold-soft);
  font-family: "Noto Serif TC", Georgia, serif;
  font-weight: 900;
  text-shadow: 0 0 16px rgba(215, 165, 109, 0.24);
}

.topbar-brand > span:first-of-type {
  width: 46px;
  height: 46px;
  margin-left: -4px;
  border-radius: 50%;
  border: 1px solid rgba(215, 165, 109, 0.42);
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.4), transparent 34%),
    var(--arcane-sigil) center / 178% no-repeat;
  box-shadow:
    inset 0 0 22px rgba(154, 107, 255, 0.26),
    0 0 24px rgba(154, 107, 255, 0.18);
  color: transparent;
  font-size: 0 !important;
}

.topbar-search input,
.input,
.select,
textarea.input,
.dock-input textarea,
.app-shell input[type="text"],
.app-shell input[type="password"],
.app-shell input[type="number"],
.app-shell select,
.app-shell textarea {
  background:
    linear-gradient(180deg, rgba(255, 235, 190, 0.035), rgba(0, 0, 0, 0.22)),
    rgba(2, 2, 2, 0.62) !important;
  border-color: rgba(215, 165, 109, 0.22) !important;
  color: var(--text-main) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.56),
    inset 0 0 18px rgba(0, 0, 0, 0.42);
}

.topbar-search input:focus,
.input:focus,
.select:focus,
textarea.input:focus,
.dock-input .input-row:focus-within,
.app-shell input:focus,
.app-shell select:focus,
.app-shell textarea:focus {
  border-color: rgba(154, 107, 255, 0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(154, 107, 255, 0.18),
    0 0 0 1px rgba(154, 107, 255, 0.2),
    0 0 22px rgba(154, 107, 255, 0.18) !important;
}

.topbar-search::before {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(215, 165, 109, 0.35);
}

.topbar-model,
.pill,
.dock-input .quick-cmd {
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.38);
}

.leftrail {
  background-color: rgba(3, 3, 3, 0.92);
  border-right: 1px solid rgba(215, 165, 109, 0.44);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.8);
}

.leftrail::before,
.inspector::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 0;
  pointer-events: none;
  box-shadow: 0 0 36px rgba(154, 107, 255, 0.12);
}

.leftrail-section-title,
.inspector-head .title,
.card-title,
.pane-head .title,
.dock-meter .title {
  color: var(--gold-soft);
  font-family: "Noto Serif TC", Georgia, serif;
  text-shadow: 0 0 12px rgba(215, 165, 109, 0.2);
}

.nav-item {
  position: relative;
  min-height: 46px;
  border-radius: var(--radius-md);
  border-color: transparent;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  pointer-events: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.nav-item:hover {
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.08), rgba(154, 107, 255, 0.05), transparent);
  color: var(--gold-soft);
}

.nav-item:hover::before {
  border-color: rgba(215, 165, 109, 0.22);
}

.nav-item .icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(215, 165, 109, 0.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(215, 165, 109, 0.12), transparent 58%),
    rgba(0, 0, 0, 0.36);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(215, 165, 109, 0.35);
}

.nav-item.active,
.nav-item.kind-magic.active {
  background:
    linear-gradient(90deg, rgba(67, 25, 98, 0.72), rgba(33, 18, 44, 0.58) 52%, rgba(215, 165, 109, 0.05)),
    var(--arcane-texture) center / 520px 520px;
  border-color: rgba(154, 107, 255, 0.52);
  color: var(--purple-soft);
  box-shadow:
    inset 0 0 0 1px rgba(255, 231, 180, 0.06),
    0 0 24px rgba(154, 107, 255, 0.26);
}

.nav-item.active::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%) rotate(45deg);
  background: radial-gradient(circle, rgba(214, 182, 255, 0.95), rgba(154, 107, 255, 0.34) 38%, transparent 70%);
  filter: drop-shadow(0 0 12px rgba(154, 107, 255, 0.7));
  pointer-events: none;
}

.nav-item.active .icon {
  border-color: rgba(154, 107, 255, 0.66);
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.35), transparent 60%),
    rgba(15, 7, 28, 0.9);
  color: #efe0ff;
}

.workspace {
  background:
    radial-gradient(circle at 64% 48%, rgba(154, 107, 255, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42));
}

.workspace::before {
  content: "";
  position: fixed;
  right: 15vw;
  top: 16vh;
  width: min(48vw, 720px);
  aspect-ratio: 1;
  background: var(--arcane-sigil) center / contain no-repeat;
  opacity: 0.12;
  mix-blend-mode: screen;
  filter: saturate(0.78);
  pointer-events: none;
}

.workspace-inner {
  max-width: 1500px;
}

.card,
.split-3 > .pane,
.stepper,
.inspector-section,
.dock-meter,
.dock-input .input-row,
.drawer,
.focus-modal {
  position: relative;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: var(--radius-lg);
  background-color: rgba(6, 5, 4, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 177, 0.035),
    inset 0 0 32px rgba(0, 0, 0, 0.58),
    0 12px 32px rgba(0, 0, 0, 0.34);
}

.card::before,
.split-3 > .pane::before,
.stepper::before,
.inspector-section::before,
.dock-input .input-row::before,
.drawer::before,
.focus-modal::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 4px;
  border: 1px solid rgba(215, 165, 109, 0.08);
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.58), transparent 42%) left top / 58px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.58), transparent 42%) left top / 1px 58px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.58), transparent 42%) right top / 58px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.58), transparent 42%) right top / 1px 58px no-repeat,
    linear-gradient(90deg, rgba(215, 165, 109, 0.58), transparent 42%) left bottom / 58px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.58), transparent 42%) left bottom / 1px 58px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.58), transparent 42%) right bottom / 58px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.58), transparent 42%) right bottom / 1px 58px no-repeat;
  opacity: 0.86;
  pointer-events: none;
}

.card > *,
.split-3 > .pane > *,
.stepper > *,
.inspector-section > *,
.dock-input .input-row > *,
.drawer > *,
.focus-modal > * {
  position: relative;
  z-index: 1;
}

.stepper {
  padding: 14px;
}

.step {
  border-color: rgba(215, 165, 109, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 236, 195, 0.05), rgba(0, 0, 0, 0.2)),
    rgba(8, 7, 5, 0.8);
}

.step.active {
  border-color: rgba(154, 107, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.28), rgba(53, 23, 81, 0.5)),
    rgba(8, 7, 5, 0.82);
  color: var(--purple-soft);
  box-shadow: 0 0 22px rgba(154, 107, 255, 0.2);
}

button.btn,
.app-shell button[class*="px-"],
.app-shell button[class*="py-"] {
  background:
    linear-gradient(180deg, rgba(255, 230, 174, 0.055), rgba(0, 0, 0, 0.22)),
    rgba(8, 7, 5, 0.82) !important;
  border: 1px solid rgba(215, 165, 109, 0.24) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-main) !important;
  font-family: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.42),
    0 0 0 rgba(0, 0, 0, 0);
}

button.btn:hover,
.app-shell button[class*="px-"]:hover,
.app-shell button[class*="py-"]:hover {
  border-color: rgba(215, 165, 109, 0.62) !important;
  color: var(--gold-soft) !important;
  box-shadow:
    inset 0 0 18px rgba(215, 165, 109, 0.08),
    0 0 18px rgba(215, 165, 109, 0.12);
}

button.btn.purple,
.app-shell .bg-violet-950,
.app-shell .bg-purple-950 {
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.24), rgba(38, 16, 64, 0.6)),
    rgba(8, 7, 5, 0.84) !important;
  border-color: rgba(154, 107, 255, 0.5) !important;
  color: var(--purple-soft) !important;
}

button.btn.gold {
  background:
    linear-gradient(180deg, rgba(215, 165, 109, 0.2), rgba(38, 27, 12, 0.46)),
    rgba(8, 7, 5, 0.82) !important;
  border-color: rgba(215, 165, 109, 0.58) !important;
  color: var(--gold-soft) !important;
}

button.btn.danger {
  border-color: rgba(208, 90, 79, 0.5) !important;
  color: #ffb2a8 !important;
}

.pill.ok {
  background: rgba(47, 97, 55, 0.2);
  color: #9bd690;
  border-color: rgba(109, 174, 116, 0.4);
}

.pill.info {
  background: rgba(31, 94, 109, 0.2);
  color: #98e8f3;
  border-color: rgba(78, 196, 217, 0.4);
}

.pill.gold {
  background: rgba(98, 64, 22, 0.24);
  color: var(--gold-soft);
  border-color: rgba(215, 165, 109, 0.4);
}

.pill.warn {
  background: rgba(116, 72, 20, 0.22);
  color: #ffc87a;
  border-color: rgba(215, 154, 75, 0.4);
}

.pill.err {
  background: rgba(105, 31, 28, 0.25);
  color: #ffaea5;
  border-color: rgba(208, 90, 79, 0.42);
}

.inspector {
  background-color: rgba(3, 3, 3, 0.9);
  border-left: 1px solid rgba(215, 165, 109, 0.42);
}

.inspector-head,
.focus-modal-head,
.drawer-head,
.pane-head {
  background:
    linear-gradient(180deg, rgba(215, 165, 109, 0.08), rgba(0, 0, 0, 0.16)),
    rgba(7, 6, 5, 0.92);
  border-bottom-color: rgba(215, 165, 109, 0.26);
}

.inspector-section {
  margin: 10px 10px 0;
  padding: 14px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.12);
}

.inspector-section-head .label .ico {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(154, 107, 255, 0.42);
}

.compact-slider input[type="range"] {
  accent-color: var(--purple);
}

.compact-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.92), rgba(78, 196, 217, 0.66)),
    rgba(215, 165, 109, 0.12);
}

.compact-slider input[type="range"]::-webkit-slider-thumb {
  margin-top: -5px;
  border: 1px solid rgba(255, 238, 207, 0.78);
  box-shadow: 0 0 14px rgba(154, 107, 255, 0.55);
}

.dock {
  background-color: rgba(2, 2, 2, 0.92);
  border-top: 1px solid rgba(215, 165, 109, 0.46);
  box-shadow: 0 -14px 32px rgba(0, 0, 0, 0.62);
}

.dock::before {
  content: "";
  flex: 0 0 106px;
  align-self: stretch;
  margin-right: 2px;
  background: var(--arcane-sigil) center / 150% no-repeat;
  opacity: 0.74;
  mix-blend-mode: screen;
  filter: saturate(0.9) drop-shadow(0 0 18px rgba(154, 107, 255, 0.32));
  pointer-events: none;
}

.dock-input .input-row {
  border-color: rgba(215, 165, 109, 0.3);
}

.dock-input .quick-cmd {
  border-color: rgba(215, 165, 109, 0.22);
  color: var(--gold-soft);
}

.dock-input .quick-cmd:hover {
  border-color: rgba(154, 107, 255, 0.52);
  color: var(--purple-soft);
}

.dock-execute {
  position: relative;
  overflow: hidden;
  width: 148px;
  border: 1px solid rgba(154, 107, 255, 0.58);
  background:
    radial-gradient(circle at 50% 44%, rgba(154, 107, 255, 0.52), transparent 44%),
    var(--arcane-sigil) center / 168% no-repeat,
    linear-gradient(180deg, rgba(38, 14, 75, 0.92), rgba(11, 5, 19, 0.94));
  color: #f4e7ff;
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.06),
    0 0 34px rgba(154, 107, 255, 0.34);
}

.dock-execute:hover {
  background:
    radial-gradient(circle at 50% 44%, rgba(214, 182, 255, 0.62), transparent 45%),
    var(--arcane-sigil) center / 162% no-repeat,
    linear-gradient(180deg, rgba(55, 20, 102, 0.94), rgba(18, 6, 32, 0.96));
}

.dock-execute .ico {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 238, 207, 0.32);
  font-size: 0 !important;
}

.dock-execute .ico::after {
  content: "\2726";
  font-size: 22px;
  color: #f7dcff;
  text-shadow: 0 0 18px rgba(214, 182, 255, 0.9);
}

.drawer-overlay {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}

.drawer,
.focus-modal {
  border-color: rgba(215, 165, 109, 0.52);
}

.app-shell [class*="bg-zinc-950"],
.app-shell [class*="bg-zinc-900"],
.app-shell [class*="bg-zinc-800"],
.app-shell [class*="bg-black"] {
  background-color: rgba(6, 5, 4, 0.72) !important;
}

.app-shell [class*="border-zinc-900"],
.app-shell [class*="border-zinc-800"],
.app-shell [class*="border-zinc-700"],
.app-shell [class*="border-zinc-600"] {
  border-color: rgba(215, 165, 109, 0.22) !important;
}

.app-shell [class*="text-zinc-300"],
.app-shell [class*="text-zinc-200"] {
  color: var(--text-main) !important;
}

.app-shell [class*="text-zinc-500"],
.app-shell [class*="text-zinc-400"],
.app-shell [class*="text-zinc-600"] {
  color: var(--text-muted) !important;
}

.app-shell a,
.dialogue-md a {
  color: #95e7f2;
}

.app-shell ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.app-shell ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.24);
}

.app-shell ::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(215, 165, 109, 0.52), rgba(154, 107, 255, 0.4));
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.48);
}

/* Refined V28.2 details: vector glyphs, panel hierarchy, and quiet magic motion. */
:root {
  --icon-dashboard: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 3.6v3.1M12 17.3v3.1M3.6 12h3.1M17.3 12h3.1M7.2 7.2l2.2 2.2M14.6 14.6l2.2 2.2M16.8 7.2l-2.2 2.2M9.4 14.6l-2.2 2.2'/%3E%3Cpath d='M9.2 12a2.8 2.8 0 1 0 5.6 0a2.8 2.8 0 0 0-5.6 0Z'/%3E%3C/g%3E%3C/svg%3E");
  --icon-summon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l2.3 6.9l6.9 2.3l-6.9 2.3l-2.3 6.9l-2.3-6.9L2.8 12l6.9-2.3L12 2.8Z'/%3E%3Cpath d='M12 7.8l1.2 3l3 1.2l-3 1.2l-1.2 3l-1.2-3l-3-1.2l3-1.2l1.2-3Z'/%3E%3C/g%3E%3C/svg%3E");
  --icon-dialogue: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 6.5h13.6a2 2 0 0 1 2 2v6.2a2 2 0 0 1-2 2h-5.5L9 20.4v-3.7H5.2a2 2 0 0 1-2-2V8.5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M8 11.4h.1M12 11.4h.1M16 11.4h.1'/%3E%3C/g%3E%3C/svg%3E");
  --icon-codex: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 4.2h5.2a3.4 3.4 0 0 1 3.4 3.4v12.2a3.8 3.8 0 0 0-3.4-2H5.4V4.2Z'/%3E%3Cpath d='M18.6 4.2h-4.8v15.6a3.8 3.8 0 0 1 3.4-2h1.4V4.2Z'/%3E%3Cpath d='M8 8h3M8 11h3M16 8h1.4M16 11h1.4'/%3E%3C/g%3E%3C/svg%3E");
  --icon-worldbook: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M3.8 12h16.4M12 3.4c2.2 2.2 3.2 5 3.2 8.6s-1 6.4-3.2 8.6M12 3.4C9.8 5.6 8.8 8.4 8.8 12s1 6.4 3.2 8.6M5.4 7.8h13.2M5.4 16.2h13.2'/%3E%3C/g%3E%3C/svg%3E");
  --icon-charlib: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2a3.2 3.2 0 0 1 3.2 3.2c0 2.1-1.4 3.5-3.2 3.5s-3.2-1.4-3.2-3.5A3.2 3.2 0 0 1 12 4.2Z'/%3E%3Cpath d='M5.8 19.4a6.2 6.2 0 0 1 12.4 0'/%3E%3Cpath d='M4.6 11.8a2.7 2.7 0 0 1 2.7-2.7M19.4 11.8a2.7 2.7 0 0 0-2.7-2.7M2.8 19.4a4.4 4.4 0 0 1 4.2-3.8M21.2 19.4a4.4 4.4 0 0 0-4.2-3.8'/%3E%3C/g%3E%3C/svg%3E");
  --icon-tavern: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 5.2h10.4v4.6a5.2 5.2 0 0 1-10.4 0V5.2Z'/%3E%3Cpath d='M17.2 7.3h2.2a1.8 1.8 0 0 1 0 3.6h-2.2M9.2 20h5.6M12 15v5M8.6 8.2h6.8'/%3E%3C/g%3E%3C/svg%3E");
  --icon-settings: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M12 3.4v2.2M12 18.4v2.2M3.4 12h2.2M18.4 12h2.2M5.9 5.9l1.6 1.6M16.5 16.5l1.6 1.6M18.1 5.9l-1.6 1.6M7.5 16.5l-1.6 1.6'/%3E%3Ccircle cx='12' cy='12' r='7.1'/%3E%3C/g%3E%3C/svg%3E");
  --icon-export: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10M8.4 7.6L12 4l3.6 3.6'/%3E%3Cpath d='M5 12.4v5.8a1.8 1.8 0 0 0 1.8 1.8h10.4a1.8 1.8 0 0 0 1.8-1.8v-5.8'/%3E%3Cpath d='M8.2 14.8h7.6'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes arcaneBreath {
  0%, 100% { opacity: 0.72; filter: saturate(0.9) drop-shadow(0 0 14px rgba(154, 107, 255, 0.22)); }
  50% { opacity: 0.95; filter: saturate(1.08) drop-shadow(0 0 24px rgba(154, 107, 255, 0.44)); }
}

@keyframes arcaneOrbit {
  to { transform: rotate(360deg); }
}

@keyframes arcaneSweep {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  18% { opacity: 0.42; }
  46%, 100% { transform: translateX(160%) skewX(-18deg); opacity: 0; }
}

@keyframes arcaneActivePin {
  0%, 100% { opacity: 0.68; transform: translateY(-50%) rotate(45deg) scale(0.88); }
  50% { opacity: 1; transform: translateY(-50%) rotate(45deg) scale(1.08); }
}

.nav-item .icon {
  font-size: 0;
}

.nav-item .icon::before {
  content: "";
  width: 19px;
  height: 19px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--icon-dashboard) center / contain no-repeat;
  mask: var(--icon-dashboard) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(215, 165, 109, 0.3));
}

.nav-item[data-module="dashboard"] .icon::before { -webkit-mask-image: var(--icon-dashboard); mask-image: var(--icon-dashboard); }
.nav-item[data-module="summon"] .icon::before { -webkit-mask-image: var(--icon-summon); mask-image: var(--icon-summon); }
.nav-item[data-module="dialogue"] .icon::before { -webkit-mask-image: var(--icon-dialogue); mask-image: var(--icon-dialogue); }
.nav-item[data-module="codex"] .icon::before { -webkit-mask-image: var(--icon-codex); mask-image: var(--icon-codex); }
.nav-item[data-module="worldbook"] .icon::before { -webkit-mask-image: var(--icon-worldbook); mask-image: var(--icon-worldbook); }
.nav-item[data-module="charlib"] .icon::before { -webkit-mask-image: var(--icon-charlib); mask-image: var(--icon-charlib); }
.nav-item[data-module="tavern"] .icon::before { -webkit-mask-image: var(--icon-tavern); mask-image: var(--icon-tavern); }
.nav-item[data-module="settings"] .icon::before { -webkit-mask-image: var(--icon-settings); mask-image: var(--icon-settings); }
.nav-item[data-module="export"] .icon::before { -webkit-mask-image: var(--icon-export); mask-image: var(--icon-export); }

.nav-item.active::after {
  animation: arcaneActivePin 3.8s ease-in-out infinite;
}

.topbar-brand > span:first-of-type,
.dock::before,
.dock-execute {
  animation: arcaneBreath 6.8s ease-in-out infinite;
}

.topbar-brand > span:first-of-type::before,
.dock-execute::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(215, 165, 109, 0.24);
  pointer-events: none;
  animation: arcaneOrbit 28s linear infinite;
}

.topbar-brand > span:first-of-type {
  position: relative;
}

.topbar-brand > span:first-of-type::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 222, 255, 0.85), rgba(154, 107, 255, 0.28) 35%, transparent 70%);
  box-shadow: 0 0 20px rgba(154, 107, 255, 0.45);
  pointer-events: none;
}

button.btn,
.dock-execute,
.nav-item,
.card,
.inspector-section,
.split-3 > .pane {
  overflow: hidden;
}

button.btn::after,
.nav-item::marker {
  display: none;
}

button.btn:not([disabled]) {
  position: relative;
}

button.btn:not([disabled])::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(255, 234, 186, 0.16), transparent);
  pointer-events: none;
  transform: translateX(-140%) skewX(-18deg);
}

button.btn:not([disabled]):hover::before {
  animation: arcaneSweep 1.15s ease-out;
}

.workspace [data-module-view].active {
  position: relative;
  min-height: 100%;
}

.workspace [data-module-view].active::before {
  content: "";
  position: absolute;
  inset: -8px -10px 0;
  border: 1px solid rgba(215, 165, 109, 0.12);
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 165, 109, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.38));
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.44);
  pointer-events: none;
}

.workspace [data-module-view].active > * {
  position: relative;
  z-index: 1;
}

.workspace h1 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 80px;
}

.workspace h1::after {
  content: "";
  width: 68px;
  height: 1px;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.78), transparent),
    radial-gradient(circle at 14px 50%, rgba(154, 107, 255, 0.9), transparent 4px);
}

.card-head,
.inspector-section-head,
.pane-head,
.drawer-head,
.focus-modal-head {
  position: relative;
}

.card-head::after,
.inspector-section-head::after,
.pane-head::after,
.drawer-head::after,
.focus-modal-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.46), transparent 38%, rgba(154, 107, 255, 0.26) 50%, transparent 72%);
  pointer-events: none;
}

.card-title::before,
.inspector-section-head .label::before,
.pane-head .title::before {
  content: "\2727";
  color: rgba(215, 165, 109, 0.86);
  margin-right: 7px;
  text-shadow: 0 0 10px rgba(215, 165, 109, 0.35);
}

.dock-input .input-row::after,
.dock-meter::after,
.card::after,
.inspector-section::after,
.split-3 > .pane::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  right: 8px;
  top: 8px;
  border-top: 1px solid rgba(215, 165, 109, 0.5);
  border-right: 1px solid rgba(215, 165, 109, 0.5);
  transform: rotate(45deg);
  opacity: 0.65;
  pointer-events: none;
}

.workspace [data-module-view="dashboard"].active::before,
.workspace [data-module-view="worldbook"].active::before,
.workspace [data-module-view="charlib"].active::before {
  background:
    radial-gradient(circle at 26% 20%, rgba(78, 196, 217, 0.045), transparent 34%),
    radial-gradient(circle at 70% 14%, rgba(215, 165, 109, 0.06), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.4));
}

.workspace [data-module-view="summon"].active::before,
.workspace [data-module-view="dialogue"].active::before {
  background:
    radial-gradient(circle at 58% 25%, rgba(154, 107, 255, 0.1), transparent 34%),
    radial-gradient(circle at 14% 16%, rgba(215, 165, 109, 0.06), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 1024px) {
  .topbar-brand {
    min-width: auto;
  }

  .inspector {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    left: auto;
    height: calc(100vh - var(--topbar-h));
    transform: translateX(100%);
    transition: transform var(--t-normal);
    z-index: var(--z-drawer);
  }

  .app-shell.inspector-open .inspector {
    transform: translateX(0);
  }

  .topbar-brand > span:first-of-type {
    width: 38px;
    height: 38px;
  }

  .workspace::before {
    right: -18vw;
    top: 18vh;
    width: 76vw;
    opacity: 0.08;
  }
}

@media (max-width: 720px) {
  :root {
    --bottomdock-h: 92px;
  }

  .app-shell {
    grid-template-areas:
      "topbar"
      "main"
      "dock"
      "rail";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--bottomdock-h) 56px;
    width: 100vw;
    max-width: 100vw;
  }

  .app-shell::after {
    inset: 4px;
  }

  .topbar {
    gap: var(--gap-2);
    padding: 0 var(--gap-2);
    min-width: 0;
    overflow: hidden;
  }

  .topbar-brand > span:nth-of-type(2),
  .topbar-brand .pill {
    display: none;
  }

  .topbar-brand {
    flex: 0 0 auto;
    min-width: 0;
    gap: 4px;
  }

  .topbar-brand button.btn {
    width: 30px;
    min-width: 30px;
    padding: 4px !important;
  }

  .topbar-actions .topbar-model,
  .topbar-actions button:not(.purple) {
    display: none !important;
  }

  .topbar-actions {
    flex: 0 0 auto;
    gap: 4px;
    margin-left: 0;
  }

  .topbar-actions button.purple {
    width: 30px;
    min-width: 30px;
    padding: 4px !important;
  }

  .topbar-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .topbar-search input {
    height: 32px;
    min-width: 0;
    padding-left: 28px;
    font-size: 12px;
    text-overflow: ellipsis;
  }

  .workspace,
  .dock,
  .leftrail {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
  }

  .inspector {
    grid-area: main;
    width: min(360px, 100vw);
    max-width: 100vw;
  }

  .workspace {
    min-height: 0;
  }

  .dock {
    height: var(--bottomdock-h);
    min-height: var(--bottomdock-h);
    max-height: var(--bottomdock-h);
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
    overflow: hidden;
  }

  .dock::before {
    display: none;
  }

  .dock-input {
    min-width: 0;
    flex: 1 1 auto;
    gap: 4px;
  }

  .dock-input .input-row {
    flex: 0 0 48px;
    min-height: 48px;
    height: 48px;
    padding: 6px;
  }

  .dock-input .input-row button.btn {
    width: 34px;
    min-width: 34px;
    padding: 4px !important;
  }

  .dock-input textarea {
    min-height: 34px;
    font-size: 12px;
    line-height: 1.35;
  }

  .dock-input .quick-cmds {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    height: 24px;
    padding-bottom: 2px;
  }

  .dock-input .quick-cmds > span:first-child {
    display: none;
  }

  .dock-input .quick-cmd {
    flex: 0 0 auto;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 18px;
  }

  .dock-execute {
    flex: 0 0 74px;
    width: 74px;
    height: auto;
    min-height: 74px;
    padding: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .dock-execute .ico {
    width: 28px;
    height: 28px;
  }

  .dock-execute .ico::after {
    font-size: 18px;
  }

  .dock-execute .hint {
    display: none;
  }

  .nav-item.active::after {
    display: none;
  }
}

/* V28.9 Arcane polish: controls, frames, and summon bench refinement. */
:root {
  --arcane-bronze-line: rgba(215, 165, 109, 0.36);
  --arcane-bronze-soft: rgba(245, 217, 155, 0.16);
  --arcane-violet-line: rgba(154, 107, 255, 0.58);
  --arcane-cyan-line: rgba(78, 196, 217, 0.38);
  --arcane-panel-fill: rgba(5, 4, 4, 0.84);
}

.app-shell::after {
  inset: 4px;
  border-color: rgba(215, 165, 109, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.92),
    inset 0 0 0 3px rgba(215, 165, 109, 0.075),
    inset 0 0 96px rgba(0, 0, 0, 0.86),
    0 0 34px rgba(154, 107, 255, 0.08);
}

.topbar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 164px;
  height: 1px;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.72), transparent),
    radial-gradient(circle, rgba(214, 182, 255, 0.88), transparent 58%);
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.18);
  pointer-events: none;
}

.topbar-search input {
  border-radius: 6px !important;
  min-height: 38px;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.035), transparent 26%, rgba(154, 107, 255, 0.04)),
    rgba(3, 3, 3, 0.82) !important;
}

.topbar-search input:focus {
  border-color: var(--arcane-cyan-line) !important;
  box-shadow:
    inset 0 0 0 1px rgba(78, 196, 217, 0.14),
    0 0 0 1px rgba(78, 196, 217, 0.18),
    0 0 22px rgba(78, 196, 217, 0.12) !important;
}

.topbar-model {
  border-color: rgba(215, 165, 109, 0.34);
  background:
    linear-gradient(180deg, rgba(215, 165, 109, 0.08), rgba(0, 0, 0, 0.28)),
    rgba(5, 4, 4, 0.82);
}

.nav-item {
  min-height: 48px;
}

.nav-item::before {
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.42), transparent 32%) left top / 32px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.42), transparent 32%) left top / 1px 32px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.42), transparent 32%) right bottom / 32px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.42), transparent 32%) right bottom / 1px 32px no-repeat;
  opacity: 0;
}

.nav-item:hover::before,
.nav-item.active::before {
  opacity: 1;
}

.nav-item.active .badge,
.pill.magic,
.pill.info {
  border-color: rgba(154, 107, 255, 0.38);
  color: #e5d4ff;
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.24), rgba(0, 0, 0, 0.22)),
    rgba(16, 8, 28, 0.72);
}

.workspace-inner {
  width: min(100%, 1560px);
}

.inspector [data-inspector-view] {
  padding: 10px;
}

.inspector-section {
  margin: 0 0 10px;
  padding: 14px;
  border-bottom: 0;
  overflow: hidden;
}

.inspector-section-head {
  min-height: 28px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.13);
}

.inspector-section-head .label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  transform: rotate(45deg);
  border: 1px solid rgba(245, 217, 155, 0.72);
  background: rgba(154, 107, 255, 0.28);
  box-shadow: 0 0 10px rgba(154, 107, 255, 0.38);
}

.compact-slider input[type="range"] {
  height: 14px;
  background: transparent;
}

.compact-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid rgba(215, 165, 109, 0.24);
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.9), rgba(78, 196, 217, 0.66) 72%, rgba(215, 165, 109, 0.3)),
    rgba(0, 0, 0, 0.62);
}

.compact-slider input[type="range"]::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f4e7ff 0 22%, #b887ff 38%, #261347 76%);
}

button.btn,
.app-shell button[class*="px-"],
.app-shell button[class*="py-"],
.dock-input .quick-cmd {
  min-height: 34px;
  position: relative;
  overflow: hidden;
}

button.btn::after,
.app-shell button[class*="px-"]::after,
.app-shell button[class*="py-"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 36%, rgba(255, 238, 207, 0.12) 48%, transparent 62% 100%);
  transform: translateX(-140%);
  transition: transform 420ms var(--ease);
  pointer-events: none;
}

button.btn:hover::after,
.app-shell button[class*="px-"]:hover::after,
.app-shell button[class*="py-"]:hover::after {
  transform: translateX(140%);
}

button.btn.purple,
.app-shell button[class*="purple"],
.app-shell button[class*="fuchsia"] {
  border-color: rgba(154, 107, 255, 0.54) !important;
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.28), rgba(36, 13, 66, 0.38)),
    rgba(6, 4, 10, 0.88) !important;
  color: #eadcff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 18px rgba(154, 107, 255, 0.16);
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
  accent-color: var(--purple);
}

.app-shell select,
.app-shell input,
.app-shell textarea {
  outline: none;
  outline-offset: 2px;
}

.app-shell select:hover,
.app-shell input:hover,
.app-shell textarea:hover {
  border-color: rgba(215, 165, 109, 0.44) !important;
}

.card::after,
.split-3 > .pane::after,
.stepper::after,
.inspector-section::after,
#slot-summon-controls::after,
#slot-summon-namesummon::after,
#name-summon-panel::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 10px;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.52), transparent),
    radial-gradient(circle, rgba(154, 107, 255, 0.75), transparent 64%);
  opacity: 0.58;
  pointer-events: none;
}

.stepper {
  gap: 10px;
  align-items: stretch;
}

.step {
  min-height: 42px;
  border-radius: 6px;
}

.step.active {
  border-color: var(--arcane-violet-line);
  box-shadow:
    inset 0 -2px 0 rgba(214, 182, 255, 0.72),
    0 0 24px rgba(154, 107, 255, 0.24);
}

.app-shell.shell-module-summon {
  grid-template-areas:
    "topbar  topbar  topbar"
    "rail    main    inspector"
    "rail    main    inspector";
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) 0;
}

.app-shell.shell-module-summon .dock,
.app-shell:has([data-module-view="summon"].active) .dock {
  display: none !important;
}

.app-shell.shell-module-summon .workspace-inner {
  max-width: none;
  padding: 18px 18px 16px !important;
}

.app-shell.shell-module-summon [data-module-view="summon"].active {
  padding: 0 2px;
}

.app-shell.shell-module-summon #slot-summon-namesummon,
.app-shell.shell-module-summon #slot-summon-controls,
.app-shell.shell-module-summon #name-summon-panel {
  position: relative;
  border: 1px solid rgba(215, 165, 109, 0.34) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.035), rgba(0, 0, 0, 0.34)),
    var(--arcane-panel-fill) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    inset 0 0 44px rgba(0, 0, 0, 0.58),
    0 14px 34px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.app-shell.shell-module-summon #slot-summon-controls {
  padding: 14px !important;
}

.app-shell.shell-module-summon #slot-summon-controls > * {
  position: relative;
  z-index: 1;
}

.app-shell.shell-module-summon #slot-summon-controls::before,
.app-shell.shell-module-summon #slot-summon-namesummon::before,
.app-shell.shell-module-summon #name-summon-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 4px;
  border: 1px solid rgba(215, 165, 109, 0.09);
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.62), transparent 34%) left top / 70px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.62), transparent 34%) left top / 1px 70px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.62), transparent 34%) right top / 70px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.62), transparent 34%) right top / 1px 70px no-repeat,
    linear-gradient(90deg, rgba(215, 165, 109, 0.62), transparent 34%) left bottom / 70px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.62), transparent 34%) left bottom / 1px 70px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.62), transparent 34%) right bottom / 70px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.62), transparent 34%) right bottom / 1px 70px no-repeat;
  pointer-events: none;
}

.app-shell.shell-module-summon #slot-summon-controls label,
.app-shell.shell-module-summon #name-summon-panel label {
  color: var(--gold-soft) !important;
  text-shadow: 0 0 12px rgba(215, 165, 109, 0.18);
}

.app-shell.shell-module-summon #slot-summon-controls select,
.app-shell.shell-module-summon #name-summon-input {
  min-height: 52px;
  border-radius: 6px !important;
  border-color: rgba(215, 165, 109, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 244, 210, 0.045), rgba(0, 0, 0, 0.32)),
    rgba(2, 2, 2, 0.82) !important;
}

.app-shell.shell-module-summon #sel-r1 {
  border-color: rgba(208, 90, 79, 0.36) !important;
}

.app-shell.shell-module-summon #sel-r2 {
  border-color: rgba(78, 196, 217, 0.34) !important;
}

.app-shell.shell-module-summon #sel-r3 {
  border-color: rgba(215, 165, 109, 0.36) !important;
}

.app-shell.shell-module-summon #preset-preview {
  border-radius: 8px !important;
  border-color: rgba(215, 165, 109, 0.32) !important;
  background:
    linear-gradient(180deg, rgba(215, 165, 109, 0.045), rgba(0, 0, 0, 0.26)),
    rgba(4, 3, 3, 0.8) !important;
}

.app-shell.shell-module-summon #result-area {
  max-width: none !important;
  gap: 28px !important;
  margin-bottom: 0 !important;
}

.app-shell.shell-module-summon #result-area section,
.app-shell.shell-module-summon #result-area > .relative > section {
  border-radius: 8px !important;
  border-color: rgba(215, 165, 109, 0.3) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.065), transparent 40%),
    rgba(4, 3, 3, 0.82) !important;
}

.app-shell.shell-module-summon button[onclick="handleExecuteSummon()"] {
  border-color: rgba(154, 107, 255, 0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.05),
    0 0 34px rgba(154, 107, 255, 0.24) !important;
}

.app-shell.shell-module-dialogue #dialogue-messages,
.app-shell.shell-module-dialogue #dialogue-chat-box > .border-t {
  border-color: rgba(215, 165, 109, 0.26) !important;
}

@media (max-width: 900px) {
  .app-shell.shell-module-summon {
    grid-template-areas:
      "topbar"
      "main"
      "rail";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr) 56px;
  }

  .app-shell.shell-module-summon .workspace-inner {
    padding: 10px !important;
  }

  .app-shell.shell-module-summon #slot-summon-controls {
    padding: 10px !important;
  }
}

/* V28.14 document bridge + atlas polish */
.charlib-shell-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.charlib-shell-card {
  grid-template-rows: 168px auto 1fr auto;
  min-height: 356px;
  padding: 11px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 22%, rgba(154, 107, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(215, 165, 109, 0.055), rgba(0, 0, 0, 0.24)),
    rgba(6, 5, 5, 0.88);
}

.charlib-shell-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(215, 165, 109, 0.08);
  border-radius: 6px;
  pointer-events: none;
  z-index: -1;
}

.charlib-shell-portrait {
  aspect-ratio: auto;
  height: 168px;
  width: 100%;
  background:
    radial-gradient(circle at 50% 46%, rgba(154, 107, 255, 0.28), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(78, 196, 217, 0.12), transparent 54%),
    linear-gradient(135deg, rgba(215, 165, 109, 0.08), transparent 42%),
    rgba(0, 0, 0, 0.62);
}

.charlib-shell-portrait::before,
.worldbook-shell-cover::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(215, 165, 109, 0.13);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  pointer-events: none;
}

.charlib-shell-portrait img {
  display: block;
}

.charlib-shell-portrait span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(154, 107, 255, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.24), rgba(0, 0, 0, 0.2) 64%),
    rgba(0, 0, 0, 0.36);
}

.charlib-shell-card-body {
  min-height: 86px;
}

.charlib-shell-card-body strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.charlib-shell-card-body small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.charlib-shell-card-body em {
  display: -webkit-box;
  min-height: 48px;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.charlib-shell-card-metrics {
  align-self: end;
  padding: 8px;
  border: 1px solid rgba(215, 165, 109, 0.13);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.26);
}

.charlib-shell-card .shell-metric-row:nth-child(n+6) {
  display: none;
}

.charlib-shell-rank {
  position: absolute;
  top: 18px;
  right: 18px;
  backdrop-filter: blur(8px);
}

button.worldbook-shell-cover {
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.worldbook-shell-cover.hero:hover,
.worldbook-shell-cover.mini:hover {
  border-color: rgba(154, 107, 255, 0.62);
  box-shadow: 0 0 24px rgba(154, 107, 255, 0.16);
}

.doc-bridge-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(154, 107, 255, 0.44);
  border-radius: 12px;
  color: var(--purple-soft);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background:
    radial-gradient(circle at 20% 20%, rgba(154, 107, 255, 0.24), transparent 42%),
    rgba(35, 12, 62, 0.46);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.doc-bridge-inline-btn:hover {
  border-color: rgba(214, 182, 255, 0.78);
  box-shadow: 0 0 22px rgba(154, 107, 255, 0.18);
  transform: translateY(-1px);
}

.doc-bridge-modal {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: none;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.14), transparent 46%),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
}

.doc-bridge-panel {
  position: relative;
  width: min(1180px, 96vw);
  max-height: min(820px, 92vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid rgba(215, 165, 109, 0.26);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 16%, rgba(78, 196, 217, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255, 238, 207, 0.05), rgba(0, 0, 0, 0.28)),
    rgba(5, 4, 4, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.62),
    0 24px 80px rgba(0, 0, 0, 0.64);
}

.doc-bridge-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.16), transparent) 50% 58px / 54% 1px no-repeat,
    radial-gradient(circle at 16% 8%, rgba(154, 107, 255, 0.13), transparent 20%),
    radial-gradient(circle at 92% 16%, rgba(78, 196, 217, 0.08), transparent 22%);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.doc-bridge-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.18);
}

.doc-bridge-head h2 {
  margin: 2px 0 4px;
  color: var(--gold-soft);
  font-size: 24px;
  line-height: 1.15;
}

.doc-bridge-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.doc-bridge-head button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 7px;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.34);
}

.doc-bridge-library {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.9fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.16);
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.1), transparent 46%),
    radial-gradient(circle at 0% 50%, rgba(154, 107, 255, 0.12), transparent 35%),
    rgba(0, 0, 0, 0.22);
}

.doc-bridge-library-title strong {
  display: block;
  margin-top: 2px;
  color: var(--gold-soft);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.doc-bridge-library-title p,
.doc-bridge-library-path {
  margin: 4px 0 0;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.65;
}

.doc-bridge-library-metrics {
  display: grid;
  grid-template-columns: 0.7fr 0.7fr 1.4fr;
  gap: 8px;
}

.doc-bridge-library-metrics span {
  min-width: 0;
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 7px;
  padding: 7px 9px;
  background: rgba(0, 0, 0, 0.24);
}

.doc-bridge-library-metrics b,
.doc-bridge-library-metrics small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-bridge-library-metrics b {
  color: var(--purple-soft);
  font-size: 13px;
}

.doc-bridge-library-metrics small {
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.doc-bridge-library-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.doc-bridge-library-actions button {
  min-height: 34px;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 7px;
  padding: 0 12px;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  background:
    linear-gradient(180deg, rgba(215, 165, 109, 0.08), transparent),
    rgba(0, 0, 0, 0.34);
}

.doc-bridge-library-actions button.active {
  border-color: rgba(154, 107, 255, 0.58);
  color: var(--purple-soft);
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.18);
}

.doc-bridge-body {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
}

.doc-bridge-list {
  min-height: 0;
  border-right: 1px solid rgba(215, 165, 109, 0.16);
  background: rgba(0, 0, 0, 0.22);
}

.doc-bridge-list-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.14);
}

.doc-bridge-list-head strong {
  color: var(--gold-soft);
}

.doc-bridge-list-head button {
  border: 1px solid rgba(154, 107, 255, 0.38);
  border-radius: 7px;
  padding: 6px 9px;
  color: var(--purple-soft);
  font-size: 11px;
  font-weight: 800;
  background: rgba(154, 107, 255, 0.1);
}

#doc-bridge-doc-list {
  max-height: calc(92vh - 170px);
  overflow: auto;
  padding: 10px;
}

.doc-bridge-doc {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px;
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 8px;
  color: inherit;
  text-align: left;
  background: rgba(0, 0, 0, 0.28);
}

.doc-bridge-doc.active {
  border-color: rgba(154, 107, 255, 0.66);
  box-shadow: 0 0 20px rgba(154, 107, 255, 0.12);
}

.doc-bridge-doc > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 54px;
  border: 1px solid rgba(215, 165, 109, 0.24);
  border-radius: 6px;
  color: var(--purple-soft);
  font-size: 10px;
  font-weight: 900;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.22), transparent 56%),
    rgba(0, 0, 0, 0.34);
}

.doc-bridge-doc b,
.doc-bridge-doc small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-bridge-doc b {
  color: var(--gold-soft);
  font-size: 13px;
}

.doc-bridge-doc small {
  color: var(--text-faint);
  font-size: 10px;
}

.doc-bridge-doc em {
  grid-column: 2;
  justify-self: start;
  margin-top: 3px;
  border: 1px solid rgba(78, 196, 217, 0.24);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--cyan);
  font-size: 9px;
  font-style: normal;
  background: rgba(78, 196, 217, 0.08);
}

.doc-bridge-doc em.library {
  border-color: rgba(215, 165, 109, 0.28);
  color: var(--gold-soft);
  background: rgba(215, 165, 109, 0.08);
}

.doc-bridge-detail {
  min-width: 0;
  overflow: auto;
  padding: 16px;
}

.doc-bridge-summary {
  border: 1px solid rgba(215, 165, 109, 0.18);
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(154, 107, 255, 0.1), transparent 44%),
    rgba(0, 0, 0, 0.22);
}

.doc-bridge-summary h3 {
  margin: 5px 0;
  color: var(--gold-soft);
  font-size: 24px;
  line-height: 1.18;
}

.doc-bridge-summary p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.doc-bridge-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.doc-bridge-stats span {
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 7px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.doc-bridge-stats b,
.doc-bridge-stats small {
  display: block;
}

.doc-bridge-stats b {
  color: var(--purple-soft);
  font-size: 17px;
}

.doc-bridge-stats small {
  color: var(--text-faint);
  font-size: 10px;
}

.doc-bridge-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.doc-bridge-actions-grid .danger {
  color: #ffb4ad !important;
  border-color: rgba(208, 90, 79, 0.44) !important;
  background: rgba(208, 90, 79, 0.08) !important;
}

.doc-bridge-preview,
#doc-bridge-prompt-box {
  width: 100%;
  max-height: 280px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow: auto;
  background: rgba(0, 0, 0, 0.32);
}

#doc-bridge-prompt-box {
  min-height: 160px;
  margin-top: 12px;
  color: var(--text-main);
}

.doc-bridge-empty {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 1px dashed rgba(215, 165, 109, 0.18);
  border-radius: 8px;
  color: var(--text-faint);
  text-align: center;
  padding: 18px;
}

.doc-bridge-empty.large {
  min-height: 420px;
}

@media (max-width: 960px) {
  .doc-bridge-library {
    grid-template-columns: 1fr;
  }

  .doc-bridge-library-actions {
    justify-content: flex-start;
  }

  .doc-bridge-body {
    grid-template-columns: 1fr;
  }

  .doc-bridge-list {
    border-right: 0;
    border-bottom: 1px solid rgba(215, 165, 109, 0.16);
  }

  #doc-bridge-doc-list {
    max-height: 230px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Dialogue Tools V5 · Trace Tree drawers
   ═══════════════════════════════════════════════════════════ */
.drawer.wide {
  width: min(980px, 96vw) !important;
}

#shell-drawer-host .drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  transform: translateX(100%) !important;
  z-index: calc(var(--z-drawer) + 1) !important;
}

#shell-drawer-host .drawer.open {
  transform: translateX(0) !important;
}

#shell-drawer-host .drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-drawer) !important;
}

.drawer-body {
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.08), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(78, 196, 217, 0.06), transparent 32%);
}

.trace-tree {
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trace-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(215, 165, 109, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 14% 0%, rgba(154, 107, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 238, 207, 0.035), rgba(0, 0, 0, 0.32)),
    rgba(4, 3, 3, 0.78);
  overflow: hidden;
}

.trace-hero::before,
.trace-branch::before,
.v28-tool-panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 4px;
  border: 1px solid rgba(215, 165, 109, 0.09);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.52), transparent 30%) left top / 56px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.52), transparent 30%) left top / 1px 56px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.52), transparent 30%) right top / 56px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.52), transparent 30%) right top / 1px 56px no-repeat,
    linear-gradient(90deg, rgba(215, 165, 109, 0.52), transparent 30%) left bottom / 56px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.52), transparent 30%) left bottom / 1px 56px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.52), transparent 30%) right bottom / 56px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.52), transparent 30%) right bottom / 1px 56px no-repeat;
}

.trace-kicker {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.trace-hero h3 {
  margin: 0 0 5px;
  color: var(--gold-soft);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.trace-hero p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.65;
}

.trace-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 8px;
  align-content: center;
  min-width: 206px;
}

.trace-presets button,
.trace-choice,
.trace-select,
.trace-number {
  border: 1px solid rgba(215, 165, 109, 0.3);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 238, 207, 0.035), rgba(0, 0, 0, 0.28)),
    rgba(6, 4, 8, 0.86);
  color: var(--gold-soft);
}

.trace-presets button {
  min-height: 34px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.trace-presets button:hover,
.trace-choice:hover {
  border-color: rgba(154, 107, 255, 0.62);
  color: #eadcff;
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.16);
}

.trace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.trace-branch {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(215, 165, 109, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.07), transparent 38%),
    rgba(3, 3, 4, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.025),
    inset 0 0 34px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}

.trace-branch h4 {
  margin: 0 0 12px;
  color: var(--gold-soft);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trace-branch h4 span {
  color: var(--purple-soft);
  font-family: ui-monospace, monospace;
}

.trace-control,
.trace-toggle-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid rgba(215, 165, 109, 0.12);
}

.trace-control:first-of-type,
.trace-toggle-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.trace-control-head,
.trace-toggle-row {
  justify-content: space-between;
  align-items: center;
}

.trace-control-head {
  display: flex;
  gap: 12px;
}

.trace-control-head span,
.trace-control-title {
  color: var(--text-main);
  font-size: 12px;
  font-weight: 800;
}

.trace-control-head b {
  color: var(--purple-soft);
  margin-right: 6px;
}

.trace-control-head strong {
  color: var(--gold-soft);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  white-space: nowrap;
}

.trace-hint {
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.45;
}

.trace-range {
  width: 100%;
  accent-color: var(--purple);
}

.trace-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trace-choice {
  min-height: 30px;
  padding: 5px 10px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.trace-choice.active {
  border-color: rgba(154, 107, 255, 0.72);
  color: #eadcff;
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.3), rgba(36, 13, 66, 0.42)),
    rgba(5, 4, 8, 0.9);
  box-shadow: inset 0 -2px 0 rgba(214, 182, 255, 0.64), 0 0 18px rgba(154, 107, 255, 0.18);
}

.trace-control-inline,
.trace-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 190px);
  gap: 12px;
}

.trace-toggle-row {
  color: var(--text-main);
}

.trace-toggle-row input {
  justify-self: end;
  width: 36px;
  height: 20px;
  accent-color: var(--purple);
}

.trace-number,
.trace-select {
  min-height: 34px;
  padding: 6px 9px;
  width: 100%;
}

.trace-empty {
  padding: 18px;
  border: 1px solid rgba(215, 165, 109, 0.24);
  border-radius: 8px;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.32);
}

.v28-tool-panel {
  position: relative;
  border-radius: 8px !important;
  border-color: rgba(215, 165, 109, 0.28) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.08), transparent 36%),
    rgba(4, 3, 3, 0.78) !important;
  overflow: hidden;
}

.v28-arcane-modal > div {
  border-radius: 8px !important;
  border-color: rgba(215, 165, 109, 0.42) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(255, 238, 207, 0.035), rgba(0, 0, 0, 0.35)),
    #050505 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    0 24px 80px rgba(0, 0, 0, 0.74),
    0 0 34px rgba(154, 107, 255, 0.16) !important;
}

.v28-arcane-modal button {
  border-radius: 6px !important;
}

@media (max-width: 760px) {
  .trace-hero,
  .trace-grid {
    grid-template-columns: 1fr;
  }

  .trace-presets {
    min-width: 0;
  }

  .trace-control-inline,
  .trace-toggle-row {
    grid-template-columns: 1fr;
  }
}

/* V28.15 final atlas card stability pass */
.charlib-shell-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
}

.charlib-shell-card {
  position: relative;
  display: grid;
  grid-template-rows: 168px minmax(92px, auto) 106px;
  gap: 10px;
  min-height: 388px;
  padding: 11px;
  overflow: hidden;
}

.charlib-shell-portrait {
  width: 100%;
  height: 168px;
  min-height: 168px;
  aspect-ratio: auto;
}

.charlib-shell-card-body {
  min-height: 92px;
  overflow: hidden;
}

.charlib-shell-card-body strong,
.charlib-shell-card-body em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.charlib-shell-card-body strong {
  -webkit-line-clamp: 2;
}

.charlib-shell-card-body small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charlib-shell-card-body em {
  min-height: 46px;
  -webkit-line-clamp: 3;
}

.charlib-shell-card-metrics {
  display: block;
  min-height: 106px;
  max-height: 106px;
  overflow: hidden;
}

.charlib-shell-card .shell-metric-row:nth-child(n+6) {
  display: none;
}

.charlib-shell-rank {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
}

@media (max-width: 760px) {
  .charlib-shell-card {
    grid-template-rows: 150px minmax(92px, auto) 106px;
    min-height: 370px;
  }

  .charlib-shell-portrait {
    height: 150px;
    min-height: 150px;
  }
}

/* Dashboard live console */
.dashboard-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
}

.dashboard-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px 2px;
}

.dashboard-title-row h1 {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: var(--fs-h1);
  letter-spacing: 0;
}

.dashboard-title-row p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.dashboard-eyebrow,
.dashboard-panel-kicker {
  color: var(--purple-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
}

.dashboard-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(4, 3, 3, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 238, 207, 0.025);
  font-size: var(--fs-caption);
  white-space: nowrap;
}

.dashboard-pulse {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #6dae7a;
  box-shadow: 0 0 12px rgba(109, 174, 122, 0.8);
}

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
}

.dashboard-stat,
.dashboard-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(215, 165, 109, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(154, 107, 255, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(255, 238, 207, 0.035), rgba(0, 0, 0, 0.36)),
    rgba(3, 3, 4, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.025),
    0 18px 40px rgba(0, 0, 0, 0.24);
}

.dashboard-stat::before,
.dashboard-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.1), transparent) 0 0 / 100% 1px no-repeat,
    radial-gradient(circle at 86% 18%, rgba(78, 196, 217, 0.08), transparent 30%);
}

.dashboard-stat > *,
.dashboard-panel > * {
  position: relative;
  z-index: 1;
}

.dashboard-stat {
  min-height: 112px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: center;
}

.dashboard-stat-icon {
  grid-row: 1 / span 3;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(215, 165, 109, 0.34);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.32);
  font-size: 21px;
  text-shadow: 0 0 16px rgba(215, 165, 109, 0.42);
}

.dashboard-stat-icon[data-tone="cyan"] { color: var(--cyan); border-color: rgba(78, 196, 217, 0.38); }
.dashboard-stat-icon[data-tone="violet"] { color: var(--purple-soft); border-color: rgba(154, 107, 255, 0.42); }
.dashboard-stat-icon[data-tone="green"] { color: var(--green); border-color: rgba(109, 174, 122, 0.4); }
.dashboard-stat-icon[data-tone="amber"] { color: #f0b35f; border-color: rgba(240, 179, 95, 0.4); }

.dashboard-stat-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.dashboard-stat strong {
  color: var(--gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0;
}

.dashboard-stat span:last-child {
  color: var(--green);
  font-size: 11px;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.16fr) minmax(240px, 0.86fr);
  grid-template-areas:
    "activity worldbook model"
    "characters dialogues quick";
  gap: 10px;
}

.dashboard-panel {
  min-height: 230px;
  padding: 14px;
}

.dashboard-activity-panel { grid-area: activity; }
.dashboard-worldbook-panel { grid-area: worldbook; }
.dashboard-model-panel { grid-area: model; }
.dashboard-quick-panel { grid-area: quick; }
.dashboard-characters-panel { grid-area: characters; }
.dashboard-dialogues-panel { grid-area: dialogues; }

.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.15);
}

.dashboard-panel-head h2 {
  margin: 3px 0 0;
  color: var(--gold);
  font-size: 17px;
  letter-spacing: 0;
}

.dashboard-text-link {
  border: 0;
  background: transparent;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.dashboard-text-link:hover {
  color: var(--purple-soft);
  text-shadow: 0 0 12px rgba(154, 107, 255, 0.55);
}

.dashboard-empty {
  padding: 18px;
  color: var(--text-faint);
  border: 1px dashed rgba(215, 165, 109, 0.22);
  border-radius: 8px;
  text-align: center;
  font-size: var(--fs-caption);
}

.dashboard-activity-list,
.dashboard-dialogue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-activity-item,
.dashboard-dialogue-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.26);
}

.dashboard-activity-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(215, 165, 109, 0.24);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.32);
}

.dashboard-activity-item strong,
.dashboard-dialogue-item strong {
  display: block;
  color: var(--text-main);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-activity-item span,
.dashboard-dialogue-item span {
  color: var(--text-faint);
  font-size: 10px;
}

.dashboard-activity-item time,
.dashboard-dialogue-item time {
  color: var(--gold-soft);
  font-size: 10px;
  white-space: nowrap;
}

.dashboard-worldbook-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.dashboard-ring,
.dashboard-context-donut {
  --value: 0;
  width: 134px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--gold-soft);
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.82) 0 55%, transparent 56%),
    conic-gradient(var(--purple-soft) calc(var(--value) * 1%), rgba(215, 165, 109, 0.16) 0);
  box-shadow:
    inset 0 0 0 1px rgba(215, 165, 109, 0.26),
    0 0 28px rgba(154, 107, 255, 0.16);
}

.dashboard-ring span,
.dashboard-context-donut strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  line-height: 1;
}

.dashboard-ring small,
.dashboard-context-donut span {
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 5px;
}

.dashboard-progress-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dashboard-progress-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 72px;
  gap: 9px;
  align-items: center;
  color: var(--text-muted);
  font-size: 11px;
}

.dashboard-progress-bar,
.dashboard-mini-meter {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.dashboard-progress-bar i,
.dashboard-mini-meter i {
  --value: 0;
  display: block;
  width: calc(var(--value) * 1%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple), var(--cyan), var(--green));
  box-shadow: 0 0 12px rgba(154, 107, 255, 0.32);
}

.dashboard-progress-row strong {
  color: var(--gold-soft);
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.dashboard-model-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(154, 107, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.dashboard-model-sigil {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(154, 107, 255, 0.45);
  color: var(--purple-soft);
  font-size: 24px;
  text-shadow: 0 0 18px rgba(154, 107, 255, 0.58);
}

.dashboard-model-card strong {
  display: block;
  color: var(--gold-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-model-card > div {
  min-width: 0;
}

.dashboard-model-card span:not(.pill) {
  color: var(--text-muted);
  font-size: 11px;
}

.dashboard-model-metrics,
.dashboard-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-model-metrics div,
.dashboard-summary-list div,
.dashboard-health-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.dashboard-model-metrics strong,
.dashboard-summary-list strong,
.dashboard-health-row strong {
  color: var(--gold-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: right;
}

.dashboard-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dashboard-portrait-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-character-tile {
  min-width: 0;
  border: 1px solid rgba(215, 165, 109, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.dashboard-character-tile button {
  display: grid;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.dashboard-character-avatar {
  aspect-ratio: 1 / 1.08;
  background:
    radial-gradient(circle at 50% 28%, rgba(154, 107, 255, 0.22), transparent 38%),
    rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-soft);
  font-size: 28px;
  overflow: hidden;
}

.dashboard-character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-character-meta {
  padding: 8px;
}

.dashboard-character-meta strong,
.dashboard-character-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-character-meta strong {
  color: var(--gold-soft);
  font-size: 12px;
}

.dashboard-character-meta span {
  color: var(--text-faint);
  font-size: 10px;
}

.dashboard-inspector-body,
.dashboard-context-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.dashboard-meter-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 8px;
}

.dashboard-meter-row strong {
  color: var(--gold-soft);
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.dashboard-inspector-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dashboard-context-donut {
  --used: 0;
  --wb: 0;
  --kb: 0;
  width: 152px;
  margin: 0 auto 2px;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.86) 0 55%, transparent 56%),
    conic-gradient(
      var(--purple) 0 calc(var(--used) * 1%),
      var(--cyan) calc(var(--used) * 1%) calc((var(--used) + var(--wb)) * 1%),
      var(--gold) calc((var(--used) + var(--wb)) * 1%) calc((var(--used) + var(--wb) + var(--kb)) * 1%),
      rgba(255, 255, 255, 0.08) 0
    );
}

.dashboard-context-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dashboard-context-legend div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.dashboard-context-legend span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--purple);
}

.dashboard-context-legend span[data-color="system"] { background: var(--gold); }
.dashboard-context-legend span[data-color="dialogue"] { background: var(--purple); }
.dashboard-context-legend span[data-color="worldbook"] { background: var(--cyan); }
.dashboard-context-legend span[data-color="available"] { background: rgba(255, 255, 255, 0.18); }

.dashboard-context-legend b {
  color: var(--gold-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-main-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "activity"
      "worldbook"
      "model"
      "characters"
      "dialogues"
      "quick";
  }
}

@media (max-width: 1500px) and (min-width: 1181px) {
  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "activity model"
      "worldbook worldbook"
      "characters dialogues"
      "quick quick";
  }

  .dashboard-worldbook-body {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .dashboard-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .dashboard-title-row,
  .dashboard-worldbook-body {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .dashboard-stat-grid,
  .dashboard-portrait-row,
  .dashboard-action-grid {
    grid-template-columns: 1fr;
  }
}

/* Summon Workshop V4: ornate shell + shared portrait slot */
.summon-workshop-view {
  display: none;
}

.summon-workshop-view.active {
  display: block;
}

.summon-workshop-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.22);
}

.summon-workshop-header h1 {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: var(--fs-h1);
  letter-spacing: 0;
  text-shadow: 0 0 22px rgba(215, 165, 109, 0.2);
}

.summon-workshop-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-caption);
}

.summon-workshop-status {
  min-width: 190px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 12%, rgba(154, 107, 255, 0.18), transparent 38%),
    rgba(0, 0, 0, 0.35);
  text-align: right;
}

.summon-workshop-status span,
.summon-workshop-status strong {
  display: block;
}

.summon-workshop-status span {
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.summon-workshop-status strong {
  margin-top: 4px;
  color: var(--purple-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
}

.summon-workflow {
  margin-bottom: 14px;
}

.summon-workflow .step {
  min-width: 0;
  padding: 10px 12px;
  font-size: var(--fs-caption);
}

.summon-workflow .step .icon {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--purple-soft);
}

.summon-workflow .step small {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0;
}

.summon-workshop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 34%);
  gap: 12px;
  align-items: start;
}

.summon-primary-stack,
.summon-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.summon-preview-stack {
  position: sticky;
  top: 14px;
}

.summon-name-card { order: 1; }
.summon-runtime-card { order: 2; }
.summon-matrix-card { order: 3; }

.summon-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(215, 165, 109, 0.3);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.09), transparent 42%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.04), rgba(0, 0, 0, 0.28)),
    rgba(2, 2, 2, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    inset 0 0 46px rgba(0, 0, 0, 0.52),
    0 14px 34px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.summon-card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 4px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.72), transparent 34%) left top / 76px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.72), transparent 34%) left top / 1px 76px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.72), transparent 34%) right top / 76px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.72), transparent 34%) right top / 1px 76px no-repeat,
    linear-gradient(90deg, rgba(215, 165, 109, 0.72), transparent 34%) left bottom / 76px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.72), transparent 34%) left bottom / 1px 76px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.72), transparent 34%) right bottom / 76px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.72), transparent 34%) right bottom / 1px 76px no-repeat;
  opacity: 0.72;
}

.summon-card > * {
  position: relative;
  z-index: 1;
}

.summon-card-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.16);
}

.summon-card-head.compact {
  padding-bottom: 8px;
}

.summon-card-index {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(154, 107, 255, 0.44);
  border-radius: 999px;
  background: rgba(154, 107, 255, 0.12);
  color: var(--purple-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(154, 107, 255, 0.18);
}

.summon-card-head h2 {
  margin: 0;
  color: var(--gold-soft);
  font-size: 17px;
  line-height: 1.25;
}

.summon-card-head p {
  margin: 4px 0 0;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
}

.summon-slot {
  min-width: 0;
  padding: 12px;
}

.app-shell.shell-module-summon .summon-card #slot-summon-namesummon,
.app-shell.shell-module-summon .summon-card #slot-summon-controls {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

.app-shell.shell-module-summon .summon-card #slot-summon-namesummon::before,
.app-shell.shell-module-summon .summon-card #slot-summon-controls::before {
  display: none !important;
}

.app-shell.shell-module-summon #slot-summon-controls > header {
  margin: 0 !important;
  padding: 0 0 8px !important;
  background: transparent !important;
}

.app-shell.shell-module-summon #slot-summon-controls > header > div:first-child {
  margin-top: 0 !important;
}

.app-shell.shell-module-summon #slot-summon-controls h1 {
  font-size: clamp(22px, 2.4vw, 34px) !important;
  line-height: 1.15 !important;
}

.summon-runtime-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(78, 196, 217, 0.14), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(154, 107, 255, 0.13), transparent 32%),
    linear-gradient(180deg, rgba(215, 165, 109, 0.05), rgba(0, 0, 0, 0.26)),
    rgba(3, 3, 4, 0.78);
}

.summon-runtime-card .summon-card-head {
  align-items: center;
  padding: 8px 12px 5px;
  border-bottom: 0;
}

.summon-runtime-card .summon-card-index {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.summon-runtime-card .summon-card-head h2 {
  font-size: 14px;
}

.summon-runtime-card .summon-card-head p {
  display: none;
}

.summon-runtime-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px 10px 0;
}

.summon-runtime-stat {
  min-width: 0;
  border: 1px solid rgba(215, 165, 109, 0.2);
  border-radius: 8px;
  padding: 5px 6px;
  background:
    linear-gradient(135deg, rgba(154, 107, 255, 0.08), transparent 42%),
    rgba(0, 0, 0, 0.32);
}

.summon-runtime-stat span,
.summon-runtime-stat small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summon-runtime-stat span {
  color: var(--text-faint);
  font-size: 8.5px;
  letter-spacing: 0.1em;
}

.summon-runtime-stat strong {
  display: block;
  min-height: 18px;
  margin: 2px 0 1px;
  color: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summon-runtime-stat small {
  color: var(--cyan);
  font-size: 9px;
}

.summon-link-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px 10px 0;
  padding: 5px 7px;
  border: 1px solid rgba(78, 196, 217, 0.22);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 10px;
  background: rgba(78, 196, 217, 0.045);
}

.summon-link-status span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.summon-link-status b {
  color: var(--gold-soft);
}

.summon-runtime-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px 10px 10px;
}

.summon-runtime-actions .btn {
  justify-content: center;
  min-height: 28px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 10.5px;
  white-space: nowrap;
}

.summon-preview-card {
  padding-bottom: 14px;
}

.summon-avatar-frame {
  position: relative;
  margin: 12px 14px 0;
  aspect-ratio: 1 / 1.05;
  min-height: 260px;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(154, 107, 255, 0.28), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(215, 165, 109, 0.14), transparent 45%),
    linear-gradient(135deg, rgba(78, 196, 217, 0.08), rgba(0, 0, 0, 0.18)),
    rgba(0, 0, 0, 0.62);
  overflow: hidden;
}

.summon-avatar-frame::before,
.summon-avatar-frame::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 999px;
  border: 1px solid rgba(215, 165, 109, 0.18);
  pointer-events: none;
}

.summon-avatar-frame::after {
  inset: 22%;
  border-color: rgba(154, 107, 255, 0.26);
  box-shadow: 0 0 42px rgba(154, 107, 255, 0.18);
}

.summon-avatar-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 180ms ease, filter 180ms ease;
}

.summon-avatar-frame.has-image img {
  opacity: 1;
  filter: saturate(1.05) contrast(1.04);
}

.summon-avatar-frame.mode-cover img {
  object-fit: cover;
}

.summon-avatar-frame.mode-portrait img {
  object-fit: cover;
  object-position: center top;
}

.summon-avatar-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

.summon-avatar-placeholder .sigil {
  width: 82px;
  height: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(154, 107, 255, 0.42);
  color: var(--purple-soft);
  font-size: 44px;
  text-shadow: 0 0 24px rgba(154, 107, 255, 0.64);
  box-shadow:
    inset 0 0 24px rgba(154, 107, 255, 0.14),
    0 0 34px rgba(154, 107, 255, 0.2);
}

.summon-avatar-frame.has-image .summon-avatar-placeholder {
  display: none;
}

.summon-avatar-meta {
  padding: 12px 14px 0;
}

.summon-avatar-meta div {
  color: var(--gold-soft);
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summon-avatar-meta span {
  display: block;
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.4;
}

.summon-avatar-actions,
.summon-preview-modes,
.summon-cross-links {
  display: grid;
  gap: 8px;
  padding: 12px 14px 0;
}

.summon-avatar-actions {
  grid-template-columns: 1fr 1fr;
}

.summon-preview-modes,
.summon-cross-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summon-preview-modes button {
  min-height: 34px;
  border: 1px solid rgba(215, 165, 109, 0.24);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}

.summon-preview-modes button.active {
  border-color: rgba(154, 107, 255, 0.62);
  color: var(--purple-soft);
  background: rgba(154, 107, 255, 0.16);
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.16);
}

.summon-cross-links {
  grid-template-columns: 1fr 1fr;
  padding-bottom: 14px;
}

/* V28.14 · Summon result accordion workbench. */
.app-shell.shell-module-summon #result-area[style*="display: none"] {
  display: none !important;
}

.app-shell.shell-module-summon #result-area[data-summon-result-activated="0"] {
  display: none !important;
}

.summon-result-workbench {
  position: relative;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 8px;
  padding: 16px;
  background:
    radial-gradient(circle at 10% 18%, rgba(154, 107, 255, 0.15), transparent 30%),
    radial-gradient(circle at 90% 6%, rgba(78, 196, 217, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.04), rgba(0, 0, 0, 0.34)),
    var(--arcane-texture),
    rgba(2, 2, 3, 0.92);
  background-size: auto, auto, auto, cover, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.04),
    inset 0 0 92px rgba(0, 0, 0, 0.72),
    0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.summon-result-workbench::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(215, 165, 109, 0.13);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.44), transparent 25%) left top / 96px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.44), transparent 25%) left top / 1px 96px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.44), transparent 25%) right bottom / 96px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.44), transparent 25%) right bottom / 1px 96px no-repeat;
}

.summon-result-workbench-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.16);
}

.summon-result-kicker {
  color: var(--purple-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.32em;
}

.summon-result-workbench-head h2 {
  margin: 4px 0 4px;
  color: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.12;
}

.summon-result-workbench-head p {
  margin: 0;
  color: var(--text-faint);
  font-size: 12px;
  line-height: 1.6;
}

.summon-result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.summon-result-actions button {
  min-height: 34px;
  border: 1px solid rgba(215, 165, 109, 0.3);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.38);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.summon-result-actions button:hover {
  border-color: rgba(154, 107, 255, 0.54);
  color: var(--purple-soft);
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.18);
}

.summon-result-branch {
  position: relative;
  z-index: 1;
  height: 42px;
  margin: 8px 12px 10px;
  opacity: 0.78;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.82) 0 2px, transparent 3px) 8% 50% / 18% 100% repeat-x,
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.6), rgba(154, 107, 255, 0.76), rgba(78, 196, 217, 0.5), transparent) center / 100% 1px no-repeat;
}

.summon-result-branch::before,
.summon-result-branch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(215, 165, 109, 0.18);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 28px rgba(154, 107, 255, 0.1);
}

.summon-result-branch::after {
  width: 74px;
  height: 74px;
  border-color: rgba(154, 107, 255, 0.28);
}

.summon-result-accordion {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.summon-accordion-panel {
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 234, 190, 0.03), rgba(0, 0, 0, 0.25)),
    rgba(0, 0, 0, 0.52);
  overflow: hidden;
}

.summon-accordion-panel[open] {
  border-color: rgba(154, 107, 255, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(154, 107, 255, 0.08),
    0 0 34px rgba(154, 107, 255, 0.12);
}

.summon-accordion-panel summary {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.summon-accordion-panel summary::-webkit-details-marker {
  display: none;
}

.summon-accordion-index {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(154, 107, 255, 0.42);
  border-radius: 999px;
  color: var(--purple-soft);
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.2), transparent 62%),
    rgba(0, 0, 0, 0.42);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.18);
}

.summon-accordion-copy strong,
.summon-accordion-copy small {
  display: block;
}

.summon-accordion-copy strong {
  color: var(--gold-soft);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.summon-accordion-copy small {
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
}

.summon-accordion-toggle {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(215, 165, 109, 0.25);
  border-radius: 999px;
  position: relative;
}

.summon-accordion-toggle::before,
.summon-accordion-toggle::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 1px;
  background: rgba(215, 165, 109, 0.78);
}

.summon-accordion-toggle::after {
  transform: rotate(90deg);
  transition: opacity 0.18s ease;
}

.summon-accordion-panel[open] .summon-accordion-toggle::after {
  opacity: 0;
}

.summon-accordion-body {
  max-height: min(74vh, 820px);
  overflow: auto;
  padding: 12px;
  border-top: 1px solid rgba(215, 165, 109, 0.13);
  scrollbar-color: rgba(154, 107, 255, 0.7) rgba(0, 0, 0, 0.28);
}

.summon-accordion-body > .summon-accordion-original {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.summon-accordion-body #result-start {
  margin-top: 0 !important;
}

.summon-accordion-body section,
.summon-accordion-body .relative {
  scroll-margin-top: 16px;
}

@media (max-width: 760px) {
  .summon-result-workbench {
    padding: 12px;
  }

  .summon-result-workbench-head {
    flex-direction: column;
  }

  .summon-result-actions {
    width: 100%;
    justify-content: stretch;
  }

  .summon-result-actions button {
    flex: 1;
  }

  .summon-accordion-panel summary {
    grid-template-columns: 38px minmax(0, 1fr) 24px;
    gap: 9px;
    padding: 9px 10px;
  }

  .summon-accordion-copy strong {
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .summon-accordion-copy small {
    font-size: 10px;
  }

  .summon-accordion-body {
    max-height: 72vh;
    padding: 8px;
  }
}

/* V28.13 · V23.1 lore board and shared arcane panel refinements. */
.naheryu-lore-shell {
  position: relative;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 84% 10%, rgba(154, 107, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(215, 165, 109, 0.055), rgba(0, 0, 0, 0.26)),
    var(--arcane-texture),
    rgba(3, 3, 3, 0.9) !important;
  background-size: auto, auto, cover, auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.04),
    inset 0 0 90px rgba(0, 0, 0, 0.68),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

.naheryu-lore-shell::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(215, 165, 109, 0.12);
  pointer-events: none;
}

.naheryu-lore-head {
  cursor: pointer;
  border: 0;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.1), transparent 26%, rgba(215, 165, 109, 0.07)),
    rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(215, 165, 109, 0.18);
}

.naheryu-lore-head:hover {
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.16), transparent 30%, rgba(215, 165, 109, 0.1)),
    rgba(0, 0, 0, 0.34);
}

.naheryu-lore-head svg {
  color: var(--gold-soft);
  filter: drop-shadow(0 0 10px rgba(215, 165, 109, 0.42));
}

#lore-panel-body {
  position: relative;
}

.v231-lore-brief {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 16px;
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 76% 48%, rgba(154, 107, 255, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(78, 196, 217, 0.06), transparent 34%),
    rgba(0, 0, 0, 0.48);
  overflow: hidden;
}

.v231-lore-brief::after {
  content: "";
  position: absolute;
  right: -44px;
  top: -58px;
  width: 220px;
  height: 220px;
  background: var(--arcane-sigil) center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

.v231-lore-copy,
.v231-lore-chips {
  position: relative;
  z-index: 1;
}

.v231-lore-copy h2 {
  margin: 0 0 10px;
  color: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.25;
}

.v231-lore-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.8;
}

.v231-lore-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.v231-lore-chips div {
  min-width: 0;
  border: 1px solid rgba(154, 107, 255, 0.22);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.08), rgba(0, 0, 0, 0.16)),
    rgba(0, 0, 0, 0.34);
}

.v231-lore-chips b {
  display: block;
  color: var(--purple-soft);
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1;
}

.v231-lore-chips span {
  display: block;
  margin-top: 6px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.45;
}

.summon-workshop-grid {
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.2));
}

.summon-card,
.charlib-shell-board,
.worldbook-shell-board {
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.04), rgba(0, 0, 0, 0.28)),
    var(--arcane-texture),
    rgba(2, 2, 2, 0.78);
  background-size: auto, auto, cover, auto;
}

.charlib-shell-board,
.worldbook-shell-board {
  border-color: rgba(215, 165, 109, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    inset 0 0 110px rgba(0, 0, 0, 0.62),
    0 16px 40px rgba(0, 0, 0, 0.28);
}

.charlib-shell-board::after,
.worldbook-shell-board::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 16px;
  width: 118px;
  height: 118px;
  background: var(--arcane-sigil) center / contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

.charlib-shell-toolbar,
.worldbook-shell-toolbar {
  padding: 16px;
  border: 1px solid rgba(215, 165, 109, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.1), transparent 34%),
    rgba(0, 0, 0, 0.3);
}

.charlib-shell-grid {
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
}

.charlib-shell-card,
.worldbook-shell-book,
.worldbook-entry-chip {
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.025),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.charlib-shell-card::before,
.worldbook-shell-book::before,
.worldbook-entry-chip::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 4px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.46), transparent 42%) left top / 46px 1px no-repeat,
    linear-gradient(180deg, rgba(215, 165, 109, 0.46), transparent 42%) left top / 1px 46px no-repeat,
    linear-gradient(270deg, rgba(215, 165, 109, 0.46), transparent 42%) right bottom / 46px 1px no-repeat,
    linear-gradient(0deg, rgba(215, 165, 109, 0.46), transparent 42%) right bottom / 1px 46px no-repeat;
  opacity: 0.65;
}

.charlib-shell-card {
  min-height: 314px;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.1), transparent 42%),
    linear-gradient(180deg, rgba(215, 165, 109, 0.04), rgba(0, 0, 0, 0.26)),
    rgba(6, 5, 5, 0.86);
}

.charlib-shell-portrait,
.charlib-detail-portrait,
.worldbook-shell-cover {
  box-shadow:
    inset 0 0 32px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(154, 107, 255, 0.1);
}

.charlib-shell-rank {
  border-radius: 6px;
}

.charlib-shell-detail {
  background:
    radial-gradient(circle at 50% 10%, rgba(154, 107, 255, 0.14), transparent 42%),
    var(--arcane-texture),
    rgba(5, 4, 4, 0.82);
  background-size: auto, cover, auto;
}

.charlib-detail-copy {
  max-height: 240px;
  overflow: auto;
}

.worldbook-shell-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.worldbook-shell-book {
  position: relative;
  min-height: 196px;
  background:
    radial-gradient(circle at 8% 50%, rgba(78, 196, 217, 0.09), transparent 36%),
    linear-gradient(120deg, rgba(215, 165, 109, 0.045), transparent 36%, rgba(154, 107, 255, 0.06)),
    rgba(5, 4, 4, 0.78);
}

.worldbook-shell-cover {
  min-height: 142px;
}

.worldbook-entry-chip {
  position: relative;
  min-height: 72px;
  background:
    linear-gradient(90deg, rgba(215, 165, 109, 0.045), transparent 36%),
    rgba(0, 0, 0, 0.32);
}

.worldbook-entry-chip:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(78, 196, 217, 0.14),
    0 0 22px rgba(78, 196, 217, 0.12);
}

@media (max-width: 1180px) {
  .summon-workshop-grid {
    grid-template-columns: 1fr;
  }

  .summon-preview-stack {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  }

  .summon-avatar-frame {
    aspect-ratio: 16 / 9;
    min-height: 260px;
  }
}

@media (max-width: 860px) {
  .v231-lore-brief,
  .v231-lore-chips {
    grid-template-columns: 1fr;
  }

  .summon-workshop-header {
    align-items: stretch;
    flex-direction: column;
  }

  .summon-workshop-status {
    text-align: left;
  }

  .summon-workflow {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .summon-preview-stack {
    display: flex;
  }

  .summon-avatar-actions,
  .summon-preview-modes,
  .summon-cross-links {
    grid-template-columns: 1fr;
  }
}

/* Left rail system/project polish */
.leftrail-system-section {
  border-top: 1px solid rgba(215, 165, 109, 0.08);
}

.leftrail-system-section .nav-item {
  position: relative;
}

.leftrail-system-section .nav-item::after {
  content: "";
  position: absolute;
  right: 10px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(215, 165, 109, 0.34);
  opacity: 0.65;
}

.leftrail-project-card {
  margin: auto 10px 10px;
  padding: 13px 12px 12px;
  border: 1px solid rgba(215, 165, 109, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(154, 107, 255, 0.24), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(78, 196, 217, 0.08), transparent 34%),
    linear-gradient(150deg, transparent 0 42%, rgba(215, 165, 109, 0.08) 43% 44%, transparent 45%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.035), rgba(0, 0, 0, 0.3)),
    rgba(0, 0, 0, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    0 0 22px rgba(154, 107, 255, 0.08);
  overflow: hidden;
}

.project-card-sigil {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(154, 107, 255, 0.44);
  color: var(--purple-soft);
  font-size: 0;
  text-shadow: 0 0 24px rgba(154, 107, 255, 0.72);
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.22), transparent 60%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(215, 165, 109, 0.28) 13% 14%, transparent 15% 37%, rgba(78, 196, 217, 0.22) 38% 39%, transparent 40% 62%, rgba(215, 165, 109, 0.24) 63% 64%, transparent 65% 100%),
    rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 0 20px rgba(154, 107, 255, 0.14),
    0 0 26px rgba(154, 107, 255, 0.22);
}

.project-card-sigil::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 30px;
  height: 34px;
  transform: translateX(-50%);
  z-index: 2;
  border-radius: 18px 18px 8px 8px;
  background:
    radial-gradient(circle at 50% 7px, rgba(255, 224, 177, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 13px, rgba(154, 107, 255, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 14px, rgba(78, 196, 217, 0.78) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent 0 43%, rgba(215, 165, 109, 0.8) 44% 56%, transparent 57%),
    linear-gradient(135deg, transparent 0 38%, rgba(215, 165, 109, 0.58) 39% 43%, transparent 44%),
    linear-gradient(45deg, transparent 0 38%, rgba(215, 165, 109, 0.5) 39% 43%, transparent 44%);
  opacity: 0.95;
  text-shadow:
    0 0 16px rgba(215, 165, 109, 0.65),
    0 0 30px rgba(154, 107, 255, 0.56);
}

.project-card-sigil::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.85) 0 2px, transparent 3px) 50% 0 / 100% 100% no-repeat,
    radial-gradient(circle, rgba(215, 165, 109, 0.75) 0 1px, transparent 2px) 18% 62% / 100% 100% no-repeat,
    radial-gradient(circle, rgba(78, 196, 217, 0.72) 0 1px, transparent 2px) 82% 64% / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 12%, rgba(215, 165, 109, 0.55) 13% 14%, transparent 15% 85%, rgba(215, 165, 109, 0.55) 86% 87%, transparent 88%),
    linear-gradient(180deg, transparent 8%, rgba(154, 107, 255, 0.44) 9% 58%, transparent 59%);
  opacity: 0.76;
}

.project-tree-glyph {
  position: absolute;
  left: 50%;
  bottom: 13px;
  z-index: 3;
  width: 36px;
  height: 15px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(215, 165, 109, 0.9), rgba(215, 165, 109, 0.12)) 49% 0 / 2px 100% no-repeat,
    linear-gradient(180deg, rgba(154, 107, 255, 0.86), rgba(154, 107, 255, 0.16)) 18% 35% / 5px 65% no-repeat,
    linear-gradient(180deg, rgba(78, 196, 217, 0.78), rgba(78, 196, 217, 0.1)) 82% 35% / 5px 65% no-repeat,
    linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.72), transparent) 50% 86% / 100% 1px no-repeat;
  filter: drop-shadow(0 0 10px rgba(154, 107, 255, 0.42));
}

.leftrail-project-card[data-core-state="stable"] .project-card-sigil,
.leftrail-project-card[data-core-state="flow"] .project-card-sigil {
  border-color: rgba(154, 107, 255, 0.64);
  box-shadow:
    inset 0 0 20px rgba(154, 107, 255, 0.18),
    0 0 30px rgba(154, 107, 255, 0.28);
}

.leftrail-project-card[data-core-state="limited"] .project-card-sigil,
.leftrail-project-card[data-core-state="unknown"] .project-card-sigil {
  filter: saturate(0.72);
  opacity: 0.82;
}

.project-card-label {
  margin-bottom: 4px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.project-card-title {
  color: var(--gold-soft);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.04em;
}

.project-card-time {
  margin-top: 5px;
  color: var(--text-faint);
  font-size: 10px;
}

.project-card-meter {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(215, 165, 109, 0.16);
}

.project-card-meter span,
.project-card-meter strong {
  display: block;
}

.project-card-meter span {
  color: var(--text-faint);
  font-size: 10px;
}

.project-card-meter strong {
  margin-top: 2px;
  color: var(--purple-soft);
  font-size: 13px;
}

.project-card-meter i {
  display: block;
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--purple) 0 var(--core, 0%), rgba(255, 255, 255, 0.12) var(--core, 0%)),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 16px rgba(154, 107, 255, 0.3);
}

.rail-collapsed .leftrail-project-card {
  margin: auto 6px 8px;
  padding: 8px;
}

.rail-collapsed .project-card-body,
.rail-collapsed .project-card-meter {
  display: none;
}

.rail-collapsed .project-card-sigil {
  width: 34px;
  height: 34px;
  margin: 0;
  font-size: 20px;
}

/* V28.12 Shell atlas: dashboard summon, character library, worldbook covers. */
.shell-kicker {
  color: var(--purple-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dashboard-summon-panel {
  grid-column: span 2;
}

.dashboard-summon-card {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.dashboard-summon-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(154, 107, 255, 0.46);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(154, 107, 255, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(215, 165, 109, 0.08), rgba(0, 0, 0, 0.38)),
    rgba(4, 3, 5, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(215, 165, 109, 0.12),
    0 0 30px rgba(154, 107, 255, 0.18);
  overflow: hidden;
  cursor: pointer;
}

.dashboard-summon-avatar::after,
.charlib-shell-portrait::after,
.charlib-detail-portrait::after,
.worldbook-shell-cover::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(215, 165, 109, 0.2);
  pointer-events: none;
}

.dashboard-summon-avatar img,
.dashboard-summon-avatar span {
  width: 100%;
  height: 100%;
}

.dashboard-summon-avatar img {
  display: block;
  object-fit: cover;
}

.dashboard-summon-avatar span {
  display: grid;
  place-items: center;
  color: var(--purple-soft);
  font-size: 42px;
  text-shadow: 0 0 26px rgba(154, 107, 255, 0.7);
}

.dashboard-summon-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.dashboard-summon-meta strong {
  color: var(--gold-soft);
  font-size: 18px;
  line-height: 1.25;
}

.dashboard-summon-meta span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.dashboard-summon-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.charlib-shell-board,
.worldbook-shell-board {
  position: relative;
  border: 1px solid rgba(215, 165, 109, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 244, 210, 0.035), rgba(0, 0, 0, 0.22)),
    rgba(4, 3, 3, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.72),
    inset 0 0 80px rgba(0, 0, 0, 0.46);
  padding: 16px;
}

.charlib-shell-board::before,
.worldbook-shell-board::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(215, 165, 109, 0.08);
  pointer-events: none;
}

.charlib-shell-toolbar,
.worldbook-shell-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.16);
}

.charlib-shell-toolbar h2,
.worldbook-shell-toolbar h2 {
  margin: 2px 0 4px;
  color: var(--gold-soft);
  font-size: 22px;
  line-height: 1.2;
}

.charlib-shell-toolbar p,
.worldbook-shell-toolbar p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.charlib-shell-actions,
.worldbook-shell-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.charlib-shell-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.charlib-shell-stats span {
  border: 1px solid rgba(215, 165, 109, 0.2);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--text-muted);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.28);
}

.charlib-shell-stats b {
  color: var(--purple-soft);
}

.charlib-shell-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 14px;
  min-height: 560px;
}

.charlib-shell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  align-content: start;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding-right: 4px;
}

.charlib-shell-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 290px;
  padding: 10px;
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 8px;
  color: inherit;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.055), rgba(0, 0, 0, 0.18)),
    rgba(6, 5, 5, 0.84);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.charlib-shell-card:hover,
.charlib-shell-card.active {
  border-color: rgba(154, 107, 255, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(154, 107, 255, 0.16),
    0 0 24px rgba(154, 107, 255, 0.16);
  transform: translateY(-1px);
}

.charlib-shell-portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 7px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(154, 107, 255, 0.2), transparent 58%),
    rgba(0, 0, 0, 0.5);
}

.charlib-shell-portrait img,
.charlib-detail-portrait img,
.worldbook-shell-cover img,
.worldbook-entry-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.charlib-shell-portrait span,
.charlib-detail-portrait span,
.worldbook-shell-cover span {
  color: var(--purple-soft);
  font-size: 36px;
  text-shadow: 0 0 24px rgba(154, 107, 255, 0.6);
}

.charlib-shell-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.charlib-shell-card-body strong {
  color: var(--gold-soft);
  font-size: 16px;
  line-height: 1.25;
}

.charlib-shell-card-body small {
  color: var(--cyan);
  font-size: 11px;
}

.charlib-shell-card-body em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
}

.charlib-shell-rank {
  justify-self: start;
  border: 1px solid rgba(215, 165, 109, 0.26);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--gold-soft);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.36);
}

.charlib-shell-detail {
  position: sticky;
  top: 0;
  align-self: start;
  min-height: 520px;
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.1), transparent 42%),
    rgba(5, 4, 4, 0.78);
}

.charlib-detail-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.charlib-detail-portrait {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(154, 107, 255, 0.42);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.42);
}

.charlib-detail-title span {
  color: var(--purple-soft);
  font-size: 10px;
  letter-spacing: 0.16em;
}

.charlib-detail-title h3 {
  margin: 4px 0;
  color: var(--gold-soft);
  font-size: 24px;
  line-height: 1.18;
}

.charlib-detail-title p {
  margin: 0;
  color: var(--cyan);
  font-size: 12px;
}

.charlib-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}

.charlib-detail-tags span {
  border: 1px solid rgba(154, 107, 255, 0.28);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--purple-soft);
  font-size: 11px;
  background: rgba(154, 107, 255, 0.09);
}

.charlib-detail-copy {
  min-height: 116px;
  border-top: 1px solid rgba(215, 165, 109, 0.14);
  border-bottom: 1px solid rgba(215, 165, 109, 0.14);
  padding: 12px 0;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.7;
}

.charlib-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.charlib-detail-actions .danger {
  color: #ffb4ad !important;
  border-color: rgba(208, 90, 79, 0.42) !important;
  background: rgba(208, 90, 79, 0.08) !important;
}

.charlib-shell-empty,
.worldbook-shell-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  border: 1px dashed rgba(215, 165, 109, 0.22);
  border-radius: 8px;
  color: var(--text-muted);
  text-align: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.22);
}

.charlib-shell-empty strong,
.worldbook-shell-empty strong {
  color: var(--gold-soft);
}

.worldbook-shell-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.worldbook-shell-book {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  min-height: 180px;
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(120deg, rgba(78, 196, 217, 0.04), transparent 34%, rgba(154, 107, 255, 0.05)),
    rgba(5, 4, 4, 0.76);
}

.worldbook-shell-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(215, 165, 109, 0.3);
  border-radius: 7px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(78, 196, 217, 0.16), transparent 60%),
    rgba(0, 0, 0, 0.46);
}

.worldbook-shell-book-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.worldbook-shell-book-body > span {
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.worldbook-shell-book-body h3 {
  margin: 0;
  color: var(--gold-soft);
  font-size: 17px;
  line-height: 1.3;
}

.worldbook-shell-book-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.worldbook-shell-metrics {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 5px;
  align-items: baseline;
  color: var(--text-faint);
  font-size: 11px;
}

.worldbook-shell-metrics b {
  color: var(--purple-soft);
  font-size: 18px;
}

.worldbook-shell-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.worldbook-entry-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.worldbook-entry-chip {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  min-height: 62px;
  border: 1px solid rgba(215, 165, 109, 0.18);
  border-radius: 8px;
  padding: 8px;
  text-align: left;
  color: inherit;
  background: rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.worldbook-entry-chip:hover {
  border-color: rgba(78, 196, 217, 0.38);
}

.worldbook-entry-chip > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 7px;
  overflow: hidden;
  color: var(--purple-soft);
  background: rgba(0, 0, 0, 0.36);
}

.worldbook-entry-chip strong {
  min-width: 0;
  color: var(--gold-soft);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.worldbook-entry-chip small {
  color: var(--text-faint);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#slot-codex {
  position: relative;
}

#codex-list > [onclick*="codexLoadEntry"] {
  pointer-events: auto !important;
}

#codex-list > [onclick*="codexLoadEntry"]:hover {
  box-shadow: 0 0 24px rgba(215, 165, 109, 0.1);
}

.codex-entry-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 8px;
  overflow: hidden;
  color: var(--purple-soft);
  background:
    radial-gradient(circle at 50% 42%, rgba(154, 107, 255, 0.24), transparent 58%),
    rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.42);
}

.codex-entry-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.codex-entry-avatar-empty {
  font-size: 18px;
  text-shadow: 0 0 12px rgba(154, 107, 255, 0.7);
}

/* V28.13 live-link atlas: radar, refined worldbook editor, codex cards. */
.shell-radar {
  width: 150px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.shell-radar.compact {
  width: 88px;
}

.shell-radar svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(154, 107, 255, 0.18));
}

.shell-radar-ring {
  fill: none;
  stroke: rgba(215, 165, 109, 0.2);
  stroke-width: 0.55;
}

.shell-radar-axis {
  stroke: rgba(215, 165, 109, 0.22);
  stroke-width: 0.55;
}

.shell-radar-fill {
  fill: rgba(154, 107, 255, 0.26);
  stroke: none;
}

.shell-radar-line {
  fill: none;
  stroke: rgba(190, 138, 255, 0.9);
  stroke-width: 1.1;
}

.shell-radar text {
  fill: var(--text-faint);
  font-size: 6px;
  letter-spacing: 0;
}

.shell-metric-bars {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.shell-metric-bars.compact {
  gap: 4px;
}

.shell-metric-row {
  display: grid;
  grid-template-columns: 42px 28px minmax(44px, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--text-faint);
  font-size: 10.5px;
}

.shell-metric-bars.compact .shell-metric-row {
  grid-template-columns: 34px 24px minmax(36px, 1fr);
  gap: 5px;
  font-size: 9px;
}

.shell-metric-row span,
.shell-metric-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-metric-row b {
  color: var(--gold-soft);
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.shell-metric-row i {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.95) 0 var(--value), rgba(255, 255, 255, 0.1) var(--value) 100%),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 12px rgba(154, 107, 255, 0.16);
}

.summon-dimension-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 6px 10px 0;
  padding: 8px;
  border: 1px solid rgba(154, 107, 255, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 48%, rgba(154, 107, 255, 0.18), transparent 44%),
    linear-gradient(90deg, rgba(215, 165, 109, 0.05), transparent 44%),
    rgba(0, 0, 0, 0.28);
}

.summon-dimension-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.summon-dimension-copy > span {
  color: var(--purple-soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.summon-dimension-copy > strong {
  color: var(--gold-soft);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summon-dimension-copy > small {
  color: var(--cyan);
  font-size: 10px;
}

.trace-judgement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 3px 0 2px;
}

.trace-judgement-chip {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 236, 205, 0.035), rgba(0, 0, 0, 0.22)),
    rgba(5, 3, 2, 0.42);
}

.trace-judgement-chip span,
.trace-judgement-chip b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-judgement-chip span {
  color: var(--text-faint);
  font-size: 8.5px;
}

.trace-judgement-chip b {
  margin-top: 1px;
  color: var(--gold-soft);
  font-size: 10.5px;
}

.trace-judgement-chip.r1 b { color: var(--gold); }
.trace-judgement-chip.r2 b { color: #9ccfff; }
.trace-judgement-chip.r3 b { color: #9fe38f; }
.trace-judgement-chip.pressure b,
.trace-judgement-chip.life b,
.trace-judgement-chip.qfinal b { color: var(--purple-soft); }
.trace-judgement-chip.support b { color: var(--cyan); }

.trace-life-class {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  padding: 5px 7px;
  border: 1px solid rgba(154, 107, 255, 0.18);
  border-radius: 6px;
  background: rgba(154, 107, 255, 0.06);
}

.trace-life-class span {
  color: var(--text-faint);
  font-size: 9px;
}

.trace-life-class strong {
  color: var(--purple-soft);
  font-size: 10px;
  text-align: right;
}

.charlib-shell-card-metrics {
  display: block;
  min-width: 0;
  padding-top: 2px;
}

.charlib-detail-analysis {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 14px 0;
  padding: 10px;
  border: 1px solid rgba(215, 165, 109, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 14% 50%, rgba(154, 107, 255, 0.16), transparent 44%),
    rgba(0, 0, 0, 0.24);
}

.worldbook-shell-grid.worldbook-shell-workspace {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(420px, 1.46fr) minmax(230px, 0.76fr);
  gap: 12px;
  align-items: start;
}

.worldbook-library-pane,
.worldbook-editor-pane,
.worldbook-inspector-pane {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.worldbook-library-pane,
.worldbook-editor-pane,
.worldbook-inspector-card {
  border: 1px solid rgba(215, 165, 109, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 238, 207, 0.035), rgba(0, 0, 0, 0.22)),
    rgba(0, 0, 0, 0.24);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44);
}

.worldbook-pane-head {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.14);
}

.worldbook-pane-head strong {
  color: var(--gold-soft);
  font-size: 15px;
}

.worldbook-pane-head small {
  color: var(--text-faint);
  font-size: 11px;
}

.worldbook-library-list {
  display: grid;
  gap: 8px;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding: 10px;
}

.worldbook-library-item {
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.worldbook-library-item.active {
  border-color: rgba(154, 107, 255, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(154, 107, 255, 0.12),
    0 0 22px rgba(154, 107, 255, 0.12);
}

.worldbook-library-select {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.worldbook-library-select b {
  display: block;
  color: var(--gold-soft);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldbook-library-select small {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.45;
}

.worldbook-library-controls {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 8px;
}

.worldbook-library-controls label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--text-muted);
  font-size: 10px;
}

.worldbook-library-controls button {
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--gold-soft);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.3);
}

.worldbook-shell-cover.mini {
  width: 54px;
  height: 66px;
  min-height: 0;
}

.worldbook-shell-cover.hero {
  width: 112px;
  min-height: 142px;
}

.worldbook-editor-pane {
  padding: 12px;
}

.worldbook-editor-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.worldbook-editor-title {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.worldbook-title-input,
.worldbook-editor-title textarea,
.worldbook-inline-grid input,
.worldbook-inline-grid select,
.worldbook-entry-editor input,
.worldbook-entry-editor textarea,
.worldbook-entry-tuning input,
.worldbook-entry-tuning select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 6px;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.34);
  outline: none;
}

.worldbook-title-input {
  padding: 8px 10px;
  color: var(--gold-soft);
  font-family: var(--font-serif);
  font-size: 20px;
}

.worldbook-editor-title textarea,
.worldbook-entry-editor textarea {
  resize: vertical;
  padding: 8px 10px;
  line-height: 1.65;
}

.worldbook-title-input:focus,
.worldbook-editor-title textarea:focus,
.worldbook-inline-grid input:focus,
.worldbook-inline-grid select:focus,
.worldbook-entry-editor input:focus,
.worldbook-entry-editor textarea:focus {
  border-color: rgba(154, 107, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(154, 107, 255, 0.18), 0 0 18px rgba(154, 107, 255, 0.12);
}

.worldbook-inline-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.worldbook-inline-grid label,
.worldbook-field-wide,
.worldbook-entry-tuning label {
  display: grid;
  gap: 5px;
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.worldbook-inline-grid input,
.worldbook-inline-grid select,
.worldbook-entry-editor input,
.worldbook-entry-tuning input {
  padding: 7px 8px;
}

.worldbook-entry-list {
  border: 1px solid rgba(215, 165, 109, 0.14);
  border-radius: 8px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.worldbook-entry-list-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.worldbook-entry-list-head strong {
  color: var(--gold-soft);
  font-size: 13px;
}

.worldbook-entry-row {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  min-height: 60px;
  margin-top: 6px;
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 8px;
  padding: 8px;
  color: inherit;
  text-align: left;
  background: rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.worldbook-entry-row.active {
  border-color: rgba(154, 107, 255, 0.62);
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.1);
}

.worldbook-entry-row > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(215, 165, 109, 0.22);
  border-radius: 6px;
  overflow: hidden;
  color: var(--purple-soft);
  background: rgba(0, 0, 0, 0.3);
}

.worldbook-entry-row img,
.worldbook-entry-avatar img,
.worldbook-shell-cover.mini img,
.worldbook-shell-cover.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.worldbook-entry-row b,
.worldbook-entry-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldbook-entry-row b {
  color: var(--gold-soft);
  font-size: 12px;
}

.worldbook-entry-row small {
  color: var(--text-faint);
  font-size: 10px;
}

.worldbook-entry-row em {
  grid-row: 1 / 3;
  color: var(--cyan);
  font-size: 10px;
  font-style: normal;
}

.worldbook-entry-editor {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.worldbook-entry-editor-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.worldbook-entry-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(154, 107, 255, 0.36);
  border-radius: 8px;
  overflow: hidden;
  color: var(--purple-soft);
  background:
    radial-gradient(circle at 50% 42%, rgba(154, 107, 255, 0.22), transparent 62%),
    rgba(0, 0, 0, 0.38);
}

.worldbook-entry-editor-head small {
  display: block;
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 10px;
}

.worldbook-entry-tuning {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.worldbook-toggle-field {
  align-content: end;
}

.worldbook-toggle-field input {
  width: auto;
}

.worldbook-content-editor {
  min-height: 180px;
  font-size: 12.5px;
}

.worldbook-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.worldbook-inspector-pane {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 14px;
}

.worldbook-inspector-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.worldbook-inspector-card h3 {
  margin: 0;
  color: var(--gold-soft);
  font-size: 15px;
}

.worldbook-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.worldbook-stat-grid span {
  border: 1px solid rgba(215, 165, 109, 0.16);
  border-radius: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.worldbook-stat-grid b,
.worldbook-stat-grid small {
  display: block;
}

.worldbook-stat-grid b {
  color: var(--purple-soft);
  font-size: 18px;
  line-height: 1.1;
}

.worldbook-stat-grid small {
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 10px;
}

.btn.danger {
  color: #ffb4ad !important;
  border-color: rgba(208, 90, 79, 0.42) !important;
  background: rgba(208, 90, 79, 0.08) !important;
}

.codex-shell-card-enhanced {
  position: relative;
  overflow: hidden;
}

.codex-card-arcane-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 78px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.14);
}

.codex-card-arcane-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(215, 165, 109, 0.3);
  border-radius: 8px;
  overflow: hidden;
  color: var(--purple-soft);
  background:
    radial-gradient(circle at 50% 42%, rgba(154, 107, 255, 0.22), transparent 62%),
    rgba(0, 0, 0, 0.34);
}

.codex-card-arcane-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.codex-card-arcane-copy {
  min-width: 0;
}

.codex-card-arcane-copy b,
.codex-card-arcane-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-card-arcane-copy b {
  color: var(--gold-soft);
  font-size: 14px;
}

.codex-card-arcane-copy small {
  margin-top: 4px;
  color: var(--cyan);
  font-size: 10.5px;
}

.codex-card-arcane-radar {
  display: grid;
  justify-content: end;
}

@media (max-width: 1180px) {
  .dashboard-summon-panel {
    grid-column: span 1;
  }

  .summon-runtime-grid,
  .summon-runtime-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .charlib-shell-layout {
    grid-template-columns: 1fr;
  }

  .charlib-shell-detail {
    position: relative;
  }

  .worldbook-shell-grid.worldbook-shell-workspace {
    grid-template-columns: 1fr;
  }

  .worldbook-inspector-pane {
    position: relative;
    top: 0;
  }
}

@media (max-width: 760px) {
  .dashboard-summon-card,
  .worldbook-shell-book,
  .charlib-detail-hero {
    grid-template-columns: 1fr;
  }

  .charlib-shell-toolbar,
  .worldbook-shell-toolbar {
    flex-direction: column;
  }

  .charlib-shell-actions,
  .worldbook-shell-actions,
  .charlib-detail-actions {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .summon-runtime-grid,
  .summon-runtime-actions {
    grid-template-columns: 1fr;
  }

  .summon-dimension-panel,
  .charlib-detail-analysis,
  .worldbook-editor-hero,
  .worldbook-entry-editor-head,
  .codex-card-arcane-head {
    grid-template-columns: 1fr;
  }

  .shell-radar {
    justify-self: center;
  }

  .worldbook-inline-grid,
  .worldbook-entry-tuning,
  .worldbook-stat-grid {
    grid-template-columns: 1fr;
  }

  .charlib-shell-actions .btn,
  .worldbook-shell-actions .btn,
  .summon-runtime-actions .btn,
  .charlib-detail-actions .btn {
    width: 100%;
  }
}

/* V28.16 refinement pass: live core diagnostics, wider atlas cards, and quiet rotating sigils. */
@keyframes naheryuTraceFieldTurn {
  to { transform: rotate(360deg); }
}

@keyframes naheryuTraceFieldDrift {
  0%, 100% { opacity: 0.055; filter: saturate(0.84) drop-shadow(0 0 16px rgba(154, 107, 255, 0.16)); }
  50% { opacity: 0.105; filter: saturate(1.05) drop-shadow(0 0 24px rgba(154, 107, 255, 0.28)); }
}

.workspace::before {
  animation: naheryuTraceFieldTurn 170s linear infinite;
  transform-origin: center;
}

.workspace::after {
  content: "";
  position: fixed;
  left: clamp(300px, 43vw, 820px);
  bottom: -220px;
  width: min(62vw, 920px);
  aspect-ratio: 1;
  z-index: 0;
  pointer-events: none;
  opacity: 0.075;
  background:
    radial-gradient(circle, transparent 0 18%, rgba(154, 107, 255, 0.18) 18.3% 18.7%, transparent 19% 35%, rgba(215, 165, 109, 0.18) 35.3% 35.7%, transparent 36% 58%, rgba(78, 196, 217, 0.12) 58.2% 58.6%, transparent 59%),
    repeating-conic-gradient(from 0deg, rgba(215, 165, 109, 0.22) 0 0.35deg, transparent 0.35deg 15deg),
    var(--arcane-sigil) center / contain no-repeat;
  mix-blend-mode: screen;
  animation:
    naheryuTraceFieldTurn 220s linear infinite,
    naheryuTraceFieldDrift 8s ease-in-out infinite;
}

.app-shell ::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(245, 217, 155, 0.72), rgba(154, 107, 255, 0.56) 54%, rgba(78, 196, 217, 0.46)),
    rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 238, 207, 0.12), 0 0 14px rgba(154, 107, 255, 0.22);
}

.leftrail-project-card {
  --core-pct: 0;
}

.leftrail-project-card[data-core-style="1"] .project-card-sigil {
  background:
    radial-gradient(circle, rgba(208, 90, 79, 0.22), transparent 60%),
    conic-gradient(from 24deg, transparent 0 18%, rgba(208, 90, 79, 0.32) 18% 19%, transparent 19% 55%, rgba(215, 165, 109, 0.2) 55% 56%, transparent 56% 100%),
    rgba(0, 0, 0, 0.35);
}

.leftrail-project-card[data-core-style="2"] .project-card-sigil {
  background:
    radial-gradient(circle, rgba(215, 154, 75, 0.22), transparent 60%),
    conic-gradient(from 48deg, transparent 0 12%, rgba(215, 154, 75, 0.28) 12% 13%, transparent 13% 42%, rgba(154, 107, 255, 0.22) 42% 43%, transparent 43% 100%),
    rgba(0, 0, 0, 0.35);
}

.leftrail-project-card[data-core-style="3"] .project-card-sigil,
.leftrail-project-card[data-core-style="4"] .project-card-sigil {
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.24), transparent 60%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(215, 165, 109, 0.28) 13% 14%, transparent 15% 37%, rgba(78, 196, 217, 0.22) 38% 39%, transparent 40% 62%, rgba(215, 165, 109, 0.24) 63% 64%, transparent 65% 100%),
    rgba(0, 0, 0, 0.35);
}

.leftrail-project-card[data-core-style="5"] .project-card-sigil,
.leftrail-project-card[data-core-style="6"] .project-card-sigil {
  background:
    radial-gradient(circle, rgba(214, 182, 255, 0.32), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(78, 196, 217, 0.12), transparent 72%),
    conic-gradient(from 12deg, transparent 0 7%, rgba(215, 165, 109, 0.34) 7% 8%, transparent 8% 22%, rgba(154, 107, 255, 0.34) 22% 23%, transparent 23% 48%, rgba(78, 196, 217, 0.26) 48% 49%, transparent 49% 72%, rgba(215, 165, 109, 0.3) 72% 73%, transparent 73% 100%),
    rgba(0, 0, 0, 0.35);
}

.project-card-sigil::after {
  animation: naheryuTraceFieldTurn 42s linear infinite;
}

.project-card-components {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.project-card-components span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 7px;
  align-items: center;
  min-width: 0;
}

.project-card-components b {
  grid-row: 1 / 3;
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.project-card-components i {
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.95) 0 var(--value), rgba(255, 255, 255, 0.12) var(--value) 100%),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 10px rgba(154, 107, 255, 0.18);
}

.project-card-components em {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-inspector-body .dashboard-meter-row strong {
  min-width: 62px;
  max-width: 112px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-summon-panel {
  grid-column: 1 / -1;
}

.dashboard-summon-card {
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  min-height: 218px;
  align-items: center;
}

.dashboard-summon-avatar {
  min-height: 190px;
}

.dashboard-summon-meta strong {
  font-size: clamp(20px, 1.45vw, 28px);
}

.dashboard-summon-meta span {
  max-width: 72ch;
}

.charlib-shell-layout {
  gap: 20px;
}

.charlib-shell-grid {
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 22px;
  max-height: min(72vh, 790px);
  padding: 4px 10px 30px 4px;
}

.charlib-shell-card {
  grid-template-rows: 192px 112px 118px;
  gap: 12px;
  min-height: 454px;
  padding: 12px;
  overflow: hidden;
}

.charlib-shell-portrait {
  height: 192px;
  min-height: 192px;
  aspect-ratio: auto;
}

.charlib-shell-card-body {
  min-height: 112px;
  overflow: hidden;
}

.charlib-shell-card-body strong {
  font-size: 17px;
  line-height: 1.25;
}

.charlib-shell-card-body em {
  display: -webkit-box;
  max-height: 4.8em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.charlib-shell-card-metrics {
  min-height: 118px;
  max-height: 118px;
  overflow: hidden;
  padding-top: 10px;
  border-top: 1px solid rgba(215, 165, 109, 0.13);
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.08), transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent);
}

.charlib-shell-card .shell-metric-row {
  grid-template-columns: 38px 24px minmax(54px, 1fr);
}

.charlib-shell-rank {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
}

.worldbook-shell-board {
  padding: 20px;
}

.worldbook-shell-grid.worldbook-shell-workspace {
  grid-template-columns: minmax(300px, 0.9fr) minmax(560px, 1.55fr) minmax(310px, 0.86fr);
  gap: 18px;
}

.worldbook-library-list {
  gap: 10px;
  padding: 12px;
}

.worldbook-library-select {
  grid-template-columns: 70px minmax(0, 1fr);
}

.worldbook-shell-cover.mini {
  width: 70px;
  height: 88px;
}

.worldbook-shell-cover.hero {
  width: 150px;
  min-height: 200px;
}

.worldbook-editor-hero {
  grid-template-columns: 150px minmax(0, 1fr);
}

.worldbook-inspector-pane {
  gap: 16px;
}

.worldbook-inspector-card {
  padding: 14px;
}

.worldbook-inspector-card .shell-radar.compact {
  width: 132px;
  justify-self: center;
}

.worldbook-inspector-card .shell-metric-bars.compact {
  gap: 6px;
}

.worldbook-inspector-card .shell-metric-bars.compact .shell-metric-row {
  grid-template-columns: 38px 28px minmax(58px, 1fr);
  font-size: 9.5px;
}

.worldbook-shape-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(154, 107, 255, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 50%, rgba(154, 107, 255, 0.14), transparent 52%),
    rgba(0, 0, 0, 0.2);
}

.worldbook-shape-summary span {
  color: var(--text-muted);
  font-size: 11px;
}

.worldbook-shape-summary strong {
  color: var(--purple-soft);
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 0 16px rgba(154, 107, 255, 0.28);
}

@media (max-width: 1320px) {
  .worldbook-shell-grid.worldbook-shell-workspace {
    grid-template-columns: 1fr;
  }

  .worldbook-inspector-pane {
    position: relative;
    top: 0;
  }
}

@media (max-width: 760px) {
  .dashboard-summon-card,
  .worldbook-editor-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-summon-avatar {
    min-height: 210px;
  }

  .charlib-shell-card {
    grid-template-rows: 210px 112px 118px;
    min-height: 474px;
  }

  .charlib-shell-portrait {
    height: 210px;
  }
}

/* V28.17 deep grimoire art pass: reference-image collage, stronger occult controls, emoji-to-glyph finish. */
:root {
  --nh-grimoire-starmap: url("./assets/grimoire-starmap-panel.jpg");
  --nh-grimoire-nebula: url("./assets/grimoire-nebula-panel.jpg");
  --nh-grimoire-manuscript: url("./assets/grimoire-manuscript-panel.jpg");
  --nh-grimoire-dividers: url("./assets/grimoire-divider-strip.jpg");
  --nh-grimoire-motifs: url("./assets/grimoire-filler-motifs.jpg");
  --nh-grimoire-seal-compass: url("./assets/grimoire-seal-compass.jpg");
  --nh-grimoire-seal-eye: url("./assets/grimoire-seal-eye.jpg");
  --nh-grimoire-seal-star: url("./assets/grimoire-seal-star.jpg");
  --nh-grimoire-seal-strip: url("./assets/grimoire-arcane-seal-strip.jpg");
  --nh-grimoire-meters: url("./assets/grimoire-meters-strip.jpg");
  --nh-grimoire-icon-atlas: url("./assets/grimoire-icon-atlas.jpg");
  --nh-grimoire-panel-frame: url("./assets/grimoire-panel-frame-large.jpg");
  --nh-grimoire-chat-bar: url("./assets/grimoire-chat-ritual-bar.jpg");
  --nh-grimoire-dashboard: url("./assets/grimoire-dashboard-ghost.jpg");

  --nh-obsidian-0: #010101;
  --nh-obsidian-1: #050403;
  --nh-obsidian-2: rgba(8, 6, 5, 0.9);
  --nh-bronze-line: rgba(231, 177, 100, 0.42);
  --nh-bronze-soft: rgba(247, 215, 154, 0.76);
  --nh-violet-veil: rgba(154, 107, 255, 0.22);
  --nh-violet-flare: rgba(187, 128, 255, 0.62);
  --nh-cyan-veil: rgba(78, 196, 217, 0.18);
}

@keyframes nhGrimoireSlowSpin {
  to { transform: rotate(360deg); }
}

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

@keyframes nhGrimoireGlow {
  0%, 100% { opacity: 0.55; filter: saturate(0.88) drop-shadow(0 0 12px rgba(154, 107, 255, 0.2)); }
  50% { opacity: 0.92; filter: saturate(1.18) drop-shadow(0 0 28px rgba(154, 107, 255, 0.42)); }
}

@keyframes nhGrimoireLineSweep {
  0%, 100% { transform: translateX(-42%); opacity: 0.2; }
  50% { transform: translateX(42%); opacity: 0.72; }
}

@keyframes nhGrimoireGlyphOrbit {
  to { transform: rotate(360deg); }
}

html,
body,
.app-shell {
  font-variant-emoji: text;
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(154, 107, 255, 0.16), transparent 32vw),
    radial-gradient(circle at 82% 84%, rgba(78, 196, 217, 0.09), transparent 34vw),
    linear-gradient(180deg, #020101, #050302 48%, #010101);
}

.app-shell {
  background:
    radial-gradient(circle at 50% 44%, rgba(154, 107, 255, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(8, 5, 4, 0.98), rgba(1, 1, 1, 0.98));
}

.app-shell::before {
  background-image:
    radial-gradient(circle at 50% 34%, rgba(154, 107, 255, 0.12), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(215, 165, 109, 0.08), transparent 28%),
    linear-gradient(120deg, rgba(215, 165, 109, 0.045), transparent 32%, rgba(78, 196, 217, 0.04) 70%, transparent),
    var(--nh-grimoire-nebula),
    var(--nh-grimoire-manuscript),
    var(--nh-grimoire-starmap);
  background-size: auto, auto, auto, 940px 1162px, 780px 956px, 900px 1113px;
  background-position: center, right -180px top -220px, center, right 6vw top 8vh, left 18vw bottom -18vh, center;
  background-blend-mode: screen, screen, normal, soft-light, color-dodge, screen;
  opacity: 0.86;
}

.app-shell::after {
  border-color: rgba(231, 177, 100, 0.7);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.92),
    inset 0 0 0 4px rgba(215, 165, 109, 0.09),
    inset 0 0 86px rgba(0, 0, 0, 0.88),
    0 0 36px rgba(154, 107, 255, 0.12);
}

.topbar,
.leftrail,
.inspector,
.dock {
  background-image:
    linear-gradient(180deg, rgba(247, 215, 154, 0.045), rgba(0, 0, 0, 0.28)),
    var(--nh-grimoire-manuscript),
    var(--arcane-texture);
  background-size: auto, 460px 564px, 640px 640px;
  background-blend-mode: normal, soft-light, soft-light;
}

.topbar {
  border-bottom-color: rgba(231, 177, 100, 0.62);
}

.topbar::after,
.dock::after {
  height: 2px;
  bottom: 5px;
  background:
    var(--nh-grimoire-motifs) center / min(72vw, 720px) 74px no-repeat,
    linear-gradient(90deg, transparent, rgba(245, 217, 155, 0.72), transparent);
  opacity: 0.66;
}

.topbar-search::before {
  content: "";
  width: 16px;
  height: 16px;
  left: 12px;
  border: 1px solid rgba(231, 177, 100, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(214, 182, 255, 0.9) 0 16%, transparent 18% 100%),
    conic-gradient(from 0deg, transparent 0 20%, rgba(231, 177, 100, 0.58) 20% 21%, transparent 21% 50%, rgba(154, 107, 255, 0.58) 50% 51%, transparent 51%);
  box-shadow: 0 0 16px rgba(154, 107, 255, 0.28);
}

.leftrail,
.inspector {
  overflow: hidden auto;
}

.leftrail > *,
.inspector > * {
  position: relative;
  z-index: 1;
}

.leftrail::after,
.inspector::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 150px;
  pointer-events: none;
  background: var(--nh-grimoire-seal-eye) center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.1;
  filter: saturate(0.85);
  animation: nhGrimoireGlow 7s ease-in-out infinite;
}

.workspace {
  background:
    radial-gradient(circle at 58% 38%, rgba(154, 107, 255, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.48));
}

.workspace::before {
  right: clamp(12px, 7vw, 130px);
  top: clamp(92px, 15vh, 170px);
  width: min(52vw, 760px);
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.1), transparent 58%),
    var(--nh-grimoire-seal-compass) center / contain no-repeat;
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: nhGrimoireSlowSpin 190s linear infinite, nhGrimoireGlow 9s ease-in-out infinite;
}

.workspace::after {
  left: clamp(84px, 18vw, 340px);
  right: clamp(16px, 7vw, 160px);
  bottom: -112px;
  width: auto;
  height: 190px;
  aspect-ratio: auto;
  background:
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72) 82%),
    var(--nh-grimoire-seal-strip) center bottom / contain no-repeat;
  opacity: 0.055;
  mix-blend-mode: screen;
  filter: saturate(0.72) blur(0.3px);
  animation: nhGrimoireGlow 10s ease-in-out infinite;
}

.workspace [data-module-view].active::before {
  background:
    radial-gradient(circle at 50% -10%, rgba(231, 177, 100, 0.08), transparent 35%),
    radial-gradient(circle at 86% 12%, rgba(154, 107, 255, 0.075), transparent 32%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42)),
    var(--nh-grimoire-manuscript) center / 780px 956px;
  background-blend-mode: screen, screen, normal, soft-light;
  border-color: rgba(231, 177, 100, 0.18);
}

.card,
.split-3 > .pane,
.stepper,
.inspector-section,
.dock-meter,
.dock-input .input-row,
.drawer,
.focus-modal,
.dashboard-stat,
.dashboard-panel,
.dashboard-model-card,
.dashboard-character-tile,
.dashboard-activity-item,
.dashboard-dialogue-item,
.summon-card,
.summon-dimension-panel,
.charlib-shell-card,
.charlib-shell-detail,
.charlib-detail-analysis,
.worldbook-shell-board,
.worldbook-shell-book,
.worldbook-library-pane,
.worldbook-editor-pane,
.worldbook-inspector-card,
.worldbook-entry-row,
.worldbook-entry-list,
.codex-shell-card-enhanced {
  border-color: rgba(231, 177, 100, 0.32) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.085), transparent 46%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.045), rgba(0, 0, 0, 0.28)),
    var(--nh-grimoire-manuscript),
    var(--arcane-texture) !important;
  background-size: auto, auto, 520px 636px, 620px 620px !important;
  background-blend-mode: screen, normal, soft-light, soft-light !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.045),
    inset 0 0 42px rgba(0, 0, 0, 0.62),
    0 16px 36px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(154, 107, 255, 0.06) !important;
}

.card::before,
.split-3 > .pane::before,
.stepper::before,
.inspector-section::before,
.dock-input .input-row::before,
.drawer::before,
.focus-modal::before,
.dashboard-stat::before,
.dashboard-panel::before,
.charlib-shell-card::before,
.worldbook-shell-book::before,
.worldbook-inspector-card::before {
  border-color: rgba(231, 177, 100, 0.13);
  background:
    linear-gradient(90deg, rgba(245, 217, 155, 0.72), transparent 38%) left top / 82px 1px no-repeat,
    linear-gradient(180deg, rgba(245, 217, 155, 0.72), transparent 38%) left top / 1px 82px no-repeat,
    linear-gradient(270deg, rgba(245, 217, 155, 0.72), transparent 38%) right top / 82px 1px no-repeat,
    linear-gradient(180deg, rgba(245, 217, 155, 0.72), transparent 38%) right top / 1px 82px no-repeat,
    linear-gradient(90deg, rgba(245, 217, 155, 0.72), transparent 38%) left bottom / 82px 1px no-repeat,
    linear-gradient(0deg, rgba(245, 217, 155, 0.72), transparent 38%) left bottom / 1px 82px no-repeat,
    linear-gradient(270deg, rgba(245, 217, 155, 0.72), transparent 38%) right bottom / 82px 1px no-repeat,
    linear-gradient(0deg, rgba(245, 217, 155, 0.72), transparent 38%) right bottom / 1px 82px no-repeat;
}

.card-head::after,
.dashboard-panel-head::after,
.inspector-section-head::after,
.pane-head::after,
.drawer-head::after,
.focus-modal-head::after {
  background:
    var(--nh-grimoire-motifs) center / 520px 132px no-repeat,
    linear-gradient(90deg, transparent, rgba(231, 177, 100, 0.58), transparent);
  height: 20px;
  bottom: -17px;
  opacity: 0.58;
}

.dashboard-title-row::after,
.summon-workshop-header::after,
.charlib-shell-toolbar::after,
.worldbook-shell-toolbar::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 32px;
  margin-top: 2px;
  background: var(--nh-grimoire-dividers) center / min(720px, 82vw) 250px no-repeat;
  opacity: 0.38;
  mix-blend-mode: screen;
  pointer-events: none;
}

.dashboard-workspace {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.28)),
    var(--nh-grimoire-dashboard) center top / min(1180px, 96vw) auto no-repeat;
  background-blend-mode: normal, soft-light;
}

.dashboard-ring,
.dashboard-context-donut,
.shell-radar,
.project-card-sigil,
.dashboard-model-sigil,
.dashboard-stat-icon {
  background-image:
    radial-gradient(circle, rgba(154, 107, 255, 0.18), transparent 60%),
    var(--nh-grimoire-seal-star) !important;
  background-position: center !important;
  background-size: 180%, 190% !important;
  background-blend-mode: screen !important;
  animation: nhGrimoireGlow 8s ease-in-out infinite;
}

.dashboard-progress-bar,
.dashboard-mini-meter,
.project-card-meter i,
.project-card-components i,
.shell-metric-row i,
.trace-range,
.app-shell progress {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(231, 177, 100, 0.18);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(28, 17, 42, 0.74)),
    rgba(0, 0, 0, 0.6) !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.58), 0 0 12px rgba(154, 107, 255, 0.08);
}

.dashboard-progress-bar i,
.dashboard-mini-meter i,
.project-card-meter i::before,
.project-card-components i::before,
.shell-metric-row i::before {
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.36), inset 0 0 8px rgba(255, 255, 255, 0.16);
}

.app-shell input[type="range"] {
  width: 100%;
  height: 18px;
  background: transparent !important;
  accent-color: var(--purple);
}

.app-shell input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border: 1px solid rgba(231, 177, 100, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.95), rgba(78, 196, 217, 0.72) 68%, rgba(231, 177, 100, 0.44)),
    rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.68), 0 0 14px rgba(154, 107, 255, 0.16);
}

.app-shell input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: 1px solid rgba(255, 238, 207, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff6db 0 14%, #d7a6ff 22%, #8f52ee 48%, #140a24 78%);
  box-shadow:
    0 0 0 3px rgba(154, 107, 255, 0.14),
    0 0 22px rgba(154, 107, 255, 0.58),
    inset 0 0 8px rgba(255, 255, 255, 0.28);
}

.app-shell input[type="range"]::-moz-range-track {
  height: 6px;
  border: 1px solid rgba(231, 177, 100, 0.28);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(154, 107, 255, 0.95), rgba(78, 196, 217, 0.72));
}

.app-shell input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 238, 207, 0.82);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6db 0 14%, #d7a6ff 22%, #8f52ee 48%, #140a24 78%);
  box-shadow: 0 0 22px rgba(154, 107, 255, 0.58);
}

.app-shell input[type="checkbox"],
.app-shell input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  min-width: 17px;
  border: 1px solid rgba(231, 177, 100, 0.42);
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.12), transparent 62%),
    rgba(0, 0, 0, 0.72);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.62);
  vertical-align: middle;
  cursor: pointer;
}

.app-shell input[type="checkbox"] {
  border-radius: 4px;
}

.app-shell input[type="radio"] {
  border-radius: 50%;
}

.app-shell input[type="checkbox"]:checked,
.app-shell input[type="radio"]:checked {
  border-color: rgba(214, 182, 255, 0.84);
  background:
    radial-gradient(circle, #fff4d6 0 12%, #c99cff 18%, rgba(154, 107, 255, 0.8) 38%, transparent 42%),
    conic-gradient(from 45deg, transparent 0 24%, rgba(231, 177, 100, 0.62) 24% 26%, transparent 26% 74%, rgba(78, 196, 217, 0.48) 74% 76%, transparent 76%),
    rgba(11, 5, 22, 0.92);
  box-shadow: 0 0 16px rgba(154, 107, 255, 0.46), inset 0 0 8px rgba(255, 255, 255, 0.08);
}

.app-shell select,
.app-shell input[type="text"],
.app-shell input[type="password"],
.app-shell input[type="number"],
.app-shell textarea,
.topbar-search input,
.input,
.select,
textarea.input {
  border-radius: 6px !important;
  border-color: rgba(231, 177, 100, 0.3) !important;
  background:
    linear-gradient(90deg, rgba(231, 177, 100, 0.045), transparent 28%, rgba(154, 107, 255, 0.04)),
    linear-gradient(180deg, rgba(255, 244, 210, 0.035), rgba(0, 0, 0, 0.36)),
    rgba(2, 2, 2, 0.82) !important;
}

.app-shell select {
  padding-right: 34px !important;
}

button.btn,
.app-shell button[class*="px-"],
.app-shell button[class*="py-"],
.dock-input .quick-cmd,
.trace-presets button {
  border-color: rgba(231, 177, 100, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255, 238, 207, 0.08), rgba(0, 0, 0, 0.32)),
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.1), transparent 54%),
    rgba(6, 5, 4, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.045),
    inset 0 0 18px rgba(0, 0, 0, 0.52),
    0 0 0 rgba(154, 107, 255, 0) !important;
}

button.btn:hover,
.app-shell button[class*="px-"]:hover,
.app-shell button[class*="py-"]:hover,
.dock-input .quick-cmd:hover,
.trace-presets button:hover {
  border-color: rgba(245, 217, 155, 0.72) !important;
  box-shadow:
    inset 0 0 20px rgba(231, 177, 100, 0.12),
    0 0 20px rgba(231, 177, 100, 0.16),
    0 0 26px rgba(154, 107, 255, 0.12) !important;
}

.dock {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.76)),
    var(--nh-grimoire-chat-bar),
    var(--nh-grimoire-manuscript);
  background-size: auto, 100% 100%, 560px 686px;
  background-position: center, center, center;
  background-blend-mode: normal, screen, soft-light;
}

.dock-input .input-row {
  min-height: 72px;
}

.dock-execute {
  border-radius: 999px !important;
}

.dock-execute::before,
.dock-execute::after {
  animation: nhGrimoireReverseSpin 18s linear infinite;
}

.app-shell.shell-module-dialogue #dialogue-section {
  background:
    radial-gradient(circle at 50% 12%, rgba(154, 107, 255, 0.08), transparent 42%),
    var(--nh-grimoire-manuscript) center / 760px 932px;
  background-blend-mode: screen, soft-light;
}

.app-shell.shell-module-dialogue #dialogue-messages {
  position: relative;
  border-color: rgba(231, 177, 100, 0.38) !important;
  background:
    radial-gradient(circle at 50% 26%, rgba(154, 107, 255, 0.09), transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(2, 1, 1, 0.22)),
    var(--nh-grimoire-starmap) center / 900px 1113px !important;
  background-blend-mode: screen, normal, soft-light !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.04),
    inset 0 0 64px rgba(0, 0, 0, 0.72);
}

.app-shell.shell-module-dialogue #dialogue-messages::before {
  content: "";
  position: sticky;
  top: 18px;
  display: block;
  width: min(42vw, 520px);
  height: 0;
  margin: 0 auto;
  pointer-events: none;
  filter: saturate(0.85);
  opacity: 0.12;
  z-index: 0;
  box-shadow: none;
}

.app-shell.shell-module-dialogue #dialogue-messages::after {
  content: "";
  position: absolute;
  inset: 10% 18% auto;
  height: min(44vw, 520px);
  pointer-events: none;
  background: var(--nh-grimoire-seal-eye) center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.09;
  animation: nhGrimoireSlowSpin 150s linear infinite;
}

.app-shell.shell-module-dialogue #dialogue-messages > .flex {
  position: relative;
  z-index: 1;
}

.app-shell.shell-module-dialogue #dialogue-messages > .flex > .dialogue-md,
.app-shell.shell-module-dialogue #dialogue-messages > .flex > .flex-1 > .dialogue-md {
  border-radius: 8px !important;
  border-color: rgba(231, 177, 100, 0.26) !important;
  background:
    linear-gradient(180deg, rgba(255, 238, 207, 0.035), rgba(0, 0, 0, 0.2)),
    rgba(7, 6, 5, 0.86) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    0 8px 24px rgba(0, 0, 0, 0.22);
}

.app-shell.shell-module-dialogue #dialogue-messages > .justify-end > .dialogue-md {
  border-color: rgba(78, 196, 217, 0.32) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(78, 196, 217, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(12, 36, 42, 0.84), rgba(5, 9, 10, 0.86)) !important;
  color: #dff9ff !important;
}

.app-shell.shell-module-dialogue #dialogue-messages > .flex:not(.justify-end) > .flex-1 > .dialogue-md {
  border-color: rgba(154, 107, 255, 0.32) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(154, 107, 255, 0.13), transparent 48%),
    linear-gradient(180deg, rgba(18, 11, 28, 0.88), rgba(6, 5, 5, 0.9)) !important;
  color: var(--text-main) !important;
}

.app-shell.shell-module-dialogue #dialogue-messages > .flex > .w-9,
.app-shell.shell-module-dialogue #dialogue-messages > .flex > .flex-1 + .w-9 {
  border-radius: 50% !important;
  border-color: rgba(231, 177, 100, 0.48) !important;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.28), transparent 58%),
    var(--nh-grimoire-seal-star) center / 190% no-repeat,
    rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.22);
}

.naheryu-msg-toolbar button,
.app-shell.shell-module-dialogue #dialogue-messages button {
  color: var(--gold-soft) !important;
  border: 1px solid rgba(231, 177, 100, 0.18) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 5px !important;
}

#dialogue-empty .text-5xl {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  font-size: 0 !important;
  opacity: 1 !important;
  border: 1px solid rgba(231, 177, 100, 0.34);
  border-radius: 50%;
  background: var(--nh-grimoire-seal-compass) center / 188% no-repeat;
  mix-blend-mode: screen;
  box-shadow: 0 0 32px rgba(154, 107, 255, 0.24);
}

.nh-arcane-glyph {
  --glyph-color: var(--gold-soft);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin: 0 0.24em 0 0;
  vertical-align: -0.24em;
  color: var(--glyph-color);
  border: 1px solid rgba(231, 177, 100, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 238, 207, 0.22), transparent 18% 100%),
    radial-gradient(circle, rgba(154, 107, 255, 0.18), transparent 62%),
    rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(154, 107, 255, 0.18);
  font-size: 0.95em;
  line-height: 1;
}

.nh-arcane-glyph::before,
.nh-arcane-glyph::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.nh-arcane-glyph::before {
  width: 0.48em;
  height: 0.48em;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 9px currentColor;
}

.nh-arcane-glyph::after {
  inset: 0.18em;
  border-radius: 50%;
  border: 1px solid rgba(255, 238, 207, 0.18);
  background: conic-gradient(from 0deg, transparent 0 20%, currentColor 20% 21%, transparent 21% 56%, currentColor 56% 57%, transparent 57%);
  opacity: 0.72;
  animation: nhGrimoireGlyphOrbit 16s linear infinite;
}

.nh-arcane-glyph-chat,
.nh-arcane-glyph-world,
.nh-arcane-glyph-search,
.nh-arcane-glyph-voice {
  --glyph-color: #8beaff;
  border-color: rgba(78, 196, 217, 0.42);
}

.nh-arcane-glyph-spark,
.nh-arcane-glyph-vortex,
.nh-arcane-glyph-orb,
.nh-arcane-glyph-wand,
.nh-arcane-glyph-mind,
.nh-arcane-glyph-craft {
  --glyph-color: #d9b7ff;
  border-color: rgba(154, 107, 255, 0.52);
}

.nh-arcane-glyph-delete,
.nh-arcane-glyph-danger {
  --glyph-color: #ffb0a7;
  border-color: rgba(208, 90, 79, 0.48);
}

.nh-arcane-glyph-check,
.nh-arcane-glyph-save {
  --glyph-color: #a9e8a5;
  border-color: rgba(109, 174, 116, 0.46);
}

@media (prefers-reduced-motion: reduce) {
  .workspace::before,
  .workspace::after,
  .leftrail::after,
  .inspector::after,
  .dock-execute::before,
  .dock-execute::after,
  .nh-arcane-glyph::after {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .workspace::before {
    width: 78vw;
    right: -24vw;
    opacity: 0.1;
  }

  .workspace::after {
    left: 0;
    right: 0;
    height: 120px;
    opacity: 0.08;
  }

  .dashboard-title-row::after,
  .summon-workshop-header::after,
  .charlib-shell-toolbar::after,
  .worldbook-shell-toolbar::after {
    height: 22px;
  }

  .app-shell.shell-module-dialogue #dialogue-messages > .flex > .dialogue-md,
  .app-shell.shell-module-dialogue #dialogue-messages > .flex > .flex-1 > .dialogue-md {
    max-width: min(100%, 78vw) !important;
  }
}

/* V28.18 clean grimoire correction: no reference-board crop collage in live UI. */
:root {
  --nh-grimoire-starmap: none;
  --nh-grimoire-nebula: none;
  --nh-grimoire-manuscript: none;
  --nh-grimoire-dividers: none;
  --nh-grimoire-motifs: none;
  --nh-grimoire-seal-compass: none;
  --nh-grimoire-seal-eye: none;
  --nh-grimoire-seal-star: none;
  --nh-grimoire-seal-strip: none;
  --nh-grimoire-meters: none;
  --nh-grimoire-icon-atlas: none;
  --nh-grimoire-panel-frame: none;
  --nh-grimoire-chat-bar: none;
  --nh-grimoire-dashboard: none;

  --nh-clean-panel: rgba(5, 4, 4, 0.88);
  --nh-clean-panel-soft: rgba(10, 8, 7, 0.78);
  --nh-clean-line: rgba(231, 177, 100, 0.34);
  --nh-clean-line-strong: rgba(245, 217, 155, 0.58);
  --nh-clean-violet: rgba(154, 107, 255, 0.32);
  --nh-clean-cyan: rgba(78, 196, 217, 0.22);
  --nh-clean-sigil:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 214, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle, transparent 0 27%, rgba(231, 177, 100, 0.62) 27.5% 28.2%, transparent 28.8% 43%, rgba(154, 107, 255, 0.42) 43.6% 44.4%, transparent 45% 60%, rgba(231, 177, 100, 0.48) 60.5% 61.2%, transparent 62%),
    conic-gradient(from 0deg, transparent 0 7%, rgba(231, 177, 100, 0.68) 7% 7.6%, transparent 7.6% 19%, rgba(154, 107, 255, 0.48) 19% 19.6%, transparent 19.6% 25%, rgba(231, 177, 100, 0.68) 25% 25.6%, transparent 25.6% 44%, rgba(78, 196, 217, 0.36) 44% 44.6%, transparent 44.6% 50%, rgba(231, 177, 100, 0.68) 50% 50.6%, transparent 50.6% 69%, rgba(154, 107, 255, 0.48) 69% 69.6%, transparent 69.6% 75%, rgba(231, 177, 100, 0.68) 75% 75.6%, transparent 75.6%),
    linear-gradient(90deg, transparent 48%, rgba(231, 177, 100, 0.46) 49.4% 50.6%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(231, 177, 100, 0.46) 49.4% 50.6%, transparent 52%),
    linear-gradient(45deg, transparent 49%, rgba(154, 107, 255, 0.34) 49.6% 50.4%, transparent 51%),
    linear-gradient(135deg, transparent 49%, rgba(154, 107, 255, 0.34) 49.6% 50.4%, transparent 51%),
    radial-gradient(circle, rgba(154, 107, 255, 0.18), rgba(0, 0, 0, 0.28) 54%, rgba(0, 0, 0, 0.72) 100%);
  --nh-clean-mini-sigil:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 214, 0.92) 0 1px, transparent 2px),
    radial-gradient(circle, transparent 0 34%, rgba(231, 177, 100, 0.58) 35% 36%, transparent 37% 60%, rgba(154, 107, 255, 0.34) 61% 62%, transparent 63%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(231, 177, 100, 0.54) 12% 13%, transparent 13% 25%, rgba(154, 107, 255, 0.38) 25% 26%, transparent 26% 50%, rgba(231, 177, 100, 0.54) 50% 51%, transparent 51% 75%, rgba(78, 196, 217, 0.3) 75% 76%, transparent 76%),
    linear-gradient(90deg, transparent 49%, rgba(231, 177, 100, 0.38) 49.5% 50.5%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(231, 177, 100, 0.38) 49.5% 50.5%, transparent 51%),
    radial-gradient(circle, rgba(154, 107, 255, 0.18), rgba(0, 0, 0, 0.62) 72%);
}

@keyframes nhCleanSigilTurn {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes nhCleanInnerTurn {
  to { transform: rotate(360deg); }
}

html,
body,
.app-shell {
  font-variant-emoji: text;
}

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(154, 107, 255, 0.12), transparent 30vw),
    radial-gradient(circle at 86% 78%, rgba(78, 196, 217, 0.07), transparent 34vw),
    linear-gradient(180deg, #020101, #050302 48%, #010101) !important;
}

.app-shell {
  background:
    radial-gradient(circle at 50% 42%, rgba(154, 107, 255, 0.06), transparent 44%),
    linear-gradient(180deg, rgba(8, 5, 4, 0.98), rgba(1, 1, 1, 0.98)) !important;
}

.app-shell::before {
  background-image:
    radial-gradient(circle at 52% 34%, rgba(154, 107, 255, 0.09), transparent 25%),
    radial-gradient(circle at 82% 16%, rgba(215, 165, 109, 0.06), transparent 27%),
    linear-gradient(120deg, rgba(215, 165, 109, 0.04), transparent 32%, rgba(78, 196, 217, 0.035) 70%, transparent),
    var(--arcane-texture) !important;
  background-size: auto, auto, auto, 920px 920px !important;
  background-position: center, center, center, center !important;
  background-blend-mode: screen, screen, normal, soft-light !important;
  opacity: 0.64 !important;
  filter: none !important;
}

.topbar,
.leftrail,
.inspector,
.dock {
  background-image:
    linear-gradient(180deg, rgba(247, 215, 154, 0.04), rgba(0, 0, 0, 0.32)),
    var(--arcane-texture) !important;
  background-size: auto, 720px 720px !important;
  background-position: center !important;
  background-blend-mode: normal, soft-light !important;
  filter: none !important;
}

.topbar::after,
.dock::after {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(245, 217, 155, 0.62), rgba(154, 107, 255, 0.38), rgba(78, 196, 217, 0.26), transparent) !important;
  opacity: 0.72 !important;
  filter: none !important;
}

.leftrail::after,
.inspector::after,
.workspace::after,
.dashboard-title-row::after,
.summon-workshop-header::after,
.charlib-shell-toolbar::after,
.worldbook-shell-toolbar::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

.workspace {
  background:
    radial-gradient(circle at 60% 36%, rgba(154, 107, 255, 0.055), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.5)) !important;
}

.workspace::before {
  content: "";
  position: fixed;
  left: calc(50% + 5vw) !important;
  right: auto !important;
  top: 52% !important;
  width: min(56vmin, 680px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--nh-clean-sigil) !important;
  opacity: 0.08 !important;
  mix-blend-mode: screen;
  filter: none !important;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center;
  animation: nhCleanSigilTurn 180s linear infinite !important;
  will-change: transform;
}

.workspace [data-module-view].active::before {
  background:
    radial-gradient(circle at 50% -10%, rgba(231, 177, 100, 0.055), transparent 35%),
    radial-gradient(circle at 88% 12%, rgba(154, 107, 255, 0.06), transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.44)),
    var(--arcane-texture) center / 860px 860px !important;
  background-blend-mode: screen, screen, normal, soft-light !important;
  border-color: rgba(231, 177, 100, 0.18) !important;
  filter: none !important;
}

.card,
.split-3 > .pane,
.stepper,
.inspector-section,
.dock-meter,
.dock-input .input-row,
.drawer,
.focus-modal,
.dashboard-stat,
.dashboard-panel,
.dashboard-model-card,
.dashboard-character-tile,
.dashboard-activity-item,
.dashboard-dialogue-item,
.summon-card,
.summon-dimension-panel,
.charlib-shell-card,
.charlib-shell-detail,
.charlib-detail-analysis,
.worldbook-shell-board,
.worldbook-shell-book,
.worldbook-library-pane,
.worldbook-editor-pane,
.worldbook-inspector-card,
.worldbook-entry-row,
.worldbook-entry-list,
.codex-shell-card-enhanced {
  border-color: rgba(231, 177, 100, 0.3) !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.07), transparent 45%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.035), rgba(0, 0, 0, 0.3)),
    var(--arcane-texture) !important;
  background-size: auto, auto, 700px 700px !important;
  background-position: center !important;
  background-blend-mode: screen, normal, soft-light !important;
  filter: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.04),
    inset 0 0 38px rgba(0, 0, 0, 0.62),
    0 14px 32px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(154, 107, 255, 0.05) !important;
}

.card-head::after,
.dashboard-panel-head::after,
.inspector-section-head::after,
.pane-head::after,
.drawer-head::after,
.focus-modal-head::after {
  height: 1px !important;
  bottom: -9px !important;
  background: linear-gradient(90deg, transparent, rgba(231, 177, 100, 0.5), rgba(154, 107, 255, 0.24), transparent) !important;
  opacity: 0.68 !important;
  filter: none !important;
}

.dashboard-workspace {
  background: transparent !important;
}

.dashboard-ring,
.dashboard-context-donut {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0 47%, transparent 48%),
    conic-gradient(from -90deg, rgba(154, 107, 255, 0.92) calc(var(--value, 0) * 1%), rgba(231, 177, 100, 0.14) 0),
    var(--nh-clean-sigil) !important;
  background-blend-mode: normal, screen, screen, screen, screen, screen, screen, screen, normal !important;
  box-shadow:
    inset 0 0 0 1px rgba(231, 177, 100, 0.28),
    0 0 26px rgba(154, 107, 255, 0.16) !important;
  animation: none !important;
}

.dashboard-context-donut {
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0 47%, transparent 48%),
    conic-gradient(
      from -90deg,
      var(--purple) 0 calc(var(--used, 0) * 1%),
      var(--cyan) calc(var(--used, 0) * 1%) calc((var(--used, 0) + var(--wb, 0)) * 1%),
      var(--gold) calc((var(--used, 0) + var(--wb, 0)) * 1%) calc((var(--used, 0) + var(--wb, 0) + var(--kb, 0)) * 1%),
      rgba(255, 255, 255, 0.08) 0
    ),
    var(--nh-clean-sigil) !important;
}

.dashboard-ring::before,
.dashboard-context-donut::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--nh-clean-mini-sigil);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: nhCleanInnerTurn 72s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.dashboard-ring span,
.dashboard-ring small,
.dashboard-context-donut strong,
.dashboard-context-donut span {
  position: relative;
  z-index: 1;
}

.shell-radar,
.dashboard-model-sigil,
.dashboard-stat-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.2), transparent 58%),
    rgba(0, 0, 0, 0.42) !important;
  animation: none !important;
}

.shell-radar::after,
.dashboard-model-sigil::after,
.dashboard-stat-icon::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--nh-clean-mini-sigil);
  opacity: 0.42;
  mix-blend-mode: screen;
  animation: nhCleanInnerTurn 54s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.shell-radar > *,
.dashboard-model-sigil > *,
.dashboard-stat-icon > * {
  position: relative;
  z-index: 1;
}

.leftrail-project-card {
  background:
    radial-gradient(circle at 50% 15%, rgba(154, 107, 255, 0.18), transparent 34%),
    radial-gradient(circle at 84% 82%, rgba(78, 196, 217, 0.06), transparent 34%),
    linear-gradient(180deg, rgba(255, 234, 190, 0.03), rgba(0, 0, 0, 0.34)),
    rgba(0, 0, 0, 0.42) !important;
  border-color: rgba(231, 177, 100, 0.26) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    inset 0 0 28px rgba(0, 0, 0, 0.52),
    0 0 20px rgba(154, 107, 255, 0.08) !important;
}

.project-card-sigil {
  overflow: hidden;
  background: var(--nh-clean-sigil) !important;
  background-color: rgba(0, 0, 0, 0.42) !important;
  background-blend-mode: screen !important;
  filter: none !important;
  animation: none !important;
}

.project-card-sigil::before {
  content: "";
  position: absolute;
  inset: 20px;
  width: auto;
  height: auto;
  left: 20px;
  top: 20px;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 238, 207, 0.7);
  border-radius: 2px;
  background: radial-gradient(circle, rgba(154, 107, 255, 0.8) 0 2px, transparent 3px);
  box-shadow: 0 0 16px rgba(154, 107, 255, 0.5);
}

.project-card-sigil::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(231, 177, 100, 0.28);
  background:
    conic-gradient(from 0deg, transparent 0 10%, rgba(245, 217, 155, 0.7) 10% 11%, transparent 11% 39%, rgba(154, 107, 255, 0.54) 39% 40%, transparent 40% 61%, rgba(245, 217, 155, 0.7) 61% 62%, transparent 62% 89%, rgba(78, 196, 217, 0.42) 89% 90%, transparent 90%);
  opacity: 0.8;
  animation: nhCleanInnerTurn 42s linear infinite;
}

.project-tree-glyph {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-section {
  background:
    radial-gradient(circle at 50% 12%, rgba(154, 107, 255, 0.065), transparent 42%),
    var(--arcane-texture) center / 760px 760px !important;
  background-blend-mode: screen, soft-light !important;
}

.app-shell.shell-module-dialogue #dialogue-messages {
  background:
    radial-gradient(circle at 50% 26%, rgba(154, 107, 255, 0.075), transparent 38%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(2, 1, 1, 0.22)),
    var(--arcane-texture) center / 900px 900px !important;
  background-blend-mode: screen, normal, soft-light !important;
  filter: none !important;
}

.app-shell.shell-module-dialogue #dialogue-messages::after {
  inset: 10% 20% auto;
  height: min(44vw, 500px);
  border-radius: 50%;
  background: var(--nh-clean-sigil) !important;
  opacity: 0.05 !important;
  filter: none !important;
  animation: nhCleanInnerTurn 170s linear infinite !important;
}

.app-shell.shell-module-dialogue #dialogue-messages > .flex > .w-9,
.app-shell.shell-module-dialogue #dialogue-messages > .flex > .flex-1 + .w-9,
#dialogue-empty .text-5xl {
  background: var(--nh-clean-mini-sigil) !important;
  background-color: rgba(0, 0, 0, 0.64) !important;
  filter: none !important;
}

.app-shell input[type="range"]::-webkit-slider-runnable-track {
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.92), rgba(78, 196, 217, 0.66) 68%, rgba(231, 177, 100, 0.42)),
    rgba(0, 0, 0, 0.72) !important;
}

.app-shell input[type="range"]::-webkit-slider-thumb {
  background:
    radial-gradient(circle, #fff6db 0 14%, #d7a6ff 22%, #8f52ee 48%, #140a24 78%) !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .workspace::before,
  .dashboard-ring::before,
  .dashboard-context-donut::before,
  .shell-radar::after,
  .dashboard-model-sigil::after,
  .dashboard-stat-icon::after,
  .project-card-sigil::after,
  .app-shell.shell-module-dialogue #dialogue-messages::after {
    animation: none !important;
  }
}

@media (max-width: 760px) {
  .workspace::before {
    left: 50% !important;
    right: auto !important;
    width: min(78vw, 520px) !important;
    opacity: 0.065 !important;
  }
}

/* V28.19 atlas polish: complete art frames, stable scrolling, readable diagnostics. */
.charlib-shell-grid {
  overflow-anchor: none;
  scroll-behavior: auto;
  padding-bottom: 54px !important;
}

.charlib-shell-card {
  grid-template-rows: 226px 124px minmax(116px, auto) !important;
  min-height: 510px !important;
  padding: 13px !important;
}

.charlib-shell-portrait {
  box-sizing: border-box;
  height: 226px !important;
  min-height: 226px !important;
  padding: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(154, 107, 255, 0.24), transparent 58%),
    radial-gradient(circle at 50% 86%, rgba(78, 196, 217, 0.08), transparent 42%),
    rgba(0, 0, 0, 0.56) !important;
}

.charlib-shell-portrait img,
.charlib-detail-portrait img,
.dashboard-character-avatar img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 52%, rgba(154, 107, 255, 0.14), transparent 58%),
    rgba(0, 0, 0, 0.3);
}

.charlib-shell-portrait::before,
.charlib-detail-portrait::before,
.dashboard-summon-avatar::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 5px;
  border: 1px solid rgba(245, 217, 155, 0.12);
  background:
    linear-gradient(90deg, rgba(245, 217, 155, 0.54), transparent 38%) left top / 54px 1px no-repeat,
    linear-gradient(180deg, rgba(245, 217, 155, 0.54), transparent 38%) left top / 1px 54px no-repeat,
    linear-gradient(270deg, rgba(245, 217, 155, 0.54), transparent 38%) right bottom / 54px 1px no-repeat,
    linear-gradient(0deg, rgba(245, 217, 155, 0.54), transparent 38%) right bottom / 1px 54px no-repeat;
  pointer-events: none;
  z-index: 2;
}

.charlib-detail-portrait {
  min-height: 150px;
  padding: 8px;
  box-sizing: border-box;
}

.charlib-detail-analysis {
  grid-template-columns: minmax(138px, 158px) minmax(0, 1fr) !important;
}

.charlib-shell-card-metrics {
  min-height: 116px !important;
  max-height: none !important;
}

.dashboard-summon-card {
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr) !important;
  min-height: 264px !important;
  gap: 20px !important;
}

.dashboard-summon-avatar {
  box-sizing: border-box;
  min-height: 246px !important;
  padding: 10px !important;
  aspect-ratio: 1 / 1 !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(154, 107, 255, 0.24), transparent 58%),
    radial-gradient(circle at 50% 88%, rgba(78, 196, 217, 0.1), transparent 42%),
    rgba(3, 3, 5, 0.92) !important;
}

.dashboard-summon-avatar img {
  display: none;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
}

.dashboard-summon-avatar span {
  border-radius: 6px;
}

.dashboard-meter-row {
  grid-template-columns: minmax(64px, 76px) minmax(74px, 1fr) minmax(82px, auto) !important;
  gap: 7px !important;
}

.dashboard-meter-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-meter-row strong {
  min-width: 82px !important;
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}

.dashboard-health-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.dashboard-health-row strong {
  max-width: none !important;
  white-space: nowrap;
}

.dashboard-inspector-pills .pill {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card-meter i,
.project-card-components i,
.dashboard-mini-meter,
.dashboard-progress-bar,
.shell-metric-row i {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 238, 207, 0.045), rgba(0, 0, 0, 0.24)),
    rgba(255, 255, 255, 0.065) !important;
}

.project-card-meter i::before,
.project-card-components i::before,
.dashboard-mini-meter i::before,
.dashboard-progress-bar i::before,
.shell-metric-row i::before {
  content: "";
  display: block;
  width: var(--core, var(--value, 0%));
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #9a6bff, #4ec4d9 64%, #f5d99b);
  box-shadow:
    0 0 10px rgba(154, 107, 255, 0.45),
    0 0 18px rgba(78, 196, 217, 0.18);
}

.dashboard-mini-meter i,
.dashboard-progress-bar i,
.shell-metric-row i {
  display: block;
  width: 100% !important;
  height: 100%;
  background: transparent !important;
  box-shadow: none !important;
}

.project-card-meter i::before {
  width: var(--core, 0%) !important;
}

.project-card-components i::before,
.shell-metric-row i::before {
  width: var(--value, 0%) !important;
}

.dashboard-mini-meter i::before,
.dashboard-progress-bar i::before {
  width: calc(var(--value, 0) * 1%) !important;
}

.project-card-components {
  gap: 5px !important;
}

.project-card-components span {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.project-card-components i {
  height: 4px !important;
}

.project-card-components em {
  color: rgba(232, 220, 200, 0.82) !important;
}

@media (max-width: 1180px) {
  .dashboard-summon-card {
    grid-template-columns: 1fr !important;
  }

  .dashboard-summon-avatar {
    max-width: 360px;
  }
}

/* V28.20 image-fit hardening: complete art, no portrait cropping. */
.charlib-shell-portrait,
.charlib-detail-portrait,
.dashboard-character-avatar,
.dashboard-summon-avatar {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.charlib-shell-portrait {
  height: 226px !important;
  min-height: 226px !important;
}

.charlib-detail-portrait {
  height: 150px !important;
  min-height: 150px !important;
}

.dashboard-character-avatar {
  aspect-ratio: 1 / 1 !important;
}

.dashboard-summon-card {
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) !important;
  min-height: 332px !important;
  align-items: center !important;
}

.dashboard-summon-avatar {
  aspect-ratio: 4 / 5 !important;
  min-height: 320px !important;
  max-height: 380px !important;
  width: 100% !important;
}

.charlib-shell-portrait img,
.charlib-detail-portrait img,
.dashboard-character-avatar img,
.dashboard-summon-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1180px) {
  .dashboard-summon-card {
    grid-template-columns: 1fr !important;
  }

  .dashboard-summon-avatar {
    max-width: 320px !important;
    justify-self: start;
  }
}

/* V28.21 worldbook refinement: preserve full artwork and tighten the grimoire frame language. */
.worldbook-shell-cover,
.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(154, 104, 255, 0.18), transparent 58%),
    linear-gradient(135deg, rgba(216, 166, 93, 0.08), rgba(14, 9, 18, 0.72)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(215, 166, 93, 0.22),
    inset 0 0 26px rgba(154, 104, 255, 0.08),
    0 0 18px rgba(154, 104, 255, 0.1) !important;
}

.worldbook-shell-cover img,
.worldbook-entry-row img,
.worldbook-entry-chip img,
.worldbook-entry-avatar img,
.worldbook-shell-cover.mini img,
.worldbook-shell-cover.hero img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: saturate(1.05) contrast(1.04) !important;
}

.worldbook-shell-cover.hero {
  aspect-ratio: 3 / 4 !important;
  min-height: 220px !important;
}

.worldbook-shell-cover.mini,
.worldbook-entry-row > span,
.worldbook-entry-chip > span {
  aspect-ratio: 1 / 1 !important;
}

.worldbook-inline-grid {
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)) !important;
  gap: 10px !important;
}

.worldbook-inline-grid label,
.worldbook-entry-tuning label,
.worldbook-library-item,
.worldbook-editor-pane,
.worldbook-inspector-card,
.worldbook-entry-row {
  border-color: rgba(215, 166, 93, 0.35) !important;
  background:
    linear-gradient(180deg, rgba(18, 14, 21, 0.9), rgba(4, 3, 5, 0.86)),
    radial-gradient(circle at 12% 0%, rgba(154, 104, 255, 0.12), transparent 36%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 168, 0.04),
    inset 0 0 24px rgba(215, 166, 93, 0.035),
    0 10px 28px rgba(0, 0, 0, 0.28) !important;
}

.worldbook-library-controls {
  align-items: center !important;
  gap: 7px !important;
}

.worldbook-danger-mini {
  color: #ffc7b8 !important;
  border: 1px solid rgba(255, 112, 87, 0.35) !important;
  background: rgba(60, 12, 10, 0.32) !important;
  box-shadow: inset 0 0 14px rgba(255, 74, 74, 0.08) !important;
}

.worldbook-danger-mini:hover {
  color: #ffe4dc !important;
  border-color: rgba(255, 152, 126, 0.58) !important;
  box-shadow: 0 0 18px rgba(255, 94, 78, 0.14), inset 0 0 18px rgba(255, 94, 78, 0.12) !important;
}

.summon-result-workbench,
.summon-accordion-panel,
.summon-runtime-card,
.charlib-shell-card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 168, 0.035),
    inset 0 0 34px rgba(154, 104, 255, 0.045),
    0 14px 36px rgba(0, 0, 0, 0.32) !important;
}

.summon-accordion-panel summary::after,
.worldbook-editor-hero::after,
.worldbook-inspector-card::after {
  opacity: 0.7 !important;
}

/* V28.22 ritual shell: clean vector sigils, proportional scaling, login gate, polished chat. */
:root {
  --nh-ritual-sigil-asset: url("./assets/naheryu-ritual-sigil.svg");
  --nh-login-sigil-asset: url("./assets/naheryu-login-sigil.svg");
  /* V28.187 無模糊向量版：給會旋轉的登入魔法陣用，避免每幀重算高斯模糊 */
  --nh-login-sigil-flat: url("./assets/naheryu-login-sigil-flat.svg");
  --nh-mini-sigil-asset: url("./assets/naheryu-mini-sigil.svg");
  --arcane-sigil: var(--nh-ritual-sigil-asset);
}

html,
body,
.app-shell,
.topbar,
.leftrail,
.workspace,
.workspace-inner,
.inspector,
.dock,
.dashboard-workspace,
.summon-workshop-view,
.charlib-shell-board,
.worldbook-shell-board,
.summon-result-workbench,
#slot-main-stage,
#result-area {
  min-width: 0 !important;
  min-height: 0;
}

.app-shell {
  grid-template-columns: clamp(220px, 14vw, 264px) minmax(0, 1fr) clamp(300px, 18vw, 340px);
}

.app-shell.rail-collapsed {
  grid-template-columns: var(--leftrail-w-collapsed) minmax(0, 1fr) clamp(300px, 18vw, 340px);
}

.app-shell.inspector-hidden {
  grid-template-columns: clamp(220px, 14vw, 264px) minmax(0, 1fr) 0;
}

.app-shell.inspector-hidden.rail-collapsed {
  grid-template-columns: var(--leftrail-w-collapsed) minmax(0, 1fr) 0;
}

.topbar {
  gap: clamp(8px, 1vw, 16px) !important;
}

.topbar-brand {
  flex: 0 1 clamp(218px, 18vw, 280px) !important;
  min-width: 0 !important;
  white-space: nowrap;
}

.topbar-brand > span:nth-of-type(2),
.topbar-brand .pill,
.topbar-model .value,
.topbar-model .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-brand > span:first-of-type,
.nh-brand-sigil {
  width: clamp(36px, 3.2vw, 48px) !important;
  height: clamp(36px, 3.2vw, 48px) !important;
  flex: 0 0 auto;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.34), transparent 42%),
    var(--nh-ritual-sigil-asset) center / 116% no-repeat !important;
  border-radius: 50%;
}

.topbar-search {
  flex: 1 1 240px !important;
  max-width: min(520px, 36vw) !important;
  min-width: 160px !important;
}

.topbar-actions {
  min-width: 0;
  flex: 0 1 auto;
}

.topbar-model {
  max-width: min(360px, 28vw);
  min-width: 0;
}

.topbar-actions .btn {
  flex: 0 0 auto;
}

.workspace {
  overflow-x: auto !important;
}

.workspace-inner {
  width: 100%;
  max-width: min(1400px, 100%) !important;
  padding-left: clamp(14px, 1.6vw, 24px) !important;
  padding-right: clamp(14px, 1.6vw, 24px) !important;
}

.workspace [data-module-view].active,
.dashboard-main-grid,
.dashboard-stat-grid,
.summon-workshop-grid,
.summon-runtime-grid,
.charlib-shell-layout,
.charlib-shell-grid,
.worldbook-shell-grid,
.worldbook-shell-grid.worldbook-shell-workspace,
.summon-result-workbench,
.codex-shell-card-enhanced {
  min-width: 0 !important;
  max-width: 100% !important;
}

.dashboard-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)) !important;
}

.dashboard-main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(220px, 0.82fr) !important;
}

.dashboard-panel,
.dashboard-stat,
.dashboard-model-card,
.dashboard-worldbook-body,
.dashboard-summon-card,
.dashboard-summon-meta,
.dashboard-activity-item,
.dashboard-dialogue-item,
.summon-card,
.summon-runtime-card,
.summon-runtime-stat,
.charlib-shell-card,
.charlib-shell-detail,
.worldbook-shell-book,
.worldbook-editor-pane,
.worldbook-inspector-card {
  min-width: 0 !important;
}

.dashboard-panel-head,
.summon-workshop-header,
.charlib-shell-toolbar,
.worldbook-shell-toolbar {
  flex-wrap: wrap;
}

.dashboard-panel-head h2,
.summon-workshop-header h1,
.charlib-shell-toolbar h2,
.worldbook-shell-toolbar h2,
.dashboard-model-card strong,
.dashboard-activity-item strong,
.dashboard-dialogue-item strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dashboard-model-card,
.dashboard-activity-item,
.dashboard-dialogue-item {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.inspector {
  overflow-x: hidden !important;
}

.inspector * {
  min-width: 0;
}

.dashboard-inspector-body .dashboard-meter-row,
.dashboard-meter-row {
  grid-template-columns: minmax(52px, 72px) minmax(72px, 1fr) minmax(64px, auto) !important;
}

.dashboard-inspector-body .dashboard-meter-row strong,
.dashboard-meter-row strong {
  min-width: 64px !important;
  max-width: 96px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.leftrail {
  overscroll-behavior: contain;
}

.leftrail-section {
  flex: 0 0 auto;
}

.leftrail-footer.leftrail-project-card {
  flex: 0 0 auto;
  min-height: 228px !important;
  overflow: visible !important;
}

.project-card-sigil {
  width: clamp(58px, 7.2vh, 82px) !important;
  height: clamp(58px, 7.2vh, 82px) !important;
  aspect-ratio: 1 / 1 !important;
  min-width: clamp(58px, 7.2vh, 82px) !important;
  min-height: clamp(58px, 7.2vh, 82px) !important;
  margin-inline: auto;
  overflow: visible !important;
  cursor: pointer;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.26), transparent 58%),
    var(--nh-ritual-sigil-asset) center / contain no-repeat !important;
}

.project-card-sigil::before {
  background: var(--nh-mini-sigil-asset) center / contain no-repeat !important;
  opacity: 0.78 !important;
}

.project-card-sigil::after {
  background: none !important;
  border: 1px solid rgba(245, 217, 155, 0.3) !important;
}

.dashboard-stat-icon,
.dashboard-model-sigil,
.dashboard-activity-icon,
.dialogue-avatar-sigil {
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.22), transparent 62%),
    var(--nh-mini-sigil-asset) center / contain no-repeat !important;
  color: transparent !important;
  text-shadow: none !important;
}

.dashboard-stat-icon::after {
  background: var(--nh-mini-sigil-asset) center / contain no-repeat !important;
}

.charlib-shell-portrait,
.charlib-detail-portrait {
  aspect-ratio: auto;
  contain: layout paint;
}

.dashboard-summon-avatar {
  aspect-ratio: 4 / 5 !important;
  contain: layout paint;
}

.worldbook-shell-cover,
.worldbook-shell-cover.hero {
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  contain: layout paint;
}

.worldbook-shell-cover.mini,
.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  contain: layout paint;
}

.worldbook-shell-cover.mini {
  width: 70px !important;
}

.worldbook-shell-cover.hero {
  width: 150px !important;
}

.charlib-shell-portrait img,
.charlib-detail-portrait img,
.dashboard-summon-avatar img,
.worldbook-shell-cover img {
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1600px) {
  .app-shell {
    grid-template-columns: 238px minmax(0, 1fr) 310px;
  }

  .app-shell.rail-collapsed {
    grid-template-columns: var(--leftrail-w-collapsed) minmax(0, 1fr) 310px;
  }

  .app-shell.inspector-hidden {
    grid-template-columns: 238px minmax(0, 1fr) 0;
  }

  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "activity worldbook"
      "model quick"
      "characters dialogues" !important;
  }
}

@media (max-width: 1360px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr) 286px;
  }

  .app-shell.rail-collapsed {
    grid-template-columns: var(--leftrail-w-collapsed) minmax(0, 1fr) 286px;
  }

  .app-shell.inspector-hidden {
    grid-template-columns: 220px minmax(0, 1fr) 0;
  }

  .topbar-brand .pill,
  .topbar-model .label {
    display: none !important;
  }

  .dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "activity"
      "worldbook"
      "model"
      "quick"
      "characters"
      "dialogues" !important;
  }
}

@media (max-height: 820px) {
  .leftrail-section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .nav-item {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .leftrail-footer.leftrail-project-card {
    min-height: 202px !important;
    padding: 9px !important;
  }

  .project-card-sigil {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }
}

@media (max-height: 900px) {
  .leftrail-section {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .nav-item {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .leftrail-footer.leftrail-project-card {
    min-height: 184px !important;
    padding: 8px !important;
  }

  .project-card-sigil {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
  }

  .project-card-title {
    margin-top: 4px !important;
  }

  .project-card-time {
    font-size: 9px !important;
  }

  .project-card-components {
    gap: 3px !important;
  }

  .project-card-components span {
    min-height: 0 !important;
  }

  .project-card-components span:nth-child(n+5) {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .workspace-inner {
    max-width: none !important;
  }

  .inspector {
    min-width: min(92vw, 340px);
  }
}

.app-shell.shell-module-dialogue #dialogue-messages {
  display: flex !important;
  flex-direction: column;
  gap: 16px !important;
  background:
    radial-gradient(circle at 52% 32%, rgba(154, 107, 255, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.2)),
    var(--arcane-texture) center / 820px 820px !important;
}

.naheryu-chat-row {
  width: 100%;
  align-items: flex-start;
  gap: 12px !important;
}

.naheryu-chat-row-assistant {
  justify-content: flex-start;
}

.naheryu-chat-row-user {
  justify-content: flex-end;
}

.naheryu-chat-stack {
  max-width: min(720px, 68%);
  min-width: 0;
}

.naheryu-chat-row-user .naheryu-chat-stack {
  max-width: min(680px, 64%);
}

.naheryu-speaker-line {
  margin: 0 0 5px 4px;
  color: rgba(245, 217, 155, 0.78);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.naheryu-chat-bubble {
  position: relative;
  max-width: 100% !important;
  border-radius: 10px !important;
  border: 1px solid rgba(215, 165, 109, 0.25) !important;
  padding: 13px 15px !important;
  color: var(--text-main) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(154, 107, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(18, 14, 22, 0.9), rgba(2, 2, 3, 0.78)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    0 10px 24px rgba(0, 0, 0, 0.28) !important;
  overflow-wrap: anywhere;
}

.naheryu-chat-row-user .naheryu-chat-bubble {
  border-color: rgba(78, 196, 217, 0.28) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(78, 196, 217, 0.12), transparent 44%),
    linear-gradient(180deg, rgba(8, 18, 22, 0.88), rgba(2, 3, 4, 0.78)) !important;
}

.naheryu-chat-avatar {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(215, 165, 109, 0.45) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(154, 107, 255, 0.3), transparent 62%),
    rgba(0, 0, 0, 0.56) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.05),
    0 0 18px rgba(154, 107, 255, 0.18) !important;
  cursor: pointer;
}

.naheryu-chat-avatar img,
.naheryu-profile-avatar img,
.dialogue-avatar-calibrator-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%) !important;
  display: block;
}

.naheryu-profile-avatar {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  display: block;
  padding: 0;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
}

.naheryu-chat-avatar-sigil {
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.28), transparent 62%),
    var(--nh-mini-sigil-asset) center / contain no-repeat !important;
}

.naheryu-chat-tools {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.naheryu-chat-row:hover .naheryu-chat-tools {
  opacity: 1;
}

.naheryu-chat-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 230px;
  color: rgba(232, 220, 200, 0.58);
  text-align: center;
}

.naheryu-chat-empty::before {
  content: "";
  width: 76px;
  height: 76px;
  background: var(--nh-ritual-sigil-asset) center / contain no-repeat;
  filter: drop-shadow(0 0 22px rgba(154, 107, 255, 0.28));
  animation: nhCleanInnerTurn 58s linear infinite;
}

.dialogue-avatar-calibrator {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
}

.dialogue-avatar-calibrator-card {
  width: min(420px, 92vw);
  border: 1px solid rgba(215, 165, 109, 0.46);
  border-radius: 8px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(14, 10, 17, 0.98), rgba(0, 0, 0, 0.96)),
    var(--arcane-texture) center / 720px 720px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.72), 0 0 34px rgba(154, 107, 255, 0.16);
}

.dialogue-avatar-calibrator-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.dialogue-avatar-calibrator-head strong {
  color: var(--gold-soft);
  letter-spacing: 0.08em;
}

.dialogue-avatar-calibrator-preview {
  width: 190px;
  height: 190px;
  margin: 0 auto 14px;
  border: 1px solid rgba(215, 165, 109, 0.5);
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.22), transparent 62%),
    rgba(0, 0, 0, 0.72);
}

.dialogue-avatar-calibrator-controls {
  display: grid;
  gap: 10px;
}

.dialogue-avatar-calibrator-controls label {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  color: rgba(232, 220, 200, 0.74);
  font-size: 12px;
}

.dialogue-avatar-calibrator-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

.naheryu-login-gate {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.82fr);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  color: var(--text-main);
  background:
    radial-gradient(circle at 30% 52%, rgba(154, 107, 255, 0.2), transparent 26%),
    radial-gradient(circle at 70% 18%, rgba(78, 196, 217, 0.08), transparent 26%),
    linear-gradient(120deg, rgba(2, 2, 5, 0.96), rgba(5, 3, 10, 0.98)),
    var(--arcane-texture) center / 980px 980px;
  overflow: hidden;
  animation: nhLoginGateIn 0.8s ease-out both;
}

.naheryu-login-gate[hidden] {
  display: none !important;
}

/* V28.191 入場：整面淡入 + 面板由下浮起，一次性動畫、零常駐成本。 */
@keyframes nhLoginGateIn {
  from { opacity: 0; }
}

@keyframes nhLoginPanelIn {
  from { opacity: 0; transform: translateY(20px); }
}

@keyframes nhLoginBrandIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
}

.naheryu-login-gate::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(215, 165, 109, 0.42);
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.82),
    inset 0 0 72px rgba(0, 0, 0, 0.68);
}

.naheryu-login-orbit {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 4vw, 64px);
  isolation: isolate;
  overflow: hidden;
}

.naheryu-login-orbit::before,
.naheryu-login-orbit::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(78vw, 960px, 100vh);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 107, 255, 0.14), transparent 62%);
  opacity: 0.72;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

.naheryu-login-orbit::after {
  width: min(58vw, 700px, 76vh);
  border: 1px solid rgba(215, 165, 109, 0.12);
  box-shadow: 0 0 90px rgba(154, 107, 255, 0.12), inset 0 0 70px rgba(78, 196, 217, 0.04);
  background: transparent;
  opacity: 0.9;
}

/* V28.191 大型同心召喚陣：改為單一巨陣、多層同心反向咬合（參考 CodePen 魔法陣類
   作品的主流構圖：counter-rotating concentric rings + 衛星公轉 + 呼吸光暈）。
   全部維持 transform/opacity-only → 合成執行緒獨走，跑滿螢幕更新率。 */
.naheryu-login-sigil-stack {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(76vw, 900px, 96vh);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  contain: layout paint;
  pointer-events: none;
  z-index: 0;
}

/* V28.191 呼吸光暈：只動 opacity/scale（純合成屬性），慢週期脈動讓整座陣「活著」。 */
.naheryu-login-sigil-glow {
  position: absolute;
  inset: 3%;
  transform: translateZ(0);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(154, 107, 255, 0.22) 0%, rgba(120, 92, 255, 0.12) 34%,
                    rgba(78, 196, 217, 0.05) 56%, transparent 72%);
  pointer-events: none;
  z-index: -1;
  animation: nhLoginGlowPulse 6.8s ease-in-out infinite;
}

/* 每層仍用「無模糊」向量 flat SVG（--nh-login-sigil-flat）：只光柵化一次、
   之後純 GPU 旋轉（translateZ + will-change）。 */
.naheryu-login-sigil-layer {
  position: absolute;
  display: block;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  background: var(--nh-login-sigil-flat) center / contain no-repeat;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  filter: none;
}

/* 最外環 · 幾乎滿版、最慢、最淡 —— 給整座陣一圈巨大的暗紋 */
.naheryu-login-sigil-layer.is-outer {
  inset: 0;
  opacity: 0.3;
  animation: nhLoginRingSpin 150s linear infinite reverse;
}

/* 主陣 · 視覺主體 */
.naheryu-login-sigil-layer.is-main {
  inset: 6%;
  opacity: 0.78;
  animation: nhLoginRingSpin 85s linear infinite;
}

/* 中環 · 與主陣反向，產生咬合錯動感 */
.naheryu-login-sigil-layer.is-middle {
  inset: 17%;
  opacity: 0.48;
  animation: nhLoginRingSpin 60s linear infinite reverse;
}

/* 內環 */
.naheryu-login-sigil-layer.is-inner {
  inset: 27%;
  opacity: 0.6;
  animation: nhLoginRingSpin 46s linear infinite;
}

/* 陣核 · 最亮最快，反向 */
.naheryu-login-sigil-layer.is-core {
  inset: 36%;
  opacity: 0.9;
  animation: nhLoginRingSpin 34s linear infinite reverse;
}

/* 衛星陣 · 滿版透明載體旋轉，小陣貼在載體邊緣 → 沿外環公轉同時自轉。
   （背景跟著載體轉 = 公轉 + 自轉一次到位，仍是單一 GPU 旋轉） */
.naheryu-login-sigil-layer.is-accent1 {
  inset: 0;
  background-position: 50% 1.5%;
  background-size: 18%;
  opacity: 0.55;
  animation: nhLoginRingSpin 64s linear infinite;
}

.naheryu-login-sigil-layer.is-accent2 {
  inset: 0;
  background-position: 50% 98.5%;
  background-size: 13%;
  opacity: 0.45;
  animation: nhLoginRingSpin 44s linear infinite reverse;
}

/* V28.185 GPU 專用旋轉：整段動畫都帶 translateZ(0)，讓瀏覽器把這層當快取貼圖，
   只在 GPU 合成執行緒旋轉，不再每幀重新光柵化 → 順滿螢幕更新率。 */
@keyframes nhLoginRingSpin {
  from { transform: translateZ(0) rotate(0deg); }
  to   { transform: translateZ(0) rotate(360deg); }
}

@keyframes nhLoginGlowPulse {
  0%, 100% { opacity: 0.66; transform: translateZ(0) scale(0.97); }
  50%      { opacity: 1;    transform: translateZ(0) scale(1.03); }
}

/* V28.191 標題移進陣中央：召喚陣環繞書名，中央加暗色柔光圈保持可讀。 */
.naheryu-login-brand {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(88%, 720px);
  margin: 0;
  padding: clamp(22px, 4vw, 52px) clamp(14px, 3vw, 40px);
  transform: translate(-50%, -50%);
  text-align: center;
  background: radial-gradient(closest-side, rgba(4, 2, 10, 0.8), rgba(4, 2, 10, 0.46) 58%, transparent);
  text-shadow: 0 0 26px rgba(154, 107, 255, 0.4);
  z-index: 2;
  animation: nhLoginBrandIn 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s both;
}

.naheryu-login-brand h1 {
  margin: 0;
  color: var(--gold-soft);
  font-size: clamp(36px, 3.8vw, 64px);
  line-height: 1.12;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-wrap: nowrap;
}

.naheryu-login-brand span {
  display: block;
  max-width: 100%;
  margin-top: 9px;
  color: rgba(232, 220, 200, 0.72);
  font-size: clamp(11px, .85vw, 14px);
  line-height: 1.45;
  letter-spacing: 0.14em;
  overflow-wrap: anywhere;
}

.naheryu-login-panel-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(18px, 3vw, 44px);
  overflow: auto;
  overscroll-behavior: contain;
}

.naheryu-login-lang {
  position: absolute;
  top: 28px;
  right: 32px;
}

.naheryu-login-panel {
  position: relative;
  width: min(500px, 100%);
  max-height: calc(100dvh - 72px);
  border: 1px solid rgba(215, 165, 109, 0.52);
  border-radius: 8px;
  padding: clamp(24px, 2.5vw, 36px);
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(10, 9, 13, 0.96), rgba(0, 0, 0, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.04),
    0 30px 90px rgba(0, 0, 0, 0.62),
    0 0 30px rgba(154, 107, 255, 0.1);
  animation: nhLoginPanelIn 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) 0.18s both;
}

.naheryu-login-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 94px;
  height: 94px;
  transform: translate(-50%, -52%);
  background: var(--nh-login-sigil-asset) center / contain no-repeat;
  /* V28.184 移除旋轉時的 drop-shadow 濾鏡（旋轉+濾鏡每幀重算陰影，經典卡頓源）。
     光暈改由靜態的父層 box-shadow 提供，不影響觀感。 */
  will-change: transform;
  animation: nhCleanInnerTurn 66s linear infinite;
}

.naheryu-login-panel h2 {
  margin: 16px 0 4px;
  color: var(--gold-soft);
  text-align: center;
  font-size: 28px;
  letter-spacing: 0.08em;
}

.naheryu-login-subtitle {
  margin: 0 0 18px;
  text-align: center;
  color: rgba(232, 220, 200, 0.6);
  font-size: 13px;
}

.naheryu-auth-field {
  display: grid;
  gap: 8px;
  margin-bottom: 13px;
}

.naheryu-auth-field label {
  color: rgba(245, 217, 155, 0.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.naheryu-auth-field input {
  height: 46px;
  border: 1px solid rgba(215, 165, 109, 0.34);
  border-radius: 6px;
  padding: 0 14px;
  background: rgba(0, 0, 0, 0.54);
  color: var(--text-main);
  outline: none;
}

.naheryu-auth-field input:focus {
  border-color: rgba(154, 107, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(154, 107, 255, 0.12), 0 0 20px rgba(154, 107, 255, 0.12);
}

.naheryu-auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 3px 0 15px;
  color: rgba(232, 220, 200, 0.72);
  font-size: 12px;
}

.naheryu-auth-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.naheryu-auth-primary {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(190, 147, 255, 0.72) !important;
  border-radius: 6px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(90deg, rgba(89, 45, 178, 0.94), rgba(48, 25, 94, 0.96)) !important;
  color: #fff3d0 !important;
  font-weight: 900;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.naheryu-auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  color: rgba(232, 220, 200, 0.52);
  font-size: 12px;
}

.naheryu-auth-divider::before,
.naheryu-auth-divider::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 165, 109, 0.36), transparent);
}

.naheryu-auth-socials {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.naheryu-auth-socials button {
  height: 44px;
  border: 1px solid rgba(154, 107, 255, 0.32) !important;
  border-radius: 7px !important;
  background: rgba(17, 11, 28, 0.58) !important;
  color: var(--purple-soft) !important;
  font-weight: 900;
}

.naheryu-auth-switch {
  margin: 14px 0 0;
  text-align: center;
  color: rgba(232, 220, 200, 0.62);
  font-size: 13px;
}

.naheryu-auth-switch button,
.naheryu-auth-link {
  border: 0 !important;
  background: transparent !important;
  color: var(--purple-soft) !important;
  padding: 0 !important;
  cursor: pointer;
}

.naheryu-auth-error {
  min-height: 14px;
  margin: 7px 0 0;
  color: #ffb2a8;
  font-size: 12px;
  text-align: center;
}

body.naheryu-auth-locked .app-shell {
  /* V28.191 舊版在整個 app 上掛 blur(8px) 濾鏡 —— 登入陣每一幀都要跟這層大模糊
     合成，是「不夠順」的最後元兇。登入門本身近乎全不透明、背後根本看不見，
     直接隱藏：模糊成本歸零，魔法陣獨占 GPU。 */
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 900px) {
  .naheryu-login-gate {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .naheryu-login-orbit {
    min-height: 36vh;
    overflow: visible;
  }

  .naheryu-login-brand {
    top: 52%;
    padding: 16px 10px;
  }

  .naheryu-login-panel-wrap {
    align-items: start;
    overflow: visible;
  }

  .naheryu-login-lang {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 4;
  }

  .naheryu-login-sigil-stack,
  .naheryu-login-orbit::before,
  .naheryu-login-orbit::after {
    top: 52%;
  }

  .naheryu-login-sigil-stack {
    width: min(88vw, 380px, 40vh);
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  .naheryu-login-gate {
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.82fr);
  }

  .naheryu-login-sigil-stack {
    width: min(60vw, 640px, 80vh);
  }

  .naheryu-login-brand {
    top: 45%;
  }

  .naheryu-login-panel-wrap {
    padding: 14px 22px;
  }

  .naheryu-login-panel {
    max-height: calc(100dvh - 36px);
    padding: 20px 28px;
  }

  .naheryu-login-panel::before {
    width: 70px;
    height: 70px;
  }

  .naheryu-login-panel h2 {
    margin-top: 10px;
    font-size: 24px;
  }

  .naheryu-login-subtitle { margin-bottom: 12px; }
  .naheryu-auth-field { gap: 5px; margin-bottom: 9px; }
  .naheryu-auth-field input { height: 42px; }
  .naheryu-auth-row { margin: 2px 0 10px; }
  .naheryu-auth-primary { height: 44px; }
  .naheryu-auth-divider { margin: 11px 0 8px; }
  .naheryu-auth-socials button { height: 40px; }
  .naheryu-auth-switch { margin-top: 9px; }
  .naheryu-auth-error { min-height: 10px; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .naheryu-login-gate,
  .naheryu-login-brand,
  .naheryu-login-panel,
  .naheryu-login-sigil-glow,
  .naheryu-login-sigil-layer,
  .naheryu-login-panel::before { animation: none !important; }
}

/* ==========================================================================
   V28.24 Consistency Pass: clean sigils, tavern isolation, dialogue oracle
   ========================================================================== */

:root {
  --nh-dialogue-sigil-png: url("./assets/naheryu-dialogue-sigil.png");
}

.nh-tab-sigil,
.nh-rune-btn::before,
.quick-cmd::before,
.dock-execute .ico,
.inspector-section-head .ico {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.18em;
  background: var(--nh-dialogue-sigil-png) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(169, 111, 255, 0.44));
}

.nh-rune-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.inspector-section-head .ico {
  font-size: 0 !important;
  margin-right: 6px;
}

.app-shell.shell-module-tavern #shell-dock {
  display: none !important;
}

.app-shell.shell-module-tavern #result-area [data-view="cosmos"],
.app-shell.shell-module-tavern #result-area [data-view="dialogue"] {
  display: none !important;
}

.app-shell.shell-module-tavern #result-area [data-view="tavernhelper"] {
  display: flex !important;
}

.app-shell.shell-module-tavern #naheryu-tabbar {
  display: none !important;
}

.app-shell.shell-module-dialogue #slot-main-stage {
  padding-bottom: 110px;
}

.app-shell.shell-module-dialogue {
  grid-template-areas:
    "topbar  topbar  topbar"
    "rail    main    inspector"
    "rail    dock    inspector" !important;
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--bottomdock-h) !important;
}

.app-shell.shell-module-dialogue #shell-dock {
  display: flex !important;
}

.app-shell:not(.shell-module-dialogue) #shell-dock {
  display: none !important;
}

.naheryu-dialogue-oracle {
  --dialogue-target-panel-w: 300px;
  position: relative;
  overflow: hidden;
  margin: 0 0 14px;
  border: 1px solid rgba(215, 165, 109, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 9% 18%, rgba(154, 107, 255, 0.2), transparent 34%),
    radial-gradient(circle at 86% 6%, rgba(78, 196, 217, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(14, 10, 18, 0.9), rgba(4, 3, 6, 0.82));
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.035),
    0 0 28px rgba(154, 107, 255, 0.08);
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-oracle {
  flex: 0 0 auto !important;
  min-height: clamp(288px, 34vh, 370px) !important;
  overflow: visible !important;
  margin-bottom: 18px !important;
}

.naheryu-dialogue-oracle::before {
  content: "";
  position: absolute;
  inset: -34% auto auto 58%;
  width: min(36vw, 520px);
  aspect-ratio: 1;
  background: var(--nh-ritual-sigil-asset) center / contain no-repeat;
  opacity: 0.12;
  filter: drop-shadow(0 0 28px rgba(154, 107, 255, 0.22));
  animation: nhCleanOuterTurn 88s linear infinite;
  pointer-events: none;
}

.naheryu-dialogue-oracle-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(215, 165, 109, 0.24);
  background: rgba(0, 0, 0, 0.32);
}

.naheryu-dialogue-mode-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.naheryu-dialogue-mode-tabs span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(215, 165, 109, 0.28);
  border-radius: 6px;
  color: rgba(232, 220, 200, 0.72);
  background: rgba(5, 4, 7, 0.66);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.naheryu-dialogue-mode-tabs span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--nh-mini-sigil-asset) center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(154, 107, 255, 0.4));
}

.naheryu-dialogue-mode-tabs span.active {
  color: var(--gold-soft);
  border-color: rgba(154, 107, 255, 0.64);
  background:
    radial-gradient(circle at 50% 0%, rgba(154, 107, 255, 0.26), transparent 62%),
    rgba(37, 18, 63, 0.72);
  box-shadow: inset 0 -1px 0 rgba(190, 147, 255, 0.58), 0 0 18px rgba(154, 107, 255, 0.12);
}

.naheryu-dialogue-panel-toggle,
.naheryu-dialogue-oracle-link {
  border: 1px solid rgba(215, 165, 109, 0.34);
  border-radius: 6px;
  padding: 7px 11px;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.46);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.naheryu-dialogue-oracle-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, var(--dialogue-target-panel-w)) 1fr;
  min-height: 246px;
}

.naheryu-dialogue-oracle-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-template-areas:
    "avatar name"
    "stats stats"
    "summary summary"
    "link link";
  gap: 10px 12px;
  padding: 14px;
  border-right: 1px solid rgba(215, 165, 109, 0.24);
  background: linear-gradient(180deg, rgba(20, 12, 28, 0.72), rgba(0, 0, 0, 0.22));
}

.naheryu-dialogue-oracle-resize {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}

.naheryu-dialogue-oracle-avatar {
  grid-area: avatar;
  width: 92px;
  height: 112px;
  border: 1px solid rgba(154, 107, 255, 0.54);
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(154, 107, 255, 0.26), transparent 54%),
    rgba(0, 0, 0, 0.54);
  box-shadow: 0 0 20px rgba(154, 107, 255, 0.12);
  padding: 0;
}

.naheryu-dialogue-oracle-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%);
}

.naheryu-dialogue-oracle-avatar.naheryu-chat-avatar-sigil {
  background: var(--nh-dialogue-sigil-png) center / 78% no-repeat, rgba(0, 0, 0, 0.54);
}

.oracle-name {
  grid-area: name;
  min-width: 0;
}

.oracle-name small,
.naheryu-dialogue-mode-tabs,
.naheryu-dialogue-target-chip small {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.oracle-name small {
  color: rgba(214, 182, 255, 0.86);
  font-weight: 900;
  font-size: 10px;
}

.oracle-name h3 {
  margin: 5px 0 4px;
  color: var(--gold-soft);
  font-size: 22px;
  line-height: 1.16;
}

.oracle-name p {
  margin: 0;
  color: rgba(232, 220, 200, 0.62);
  font-size: 12px;
  line-height: 1.55;
}

.naheryu-dialogue-oracle-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.naheryu-dialogue-oracle-stat {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(215, 165, 109, 0.2);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.34);
  font-size: 11px;
}

.naheryu-dialogue-oracle-stat b {
  color: rgba(232, 220, 200, 0.52);
}

.naheryu-dialogue-oracle-stat strong {
  color: var(--gold-soft);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.naheryu-dialogue-oracle-summary {
  grid-area: summary;
  margin: 0;
  color: rgba(232, 220, 200, 0.68);
  font-size: 12px;
  line-height: 1.7;
}

.naheryu-dialogue-oracle-link {
  grid-area: link;
  justify-self: start;
}

.naheryu-dialogue-oracle-stage {
  min-width: 0;
  display: flex;
  align-items: stretch;
  padding: 14px;
}

.naheryu-dialogue-target-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(116px, 1fr));
  gap: 9px;
  width: 100%;
}

.naheryu-dialogue-target-chip {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(215, 165, 109, 0.24);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.36);
  color: rgba(232, 220, 200, 0.76);
  text-align: left;
  cursor: pointer;
}

.naheryu-dialogue-target-chip:hover,
.naheryu-dialogue-target-chip.active {
  border-color: rgba(154, 107, 255, 0.64);
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.12);
}

.naheryu-dialogue-target-chip .chip-avatar {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(154, 107, 255, 0.42);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--nh-mini-sigil-asset) center / 80% no-repeat, rgba(13, 8, 20, 0.8);
}

.naheryu-dialogue-target-chip .chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.naheryu-dialogue-target-chip b,
.naheryu-dialogue-target-chip small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.naheryu-dialogue-target-chip b {
  color: var(--gold-soft);
  font-size: 12px;
}

.naheryu-dialogue-target-chip small {
  margin-top: 2px;
  color: rgba(78, 196, 217, 0.78);
  font-size: 10px;
}

.naheryu-dialogue-target-empty {
  display: grid;
  place-items: center;
  min-height: 80px;
  border: 1px dashed rgba(215, 165, 109, 0.22);
  border-radius: 7px;
  color: rgba(232, 220, 200, 0.48);
  font-size: 12px;
}

.naheryu-dialogue-oracle.is-collapsed .naheryu-dialogue-oracle-body {
  grid-template-columns: 1fr;
}

.naheryu-dialogue-oracle.is-collapsed .naheryu-dialogue-oracle-card {
  display: none;
}

#naheryu-tabbar button {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}

.dock .input-row {
  position: relative;
}

.dock .input-row::before {
  content: "";
  position: absolute;
  left: -66px;
  bottom: -18px;
  width: 92px;
  height: 92px;
  background: var(--nh-dialogue-sigil-png) center / contain no-repeat;
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(154, 107, 255, 0.46));
  animation: nhCleanInnerTurn 52s linear infinite;
  pointer-events: none;
}

.dock-execute .ico {
  width: 28px;
  height: 28px;
}

.quick-cmd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quick-cmd::before {
  width: 13px;
  height: 13px;
  opacity: 0.88;
}

button.worldbook-shell-cover,
.worldbook-shell-cover,
.worldbook-shell-cover.hero,
.worldbook-shell-cover.mini {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(154, 107, 255, 0.1), transparent 58%),
    rgba(0, 0, 0, 0.46) !important;
}

.worldbook-shell-cover.hero {
  width: clamp(142px, 12vw, 182px) !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 3 / 4 !important;
  padding: 8px !important;
}

.worldbook-shell-cover.mini {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 5px !important;
}

.worldbook-shell-cover img,
.worldbook-shell-cover.hero img,
.worldbook-shell-cover.mini img,
.worldbook-shell-cover picture,
.worldbook-shell-cover canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 4px !important;
  clip-path: none !important;
  transform: none !important;
}

.worldbook-shell-cover span:not(.sr-only) {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 1180px) {
  .naheryu-dialogue-oracle-body {
    grid-template-columns: 1fr;
  }

  .naheryu-dialogue-oracle-card {
    border-right: 0;
    border-bottom: 1px solid rgba(215, 165, 109, 0.24);
  }

  .naheryu-dialogue-oracle-resize {
    display: none;
  }

  .naheryu-dialogue-target-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .naheryu-dialogue-mode-tabs span {
    flex: 1 1 140px;
  }

  .naheryu-dialogue-oracle-card {
    grid-template-columns: 78px 1fr;
  }

  .naheryu-dialogue-oracle-avatar {
    width: 78px;
    height: 96px;
  }

  .naheryu-dialogue-target-strip {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V28.25 Dock sigil cleanup, compact dialogue oracle, proportional art frames
   ========================================================================== */

.app-shell.shell-module-dialogue #slot-main-stage {
  padding-bottom: 92px !important;
}

.dock::before {
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  margin: 0 10px 0 0 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(154, 107, 255, 0.28), transparent 64%),
    var(--nh-dialogue-sigil-png) center / 94% no-repeat !important;
  opacity: 0.98 !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 0 18px rgba(154, 107, 255, 0.56)) saturate(1.08) !important;
  animation: nhCleanInnerTurn 58s linear infinite !important;
}

.dock .input-row::before,
.dock .input-row::after {
  content: none !important;
  display: none !important;
}

.dock-execute {
  flex: 0 0 136px !important;
  width: 136px !important;
  min-width: 136px !important;
  border-radius: 999px !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(154, 107, 255, 0.46), transparent 58%),
    linear-gradient(180deg, rgba(36, 16, 67, 0.92), rgba(5, 3, 9, 0.96)) !important;
}

.dock-execute::before,
.dock-execute::after,
.dock-execute .ico::before,
.dock-execute .ico::after {
  content: none !important;
  display: none !important;
}

.dock-execute .ico {
  position: relative !important;
  width: 46px !important;
  height: 46px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 220, 255, 0.38), transparent 34%),
    var(--nh-dialogue-sigil-png) center / contain no-repeat !important;
  filter: drop-shadow(0 0 16px rgba(169, 111, 255, 0.62)) !important;
  animation: nhCleanInnerTurn 42s linear infinite !important;
}

.dock-execute span:not(.ico) {
  position: relative;
  z-index: 2;
}

.dock-input .input-row {
  min-height: 64px !important;
}

.dock-input .quick-cmds {
  max-height: 28px;
  overflow: hidden;
}

.naheryu-dialogue-oracle {
  --dialogue-target-panel-w: min(250px, 28vw);
  margin-bottom: 12px !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-oracle {
  min-height: 0 !important;
  max-height: 242px !important;
  overflow: hidden !important;
}

.naheryu-dialogue-oracle::before {
  inset: -44% auto auto 64% !important;
  width: min(30vw, 380px) !important;
  opacity: 0.08 !important;
}

.naheryu-dialogue-oracle-top {
  padding: 8px 12px !important;
  gap: 8px !important;
}

.naheryu-dialogue-mode-tabs {
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
}

.naheryu-dialogue-mode-tabs span {
  min-height: 28px !important;
  padding: 5px 10px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.naheryu-dialogue-panel-toggle {
  flex: 0 0 auto !important;
  min-width: 84px !important;
}

.naheryu-dialogue-oracle-body {
  grid-template-columns: minmax(210px, var(--dialogue-target-panel-w)) minmax(0, 1fr) !important;
  min-height: 156px !important;
}

.naheryu-dialogue-oracle-card {
  grid-template-columns: 70px 1fr !important;
  gap: 8px 10px !important;
  padding: 10px !important;
}

.naheryu-dialogue-oracle-resize {
  width: 14px !important;
  right: -7px !important;
}

.naheryu-dialogue-oracle-avatar {
  width: 70px !important;
  height: 78px !important;
}

.oracle-name h3 {
  font-size: 18px !important;
  margin: 3px 0 !important;
}

.oracle-name p,
.naheryu-dialogue-oracle-summary {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.naheryu-dialogue-oracle-stats {
  gap: 5px !important;
}

.naheryu-dialogue-oracle-stat {
  padding: 4px 7px !important;
}

.naheryu-dialogue-oracle-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.naheryu-dialogue-oracle-link {
  padding: 5px 9px !important;
}

.naheryu-dialogue-oracle-stage {
  padding: 10px 12px !important;
  overflow: hidden !important;
}

.naheryu-dialogue-target-strip {
  grid-template-columns: repeat(5, minmax(132px, 1fr)) !important;
  align-items: stretch !important;
  max-height: 142px !important;
  overflow: hidden !important;
}

.naheryu-dialogue-target-chip {
  min-height: 82px !important;
}

.naheryu-dialogue-oracle.is-collapsed {
  max-height: 172px !important;
}

.naheryu-dialogue-oracle.is-collapsed .naheryu-dialogue-oracle-body {
  display: block !important;
  min-height: 104px !important;
}

.naheryu-dialogue-oracle.is-collapsed .naheryu-dialogue-oracle-stage {
  min-height: 104px !important;
}

.naheryu-dialogue-oracle.is-collapsed .naheryu-dialogue-target-strip {
  grid-template-columns: repeat(5, minmax(136px, 1fr)) !important;
  max-height: 94px !important;
}

button.worldbook-shell-cover,
.worldbook-shell-cover,
.worldbook-shell-cover.hero,
.worldbook-shell-cover.mini,
.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 7px !important;
}

.worldbook-shell-cover:has(> img.nh-shell-avatar-img),
.worldbook-entry-row > span:has(> img.nh-shell-avatar-img),
.worldbook-entry-chip > span:has(> img.nh-shell-avatar-img),
.worldbook-entry-avatar:has(> img.nh-shell-avatar-img) {
  background:
    radial-gradient(circle at 50% 50%, rgba(154, 107, 255, 0.1), transparent 62%),
    rgba(0, 0, 0, 0.62) !important;
}

.worldbook-shell-cover.hero {
  width: clamp(168px, 13vw, 220px) !important;
  min-width: clamp(168px, 13vw, 220px) !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
  max-height: 300px !important;
}

.worldbook-shell-cover.mini {
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  aspect-ratio: 1 / 1 !important;
}

.worldbook-shell-cover img.nh-shell-avatar-img,
.worldbook-entry-row img.nh-shell-avatar-img,
.worldbook-entry-chip img.nh-shell-avatar-img,
.worldbook-entry-avatar img.nh-shell-avatar-img {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  clip-path: none !important;
  transform: none !important;
  border-radius: 4px !important;
}

.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 1280px) {
  .app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-oracle {
    max-height: 288px !important;
  }

  .naheryu-dialogue-oracle-body {
    grid-template-columns: 1fr !important;
  }

  .naheryu-dialogue-oracle-card {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(215, 165, 109, 0.24) !important;
  }

  .naheryu-dialogue-target-strip {
    grid-template-columns: repeat(3, minmax(136px, 1fr)) !important;
  }
}

/* V28.25b: hard guard against old dock sigil/emoji layers and image cropping. */
#shell-dock::before {
  content: "" !important;
  flex: 0 0 112px !important;
  align-self: stretch !important;
  width: 112px !important;
  min-width: 112px !important;
  margin: 0 10px 0 0 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(154, 107, 255, 0.28), transparent 64%),
    var(--nh-dialogue-sigil-png) center / 94% no-repeat !important;
  opacity: 0.98 !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 0 18px rgba(154, 107, 255, 0.56)) saturate(1.08) !important;
}

#shell-dock .input-row::before,
#shell-dock .input-row::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#dock-execute {
  background:
    radial-gradient(circle at 50% 50%, rgba(154, 107, 255, 0.46), transparent 58%),
    linear-gradient(180deg, rgba(36, 16, 67, 0.92), rgba(5, 3, 9, 0.96)) !important;
}

#dock-execute::before,
#dock-execute::after,
#dock-execute .ico::before,
#dock-execute .ico::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

#dock-execute .ico {
  color: transparent !important;
  font-size: 0 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 220, 255, 0.38), transparent 34%),
    var(--nh-dialogue-sigil-png) center / contain no-repeat !important;
}

.worldbook-shell-cover > img,
.worldbook-entry-row > span > img,
.worldbook-entry-chip > span > img,
.worldbook-entry-avatar > img,
.worldbook-shell-cover img.nh-shell-avatar-img,
.worldbook-entry-row img.nh-shell-avatar-img,
.worldbook-entry-chip img.nh-shell-avatar-img,
.worldbook-entry-avatar img.nh-shell-avatar-img {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  clip-path: none !important;
  transform: none !important;
}

.worldbook-shell-cover:has(> img),
.worldbook-entry-row > span:has(> img),
.worldbook-entry-chip > span:has(> img),
.worldbook-entry-avatar:has(> img) {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

/* V28.26: unified empty portraits. Replace diamond/star fallbacks with the clean sigil asset. */
.dashboard-character-avatar,
.charlib-shell-portrait,
.charlib-detail-portrait,
.codex-card-arcane-avatar,
.worldbook-shell-cover,
.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  isolation: isolate !important;
}

.dashboard-character-avatar,
.charlib-shell-portrait,
.charlib-detail-portrait {
  background:
    radial-gradient(circle at 50% 45%, rgba(154, 107, 255, 0.2), transparent 58%),
    radial-gradient(circle at 50% 92%, rgba(78, 196, 217, 0.07), transparent 46%),
    linear-gradient(180deg, rgba(13, 8, 20, 0.86), rgba(2, 1, 4, 0.96)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(245, 217, 155, 0.18),
    inset 0 0 32px rgba(154, 107, 255, 0.1),
    0 0 18px rgba(0, 0, 0, 0.34) !important;
}

.nh-shell-default-sigil,
.dashboard-character-avatar > span,
.charlib-shell-portrait > span,
.charlib-detail-portrait > span,
.codex-card-arcane-avatar > span,
.worldbook-shell-cover > span,
.worldbook-entry-row > span > span,
.worldbook-entry-chip > span > span,
.worldbook-entry-avatar > span {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: clamp(42px, 58%, 104px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 86% !important;
  max-height: 86% !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 220, 255, 0.5), transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(154, 107, 255, 0.28), transparent 58%),
    var(--nh-dialogue-sigil-png) center / contain no-repeat !important;
  filter:
    drop-shadow(0 0 12px rgba(154, 107, 255, 0.58))
    drop-shadow(0 0 4px rgba(245, 217, 155, 0.24)) !important;
  animation: nhCleanInnerTurn 52s linear infinite !important;
  pointer-events: none !important;
}

.nh-shell-default-sigil::after,
.dashboard-character-avatar > span::after,
.charlib-shell-portrait > span::after,
.charlib-detail-portrait > span::after,
.codex-card-arcane-avatar > span::after,
.worldbook-shell-cover > span::after,
.worldbook-entry-row > span > span::after,
.worldbook-entry-chip > span > span::after,
.worldbook-entry-avatar > span::after {
  content: "" !important;
  position: absolute !important;
  inset: 14% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, rgba(255, 240, 210, 0.74) 0 1px, transparent 2px),
    conic-gradient(from 20deg, transparent 0 16%, rgba(231, 177, 100, 0.42) 16% 17%, transparent 17% 50%, rgba(78, 196, 217, 0.28) 50% 51%, transparent 51% 76%, rgba(154, 107, 255, 0.36) 76% 77%, transparent 77%),
    radial-gradient(circle, transparent 0 46%, rgba(245, 217, 155, 0.28) 47% 49%, transparent 50%);
  mix-blend-mode: screen !important;
  opacity: 0.76 !important;
  animation: nhCleanInnerTurn 34s linear infinite reverse !important;
  pointer-events: none !important;
}

.dashboard-character-avatar > .nh-shell-default-sigil {
  width: clamp(44px, 62%, 76px) !important;
}

.charlib-shell-portrait > .nh-shell-default-sigil {
  width: clamp(96px, 52%, 148px) !important;
  max-width: 72% !important;
  max-height: 72% !important;
}

.charlib-detail-portrait > .nh-shell-default-sigil {
  width: clamp(74px, 68%, 124px) !important;
}

.worldbook-shell-cover.hero > .nh-shell-default-sigil {
  width: clamp(82px, 64%, 132px) !important;
}

.dashboard-character-avatar > img.nh-shell-avatar-img,
.charlib-shell-portrait > img.nh-shell-avatar-img,
.charlib-detail-portrait > img.nh-shell-avatar-img {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 5px !important;
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.16) !important;
}

.dashboard-character-avatar::after,
.charlib-shell-portrait::after,
.charlib-detail-portrait::after {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 5px !important;
  background:
    linear-gradient(90deg, rgba(245, 217, 155, 0.42), transparent 34%) left top / 48px 1px no-repeat,
    linear-gradient(180deg, rgba(245, 217, 155, 0.42), transparent 34%) left top / 1px 48px no-repeat,
    linear-gradient(270deg, rgba(245, 217, 155, 0.36), transparent 34%) right bottom / 48px 1px no-repeat,
    linear-gradient(0deg, rgba(245, 217, 155, 0.36), transparent 34%) right bottom / 1px 48px no-repeat;
  opacity: 0.88 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.dashboard-dialogue-item .dashboard-activity-icon,
.dashboard-activity-item .dashboard-activity-icon {
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 220, 255, 0.36), transparent 32%),
    var(--nh-dialogue-sigil-png) center / 82% no-repeat !important;
  filter: drop-shadow(0 0 9px rgba(154, 107, 255, 0.48)) !important;
}

/* V28.27: dialogue workbench ergonomics, source panel, stronger dock controls. */
.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-oracle {
  max-height: 236px !important;
  margin-bottom: 14px !important;
}

.naheryu-dialogue-oracle-top {
  min-height: 44px !important;
  padding: 8px 12px !important;
}

.naheryu-dialogue-mode-tabs {
  overflow: visible !important;
  min-width: 0 !important;
}

.naheryu-dialogue-mode-tabs span:not(.active) {
  display: none !important;
}

.naheryu-dialogue-oracle.is-collapsed {
  min-height: 0 !important;
  max-height: 48px !important;
  overflow: hidden !important;
}

.naheryu-dialogue-oracle.is-collapsed .naheryu-dialogue-oracle-body {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
}

.naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-oracle-body {
  grid-template-columns: minmax(190px, var(--dialogue-target-panel-w)) minmax(0, 1fr) !important;
  min-height: 118px !important;
  max-height: 176px !important;
}

.naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-oracle-card {
  min-height: 118px !important;
  padding: 12px !important;
}

.naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-oracle-avatar {
  width: 74px !important;
  height: 74px !important;
}

.naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-oracle-summary {
  max-height: 42px !important;
  overflow: hidden !important;
}

.naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-target-strip {
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)) !important;
  max-height: 126px !important;
  overflow: auto !important;
  padding: 12px !important;
}

.naheryu-dialogue-target-chip {
  min-height: 66px !important;
  cursor: pointer !important;
}

.app-shell.shell-module-dialogue #dialogue-messages:has(.naheryu-chat-source-panel) {
  display: grid !important;
  grid-template-columns: minmax(182px, 224px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
}

.app-shell.shell-module-dialogue #dialogue-messages.source-collapsed:has(.naheryu-chat-source-panel) {
  grid-template-columns: 66px minmax(0, 1fr) !important;
}

.naheryu-chat-thread {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.naheryu-chat-source-panel {
  position: sticky !important;
  top: 8px !important;
  min-width: 0 !important;
  border: 1px solid rgba(215, 165, 109, 0.28) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(154, 107, 255, 0.2), transparent 44%),
    linear-gradient(180deg, rgba(18, 10, 28, 0.84), rgba(4, 3, 5, 0.92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(154, 107, 255, 0.08),
    0 0 18px rgba(0, 0, 0, 0.3) !important;
}

.naheryu-chat-source-panel.is-collapsed {
  width: 58px !important;
  min-width: 58px !important;
  padding: 8px !important;
  display: grid !important;
  place-items: start center !important;
}

.naheryu-source-avatar {
  position: relative !important;
  width: 92px !important;
  height: 92px !important;
  border: 1px solid rgba(154, 107, 255, 0.48) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(154, 107, 255, 0.3), transparent 58%),
    rgba(0, 0, 0, 0.48) !important;
  box-shadow: 0 0 18px rgba(154, 107, 255, 0.22) !important;
  cursor: pointer !important;
}

.naheryu-source-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%) !important;
}

.naheryu-chat-source-panel.is-collapsed .naheryu-source-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
}

.naheryu-chat-source-panel.is-collapsed .source-expanded {
  display: none !important;
}

.source-expanded small {
  display: block !important;
  margin-top: 10px !important;
  color: var(--purple-soft) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.source-expanded h3 {
  margin: 4px 0 0 !important;
  color: var(--gold-soft) !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.source-role,
.source-note {
  margin: 4px 0 0 !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.source-meter {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 10px 0 !important;
  padding-bottom: 7px !important;
  border-bottom: 1px solid rgba(215, 165, 109, 0.18) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
}

.source-meter b {
  color: var(--purple-soft) !important;
}

.source-expanded dl {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 5px 8px !important;
  margin: 0 !important;
  font-size: 11px !important;
}

.source-expanded dt {
  color: rgba(245, 217, 155, 0.58) !important;
}

.source-expanded dd {
  margin: 0 !important;
  min-width: 0 !important;
  color: var(--text-main) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.source-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin: 10px 0 0 !important;
}

.source-tags span {
  border: 1px solid rgba(154, 107, 255, 0.3) !important;
  border-radius: 999px !important;
  padding: 3px 7px !important;
  color: var(--purple-soft) !important;
  background: rgba(154, 107, 255, 0.1) !important;
  font-size: 10px !important;
}

.source-toggle-btn {
  width: 100% !important;
  margin-top: 10px !important;
  border: 1px solid rgba(215, 165, 109, 0.34) !important;
  border-radius: 6px !important;
  padding: 7px 8px !important;
  color: var(--gold-soft) !important;
  background: rgba(0, 0, 0, 0.24) !important;
  cursor: pointer !important;
}

#dialogue-messages.source-collapsed .naheryu-chat-avatar {
  width: 34px !important;
  height: 34px !important;
  flex-basis: 34px !important;
  min-width: 34px !important;
}

#dialogue-messages.source-collapsed .naheryu-chat-stack {
  max-width: min(780px, 84%) !important;
}

.dock-input button.quick-cmd,
#dock-attach-btn,
.dock-context-edit {
  font: inherit !important;
  cursor: pointer !important;
}

.dock-input button.quick-cmd {
  border: 1px solid rgba(215, 165, 109, 0.32) !important;
  border-radius: 6px !important;
  padding: 5px 9px !important;
  color: var(--gold-soft) !important;
  background:
    radial-gradient(circle at 16% 50%, rgba(154, 107, 255, 0.22), transparent 42%),
    rgba(0, 0, 0, 0.34) !important;
}

.dock-input button.quick-cmd:hover,
#dock-attach-btn:hover,
.dock-context-edit:hover {
  color: #fff4ca !important;
  border-color: rgba(154, 107, 255, 0.55) !important;
  box-shadow: 0 0 14px rgba(154, 107, 255, 0.18) !important;
}

.dock-context-edit {
  border: 0 !important;
  padding: 0 !important;
  color: var(--gold-soft) !important;
  background: transparent !important;
  text-align: right !important;
}

#dock-execute {
  min-width: 150px !important;
  border-color: rgba(154, 107, 255, 0.72) !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(245, 220, 255, 0.28), transparent 32%),
    radial-gradient(circle at 50% 50%, rgba(154, 107, 255, 0.58), transparent 58%),
    linear-gradient(180deg, rgba(48, 19, 86, 0.94), rgba(7, 4, 12, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(245, 217, 155, 0.16),
    0 0 26px rgba(154, 107, 255, 0.32) !important;
}

#dock-execute.is-sending {
  animation: nhExecutePulse 0.68s ease-in-out infinite alternate !important;
}

@keyframes nhExecutePulse {
  from { filter: saturate(1) brightness(1); }
  to { filter: saturate(1.28) brightness(1.18); }
}

button.worldbook-shell-cover,
.worldbook-shell-cover,
.worldbook-shell-cover.hero,
.worldbook-shell-cover.mini,
.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.worldbook-shell-cover.hero {
  aspect-ratio: 3 / 4 !important;
  min-height: 0 !important;
}

.worldbook-shell-cover img,
.worldbook-entry-row > span > img,
.worldbook-entry-chip > span > img,
.worldbook-entry-avatar > img,
.worldbook-shell-cover img.nh-shell-avatar-img,
.worldbook-entry-row img.nh-shell-avatar-img,
.worldbook-entry-chip img.nh-shell-avatar-img,
.worldbook-entry-avatar img.nh-shell-avatar-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  clip-path: none !important;
}

@media (max-width: 1280px) {
  .app-shell.shell-module-dialogue #dialogue-messages:has(.naheryu-chat-source-panel) {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .app-shell.shell-module-dialogue #dialogue-messages .naheryu-chat-source-panel {
    width: 58px !important;
    min-width: 58px !important;
    padding: 8px !important;
  }

  .app-shell.shell-module-dialogue #dialogue-messages .naheryu-chat-source-panel .source-expanded {
    display: none !important;
  }
}

/* V28.27b: keep the source panel outside the chat viewport. */
.naheryu-dialogue-chat-layout {
  display: grid !important;
  grid-template-columns: minmax(64px, 252px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
}

.naheryu-dialogue-chat-layout:has(.naheryu-dialogue-side-source.is-collapsed) {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}

.naheryu-dialogue-chat-layout #dialogue-chat-box {
  min-width: 0 !important;
}

.naheryu-dialogue-side-source {
  min-width: 0 !important;
  align-self: stretch !important;
}

.naheryu-dialogue-side-source .naheryu-chat-source-panel {
  height: 100% !important;
  min-height: 260px !important;
}

.naheryu-dialogue-side-source.is-collapsed .naheryu-chat-source-panel {
  width: 64px !important;
  min-width: 64px !important;
}

.app-shell.shell-module-dialogue #dialogue-messages,
.app-shell.shell-module-dialogue #dialogue-messages:has(.naheryu-chat-source-panel) {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  gap: 16px !important;
}

.app-shell.shell-module-dialogue #dialogue-messages.source-collapsed,
.app-shell.shell-module-dialogue #dialogue-messages.source-collapsed:has(.naheryu-chat-source-panel) {
  grid-template-columns: none !important;
}

.naheryu-chat-row-assistant {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

.naheryu-chat-row-user {
  flex-direction: row !important;
  justify-content: flex-end !important;
}

.naheryu-chat-row-user .naheryu-speaker-line {
  text-align: right !important;
  margin-right: 4px !important;
}

.naheryu-chat-row-user .naheryu-chat-avatar {
  order: 2 !important;
}

.naheryu-chat-row-user .naheryu-chat-stack {
  order: 1 !important;
}

@media (max-width: 1500px) {
  .naheryu-dialogue-chat-layout {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  .naheryu-dialogue-side-source .source-expanded {
    display: none !important;
  }

  .naheryu-dialogue-side-source .naheryu-chat-source-panel {
    width: 64px !important;
    min-width: 64px !important;
    padding: 8px !important;
    display: grid !important;
    place-items: start center !important;
  }

  .naheryu-dialogue-side-source .naheryu-source-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
  }
}

/* V28.28a: refined dialogue source ledger and worldbook proportional hardening. */
.naheryu-dialogue-chat-layout {
  grid-template-columns: minmax(236px, 280px) minmax(0, 1fr) !important;
}

.naheryu-dialogue-chat-layout:has(.naheryu-dialogue-side-source.is-collapsed) {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}

.naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-chat-source-panel {
  width: 100% !important;
  min-width: 0 !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 12px !important;
}

.naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded {
  display: block !important;
}

.naheryu-dialogue-source-v2 {
  position: relative;
  overflow: hidden !important;
  border-color: rgba(231, 177, 100, 0.4) !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(154, 107, 255, 0.22), transparent 42%),
    radial-gradient(circle at 82% 86%, rgba(78, 196, 217, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(25, 15, 39, 0.9), rgba(4, 3, 6, 0.92)),
    var(--arcane-texture) center / 720px 720px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 238, 207, 0.055),
    inset 0 0 38px rgba(154, 107, 255, 0.12),
    0 0 26px rgba(154, 107, 255, 0.1) !important;
}

.naheryu-dialogue-source-v2::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 7px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245, 217, 155, 0.62), transparent 38%) left top / 58px 1px no-repeat,
    linear-gradient(180deg, rgba(245, 217, 155, 0.62), transparent 38%) left top / 1px 58px no-repeat,
    linear-gradient(270deg, rgba(245, 217, 155, 0.62), transparent 38%) right bottom / 58px 1px no-repeat,
    linear-gradient(0deg, rgba(245, 217, 155, 0.62), transparent 38%) right bottom / 1px 58px no-repeat;
  opacity: 0.78;
}

.naheryu-dialogue-source-v2 .naheryu-source-avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 8px !important;
  justify-self: start !important;
  background:
    radial-gradient(circle at 50% 52%, rgba(154, 107, 255, 0.2), transparent 58%),
    rgba(0, 0, 0, 0.5) !important;
}

.naheryu-dialogue-source-v2 .naheryu-source-avatar img {
  object-fit: contain !important;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%) !important;
}

.source-expanded-v2 {
  position: relative;
  z-index: 1;
  display: grid !important;
  gap: 10px !important;
  min-width: 0;
}

.source-headline small,
.source-section b,
.source-affinity-top span {
  color: rgba(214, 182, 255, 0.92) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.source-headline h3 {
  margin: 2px 0 0 !important;
  color: rgba(255, 230, 167, 0.96) !important;
  font-size: clamp(18px, 1.25vw, 22px) !important;
  line-height: 1.15 !important;
  overflow-wrap: anywhere;
}

.source-role {
  margin: 3px 0 0 !important;
  color: rgba(232, 220, 200, 0.72) !important;
  line-height: 1.45 !important;
}

.source-affinity-card {
  padding: 10px !important;
  border: 1px solid rgba(154, 107, 255, 0.25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 18%, rgba(154, 107, 255, 0.2), transparent 46%),
    rgba(0, 0, 0, 0.32);
}

/* V28.401 好感分數／等級的手動校正列（在好感卡展開後的最上方） */
.source-affinity-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 8px;
  padding: 7px 8px;
  border: 1px solid rgba(154, 107, 255, 0.28);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
}

.source-affinity-edit > span {
  color: var(--gold, #c9a35a);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.source-affinity-edit label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #9c9c9c;
  font-size: 10px;
}

.source-affinity-edit input {
  width: 3.9rem;
  padding: 2px 5px;
  border: 1px solid rgba(154, 107, 255, 0.35);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.source-affinity-edit small {
  flex: 1 1 100%;
  color: #7d7d7d;
  font-size: 9px;
  line-height: 1.5;
}

/* V28.398 實力等級列（排在好感卡上方；角色等級制度關著時整列不會被渲染） */
.source-char-level {
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(196, 154, 83, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 20%, rgba(196, 154, 83, 0.18), transparent 48%),
    rgba(0, 0, 0, 0.32);
}

.source-char-level-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.source-char-level-top > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gold, #c9a35a);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.source-char-level-top i {
  padding: 1px 5px;
  border: 1px solid rgba(196, 154, 83, 0.35);
  border-radius: 999px;
  color: #9c9c9c;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  cursor: help;
}

.source-char-level-top input {
  width: 4.6rem;
  padding: 3px 6px;
  border: 1px solid rgba(196, 154, 83, 0.35);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.source-char-level-top input:disabled { opacity: .45; cursor: not-allowed; }

.source-char-level small {
  display: block;
  margin-top: 5px;
  color: #8a8a8a;
  font-size: 10px;
  line-height: 1.5;
}

.source-affinity-details > summary,
.source-state-cell > summary {
  list-style: none;
  cursor: pointer;
}

.source-affinity-details > summary::-webkit-details-marker,
.source-state-cell > summary::-webkit-details-marker {
  display: none;
}

.source-affinity-details > summary > i,
.source-state-cell summary i {
  display: inline-block;
  margin-top: 4px;
  color: rgba(167, 139, 250, 0.86);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.source-affinity-details > summary > i::after,
.source-state-cell summary i::after {
  content: "▾ 點開";
}

.source-affinity-details[open] > summary > i::after,
.source-state-cell[open] summary i::after {
  content: "▴ 收合";
}

/* V28.354 AI 自訂階段名長度不固定（「噢硬的試探——她用毒舌包裹著…」），
   舊版右側 <b> 是 white-space:nowrap、又沒有 min-width:0，整串會撐爆卡片、
   把「好感 / 信賴」擠成直排並壓到旁邊內容。改成可換行、靠右、允許斷詞。 */
.source-affinity-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.source-affinity-top > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* V28.352 等級章（排在分數左邊）＋ AI 自訂階段名 */
.source-affinity-level {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid rgba(154, 107, 255, 0.5);
  border-radius: 5px;
  background: rgba(154, 107, 255, 0.16);
  color: rgba(214, 182, 255, 0.96) !important;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.source-affinity-stage-ai {
  color: rgba(120, 226, 200, 0.95) !important;
  border-bottom: 1px dotted rgba(120, 226, 200, 0.42);
}

/* V28.351 收合時的「裡面可以調難易度」提示章 */
.source-affinity-tune-hint {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border: 1px solid rgba(231, 177, 100, 0.42);
  border-radius: 5px;
  background: rgba(231, 177, 100, 0.12);
  color: rgba(245, 217, 155, 0.92);
  font-size: 9px;
  font-style: normal;
  line-height: 1.5;
  vertical-align: 1px;
  cursor: help;
}

.source-affinity-top b {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 238, 207, 0.94) !important;
  font-size: 12px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: right;
  line-height: 1.5;
}

.source-affinity-bar {
  height: 6px;
  margin: 8px 0 6px;
  overflow: hidden;
  border: 1px solid rgba(231, 177, 100, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
}

.source-affinity-bar i {
  display: block;
  width: var(--source-affinity, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9a6bff, #4ec4d9 64%, #f5d99b);
  box-shadow: 0 0 14px rgba(154, 107, 255, 0.42);
}

.source-affinity-card small,
.source-affinity-card em,
.source-relationship-note {
  display: block;
  color: rgba(232, 220, 200, 0.68) !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1.5 !important;
}

.source-affinity-card em {
  margin-top: 4px;
  color: rgba(78, 196, 217, 0.82) !important;
}

.source-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.source-state-grid span,
.source-state-cell {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(231, 177, 100, 0.18);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.3);
}

.source-state-grid b,
.source-state-grid em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-state-grid b {
  color: rgba(232, 220, 200, 0.52) !important;
  font-size: 10px !important;
}

.source-state-grid em {
  margin-top: 2px;
  color: rgba(255, 230, 167, 0.92) !important;
  font-size: 12px !important;
  font-style: normal !important;
}

.source-state-cell[open] em {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.source-state-cell p {
  margin: 6px 0 0;
  color: rgba(232, 220, 200, 0.72) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.source-state-full-value {
  display: block;
  margin: 0 0 4px;
  color: rgba(255, 230, 167, 0.96) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.source-state-full-value + span {
  display: block;
}

.source-status-cell {
  border-color: rgba(239, 68, 68, 0.26) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.10), transparent 48%),
    rgba(0, 0, 0, 0.32) !important;
}

.source-monologue-cell {
  border-color: rgba(154, 107, 255, 0.28) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(154, 107, 255, 0.12), transparent 48%),
    rgba(0, 0, 0, 0.32) !important;
}

.source-section {
  padding: 9px 10px;
  border: 1px solid rgba(231, 177, 100, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 238, 207, 0.035), rgba(0, 0, 0, 0.2)),
    rgba(0, 0, 0, 0.28);
}

.source-section p {
  margin: 5px 0 0;
  color: rgba(232, 220, 200, 0.75) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
  overflow-wrap: anywhere;
}

.source-goal {
  border-color: rgba(78, 196, 217, 0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(78, 196, 217, 0.11), transparent 45%),
    rgba(0, 0, 0, 0.3);
}

.source-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.source-tags span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.naheryu-dialogue-source-v2 .source-toggle-btn {
  width: 100% !important;
  margin-top: 2px !important;
  border-color: rgba(231, 177, 100, 0.28) !important;
}

.naheryu-dialogue-side-source.is-collapsed .source-expanded-v2,
.naheryu-dialogue-side-source.is-collapsed .source-expanded {
  display: none !important;
}

@media (max-width: 1500px) and (min-width: 1181px) {
  .naheryu-dialogue-chat-layout {
    grid-template-columns: minmax(220px, 252px) minmax(0, 1fr) !important;
  }

  .naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded {
    display: block !important;
  }

  .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-chat-source-panel {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    display: grid !important;
    place-items: initial !important;
  }

  .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-source-avatar {
    width: 82px !important;
    height: 82px !important;
    border-radius: 8px !important;
  }
}

@media (max-width: 1180px) {
  .naheryu-dialogue-chat-layout {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  .naheryu-dialogue-side-source .source-expanded,
  .naheryu-dialogue-side-source .source-expanded-v2 {
    display: none !important;
  }

  .naheryu-dialogue-side-source .naheryu-chat-source-panel {
    width: 58px !important;
    min-width: 58px !important;
    padding: 8px !important;
    display: grid !important;
    place-items: start center !important;
  }

  .naheryu-dialogue-side-source .naheryu-source-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
  }
}

.worldbook-shell-board {
  overflow-x: hidden !important;
}

.worldbook-shell-grid,
.worldbook-shell-grid.worldbook-shell-workspace {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.worldbook-shell-grid.worldbook-shell-workspace {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 300px) !important;
  align-items: start !important;
}

.worldbook-library-pane,
.worldbook-editor-pane,
.worldbook-inspector-pane,
.worldbook-inspector-card,
.worldbook-editor-title,
.worldbook-library-item {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.worldbook-editor-hero {
  grid-template-columns: minmax(112px, 160px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
}

button.worldbook-shell-cover,
.worldbook-shell-cover,
.worldbook-shell-cover.hero,
.worldbook-shell-cover.mini,
.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  contain: paint;
  flex: 0 0 auto !important;
}

.worldbook-shell-cover.hero {
  width: clamp(112px, 12vw, 160px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 3 / 4 !important;
}

.worldbook-shell-cover.mini,
.worldbook-entry-row > span,
.worldbook-entry-chip > span,
.worldbook-entry-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
}

.worldbook-shell-cover img,
.worldbook-shell-cover.hero img,
.worldbook-shell-cover.mini img,
.worldbook-entry-row img,
.worldbook-entry-chip img,
.worldbook-entry-avatar img,
.worldbook-shell-cover img.nh-shell-avatar-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  clip-path: none !important;
  image-rendering: auto;
}

.worldbook-editor-title input,
.worldbook-editor-title textarea,
.worldbook-editor-pane input,
.worldbook-editor-pane textarea {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1600px) {
  .worldbook-shell-grid.worldbook-shell-workspace {
    grid-template-columns: minmax(230px, 292px) minmax(0, 1fr) !important;
  }

  .worldbook-inspector-pane {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  .worldbook-shell-grid.worldbook-shell-workspace,
  .worldbook-inspector-pane {
    grid-template-columns: 1fr !important;
  }

  .worldbook-editor-hero {
    grid-template-columns: minmax(108px, 136px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .worldbook-editor-hero {
    grid-template-columns: 1fr !important;
  }

  .worldbook-shell-cover.hero {
    width: min(176px, 62vw) !important;
  }
}

/* V28.28b: stop source-panel clipping and keep worldbook cover art inside its lane. */
.naheryu-dialogue-side-source {
  overflow: hidden !important;
}

.naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-dialogue-source-v2 {
  min-height: 0 !important;
  max-height: 100% !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
}

.naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded-v2 {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 107, 255, 0.5) rgba(0, 0, 0, 0.24);
}

.naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded-v2::-webkit-scrollbar {
  width: 6px;
}

.naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded-v2::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(154, 107, 255, 0.72), rgba(78, 196, 217, 0.48));
}

.naheryu-dialogue-source-v2 .naheryu-source-avatar {
  width: clamp(74px, 42%, 104px) !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  box-sizing: border-box !important;
  padding: 7px !important;
  overflow: hidden !important;
}

.naheryu-dialogue-source-v2 .naheryu-source-avatar img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 50%) !important;
  transform: none !important;
  clip-path: none !important;
}

.source-relationship-note,
.source-section p,
.source-affinity-card small,
.source-affinity-card em {
  overflow: visible !important;
  max-height: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 1500px) and (min-width: 1181px) {
  .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-source-avatar {
    width: clamp(70px, 40%, 92px) !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 8px !important;
  }
}

.worldbook-editor-hero {
  display: grid !important;
  grid-template-columns: minmax(116px, 140px) minmax(0, 1fr) !important;
  column-gap: 28px !important;
  row-gap: 12px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.worldbook-editor-hero > .worldbook-shell-cover.hero,
.worldbook-editor-hero button.worldbook-shell-cover.hero {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: start !important;
  box-sizing: border-box !important;
  width: min(100%, 140px) !important;
  min-width: 0 !important;
  max-width: 140px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 3 / 4 !important;
  z-index: 1 !important;
}

.worldbook-editor-hero > .worldbook-editor-title {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  z-index: 2 !important;
}

.worldbook-editor-hero > .worldbook-shell-cover.hero img,
.worldbook-editor-hero > .worldbook-shell-cover.hero img.nh-shell-avatar-img,
.worldbook-editor-hero button.worldbook-shell-cover.hero img,
.worldbook-editor-hero button.worldbook-shell-cover.hero img.nh-shell-avatar-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.worldbook-library-select,
.worldbook-library-item {
  min-width: 0 !important;
  overflow: hidden !important;
}

.worldbook-library-select {
  grid-template-columns: 64px minmax(0, 1fr) !important;
}

.worldbook-library-select strong,
.worldbook-library-select em,
.worldbook-library-select span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1600px) {
  .worldbook-editor-hero {
    grid-template-columns: minmax(108px, 128px) minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }

  .worldbook-editor-hero > .worldbook-shell-cover.hero,
  .worldbook-editor-hero button.worldbook-shell-cover.hero {
    width: min(100%, 128px) !important;
    max-width: 128px !important;
  }
}

@media (max-width: 1180px) {
  .worldbook-editor-hero {
    grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) !important;
    column-gap: 18px !important;
  }

  .worldbook-editor-hero > .worldbook-shell-cover.hero,
  .worldbook-editor-hero button.worldbook-shell-cover.hero {
    width: min(100%, 120px) !important;
    max-width: 120px !important;
  }
}

@media (max-width: 760px) {
  .worldbook-editor-hero {
    grid-template-columns: 1fr !important;
  }

  .worldbook-editor-hero > .worldbook-shell-cover.hero,
  .worldbook-editor-hero button.worldbook-shell-cover.hero,
  .worldbook-editor-hero > .worldbook-editor-title {
    grid-column: 1 !important;
  }
}

/* V28.28c: keep the dialogue source ledger inside the visible chat stage. */
.app-shell.shell-module-dialogue .workspace,
.app-shell.shell-module-dialogue .workspace-inner,
.app-shell.shell-module-dialogue #slot-main-stage,
.app-shell.shell-module-dialogue #result-area,
.app-shell.shell-module-dialogue #dialogue-section {
  min-height: 0 !important;
  max-height: 100% !important;
}

.app-shell.shell-module-dialogue .workspace {
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #slot-main-stage {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #result-area,
.app-shell.shell-module-dialogue #dialogue-section {
  height: 100% !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #dialogue-section > div:nth-of-type(2):not(.naheryu-dialogue-chat-layout) {
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #result-area > #summon-result-workbench,
.app-shell.shell-module-dialogue #result-area > .summon-result-workbench {
  display: none !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source,
.app-shell.shell-module-dialogue #dialogue-chat-box {
  min-height: 0 !important;
  max-height: 100% !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-chat-source-panel {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded-v2 {
  padding-bottom: 12px !important;
}

/* V28.28d: make the source ledger itself scrollable and compact open target panel. */
.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-oracle:not(.is-collapsed) {
  max-height: clamp(132px, 20vh, 164px) !important;
  margin-bottom: 10px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-oracle-body {
  min-height: 82px !important;
  max-height: 112px !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-oracle-card {
  min-height: 82px !important;
  padding: 8px 10px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-oracle-stage {
  padding: 8px 10px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-target-strip {
  max-height: 86px !important;
  overflow-y: auto !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-oracle:not(.is-collapsed) .naheryu-dialogue-target-chip {
  min-height: 58px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-dialogue-source-v2 {
  display: block !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 107, 255, 0.55) rgba(0, 0, 0, 0.22);
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-dialogue-source-v2::-webkit-scrollbar {
  width: 6px;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-dialogue-source-v2::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(154, 107, 255, 0.72), rgba(78, 196, 217, 0.5));
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded-v2 {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 16px !important;
}

/* V28.29: make the new dock the only visible composer, and give dialogue/content panes real height. */
.app-shell.shell-module-dialogue #summon-result-workbench,
.app-shell.shell-module-dialogue .summon-result-workbench {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-chat-box > .border-t,
.app-shell.shell-module-dialogue #dialogue-chat-box > div:nth-child(2):not(#dialogue-messages) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.app-shell.shell-module-dialogue #result-area {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #dialogue-section {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 8px !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40,
.app-shell.shell-module-dialogue #dialogue-section > div:nth-of-type(2):not(.naheryu-dialogue-chat-layout) {
  flex: 0 0 auto !important;
  max-height: clamp(52px, 11vh, 138px) !important;
  overflow: auto !important;
  scrollbar-width: thin;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden),
.app-shell.shell-module-dialogue #dialogue-library-panel:not(.hidden),
.app-shell.shell-module-dialogue #dialogue-persona-panel:not(.hidden) {
  max-height: clamp(78px, 15vh, 168px) !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel .bg-purple-950\/20 {
  padding: 10px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel p,
.app-shell.shell-module-dialogue #dialogue-group-observe-controls label {
  margin-bottom: 6px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-members {
  min-height: 26px !important;
  max-height: 44px !important;
  overflow: auto !important;
}

.app-shell.shell-module-dialogue #dialogue-group-observe-controls {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-scene {
  min-height: 34px !important;
  max-height: 54px !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-oracle,
.app-shell.shell-module-dialogue #dialogue-section > .flex:first-child {
  flex: 0 0 auto !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout {
  display: grid !important;
  flex: 1 1 0 !important;
  grid-template-columns: minmax(206px, 268px) minmax(0, 1fr) !important;
  gap: 12px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #dialogue-chat-box {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #dialogue-messages {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px !important;
  padding-bottom: 28px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-chat-source-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-dialogue-source-v2 {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 26px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-expanded-v2 {
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 30px !important;
}

.app-shell.shell-module-dialogue .naheryu-source-avatar,
.app-shell.shell-module-dialogue .naheryu-source-avatar img {
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1500px) {
  .app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout {
    grid-template-columns: minmax(190px, 236px) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40,
  .app-shell.shell-module-dialogue #dialogue-section > div:nth-of-type(2):not(.naheryu-dialogue-chat-layout) {
    max-height: clamp(48px, 10vh, 116px) !important;
  }
}

@media (max-width: 1160px) {
  .app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout {
    grid-template-columns: 56px minmax(0, 1fr) !important;
  }

  .app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .source-expanded-v2 {
    display: none !important;
  }
}

/* V28.29: keep worldbook uploaded covers in their own lane instead of floating over text. */
.worldbook-editor-hero {
  align-items: start !important;
  grid-template-columns: minmax(104px, 128px) minmax(0, 1fr) !important;
  column-gap: 22px !important;
  overflow: visible !important;
}

.worldbook-editor-hero > .worldbook-shell-cover.hero,
.worldbook-editor-hero > button.worldbook-shell-cover.hero,
.worldbook-editor-hero button.worldbook-shell-cover.hero {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 128px !important;
  max-width: 128px !important;
  min-width: 0 !important;
  height: 188px !important;
  min-height: 168px !important;
  max-height: 188px !important;
  place-self: start !important;
  transform: none !important;
  z-index: 1 !important;
  contain: layout paint !important;
  overflow: hidden !important;
}

.worldbook-editor-hero > .worldbook-editor-title {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  z-index: 3 !important;
}

.worldbook-editor-hero .worldbook-title-input,
.worldbook-editor-hero .worldbook-editor-title textarea {
  position: relative !important;
  z-index: 4 !important;
}

.worldbook-shell-cover img,
.worldbook-shell-cover.hero img,
.worldbook-shell-cover.mini img,
.worldbook-entry-avatar img,
.worldbook-entry-row img,
.worldbook-entry-chip img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.worldbook-library-select {
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  align-items: center !important;
}

.worldbook-library-select .worldbook-shell-cover.mini {
  grid-column: 1 !important;
  width: 56px !important;
  height: 72px !important;
  max-width: 56px !important;
  max-height: 72px !important;
}

.worldbook-library-select > *:not(.worldbook-shell-cover) {
  min-width: 0 !important;
}

/* V28.29b: override the legacy 320px chat minimum from layout.css. */
.app-shell.shell-module-dialogue #dialogue-section #dialogue-chat-box #dialogue-messages,
.app-shell.shell-module-dialogue #dialogue-section #dialogue-messages {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* V28.29c: group mode controls should be compact, not clipped to a sliver. */
.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40:has(#dialogue-group-panel:not(.hidden)) {
  max-height: clamp(112px, 17vh, 154px) !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) {
  max-height: clamp(56px, 8.5vh, 84px) !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) > .bg-purple-950\/20 {
  min-height: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) p {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) .mb-3 {
  margin-bottom: 6px !important;
}

/* V28.30: dashboard dialogue archive controls, source-panel clipping guard, and stricter worldbook cover lanes. */
.dashboard-dialogue-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

.dashboard-dialogue-group + .dashboard-dialogue-group {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(215, 165, 109, 0.16) !important;
}

.dashboard-dialogue-group-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: var(--gold-soft) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

.dashboard-dialogue-group-title b {
  min-width: 24px !important;
  padding: 2px 7px !important;
  border: 1px solid rgba(154, 107, 255, 0.28) !important;
  border-radius: 999px !important;
  color: var(--violet-soft) !important;
  text-align: center !important;
  background: rgba(154, 107, 255, 0.1) !important;
}

.dashboard-dialogue-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
}

.dashboard-dialogue-open {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
}

.dashboard-dialogue-copy {
  display: block !important;
  min-width: 0 !important;
}

.dashboard-dialogue-copy em {
  display: block !important;
  color: var(--text-faint) !important;
  font-size: 10px !important;
  font-style: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.dashboard-dialogue-actions {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  opacity: 0.74 !important;
}

.dashboard-dialogue-actions button {
  min-height: 24px !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(215, 165, 109, 0.24) !important;
  border-radius: 6px !important;
  color: var(--gold-soft) !important;
  background: rgba(0, 0, 0, 0.34) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.dashboard-dialogue-actions button:hover {
  border-color: rgba(207, 169, 255, 0.54) !important;
  color: #efe4ff !important;
  box-shadow: 0 0 14px rgba(154, 107, 255, 0.18) !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout {
  padding-bottom: 8px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed),
.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-chat-source-panel {
  min-height: 0 !important;
  max-height: 100% !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-dialogue-source-v2 {
  max-height: 100% !important;
  padding-bottom: 96px !important;
  overscroll-behavior: contain !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-expanded-v2 {
  padding-bottom: 120px !important;
}

.worldbook-editor-hero {
  isolation: isolate !important;
  grid-auto-flow: column !important;
  grid-template-columns: 144px minmax(260px, 1fr) !important;
  min-width: 0 !important;
}

.worldbook-editor-hero > .worldbook-shell-cover.hero,
.worldbook-editor-hero > button.worldbook-shell-cover.hero,
.worldbook-editor-hero button.worldbook-shell-cover.hero {
  width: 132px !important;
  max-width: 132px !important;
  min-width: 132px !important;
  justify-self: start !important;
  align-self: start !important;
  z-index: 1 !important;
}

.worldbook-editor-hero > .worldbook-editor-title {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: translateZ(0) !important;
  z-index: 5 !important;
}

.worldbook-editor-hero > .worldbook-editor-title,
.worldbook-editor-hero > .worldbook-editor-title * {
  min-width: 0 !important;
}

@media (max-width: 980px) {
  .worldbook-editor-hero {
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .worldbook-editor-hero > .worldbook-shell-cover.hero,
  .worldbook-editor-hero > button.worldbook-shell-cover.hero,
  .worldbook-editor-hero button.worldbook-shell-cover.hero,
  .worldbook-editor-hero > .worldbook-editor-title {
    grid-column: 1 !important;
  }
}
.worldbook-shell-grid,
.worldbook-shell-grid.worldbook-shell-workspace,
.worldbook-library-list,
.worldbook-entry-list,
.worldbook-content-editor {
  overflow-anchor: none;
  scrollbar-gutter: stable;
}

/* V28.31: compress the dialogue header so the transcript gets the vertical room. */
.app-shell.shell-module-dialogue #dialogue-section {
  gap: 5px !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex:first-child {
  min-height: 34px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  align-items: center !important;
  border: 1px solid rgba(215, 165, 109, 0.18) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.13), rgba(0, 0, 0, 0.26), rgba(78, 196, 217, 0.1)),
    rgba(0, 0, 0, 0.18) !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex.items-center.justify-between.gap-4.flex-wrap.pb-3.border-b {
  min-height: 34px !important;
  height: 34px !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  border: 1px solid rgba(215, 165, 109, 0.18) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(154, 107, 255, 0.13), rgba(0, 0, 0, 0.26), rgba(78, 196, 217, 0.1)),
    rgba(0, 0, 0, 0.18) !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex:first-child > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex.items-center.justify-between.gap-4.flex-wrap.pb-3.border-b > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex:first-child > div:first-child p {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex.items-center.justify-between.gap-4.flex-wrap.pb-3.border-b > div:first-child p {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex:first-child > div:first-child h2 {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  color: #f1d99f !important;
  background: none !important;
  -webkit-text-fill-color: #f1d99f !important;
  text-shadow: 0 0 14px rgba(154, 107, 255, 0.22) !important;
  white-space: nowrap !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .flex.items-center.justify-between.gap-4.flex-wrap.pb-3.border-b > div:first-child h2 {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  color: #f1d99f !important;
  background: none !important;
  -webkit-text-fill-color: #f1d99f !important;
  text-shadow: 0 0 14px rgba(154, 107, 255, 0.22) !important;
  white-space: nowrap !important;
}

.app-shell.shell-module-dialogue #dialogue-status-badge {
  min-height: 24px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  letter-spacing: 0.11em !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40 {
  padding: 8px 10px !important;
  max-height: clamp(42px, 7.5vh, 96px) !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40 > .flex:first-child {
  margin-bottom: 6px !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-messages {
  padding-top: 14px !important;
  padding-bottom: 22px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-expanded-v2 {
  padding-bottom: 150px !important;
}

/* V28.33: free the dialogue viewport and move group observe controls to the composer. */
.app-shell.shell-module-dialogue #dialogue-section > .flex.items-center.justify-between.gap-4.flex-wrap.pb-3.border-b {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-oracle-top {
  gap: 8px !important;
}

.app-shell.shell-module-dialogue #dialogue-status-badge.naheryu-dialogue-status-inline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  margin-left: auto !important;
  padding: 5px 12px !important;
  border: 1px solid rgba(78, 196, 217, 0.28) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(78, 196, 217, 0.22), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(42, 21, 74, 0.62)) !important;
  color: #bff7ff !important;
  box-shadow: 0 0 18px rgba(78, 196, 217, 0.12), inset 0 0 14px rgba(154, 107, 255, 0.12) !important;
  white-space: nowrap !important;
}

.app-shell.shell-module-dialogue #dialogue-group-observe-controls {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40:has(#dialogue-group-panel:not(.hidden)) {
  max-height: clamp(74px, 11vh, 116px) !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) {
  max-height: clamp(44px, 7.5vh, 72px) !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) .bg-purple-950\/20 {
  padding: 7px 8px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) .flex.items-center.gap-2.mb-3 {
  margin-bottom: 4px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-panel:not(.hidden) .mb-3:has(#dialogue-group-members) {
  margin-bottom: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-controls {
  order: 2 !important;
  margin: 8px 0 0 !important;
  padding: 8px !important;
  border-color: rgba(154, 107, 255, 0.38) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(42, 21, 74, 0.55), rgba(0, 0, 0, 0.74), rgba(7, 56, 66, 0.32)),
    rgba(0, 0, 0, 0.72) !important;
  box-shadow: inset 0 0 24px rgba(154, 107, 255, 0.1), 0 0 18px rgba(0, 0, 0, 0.36) !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-controls:not(.hidden) {
  display: block !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-controls > .flex {
  display: grid !important;
  grid-template-columns: auto minmax(190px, 1fr) auto auto auto auto auto;
  align-items: center !important;
  gap: 7px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-scene {
  min-width: 0 !important;
  height: 32px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-rounds,
.app-shell.shell-module-dialogue #dialogue-group-floating-start,
.app-shell.shell-module-dialogue #dialogue-group-floating-pause,
.app-shell.shell-module-dialogue #never-end-toggle-group,
.app-shell.shell-module-dialogue #strict-auto-toggle {
  min-height: 32px !important;
  height: 32px !important;
  white-space: nowrap !important;
}

.app-shell.shell-module-dialogue #never-end-toggle-group,
.app-shell.shell-module-dialogue #strict-auto-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 5px 9px !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-controls.is-disabled {
  opacity: 0.78 !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-controls.is-disabled #dialogue-group-floating-status {
  color: #f1d99f !important;
}

.app-shell.shell-module-dialogue #dialogue-chat-box > .p-4.border-t.border-zinc-800 {
  display: flex !important;
  flex-direction: column !important;
}

.app-shell.shell-module-dialogue #dialogue-chat-box > .p-4.border-t.border-zinc-800 > .flex.gap-2.items-end {
  order: 1 !important;
}

.app-shell.shell-module-dialogue #dialogue-token-estimate,
.app-shell.shell-module-dialogue #dialogue-token-context {
  white-space: nowrap !important;
}

@media (max-width: 1320px) {
  .app-shell.shell-module-dialogue #dialogue-group-floating-controls > .flex {
    grid-template-columns: auto minmax(140px, 1fr) auto auto;
  }

  .app-shell.shell-module-dialogue #never-end-toggle-group,
  .app-shell.shell-module-dialogue #strict-auto-toggle,
  .app-shell.shell-module-dialogue #dialogue-group-floating-status {
    grid-column: span 2;
  }
}

/* V28.34: group observe controls live in the visible BottomDock, not the hidden legacy composer. */
.app-shell.shell-module-dialogue {
  --bottomdock-h: clamp(128px, 14vh, 156px);
}

.app-shell.shell-module-dialogue #dialogue-chat-box > .p-4.border-t.border-zinc-800 {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.app-shell.shell-module-dialogue #shell-dock {
  overflow: visible !important;
}

.app-shell.shell-module-dialogue #shell-dock .dock-input {
  gap: 6px !important;
  min-width: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot:empty {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-controls.hidden {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-controls {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  border: 1px solid rgba(154, 107, 255, 0.42) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, rgba(42, 21, 74, 0.58), rgba(0, 0, 0, 0.76), rgba(7, 56, 66, 0.35)),
    rgba(0, 0, 0, 0.72) !important;
  box-shadow: inset 0 0 20px rgba(154, 107, 255, 0.10), 0 0 18px rgba(0, 0, 0, 0.34) !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-controls > .flex {
  display: grid !important;
  grid-template-columns: auto minmax(180px, 1fr) 58px auto auto auto auto auto;
  align-items: center !important;
  gap: 6px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-scene {
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-rounds,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-start,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-pause,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #never-end-toggle-group,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #strict-auto-toggle {
  height: 30px !important;
  min-height: 30px !important;
  white-space: nowrap !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-status {
  min-width: 92px !important;
  white-space: nowrap !important;
  color: #f1d99f !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #never-end-toggle-group,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #strict-auto-toggle {
  padding: 4px 8px !important;
  font-size: 10px !important;
}

@media (max-width: 1420px) {
  .app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-controls > .flex {
    grid-template-columns: auto minmax(120px, 1fr) 52px auto auto;
  }

  .app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-status,
  .app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #never-end-toggle-group,
  .app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #strict-auto-toggle {
    grid-column: span 2;
  }
}

/* V28.35: keep multiplayer observe controls usable without stealing dialogue height. */
.app-shell.shell-module-dialogue {
  --bottomdock-h: clamp(108px, 12vh, 132px);
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot {
  width: 100%;
  max-width: 100%;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-controls {
  min-height: 42px !important;
  max-height: 48px !important;
  padding: 5px 7px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-controls > .flex {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px !important;
  min-width: max-content !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-controls label {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-scene {
  flex: 1 1 220px !important;
  width: clamp(170px, 22vw, 300px) !important;
  min-width: 160px !important;
  max-width: 300px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-status {
  flex: 0 0 auto !important;
  min-width: 84px !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-rounds {
  flex: 0 0 52px !important;
  width: 52px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-start,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #dialogue-group-floating-pause,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #never-end-toggle-group,
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot #strict-auto-toggle {
  flex: 0 0 auto !important;
  padding-inline: 7px !important;
}

/* V28.36: move dialogue target controls into the compact top oracle bar. */
.app-shell.shell-module-dialogue .naheryu-dialogue-oracle-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 52px !important;
  padding-block: 8px !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-mode-tabs {
  flex: 0 0 auto !important;
}

.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar-slot {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  min-width: max-content !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar > div {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar > div:first-child > span {
  flex: 0 0 auto !important;
  margin-right: 2px !important;
  color: rgba(241, 217, 159, 0.62) !important;
}

.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar button,
.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 5px 10px !important;
  white-space: nowrap !important;
  border-radius: 7px !important;
  line-height: 1 !important;
}

.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar #dialogue-mode-library,
.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar #dialogue-mode-persona,
.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar button[onclick="toggleKnowledgeBase()"],
.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar button[onclick="toggleThemePanel()"],
.app-shell.shell-module-dialogue #naheryu-dialogue-quickbar button[onclick="openWorldbookManager()"] {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-status-badge.naheryu-dialogue-status-inline {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-panel-toggle {
  flex: 0 0 auto !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40:not(:has(#dialogue-codex-selector:not(.hidden), #dialogue-group-panel:not(.hidden), #dialogue-library-panel:not(.hidden), #dialogue-persona-panel:not(.hidden))) {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40 > #dialogue-codex-selector:not(.hidden),
.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40 > #dialogue-group-panel:not(.hidden),
.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40 > #dialogue-library-panel:not(.hidden),
.app-shell.shell-module-dialogue #dialogue-section > .bg-zinc-950\/40 > #dialogue-persona-panel:not(.hidden) {
  margin-top: 0 !important;
}

@media (max-width: 1500px) {
  .app-shell.shell-module-dialogue .naheryu-dialogue-oracle-top {
    gap: 6px !important;
  }

  .app-shell.shell-module-dialogue #naheryu-dialogue-quickbar {
    gap: 6px !important;
  }

  .app-shell.shell-module-dialogue #naheryu-dialogue-quickbar > div:first-child > span {
    display: none !important;
  }

  .app-shell.shell-module-dialogue #naheryu-dialogue-quickbar button,
  .app-shell.shell-module-dialogue #naheryu-dialogue-quickbar label {
    padding-inline: 8px !important;
    max-width: 120px !important;
  }
}

/* V28.38: multiplayer observe uses the main dock input + Execute button. */
.app-shell.shell-module-dialogue #dialogue-group-floating-dock-slot {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-group-observe-controls:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}

.app-shell.shell-module-dialogue #dialogue-group-observe-controls > label,
.app-shell.shell-module-dialogue #dialogue-group-scene,
.app-shell.shell-module-dialogue #sd-helper-btn,
.app-shell.shell-module-dialogue #dialogue-group-observe-start {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-group-observe-controls > .flex {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.app-shell.shell-module-dialogue #dialogue-group-rounds {
  width: 82px !important;
  min-width: 82px !important;
}

.app-shell.shell-module-dialogue #dialogue-inspector-story-toggles {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(154, 107, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(53, 27, 92, 0.32), rgba(0, 0, 0, 0.48)),
    rgba(0, 0, 0, 0.36);
}

.app-shell.shell-module-dialogue #dialogue-inspector-story-toggles.is-empty {
  display: none;
}

.app-shell.shell-module-dialogue #dialogue-inspector-story-toggles #strict-auto-toggle {
  display: none !important;
}

.app-shell.shell-module-dialogue #dialogue-inspector-story-toggles #never-end-toggle-group,
.app-shell.shell-module-dialogue #dialogue-inspector-story-toggles #anti-slop-badge,
.app-shell.shell-module-dialogue #dialogue-inspector-story-toggles #anchor-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 30px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(215, 165, 109, 0.26) !important;
  border-radius: 7px !important;
  background: rgba(0, 0, 0, 0.38) !important;
  color: #f1d99f !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.app-shell.shell-module-dialogue .dock-input .quick-cmds {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 3px !important;
  scrollbar-width: thin;
}

.app-shell.shell-module-dialogue .dock-input .quick-cmd {
  flex: 0 0 auto !important;
  max-width: none !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.2 !important;
}

@media (max-width: 1500px) {
  .app-shell.shell-module-dialogue .dock-input .quick-cmd {
    padding-inline: 8px !important;
    font-size: clamp(10px, 0.72vw, 12px) !important;
  }
}

/* V28.39: collapsed dialogue source must release the chat canvas. */
.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout {
  min-width: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout:has(.naheryu-dialogue-side-source.is-collapsed) {
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 6px !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout:has(.naheryu-dialogue-side-source.is-collapsed) #dialogue-chat-box {
  width: 100% !important;
  min-width: 0 !important;
}

.app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout:has(.naheryu-dialogue-side-source.is-collapsed) #dialogue-messages {
  padding-left: 8px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source.is-collapsed {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source.is-collapsed .naheryu-chat-source-panel {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  padding: 7px !important;
  display: grid !important;
  place-items: start center !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source.is-collapsed .naheryu-source-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source.is-collapsed .source-details {
  display: none !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-dialogue-source-v2 {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px !important;
  scrollbar-width: thin;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-source-avatar {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  max-height: min(46vh, 420px) !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-side-source:not(.is-collapsed) .naheryu-source-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* V28.200 TopBar cleanup: the title is product identity, never an ellipsis. */
body[data-nh-theme] .topbar-brand {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

body[data-nh-theme] .topbar-brand > .topbar-brand-name {
  display: inline !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

body[data-nh-theme] .topbar-actions {
  margin-left: auto !important;
}

/* ==========================================================================
   V28.184 · Semantic theme tokens, illuminated PNG emblems and page overrides
   ========================================================================== */

:root {
  --nh-generated-emblems: url("./assets/grimoire-ui-emblems-v3.png");
  --nh-page-emblem-dashboard: url("./assets/page-emblems/dashboard.png");
  --nh-page-emblem-summon: url("./assets/page-emblems/summon.png");
  --nh-page-emblem-dialogue: url("./assets/page-emblems/dialogue.png");
  --nh-page-emblem-codex: url("./assets/page-emblems/codex.png");
  --nh-page-emblem-tarot: url("./assets/page-emblems/tarot.png");
  --nh-page-emblem-worldbook: url("./assets/page-emblems/worldbook.png");
  --nh-page-emblem-charlib: url("./assets/page-emblems/charlib.png");
  --nh-page-emblem-tavern: url("./assets/page-emblems/tavern.png");
  --nh-page-emblem-settings: url("./assets/page-emblems/settings.png");
  --nh-page-emblem-export: url("./assets/page-emblems/export.png");
}

body[data-nh-theme] .topbar { background: var(--nh-topbar-bg) !important; }
body[data-nh-theme] .leftrail {
  background: linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)), var(--nh-rail-bg) !important;
  color: var(--nh-rail-text) !important;
}
body[data-nh-theme] .inspector {
  background: linear-gradient(rgba(0,0,0,.04),rgba(0,0,0,.04)), var(--nh-inspector-bg) !important;
  color: var(--nh-inspector-text) !important;
}
body[data-nh-theme] .workspace { background-color: var(--nh-workspace-bg) !important; }
body[data-nh-theme] .leftrail .nav-item { color: color-mix(in srgb,var(--nh-rail-text) 76%,transparent) !important; }
body[data-nh-theme] .leftrail .nav-item:hover { color: var(--nh-rail-text) !important; border-color: color-mix(in srgb,var(--nh-page-accent,var(--gold)) 55%,transparent) !important; }
body[data-nh-theme] .leftrail .nav-item.active {
  color: var(--nh-nav-active-text) !important;
  background: linear-gradient(90deg,var(--nh-nav-active-bg),color-mix(in srgb,var(--nh-page-accent,var(--purple)) 16%,transparent)) !important;
  border-color: color-mix(in srgb,var(--nh-page-accent,var(--purple)) 68%,var(--border)) !important;
}
body[data-nh-theme] .leftrail-section-title,
body[data-nh-theme] .project-card-label,
body[data-nh-theme] .project-card-time { color: color-mix(in srgb,var(--nh-rail-text) 62%,transparent) !important; }
body[data-nh-theme] .project-card-title,
body[data-nh-theme] .project-card-meter strong { color: var(--nh-rail-text) !important; }
body[data-nh-theme] .inspector-head,
body[data-nh-theme] .inspector-section,
body[data-nh-theme] .dashboard-inspector-card { background:color-mix(in srgb,var(--nh-inspector-bg) 96%,transparent) !important; border-color:var(--border) !important; box-shadow:inset 0 0 18px rgba(0,0,0,.2) !important; }
body[data-nh-theme] .inspector-section::before,
body[data-nh-theme] .dashboard-inspector-card::before { opacity:.18 !important; }
body[data-nh-theme] .inspector .inspector-section-head,
body[data-nh-theme] .inspector .label,
body[data-nh-theme] .inspector strong { color:var(--nh-inspector-text) !important; }
body[data-nh-theme] .inspector p,
body[data-nh-theme] .inspector span { text-shadow:0 1px 1px rgba(0,0,0,.28); }

body[data-nh-theme] [data-module-view] .dashboard-panel,
body[data-nh-theme] [data-module-view] .summon-card,
body[data-nh-theme] [data-module-view] .panel {
  background-color: var(--nh-page-surface,var(--bg-card)) !important;
  color:var(--nh-page-text,var(--text-main)) !important;
}
body[data-nh-theme] [data-module-view] h1,
body[data-nh-theme] [data-module-view] h2,
body[data-nh-theme] [data-module-view] h3 { color:color-mix(in srgb,var(--nh-page-text,var(--text-strong)) 86%,var(--nh-page-accent,var(--gold))) !important; }
body[data-nh-theme] [data-module-view] .dashboard-panel-kicker { color:var(--nh-page-accent,var(--purple-soft)) !important; }

body[data-nh-theme] .btn.purple,
body[data-nh-theme] .naheryu-auth-primary { background:linear-gradient(180deg,color-mix(in srgb,var(--nh-button-primary) 92%,white 8%),var(--nh-button-primary)) !important; color:var(--nh-button-text) !important; border-color:color-mix(in srgb,var(--nh-button-primary) 55%,white) !important; }
body[data-nh-theme] .dashboard-action-grid .btn:not(.purple),
body[data-nh-theme] [data-module-view] .btn:not(.purple):not(.danger) { background:var(--nh-button-secondary) !important; color:var(--nh-button-secondary-text) !important; border-color:color-mix(in srgb,var(--nh-button-secondary) 55%,var(--border-strong)) !important; }

body[data-nh-theme] .dashboard-progress-bar,
body[data-nh-theme] .dashboard-mini-meter,
body[data-nh-theme] .project-card-meter i,
body[data-nh-theme] .project-card-components i,
body[data-nh-theme] .shell-metric-row i { background:var(--nh-progress-track) !important; border-color:color-mix(in srgb,var(--nh-progress-track) 62%,var(--border-strong)) !important; }
body[data-nh-theme] .dashboard-progress-bar i::before,
body[data-nh-theme] .dashboard-mini-meter i::before,
body[data-nh-theme] .project-card-meter i::before,
body[data-nh-theme] .project-card-components i::before,
body[data-nh-theme] .shell-metric-row i::before { background:linear-gradient(90deg,var(--nh-page-progress,var(--nh-progress-start)),var(--nh-progress-end)) !important; }

body[data-nh-theme] .dashboard-ring {
  background:radial-gradient(circle at center,var(--bg-deep) 0 47%,transparent 48%),conic-gradient(from -90deg,var(--nh-page-progress,var(--nh-chart-primary)) calc(var(--value,0)*1%),var(--nh-progress-track) 0),var(--nh-clean-sigil) !important;
}
body[data-nh-theme] .dashboard-context-donut {
  background:radial-gradient(circle at center,var(--bg-deep) 0 47%,transparent 48%),conic-gradient(from -90deg,var(--nh-chart-primary) 0 calc(var(--used,0)*1%),var(--nh-chart-tertiary) calc(var(--used,0)*1%) calc((var(--used,0) + var(--wb,0))*1%),var(--nh-chart-secondary) calc((var(--used,0) + var(--wb,0))*1%) calc((var(--used,0) + var(--wb,0) + var(--kb,0))*1%),var(--nh-progress-track) 0),var(--nh-clean-sigil) !important;
}

body[data-nh-theme] .project-card-sigil { background-image:var(--nh-theme-project-sigil) !important; background-position:center !important; background-size:contain !important; background-repeat:no-repeat !important; }
body[data-nh-theme] .nh-brand-sigil { background-image:var(--nh-theme-brand-sigil) !important; background-position:center !important; background-size:contain !important; background-repeat:no-repeat !important; }
body[data-nh-theme] .dashboard-stat-icon::after { background-image:var(--nh-theme-stat-sigil) !important; }
body[data-nh-theme] .dashboard-stat:nth-child(1) .dashboard-stat-icon::after { background-image:var(--nh-theme-stat-characters) !important; }
body[data-nh-theme] .dashboard-stat:nth-child(2) .dashboard-stat-icon::after { background-image:var(--nh-theme-stat-worldbook) !important; }
body[data-nh-theme] .dashboard-stat:nth-child(3) .dashboard-stat-icon::after { background-image:var(--nh-theme-stat-dialogue) !important; }
body[data-nh-theme] .dashboard-stat:nth-child(4) .dashboard-stat-icon::after { background-image:var(--nh-theme-stat-tokens) !important; }
body[data-nh-theme] .dashboard-stat:nth-child(5) .dashboard-stat-icon::after { background-image:var(--nh-theme-stat-days) !important; }
body[data-nh-theme] .dashboard-activity-icon { background-image:var(--nh-theme-activity-sigil) !important; background-size:contain !important; background-position:center !important; background-repeat:no-repeat !important; }
body[data-nh-theme] .dashboard-model-sigil::after { background-image:var(--nh-theme-model-sigil) !important; }

/* Generated 3x3 transparent PNG atlas. Each page may replace its cell independently. */
body[data-nh-theme] .nav-item[data-icon-mode="illuminated"] .icon {
  width:42px !important; height:42px !important; flex:0 0 42px;
  font-size:0 !important; border-color:transparent !important;
  background:radial-gradient(circle, color-mix(in srgb,var(--nh-page-accent) 14%,transparent), transparent 68%) !important;
  box-shadow:none !important; overflow:visible;
}
body[data-nh-theme] .nav-item[data-icon-mode="illuminated"] .icon::before {
  -webkit-mask-image:none !important; mask-image:none !important;
  background-color:transparent !important; background-image:var(--nh-generated-emblems) !important;
  background-repeat:no-repeat !important; background-size:300% 300% !important;
  width:100% !important; height:100% !important; image-rendering:auto;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--nh-page-accent) 72%,transparent));
}
body[data-nh-theme] .nav-item.active[data-icon-mode="illuminated"] .icon::before {
  filter:brightness(1.1) saturate(1.08) drop-shadow(0 0 9px color-mix(in srgb,var(--nh-page-accent) 88%,transparent));
}
body[data-nh-theme] .nav-item[data-module="dashboard"] .icon::before { background-position:0 0 !important; }
body[data-nh-theme] .nav-item[data-module="summon"] .icon::before { background-position:50% 0 !important; }
body[data-nh-theme] .nav-item[data-module="dialogue"] .icon::before { background-position:100% 0 !important; }
body[data-nh-theme] .nav-item[data-module="codex"] .icon::before { background-position:0 50% !important; }
body[data-nh-theme] .nav-item[data-module="worldbook"] .icon::before { background-position:50% 50% !important; }
body[data-nh-theme] .nav-item[data-module="charlib"] .icon::before { background-position:100% 50% !important; }
body[data-nh-theme] .nav-item[data-module="tavern"] .icon::before { background-position:0 100% !important; }
body[data-nh-theme] .nav-item[data-module="settings"] .icon::before { background-position:50% 100% !important; }
body[data-nh-theme] .nav-item[data-module="export"] .icon::before { background-position:100% 100% !important; }
body[data-nh-theme] .nav-item[data-icon-mode="custom"] .icon::before { -webkit-mask-image:none !important; mask-image:none !important; background:var(--nh-custom-icon) center/contain no-repeat !important; }
body[data-nh-theme] .nav-item[data-icon-mode="custom"] .icon {
  width:42px !important;
  height:42px !important;
  flex:0 0 42px;
  overflow:visible;
  border-color:transparent !important;
  background:radial-gradient(circle,color-mix(in srgb,var(--nh-page-accent) 15%,transparent),transparent 70%) !important;
  box-shadow:none !important;
  font-size:0 !important;
}
body[data-nh-theme] .nav-item[data-icon-mode="custom"] .icon::before {
  width:100% !important;
  height:100% !important;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--nh-page-accent) 72%,transparent));
}
body[data-nh-theme] .nav-item.active[data-icon-mode="custom"] .icon::before {
  filter:brightness(1.1) saturate(1.08) drop-shadow(0 0 9px color-mix(in srgb,var(--nh-page-accent) 88%,transparent));
}
body[data-nh-theme] .nav-item[data-icon-mode="glyph"] .icon { font-size:18px !important; color:var(--nh-page-accent) !important; }
body[data-nh-theme] .nav-item[data-icon-mode="glyph"] .icon::before { display:none !important; }
body[data-nh-theme] .nav-item[data-icon-mode="minimal"] .icon { display:none !important; }
body[data-nh-theme] .nav-item[data-icon-mode="line"] .icon::before,
body[data-nh-theme] .nav-item[data-icon-mode="rune"] .icon::before,
body[data-nh-theme] .nav-item[data-icon-mode="etched"] .icon::before { background-color:var(--nh-page-accent,var(--nh-icon-color)) !important; }

/* Corrected parchment: bright reading surfaces, dark but readable leather rails. */
body[data-nh-theme="ancient_parchment"] .dashboard-panel,
body[data-nh-theme="ancient_parchment"] .dashboard-stat { box-shadow:inset 0 0 22px rgba(88,54,25,.12),0 8px 20px rgba(31,18,10,.22) !important; }
body[data-nh-theme="ancient_parchment"] .dashboard-panel p,
body[data-nh-theme="ancient_parchment"] .dashboard-panel span,
body[data-nh-theme="ancient_parchment"] .dashboard-panel small { color:var(--text-muted) !important; text-shadow:none !important; }
body[data-nh-theme="ancient_parchment"] .dashboard-panel strong,
body[data-nh-theme="ancient_parchment"] .dashboard-panel h2 { color:var(--text-strong) !important; text-shadow:none !important; }
body[data-nh-theme="ancient_parchment"] .dashboard-activity-item,
body[data-nh-theme="ancient_parchment"] .dashboard-dialogue-item,
body[data-nh-theme="ancient_parchment"] .dashboard-model-card { background:rgba(255,246,219,.72) !important; border-color:rgba(97,59,39,.42) !important; }

.theme-preset-create { border-style:dashed !important; }
.theme-preset-create i { display:grid; place-items:center; background:var(--purple-bg) !important; color:var(--purple-soft); font-size:24px; font-style:normal; }
.theme-alpha-grid { position:relative; }
.theme-alpha-grid output { margin-left:auto; color:var(--purple-soft); font-size:10px; }

.theme-page-appearance { margin-top:14px !important; border-color:color-mix(in srgb,var(--nh-page-accent,var(--purple)) 42%,var(--border)) !important; }
.theme-page-appearance .inspector-section-head { cursor:pointer; }
.theme-page-body { display:flex; flex-direction:column; gap:10px; }
.theme-page-body > p { margin:0; color:var(--text-faint); font-size:10px; line-height:1.5; }
.theme-page-colors { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.theme-page-colors label { display:grid; grid-template-columns:1fr 30px; align-items:center; gap:6px; padding:6px; border:1px solid var(--border-soft); border-radius:var(--radius-sm); color:var(--nh-inspector-text); font-size:9px; }
.theme-page-colors input[type="color"] { width:30px; height:26px; padding:0; border:0; background:none; }
.theme-page-field { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:8px; color:var(--nh-inspector-text); font-size:10px; }
.theme-page-field select,.theme-page-field input { min-width:0; height:32px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-input); color:var(--text-main); padding:0 8px; }
.theme-page-icon-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:7px; border:1px solid var(--border-soft); border-radius:var(--radius-sm); background:color-mix(in srgb,var(--bg-input) 86%,transparent); }
.theme-page-icon-preview { width:46px; height:46px; flex:0 0 46px; border:1px solid color-mix(in srgb,var(--nh-page-accent,var(--purple)) 42%,var(--border)); border-radius:50%; background:radial-gradient(circle,var(--purple-bg),transparent 68%),var(--theme-page-preview) center/contain no-repeat; filter:drop-shadow(0 0 5px color-mix(in srgb,var(--nh-page-accent,var(--purple)) 48%,transparent)); }
.theme-page-icon-source { flex:1 1 90px; color:var(--text-faint) !important; font-size:9px; line-height:1.3; }
.theme-page-icon-row .btn { min-width:0; font-size:9px !important; }

@media (max-width:720px){ .theme-page-colors{grid-template-columns:1fr;} }

/* ==========================================================================
   V28.186 · Resolution architecture and visual rhythm refinement
   ========================================================================== */

body[data-nh-theme] .app-shell {
  grid-template-columns:var(--nh-rail-width,244px) minmax(0,1fr) var(--nh-inspector-width,312px) !important;
  grid-template-rows:var(--nh-topbar-height,58px) minmax(0,1fr) auto !important;
}
body[data-nh-theme] .app-shell.rail-collapsed { grid-template-columns:var(--leftrail-w-collapsed) minmax(0,1fr) var(--nh-inspector-width,312px) !important; }
body[data-nh-theme] .app-shell.inspector-hidden { grid-template-columns:var(--nh-rail-width,244px) minmax(0,1fr) 0 !important; }
body[data-nh-theme] .app-shell.inspector-hidden.rail-collapsed { grid-template-columns:var(--leftrail-w-collapsed) minmax(0,1fr) 0 !important; }

body[data-nh-theme] .topbar {
  min-height:var(--nh-topbar-height,58px);
  padding-inline:clamp(12px,1.15vw,22px) !important;
  gap:clamp(10px,1vw,18px) !important;
}
body[data-nh-theme] .topbar-brand { min-width:min(var(--nh-rail-width,244px),25vw); }
body[data-nh-theme] .topbar-search { max-width:640px; margin-inline:auto; }
body[data-nh-theme] .topbar-search input { height:38px; }

body[data-nh-theme] .workspace-inner {
  width:min(100%,var(--nh-content-max,1680px)) !important;
  max-width:var(--nh-content-max,1680px) !important;
  min-height:100%;
  margin-inline:auto !important;
  padding:var(--nh-workspace-padding,22px) !important;
}
body[data-nh-theme] .dashboard-workspace.active { display:flex; flex-direction:column; gap:var(--nh-card-gap,16px); }
body[data-nh-theme] .dashboard-title-row {
  min-height:104px;
  margin:0 !important;
  padding:12px clamp(12px,1.25vw,22px) 18px !important;
  align-items:flex-end;
}
body[data-nh-theme] .dashboard-title-row h1 { margin:3px 0 5px !important; font-size:clamp(27px,2vw,36px) !important; line-height:1.08; }
body[data-nh-theme] .dashboard-title-row p { max-width:760px; margin:0; line-height:1.6; }
body[data-nh-theme] .dashboard-live-pill { align-self:flex-start; margin-top:4px; }

body[data-nh-theme] .dashboard-stat-grid {
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:var(--nh-card-gap,16px) !important;
  margin:0 !important;
}
body[data-nh-theme] .dashboard-stat {
  min-height:112px;
  padding:16px !important;
  grid-template-columns:48px minmax(0,1fr) !important;
  grid-template-rows:auto auto auto !important;
  column-gap:12px !important;
  align-content:center;
}
body[data-nh-theme] .dashboard-stat-icon { width:44px !important; height:44px !important; grid-row:1/4; }
body[data-nh-theme] .dashboard-stat > strong { font-size:clamp(23px,1.8vw,31px) !important; line-height:1.1; }

body[data-nh-theme] .dashboard-main-grid {
  gap:var(--nh-card-gap,16px) !important;
  margin:0 !important;
}
body[data-nh-theme] .dashboard-panel { padding:clamp(15px,1.25vw,21px) !important; }
body[data-nh-theme] .dashboard-panel-head { min-height:42px; margin-bottom:14px !important; }
body[data-nh-theme] .dashboard-panel-head h2 { margin-top:3px !important; line-height:1.2; }
body[data-nh-theme] .dashboard-activity-list,
body[data-nh-theme] .dashboard-dialogue-list { gap:9px !important; }
body[data-nh-theme] .dashboard-activity-item,
body[data-nh-theme] .dashboard-dialogue-item { min-height:58px; padding:10px 12px !important; }

body[data-nh-theme] .inspector { width:auto; }
body[data-nh-theme] .inspector-head { min-height:58px; padding:12px 14px !important; position:sticky; top:0; z-index:4; backdrop-filter:blur(12px); }
body[data-nh-theme] .inspector [data-inspector-view] { padding:12px !important; }
body[data-nh-theme] .inspector-section { margin-bottom:12px !important; }
body[data-nh-theme] .inspector-section-head { min-height:42px; padding:10px 12px !important; }
body[data-nh-theme] .inspector-section-body { padding:12px !important; }

@media (max-width:1500px) and (min-width:1025px){
  body[data-nh-theme] .app-shell { grid-template-columns:min(var(--nh-rail-width,244px),224px) minmax(0,1fr) min(var(--nh-inspector-width,312px),288px) !important; }
  body[data-nh-theme] .app-shell.rail-collapsed { grid-template-columns:var(--leftrail-w-collapsed) minmax(0,1fr) min(var(--nh-inspector-width,312px),288px) !important; }
  body[data-nh-theme] .app-shell.inspector-hidden { grid-template-columns:min(var(--nh-rail-width,244px),224px) minmax(0,1fr) 0 !important; }
  body[data-nh-theme] .topbar-brand .pill { display:none !important; }
}

@media (max-width:1280px) and (min-width:1025px){
  body[data-nh-theme] .dashboard-main-grid { grid-template-columns:1fr !important; }
  body[data-nh-theme] .dashboard-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}

@media (max-width:1024px) and (min-width:721px){
  body[data-nh-theme] .app-shell,
  body[data-nh-theme] .app-shell.rail-collapsed,
  body[data-nh-theme] .app-shell.inspector-hidden,
  body[data-nh-theme] .app-shell.inspector-hidden.rail-collapsed {
    grid-template-areas:"topbar topbar" "rail main" "rail dock" !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    grid-template-rows:var(--nh-topbar-height,58px) minmax(0,1fr) auto !important;
  }
  body[data-nh-theme] .leftrail { width:68px; }
  body[data-nh-theme] .leftrail .label,
  body[data-nh-theme] .leftrail .badge,
  body[data-nh-theme] .leftrail-section-title,
  body[data-nh-theme] .leftrail-footer { display:none !important; }
  body[data-nh-theme] .leftrail .nav-item { justify-content:center !important; padding:8px !important; }
  body[data-nh-theme] .inspector {
    position:fixed !important;
    top:var(--nh-topbar-height,58px) !important;
    right:0 !important;
    bottom:0 !important;
    width:min(var(--nh-inspector-width,360px),92vw) !important;
    height:auto !important;
    transform:translateX(102%) !important;
    transition:transform .24s ease !important;
    z-index:var(--z-drawer) !important;
    box-shadow:-18px 0 60px rgba(0,0,0,.68) !important;
  }
  body[data-nh-theme] .app-shell.inspector-open .inspector { transform:translateX(0) !important; }
  body[data-nh-theme] .workspace-inner { padding:clamp(12px,2vw,20px) !important; }
  body[data-nh-theme] .dashboard-stat-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  body[data-nh-theme] .dashboard-main-grid { grid-template-columns:1fr !important; }
  body[data-nh-theme] .topbar-brand { min-width:auto; }
  body[data-nh-theme] .topbar-brand .pill,
  body[data-nh-theme] .topbar-model .label { display:none !important; }
}

@media (max-width:720px){
  body[data-nh-theme] .app-shell,
  body[data-nh-theme] .app-shell.rail-collapsed,
  body[data-nh-theme] .app-shell.inspector-hidden,
  body[data-nh-theme] .app-shell.inspector-hidden.rail-collapsed {
    grid-template-areas:"topbar" "main" "dock" "rail" !important;
    grid-template-columns:1fr !important;
    grid-template-rows:var(--nh-topbar-height,58px) minmax(0,1fr) auto 60px !important;
  }
  body[data-nh-theme] .workspace-inner { padding:12px !important; }
  body[data-nh-theme] .dashboard-title-row { min-height:88px; align-items:flex-start; }
  body[data-nh-theme] .dashboard-live-pill { display:none; }
  body[data-nh-theme] .dashboard-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; }
  body[data-nh-theme] .dashboard-stat { min-height:94px; padding:11px !important; grid-template-columns:36px minmax(0,1fr) !important; column-gap:8px !important; }
  body[data-nh-theme] .dashboard-stat-icon { width:34px !important; height:34px !important; }
  body[data-nh-theme] .dashboard-main-grid { grid-template-columns:1fr !important; gap:10px !important; }
  body[data-nh-theme] .dashboard-panel { padding:13px !important; }
  body[data-nh-theme] .theme-studio-hero { gap:14px; }
  body[data-nh-theme] .topbar-model,
  body[data-nh-theme] .topbar-actions .btn[title="收藏"],
  body[data-nh-theme] .topbar-actions .btn[title="新建"] { display:none !important; }
  body[data-nh-theme] .topbar-brand > span:nth-of-type(2) { display:none !important; }
  body[data-nh-theme] .topbar-search { max-width:none; }
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details:not([open]) > :not(summary) {
  display: none !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details:not([open]) {
  max-height: 36px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 34px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(215, 165, 109, 0.32) !important;
  border-radius: 7px !important;
  color: #f1d99f !important;
  background: rgba(0, 0, 0, 0.42) !important;
  cursor: pointer !important;
  letter-spacing: 0.12em !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details-toggle::-webkit-details-marker {
  display: none !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details-toggle::after {
  content: "+";
  color: #b58cff;
  font-weight: 700;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details[open] {
  display: grid !important;
  gap: 10px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 16px !important;
}

.app-shell.shell-module-dialogue .naheryu-dialogue-source-v2 .source-details[open] .source-details-toggle::after {
  content: "-";
}

/* V28.40: visible group observe rounds control. */
.app-shell.shell-module-dialogue .naheryu-observe-rounds-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(154, 104, 255, 0.44) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 18% 22%, rgba(164, 94, 255, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(18, 10, 32, 0.92), rgba(6, 5, 9, 0.88)) !important;
  color: #ead8ff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 226, 174, 0.08),
    0 0 16px rgba(135, 74, 255, 0.16) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
}

.app-shell.shell-module-dialogue .naheryu-observe-rounds-chip[hidden] {
  display: none !important;
}

.app-shell.shell-module-dialogue .naheryu-observe-rounds-chip input {
  width: 54px !important;
  min-width: 54px !important;
  height: 24px !important;
  padding: 2px 6px !important;
  border: 1px solid rgba(216, 174, 107, 0.42) !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff4c7 !important;
  text-align: center !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 10px rgba(122, 68, 255, 0.16) !important;
}

.app-shell.shell-module-dialogue #dialogue-group-floating-rounds,
.app-shell.shell-module-dialogue #dialogue-group-rounds {
  min-width: 54px !important;
  width: 54px !important;
  text-align: center !important;
}

/* V28.42: eight-axis battle reference coefficient, shown as relative anchors rather than absolute power. */
.naheryu-battle-ref-mini,
.naheryu-battle-ref-panel {
  --battle-gold: rgba(231, 184, 103, 0.92);
  --battle-line: rgba(224, 171, 92, 0.28);
  --battle-violet: rgba(159, 100, 255, 0.28);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--battle-line);
  background:
    radial-gradient(circle at 16% 12%, rgba(170, 96, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(20, 12, 32, 0.86), rgba(3, 4, 7, 0.86));
  box-shadow:
    inset 0 0 0 1px rgba(255, 232, 186, 0.055),
    0 0 18px rgba(114, 56, 255, 0.12);
}

.naheryu-battle-ref-mini::before,
.naheryu-battle-ref-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.36;
  background:
    linear-gradient(90deg, transparent, rgba(159, 108, 255, 0.18), transparent),
    repeating-linear-gradient(90deg, rgba(255, 211, 140, 0.08) 0 1px, transparent 1px 18px);
  mix-blend-mode: screen;
}

.naheryu-battle-ref-mini {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 2px 9px;
  width: min(100%, 230px);
  margin-top: 8px;
  padding: 7px 9px 8px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.naheryu-battle-ref-mini .battle-ref-mini-label {
  color: #d9bdff;
  font-weight: 800;
  text-transform: uppercase;
}

.naheryu-battle-ref-mini strong {
  justify-self: end;
  color: #ffe4aa;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.naheryu-battle-ref-mini em {
  grid-column: 1 / -1;
  color: rgba(141, 231, 242, 0.92);
  font-style: normal;
}

.naheryu-battle-ref-mini > i,
.naheryu-battle-ref-total {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: 4px;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: inset 0 0 0 1px rgba(233, 182, 99, 0.18);
}

.naheryu-battle-ref-mini > i::after,
.naheryu-battle-ref-total > i {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--value, 0) * 1%);
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #9a68ff, #4ee0f0, #ffe4a1);
  box-shadow: 0 0 10px rgba(137, 94, 255, 0.42);
}

.naheryu-battle-ref-panel {
  display: grid;
  gap: 9px;
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border-radius: 8px;
}

.naheryu-battle-ref-panel header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  align-items: baseline;
}

.naheryu-battle-ref-panel header span {
  color: #d9bdff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.naheryu-battle-ref-panel header strong {
  color: #ffe4aa;
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.naheryu-battle-ref-panel header em {
  grid-column: 1 / -1;
  color: rgba(141, 231, 242, 0.92);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.naheryu-battle-ref-panel p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(222, 207, 181, 0.72);
  font-size: 11px;
  line-height: 1.55;
}

.naheryu-battle-ref-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.naheryu-battle-ref-row {
  display: grid;
  grid-template-columns: 44px 42px 44px minmax(52px, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: rgba(237, 222, 192, 0.82);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.naheryu-battle-ref-row span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgba(255, 235, 190, 0.86);
  font-weight: 800;
  white-space: nowrap;
}

.naheryu-battle-ref-row span b {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--dim-color);
  box-shadow: 0 0 10px var(--dim-color);
}

.naheryu-battle-ref-row strong,
.naheryu-battle-ref-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.naheryu-battle-ref-row strong {
  color: #f4d18c;
  text-align: right;
}

.naheryu-battle-ref-row em {
  color: rgba(141, 231, 242, 0.92);
  font-style: normal;
  text-align: right;
}

.naheryu-battle-ref-row > i {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: inset 0 0 0 1px rgba(233, 182, 99, 0.16);
}

.naheryu-battle-ref-row > i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--value, 0) * 1%);
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #9a68ff, var(--dim-color), #ffe4a1);
  box-shadow: 0 0 8px var(--dim-color);
}

.naheryu-battle-ref-panel.compact {
  padding: 9px;
}

.naheryu-battle-ref-panel.compact .naheryu-battle-ref-row {
  grid-template-columns: 42px 38px 42px minmax(44px, 1fr);
  gap: 5px;
}

.charlib-detail-analysis .naheryu-battle-ref-detail-slot {
  grid-column: 1 / -1;
}

.charlib-detail-analysis .naheryu-battle-ref-panel {
  margin-top: 8px;
}

.dashboard-character-meta .naheryu-battle-ref-mini {
  width: 100%;
  margin-top: 6px;
}

.dashboard-summon-meta .naheryu-battle-ref-summon-slot {
  display: block;
  width: min(100%, 260px);
}

.dashboard-summon-meta .naheryu-battle-ref-mini {
  width: 100%;
  margin-top: 2px;
}

.worldbook-entry-row .naheryu-battle-ref-mini {
  width: 100%;
  margin: 6px 0 0;
}

.worldbook-inspector-card .naheryu-battle-ref-panel {
  margin-top: 12px;
}

.naheryu-dialogue-source-v2 .naheryu-battle-ref-source-slot {
  min-width: 0;
}

.naheryu-dialogue-source-v2 .naheryu-battle-ref-panel {
  margin-top: 0;
}

.naheryu-dialogue-source-v2 .naheryu-battle-ref-panel header strong {
  font-size: 15px;
}

.app-shell .worldbook-editor-hero {
  grid-template-columns: minmax(118px, 178px) minmax(0, 1fr) !important;
  align-items: start !important;
  overflow: visible !important;
}

.app-shell .worldbook-editor-title {
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.app-shell .worldbook-editor-title input,
.app-shell .worldbook-editor-title textarea {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 980px) {
  .naheryu-battle-ref-row,
  .naheryu-battle-ref-panel.compact .naheryu-battle-ref-row {
    grid-template-columns: 42px 36px minmax(38px, 1fr);
  }

  .naheryu-battle-ref-row > i {
    grid-column: 1 / -1;
  }
}

/* ═══ V28.57 世界書排版：條目內容防擠壓變形 ═══
   三欄工作區的 grid 子項沒有 min-width:0 時，長字串（關鍵字、UID、內文）
   會把欄位撐爆或被壓成一直條。以下規則讓內容永遠換行、輸入框吃滿欄寬。 */
.app-shell .worldbook-shell-grid.worldbook-shell-workspace > * {
  min-width: 0 !important;
}

.app-shell .worldbook-library-pane,
.app-shell .worldbook-editor-pane,
.app-shell .worldbook-inspector-pane,
.app-shell .worldbook-entry-list,
.app-shell .worldbook-entry-row,
.app-shell .worldbook-entry-editor,
.app-shell .worldbook-entry-chip,
.app-shell .worldbook-library-item,
.app-shell .worldbook-inspector-card,
.app-shell .worldbook-inline-grid > *,
.app-shell .worldbook-entry-tuning > * {
  min-width: 0;
}

.app-shell .worldbook-entry-row,
.app-shell .worldbook-library-item,
.app-shell .worldbook-entry-chip,
.app-shell .worldbook-inspector-card,
.app-shell .worldbook-shape-summary,
.app-shell .worldbook-entry-uid {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-shell .worldbook-editor-pane input,
.app-shell .worldbook-editor-pane textarea,
.app-shell .worldbook-editor-pane select,
.app-shell .worldbook-entry-editor input,
.app-shell .worldbook-entry-editor textarea,
.app-shell .worldbook-entry-editor select,
.app-shell .worldbook-content-editor textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.app-shell .worldbook-content-editor textarea {
  min-height: 220px;
  resize: vertical;
  white-space: pre-wrap;
}

.app-shell .worldbook-entry-list {
  overflow-x: hidden;
}

/* ═══ V28.57 圖鑑卡片版型（圖二模式）═══
   卡片資訊區固定高度放不下戰鬥參考小盒，會把名稱/座標擠出畫面。
   小盒一律不在卡片上顯示（詳情面板的八維戰鬥參考保留），
   並保證 名稱 → R座標 → 描述 的順序永遠可見。 */
.app-shell .charlib-shell-card-body .naheryu-battle-ref-mini-slot,
.app-shell .charlib-shell-card .naheryu-battle-ref-mini-slot {
  display: none !important;
}

.app-shell .charlib-shell-card-body {
  justify-content: flex-start !important;
}

.app-shell .charlib-shell-card-body strong {
  display: block !important;
  order: -3;
}

.app-shell .charlib-shell-card-body small {
  display: block !important;
  order: -2;
}

.app-shell .charlib-shell-card-body em {
  order: -1;
}

/* V28.62: when opening a character library card for full-profile editing,
   show the legacy character-card editor that the compact dialogue layout hides. */
body.charlib-editing .app-shell.shell-module-dialogue #result-area,
body.charlib-editing .app-shell.shell-module-dialogue #dialogue-section {
  overflow: auto !important;
}

body.charlib-editing .app-shell.shell-module-dialogue .charlib-editor-host,
body.charlib-editing .app-shell.shell-module-dialogue #dialogue-section > div:has(#dialogue-character-card) {
  display: block !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.charlib-editing .app-shell.shell-module-dialogue #dialogue-character-card {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

body.charlib-editing .app-shell.shell-module-dialogue #dialogue-chat-box {
  display: none !important;
}

body.charlib-editing .app-shell.shell-module-dialogue #dialogue-section > .naheryu-dialogue-chat-layout,
body.charlib-editing .app-shell.shell-module-dialogue .naheryu-dialogue-side-source {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   V28.103 儀表板修正
   1) 最近角色（RECENT CHARACTERS）排版歪：卡片內 button 是 display:grid
      但沒指定欄，欄寬會被名稱長度撐開 → 頭像被撐成不同寬度、溢出各自的
      94px 卡格，把「戰鬥參考」小盒推到不同高度、看起來歪歪的。
      鎖成單一 minmax(0,1fr) 欄即可讓四張頭像等寬、戰鬥參考對齊。
   2) 最新召喚圖顯示不完全：召喚頭像被硬鎖 aspect-ratio:4/5 + min-height，
      非直式（寬幅／方形／雷達）圖在高瘦框內 object-fit:contain 只剩中間一
      條、上下大量留白，看起來「顯示不完整」。改成框高隨圖片自適應
      （height:auto，200~380px 之間），圖片以自身比例完整呈現。
   ───────────────────────────────────────────────────────────── */
.dashboard-character-tile button {
  grid-template-columns: minmax(0, 1fr) !important;
}

.dashboard-summon-avatar {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: 380px !important;
  align-self: center !important;
}

.dashboard-summon-avatar img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 360px !important;
  object-fit: contain !important;
}

/* V28.217 「推進劇情」強按鈕：紫金強調，跟一般金色快速指令區隔開，一眼看得到 */
.dock-input .quick-cmd.quick-cmd-strong {
  border-color: rgba(201, 162, 255, 0.7) !important;
  background:
    linear-gradient(180deg, rgba(154, 107, 255, 0.26), rgba(0, 0, 0, 0.34)),
    radial-gradient(circle at 50% 0%, rgba(201, 162, 255, 0.22), transparent 60%),
    rgba(10, 6, 16, 0.92) !important;
  color: #f1e8ff !important;
  font-weight: 800 !important;
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 255, 0.16),
    0 0 12px rgba(154, 107, 255, 0.22) !important;
}
.dock-input .quick-cmd.quick-cmd-strong:hover {
  border-color: rgba(226, 205, 255, 0.95) !important;
  box-shadow:
    inset 0 0 16px rgba(154, 107, 255, 0.2),
    0 0 22px rgba(154, 107, 255, 0.34) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   V28.349 角色資訊卡（來源面板）截斷修正
   欄寬鎖在 minmax(182px, 224px)，但卡內名稱、好感列、A/B 切換 chips
   實際會撐到 230~252px；面板本身 overflow-x:hidden，於是右半截被裁掉
   （長角色名只看得到「深淵的挑戰者・莉莉絲 (L」、好感 %數看不到）。
   對策：欄位放寬一點，並強制卡內元素可收縮＋可換行。
   ═══════════════════════════════════════════════════════════════════ */
/* 真正的成因：.source-details 是 grid，軌道以 max-content 決定寬度（252px），
   遠大於面板內容區（200px）；grid 項目預設 min-width:auto 不肯收縮，於是整塊
   撐破容器，再被面板的 overflow-x:hidden 裁掉。讓軌道與項目都能收縮即可。 */
.naheryu-chat-source-panel:not(.is-collapsed) > * {
  min-width: 0 !important;
}
.naheryu-chat-source-panel:not(.is-collapsed) .source-details {
  grid-template-columns: minmax(0, 1fr) !important;
}
.naheryu-chat-source-panel:not(.is-collapsed) .source-details > *,
.naheryu-chat-source-panel:not(.is-collapsed) .source-headline > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 好感難易度調整那組（提升強度／難度曲線／單輪上限）的 label / select / small
   帶著自己的內距，仍會比內容區寬 9px。 */
.naheryu-chat-source-panel:not(.is-collapsed) .source-details label,
.naheryu-chat-source-panel:not(.is-collapsed) .source-details select,
.naheryu-chat-source-panel:not(.is-collapsed) .source-details input,
.naheryu-chat-source-panel:not(.is-collapsed) .source-details p,
.naheryu-chat-source-panel:not(.is-collapsed) .source-details em,
.naheryu-chat-source-panel:not(.is-collapsed) .source-details small {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.naheryu-chat-source-panel:not(.is-collapsed) .source-details,
.naheryu-chat-source-panel:not(.is-collapsed) .source-headline,
.naheryu-chat-source-panel:not(.is-collapsed) .source-affinity-top,
.naheryu-chat-source-panel:not(.is-collapsed) .source-group-switch,
.naheryu-chat-source-panel:not(.is-collapsed) .source-expandable {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.naheryu-chat-source-panel:not(.is-collapsed) .source-headline h3,
.naheryu-chat-source-panel:not(.is-collapsed) .source-headline p,
.naheryu-chat-source-panel:not(.is-collapsed) .source-affinity-top,
.naheryu-chat-source-panel:not(.is-collapsed) .source-affinity-top > span,
.naheryu-chat-source-panel:not(.is-collapsed) .source-affinity-top b,
.naheryu-chat-source-panel:not(.is-collapsed) .source-group-switch small,
.naheryu-chat-source-panel:not(.is-collapsed) .source-details em,
.naheryu-chat-source-panel:not(.is-collapsed) .source-details small {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* 好感／信賴：標題與「LV1 · 陌生 · 0 / 100」擠不下時換行，不要把數值推出視野 */
.naheryu-chat-source-panel:not(.is-collapsed) .source-affinity-top {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 6px !important;
  row-gap: 2px !important;
}
.naheryu-chat-source-panel:not(.is-collapsed) .source-affinity-top > span,
.naheryu-chat-source-panel:not(.is-collapsed) .source-affinity-top b {
  flex: 1 1 auto !important;
}

/* A／B 切換 chips 列同樣不得撐破欄寬 */
.naheryu-chat-source-panel:not(.is-collapsed) .source-group-switch {
  flex-wrap: wrap !important;
}

/* ═══════════════════════════════════════════════════════════════════
   V28.356 WorldX-main 1&1 即時通訊版型
   仿 WorldX-main 專案 client/src/ui/panels/DialogueChatView.tsx 的 "im" 樣式：
   兩人一左一右、氣泡外角朝說話者、頭像貼邊、列距收緊。
   只在 #dialogue-messages.worldx-duet-view 生效，不影響多人群聊與單聊。
   ═══════════════════════════════════════════════════════════════════ */
#dialogue-messages.worldx-duet-view .naheryu-chat-row-assistant {
  margin-bottom: 6px !important;
}

/* 角色 B（第二位發言者）整列鏡像到右側 */
#dialogue-messages.worldx-duet-view .naheryu-chat-row-assistant[data-speaker-idx="1"] {
  flex-direction: row-reverse !important;
}
#dialogue-messages.worldx-duet-view .naheryu-chat-row-assistant[data-speaker-idx="1"] .naheryu-chat-stack {
  align-items: flex-end !important;
}
#dialogue-messages.worldx-duet-view .naheryu-chat-row-assistant[data-speaker-idx="1"] .naheryu-speaker-line {
  text-align: right !important;
  justify-content: flex-end !important;
}

/* 氣泡：外角朝向說話者那一側（與 WorldX-main 的 4px/12px 圓角一致） */
#dialogue-messages.worldx-duet-view .naheryu-chat-row-assistant .naheryu-chat-bubble {
  max-width: 88% !important;
  width: fit-content !important;
}
#dialogue-messages.worldx-duet-view .naheryu-chat-row-assistant[data-speaker-idx="0"] .naheryu-chat-bubble {
  border-radius: 4px 12px 12px 12px !important;
}
#dialogue-messages.worldx-duet-view .naheryu-chat-row-assistant[data-speaker-idx="1"] .naheryu-chat-bubble {
  border-radius: 12px 4px 12px 12px !important;
  margin-left: auto !important;
}

/* 1&1 沒有玩家發話，若真的出現（話題被記成 user）就置中成場景提示 */
#dialogue-messages.worldx-duet-view .naheryu-chat-row-user .naheryu-chat-bubble {
  opacity: .72 !important;
  font-size: .78rem !important;
}