
[data-spell-author-only][hidden] { display: none !important; }
.spell-author-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-bottom:18px; }
.spell-data-notice { padding:14px; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; }

/* =========================================================
   TriNex Spells — cleaned stylesheet
   Структура:
   1. Theme variables
   2. Base layout
   3. Header
   4. Search / actions / filters
   5. Type navigation
   6. Sections / cards
   7. Floating controls
   8. Light theme refinements
   9. Print
   10. Responsive
   ========================================================= */

/* 1. Theme variables */
:root {
  --bg: #0b0d12;
  --panel: #12151c;
  --muted: #98a2b3;
  --text: #e8eef7;
  --border: #202637;
  --chip: #1d2433;
  --link: #a5b4fc;
  --danger: #ef4444;
  --maxw: 1180px;
  --pad: 16px;
  --headH: 220px;
}

[data-theme="light"] {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --muted: #475569;
  --text: #0f172a;
  --border: #e2e8f0;
  --chip: #f1f5f9;
  --link: #4f46e5;
}

/* 2. Base layout */
* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Noto Sans", Arial, sans-serif;
}

a {
  color: var(--link);
  text-decoration: none;
}

hr {
  border: none;
  border-top: 1px solid var(--border) !important;
  margin: 12px 0;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad);
}

main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px var(--pad) 60px;
  color: var(--text);
}

footer {
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
  text-align: center;
  font-size: 12px;
  padding: 18px var(--pad);
}

/* Shared buttons */
.btn,
button {
  font-family: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  border-color: var(--link);
}

/* 3. Header */
.spells-header {
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid rgba(165, 180, 252, 0.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.20), transparent 34%),
    radial-gradient(circle at 80% 0%, rgba(34, 211, 238, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(11, 13, 18, 0.98), rgba(11, 13, 18, 0.94));
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.header-top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding-top: 14px;
  padding-bottom: 8px;
}

.header-title-block {
  min-width: 0;
}

.crumbs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--link);
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title-row::before {
  content: "";
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border: none;
  border-radius: 11px;

  background: url('/gallery/tnx-logo-ts1760711022.png') center / cover no-repeat;

  box-shadow:
    0 0 18px rgba(139, 92, 246, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.page-title-row h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: 0.2px;
}

.page-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.header-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 760px;
}

.header-links-main,
.header-links-back {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.header-links .btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.header-links .btn:hover {
  background: rgba(165, 180, 252, 0.08);
}

.header-panel {
  margin-top: 4px;
  padding-top: 10px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(165, 180, 252, 0.10);
}

/* 4. Search / actions / filters */
.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 10px;
}

.spell-searchbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin-bottom: 10px;
}

.spell-searchbar input {
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(165, 180, 252, 0.06), transparent 46%),
    var(--panel) !important;
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
}

.spell-searchbar input:focus {
  outline: none;
  border-color: var(--link);
  box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.13);
}

.spell-searchbar button,
.searchbar button {
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--chip) !important;
  color: var(--text) !important;
  cursor: pointer;
}

#stat {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-left: 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(165, 180, 252, 0.06);
  color: var(--muted) !important;
  font-size: 12px;
  white-space: nowrap;
}

.toolsbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0 10px;
}

.spell-toolsbar {
  padding: 0;
  margin: 0 0 10px;
}

.toolsbar button,
.tools button {
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--text) !important;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.toolsbar button:hover,
.tools button:hover {
  border-color: var(--link) !important;
  background: rgba(165, 180, 252, 0.08) !important;
}

.spell-toolsbar button,
.spell-toolsbar .global-selected-count {
  min-height: 34px;
}

.global-selected-count {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: rgba(165, 180, 252, 0.08);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
}

.print-cheat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--text) !important;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.print-cheat-toggle:hover {
  border-color: var(--link) !important;
  background: rgba(165, 180, 252, 0.08) !important;
}

.print-cheat-toggle input {
  margin: 0;
  accent-color: var(--link);
  cursor: pointer;
}

