/* ── Smooth theme transition ────────────────────────────────────────────── */
*, *::before, *::after {
  transition: background-color .2s ease, border-color .2s ease, color .15s ease;
}
/* Don't animate transforms or box-shadows (causes jank) */
.admin-tile, .series-card, .set-card, .card-tile {
  transition: background-color .2s ease, border-color .2s ease, color .15s ease,
              transform .15s, box-shadow .15s !important;
}

/* ── PokiVault theme variables ───────────────────────────────────────────── */

:root,
[data-theme="light"] {
  --page-bg:           #f5f4fb;
  --card-surface:      #ffffff;
  --card-border:       #e2dff0;
  --text-main:         #1a1825;
  --text-muted:        #6c757d;
  --text-subtle:       #adb5bd;
  --accent:            #6f42c1;
  --accent-soft:       #6f42c1;
  --search-bg:         #ffffff;
  --progress-track:    #e2dff0;
  --milestone-bg:      #f5f4fb;
  --badge-bg:          #f0ecfb;
  --badge-border:      #d9d0f5;
  --badge-text:        #6f42c1;
  --owned-dot-border:  #f5f4fb;
  --no-img-bg:         #f5f4fb;
  --no-img-border:     #e2dff0;
  --no-img-text:       #adb5bd;
  --set-header-bg:     #ffffff;
  --set-header-border: #e2dff0;
  --input-bg:          #ffffff;
  --input-border:      #ced4da;
  --input-text:        #212529;
  --pagination-bg:     #ffffff;
  --pagination-border: #dee2e6;
  --pagination-text:   #6f42c1;
}

[data-theme="dark"] {
  /* ── PokiVault custom variables ── */
  --page-bg:           #13111a;
  --card-surface:      #1e1b2e;
  --card-border:       #2d2a3e;
  --text-main:         #e6e4f0;
  --text-muted:        #8b8a9b;
  --text-subtle:       #5a5870;
  --accent:            #6f42c1;
  --accent-soft:       #a78bfa;
  --search-bg:         #1e1b2e;
  --progress-track:    #2d2a3e;
  --milestone-bg:      #13111a;
  --badge-bg:          #2d2a3e;
  --badge-border:      #3d3a5e;
  --badge-text:        #a78bfa;
  --owned-dot-border:  #13111a;
  --no-img-bg:         #1e1b2e;
  --no-img-border:     #2d2a3e;
  --no-img-text:       #5a5870;
  --set-header-bg:     #1e1b2e;
  --set-header-border: #2d2a3e;
  --input-bg:          #13111a;
  --input-border:      #2d2a3e;
  --input-text:        #e6e4f0;
  --pagination-bg:     #1e1b2e;
  --pagination-border: #2d2a3e;
  --pagination-text:   #a78bfa;

  /* ── Bootstrap 5 dark mode variables (AdminKit omits these) ── */
  color-scheme: dark;
  --bs-body-bg:                  #13111a;
  --bs-body-bg-rgb:              19, 17, 26;
  --bs-body-color:               #e6e4f0;
  --bs-body-color-rgb:           230, 228, 240;
  --bs-emphasis-color:           #fff;
  --bs-secondary-color:          rgba(230,228,240,.65);
  --bs-secondary-bg:             #2d2a3e;
  --bs-secondary-bg-rgb:         45, 42, 62;
  --bs-tertiary-bg:              #1e1b2e;
  --bs-tertiary-bg-rgb:          30, 27, 46;
  --bs-border-color:             #2d2a3e;
  --bs-border-color-translucent: rgba(255,255,255,.12);
  --bs-heading-color:            #e6e4f0;
  --bs-link-color:               #a78bfa;
  --bs-link-hover-color:         #c4a0f0;
  --bs-link-color-rgb:           167,139,250;
  --bs-link-hover-color-rgb:     196,160,240;
  --bs-code-color:               #e685b5;
  --bs-card-bg:                  #1e1b2e;
  --bs-card-border-color:        #2d2a3e;

  /* light utility override so bg-light renders dark */
  --bs-light:                    #1e1b2e;
  --bs-light-rgb:                30, 27, 46;
}

