/* Pure CSS master bundle for LD app */
@import url('/css/style.css');
@import url('/css/style-core.css');
@import url('/css/style-mobile.css');
@import url('/css/style-components.css');
@import url('/css/style-steps.css');
@import url('/css/style-theme-surfaces.css');
@import url('/css/ld-ds.css');
@import url('/css/style-print.css');

/* === Pure pass: global visual unification === */
:root{
  --pure-radius: 14px;
  --pure-radius-sm: 10px;
  --pure-shadow: 0 14px 38px rgba(5,10,22,.34);
}

.dashboard-wrap .dashboard-card,
.card,
.panel{
  border-radius: var(--pure-radius) !important;
  box-shadow: var(--pure-shadow);
}

.btn,a.btn,button.btn{
  border-radius: var(--pure-radius-sm) !important;
  font-weight: 700;
  letter-spacing: .015em;
}

.dashboard-grid article.dashboard-card img{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
}

.dashboard-grid .card-action-row{ gap:.5rem; }
.dashboard-grid .card-action-row .btn{ min-width:92px; justify-content:center; }

/* light palette readability */
[data-theme='light'],
[data-theme='parchment'],
[data-theme='dawn'],
[data-theme='ivory']{
  color:#1f2a39;
}

/* === Light theme sheet + builder polish (supplement to surfaces) === */
html[data-theme='light'] .ld-sheet-view,
html[data-theme='dawn'] .ld-sheet-view,
html[data-theme='ivory'] .ld-sheet-view,
html[data-theme='parchment'] .ld-sheet-view {
  color: var(--text);
}

html[data-theme='light'] .notebook-row,
html[data-theme='dawn'] .notebook-row,
html[data-theme='ivory'] .notebook-row,
html[data-theme='parchment'] .notebook-row {
  background: color-mix(in srgb, var(--panel) 96%, white 4%);
  border-color: color-mix(in srgb, var(--stroke) 40%, transparent);
}

html[data-theme='light'] .sheet-edit-input,
html[data-theme='dawn'] .sheet-edit-input,
html[data-theme='ivory'] .sheet-edit-input,
html[data-theme='parchment'] .sheet-edit-input,
html[data-theme='light'] .notebook-add,
html[data-theme='dawn'] .notebook-add,
html[data-theme='ivory'] .notebook-add,
html[data-theme='parchment'] .notebook-add {
  background: var(--input) !important;
  border-color: var(--input-brd) !important;
  color: var(--text) !important;
}
[data-theme='light'] .text-white,
[data-theme='parchment'] .text-white,
[data-theme='dawn'] .text-white,
[data-theme='ivory'] .text-white{ color:#1f2a39 !important; }
[data-theme='light'] .text-white\/70,
[data-theme='parchment'] .text-white\/70,
[data-theme='dawn'] .text-white\/70,
[data-theme='ivory'] .text-white\/70{ color:#44546b !important; }
[data-theme='light'] .text-white\/60,
[data-theme='parchment'] .text-white\/60,
[data-theme='dawn'] .text-white\/60,
[data-theme='ivory'] .text-white\/60{ color:#5a6a82 !important; }

/* Exhaustive light theme text normalization in Pure bundle (catches any remaining light text classes from all views) */
[data-theme='light'] .text-white,
[data-theme='light'] [class*="text-white"],
[data-theme='light'] .text-gray-100,
[data-theme='light'] .text-gray-200,
[data-theme='light'] .text-gray-300,
[data-theme='light'] .text-gray-400,
[data-theme='light'] .text-slate-100,
[data-theme='light'] .text-slate-200,
[data-theme='light'] .text-slate-300,
[data-theme='light'] .text-slate-400,

[data-theme='dawn'] .text-white,
[data-theme='dawn'] [class*="text-white"],
[data-theme='dawn'] .text-gray-100,
[data-theme='dawn'] .text-gray-200,
[data-theme='dawn'] .text-gray-300,
[data-theme='dawn'] .text-gray-400,
[data-theme='dawn'] .text-slate-100,
[data-theme='dawn'] .text-slate-200,
[data-theme='dawn'] .text-slate-300,
[data-theme='dawn'] .text-slate-400,

[data-theme='ivory'] .text-white,
[data-theme='ivory'] [class*="text-white"],
[data-theme='ivory'] .text-gray-100,
[data-theme='ivory'] .text-gray-200,
[data-theme='ivory'] .text-gray-300,
[data-theme='ivory'] .text-gray-400,
[data-theme='ivory'] .text-slate-100,
[data-theme='ivory'] .text-slate-200,
[data-theme='ivory'] .text-slate-300,
[data-theme='ivory'] .text-slate-400,

[data-theme='parchment'] .text-white,
[data-theme='parchment'] [class*="text-white"],
[data-theme='parchment'] .text-gray-100,
[data-theme='parchment'] .text-gray-200,
[data-theme='parchment'] .text-gray-300,
[data-theme='parchment'] .text-gray-400,
[data-theme='parchment'] .text-slate-100,
[data-theme='parchment'] .text-slate-200,
[data-theme='parchment'] .text-slate-300,
[data-theme='parchment'] .text-slate-400 {
  color: #1f2a39 !important;
}

[data-theme='light'] .dashboard-card,
[data-theme='parchment'] .dashboard-card,
[data-theme='dawn'] .dashboard-card,
[data-theme='ivory'] .dashboard-card{
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,244,236,.97));
  border: 1px solid rgba(80,94,112,.24);
}

/* Builder / external sheet table + card polish in Pure bundle (light) */
html[data-theme='light'] #swadeForm .bg-black\/20,
html[data-theme='light'] #wodForm .bg-black\/20,
html[data-theme='dawn'] #swadeForm .bg-black\/20,
html[data-theme='dawn'] #wodForm .bg-black\/20,
html[data-theme='ivory'] #swadeForm .bg-black\/20,
html[data-theme='ivory'] #wodForm .bg-black\/20,
html[data-theme='parchment'] #swadeForm .bg-black\/20,
html[data-theme='parchment'] #wodForm .bg-black\/20 {
  background: rgba(0,0,0,0.04) !important;
}