.print-cheat-toggle input:checked + span {
  color: var(--link);
  font-weight: 700;
}

/* 5. Type navigation */
.type-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(34, 211, 238, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.022);
}

.type-nav-title {
  color: var(--muted);
  font-size: 12px;
  margin-right: 4px;
}

.type-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: none;
}

.type-nav-link:hover {
  border-color: var(--link);
  color: var(--link);
}

.type-nav-count {
  color: var(--muted);
  font-size: 11px;
}

/* 6. Sections / cards */
.section-block {
  scroll-margin-top: var(--headH);
  margin: 18px 0 32px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.10), transparent 38%),
    var(--panel);
}

.section-heading,
.rank-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.section-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.section-title {
  margin: 0;
  font-size: 24px;
}

.imported {
  scroll-margin-top: var(--headH);
}

.rank-heading {
  margin: 16px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.rank-heading h1 {
  margin: 0;
  font-size: 18px;
}

.section-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-btn {
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.mini-btn:hover {
  border-color: var(--link);
}

.selected-chip {
  border: 1px solid var(--border);
  background: rgba(165, 180, 252, 0.08);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.2;
}

.spell-favorites-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
  padding: 9px 10px;
  border: 1px solid rgba(165, 180, 252, 0.16);
  border-radius: 14px;
  background: rgba(165, 180, 252, 0.06);
}

.spell-favorites-panel select,
.spell-favorites-panel input {
  min-height: 36px;
  max-width: min(260px, 100%);
  padding: 7px 10px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  font: inherit;
  font-size: 13px;
}

.spell-favorites-panel .btn {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 13px;
  border-radius: 999px;
  background:
    radial-gradient(circle at top left, rgba(165, 180, 252, 0.12), transparent 58%),
    var(--panel);
  line-height: 1.2;
  white-space: nowrap;
}

.spell-favorites-panel .btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.spell-favorites-status {
  color: var(--muted);
  font-size: 12px;
}

body.spell-favorites-disabled .spell-favorites-panel,
body.spell-favorites-disabled .spell-favorite-btn,
body.header-compact .spell-favorites-panel {
  display: none !important;
}

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

/* 7. Floating controls */
.float-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  width: auto;
  min-width: 112px;
  height: 54px;
  padding: 0 14px;
  border: 2px solid rgba(165, 180, 252, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(circle at top left, rgba(165, 180, 252, 0.32), transparent 46%),
    linear-gradient(180deg, rgba(29, 36, 51, 0.98), rgba(18, 21, 28, 0.98));
  color: var(--text);
  font-weight: 700;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(165, 180, 252, 0.08) inset;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.float-top.visible {
  opacity: 0.98;
  pointer-events: auto;
  transform: translateY(0);
}

.float-top:hover {
  border-color: var(--link);
  transform: translateY(-3px);
}

.float-top span {
  display: inline-flex;
  align-items: center;
}

.float-top-icon {
  font-size: 24px;
  line-height: 1;
  margin-right: 6px;
}

.float-top-label {
  font-size: 13px;
}

/* 8. Light theme refinements */
[data-theme="light"] .spells-header {
  background:
    radial-gradient(circle at 18% 0%, rgba(79, 70, 229, 0.12), transparent 34%),
    radial-gradient(circle at 80% 0%, rgba(8, 145, 178, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(247, 248, 251, 0.98), rgba(247, 248, 251, 0.94));
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

[data-theme="light"] .spell-toolsbar button,
[data-theme="light"] .spell-toolsbar .global-selected-count,
[data-theme="light"] .spell-toolsbar .print-cheat-toggle {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

[data-theme="light"] .spell-toolsbar button:hover,
[data-theme="light"] .spell-toolsbar .print-cheat-toggle:hover,
[data-theme="light"] #printSel:hover {
  background: #eef2ff !important;
  border-color: #818cf8 !important;
  color: #312e81 !important;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.14);
  transform: translateY(-1px);
}

[data-theme="light"] #printSel {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

[data-theme="light"] #resetFilters:hover {
  background: #fff7ed !important;
  border-color: #fb923c !important;
  color: #9a3412 !important;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.13);
}

[data-theme="light"] #clearAllSel:hover {
  background: #eff6ff !important;
  border-color: #60a5fa !important;
  color: #1d4ed8 !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

[data-theme="light"] .spell-toolsbar .global-selected-count {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: #c7d2fe !important;
}

[data-theme="light"] .spell-toolsbar .print-cheat-toggle input:checked + span {
  color: #3730a3;
}

[data-theme="light"] .float-top {
  background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.16), transparent 46%),
    linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #1e293b;
  border-color: #c7d2fe;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(79, 70, 229, 0.08) inset;
}

[data-theme="light"] .float-top:hover {
  background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.22), transparent 46%),
    linear-gradient(180deg, #eef2ff, #ffffff);
  border-color: #6366f1;
  color: #312e81;
}

