:root {
  --font-head: 'IM Fell English', Georgia, serif;
  --font-body: 'Source Sans 3', system-ui, sans-serif;
  /* Rustic desk theme: dark wood everywhere by default (top bar, sidebar,
     page background). The "paper" tokens further down re-skin #main and
     modals as parchment, so text there is dark ink on cream. */
  color-scheme: dark;
  --bg: #1c120b;
  --surface: #2a1d14;
  --surface-2: #3a281b;
  --ink: #EDE4CE;
  --ink-soft: #bcae8e;
  --indigo: #140c07;
  --indigo-2: #1c120b;
  --teal: #4FB3AC;
  --teal-soft: #1d332f;
  --brass: #D2A85E;
  --brass-soft: #3a2c17;
  --coral: #D98467;
  --pink: #E38AC4;
  --pink-soft: #3a1f33;
  --border: #4a3523;
  --shadow: rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(30, 20, 13, 0.7);
  --glass-sidebar: linear-gradient(rgba(14, 8, 4, 0.84), rgba(14, 8, 4, 0.92));
  --glass-border: rgba(210, 168, 94, 0.30);
  --glass-highlight: rgba(255, 214, 150, 0.08);
  --wood-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='480'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.004 0.16' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0.95 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --wood-streak: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='300'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.012 0.5' numOctaves='2' seed='19'/%3E%3CfeColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.02  0 0 0 0 0.01  0 0 0 0.9 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --paper-noise: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.8' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.33  0 0 0 0 0.15  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --sheet-bg: var(--paper-noise), linear-gradient(135deg, #eadfc0, #dccc9f);
  --card-bg: var(--paper-noise), linear-gradient(135deg, #f8f0da, #efe3c2);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Parchment: everything inside the main sheet and modals is re-skinned with
   paper tokens, so every var(--ink)/var(--teal)/... below reads as dark ink
   on cream without touching each rule individually. */
#main, .modal {
  --surface: #FBF5E4;
  --surface-2: #E4D6B1;
  --ink: #2A2318;
  --ink-soft: #675737;
  --teal: #1F6B66;
  --teal-soft: #CDE3DC;
  --brass: #7C5619;
  --brass-soft: #EBD9AE;
  --coral: #A3452A;
  --pink: #9A3A70;
  --pink-soft: #F0D3E3;
  --border: #BFA97A;
  --shadow: rgba(70, 45, 10, 0.32);
  --glass-bg: rgba(255, 250, 235, 0.55);
  --glass-border: rgba(110, 80, 30, 0.30);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  color: var(--ink);
}
html, body {
  height: 100%;
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; }
html { background: #1a0f08; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* The desk itself: plank seams + two layers of drawn grain, pinned behind
   everything. A fixed pseudo-element (rather than background-attachment:
   fixed on body) keeps scrolling smooth. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(0, 0, 0, 0.6) 118px 121px, rgba(255, 255, 255, 0.05) 121px 123px),
    var(--wood-grain),
    var(--wood-streak),
    #2a190e;
}
h1, h2, h3, .display {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: 0;
}
/* ---------- Top bar (full width, above sidebar + main both) ---------- */
#topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--glass-sidebar);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 16px var(--shadow);
  color: #E9E2CE;
}
.topbar-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; cursor: pointer; background: none; border: none; padding: 0; }
.topbar-logo { flex-shrink: 0; display: block; }
.welcome-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.welcome-hero-text { min-width: 0; }
.welcome-logo { width: 160px; height: 160px; flex-shrink: 0; }
.login-logo { display: block; width: 110px; height: 110px; margin: 0 auto 8px; }
@media (max-width: 640px) {
  .welcome-hero { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .welcome-logo { width: 110px; height: 110px; }
}
.topbar-brand-name { font-family: var(--font-head); font-size: 20px; font-weight: 400; color: #F3ECD8; }
.topbar-back { flex-shrink: 0; white-space: nowrap; }
.topbar-back:disabled { opacity: 0.35; cursor: default; }
.search-wrap { position: relative; flex: 1; max-width: 420px; }
.search-input { margin: 0; }
#topbar .search-input { background: rgba(255, 255, 255, 0.07); border-color: rgba(210, 168, 94, 0.28); }
#topbar .btn-ghost { border-color: rgba(210, 168, 94, 0.35); }
.search-results { top: calc(100% + 4px); left: 0; right: 0; width: auto; }
.topbar-account { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 13px; color: #C9C1A8; }
.topbar-account .btn-text { white-space: nowrap; }
.topbar-profile { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 20px; }
.topbar-profile:hover { background: rgba(255,255,255,0.08); }
.topbar-help-short { display: none; }
@media (max-width: 760px) {
  #topbar { gap: 10px; padding: 0 14px; }
  .topbar-brand-name { display: none; }
  .topbar-account span { display: none; }
  .topbar-account .topbar-help-short { display: inline; }
}

#app-shell {
  display: flex;
  /* 100% would resolve against #app, which has no explicit height of its
     own (block, height: auto) -- so the percentage was silently ignored
     and this row only ever grew as tall as its content. 100vh (minus the
     topbar's own height) sidesteps that broken chain and guarantees the
     row -- and so the sidebar, via the default align-items: stretch -- is
     always at least one viewport (below the topbar) tall. */
  min-height: calc(100vh - 60px);
}
/* ---------- Sidebar ---------- */
#sidebar {
  width: 272px;
  flex-shrink: 0;
  background: var(--glass-sidebar);
  border-right: 1px solid var(--glass-border);
  box-shadow: inset -1px 0 0 var(--glass-highlight), 6px 0 16px var(--shadow);
  color: #E9E2CE;
}
/* #sidebar stretches to the full page height (it's a flex item next to
   #main, which is often taller than one viewport) so the glass background
   never runs out partway down a long page. The nav itself stays pinned
   just below the topbar via this inner wrapper instead. */
.sidebar-scroll {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
  overflow-y: auto;
}
.nav-section {
  padding: 0 12px;
  margin-bottom: 6px;
}
.nav-label {
  font-size: 11px;
  color: #a89a78;
  padding: 10px 8px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #D8D0B9;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  line-height: 1.3;
}
.nav-item:hover { background: rgba(255,255,255,0.06); }
.nav-item.active { background: var(--teal); color: #08211F; font-weight: 600; }
.nav-item .nav-icon { flex-shrink: 0; opacity: 0.75; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item .lock { flex-shrink: 0; opacity: 0.7; }
.nav-item.active .lock { opacity: 1; }
.nav-add {
  margin: 6px 10px 2px;
  background: transparent;
  border: 1px dashed rgba(216,208,185,0.35);
  color: #C9C1A8;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.nav-add:hover { border-color: var(--teal); color: var(--teal); }
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ---------- Main ---------- */
/* The main column is a sheet of parchment lying on the desk. Long detail
   pages need one steady reading surface, so the paper covers the whole
   column and the cards inside it sit on top as index cards. */
#main {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
  margin: 28px 28px 40px;
  padding: 36px 44px 56px;
  max-width: 900px;
  background: var(--sheet-bg);
  border: 1px solid #b79f6e;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), inset 0 0 50px rgba(120, 85, 30, 0.28);
}
@media (max-width: 760px) {
  #app-shell { flex-direction: column; }
  #sidebar { width: 100%; }
  .sidebar-scroll { position: relative; top: 0; height: auto; }
  #main { align-self: stretch; margin: 12px 10px 28px; padding: 24px 18px 40px; max-width: none; }
}

.eyebrow { color: var(--teal); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-title { font-size: 34px; margin: 0 0 4px; }
.page-sub { color: var(--ink-soft); font-size: 14.5px; margin: 0; }
.btn {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-primary { background: var(--teal); color: #06201D; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-text { background: none; border: none; color: var(--teal); font-weight: 600; cursor: pointer; font-size: 13.5px; padding: 4px 2px; font-family: inherit; }
.btn-danger { background: none; border: none; color: var(--coral); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
/* Match the Story list's own kind-tag colors (.story-kind-travel/.story-kind-battle) so each quick-add button visually hints at what it creates -- filled, same as .btn-primary, not outlined. */
.btn-amber { background: #D2A85E; color: #2C1B05; }
.btn-amber:hover { filter: brightness(1.06); }
.btn-pink { background: #D983B8; color: #2C0A1F; }
.btn-pink:hover { filter: brightness(1.06); }
/* On parchment the --teal token is a dark ink-teal (for text/links), which
   would sink a filled button's dark label -- keep the fills bright. */
#main .btn-primary, .modal .btn-primary { background: #2C8C86; color: #FFFDF5; }

.card {
  background: var(--card-bg);
  border: 1px solid #c5ae7c;
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 4px 10px rgba(70, 45, 10, 0.28), inset 0 0 18px rgba(150, 110, 40, 0.16);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-link { cursor: pointer; }
.card-link:hover {
  box-shadow: 0 10px 20px rgba(70, 45, 10, 0.36), inset 0 0 18px rgba(150, 110, 40, 0.16);
  transform: translateY(-2px) rotate(-0.4deg);
}
.card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-title { font-family: var(--font-head); font-size: 19px; font-weight: 400; margin: 0 0 3px; }
.card-meta { font-size: 12.5px; color: var(--ink-soft); }
.link-url { margin-top: 2px; word-break: break-all; }
.card-desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }

.vis-private-icon { display: inline-flex; align-items: center; color: var(--brass); vertical-align: middle; }

.tag { font-size: 12px; background: var(--surface-2); color: var(--ink-soft); padding: 2px 9px; border-radius: 20px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tab {
  background: none; border: none; font-family: inherit; font-size: 14px;
  padding: 9px 4px; margin-right: 18px; color: var(--ink-soft); cursor: pointer;
  border-bottom: 2px solid transparent; font-weight: 500;
}
.tab.active { color: var(--ink); border-color: var(--teal); font-weight: 600; }

.wizard-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.wizard-tab {
  background: none; border: none; font-family: inherit; font-size: 14px;
  padding: 9px 4px; margin-right: 18px; color: var(--ink-soft); cursor: pointer;
  border-bottom: 2px solid transparent; font-weight: 500;
}
.wizard-tab.active { color: var(--ink); border-color: var(--teal); font-weight: 600; }
.wizard-error { color: var(--coral); font-size: 13px; margin: 0 0 10px; display: none; }
.wizard-foot-group { display: flex; gap: 10px; }

.card-with-thumb { display: flex; align-items: center; gap: 10px; }
.card-with-thumb > div { min-width: 0; flex: 1; }
.card-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

.portrait-upload {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: var(--surface); margin: 6px 0 14px;
}
.portrait-preview { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.portrait-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.portrait-status { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.empty {
  text-align: center; padding: 50px 20px; color: var(--ink-soft);
  border: 1px dashed var(--border); border-radius: 12px;
}
.empty .display { font-size: 19px; color: var(--ink); margin-bottom: 6px; }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 14px 0 5px; }
label:first-child { margin-top: 0; }
label.checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
label.checkbox-row input[type=checkbox] { width: auto; }
input[type=text], input[type=number], input[type=url], input[type=email], input[type=password], textarea, select {
  width: 100%; font-family: var(--font-body); font-size: 15px;
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; font-family: 'JetBrains Mono', ui-monospace, monospace; line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.field-row { display: flex; gap: 12px; }
.field-row > div { flex: 1; }
.hier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; }
@media (max-width: 500px) { .hier-grid { grid-template-columns: repeat(2, 1fr); } }

.loc-tree { list-style: none; margin: 0; padding: 0; }
.loc-tree .loc-tree { margin: 2px 0 2px 20px; padding-left: 12px; border-left: 1px dashed var(--border); }
.loc-tree-item { margin: 1px 0; }
.loc-tree-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.loc-tree-row:hover { background: var(--surface-2); }
.loc-tree-caret { width: 12px; flex-shrink: 0; color: var(--ink-soft); font-size: 11px; text-align: center; }
/* A real button with a padded hit box (expanded via negative margin so the
   glyph itself doesn't visually shift) -- the plain 12px span was too small
   a target next to the adjacent name link, so real clicks aimed at the
   arrow often landed on the link and navigated instead of toggling. */
.loc-tree-caret-toggle {
  background: none; border: none; font: inherit; color: var(--ink-soft); cursor: pointer;
  padding: 6px 10px; margin: -6px -6px -6px -10px; border-radius: 6px;
}
.loc-tree-caret-toggle:hover { background: var(--surface-2); color: var(--teal); }
.loc-tree-link { font-weight: 600; color: var(--ink); }
.loc-tree-row:hover .loc-tree-link { color: var(--teal); }
.loc-tree-tag { font-size: 10.5px; padding: 1px 7px; }

.loc-picker, .camp-picker, .user-picker { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); margin: 6px 0 14px; }
.loc-picker-current, .camp-picker-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.loc-picker-path { font-size: 13.5px; color: var(--ink); flex: 1; min-width: 120px; }
.loc-picker-browser, .camp-picker-browser { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.loc-picker-crumbs { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }
.loc-picker-crumb { cursor: pointer; color: var(--teal); }
.loc-picker-crumb:hover { text-decoration: underline; }
.loc-picker-list, .camp-picker-list, .user-picker-list, .wikilink-result-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.loc-picker-row, .camp-picker-row, .user-picker-row, .wikilink-result-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.loc-picker-row:last-child, .camp-picker-row:last-child, .user-picker-row:last-child, .wikilink-result-row:last-child { border-bottom: none; }
.loc-picker-row:hover, .camp-picker-row:hover, .user-picker-row:hover, .wikilink-result-row:hover { background: var(--surface-2); }
.loc-picker-row.sel, .camp-picker-row.sel, .user-picker-row.sel { background: var(--teal-soft); }
.loc-picker-drill { margin-left: auto; color: var(--ink-soft); }
.user-picker-current { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
.user-picker-name { flex: 1; color: var(--ink); }
.user-picker-list { max-height: 160px; }
.user-picker-email { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.loc-picker-search, .camp-picker-search, .user-picker-search { margin-bottom: 8px; font-size: 13px; padding: 7px 10px; }
.loc-picker-path-hint { font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.camp-picker-chips { font-size: 13.5px; color: var(--ink); flex: 1; min-width: 120px; }
.camp-picker-check { margin-left: auto; color: var(--teal); font-weight: 700; visibility: hidden; }
.camp-picker-row.sel .camp-picker-check { visibility: visible; }
.hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.vis-toggle { display: flex; gap: 8px; margin: 14px 0; }
.vis-opt {
  flex: 1; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px;
  cursor: pointer; background: var(--surface);
}
.vis-opt.sel { border-color: var(--teal); background: var(--teal-soft); }
.vis-opt-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.vis-opt-desc { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.md-toolbar { display: flex; gap: 3px; margin-bottom: 6px; flex-wrap: wrap; }
.md-btn {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 6px; cursor: pointer;
}
.md-btn:hover { border-color: var(--teal); }
.md-view-toggle { margin-left: auto; display: flex; gap: 2px; }
.md-editor-wrap { position: relative; }
.md-editor-wrap textarea { min-height: 160px; }
.md-preview {
  color: var(--ink-soft); font-size: 14px; line-height: 1.65;
}
.md-preview :first-child { margin-top: 0; }
/* A white-text utility, applied wherever body copy needs to read brighter
   than the default --ink-soft: Locations detail, a Campaign's Lore &
   Overview tab, and a Link Library card's notes. Titles within a scoped
   block (including a heading embedded in markdown, e.g. a "## Section" in
   a campaign's lore) use --ink-soft instead, which is a light blue in the
   dark theme. */
.prose-white, .prose-white p, .prose-white li { color: var(--ink); }
.prose-white h1, .prose-white h2, .prose-white h3 { color: var(--ink-soft); }
.title-blue { color: var(--ink); }
.md-preview h1, .md-preview h2, .md-preview h3 { font-family: var(--font-head); margin: 14px 0 6px; }
.md-preview p { margin: 0 0 10px; }
.md-preview ul { margin: 0 0 10px; padding-left: 20px; }
.md-preview a.wikilink { color: var(--teal); text-decoration: none; border-bottom: 1px dotted var(--teal); cursor: pointer; }
.md-preview a.wikilink.missing { color: var(--coral); border-bottom-style: dashed; }
.md-preview a.ext-link { color: var(--brass); }
.autocomplete {
  position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 18px var(--shadow); max-height: 180px; overflow-y: auto;
  min-width: 200px;
}
.ac-item { padding: 7px 12px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.ac-item:hover, .ac-item.hl { background: var(--teal-soft); }
.ac-type { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; }
.item-copy-picker { margin-bottom: 14px; }
.item-copy-search { position: relative; margin-top: 8px; }
.item-copy-results { top: calc(100% + 4px); left: 0; right: 0; width: auto; }

.backlinks { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
.backlinks-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 8px; font-weight: 700; }
.backlink-item { font-size: 13.5px; padding: 6px 0; cursor: pointer; color: var(--teal); }
.backlink-item:hover { text-decoration: underline; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

.item-group { margin-bottom: 18px; }
.item-group-title { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; font-weight: 600; }

/* Inventory Types page: one accordion section per category (Armor,
   Weapons, General Services...) so they read as separate blocks instead
   of one long page -- see renderInventoryTypesView(). */
.inv-category {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  margin-bottom: 14px; overflow: hidden;
}
.inv-category-header {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: none; border: none; cursor: pointer; padding: 14px 16px; font-family: inherit;
}
.inv-category-header:hover { background: var(--surface-2); }
.inv-category-caret { color: var(--teal); font-size: 13px; width: 12px; flex-shrink: 0; }
.inv-category-title { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: 20px; color: var(--ink); }
.inv-category-count { margin-left: auto; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.inv-category-body { padding: 14px 16px 16px; border-top: 1px solid var(--border); }

.item-table {
  width: 100%; border-collapse: collapse; background: var(--glass-bg);
  border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; font-size: 13.5px;
}
.item-table th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink-soft); padding: 8px 10px; border-bottom: 1px solid var(--glass-border);
}
.item-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.item-table tr:last-child td { border-bottom: none; }
.item-table .md-preview p { margin: 0; }
.item-table-name { font-weight: 600; cursor: pointer; white-space: nowrap; }
.item-table-name:hover { color: var(--teal); }
.item-table-del { width: 1%; text-align: right; }
.item-delete-btn {
  background: none; border: none; color: var(--ink-soft); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.item-delete-btn:hover { color: #c0392b; background: var(--surface-2); }
.item-drag-handle { width: 1%; text-align: center; color: var(--ink-soft); cursor: grab; user-select: none; }
.item-table-row.dragging { opacity: 0.4; }
.item-type-divider td {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
  color: var(--teal); background: var(--surface-2); padding: 5px 10px; border-bottom: 1px solid var(--glass-border);
}
.item-type-divider:first-child td { border-top: none; }

.tag-checklist { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 2px; }
.tag-check { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 400; color: var(--ink); margin: 0; }
.tag-check input { width: auto; }

.tag-tree { padding: 4px 2px; max-height: 260px; overflow-y: auto; }
.tag-group { margin-bottom: 10px; }
.tag-group-check { font-weight: 700; text-transform: capitalize; }
.tag-group-children { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 4px 0 0 24px; }

.story-list { display: flex; flex-direction: column; gap: 6px; }
.story-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; cursor: pointer; background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.story-row:hover { background: var(--surface-2); }
.story-row.dragging { opacity: 0.4; }
.story-drag-handle { cursor: grab; color: var(--ink-soft); flex-shrink: 0; font-size: 14px; }
.story-kind-tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 20px; flex-shrink: 0; font-weight: 700;
}
.story-kind-encounter { background: var(--teal-soft); color: var(--teal); }
.story-kind-travel { background: var(--brass-soft); color: var(--brass); }
.story-kind-battle { background: var(--pink-soft); color: var(--pink); }
.story-title { flex: 1; font-weight: 600; }

.party-group { margin-bottom: 14px; }
.party-group-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--glass-border); border-radius: 11px; background: var(--glass-bg);
  cursor: pointer; user-select: none;
}
.party-group-header:hover { border-color: var(--teal); }
.party-group-caret { width: 12px; flex-shrink: 0; color: var(--ink-soft); font-size: 12px; text-align: center; }
.party-group-name { font-family: var(--font-head); font-weight: 400; font-size: 19px; }
.party-group-count { font-size: 12.5px; color: var(--ink-soft); }
.party-group-actions { margin-left: auto; display: flex; gap: 4px; }
.party-group-body { margin: 10px 0 0 16px; padding-left: 14px; border-left: 1px dashed var(--glass-border); }

.player-group { margin-bottom: 10px; }
.player-group-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  cursor: pointer; user-select: none;
}
.player-group-header:hover { border-color: var(--teal); }
.player-group-caret { width: 12px; flex-shrink: 0; color: var(--ink-soft); font-size: 11px; text-align: center; }
.player-group-name { font-family: var(--font-head); font-weight: 400; font-size: 17px; }
.player-group-count { font-size: 12px; color: var(--ink-soft); }
.player-group-actions { margin-left: auto; display: flex; gap: 4px; }
.player-group-icon-btn {
  background: none; border: none; color: var(--ink-soft); cursor: pointer;
  font-size: 13px; padding: 3px 6px; border-radius: 5px;
}
.player-group-icon-btn:hover { background: var(--surface-2); color: var(--teal); }
.player-group-body { margin: 10px 0 0; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(12,6,2,0.68); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal {
  background: var(--sheet-bg); border: 1px solid #b79f6e; border-radius: 4px; padding: 26px 26px 22px;
  max-width: 560px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 40px rgba(120,85,30,0.25);
  margin-bottom: 40px;
}
.modal h2 { margin: 0 0 4px; font-size: 24px; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 10px; }
.modal-wide { max-width: 760px; }
.campaign-checklist {
  max-height: 160px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; background: var(--surface);
}
.campaign-check-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 14px; cursor: pointer; color: var(--ink);
}
.campaign-check-row input { width: auto; margin: 0; flex-shrink: 0; }

.init-quickadd { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.init-quickadd-group { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.init-quickadd-group label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.init-quickadd-picker { position: relative; }
.init-quickadd-results { top: calc(100% + 4px); left: 0; right: 0; width: auto; }
.init-table { width: 100%; border-collapse: collapse; }
.init-table th {
  text-align: left; font-size: 12.5px; color: var(--ink-soft); font-weight: 600;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.init-row td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.init-row.dragging { opacity: 0.4; }
.init-row-friend td:first-child { border-left: 3px solid var(--teal); }
.init-row-enemy td:first-child { border-left: 3px solid var(--coral); }
.init-drag-cell { width: 28px; text-align: center; cursor: grab; color: var(--ink-soft); }
.init-field { margin: 0; }
.init-field-sm { max-width: 70px; }
.init-delete-btn {
  background: none; border: none; color: var(--coral); cursor: pointer;
  font-size: 15px; padding: 2px 6px;
}
.init-empty-row td { color: var(--ink-soft); text-align: center; padding: 18px 10px; }
.init-conditions-cell { position: relative; min-width: 140px; }
.init-condition-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.init-condition-chip {
  font-size: 11.5px; background: var(--brass-soft); color: var(--brass);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
}
.init-condition-add-btn {
  background: none; border: 1px dashed var(--border); color: var(--ink-soft); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 7px; border-radius: 20px; font-family: inherit;
}
.init-condition-add-btn:hover { background: var(--surface-2); }
.init-condition-picker {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px var(--shadow); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 260px; overflow-y: auto; width: max-content;
}
.init-condition-option { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.init-condition-option input { margin: 0; }

.init-battle-list { display: flex; flex-direction: column; }
.init-battle-row { margin-bottom: 10px; }
.init-battle-row .card-row { align-items: center; }
.init-battle-row .card-meta { text-align: right; }
.md-help-row { margin: 18px 0; }
.md-help-label { font-weight: 600; color: var(--teal); margin-bottom: 6px; }
.md-help-cols { display: flex; align-items: flex-start; gap: 12px; }
.md-help-syntax, .md-help-result { flex: 1; min-width: 0; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.md-help-syntax pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13px; }
.md-help-arrow { color: var(--ink-soft); padding-top: 10px; }
@media (max-width: 640px) {
  .md-help-cols { flex-direction: column; }
  .md-help-arrow { display: none; }
}
.link-list-row { list-style: none; padding: 0; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.link-list-row input { flex: 1; }
.icon-x { background: none; border: none; color: var(--coral); cursor: pointer; font-size: 16px; padding: 2px 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ability-section { margin-bottom: 16px; }
.ability-list { list-style: none; padding: 0; margin: 6px 0 0; }
.ability-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.ability-row .ability-name { flex: 0 0 180px; margin: 0; }
.ability-row .ability-desc { flex: 1; font-family: inherit; resize: vertical; margin: 0; }
.ability-row .icon-x { flex-shrink: 0; margin-top: 2px; }
.stat-grid .stat-box { text-align: center; }
.stat-grid label { text-align: center; font-size: 10.5px; margin: 0 0 3px; }
.stat-grid input { text-align: center; padding: 8px 4px; }
.details-toggle { cursor: pointer; color: var(--teal); font-size: 13px; font-weight: 600; margin: 4px 0 10px; user-select: none; }
.info-icon {
  display: inline-block; width: 14px; height: 14px; margin-left: 5px;
  border: 1px solid var(--ink-soft); border-radius: 50%; color: var(--ink-soft);
  font-size: 10.5px; line-height: 13px; text-align: center; cursor: help; font-style: normal;
}
.loading-screen { display:flex; align-items:center; justify-content:center; height:100vh; color: var(--ink-soft); font-family: var(--font-head); font-size:18px; }
.dm-spoiler {
  border: 1px dashed var(--coral); background: var(--brass-soft); color: var(--ink);
  padding: 0 4px; border-radius: 3px; cursor: help;
}
.banner { background: var(--brass-soft); color: var(--brass); border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; }

.import-preview-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.import-preview-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); font-size: 13px; flex-wrap: wrap;
}
.import-preview-row:last-child { border-bottom: none; }
.import-preview-row.error { background: rgba(184, 92, 62, 0.08); }
.import-preview-name { font-weight: 600; }
.import-preview-meta { color: var(--ink-soft); font-size: 12px; }
.import-preview-error { color: var(--coral); font-size: 12px; margin-left: auto; }
.import-fail-list { font-size: 13px; color: var(--ink-soft); padding-left: 18px; margin: 0 0 14px; }