/* One more sweep: welcome cards + view power/ability cards + any lingering white text in light themes */
html[data-theme='light'] #welcome-page,
html[data-theme='light'] #welcome-page .dashboard-card,
html[data-theme='light'] #welcome-page .card,
html[data-theme='light'] #welcome-page .text-white\/70,
html[data-theme='light'] #welcome-page .text-white\/75,
html[data-theme='light'] #welcome-page .text-white\/60,
html[data-theme='light'] #welcome-page [class*="text-white"],
html[data-theme='light'] .power-card,
html[data-theme='light'] .powers-grid,
html[data-theme='light'] .powers-section .text-white,
html[data-theme='light'] .power-stats,
html[data-theme='light'] .power-list,
html[data-theme='dawn'] #welcome-page,
html[data-theme='dawn'] #welcome-page .dashboard-card,
html[data-theme='dawn'] #welcome-page .card,
html[data-theme='dawn'] #welcome-page .text-white\/70,
html[data-theme='dawn'] #welcome-page .text-white\/75,
html[data-theme='dawn'] #welcome-page .text-white\/60,
html[data-theme='dawn'] #welcome-page [class*="text-white"],
html[data-theme='dawn'] .power-card,
html[data-theme='dawn'] .powers-grid,
html[data-theme='dawn'] .powers-section .text-white,
html[data-theme='ivory'] #welcome-page,
html[data-theme='ivory'] #welcome-page .dashboard-card,
html[data-theme='ivory'] #welcome-page .card,
html[data-theme='ivory'] #welcome-page .text-white\/70,
html[data-theme='ivory'] #welcome-page .text-white\/75,
html[data-theme='ivory'] #welcome-page .text-white\/60,
html[data-theme='ivory'] #welcome-page [class*="text-white"],
html[data-theme='ivory'] .power-card,
html[data-theme='ivory'] .powers-grid,
html[data-theme='ivory'] .powers-section .text-white,
html[data-theme='parchment'] #welcome-page,
html[data-theme='parchment'] #welcome-page .dashboard-card,
html[data-theme='parchment'] #welcome-page .card,
html[data-theme='parchment'] #welcome-page .text-white\/70,
html[data-theme='parchment'] #welcome-page .text-white\/75,
html[data-theme='parchment'] #welcome-page .text-white\/60,
html[data-theme='parchment'] #welcome-page [class*="text-white"],
html[data-theme='parchment'] .power-card,
html[data-theme='parchment'] .powers-grid,
html[data-theme='parchment'] .powers-section .text-white {
  color: #1f2a39 !important;
}

/* Ghost buttons defaulted to a dark translucent fill, which read as dark grey
   chips on the light themes. Give them a light, theme-tinted surface with dark
   text so buttons (archetype chips, "New SWADE", nav ghosts, etc.) match. */