[data-theme="light"] .float-top-icon {
  color: #4f46e5;
}

[data-theme="light"] .float-top-label {
  color: #334155;
}

[data-theme="light"] .float-top:hover .float-top-label {
  color: #312e81;
}

/* 9. Print */
@media print {
  @page {
    size: A4;
    margin: 8mm;
  }

  header,
  footer,
  .toolsbar,
  .filtersBar,
  .searchbar,
  .type-nav,
  .section-actions,
  .global-selected-count,
  .spell-favorites-panel,
  .spell-favorite-btn,
  .float-top {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10px !important;
    line-height: 1.28 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  main {
    max-width: none;
    padding: 0;
  }

  .section-block,
  .rank-heading {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4mm;
    align-items: start;
  }

  .card {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    display: block;
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0;
    padding: 6px !important;
    border-radius: 5px !important;
  }

  .card:hover {
    transform: none;
    box-shadow: none;
  }

  .spell-card-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 2mm !important;
    margin-bottom: 2mm !important;
  }

  .spell-card .title {
    font-size: 12px !important;
    line-height: 1.12 !important;
  }

  .spell-card-actions {
    min-height: 0 !important;
    gap: 1.5mm !important;
    max-width: 42mm !important;
  }

  .spell-favorite-btn {
    display: none !important;
  }

  .spell-card .cost {
    min-height: 0 !important;
    padding: 1mm 1.7mm !important;
    font-size: 8.7px !important;
    line-height: 1.1 !important;
  }

  .spell-badges,
  .spell-card .chips {
    gap: 1.2mm !important;
    margin: 1.5mm 0 2mm !important;
  }

  .spell-card .chip,
  .spell-badge {
    padding: 0.5mm 1.5mm !important;
    font-size: 8.2px !important;
    line-height: 1.05 !important;
    border-radius: 999px !important;
  }

  .spell-card .row {
    grid-template-columns: 24mm minmax(0, 1fr) !important;
    gap: 2mm !important;
    margin: 0 !important;
    padding: 1mm 0 !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .spell-card .section {
    margin-top: 1.8mm !important;
    padding-top: 1.8mm !important;
    font-size: 9.4px !important;
    line-height: 1.22 !important;
  }

  .selbox {
    display: none !important;
  }
}

/* 10. Responsive */
@media (max-width: 900px) {
  :root {
    --headH: 64px;
  }

  .spells-header {
    position: static;
  }

  .header-top {
    grid-template-columns: 1fr;
  }

  .header-links {
    align-items: flex-start;
    max-width: none;
  }

  .header-links-main,
  .header-links-back {
    justify-content: flex-start;
  }

  .spell-searchbar {
    grid-template-columns: 1fr auto;
  }

  #stat {
    grid-column: 1 / -1;
    width: fit-content;
  }
}

@media (max-width: 720px) {
  .filtersBar {
    flex-direction: column;
  }

  .filtersBar details.filter {
    min-width: 100%;
  }
}