/* ── Form controls on card pages ─────────────────────────────────────────── */
.pv-input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
.pv-input:focus {
  background: var(--input-bg) !important;
  border-color: var(--accent) !important;
  color: var(--input-text) !important;
  box-shadow: 0 0 0 .2rem rgba(111,66,193,.25);
}
.pv-input option {
  background: var(--input-bg);
  color: var(--input-text);
}

/* ── Admin dashboard tiles dark mode ────────────────────────────────────── */
[data-theme="dark"] .admin-tile {
  background: var(--bs-card-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}
[data-theme="dark"] .admin-tile:hover {
  color: var(--bs-body-color) !important;
  border-color: #6f42c1 !important;
}
[data-theme="dark"] .admin-tile .tile-sub { color: var(--bs-secondary-color) !important; }

[data-theme="dark"] .tile-purple { background: rgba(111,66,193,.25) !important; color: #c4a0f0 !important; }
[data-theme="dark"] .tile-blue   { background: rgba(13,110,253,.2)  !important; color: #90b4f8 !important; }
[data-theme="dark"] .tile-green  { background: rgba(25,135,84,.2)   !important; color: #75d5a0 !important; }
[data-theme="dark"] .tile-orange { background: rgba(253,126,20,.2)  !important; color: #fda05e !important; }
[data-theme="dark"] .tile-red    { background: rgba(220,53,69,.2)   !important; color: #f08090 !important; }
[data-theme="dark"] .tile-teal   { background: rgba(32,201,151,.2)  !important; color: #6de8c0 !important; }
[data-theme="dark"] .tile-yellow { background: rgba(255,193,7,.2)   !important; color: #ffd76e !important; }
[data-theme="dark"] .tile-gray   { background: rgba(108,117,125,.2) !important; color: #9ba5ae !important; }

[data-theme="dark"] .stat-bar {
  background: var(--bs-secondary-bg) !important;
  border-color: var(--bs-border-color) !important;
}
[data-theme="dark"] .section-title { color: var(--bs-secondary-color) !important; }

/* ── Bootstrap component dark overrides ─────────────────────────────────── */
/* AdminKit hardcodes colours inside component rules, so root-level vars alone are not enough */

/* Main content area background */
[data-theme="dark"] .main {
  background: var(--page-bg) !important;
}

/* Cards */
[data-theme="dark"] .card {
  --bs-card-bg:           #1e1b2e;
  --bs-card-border-color: #2d2a3e;
  --bs-card-cap-bg:       rgba(255,255,255,.05);
  --bs-card-title-color:  #e6e4f0;
  background-color: #1e1b2e !important;
  border-color: #2d2a3e !important;
  color: #e6e4f0;
}

/* Form controls */
[data-theme="dark"] .form-control {
  background-color: #13111a !important;
  border-color: #2d2a3e !important;
  color: #e6e4f0 !important;
}
[data-theme="dark"] .form-control:focus {
  background-color: #13111a !important;
  border-color: #6f42c1 !important;
  color: #e6e4f0 !important;
  box-shadow: 0 0 0 .2rem rgba(111,66,193,.25);
}
[data-theme="dark"] .form-select {
  background-color: #13111a !important;
  /* arrow SVG with light stroke */
  --bs-form-select-bg-img: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23e6e4f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  border-color: #2d2a3e !important;
  color: #e6e4f0 !important;
}
[data-theme="dark"] .form-select:focus {
  background-color: #13111a !important;
  border-color: #6f42c1 !important;
  color: #e6e4f0 !important;
  box-shadow: 0 0 0 .2rem rgba(111,66,193,.25);
}
[data-theme="dark"] .form-select option {
  background: #13111a;
  color: #e6e4f0;
}

/* Tables */
[data-theme="dark"] .table {
  --bs-table-striped-bg: rgba(255,255,255,.05);
  --bs-table-hover-bg: rgba(255,255,255,.06);
  --bs-table-active-bg: rgba(255,255,255,.1);
  --bs-table-border-color: #2d2a3e;
  color: #e6e4f0;
}
[data-theme="dark"] .table > thead { color: #8b8a9b; }
[data-theme="dark"] .table-bordered { border-color: #2d2a3e !important; }
[data-theme="dark"] .table td,
[data-theme="dark"] .table th { border-color: #2d2a3e; }

/* bg-light becomes dark surface */
[data-theme="dark"] .bg-light { background-color: #1e1b2e !important; }

/* text-dark stays readable */
[data-theme="dark"] .text-dark { color: #e6e4f0 !important; }

/* Badge bg-warning stays legible */
[data-theme="dark"] .badge.bg-warning { color: #13111a !important; }

/* ── AdminKit navbar dark override ──────────────────────────────────────── */
/* AdminKit hardcodes many colours so Bootstrap's data-bs-theme alone is not enough */

[data-theme="dark"] .navbar-bg {
  background: #1e2430 !important;
  border-bottom: 1px solid #2d3748 !important;
}

/* Hamburger menu lines */
[data-theme="dark"] .hamburger,
[data-theme="dark"] .hamburger::before,
[data-theme="dark"] .hamburger::after {
  background: #cbd5e0 !important;
}

/* Navbar username & icons */
[data-theme="dark"] .navbar-bg .text-dark {
  color: #e2e8f0 !important;
}
[data-theme="dark"] .navbar-bg .nav-link {
  color: #e2e8f0;
}
[data-theme="dark"] .navbar-bg .nav-icon {
  color: #e2e8f0;
}
[data-theme="dark"] .navbar-bg .dropdown-menu {
  background: #2d3748;
  border-color: #4a5568;
}
[data-theme="dark"] .navbar-bg .dropdown-item {
  color: #e2e8f0;
}
[data-theme="dark"] .navbar-bg .dropdown-item:hover {
  background: #4a5568;
}
[data-theme="dark"] .navbar-bg .dropdown-divider {
  border-color: #4a5568;
}

/* ── Card modal ──────────────────────────────────────────────────────────── */
.card-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.82);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card-modal-box {
  position: relative;
  display: flex;
  width: 92vw;
  max-width: 1500px;
  max-height: 90vh;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-surface);
  border: 1px solid var(--card-border);
  box-shadow: 0 32px 100px rgba(0,0,0,.65);
}
.card-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  z-index: 10;
  background: rgba(128,128,128,.12);
  border: 1px solid rgba(128,128,128,.2);
  border-radius: 50%;
  width: 34px; height: 34px;
  color: var(--text-muted); font-size: 1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.card-modal-close:hover { background: rgba(128,128,128,.22); color: var(--text-main); }

/* Left: image panel */
.card-modal-img-panel {
  width: 360px;
  flex-shrink: 0;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 2rem;
  gap: 1rem;
}
.card-modal-img-panel img {
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  display: block;
}
.modal-no-img {
  width: 100%; aspect-ratio: 2.5/3.5;
  background: var(--card-surface); border: 1px dashed var(--card-border);
  border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .75rem; color: var(--text-muted); font-size: .8rem; text-align: center; padding: 1rem;
}
.modal-flavor-text {
  font-size: .76rem; color: var(--text-muted); font-style: italic;
  text-align: center; line-height: 1.5; padding: 0 .25rem;
}

/* Right: info panel */
.card-modal-info-panel {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.modal-info-inner {
  padding: 2.25rem 2.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Name + header */
.modal-card-name {
  font-size: 2.9rem; font-weight: 700;
  color: var(--text-main); line-height: 1.1; margin: 0 2.5rem 0 0;
}
.modal-card-name-sub {
  font-size: 1.15rem; font-weight: 500;
  color: var(--text-muted); line-height: 1.2; margin: -.1rem 0 .3rem 0;
}
/* Japanese sub-lines beneath English values (Scrydex style) */
.modal-chip-ja { display: block; font-size: .72rem; font-weight: 400; color: var(--text-muted); line-height: 1.1; margin-top: .1rem; }
.modal-set-name-ja { display: inline-block; font-size: .8rem; font-weight: 400; color: var(--text-muted); margin-left: .4rem; }
.modal-name-ja { display: block; font-size: .8rem; font-weight: 400; color: var(--text-muted); line-height: 1.15; margin-top: .05rem; }
.modal-text-ja { display: block; font-size: .82rem; color: var(--text-muted); line-height: 1.3; margin-top: .25rem; opacity: .85; }
.modal-lang-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .55rem; border-radius: 6px;
  font-size: .72rem; font-weight: 600;
  background: rgba(111,66,193,.18); color: var(--accent-soft);
  border: 1px solid rgba(111,66,193,.3);
  white-space: nowrap; flex-shrink: 0;
}
.modal-set-line {
  display: flex; align-items: center; gap: .45rem;
  margin-top: .4rem;
  font-size: .9rem;
}
.modal-set-logo { height: 22px; width: 22px; border-radius: 4px; object-fit: contain; }
.modal-set-symbol { height: 18px; width: auto; opacity: .7; }
.modal-set-name { color: var(--accent-soft); font-weight: 600; }
.modal-number { color: var(--text-muted); font-size: .85rem; }

.modal-divider {
  border: none; border-top: 1px solid var(--card-border);
  margin: 1.1rem 0;
}

/* Collection / quantity section */
.modal-collect-table {
  background: var(--page-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  overflow: hidden;
}
.modal-collect-header {
  display: grid; grid-template-columns: 1fr 12rem 12rem 7rem;
  padding: .7rem 1.75rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
  gap: 1.25rem;
}
.modal-collect-row {
  display: grid; grid-template-columns: 1fr 12rem 12rem 7rem;
  align-items: center;
  padding: 1.1rem 1.75rem; gap: 1.25rem;
}
.modal-collect-row + .modal-collect-row {
  border-top: 1px solid var(--card-border);
}
.modal-collect-label {
  font-size: .98rem; color: var(--text-main); font-weight: 600;
}
.modal-collect-sub {
  font-size: .78rem; color: var(--text-muted); margin-top: .2rem;
}
.modal-variant-price {
  display: flex; align-items: center; gap: .5rem;
  font-size: .97rem; font-weight: 600; color: var(--text-main);
}
.modal-variant-price-eur {
  display: flex; align-items: center; gap: .5rem;
  font-size: .97rem; font-weight: 500; color: var(--text-muted);
}
.modal-market-badge {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .2rem .45rem; border-radius: 6px;
  background: var(--page-bg); border: 1px solid var(--card-border);
  text-decoration: none; flex-shrink: 0; line-height: 1;
  transition: border-color .15s;
}
.modal-market-badge:hover { border-color: var(--text-muted); }
.modal-market-badge img {
  height: 22px; width: auto; flex-shrink: 0;
}
.cm-logo-dark { display: none; }
[data-theme="dark"] .cm-logo-light { display: none; }
[data-theme="dark"] .cm-logo-dark  { display: block; }
.modal-market-badge svg { width: 8px; height: 8px; opacity: .5; flex-shrink: 0; }
.modal-qty-controls {
  display: flex; align-items: center;
  background: var(--card-surface); border: 1px solid var(--card-border);
  border-radius: 8px; overflow: hidden;
}
.modal-qty-btn {
  background: none; border: none; color: var(--text-muted);
  width: 38px; height: 38px; font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.modal-qty-btn:hover { background: rgba(128,128,128,.1); color: var(--text-main); }
.modal-qty-btn:disabled { opacity: .3; cursor: default; }
.modal-qty-btn-add {
  background: #f5c518; color: #1a1000; font-weight: 700; font-size: 1.25rem;
  border-left: 1px solid var(--card-border);
}
.modal-qty-btn-add:hover { background: #ffd740; color: #1a1000; }
.modal-qty-num {
  min-width: 38px; text-align: center;
  font-size: 1rem; font-weight: 700; color: var(--text-main);
  border-left: 1px solid var(--card-border); border-right: 1px solid var(--card-border);
  height: 38px; display: flex; align-items: center; justify-content: center;
  padding: 0 .4rem;
}
.modal-qty-num.has-copies { color: #f5c518; }

/* Stats chips grid */
.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}
.modal-stat-block { display: flex; flex-direction: column; gap: .3rem; }
.modal-stat-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.modal-stat-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--page-bg); border: 1px solid var(--card-border);
  border-radius: 8px; padding: .35rem .7rem;
  font-size: .85rem; font-weight: 500; color: var(--text-main);
  width: fit-content;
}

/* Type colours as chips */
.pv-type { display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 8px;
  font-size: .82rem; font-weight: 600; }
.pv-type-fire,.pv-type-r          { background:rgba(224,90,43,.2); color:#ff8c60; border:1px solid rgba(224,90,43,.35); }
.pv-type-water,.pv-type-w         { background:rgba(58,123,213,.2); color:#70aaff; border:1px solid rgba(58,123,213,.35); }
.pv-type-grass,.pv-type-g         { background:rgba(58,158,90,.2); color:#5cd68a; border:1px solid rgba(58,158,90,.35); }
.pv-type-lightning,.pv-type-l     { background:rgba(200,154,0,.2); color:#ffd55a; border:1px solid rgba(200,154,0,.35); }
.pv-type-psychic,.pv-type-p       { background:rgba(190,46,122,.2); color:#f06ab0; border:1px solid rgba(190,46,122,.35); }
.pv-type-fighting,.pv-type-f      { background:rgba(184,90,32,.2); color:#f0904a; border:1px solid rgba(184,90,32,.35); }
.pv-type-darkness,.pv-type-d      { background:rgba(74,56,128,.25); color:#b090f0; border:1px solid rgba(74,56,128,.45); }
.pv-type-metal,.pv-type-m         { background:rgba(106,112,128,.2); color:#c0c8d8; border:1px solid rgba(106,112,128,.35); }
.pv-type-dragon,.pv-type-n        { background:rgba(88,48,176,.2); color:#a880ff; border:1px solid rgba(88,48,176,.35); }
.pv-type-fairy,.pv-type-y         { background:rgba(192,64,160,.2); color:#f080d8; border:1px solid rgba(192,64,160,.35); }
.pv-type-colorless,.pv-type-c     { background:rgba(122,128,144,.2); color:#b0b8c8; border:1px solid rgba(122,128,144,.35); }

/* Scrollbar styling for modal */
.card-modal-info-panel::-webkit-scrollbar { width: 5px; }
.card-modal-info-panel::-webkit-scrollbar-track { background: transparent; }
.card-modal-info-panel::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 4px; }

/* Market header links (TCGplayer / Cardmarket column labels) */
.modal-market-link {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--text-muted); text-decoration: none;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  transition: color .15s;
}
.modal-market-link:hover { color: var(--accent-soft); }
.modal-market-link svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Footer link */
.modal-ext-link {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem; border-radius: 8px; font-size: .82rem;
  color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--card-border);
  transition: color .15s, border-color .15s;
}
.modal-ext-link:hover { color: var(--accent-soft); border-color: var(--accent); }

/* Responsive */
@media (max-width: 720px) {
  .card-modal-box { flex-direction: column; max-height: 92vh; }
  .card-modal-img-panel { width: 100%; padding: 1.5rem; max-height: 45vh; }
  .card-modal-img-panel img { max-width: 150px; }
  .modal-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-collect-header, .modal-collect-row { grid-template-columns: 1fr 9rem 9rem auto; padding-left: 1rem; padding-right: 1rem; gap: 1rem; }
  .modal-market-chip { display: none; }
}

/* ── Card text / attacks / details ──────────────────────────────────────── */
.modal-card-text {
  font-size: .82rem; color: var(--text-muted); font-style: italic;
  background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 8px;
  padding: .7rem .9rem; margin-top: .9rem; line-height: 1.5;
}

/* Abilities */
.modal-abilities { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.modal-ability {
  background: var(--page-bg); border: 1px solid var(--card-border);
  border-radius: 10px; padding: .7rem .9rem;
}
.modal-ability-header {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem;
}
.modal-ability-type {
  font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #a78bfa; background: rgba(111,66,193,.18); border: 1px solid rgba(111,66,193,.3);
  border-radius: 5px; padding: .15rem .45rem; flex-shrink: 0;
}
.modal-ability-name { font-size: .9rem; font-weight: 600; color: var(--text-main); }
.modal-ability-text { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }

/* Attacks */
.modal-attacks-section { margin-top: 1rem; }
.modal-attacks-label {
  display: flex; align-items: center; gap: .6rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: .45rem;
}
.modal-attacks-label-cost { width: 56px; flex-shrink: 0; }
.modal-attacks-label-name { flex: 1; }
.modal-attacks { display: flex; flex-direction: column; gap: .55rem; }
.modal-attack {
  background: var(--page-bg); border: 1px solid var(--card-border);
  border-radius: 10px; padding: .7rem .9rem;
}
.modal-attack-header {
  display: flex; align-items: center; gap: .6rem;
}
.modal-attack-cost { display: flex; gap: 3px; flex-shrink: 0; min-width: 50px; }
.modal-attack-name {
  flex: 1; font-size: .9rem; font-weight: 600; color: var(--text-main);
}
.modal-attack-damage {
  font-size: 1rem; font-weight: 700; color: #f5c518; flex-shrink: 0;
}
.modal-attack-text {
  font-size: .78rem; color: var(--text-muted); margin-top: .4rem; line-height: 1.45;
}

/* Energy cost dots */
.pv-energy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: .6rem; font-weight: 700; flex-shrink: 0;
}
.pv-energy-r,.pv-energy-fire        { background:#c0502a; color:#fff; }
.pv-energy-w,.pv-energy-water       { background:#2a6ec0; color:#fff; }
.pv-energy-g,.pv-energy-grass       { background:#2a8c4a; color:#fff; }
.pv-energy-l,.pv-energy-lightning   { background:#c0a020; color:#fff; }
.pv-energy-p,.pv-energy-psychic     { background:#a02878; color:#fff; }
.pv-energy-f,.pv-energy-fighting    { background:#a05020; color:#fff; }
.pv-energy-d,.pv-energy-dark,.pv-energy-darkness { background:#3a2878; color:#fff; }
.pv-energy-m,.pv-energy-metal       { background:#5a6070; color:#fff; }
.pv-energy-n,.pv-energy-dragon      { background:#5020b0; color:#fff; }
.pv-energy-y,.pv-energy-fairy       { background:#c040a0; color:#fff; }
.pv-energy-c,.pv-energy-colorless   { background:#6a7080; color:#fff; }

/* Type/energy/tag icon images */
.pv-type-icon  { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
.pv-energy-icon { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.pv-tag-icon   { height: 28px; max-width: 80px; object-fit: contain; vertical-align: middle; }
.pv-stage-text { font-size: .82rem; color: var(--text-main); }

/* W/R/Retreat row */
.modal-wrc-row {
  display: flex; gap: .85rem; flex-wrap: wrap; margin-top: .9rem;
}
.modal-wrc-block { display: flex; flex-direction: column; gap: .3rem; }
.modal-wrc-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.modal-wrc-value {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--text-main);
}

/* Illustrator / national dex footer */
.modal-card-footer-info {
  margin-top: .9rem; font-size: .73rem; color: var(--text-muted);
  display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
}

/* ── Theme toggle button ─────────────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: .4rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  opacity: .75;
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { width: 18px; height: 18px; }

/* ── Navbar search ───────────────────────────────────────────────────────── */
.navbar-search-form {
  flex: 1;
  max-width: 380px;
  margin: 0 1.5rem;
}
.navbar-search-wrap {
  position: relative;
}
.navbar-search-icon {
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.navbar-search-input {
  width: 100%;
  background: var(--search-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: .4rem .75rem .4rem 2.1rem;
  font-size: .83rem;
  color: var(--text-main);
  outline: none;
  transition: border-color .15s;
}
.navbar-search-input::placeholder { color: var(--text-muted); }
.navbar-search-input:focus { border-color: var(--accent); }