[data-theme='light'] .btn-ghost,
[data-theme='parchment'] .btn-ghost,
[data-theme='dawn'] .btn-ghost,
[data-theme='ivory'] .btn-ghost {
  background: color-mix(in srgb, var(--text, #1f2a39) 6%, transparent) !important;
  border-color: color-mix(in srgb, var(--text, #1f2a39) 18%, transparent) !important;
  color: var(--text, #1f2a39) !important;
}
[data-theme='light'] .btn-ghost:hover,
[data-theme='parchment'] .btn-ghost:hover,
[data-theme='dawn'] .btn-ghost:hover,
[data-theme='ivory'] .btn-ghost:hover {
  background: color-mix(in srgb, var(--text, #1f2a39) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--ld-gold, #d4af37) 55%, transparent) !important;
}

/* ============================================================
   THEME METALS
   The sheet trim reads from --ld-gold / --ld-gold-rgb, so each
   theme can carry its own metal instead of every palette sharing
   the same gold. Default is the Silvered set in style-core.css.
   ============================================================ */
[data-theme='midnight'] { --ld-gold: #d4af37; --ld-gold-rgb: 212, 175, 55; }
[data-theme='sunset']   { --ld-gold: #e2703a; --ld-gold-rgb: 226, 112, 58; }
[data-theme='forest']   { --ld-gold: #5ec8a0; --ld-gold-rgb: 94, 200, 160; }
[data-theme='concord']  { --ld-gold: #c4a5f5; --ld-gold-rgb: 196, 165, 245; }
[data-theme='cryptid']  { --ld-gold: #7fe3a4; --ld-gold-rgb: 127, 227, 164; }
[data-theme='silvered'] { --ld-gold: #c8d2e0; --ld-gold-rgb: 200, 210, 224; }

/* Light palettes keep a warm metal for trim, but *text* in that metal is
   unreadable on white - see the black-purple text rules further down. */
[data-theme='parchment'] { --ld-gold: #a8823a; --ld-gold-rgb: 168, 130, 58; }
[data-theme='dawn']      { --ld-gold: #a8823a; --ld-gold-rgb: 168, 130, 58; }
[data-theme='ivory']     { --ld-gold: #a8823a; --ld-gold-rgb: 168, 130, 58; }
[data-theme='light']     { --ld-gold: #7c5cbf; --ld-gold-rgb: 124, 92, 191; }

/* Decorative sheet SVGs carry stroke/fill as attributes, which can't read a
   CSS variable - the CSS stroke/fill properties override them instead. */
.ld-sheet-view .symbol svg [stroke],
.ld-sheet-view .corner svg [stroke] { stroke: var(--ld-gold, #d4af37); }
.ld-sheet-view .symbol svg [fill]:not([fill='none']),
.ld-sheet-view .corner svg [fill]:not([fill='none']) { fill: var(--ld-gold, #d4af37); }

/* ============================================================
   SITE-WIDE SCENE BACKGROUND
   Two full-viewport layers crossfade between scene images; the
   scrim above them holds text contrast steady regardless of which
   image is showing, and inverts for the light theme family.
   ============================================================ */
.ld-scene-layer {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.ld-scene-layer.is-visible { opacity: 1; }

/* The scene photo is atmosphere, not the subject. It sits far back behind a
   heavy near-black scrim plus the prototype's purple/teal radial glows, which
   is where the depth actually comes from. Earlier this was translucent enough
   that the photo washed every panel out. */
.ld-scene-layer { opacity: 0; }
.ld-scene-layer.is-visible { opacity: 0.22; }

.ld-scene-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(91, 33, 182, 0.30), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(14, 116, 144, 0.24), transparent 55%),
    linear-gradient(180deg, rgba(8, 5, 18, 0.90) 0%, rgba(8, 5, 18, 0.94) 45%, rgba(8, 5, 18, 0.97) 100%);
}

/* Clean White: the scene photo just muddies a light UI, so it's a barely
   there tint under a near-solid pale veil with a soft purple glow. */
[data-theme='light'] .ld-scene-scrim {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124, 92, 191, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34, 116, 144, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(238, 240, 246, 0.95) 0%, rgba(238, 240, 246, 0.97) 45%, rgba(238, 240, 246, 0.99) 100%);
}
[data-theme='light'] .ld-scene-layer { opacity: 0; }
[data-theme='light'] .ld-scene-layer.is-visible { opacity: 0.08; }

@media (prefers-reduced-motion: reduce) {
  .ld-scene-layer { transition: none; }
}

/* ============================================================
   LIGHT THEMES: GOLD TEXT -> BLACK-PURPLE
   Yellow/gold lettering has almost no contrast on white. Anywhere
   the metal is used as *text* (headings, labels, section titles,
   ability + generator + dashboard list copy) it becomes a deep
   black-purple instead. Borders and trim keep the metal.
   ============================================================ */
[data-theme='light'] .ld-sheet-view h1,
[data-theme='light'] .ld-sheet-view .section-title,
[data-theme='light'] .ld-sheet-view label,
[data-theme='light'] .ability-name,
[data-theme='light'] .ability-set-name,
[data-theme='light'] .power-card h3,
[data-theme='light'] .powers-section h2,
[data-theme='light'] .catalog-ability-card h3,
[data-theme='light'] .dashboard-card h3,
[data-theme='light'] .character-list-row .name,
[data-theme='light'] .discover-kicker,
[data-theme='light'] .generators-bg-shuffle,
[data-theme='light'] .ff-title,
[data-theme='parchment'] .ld-sheet-view h1,
[data-theme='parchment'] .ld-sheet-view .section-title,
[data-theme='parchment'] .ability-name,
[data-theme='parchment'] .ff-title,
[data-theme='dawn'] .ld-sheet-view h1,
[data-theme='dawn'] .ld-sheet-view .section-title,
[data-theme='dawn'] .ability-name,
[data-theme='dawn'] .ff-title,
[data-theme='ivory'] .ld-sheet-view h1,
[data-theme='ivory'] .ld-sheet-view .section-title,
[data-theme='ivory'] .ability-name,
[data-theme='ivory'] .ff-title {
  color: #2b1b47 !important;
  text-shadow: none !important;
}

/* Ability cards keep their dark, type-coloured gradient in EVERY theme, so
   their text must stay light — the black-purple pass above would otherwise
   paint dark text onto a dark card and make the names disappear. */
[data-theme='light'] .rpg-ability-card,
[data-theme='light'] .rpg-ability-card h3,
[data-theme='light'] .rpg-ability-card .ability-name,
[data-theme='light'] .rpg-ability-card .ability-desc,
[data-theme='light'] .catalog-ability-card,
[data-theme='light'] .catalog-ability-card h3,
[data-theme='light'] .catalog-ability-card .ability-name,
[data-theme='light'] .power-card,
[data-theme='light'] .power-card h3,
[data-theme='parchment'] .rpg-ability-card h3,
[data-theme='parchment'] .catalog-ability-card h3,
[data-theme='dawn'] .rpg-ability-card h3,
[data-theme='dawn'] .catalog-ability-card h3,
[data-theme='ivory'] .rpg-ability-card h3,
[data-theme='ivory'] .catalog-ability-card h3 {
  color: #f5f7ff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}

/* ============================================================
   ABILITIES LIBRARY FIXES
   The catalog cards use `.library-ability-card`, which earlier
   fixes missed because they named `.catalog-`/`.rpg-` variants.
   ============================================================ */

/* Ability names sit on dark, type-coloured cards in EVERY theme, so the
   light-theme black-purple pass must not touch them. */
[data-theme='light'] .library-ability-card .ability-name,
[data-theme='light'] .library-ability-card .ability-desc,
[data-theme='light'] .library-ability-card,
[data-theme='parchment'] .library-ability-card .ability-name,
[data-theme='dawn'] .library-ability-card .ability-name,
[data-theme='ivory'] .library-ability-card .ability-name {
  color: #f7ecd1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

/* `border-radius: 999px` on a tag that wraps to two lines renders as a huge
   ellipse. Applies wherever .ability-type lives, not just one card variant. */
.ability-type,
.library-ability-card .ability-type {
  border-radius: 10px !important;
  line-height: 1.35;
  padding: 3px 10px;
  max-width: 100%;
}

/* The IL badge is a single short token, so a pill is correct there — but it
   should never stretch tall enough to turn oval. */
.il-badge {
  border-radius: 999px;
  padding: 2px 10px;
  line-height: 1.3;
  white-space: nowrap;
}

/* The catalog is a wide data table of cards; boxing it into max-w-7xl wastes
   a third of a desktop screen. Let this page run full-bleed. */
main:has(.library-results-grid) {
  max-width: none !important;
  width: 100% !important;
  padding-left: clamp(0.75rem, 2vw, 2rem) !important;
  padding-right: clamp(0.75rem, 2vw, 2rem) !important;
}

/* The page wrapper carried a fixed ~1200px width with auto margins, which
   re-boxed the catalog even after main was freed. */
.library-page-layout {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.library-results-grid {
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)) !important;
  gap: 0.85rem;
}

/* ============================================================
   LIGHT-THEME CHARACTER SHEET POLISH
   The sheet is built for the dark theme (gold text + glow on
   near-black). On the light/parchment/dawn/ivory palettes those
   treatments wash out. These overrides keep the sheet elegant
   but readable on light backgrounds.
   ============================================================ */

/* Title: gold + heavy glow disappears on white -> deep bronze, gentle emboss */
[data-theme='light'] .ld-sheet-view h1,
[data-theme='parchment'] .ld-sheet-view h1,
[data-theme='dawn'] .ld-sheet-view h1,
[data-theme='ivory'] .ld-sheet-view h1 {
  color: #7a5a12 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 2px 10px rgba(122, 90, 18, 0.14) !important;
}

/* Decorative corner brackets: deepen so they read against white */
[data-theme='light'] .ld-sheet-view .corner,
[data-theme='parchment'] .ld-sheet-view .corner,
[data-theme='dawn'] .ld-sheet-view .corner,
[data-theme='ivory'] .ld-sheet-view .corner {
  border-color: #b98f2e !important;
}

/* Faint gold watermark symbols muddy the white; fade them right down */
[data-theme='light'] .ld-sheet-view .symbol,
[data-theme='parchment'] .ld-sheet-view .symbol,
[data-theme='dawn'] .ld-sheet-view .symbol,
[data-theme='ivory'] .ld-sheet-view .symbol {
  opacity: 0.12 !important;
}

/* Editable rows (skills, etc.) kept a dark navy fill -> light surface */
[data-theme='light'] .ld-sheet-view .notebook-row,
[data-theme='parchment'] .ld-sheet-view .notebook-row,
[data-theme='dawn'] .ld-sheet-view .notebook-row,
[data-theme='ivory'] .ld-sheet-view .notebook-row {
  background: rgba(255, 255, 255, 0.68) !important;
  border-color: rgba(80, 94, 112, 0.20) !important;
}

/* Ability-set names / summaries were cream (#fff3c8), invisible on white */
[data-theme='light'] .ld-sheet-view .power-edit-set summary,
[data-theme='light'] .ld-sheet-view .power-edit-set summary span,
[data-theme='light'] .ld-sheet-view .power-edit-set summary small,
[data-theme='parchment'] .ld-sheet-view .power-edit-set summary,
[data-theme='parchment'] .ld-sheet-view .power-edit-set summary span,
[data-theme='parchment'] .ld-sheet-view .power-edit-set summary small,
[data-theme='dawn'] .ld-sheet-view .power-edit-set summary,
[data-theme='dawn'] .ld-sheet-view .power-edit-set summary span,
[data-theme='dawn'] .ld-sheet-view .power-edit-set summary small,
[data-theme='ivory'] .ld-sheet-view .power-edit-set summary,
[data-theme='ivory'] .ld-sheet-view .power-edit-set summary span,
[data-theme='ivory'] .ld-sheet-view .power-edit-set summary small {
  color: #26324a !important;
}

/* Remove buttons: light-red text on a light fill -> deepen for contrast */
[data-theme='light'] .ld-sheet-view .notebook-remove,
[data-theme='parchment'] .ld-sheet-view .notebook-remove,
[data-theme='dawn'] .ld-sheet-view .notebook-remove,
[data-theme='ivory'] .ld-sheet-view .notebook-remove {
  color: #a12b2b !important;
  border-color: rgba(161, 43, 43, 0.35) !important;
}

html[data-theme='light'] #welcome-page .dashboard-card,
html[data-theme='light'] #welcome-page .card,
html[data-theme='light'] .power-card,
html[data-theme='light'] .powers-grid,
html[data-theme='dawn'] #welcome-page .dashboard-card,
html[data-theme='dawn'] #welcome-page .card,
html[data-theme='dawn'] .power-card,
html[data-theme='dawn'] .powers-grid,
html[data-theme='ivory'] #welcome-page .dashboard-card,
html[data-theme='ivory'] #welcome-page .card,
html[data-theme='ivory'] .power-card,
html[data-theme='ivory'] .powers-grid,
html[data-theme='parchment'] #welcome-page .dashboard-card,
html[data-theme='parchment'] #welcome-page .card,
html[data-theme='parchment'] .power-card,
html[data-theme='parchment'] .powers-grid {
  background: #fffef9 !important;
  border-color: #e8e4d8 !important;
}

/* builders */
#swadeForm input,#swadeForm select,#swadeForm textarea,
#wodForm input,#wodForm select,#wodForm textarea{
  border-radius: 10px;
}


/* === Unified Theme Lock: all theme keys render with same Pure palette === */
html[data-theme],
html[data-theme='midnight'],
html[data-theme='obsidian'],
html[data-theme='sunset'],
html[data-theme='forest'],
html[data-theme='discord'],
html[data-theme='light'],
html[data-theme='parchment'],
html[data-theme='dawn'],
html[data-theme='ivory'],
html[data-theme='amethyst'],
html[data-theme='ocean'],
html[data-theme='ember'],
html[data-theme='moss'],
html[data-theme='rose'],
html[data-theme='slate'] {
  --bg: #0b1320;
  --bg2: #111a2d;
  --panel: #15213a;
  --panel-2: #1b2947;
  --text: #e7efff;
  --muted: #9eb1cc;
  --ring: #6f8fc3;
  --accent: #5f86d8;
  --accent-2: #3ec6a0;
}

html[data-theme] body{
  background: radial-gradient(1200px 600px at 8% -8%, rgba(95,134,216,.18), transparent 60%),
              radial-gradient(900px 500px at 95% 0%, rgba(62,198,160,.12), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
  /* Beat Tailwind CDN which injects after our CSS */
  font-family: var(--font-body) !important;
}

/* ── Light theme variable overrides ───────────────────────────────────────── */
html[data-theme='light'] {
  --bg: #f0f4fb;
  --bg2: #e4eaf5;
  --panel: #ffffff;
  --panel-2: #f7f9fd;
  --text: #1a2540;
  --muted: #5a6e8a;
  --ring: #7b9dd4;
  --accent: #3b6fcf;
  --accent-2: #1d9e7a;
}
html[data-theme='dawn'] {
  --bg: #fdf6ee;
  --bg2: #f5ead8;
  --panel: #fffcf7;
  --panel-2: #fef8f0;
  --text: #2d1f0e;
  --muted: #7a5c3a;
  --ring: #c4883a;
  --accent: #c47c28;
  --accent-2: #6b9e60;
}
html[data-theme='ivory'] {
  --bg: #f8f5ef;
  --bg2: #ede8df;
  --panel: #fefcf9;
  --panel-2: #f5f1ea;
  --text: #26200f;
  --muted: #6e6248;
  --ring: #b09a6c;
  --accent: #9e7c3a;
  --accent-2: #5a8a55;
}
html[data-theme='parchment'] {
  --bg: #f4ede0;
  --bg2: #e8dcc8;
  --panel: #fdf9f3;
  --panel-2: #f7f0e4;
  --text: #2a1f0a;
  --muted: #7a6540;
  --ring: #c4a054;
  --accent: #b8882a;
  --accent-2: #5e7e48;
}

/* Light theme body background — warm/clean instead of dark radial */
html[data-theme='light'] body {
  background: radial-gradient(1000px 500px at 10% 0%, rgba(59,111,207,.08), transparent 60%),
              radial-gradient(800px 400px at 90% 10%, rgba(29,158,122,.06), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
}
html[data-theme='dawn'] body {
  background: radial-gradient(1000px 500px at 15% 0%, rgba(196,124,40,.10), transparent 60%),
              radial-gradient(700px 400px at 85% 5%, rgba(107,158,96,.07), transparent 55%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
}
html[data-theme='ivory'] body,
html[data-theme='parchment'] body {
  background: radial-gradient(900px 450px at 12% 0%, rgba(158,124,58,.09), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text);
}

/* Light theme surface fixes */
html[data-theme='light'] .dashboard-card,
html[data-theme='light'] .card,
html[data-theme='light'] .panel,
html[data-theme='dawn'] .dashboard-card,
html[data-theme='dawn'] .card,
html[data-theme='dawn'] .panel,
html[data-theme='ivory'] .dashboard-card,
html[data-theme='ivory'] .card,
html[data-theme='ivory'] .panel,
html[data-theme='parchment'] .dashboard-card,
html[data-theme='parchment'] .card,
html[data-theme='parchment'] .panel {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--ring) 28%, transparent) !important;
}

html[data-theme='light'] input,
html[data-theme='light'] select,
html[data-theme='light'] textarea,
html[data-theme='dawn'] input,
html[data-theme='dawn'] select,
html[data-theme='dawn'] textarea,
html[data-theme='ivory'] input,
html[data-theme='ivory'] select,
html[data-theme='ivory'] textarea,
html[data-theme='parchment'] input,
html[data-theme='parchment'] select,
html[data-theme='parchment'] textarea {
  background: color-mix(in srgb, var(--panel-2) 90%, var(--ring) 10%) !important;
  border-color: color-mix(in srgb, var(--ring) 40%, transparent) !important;
  color: var(--text) !important;
}

/* ── Light theme: comprehensive nav + Tailwind class overrides ─────────────── */
/* These override hardcoded Tailwind utility classes in layout.ejs markup */
html[data-theme='light'] header.glass,
html[data-theme='dawn'] header.glass,
html[data-theme='ivory'] header.glass,
html[data-theme='parchment'] header.glass,
html[data-theme='light'] aside.glass,
html[data-theme='dawn'] aside.glass,
html[data-theme='ivory'] aside.glass,
html[data-theme='parchment'] aside.glass,
html[data-theme='light'] #mnav,
html[data-theme='dawn'] #mnav,
html[data-theme='ivory'] #mnav,
html[data-theme='parchment'] #mnav {
  background: color-mix(in srgb, var(--panel) 96%, var(--ring) 4%) !important;
  border-color: color-mix(in srgb, var(--ring) 30%, transparent) !important;
  box-shadow: 0 6px 26px color-mix(in srgb, var(--bg2) 60%, transparent);
}

html[data-theme='light'] .sidebar-link,
html[data-theme='dawn'] .sidebar-link,
html[data-theme='ivory'] .sidebar-link,
html[data-theme='parchment'] .sidebar-link {
  color: var(--text);
}
html[data-theme='light'] .sidebar-link:hover,
html[data-theme='dawn'] .sidebar-link:hover,
html[data-theme='ivory'] .sidebar-link:hover,
html[data-theme='parchment'] .sidebar-link:hover {
  background: color-mix(in srgb, var(--ring) 15%, transparent);
  color: var(--text);
}

html[data-theme='light'] .btn-ghost,
html[data-theme='dawn'] .btn-ghost,
html[data-theme='ivory'] .btn-ghost,
html[data-theme='parchment'] .btn-ghost {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ring) 40%, transparent);
}
html[data-theme='light'] .btn-ghost:hover,
html[data-theme='dawn'] .btn-ghost:hover,
html[data-theme='ivory'] .btn-ghost:hover,
html[data-theme='parchment'] .btn-ghost:hover {
  background: color-mix(in srgb, var(--ring) 15%, transparent);
}

/* Light theme tab bar (view/edit screen) */
html[data-theme='light'] .direct-edit-tabs,
html[data-theme='dawn'] .direct-edit-tabs,
html[data-theme='ivory'] .direct-edit-tabs,
html[data-theme='parchment'] .direct-edit-tabs,
html[data-theme='light'] nav.direct-edit-tabs,
html[data-theme='dawn'] nav.direct-edit-tabs,
html[data-theme='ivory'] nav.direct-edit-tabs,
html[data-theme='parchment'] nav.direct-edit-tabs {
  background: color-mix(in srgb, var(--panel) 95%, var(--ring) 5%) !important;
  border-color: color-mix(in srgb, var(--ring) 28%, transparent) !important;
}
html[data-theme='light'] .direct-edit-tab,
html[data-theme='dawn'] .direct-edit-tab,
html[data-theme='ivory'] .direct-edit-tab,
html[data-theme='parchment'] .direct-edit-tab {
  color: var(--muted) !important;
}
html[data-theme='light'] .direct-edit-tab.is-active,
html[data-theme='dawn'] .direct-edit-tab.is-active,
html[data-theme='ivory'] .direct-edit-tab.is-active,
html[data-theme='parchment'] .direct-edit-tab.is-active {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, transparent) !important;
}

/* dashboard/welcome fixed background override for light */
html[data-theme='light'] .dashboard-wrap::before,
html[data-theme='light'] #welcome-page::before,
html[data-theme='dawn'] .dashboard-wrap::before,
html[data-theme='dawn'] #welcome-page::before,
html[data-theme='ivory'] .dashboard-wrap::before,
html[data-theme='ivory'] #welcome-page::before,
html[data-theme='parchment'] .dashboard-wrap::before,
html[data-theme='parchment'] #welcome-page::before {
  background: radial-gradient(900px 450px at 8% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%) !important;
}

/* ── Light theme: Tailwind hardcoded-class overrides in nav markup ─────────── */
html[data-theme='light'] .ld-menu-panel,
html[data-theme='dawn'] .ld-menu-panel,
html[data-theme='ivory'] .ld-menu-panel,
html[data-theme='parchment'] .ld-menu-panel {
  background: var(--panel) !important;
  border-color: color-mix(in srgb, var(--ring) 30%, transparent) !important;
  color: var(--text) !important;
}

/* Menu button (bg-white/15 border-white/20) */
html[data-theme='light'] .ld-menu-btn,
html[data-theme='dawn'] .ld-menu-btn,
html[data-theme='ivory'] .ld-menu-btn,
html[data-theme='parchment'] .ld-menu-btn {
  background: color-mix(in srgb, var(--ring) 12%, transparent) !important;
  border-color: color-mix(in srgb, var(--ring) 35%, transparent) !important;
  color: var(--text) !important;
}

/* Search inputs in topbar + hamburger (bg-white/10 text-white placeholder-white/60) */
html[data-theme='light'] .ld-topbar-search input,
html[data-theme='light'] #mnav input[type='search'],
html[data-theme='dawn'] .ld-topbar-search input,
html[data-theme='dawn'] #mnav input[type='search'],
html[data-theme='ivory'] .ld-topbar-search input,
html[data-theme='ivory'] #mnav input[type='search'],
html[data-theme='parchment'] .ld-topbar-search input,
html[data-theme='parchment'] #mnav input[type='search'] {
  background: color-mix(in srgb, var(--panel-2) 90%, var(--ring) 10%) !important;
  border-color: color-mix(in srgb, var(--ring) 35%, transparent) !important;
  color: var(--text) !important;
}
html[data-theme='light'] .ld-topbar-search input::placeholder,
html[data-theme='light'] #mnav input[type='search']::placeholder,
html[data-theme='dawn'] .ld-topbar-search input::placeholder,
html[data-theme='dawn'] #mnav input[type='search']::placeholder,
html[data-theme='ivory'] .ld-topbar-search input::placeholder,
html[data-theme='ivory'] #mnav input[type='search']::placeholder,
html[data-theme='parchment'] .ld-topbar-search input::placeholder,
html[data-theme='parchment'] #mnav input[type='search']::placeholder {
  color: var(--muted) !important;
}

/* Section headers in hamburger (text-white/50) */
html[data-theme='light'] #mnav p,
html[data-theme='dawn'] #mnav p,
html[data-theme='ivory'] #mnav p,
html[data-theme='parchment'] #mnav p {
  color: var(--muted) !important;
}

/* Sidebar title text (ff-title text-xl in sidebar) */
html[data-theme='light'] aside.glass .ff-title,
html[data-theme='dawn'] aside.glass .ff-title,
html[data-theme='ivory'] aside.glass .ff-title,
html[data-theme='parchment'] aside.glass .ff-title {
  color: var(--text) !important;
}

/* ── Welcome + catalog subtle polish in Pure system ──────────────────────── */
#welcome-page details.card summary{ color: var(--text); }
#welcome-page .card{ border: 1px solid color-mix(in srgb, var(--ring) 36%, transparent); }
#abilities-catalog-app .ability-list-wrap{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
#abilities-catalog-app input::placeholder{ color: color-mix(in srgb, var(--muted) 80%, transparent); }


/* Smart app menu: keep the Pure topbar usable on short and narrow screens. */
.ld-topbar{
  min-width: 0;
}
.ld-topbar-search,
.ld-topbar-actions{
  min-width: 0;
}
.ld-topbar-actions{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.ld-topbar-actions .btn{
  flex: 0 0 auto;
}
.ld-menu-btn{
  white-space: nowrap;
}
#mnav{
  box-sizing: border-box;
  width: min(440px, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: calc(100dvh - var(--ld-topbar-offset, 72px) - 1rem);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
#mnav.hidden{
  display: none !important;
}
#mnav .ld-menu-panel{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
#mnav .sidebar-link{
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 820px){
  .ld-topbar{
    grid-template-columns: auto 1fr !important;
    align-items: start;
  }
  .ld-topbar-search{
    grid-column: 1 / -1;
    grid-row: 2;
    order: 3;
  }
  .ld-topbar-actions{
    justify-content: flex-end;
    padding-bottom: 2px;
  }
}
@media (max-width: 520px){
  .ld-topbar{
    gap: .55rem !important;
    padding-inline: .75rem !important;
  }
  .ld-menu-btn{
    padding-inline: .75rem !important;
  }
  .ld-topbar-actions .btn{
    padding-inline: .65rem !important;
    font-size: .86rem;
  }
  #mnav{
    padding-inline: .75rem !important;
  }
}


/* Stable fixed page background for dashboard + welcome surfaces. */
.dashboard-wrap,
#welcome-page {
  position: relative;
  z-index: 0;
}

.dashboard-wrap::before,
#welcome-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 680px at 12% -10%, rgba(95, 134, 216, .18), transparent 60%),
    radial-gradient(900px 540px at 92% 4%, rgba(118, 36, 255, .14), transparent 58%),
    linear-gradient(180deg, var(--bg, #0b1320) 0%, var(--bg2, #111a2d) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}


/* === Pure direct-sheet app pass === */
.ld-sheet-view.ld-sheet-edit .direct-edit-tabs{
  position: sticky;
  top: calc(var(--ld-topbar-offset, 72px) + .5rem);
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin: .8rem 0 1.25rem;
  padding: .45rem;
  overflow-x: auto;
  border: 1px solid rgba(var(--ld-gold-rgb),.22);
  border-radius: 999px;
  background: rgba(7, 13, 28, .82);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}
.ld-sheet-view.ld-sheet-edit .direct-edit-tab{
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(248,239,212,.78);
  box-shadow: none;
  padding: .48rem .85rem;
  font-size: .82rem;
}
.ld-sheet-view.ld-sheet-edit .direct-edit-tab.is-active{
  border-color: rgba(var(--ld-gold-rgb),.48);
  background: rgba(var(--ld-gold-rgb),.14);
  color: #fff3c8;
}
.ld-sheet-view.ld-sheet-edit .direct-edit-panel-hidden{
  display: none !important;
}
.ld-sheet-view.ld-sheet-edit .main-grid{
  grid-template-columns: minmax(280px, 420px) minmax(320px, 520px);
  justify-content: center;
  align-items: start;
  width: min(100%, 980px);
  margin-inline: auto;
}
.ld-sheet-view.ld-sheet-edit .main-grid > [data-edit-panel="skills"].is-active-panel{
  grid-column: 1 / -1;
  width: min(100%, 1080px);
  margin-inline: auto;
}
.ld-sheet-view.ld-sheet-edit .powers-section.is-active-panel,
.ld-sheet-view.ld-sheet-edit .bottom-section.is-active-panel{
  width: min(100%, 1120px);
  margin-inline: auto;
}
.ld-sheet-view.ld-sheet-edit .bottom-section.is-active-panel{
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}
.ld-sheet-view.ld-sheet-edit .section,
.ld-sheet-view.ld-sheet-edit .power-edit-set{
  border-color: rgba(126, 155, 210, .35) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}
.ld-sheet-view.ld-sheet-edit .section .section-title{
  margin-bottom: .9rem;
}
.ld-sheet-view.ld-sheet-edit .attr-detail-header{
  grid-template-columns: 1fr !important;
  justify-items: center;
  text-align: center;
  row-gap: .35rem;
}
.ld-sheet-view.ld-sheet-edit .attr-detail-header label{
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-sheet-view.ld-sheet-edit .attr-detail-header .field-value.small{
  width: auto;
  min-width: 0;
  justify-content: center !important;
}
.ld-sheet-view.ld-sheet-edit .attr-detail-header .sheet-edit-number{
  margin-inline: auto !important;
  width: 4.4rem;
  min-height: 2rem;
  padding: .22rem .55rem;
  text-align: center;
}
.ld-sheet-view.ld-sheet-edit .attr-detail-meta{
  text-align: left;
}
.ld-sheet-view.ld-sheet-edit .notebook-row{
  border-color: rgba(var(--ld-gold-rgb),.18);
  background: rgba(9, 17, 34, .66);
}
.ld-sheet-view.ld-sheet-edit .notebook-editor,
.ld-sheet-view.ld-sheet-edit .notebook-row,
.ld-sheet-view.ld-sheet-edit .notebook-field{
  min-width: 0;
}
.ld-sheet-view.ld-sheet-edit .notebook-row:not(.skill-edit-row):not(.power-edit-row):not(.equipment-edit-row){
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.ld-sheet-view.ld-sheet-edit .notebook-field-wide{
  min-width: 0;
}
.ld-sheet-view.ld-sheet-edit .notebook-field-full{
  grid-column: 1 / -1;
}
.ld-sheet-view.ld-sheet-edit .sheet-edit-input,
.ld-sheet-view.ld-sheet-edit .sheet-edit-textarea,
.ld-sheet-view.ld-sheet-edit .sheet-edit-select{
  width: 100%;
  max-width: 100%;
}
.ld-sheet-view.ld-sheet-edit .equipment-edit-row{
  grid-template-columns:
    minmax(70px, .45fr)
    minmax(220px, 1.8fr)
    minmax(120px, .9fr)
    minmax(120px, .9fr)
    minmax(64px, .45fr)
    minmax(76px, .5fr)
    minmax(180px, 1.25fr)
    auto;
  align-items: start;
}
.ld-sheet-view.ld-sheet-edit .equipment-catalog-hint{
  max-width: 100%;
}
.ld-sheet-view.ld-sheet-edit .equipment-catalog-pills{
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .28rem .34rem;
}
.ld-sheet-view.ld-sheet-edit .equipment-catalog-pills span{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  line-height: 1.15;
  white-space: normal;
}
.ld-sheet-view.ld-sheet-edit .equipment-catalog-hint p{
  max-width: 62ch;
  line-height: 1.45;
}
.ld-sheet-view.ld-sheet-edit .skill-edit-row{
  grid-template-columns: minmax(180px, 1.4fr) 92px minmax(140px, .9fr) minmax(140px, .9fr) 62px auto;
}
.ld-sheet-view.ld-sheet-edit .skill-score-input{
  text-align: center;
}
.ld-sheet-view.ld-sheet-edit .skill-cap-pill{
  text-align: center;
}
.ld-sheet-view.ld-sheet-edit .skill-cap-output{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--ld-gold-rgb),.28);
  color: #f6d66d;
  background: rgba(var(--ld-gold-rgb),.08);
  font-weight: 800;
}
.ld-sheet-view.ld-sheet-edit .power-edit-set{
  margin-bottom: .75rem;
  border: 1px solid rgba(var(--ld-gold-rgb),.22);
  border-radius: 16px;
  background: rgba(8, 15, 30, .72);
  overflow: visible;
}
.ld-sheet-view.ld-sheet-edit .power-edit-set summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem .95rem;
  cursor: pointer;
  color: #fff3c8;
  font-family: "Cinzel", serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ld-sheet-view.ld-sheet-edit .power-edit-set summary small{
  color: rgba(248,239,212,.62);
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: none;
}
.ld-sheet-view.ld-sheet-edit .power-edit-row{
  margin: 0 .75rem .75rem;
  grid-template-columns: minmax(180px, 1.35fr) minmax(110px, .8fr) 78px minmax(160px, 1fr) auto;
}
.ld-sheet-view.ld-sheet-edit .sub-ability-editor{
  display: grid;
  gap: .55rem;
  padding: 0 .75rem .85rem;
}
.ld-sheet-view.ld-sheet-edit .sub-ability-editor-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: rgba(248,239,212,.82);
}
.ld-sheet-view.ld-sheet-edit .sub-ability-edit-row{
  display: grid;
  grid-template-columns: minmax(160px, 1.1fr) 70px minmax(100px, .75fr) minmax(220px, 1.6fr) auto;
  gap: .5rem;
  align-items: start;
  padding: .65rem;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.ld-sheet-view.ld-sheet-edit .ability-autocomplete-field{
  position: relative;
  min-width: 0;
  z-index: 5;
}
.ld-sheet-view.ld-sheet-edit .ability-autocomplete-field:focus-within{
  z-index: 30;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-panel{
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  width: min(36rem, calc(100vw - 2rem));
  max-height: 24rem;
  overflow: auto;
  padding: .4rem;
  border: 1px solid rgba(var(--ld-gold-rgb),.38);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(var(--ld-gold-rgb),.16), transparent 35%),
    linear-gradient(145deg, rgba(10,16,32,.98), rgba(4,8,18,.98));
  box-shadow: 0 22px 52px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-option{
  display: grid;
  gap: .22rem;
  width: 100%;
  margin: 0;
  padding: .72rem .78rem;
  text-align: left;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-option:hover,
.ld-sheet-view.ld-sheet-edit .ability-suggest-option:focus-visible{
  border-color: rgba(var(--ld-gold-rgb),.45);
  background: rgba(var(--ld-gold-rgb),.11);
  outline: none;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: #fff7dc;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-title strong{
  font-size: .98rem;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-title em{
  flex: 0 0 auto;
  min-width: 3.2rem;
  padding: .18rem .45rem;
  border-radius: 999px;
  color: #f6d66d;
  border: 1px solid rgba(var(--ld-gold-rgb),.32);
  background: rgba(var(--ld-gold-rgb),.08);
  font-style: normal;
  font-weight: 800;
  text-align: center;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-meta,
.ld-sheet-view.ld-sheet-edit .ability-suggest-desc,
.ld-sheet-view.ld-sheet-edit .ability-suggest-empty{
  display: block;
  color: rgba(248,239,212,.72);
  font-size: .82rem;
  line-height: 1.35;
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-desc{
  color: rgba(255,255,255,.64);
}
.ld-sheet-view.ld-sheet-edit .ability-suggest-empty{
  padding: .85rem .9rem;
}
.ld-sheet-view.ld-sheet-edit .sub-ability-desc-input{
  min-height: 2.35rem;
}
.ld-sheet-view .sheet-ability-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem;
  margin-top: .45rem;
}
.ld-sheet-view .sheet-ability-card-grid + .power-list{
  display: none;
}
.ld-sheet-view .sheet-ability-card{
  position: relative;
  display: grid;
  gap: .55rem;
  min-width: 0;
  padding: .85rem .95rem;
  border: 1px solid rgba(168,85,247,.82);
  border-radius: 12px;
  background:
    radial-gradient(circle at 84% 16%, rgba(125,211,252,.18), transparent 25%),
    linear-gradient(145deg, #0f172a 0%, #171136 55%, #0b1024 100%);
  box-shadow: 0 0 22px rgba(168,85,247,.28), inset 0 0 0 1px rgba(250,204,21,.12);
  color: #f7ecd1;
}
.ld-sheet-view .sheet-ability-card[data-type-key*="attack"]{
  border-color: rgba(248,113,113,.82);
  background: radial-gradient(circle at 85% 12%, rgba(251,146,60,.24), transparent 25%), linear-gradient(145deg, #1e1b4b 0%, #2a1234 56%, #120d1d 100%);
}
.ld-sheet-view .sheet-ability-card[data-type-key*="defense"]{
  border-color: rgba(96,165,250,.82);
  background: radial-gradient(circle at 85% 12%, rgba(125,211,252,.26), transparent 25%), linear-gradient(145deg, #0f2445 0%, #102a55 55%, #07111f 100%);
}
.ld-sheet-view .sheet-ability-card[data-type-key*="healing"],
.ld-sheet-view .sheet-ability-card[data-type-key*="support"]{
  border-color: rgba(52,211,153,.8);
  background: radial-gradient(circle at 85% 12%, rgba(167,243,208,.22), transparent 25%), linear-gradient(145deg, #0f2d2b 0%, #123a47 56%, #081923 100%);
}
.ld-sheet-view .sheet-ability-card[data-type-key*="utility"],
.ld-sheet-view .sheet-ability-card[data-type-key*="mobility"],
.ld-sheet-view .sheet-ability-card[data-type-key*="control"],
.ld-sheet-view .sheet-ability-card[data-type-key*="summon"]{
  border-color: rgba(192,132,252,.88);
  background: radial-gradient(circle at 85% 12%, rgba(216,180,254,.24), transparent 25%), linear-gradient(145deg, #111827 0%, #25134a 58%, #0b1024 100%);
}
.ld-sheet-view .sheet-ability-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(var(--ld-gold-rgb),.28);
}
.ld-sheet-view .sheet-ability-card-name{
  min-width: 0;
  color: #fff7dc;
  font-family: "Cinzel", serif;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.12;
  text-shadow: 0 1px 0 #000;
}
.ld-sheet-view .sheet-ability-card-il{
  flex: 0 0 auto;
  border: 1px solid rgba(250,204,21,.7);
  background: rgba(250,204,21,.12);
  color: #facc15;
  border-radius: 999px;
  padding: .22rem .58rem;
  font-family: "Cinzel", serif;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(250,204,21,.2);
}
.ld-sheet-view .sheet-ability-card-type{
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(239,68,68,.45);
  color: #fca5a5;
  background: rgba(127,29,29,.22);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-family: "Cinzel", serif;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ld-sheet-view .sheet-ability-card-stats{
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: flex-start;
  min-width: 0;
}
.ld-sheet-view .sheet-ability-card-stat{
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(var(--ld-gold-rgb),.28);
  background: rgba(var(--ld-gold-rgb),.06);
  border-radius: 5px;
  padding: .22rem .42rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ld-sheet-view .sheet-ability-card-stat span{
  color: rgba(247,236,209,.58);
  font-family: "Cinzel", serif;
  font-size: .62rem;
  text-transform: uppercase;
}
.ld-sheet-view .sheet-ability-card-stat strong{
  color: #fff4c2;
  overflow-wrap: anywhere;
}
.ld-sheet-view .sheet-ability-card-desc{
  border-left: 3px solid rgba(250,204,21,.72);
  border-radius: 5px;
  background: rgba(0,0,0,.18);
  padding: .65rem .75rem;
  color: #fff1bd;
  font-family: "Cormorant Garamond", serif;
  font-size: 1rem;
  line-height: 1.18;
}
.ld-sheet-view .sheet-ability-card-fineprint{
  color: rgba(247,236,209,.68);
  font-family: "Cinzel", serif;
  font-size: .66rem;
  line-height: 1.45;
  text-transform: uppercase;
}
.ld-sheet-view.ld-sheet-edit .sub-ability-edit-row{
  border: 1px solid rgba(168,85,247,.42);
  background:
    radial-gradient(circle at 90% 10%, rgba(216,180,254,.18), transparent 28%),
    linear-gradient(145deg, rgba(15,23,42,.92), rgba(31,18,58,.76));
  box-shadow: 0 0 16px rgba(168,85,247,.14), inset 0 0 0 1px rgba(250,204,21,.08);
}
.ld-sheet-view.ld-sheet-edit .sub-ability-edit-row:focus-within{
  border-color: rgba(250,204,21,.5);
  box-shadow: 0 0 20px rgba(250,204,21,.14), 0 0 22px rgba(168,85,247,.16);
}
.ld-sheet-view.ld-sheet-edit .notebook-add-small,
.ld-sheet-view.ld-sheet-edit .notebook-remove-small{
  padding: .42rem .7rem;
  font-size: .72rem;
}
@media (max-width: 1100px){
  .ld-sheet-view.ld-sheet-edit .main-grid{
    grid-template-columns: 1fr;
  }
  .ld-sheet-view.ld-sheet-edit .skill-edit-row,
  .ld-sheet-view.ld-sheet-edit .power-edit-row,
  .ld-sheet-view.ld-sheet-edit .equipment-edit-row,
  .ld-sheet-view.ld-sheet-edit .sub-ability-edit-row{
    grid-template-columns: 1fr;
  }
  .ld-sheet-view.ld-sheet-edit .ability-suggest-panel{
    width: 100%;
  }
  .ld-sheet-view.ld-sheet-edit .notebook-remove,
  .ld-sheet-view.ld-sheet-edit .notebook-add{
    width: 100%;
  }
}
@media (max-width: 640px){
  .ld-sheet-view.ld-sheet-edit .direct-edit-tabs{
    top: .5rem;
  }
  .ld-sheet-view.ld-sheet-edit .section{
    padding: .8rem !important;
  }
  .ld-sheet-view.ld-sheet-edit .sheet-edit-input,
  .ld-sheet-view.ld-sheet-edit .sheet-edit-textarea,
  .ld-sheet-view.ld-sheet-edit .sheet-edit-select{
    min-height: 2.7rem;
  }
}