@media (max-width: 560px) {
  .page-title-row h1 {
    font-size: 24px;
  }

  .header-links .btn {
    font-size: 12px;
    padding: 7px 9px;
  }

  .spell-toolsbar button,
  .spell-toolsbar .global-selected-count {
    width: 100%;
    justify-content: center;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .float-top {
    min-width: 54px;
    width: 54px;
    padding: 0;
  }

  .float-top-label {
    display: none !important;
  }

  .float-top-icon {
    margin-right: 0;
  }
}

/* === Компактный режим шапки === */

body.header-compact .spells-header {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

body.header-compact .header-top {
  display: none;
}

body.header-compact .header-panel {
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: none;
}

body.header-compact .spell-searchbar {
  margin-bottom: 8px;
}

body.header-compact .filtersBar,
body.header-compact #typeNav {
  display: none !important;
}

body.header-compact .spell-toolsbar {
  margin-bottom: 0;
}

#compactHeaderToggle {
  border-color: rgba(165, 180, 252, 0.28) !important;
}

body.header-compact #compactHeaderToggle {
  color: var(--link) !important;
  border-color: var(--link) !important;
  background: rgba(165, 180, 252, 0.10) !important;
}

/* Светлая тема */
[data-theme="light"] body.header-compact .spells-header,
[data-theme="light"].header-compact .spells-header {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
}

[data-theme="light"] #compactHeaderToggle,
[data-theme="light"] .spell-toolsbar #compactHeaderToggle {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

[data-theme="light"].header-compact #compactHeaderToggle,
[data-theme="light"] body.header-compact #compactHeaderToggle {
  background: #eef2ff !important;
  border-color: #818cf8 !important;
  color: #312e81 !important;
}
/* Полная шапка уезжает при прокрутке, компактная остаётся сверху */
.spells-header {
  position: relative;
  top: auto;
}

body.header-compact .spells-header {
  position: sticky;
  top: 0;
  z-index: 120;
}
/* === Mobile compact header: оставить только "Выбрано" и "Развернуть" === */

@media (max-width: 560px) {
  body.header-compact #printSel,
  body.header-compact #clearAllSel,
  body.header-compact #resetFilters,
  body.header-compact #printCheatSheetToggle {
    display: none !important;
  }

  body.header-compact .spell-toolsbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  body.header-compact .spell-toolsbar .global-selected-count,
  body.header-compact #compactHeaderToggle {
    width: 100%;
    min-height: 38px;
    justify-content: center;
  }

  body.header-compact #compactHeaderToggle {
    display: inline-flex !important;
  }
}
/* === Плавающая кнопка печати рядом с "Наверх" === */

.float-print {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 300;
  width: auto;
  min-width: 112px;
  height: 46px;
  padding: 0 14px;
  border: 2px solid rgba(165, 180, 252, 0.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at top left, rgba(165, 180, 252, 0.22), transparent 46%),
    var(--panel);
  color: var(--text);
  font-weight: 700;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(165, 180, 252, 0.08) inset;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}

.float-print.visible {
  opacity: 0.98;
  pointer-events: auto;
  transform: translateY(0);
}

.float-print:hover {
  border-color: var(--link);
  transform: translateY(-3px);
}

.float-print-icon {
  margin-right: 6px;
}

[data-theme="light"] .float-print {
  background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.14), transparent 46%),
    linear-gradient(180deg, #ffffff, #f1f5f9);
  color: #1e293b;
  border-color: #c7d2fe;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.14),
    0 0 0 1px rgba(79, 70, 229, 0.08) inset;
}

[data-theme="light"] .float-print:hover {
  background:
    radial-gradient(circle at top left, rgba(79, 70, 229, 0.20), transparent 46%),
    linear-gradient(180deg, #eef2ff, #ffffff);
  border-color: #6366f1;
  color: #312e81;
}

@media (max-width: 560px) {
  .float-print {
    min-width: 54px;
    width: 54px;
    height: 46px;
    padding: 0;
    bottom: 86px;
  }

  .float-print-label {
    display: none;
  }

  .float-print-icon {
    margin-right: 0;
  }
}
/* Catalogue workspace: shared header, compact controls and one filter list. */
[hidden]{display:none!important}
.spells-header{position:relative;top:auto;z-index:10;box-shadow:none}
[data-theme="light"] .spells-header{box-shadow:none}
.spells-header .header-top{width:100%;max-width:var(--maxw);margin-inline:auto;padding:14px var(--pad) 12px;grid-template-columns:minmax(220px,1fr) auto}
.spells-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;max-width:1680px;margin:0 auto;padding:20px 24px 72px;align-items:start}
.spells-results{min-width:0}
.spell-sidebar{position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow:auto;scrollbar-width:thin;padding:14px;background:var(--panel);border:1px solid var(--border);border-radius:14px}
.sidebar-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;padding-left:8px;font-size:16px}
#filtersToggle,#filtersClose{display:inline-flex;align-items:center;justify-content:center}
#spellSidebar .filtersBar{display:block;margin:0;padding:0;border:0;background:none}
#spellSidebar .filter{display:block;min-width:0;width:100%;margin:0;padding:0;border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;box-shadow:none;transform:none;overflow:visible}
#spellSidebar .filter[open]{padding-bottom:10px}
#spellSidebar .filter>summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:12px 8px;list-style:none;font-weight:600;font-size:13px;line-height:1.4;user-select:none;border:0;border-radius:8px;color:var(--text);background:none;overflow-wrap:anywhere}
#spellSidebar .filter>summary::-webkit-details-marker{display:none}
#spellSidebar .filter>summary::marker{content:""}
#spellSidebar .filter>summary::after{content:"";display:block;flex:0 0 6px;width:6px;height:6px;margin-left:auto;margin-right:3px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg)}
#spellSidebar .filter[open]>summary::after{transform:rotate(45deg)}
#spellSidebar .filter>summary:hover{background:var(--chip);color:var(--link)}
#spellSidebar .group{display:grid;gap:3px;margin:0;padding:0 4px}
#spellSidebar .pill{position:relative;display:flex;align-items:center;gap:8px;min-height:32px;margin:0;padding:6px 8px;border:1px solid transparent;border-radius:7px;background:none;box-shadow:none;color:var(--text);font-size:13px;line-height:1.35;cursor:pointer;transform:none}
#spellSidebar .pill input{width:15px;height:15px;flex:0 0 auto;margin:0;accent-color:var(--link)}
#spellSidebar .pill span{white-space:normal}
#spellSidebar .pill:hover{background:var(--chip)}
#spellSidebar .pill:has(input:checked){background:color-mix(in srgb,var(--link) 12%,var(--panel));border-color:color-mix(in srgb,var(--link) 35%,var(--border));color:var(--link)}
#spellSidebar .pill input:checked+span{font-weight:600;color:inherit}
#spellSidebar .pill:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}
#spellSidebar #f-rank{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#spellSidebar #f-rank .pill{justify-content:center;padding:5px 0;border-color:var(--border);background:var(--bg);font-size:13px}
#spellSidebar #f-rank .pill:has(input:checked){background:color-mix(in srgb,var(--link) 15%,var(--panel));border-color:var(--link);color:var(--link)}
#spellSidebar #f-rank input{position:absolute;width:1px;height:1px;opacity:0}
#spellSidebar .type-nav{display:flex;flex-direction:column;gap:3px;margin:0;padding:0 4px;border:0;background:none}
#spellSidebar .type-nav-title{display:none}
#spellSidebar .type-nav-link{display:flex;justify-content:space-between;width:100%;padding:5px 8px;font-size:13px;border:0;border-radius:7px;background:none}
#spellSidebar .type-nav-link:hover{background:var(--chip)}
#spellSidebar .type-nav-count{background:var(--chip);font-size:11px}
.pool-choice{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0;cursor:pointer;line-height:1.45}
.pool-choice input{flex:0 0 auto;width:15px;height:15px;margin:0;accent-color:var(--link)}
.pool-choice small{color:var(--muted)}
#spellSidebar .pool-choice{padding:5px 8px;margin:2px 0;border-radius:7px}
#spellSidebar .pool-choice:hover{background:var(--chip)}
#spellSidebar .pool-choice:has(input:checked){background:color-mix(in srgb,var(--link) 10%,var(--panel));color:var(--link)}
#poolFilters fieldset{border:0;margin:0 0 8px;padding:0;min-width:0}
#poolFilters legend{padding:0 8px 4px;font-size:11px;color:var(--muted)}
#spellSidebar .meta{font-size:11px;line-height:1.5;margin:6px 8px}
#spellSidebar #poolsReload{margin-left:8px;font-size:11px;min-height:28px;padding:3px 8px;background:none}
#spellSidebar #resetFilters{width:100%;margin-top:12px;background:none}
.catalog-toolbar{padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:18px}
.catalog-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px}
.catalog-toolbar .searchbar{display:flex;flex:1 1 320px;gap:6px;align-items:center;margin:0;padding:0;border:0;background:none;min-width:0}
.catalog-toolbar #q{min-width:0;width:0;min-height:36px;flex:1;background:var(--bg)!important;border:1px solid var(--border);border-radius:8px;color:var(--text);padding:6px 10px;font:inherit;font-size:13px}
.catalog-toolbar .searchbar button{min-height:36px;padding:6px 9px;font-size:12px}
.catalog-toolbar #clear{min-width:32px;padding-inline:6px}
.power-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;border:0;font-size:13px}
#powerForm{display:flex;align-items:center;gap:6px;font-size:13px}
#powerValue{width:58px;min-height:34px;padding:5px 6px;background:var(--bg);border:1px solid var(--border);border-radius:7px;color:var(--text);font:inherit}
.power-bar .pool-choice{margin:0;font-size:12px}
.power-help{position:relative;font-size:13px}
.power-help summary{display:flex;align-items:center;justify-content:center;cursor:pointer;list-style:none;width:24px;height:24px;border:1px solid var(--border);border-radius:50%;color:var(--muted)}
.power-help summary::-webkit-details-marker{display:none}
.power-help-content{position:absolute;right:0;top:32px;z-index:20;width:310px;max-width:calc(100vw - 56px);padding:12px;background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px #0002}
.power-help p{margin:0 0 8px}
.catalog-toolbar .toolsbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;padding:9px 0 0;border:0;border-top:1px solid var(--border);background:none}
.catalog-toolbar button,.spell-sidebar button,#powerDialog button{font:inherit;font-size:12px;color:var(--text);background:var(--chip);border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:6px 9px;min-height:32px;white-space:normal}
.catalog-toolbar button:hover,.spell-sidebar button:hover,#powerDialog button:hover{border-color:var(--link);transform:none}
.catalog-toolbar button:disabled,.spell-sidebar button:disabled,#powerDialog button:disabled{opacity:.55;cursor:default}
#filtersClose{min-height:28px;width:28px;padding:0;background:none;border-color:transparent;color:var(--muted)}
.catalog-toolbar #selectedCount{margin-left:auto;font-size:11px;min-height:26px;padding:3px 6px;background:none!important;border:0;color:var(--muted)!important;box-shadow:none}
.catalog-toolbar .spell-toolsbar .print-cheat-toggle{font-size:11px;margin:0;min-height:28px;padding:3px 4px;background:none!important;border:0!important;box-shadow:none;transform:none}
.catalog-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin-top:6px;color:var(--muted);font-size:11px;line-height:1.5}
.catalog-meta #stat{font-size:11px;white-space:nowrap;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;flex:0 0 auto}
.catalog-meta .active-filters{font-size:11px;color:var(--muted);margin:0;flex:1 1 180px}
#powerStatus{font-size:11px;flex:0 1 auto;margin-left:auto;max-width:100%}
.spells-results .section-block{scroll-margin-top:20px}
.spells-results .section-heading{position:static;margin-bottom:10px}
.spells-results .section-title{font-size:25px}
.spells-results .rank-heading h1{font-size:16px}
.spells-results .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr))}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-top:10px}
.field select{width:100%;padding:8px;border-radius:8px;background:var(--bg);color:var(--text);border:1px solid var(--border)}
.favorite-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:13px}
#powerDialog{max-width:470px;width:calc(100% - 32px);padding:28px;border:1px solid var(--border);border-radius:20px;background:var(--panel);color:var(--text)}
#powerDialog::backdrop{background:#0009;backdrop-filter:blur(3px)}
#powerDialog h2{margin-top:0;font-size:24px}
#powerDialogForm>label{display:block}
#powerDialogValue{display:block;margin:10px 0;padding:10px;width:120px;font:inherit;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.spell-formula{font-weight:600;text-decoration:underline dotted;text-underline-offset:3px}
.filters-backdrop{display:none}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
@media(max-width:1100px){.spells-layout{gap:16px;padding:16px;grid-template-columns:245px minmax(0,1fr)}}
@media(max-width:900px){
 .spells-header .header-top{grid-template-columns:1fr;gap:12px}
 .spells-layout{display:block;padding:12px}
 .spell-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:101;width:min(330px,88vw);max-height:100dvh;border-radius:0 14px 14px 0;transform:translateX(-105%);visibility:hidden;transition:transform .18s ease,visibility .18s}
 .filters-open .spell-sidebar{transform:translateX(0);visibility:visible}.filters-open{overflow:hidden}
 .filters-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:100;border:0;border-radius:0;background:#0008}
 .catalog-toolbar{padding:10px}.catalog-controls{gap:8px}.catalog-toolbar .searchbar{flex-basis:100%}
 .power-bar{gap:8px}.power-help-content{left:0;right:auto}
 .catalog-meta .active-filters{flex-basis:55%}#powerStatus{margin-left:0}
 .spells-results .section-heading{align-items:flex-start;gap:6px}.section-actions{gap:4px}.section-actions .mini-btn{font-size:11px;padding:5px 7px}
}
@media(max-width:560px){
 .catalog-toolbar .spell-toolsbar{gap:4px}
 .catalog-toolbar .spell-toolsbar button{width:auto;min-width:0;font-size:11px;padding:5px 7px}
 .catalog-toolbar #selectedCount{width:auto;margin-left:auto}
 .catalog-toolbar .spell-toolsbar .print-cheat-toggle{margin-left:auto}
 .power-help-content{position:fixed;left:24px;right:24px;top:auto;width:auto;margin-top:8px}
 .power-bar{gap:8px 12px}
}
@media(min-width:901px){.filters-collapsed .spells-layout{grid-template-columns:minmax(0,1fr)}.filters-collapsed .spell-sidebar{display:none}}
.filters-open .float-top{display:none}
/* Cards and compact list share the same spell nodes and selection state. */
.spell-view-switch{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--border);border-radius:9px;background:var(--bg);margin-right:6px}
.catalog-toolbar .spell-view-switch button{min-height:28px;padding:4px 9px;border:0!important;background:transparent!important;box-shadow:none!important;font-size:12px}
.catalog-toolbar .spell-view-switch button[aria-pressed="true"]{color:var(--link)!important;background:color-mix(in srgb,var(--link) 13%,var(--panel))!important}
.spell-entry,.spell-type-body{display:contents}
.spell-list-open,.spell-group-toggle{display:none}
.spells-list-view .spell-entry,.spells-list-view .spell-type-body{display:block}
.spells-list-view .spell-entry>.spell-card{display:none}
.spells-list-view .spell-group-label{display:none}
.spells-list-view .section-block{padding:14px 18px;margin-bottom:14px;border-radius:14px;box-shadow:none;background:var(--panel)}
.spells-list-view .section-heading{padding:0;margin:0 0 4px;background:none;border:0;align-items:center}
.spells-list-view .section-title{font-size:20px}
.spells-list-view .imported{margin-top:8px}
.spells-list-view .rank-heading{padding:7px 0;margin:0;border:0;border-top:1px solid var(--border);border-radius:0;background:none;box-shadow:none;align-items:center}
.spells-list-view .rank-heading h1{font-size:13px;color:var(--muted)}
.spells-list-view .spell-group-toggle{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:4px 0;color:inherit;font:inherit;font-weight:inherit;text-align:left;border:0;background:none;cursor:pointer;overflow-wrap:anywhere}
.spell-group-toggle::before{content:"";flex:0 0 6px;width:6px;height:6px;margin:0 3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.spell-group-toggle[aria-expanded="false"]::before{transform:rotate(-45deg)}
.spells-list-view .section-block.spell-group-closed>.spell-type-body,
.spells-list-view .imported.spell-group-closed>.grid{display:none}
.spells-list-view .grid{display:block;margin-top:0}
.spells-list-view .spell-list-open{display:flex;align-items:center;gap:12px;width:100%;min-height:36px;padding:7px 10px;text-align:left;font:inherit;font-size:14px;line-height:1.5;color:var(--text);background:none;border:0;border-radius:7px;cursor:pointer}
.spell-list-name{min-width:0;overflow-wrap:anywhere}
.spells-list-view .spell-list-open:hover,.spells-list-view .spell-list-open:focus-visible{background:var(--chip);color:var(--link)}
.spells-list-view .is-print-selected>.spell-list-open{background:color-mix(in srgb,var(--link) 8%,var(--panel))}
.spell-list-selection{margin-left:auto;flex:0 0 auto;color:var(--link);font-size:13px}
.spells-list-view .section-actions{gap:4px}
.spells-list-view .section-actions .mini-btn,.spells-list-view .selected-chip{font-size:10px;padding:3px 6px;min-height:24px}
body.spell-preview-open{overflow:hidden}
.spell-preview{width:min(760px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--border);border-radius:16px;background:var(--panel);color:var(--text);box-shadow:0 24px 80px #0005}
.spell-preview::backdrop{background:#0009;backdrop-filter:blur(3px)}
.spell-preview-heading{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--border)}
.spell-preview-heading h2{margin:0;flex:1;min-width:0;font-size:14px;line-height:1.4;font-weight:500;color:var(--muted);overflow-wrap:anywhere}
.spell-preview-heading button{flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--chip);color:var(--text);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.spell-preview-body{padding:14px}
.spell-preview-body>.spell-card{display:block;width:100%;max-width:none;margin:0;box-shadow:none}
.spell-preview-body .selbox{padding:8px}
.spell-preview-open .float-top,.spell-preview-open .float-print{display:none}
@media(max-width:560px){
 .catalog-toolbar .spell-view-switch{flex:0 0 100%;width:fit-content;margin:0 0 3px;max-width:fit-content}
 .catalog-toolbar .spell-view-switch button{font-size:12px;padding:5px 10px}
 .spells-list-view .section-block{padding:10px 12px}
 .spells-list-view .section-heading{flex-wrap:wrap;gap:2px}
 .spells-list-view .section-title{font-size:18px}
 .spells-list-view .section-actions .mini-btn,.spells-list-view .selected-chip{font-size:9px;padding:3px 4px}
 .spells-list-view .spell-list-open{font-size:13px;min-height:40px;padding:8px}
 .spell-preview{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:12px}
 .spell-preview-body{padding:8px}
 .spell-preview-heading{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.spell-sidebar{transition:none}html,body{scroll-behavior:auto}}
@media print{.spell-sidebar,.catalog-toolbar,.filters-backdrop,#powerDialog{display:none!important}.spells-layout{display:block;padding:0}.spell-formula{text-decoration:none}}
