/*
  Polaris Index — Ideia A / Naval Tropical
  Camada exclusivamente visual carregada depois de css/style.css.
  A estrutura, o JavaScript, os dados, a galeria e as rotas permanecem intactos.
*/

:root{
  --navy:#0B3D56;
  --navy-2:#0D5069;
  --navy-3:#062D42;
  --teal:#0C7880;
  --teal-light:#2CB5B0;
  --gold:#C99B4A;
  --gold-soft:#E3C58F;
  --gold-line:#D5B879;
  --paper:#FFF8EC;
  --paper-2:#FAEFD9;
  --paper-3:#F0DFC1;
  --coral:#FF7B55;
  --coral-hover:#F16643;
  --ink:#173F4B;
  --muted-naval:#806E56;
  --display-font:'Pixelify Sans', monospace;
  --body-font:'Oxanium', sans-serif;

  --bg:#FBF1DF;
  --bg-grad:#F0DFC2;
  --surface:#FFF9EE;
  --surface-2:#F8EBD4;
  --surface-3:#EEDABD;
  --primary:var(--navy-2);
  --primary-2:var(--teal-light);
  --primary-soft:#D1E8E3;
  --accent:var(--navy-2);
  --accent-soft:var(--gold-line);
  --coral:#FF7B55;
  --coral-hover:#F16643;
  --sun:var(--gold);
  --deep:var(--navy);
  --text:var(--ink);
  --muted:var(--muted-naval);
  --border:#D8BD8D;
  --chip-bg:var(--navy);
  --chip-text:#FFF4DF;
  --on-accent:#FFF5E4;
  --shadow:0 6px 18px rgba(70,48,22,.09);
}

body.dark{
  --bg:#071823;
  --bg-grad:#07131D;
  --surface:#102A38;
  --surface-2:#0B2230;
  --surface-3:#173746;
  --ink:#F8EEDB;
  --primary:#2FBAB3;
  --primary-2:#64D8CD;
  --primary-soft:#102F35;
  --accent:#D6A858;
  --accent-soft:#796139;
  --coral:#FF7B55;
  --coral-hover:#FF6942;
  --sun:#D6A858;
  --deep:#082F45;
  --text:#F6EBD5;
  --muted:#C6B799;
  --border:#5B4930;
  --chip-bg:#0A425D;
  --chip-text:#FFF2D8;
  --on-accent:#061923;
  --shadow:0 8px 24px rgba(0,0,0,.26);
}

/* Typography */
body,
input,
textarea,
select,
.panel p,
.hero p,
.profile-hero p,
.meta,
.page-sub,
.fact-list,
.block-quote,
.lightbox-desc{
  font-family:var(--body-font);
}

button,
h1,h2,h3,
.brand h1,
.nav-label,
.nav-link,
.hero-badge,
.btn,
.page-title,
.kpi .n,
.kpi .t,
.section-head h3,
.section-head .link,
.feat-caption strong,
.feat-caption span,
.ch-card-body strong,
.ch-card-role,
.tab,
.ch-filter-label,
.ch-filter-btn,
.ch-total-label,
.count-pill,
.infobox h3,
.panel > h3,
.block-heading,
.back-link,
.link-list{
  font-family:var(--display-font);
}

.ti,
.ti::before{
  font-family:'tabler-icons' !important;
}

/* Global parchment + golden water texture */
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(90deg, rgba(251,241,223,.98) 0%, rgba(251,241,223,.94) 58%, rgba(251,241,223,.58) 100%),
    url('../img/tropical-water-fade-gold.png'),
    radial-gradient(circle at 1px 1px, rgba(19,105,116,.10) 1px, transparent 1.25px),
    linear-gradient(160deg,var(--bg) 0%,var(--bg-grad) 100%);
  background-size:100% 100%,720px auto,14px 14px,auto;
  background-position:0 0,right top,0 0,0 0;
  background-repeat:no-repeat,no-repeat,repeat,no-repeat;
  background-attachment:fixed;
}

body.dark{
  background-image:
    linear-gradient(90deg, rgba(7,24,35,.94) 0%, rgba(7,24,35,.86) 58%, rgba(7,24,35,.56) 100%),
    url('../img/tropical-water-fade-gold.png'),
    radial-gradient(circle at 1px 1px, rgba(214,168,88,.09) 1px, transparent 1.25px),
    linear-gradient(160deg,var(--bg) 0%,var(--bg-grad) 100%);
}

/* Sidebar — preserve the approved waves and color palette */
.sidebar{
  overflow:hidden !important;
  scrollbar-width:none;
  background-color:#F6E7CC;
  background-image:
    url('../img/waves-sidebar.png'),
    linear-gradient(180deg,rgba(255,250,239,.95),rgba(241,221,188,.97)),
    radial-gradient(circle at 1px 1px,rgba(201,155,74,.12) 1px,transparent 1.3px);
  background-size:310px auto,100% 100%,12px 12px;
  background-position:left bottom -4px,0 0,0 0;
  background-repeat:no-repeat,no-repeat,repeat;
  border-right:1px solid #D4B77C;
  box-shadow:8px 0 28px rgba(72,49,22,.05);
}

body.dark .sidebar{
  background-color:#0A1C28;
  background-image:
    url('../img/waves-sidebar-dark.png'),
    linear-gradient(180deg,#0D2432,#071823),
    radial-gradient(circle at 1px 1px,rgba(214,168,88,.10) 1px,transparent 1.3px);
  background-size:310px auto,100% 100%,12px 12px;
  background-position:left bottom -4px,0 0,0 0;
  background-repeat:no-repeat,no-repeat,repeat;
  border-right-color:#5B4930;
}

.sidebar::before{content:none !important;display:none !important}

.brand{
  border-bottom:1px solid #D9BE8D;
  padding-bottom:20px;
}

.brand-mark{
  color:#FFF0D5;
  background:linear-gradient(145deg,var(--navy-2),var(--navy));
  border:1px solid var(--gold);
  box-shadow:3px 3px 0 rgba(201,155,74,.22);
}

.brand::after{
  color:var(--coral);
}

.nav-label{
  color:#6F604C;
}

body.dark .nav-label{color:#C5B897}

.nav-link{
  border:1px solid transparent;
  border-radius:8px;
  color:var(--text);
}

.nav-link:hover{
  background:rgba(255,249,238,.62);
  border-color:rgba(201,155,74,.42);
}

body.dark .nav-link:hover{background:rgba(23,55,70,.72)}

.nav-link.active{
  background:linear-gradient(180deg,#FF8762,var(--coral));
  color:#102F3A;
  border-color:#C95E42;
  box-shadow:4px 4px 0 rgba(11,61,86,.20);
}

.nav-link.active .nav-ico{color:var(--navy)}

/* Topbar */
.topbar{
  background:color-mix(in srgb,var(--paper) 91%,transparent);
  border-bottom:1px solid #D8BC88;
  backdrop-filter:blur(12px);
}

body.dark .topbar{background:rgba(7,24,35,.90)}

.searchbar{
  background:var(--surface);
  border:1px solid #806E54;
  border-bottom-width:2px;
  border-radius:8px;
  box-shadow:2px 2px 0 rgba(11,61,86,.10);
}

.icon-btn,.user-chip{
  border-color:#D6BE91;
  background:var(--surface);
  border-radius:8px;
}

.user-chip{
  background:var(--navy);
  color:#FFF0D5;
  border-color:var(--gold);
}

/* Hero — clean naval color treatment, without nautical symbols */
.hero{
  min-height:350px;
  border:1px solid #A87837;
  border-radius:13px;
  box-shadow:0 14px 28px rgba(8,45,66,.20),0 0 0 3px rgba(201,155,74,.16);
  background-color:var(--navy);
}

.hero.has-image{
  border-color:#A87837;
}

.hero.has-image::after{
  background:
    linear-gradient(90deg,rgba(4,42,61,.93) 0%,rgba(4,42,61,.70) 43%,rgba(4,42,61,.20) 76%,rgba(4,42,61,.08) 100%);
}


.hero-copy{max-width:620px}

.hero-badge{
  background:rgba(7,59,82,.90);
  color:#FFF0D6;
  border:1px solid rgba(201,155,74,.72);
  border-radius:6px;
  padding:6px 18px;
  clip-path:none;
  box-shadow:none;
}

.hero h2{
  color:#FFF3DA !important;
  text-shadow:4px 4px 0 #082B3E,0 0 20px rgba(255,245,219,.10);
  letter-spacing:.025em;
}

.hero p{
  color:#F6EBD8 !important;
  font-size:15px;
  line-height:1.62;
}

.btn{
  border-radius:7px;
  border:1px solid rgba(7,35,48,.45);
  box-shadow:4px 4px 0 rgba(6,38,54,.30);
}

.btn-primary{
  background:linear-gradient(180deg,#FF8964,var(--coral));
  color:#102F3A;
}

.btn-ghost{
  background:#FFF3DE;
  color:#163D4B;
  border-color:#B89C6E;
}

/* KPI chart strip */
.kpis{
  position:relative;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  background:var(--surface);
  border:1px solid #B88B4D;
  border-radius:11px;
  box-shadow:0 6px 18px rgba(71,49,22,.09);
  overflow:hidden;
}

.kpis::after{content:none !important;display:none !important}

.kpi{
  position:relative;
  z-index:1;
  min-height:92px;
  padding:18px 22px;
  border-top:0;
  border-right:1px solid rgba(184,139,77,.42);
  display:flex;
  align-items:center;
  gap:14px;
}

.kpi:last-child{border-right:0}

.kpi-ico{
  border:2px solid var(--navy-2);
  color:var(--navy-2);
  background:#FFF7E8;
  box-shadow:inset 0 0 0 3px rgba(201,155,74,.14);
}

.kpi .n{
  color:var(--navy);
  font-size:36px;
  text-shadow:2px 2px 0 rgba(201,155,74,.28);
}

.kpi .t{color:#6F604C}
.kpi .t::after{background:var(--gold)}

body.dark .kpi .n{color:#F6E9CE}
body.dark .kpi .t{color:#C5B897}
body.dark .kpi-ico{background:#102A38;color:#D6A858;border-color:#D6A858}

/* Global panels */
.panel,
.ch-filters,
.infobox,
.list-card,
.item-card,
.search-results > *,
.gallery-item,
.block-image-btn{
  position:relative;
  background:var(--surface);
  border:1px solid #C8A66B;
  border-radius:10px;
  box-shadow:var(--shadow);
}

.panel::after,
.ch-filters::after,
.infobox::after{content:none !important;display:none !important}

.panel > *,
.ch-filters > *,
.infobox > *{position:relative;z-index:4}

.panel::before,
.ch-filters::before,
.infobox::before{content:none !important;display:none !important}

/* Section labels */
.section-head{
  border-bottom:1px solid #CBB181;
  padding-bottom:10px;
}

.section-head h3{
  min-height:34px;
  background:linear-gradient(90deg,var(--navy),var(--navy-2));
  color:#FFF1D7;
  border:1px solid var(--gold);
  border-radius:6px;
  clip-path:none;
  padding:8px 24px;
  letter-spacing:.12em;
  box-shadow:3px 3px 0 rgba(201,155,74,.18);
}

.section-head h3::before{content:none}

.count-pill{
  margin-left:16px;
  background:#123F56;
  color:#FFF1D7;
  border:1px solid rgba(227,197,143,.35);
  clip-path:none;
  border-radius:4px;
  padding:3px 12px;
}

.section-head .link{color:var(--coral)}

/* Cards */
.feat-card,
.ch-card,
.list-card,
.item-card{
  border:1px solid #B98C4D;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 5px 14px rgba(75,51,23,.09);
}

.feat-card::before,.feat-card::after,
.ch-card::before,.ch-card::after,
.item-card::after,.list-card::after,
.gallery-item::after{content:none !important;display:none !important}

.feat-art,
.ch-card-art,
.thumb{
  position:relative;
  background-color:var(--navy);
}

.feat-art::after,
.ch-card-art::after,
.thumb::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(44,181,176,.035),rgba(6,45,66,.055));
}

.feat-caption,
.ch-card-body{
  background:#FFF7E9;
  border-top:1px solid #C9A76C;
}

body.dark .feat-caption,
body.dark .ch-card-body{background:#102A38}

.feat-caption strong,
.ch-card-body strong{color:var(--navy)}
body.dark .feat-caption strong,
body.dark .ch-card-body strong{color:#F7EBCF}

.feat-caption span,
.ch-card-role{color:var(--teal)}
.feat-plus{color:var(--coral)}

.feat-card:hover,.ch-card:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 12px 24px rgba(9,56,79,.18);
}

.item-card{
  background:#FFF6E7;
}
body.dark .item-card{background:#102A38}

.item-card:hover,.list-card:hover{
  transform:translateX(2px);
  border-color:var(--gold);
}

/* Page headings */
.page-head{padding-left:18px}
.page-head::before{background:linear-gradient(var(--navy) 0 66%,var(--gold) 66%)}
.page-title{color:var(--navy);letter-spacing:.035em}
body.dark .page-title{color:#F6E9CE}

/* Character listing filters */
.ch-filters-head{border-bottom-color:#CBB181}
.ch-filter-btn{
  background:#FFF4E2;
  border-color:#D2B77F;
  border-radius:7px;
}
body.dark .ch-filter-btn{background:#153342}
.ch-filter-btn.active{
  background:var(--coral);
  border-color:#C65D40;
  color:#102F3A;
  box-shadow:3px 3px 0 rgba(11,61,86,.18);
}
.ch-total-num{color:var(--navy);text-shadow:2px 2px 0 rgba(201,155,74,.25)}
body.dark .ch-total-num{color:#F6E9CE}

/* Character detail */
.profile-hero{
  border:1px solid #B98B48;
  border-radius:10px;
  box-shadow:0 12px 26px rgba(8,45,66,.18);
}

.profile-hero::before{
  background:linear-gradient(90deg,rgba(5,47,67,.92),rgba(5,47,67,.60) 50%,rgba(5,47,67,.16));
}

/* Mantém desativada a antiga borda interna criada pelo pseudo-elemento da base. */
.profile-hero::after{
  content:none !important;
  display:none !important;
}


.tabs{
  background:#F6E7CC;
  border:1px solid #C8A66B;
  border-radius:8px;
  padding:6px;
}
body.dark .tabs{background:#0B2230}

.tab{
  background:#EEDABD;
  color:#725E43;
  border:1px solid transparent;
  border-radius:6px;
}
body.dark .tab{background:#173746;color:#C8B996}

.tab.active{
  background:var(--coral);
  color:#102F3A;
  border-color:#C75E42;
  box-shadow:3px 3px 0 rgba(11,61,86,.18);
}

.profile > .infobox{
  position:static;
  align-self:start;
}

.infobox .portrait{
  border:1px solid var(--gold);
  outline:3px solid rgba(11,61,86,.18);
  outline-offset:3px;
  border-radius:10px;
  background-color:var(--navy);
}

.fact-list li{border-bottom:1px dashed #D7BC8A}
.fact-list li strong{color:#7A674D}
body.dark .fact-list li strong{color:#C8B996}

.link-list li{border-bottom-color:#D7BC8A}
.link-list a{color:var(--teal)}

.block-heading{
  color:var(--navy-2);
  padding-left:22px;
}
.block-heading::before{content:'//';color:var(--coral)}

.block-quote{
  border-left:6px solid var(--gold);
  background:linear-gradient(90deg,rgba(201,155,74,.12),transparent);
}

/* Gallery visual only */
.gallery-item{
  border-color:#C8A66B;
  background:var(--surface);
}
.gallery-item:hover{border-color:var(--gold);box-shadow:0 10px 22px rgba(9,56,79,.18)}
.lightbox-panel{border-color:var(--gold);box-shadow:0 28px 76px rgba(0,0,0,.48)}
.lightbox-header,.lightbox-strip{background:var(--surface-2);border-color:#C8A66B}
.lightbox-name{color:var(--navy-2)}
body.dark .lightbox-name{color:#D6A858}

/* Footer */
.footer{border-top-color:#CBB181;color:#806E56}
body.dark .footer{color:#C5B897}
.footer-warning{display:flex;flex-direction:column;gap:5px;line-height:1.55}
.footer-warning strong{color:var(--navy-2)}
body.dark .footer-warning strong{color:#D6A858}

@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:900px){
  .sidebar{background-image:linear-gradient(180deg,#FFF8EC,#F0DFC2)}
  body.dark .sidebar{background-image:linear-gradient(180deg,#0D2432,#071823)}
}

@media (max-width:820px){
  body,body.dark{
    background-size:100% 100%,420px auto,16px 16px,auto;
  }
  .kpi{padding:14px 12px;gap:9px}
}

@media (max-width:620px){
  .kpis{grid-template-columns:1fr}
  .kpi{border-right:0;border-bottom:1px solid rgba(184,139,77,.35)}
  .kpi:last-child{border-bottom:0}
  .section-head h3{padding-left:14px}
}



/* Home — character artwork stays bright and rotates randomly. */
#featured-row .feat-art{
  filter:none;
}
#featured-row .feat-art::after{
  background:linear-gradient(145deg,rgba(44,181,176,.025),rgba(6,45,66,.04));
}

/* Louise only — smooth white twinkles above the interface.
   The GIFs are transparent; light mode uses a soft gold halo while dark mode stays white. */
.character-sparkle-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:900;
}

.character-sparkle{
  position:absolute;
  display:block;
  opacity:.96;
  transform:translate3d(0,0,0) scale(1);
  transform-origin:center;
  filter:
    drop-shadow(0 0 2px rgba(112,70,14,.82))
    drop-shadow(0 0 5px rgba(216,160,48,.84))
    drop-shadow(0 0 9px rgba(250,215,123,.72))
    drop-shadow(0 0 13px rgba(255,249,218,.58));
  animation-name:louiseSparkleDrift;
  animation-timing-function:ease-out;
  animation-fill-mode:forwards;
}

body.dark .character-sparkle{
  filter:
    drop-shadow(0 0 2px rgba(148,94,20,.82))
    drop-shadow(0 0 6px rgba(239,184,70,.76))
    drop-shadow(0 0 11px rgba(255,239,176,.72));
}

@keyframes louiseSparkleDrift{
  0%{opacity:0;transform:translate3d(0,4px,0) scale(.72)}
  16%{opacity:var(--sparkle-opacity,.96);transform:translate3d(0,0,0) scale(1)}
  70%{opacity:var(--sparkle-opacity,.96);transform:translate3d(calc(var(--sparkle-drift-x,0px)*.45),calc(var(--sparkle-drift-y,-7px)*.45),0) scale(1.03)}
  100%{opacity:0;transform:translate3d(var(--sparkle-drift-x,0px),var(--sparkle-drift-y,-7px),0) scale(.92)}
}


/* ==========================================================
   Variante 5 — Ideia A
   Visual inspirado na referência aprovada pelo usuário.
   A estrutura, o HTML e o JavaScript permanecem inalterados.
   Ornamentos complexos usam PNGs reais em img/variant5/.
   ========================================================== */

:root{
  --v5-cream:#F7ECD8;
  --v5-cream-soft:#FFF8EC;
  --v5-paper:#FFF9EF;
  --v5-paper-alt:#F4E4C7;
  --v5-teal:#0A4B5F;
  --v5-teal-deep:#07384B;
  --v5-teal-soft:#6FB7C0;
  --v5-aqua:#9DCBD0;
  --v5-gold:#D2A451;
  --v5-gold-soft:#E7CE9B;
  --v5-coral:#FF7455;
  --v5-coral-dark:#E85E3F;
  --v5-ink:#153D48;
  --v5-muted:#786A56;
  --v5-line:#D8B979;
  --v5-shadow:0 8px 24px rgba(72,48,17,.10);

  --bg:var(--v5-cream);
  --bg-grad:#EFDDBE;
  --surface:var(--v5-paper);
  --surface-2:#F7E9D0;
  --surface-3:#EED8B4;
  --primary:var(--v5-teal);
  --primary-2:#168391;
  --primary-soft:#D4E7E4;
  --accent:var(--v5-teal);
  --accent-soft:var(--v5-gold-soft);
  --coral:var(--v5-coral);
  --coral-hover:var(--v5-coral-dark);
  --sun:var(--v5-gold);
  --deep:var(--v5-teal-deep);
  --text:var(--v5-ink);
  --muted:var(--v5-muted);
  --border:var(--v5-line);
  --chip-bg:var(--v5-teal-deep);
  --chip-text:#FFF1D7;
  --on-accent:#FFF7EA;
  --shadow:var(--v5-shadow);
}

body.dark{
  --bg:#061A24;
  --bg-grad:#08141C;
  --surface:#0D2A36;
  --surface-2:#0A2230;
  --surface-3:#153846;
  --primary:#6FCAD0;
  --primary-2:#94E0DD;
  --primary-soft:#173B40;
  --accent:#D4AA5D;
  --accent-soft:#6E5933;
  --coral:#FF7A5A;
  --coral-hover:#FF6341;
  --sun:#D4AA5D;
  --deep:#082F42;
  --text:#F6EBD7;
  --muted:#C6B89C;
  --border:#5D4A2E;
  --chip-bg:#0A4358;
  --chip-text:#FFF1D9;
  --on-accent:#071A23;
  --shadow:0 10px 28px rgba(0,0,0,.26);
}

body{
  background-color:var(--bg) !important;
  background-image:
    url('../img/variant5/water-right-light.png'),
    url('../img/variant5/paper-grain.png'),
    linear-gradient(155deg,#FBF2E2 0%,#F6E7CD 58%,#EFE0C5 100%) !important;
  background-position:right top,0 0,0 0 !important;
  background-size:680px auto,256px 256px,100% 100% !important;
  background-repeat:no-repeat,repeat,no-repeat !important;
  background-attachment:fixed !important;
}

body.dark{
  background-image:
    url('../img/variant5/water-right-dark.png'),
    url('../img/variant5/paper-grain.png'),
    linear-gradient(155deg,#071B25 0%,#06141D 58%,#091722 100%) !important;
}

/* Sidebar returns to the approved simple layout with subdued wave artwork. */
.sidebar{
  background-color:#F6E8CF !important;
  background-image:
    url('../img/variant5/wave-left-light.png'),
    linear-gradient(180deg,rgba(255,249,238,.98),rgba(244,224,191,.98)) !important;
  background-size:300px auto,100% 100% !important;
  background-position:left bottom -2px,0 0 !important;
  background-repeat:no-repeat,no-repeat !important;
  border-right:1px solid #D5B776 !important;
  box-shadow:8px 0 26px rgba(76,53,20,.045) !important;
  overflow:hidden !important;
}

body.dark .sidebar{
  background-color:#082331 !important;
  background-image:
    url('../img/variant5/wave-left-dark.png'),
    linear-gradient(180deg,#0A2C39,#071A25) !important;
  border-right-color:#58472D !important;
}

.sidebar::before{content:none !important;display:none !important}

.brand{
  border-bottom:1px solid color-mix(in srgb,var(--sun) 42%,var(--border)) !important;
  padding-bottom:20px !important;
}

.brand-mark{
  background:linear-gradient(145deg,#0F6071,#07384B) !important;
  color:#FFF0D3 !important;
  border:1px solid var(--sun) !important;
  border-radius:10px !important;
  box-shadow:3px 3px 0 rgba(210,164,81,.20) !important;
}

.nav-label{
  color:color-mix(in srgb,var(--muted) 84%,var(--primary) 16%) !important;
}

.nav-link{
  color:var(--text) !important;
  border:1px solid transparent !important;
  border-radius:8px !important;
  padding:11px 13px !important;
}

.nav-link:hover{
  background:rgba(255,249,238,.60) !important;
  border-color:rgba(210,164,81,.36) !important;
}

body.dark .nav-link:hover{
  background:rgba(31,76,89,.48) !important;
}

.nav-link.active{
  color:#0D3440 !important;
  background:linear-gradient(180deg,#FF8464,var(--v5-coral)) !important;
  border-color:#D86448 !important;
  box-shadow:4px 4px 0 rgba(10,75,95,.18) !important;
}

/* Topbar */
.topbar{
  background:rgba(255,249,239,.91) !important;
  border-bottom:1px solid rgba(210,164,81,.45) !important;
  backdrop-filter:blur(12px) !important;
}
body.dark .topbar{background:rgba(6,26,36,.91) !important}

.searchbar{
  background:var(--surface) !important;
  border:1px solid #9B8462 !important;
  border-bottom-width:2px !important;
  border-radius:9px !important;
  box-shadow:2px 2px 0 rgba(10,75,95,.08) !important;
}

.icon-btn,.user-chip{
  background:var(--surface) !important;
  border:1px solid #D7BE91 !important;
  border-radius:9px !important;
}

.user-chip{
  background:linear-gradient(145deg,#0E6070,#07384B) !important;
  color:#FFF2D8 !important;
  border-color:var(--sun) !important;
}

/* Main hero */
.hero{
  min-height:350px !important;
  border:1px solid #B78B45 !important;
  border-radius:13px !important;
  background-color:var(--v5-teal-deep) !important;
  box-shadow:0 12px 28px rgba(7,56,75,.18),0 0 0 3px rgba(210,164,81,.10) !important;
}

.hero.has-image::after{
  background:linear-gradient(90deg,rgba(4,49,66,.93) 0%,rgba(4,49,66,.72) 42%,rgba(4,49,66,.18) 78%,rgba(4,49,66,.05) 100%) !important;
}


.hero-badge{
  background:rgba(7,70,86,.88) !important;
  color:#FFF0D4 !important;
  border:1px solid rgba(210,164,81,.82) !important;
  border-radius:6px !important;
  clip-path:none !important;
  padding:6px 18px !important;
  box-shadow:none !important;
}

.hero h2,.profile-hero h2{
  color:#FFF4DC !important;
  text-shadow:4px 4px 0 #082D3D,0 0 16px rgba(255,245,220,.08) !important;
}

.hero p,.profile-hero p{
  color:#F6EAD6 !important;
  line-height:1.6 !important;
}

.btn{
  border-radius:7px !important;
  box-shadow:4px 4px 0 rgba(6,38,54,.24) !important;
}

.btn-primary{
  color:#103744 !important;
  background:linear-gradient(180deg,#FF8766,var(--v5-coral)) !important;
  border-color:#D86448 !important;
}

.btn-ghost{
  color:#173F4A !important;
  background:#FFF3DE !important;
  border-color:#BCA06E !important;
}

/* KPIs */
.kpis{
  background:rgba(255,249,239,.93) !important;
  border:1px solid #C69C5B !important;
  border-radius:11px !important;
  box-shadow:0 6px 18px rgba(72,48,17,.08) !important;
  overflow:hidden !important;
}
body.dark .kpis{background:rgba(13,42,54,.93) !important}

.kpi{
  border-top:0 !important;
  border-right:1px solid rgba(198,156,91,.38) !important;
  min-height:92px !important;
}
.kpi:last-child{border-right:0 !important}

.kpi-ico{
  background:#FFF6E4 !important;
  border:2px solid var(--v5-teal) !important;
  color:var(--v5-teal) !important;
  box-shadow:inset 0 0 0 3px rgba(210,164,81,.10) !important;
}
body.dark .kpi-ico{
  background:#102E3A !important;
  color:#D7AC5E !important;
  border-color:#D7AC5E !important;
}

.kpi .n{color:var(--v5-teal-deep) !important;text-shadow:2px 2px 0 rgba(210,164,81,.20) !important}
body.dark .kpi .n{color:#F8ECD4 !important}
.kpi .t{color:#6F604C !important}
body.dark .kpi .t{color:#C9BA9C !important}
.kpi .t::after{background:var(--v5-coral) !important}

/* Panels and content surfaces */
.panel,
.ch-filters,
.infobox,
.item-card,
.list-card,
.search-results > *,
.gallery-item,
.block-image-btn{
  background:rgba(255,249,239,.95) !important;
  border:1px solid #C8A66A !important;
  border-radius:10px !important;
  box-shadow:var(--v5-shadow) !important;
}
body.dark .panel,
body.dark .ch-filters,
body.dark .infobox,
body.dark .item-card,
body.dark .list-card,
body.dark .search-results > *,
body.dark .gallery-item,
body.dark .block-image-btn{
  background:rgba(13,42,54,.96) !important;
}

.panel::before,.panel::after,
.ch-filters::before,.ch-filters::after,
.infobox::before,.infobox::after{content:none !important;display:none !important}

.section-head{
  border-bottom:1px solid #CBB080 !important;
  padding-bottom:10px !important;
}

.section-head h3{
  min-height:34px !important;
  color:#FFF2D7 !important;
  background:linear-gradient(90deg,#07384B,#0A5567) !important;
  border:1px solid var(--v5-gold) !important;
  border-radius:6px !important;
  clip-path:none !important;
  padding:8px 24px !important;
  letter-spacing:.10em !important;
  box-shadow:3px 3px 0 rgba(210,164,81,.16) !important;
}

.count-pill{
  color:#FFF2D7 !important;
  background:#0C455A !important;
  border:1px solid rgba(231,206,155,.35) !important;
  border-radius:4px !important;
  clip-path:none !important;
  padding:3px 12px !important;
}

.section-head .link{color:var(--v5-coral) !important}

/* Cards */
.feat-card,.ch-card,.list-card,.item-card{
  border:1px solid #B98C4E !important;
  border-radius:8px !important;
  overflow:hidden !important;
  box-shadow:0 5px 14px rgba(75,51,23,.08) !important;
}

.feat-art,.ch-card-art,.thumb{
  background-color:#0B4C61 !important;
  background-image:url('../img/variant5/card-water-pattern.png');
  background-size:cover;
  background-position:center;
}

.feat-art::after,.ch-card-art::after,.thumb::after{
  background:linear-gradient(145deg,rgba(118,193,198,.025),rgba(7,56,75,.035)) !important;
}

.feat-caption,.ch-card-body{
  background:#FFF7E9 !important;
  border-top:1px solid #C9A76C !important;
}
body.dark .feat-caption,body.dark .ch-card-body{background:#102F3B !important}

.feat-caption strong,.ch-card-body strong{color:#0B4356 !important}
body.dark .feat-caption strong,body.dark .ch-card-body strong{color:#F8ECD4 !important}
.feat-caption span,.ch-card-role{color:#087887 !important}
.feat-plus{color:var(--v5-coral) !important}

.feat-card:hover,.ch-card:hover{
  transform:translateY(-3px) !important;
  border-color:var(--v5-gold) !important;
  box-shadow:0 12px 24px rgba(7,56,75,.16) !important;
}

.item-card{
  background:#FFF6E7 !important;
}
body.dark .item-card{background:#102F3B !important}
.item-card:hover,.list-card:hover{border-color:var(--v5-gold) !important}

/* Character index and detail follow the same visual system. */
.page-head::before{background:linear-gradient(var(--v5-teal) 0 66%,var(--v5-gold) 66%) !important}
.page-title{color:var(--v5-teal-deep) !important}
body.dark .page-title{color:#F8ECD4 !important}

.ch-filter-btn{
  background:#FFF3DF !important;
  border-color:#D2B77F !important;
  border-radius:7px !important;
}
body.dark .ch-filter-btn{background:#153846 !important}
.ch-filter-btn.active{
  color:#103744 !important;
  background:var(--v5-coral) !important;
  border-color:#C95F42 !important;
  box-shadow:3px 3px 0 rgba(10,75,95,.16) !important;
}

.profile-hero{
  border:1px solid #B98B48 !important;
  border-radius:10px !important;
  box-shadow:0 12px 26px rgba(7,56,75,.16) !important;
}

.profile-hero::before{
  background:linear-gradient(90deg,rgba(4,49,66,.86),rgba(4,49,66,.52) 50%,rgba(4,49,66,.08)) !important;
}
.profile-hero::after{content:none !important;display:none !important}

.tabs{
  background:#F5E6CA !important;
  border:1px solid #C8A66B !important;
  border-radius:8px !important;
}
body.dark .tabs{background:#0B2431 !important}
.tab{
  background:#ECD6B1 !important;
  color:#725E43 !important;
  border-radius:6px !important;
}
body.dark .tab{background:#173846 !important;color:#C9BA9C !important}
.tab.active{
  color:#103744 !important;
  background:var(--v5-coral) !important;
  border-color:#C95E42 !important;
  box-shadow:3px 3px 0 rgba(10,75,95,.16) !important;
}

.infobox .portrait{
  background-color:#0B4C61 !important;
  border:1px solid var(--v5-gold) !important;
  outline:3px solid rgba(10,75,95,.14) !important;
}

.fact-list li{border-bottom-color:#D7BC8A !important}
.link-list li{border-bottom-color:#D7BC8A !important}
.link-list a{color:#087887 !important}
.block-heading{color:#0A596C !important}
.block-heading::before{color:var(--v5-coral) !important}
.block-quote{
  border-left-color:var(--v5-gold) !important;
  background:linear-gradient(90deg,rgba(210,164,81,.12),transparent) !important;
}

/* Footer */
.footer{border-top-color:#CBB181 !important;color:#806E56 !important}
body.dark .footer{color:#C5B897 !important}

@media (max-width:900px){
  .sidebar{
    background-image:linear-gradient(180deg,#FFF8EC,#F0DFC2) !important;
  }
  body.dark .sidebar{
    background-image:linear-gradient(180deg,#0B2A36,#071A24) !important;
  }
}

@media (max-width:820px){
  body,body.dark{
    background-size:420px auto,256px 256px,100% 100% !important;
  }
}

/* Mantém a aba ativa em coral também no tema escuro. */
body.dark .tab.active{
  background:var(--v5-coral) !important;
  color:#103744 !important;
  border-color:#C95E42 !important;
  box-shadow:3px 3px 0 rgba(0,0,0,.22) !important;
}

/* Louise-only sparkle effect inside character artwork cards. */
.feat-art.has-character-card-sparkles,
.ch-card-art.has-character-card-sparkles{
  position:relative;
  overflow:hidden;
}

.character-card-sparkle-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}

.character-card-sparkle{
  position:absolute;
  display:block;
  height:auto;
  pointer-events:none;
  filter:
    drop-shadow(0 0 2px rgba(132,82,16,.72))
    drop-shadow(0 0 4px rgba(225,174,68,.72));
  animation:characterCardTwinkle .82s ease-out forwards;
}

body.dark .character-card-sparkle{
  filter:
    drop-shadow(0 0 2px rgba(160,103,24,.72))
    drop-shadow(0 0 5px rgba(255,221,139,.62));
}

@keyframes characterCardTwinkle{
  0%{opacity:0;transform:scale(.60) rotate(-5deg)}
  28%{opacity:var(--sparkle-opacity,.82);transform:scale(1.03) rotate(0deg)}
  66%{opacity:var(--sparkle-opacity,.82);transform:scale(.94) rotate(3deg)}
  100%{opacity:0;transform:scale(.52) rotate(6deg)}
}


/* Private content editor */
.admin-editor .tiptap img,
.rich-text-content img{display:block;max-width:100%;height:auto;margin:18px auto;border:1px solid #C8A66A;border-radius:8px;box-shadow:var(--v5-shadow)}
.admin-editor .tiptap blockquote,
.rich-text-content blockquote{border-left:4px solid var(--v5-gold);margin:18px 0;padding:8px 16px;background:linear-gradient(90deg,rgba(210,164,81,.12),transparent)}
.admin-editor .tiptap h2,
.admin-editor .tiptap h3,
.rich-text-content h2,
.rich-text-content h3{color:#0A596C;margin:24px 0 10px}
body.dark .admin-editor .tiptap h2,
body.dark .admin-editor .tiptap h3,
body.dark .rich-text-content h2,
body.dark .rich-text-content h3{color:#F8ECD4}
.admin-editor .tiptap a,
.rich-text-content a{color:#087887;text-decoration:underline}
.rich-text-image-button{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:zoom-in;
}
.rich-text-image-button img{pointer-events:none}

/* Extended private editor controls */

/* Character banners keep one consistent height; the optional description stays short. */
.character-profile-hero{
  height:300px;
  min-height:300px;
  box-sizing:border-box;
}
.character-banner-description{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}


.lightbox.character-gallery-lightbox{
  box-sizing:border-box;
  padding:clamp(10px,2.5vw,24px);
}
.character-gallery-lightbox .lightbox-panel{
  box-sizing:border-box;
  width:min(1100px,calc(100vw - 20px));
  max-width:calc(100vw - 20px);
  max-height:calc(100dvh - 20px);
}
.character-gallery-lightbox .lightbox-header,
.character-gallery-lightbox .lightbox-stage,
.character-gallery-lightbox .lightbox-strip{
  min-width:0;
}
.character-gallery-lightbox .lightbox-titles{
  min-width:0;
}
.character-gallery-lightbox .lightbox-stage{
  overflow:hidden;
}
.character-gallery-lightbox .lightbox-img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:min(64vh,calc(100dvh - 230px));
  object-fit:contain;
}

@media (max-width:620px){
  .character-gallery-lightbox .lightbox-header{
    flex-direction:column;
  }
  .character-gallery-lightbox .lightbox-actions{
    width:100%;
    justify-content:space-between;
  }
  .character-gallery-lightbox .lightbox-img{
    max-height:min(58vh,calc(100dvh - 260px));
  }
}

/* Global background music controls */
.site-music-wrap{
  display:flex;
  align-items:center;
  min-height:36px;
}
.music-enable-btn{
  min-height:36px;
  padding:7px 13px;
  border:1px solid #C95E42;
  border-radius:9px;
  background:var(--v5-coral);
  color:#103744;
  font:inherit;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(87,50,27,.14);
}
.music-enable-btn:hover{filter:brightness(1.04)}
.music-player{
  display:flex;
  align-items:center;
  gap:5px;
  min-height:36px;
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
}
.music-control-btn{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #C8A66A;
  border-radius:7px;
  background:#FFF3DF;
  color:#0A596C;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
}
body.dark .music-control-btn{background:#153846;color:#F8ECD4}
.music-volume{
  width:78px;
  accent-color:var(--v5-coral);
  cursor:pointer;
}
.site-music-wrap audio{display:none}

/* Music settings in the private editor */

@media (max-width:980px){
  .music-volume{width:58px}
}
@media (max-width:820px){
  .topbar{flex-wrap:wrap}
  .search-shell{max-width:none;min-width:0}
  .searchbar{min-width:0}
  .top-actions{flex-shrink:0}
  .music-enable-btn{padding:7px 9px;font-size:10px}
  .music-volume{width:50px}
}
@media (max-width:620px){
  .site-music-wrap{order:-1}
  .music-enable-btn{max-width:92px;line-height:1.2}
  .music-player{padding:4px}
  .music-volume{width:44px}
}

/* Compact rich-text editor and reusable media blocks */
.admin-editor .tiptap hr,
.rich-text-content hr{
  height:1px;
  margin:28px 0;
  border:0;
  background:#D7BC8A;
}
.admin-rich-image-node>figcaption,
.admin-image-text-node figcaption,
.rich-text-image figcaption,
.rich-image-text figcaption{
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  text-align:center;
}

.rich-text-image{
  display:block;
  width:min(100%,760px);
  margin:20px auto;
}
.rich-text-image[data-size='small']{width:min(100%,280px)}
.rich-text-image[data-size='medium']{width:min(100%,480px)}
.rich-text-image[data-size='large']{width:min(100%,760px)}
.rich-text-image[data-size='full']{width:100%}
.rich-text-image[data-align='left']{margin-right:auto;margin-left:0}
.rich-text-image[data-align='center']{margin-right:auto;margin-left:auto}
.rich-text-image[data-align='right']{margin-right:0;margin-left:auto}
.rich-text-image-button img,
.rich-text-image img,
.rich-image-text img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
  border:1px solid #C8A66A;
  border-radius:8px;
  box-shadow:var(--v5-shadow);
}
.rich-image-text{
  --rich-split-width:260px;
  display:grid;
  grid-template-columns:minmax(0,var(--rich-split-width)) minmax(0,1fr);
  gap:20px;
  align-items:start;
  margin:22px 0;
}
.rich-image-text[data-size='small']{--rich-split-width:180px}
.rich-image-text[data-size='medium']{--rich-split-width:260px}
.rich-image-text[data-size='large']{--rich-split-width:360px}
.rich-image-text[data-side='right']{grid-template-columns:minmax(0,1fr) minmax(0,var(--rich-split-width))}
.rich-image-text[data-side='right'] figure{order:2}
.rich-image-text figure{margin:0}
.rich-image-text-content{min-width:0}
.rich-image-text-content>:first-child{margin-top:0}
.rich-image-text-content>:last-child{margin-bottom:0}
@media (max-width:700px){
  .admin-image-text-layout,
  .admin-image-text-node[data-side='right'] .admin-image-text-layout,
  .rich-image-text,
  .rich-image-text[data-side='right']{
    grid-template-columns:1fr;
  }
  .admin-image-text-node[data-side='right'] figure,
  .rich-image-text[data-side='right'] figure{order:0}
  .admin-image-text-node figure,
  .rich-image-text figure{width:min(100%,420px);margin-right:auto;margin-left:auto}
}

/* Home: keep the Unions panel compact as more entries are published. */
.home-organizations-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

.home-pager-button,
.home-pager-status{
  min-width:32px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text);
  font-family:Archivo, sans-serif;
  font-size:11px;
  font-weight:800;
}

.home-pager-button{
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}

.home-pager-button:hover:not(:disabled),
.home-pager-button:focus-visible{
  border-color:var(--coral);
  color:var(--coral);
  outline:none;
}

.home-pager-button:disabled{
  cursor:default;
  opacity:.38;
}

.home-pager-status{
  min-width:52px;
  padding-inline:8px;
  background:transparent;
  color:var(--muted);
}

/* Home: editable About the Artist block. */
.home-artist-panel{
  margin-top:18px;
}

.home-artist-head{
  align-items:center;
}

.artist-commission-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.artist-commission-status i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);
}

.artist-commission-status.open{color:#3F9A66}
.artist-commission-status.closed{color:var(--v5-coral)}
body.dark .artist-commission-status.open{color:#79D39B}

.home-artist-grid{
  display:grid;
  grid-template-columns:minmax(0,250px) minmax(0,1.25fr) minmax(0,300px);
  grid-template-areas:'artist-image artist-copy artist-links';
  gap:26px;
  align-items:start;
  padding-top:18px;
}

.home-artist-grid > *{
  width:100%;
  max-width:100%;
  min-width:0;
}

.home-artist-image-wrap{
  grid-area:artist-image;
  min-width:0;
  overflow:hidden;
  border:1px solid #C8A66A;
  border-radius:9px;
  background:var(--navy);
  box-shadow:var(--shadow);
  aspect-ratio:1 / 1;
}

.home-artist-image-wrap img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.home-artist-image-placeholder{
  display:grid;
  width:100%;
  height:100%;
  place-items:center;
  background:var(--star-panel);
  color:#F3D795;
  font-size:42px;
}

.home-artist-copy,
.home-artist-links{
  min-width:0;
}

.home-artist-copy{
  grid-area:artist-copy;
  display:flex;
  overflow:hidden;
  align-self:stretch;
  flex-direction:column;
  justify-content:center;
}

.home-artist-copy h4,
.home-artist-links h4{
  margin:0 0 12px;
  color:var(--navy);
  font-family:Archivo,sans-serif;
  font-size:18px;
  letter-spacing:.02em;
}

body.dark .home-artist-copy h4,
body.dark .home-artist-links h4{color:#F8ECD4}

.home-artist-copy p{
  margin:0 0 13px;
  line-height:1.65;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:pre-line;
}

.artist-support-message{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding:11px 13px;
  border:1px solid #D7BC8A;
  border-radius:7px;
  background:rgba(255,248,237,.7);
  color:var(--muted);
}

.artist-support-message i{flex:0 0 auto;color:var(--v5-coral)}
.artist-support-message span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
body.dark .artist-support-message{background:rgba(16,47,59,.72)}

.home-artist-links{
  grid-area:artist-links;
  padding-left:26px;
  border-left:1px solid #D7BC8A;
}

.artist-link-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.artist-link-list.has-many-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 8px;
}

.artist-social-link{
  display:flex;
  width:100%;
  align-items:center;
  gap:12px;
  padding:8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}

.artist-social-link:hover,
.artist-social-link:focus-visible{
  background:rgba(210,164,81,.13);
  color:var(--coral);
  outline:none;
}

.artist-social-icon{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  color:var(--navy);
}

body.dark .artist-social-icon{color:#F8ECD4}
.artist-social-icon svg{width:24px;height:24px}
.artist-social-link>span:last-child{display:flex;min-width:0;flex-direction:column;gap:2px}
.artist-social-link strong{font-size:13px}
.artist-social-link small{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.home-artist-links .artist-social-link{gap:8px;padding:6px 4px}
.home-artist-links .artist-social-icon{width:26px;height:26px;flex-basis:26px}
.home-artist-links .artist-social-icon svg{width:21px;height:21px}
.home-artist-links .artist-social-link strong,
.home-artist-links .artist-social-link small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.home-artist-links .artist-social-link strong{font-size:12px}
.home-artist-links .artist-social-link small{font-size:11px}

.artist-link-warning{
  position:fixed;
  z-index:2200;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(5,18,25,.72);
  backdrop-filter:blur(5px);
}

.artist-link-warning-card{
  width:min(100%,520px);
  padding:26px;
  border:1px solid var(--gold);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 28px 76px rgba(0,0,0,.42);
}

.artist-link-warning-card h2{margin:16px 0 8px}
.artist-link-warning-card p{margin:0;line-height:1.6}
.artist-link-warning-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

/* About the Artist settings in the private editor. */

@media (max-width:980px){
  .home-artist-grid{
    grid-template-columns:minmax(0,230px) minmax(0,1fr);
    grid-template-areas:
      'artist-image artist-copy'
      'artist-links artist-links';
  }
  .home-artist-links{padding:18px 0 0;border-top:1px solid #D7BC8A;border-left:0}
  .artist-link-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:680px){
  .home-artist-head{align-items:flex-start;gap:10px}
  .home-artist-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      'artist-image'
      'artist-copy'
      'artist-links';
  }
  .home-artist-image-wrap{width:min(100%,360px);margin-inline:auto}
  .home-artist-copy{text-align:left}
  .artist-link-list{grid-template-columns:1fr}
}

/* Generic Pages builder — Variation B */
.page-builder-banner,
.page-rich-text-block,
.page-artist-block,
.page-gallery-block,
.page-social-links-block{
  margin-bottom:16px;
}
.page-builder-banner-empty{
  background:linear-gradient(135deg,#0b3c55,#12607c);
}
.page-builder-banner-text{
  margin-top:10px;
  max-width:760px;
  opacity:.92;
  line-height:1.6;
}
.page-social-links-block>p{
  margin:0 0 14px;
  color:var(--muted);
}
.page-link-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
}
.page-link-list .artist-social-link{
  min-height:62px;
}
.page-gallery-block .gallery-grid{
  margin-top:12px;
}
@media (max-width:760px){
  .page-link-list{
    grid-template-columns:1fr;
  }
}

/* ---------- Global footer ---------- */
.main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.content{flex:1 0 auto;width:100%;min-width:0}

.global-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:4px 26px 18px;
  padding:14px 0 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  color:var(--muted);
  font-size:10px;
  font-weight:600;
  line-height:1.55;
  text-align:center;
  letter-spacing:.08em;
  text-transform:none;
  box-shadow:none;
}

.global-footer-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:100%;
  min-width:0;
}

.global-footer strong{
  color:var(--text);
  font-family:var(--display-font);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
}


/* ---------- Seasonal admin ---------- */

/* ---------- Editable normal artwork ---------- */
body.has-custom-site-background:not(.seasonal-halloween){
  background-color:var(--bg) !important;
  background-image:
    linear-gradient(90deg,rgba(251,242,226,.12),rgba(251,242,226,.04)),
    var(--site-background-image),
    url('../img/variant5/paper-grain.png'),
    linear-gradient(155deg,#FBF2E2 0%,#F6E7CD 58%,#EFE0C5 100%) !important;
  background-position:0 0,center top,0 0,0 0 !important;
  background-size:100% 100%,cover,256px 256px,100% 100% !important;
  background-repeat:no-repeat,no-repeat,repeat,no-repeat !important;
  background-attachment:fixed,fixed,fixed,fixed !important;
}
body.dark.has-custom-site-background:not(.seasonal-halloween){
  background-image:
    linear-gradient(90deg,rgba(7,27,37,.18),rgba(7,27,37,.06)),
    var(--site-background-image),
    url('../img/variant5/paper-grain.png'),
    linear-gradient(155deg,#071B25 0%,#06141D 58%,#091722 100%) !important;
}
body.has-custom-site-ornament:not(.seasonal-halloween) .sidebar{
  background-image:
    var(--site-ornament-image),
    linear-gradient(180deg,rgba(255,249,238,.98),rgba(244,224,191,.98)) !important;
  background-size:300px auto,100% 100% !important;
  background-position:left bottom -2px,0 0 !important;
  background-repeat:no-repeat,no-repeat !important;
}
body.dark.has-custom-site-ornament:not(.seasonal-halloween) .sidebar{
  background-image:
    var(--site-ornament-image),
    linear-gradient(180deg,#0A2C39,#071A25) !important;
}

/* ---------- Simplified Halloween ----------
   Halloween changes the accents, root background and sidebar artwork while
   preserving the readable light/dark panel surfaces. */
body.seasonal-halloween{
  --bg:#5A1D5C;
  --bg-grad:#35113F;
  --surface:#FFF9EF;
  --surface-2:#F7E9D0;
  --surface-3:#EED8B4;
  --primary:#7B3479;
  --primary-2:#A54C91;
  --primary-soft:#E8D5DF;
  --accent:#FF8A2B;
  --accent-soft:#F0C1A0;
  --coral:#FF8126;
  --coral-hover:#FF9B43;
  --sun:#E1A44A;
  --deep:#4A184F;
  --text:#153D48;
  --muted:#786A56;
  --border:#C98CA5;
  --chip-bg:#FF8A2B;
  --chip-text:#35113F;
  --on-accent:#35113F;
  --shadow:0 8px 22px rgba(31,5,38,.16);
  background-color:#5A1D5C !important;
  background-image:
    radial-gradient(circle at 82% 16%,rgba(255,139,42,.22),transparent 29%),
    radial-gradient(circle at 18% 78%,rgba(209,101,188,.24),transparent 35%),
    radial-gradient(circle at 1px 1px,rgba(255,196,112,.13) 1px,transparent 1.4px),
    linear-gradient(155deg,#713070 0%,#5A1D5C 48%,#35113F 100%) !important;
  background-position:0 0,0 0,0 0,0 0 !important;
  background-size:auto,auto,18px 18px,100% 100% !important;
  background-repeat:no-repeat,no-repeat,repeat,no-repeat !important;
  background-attachment:fixed !important;
}
body.dark.seasonal-halloween{
  --bg:#241027;
  --bg-grad:#120A18;
  --surface:#0D2A36;
  --surface-2:#0A2230;
  --surface-3:#153846;
  --primary:#F29A45;
  --primary-2:#FFC06A;
  --primary-soft:#3D263C;
  --accent:#D77AB3;
  --accent-soft:#6D3F63;
  --coral:#FF8A2B;
  --coral-hover:#FFAA50;
  --sun:#F0B55D;
  --deep:#35113F;
  --text:#F6EBD7;
  --muted:#C6B89C;
  --border:#76506F;
  --chip-bg:#FF9A36;
  --chip-text:#241027;
  --on-accent:#241027;
  --shadow:0 10px 28px rgba(0,0,0,.30);
  background-color:#241027 !important;
  background-image:
    radial-gradient(circle at 82% 16%,rgba(255,139,42,.19),transparent 29%),
    radial-gradient(circle at 18% 78%,rgba(182,71,161,.22),transparent 35%),
    radial-gradient(circle at 1px 1px,rgba(255,196,112,.09) 1px,transparent 1.4px),
    linear-gradient(155deg,#3B1741 0%,#241027 50%,#120A18 100%) !important;
}

body.seasonal-halloween.has-custom-site-background{
  background-image:
    linear-gradient(135deg,rgba(83,24,88,.32),rgba(47,14,57,.24)),
    var(--site-background-image),
    linear-gradient(155deg,#713070 0%,#5A1D5C 48%,#35113F 100%) !important;
  background-position:0 0,center top,0 0 !important;
  background-size:100% 100%,cover,100% 100% !important;
  background-repeat:no-repeat,no-repeat,no-repeat !important;
  background-attachment:fixed,fixed,fixed !important;
}
body.dark.seasonal-halloween.has-custom-site-background{
  background-image:
    linear-gradient(135deg,rgba(44,13,49,.46),rgba(18,8,24,.34)),
    var(--site-background-image),
    linear-gradient(155deg,#3B1741 0%,#241027 50%,#120A18 100%) !important;
}

body.seasonal-halloween .app-shell,
body.seasonal-halloween .main,
body.seasonal-halloween .content{
  background:transparent !important;
}

body.seasonal-halloween .sidebar{
  background-color:#4A184F !important;
  background-image:
    radial-gradient(circle at 18% 82%,rgba(255,129,38,.20),transparent 29%),
    radial-gradient(circle at 84% 18%,rgba(209,112,196,.17),transparent 31%),
    linear-gradient(180deg,#5A235D 0%,#45174C 100%) !important;
  background-size:auto,auto,100% 100% !important;
  background-position:0 0,0 0,0 0 !important;
  background-repeat:no-repeat,no-repeat,no-repeat !important;
  border-right-color:#B56692 !important;
  box-shadow:8px 0 28px rgba(35,6,42,.16) !important;
}
body.seasonal-halloween.has-custom-site-ornament .sidebar{
  background-image:
    var(--site-ornament-image),
    linear-gradient(180deg,rgba(90,35,93,.97),rgba(69,23,76,.98)) !important;
  background-size:300px auto,100% 100% !important;
  background-position:left bottom -2px,0 0 !important;
  background-repeat:no-repeat,no-repeat !important;
}
body.seasonal-halloween .topbar{
  background:rgba(68,20,75,.92) !important;
  border-bottom-color:#B56692 !important;
}
body.seasonal-halloween .brand{border-bottom-color:#B56692 !important}
body.seasonal-halloween .brand-mark{
  background:linear-gradient(145deg,#FF9B3D,#6A2468) !important;
  border-color:#FFB760 !important;
  color:#FFF6E7 !important;
}
body.seasonal-halloween .brand h1,
body.seasonal-halloween .nav-label,
body.seasonal-halloween .nav-link:not(.active){color:#FFF5E8 !important}
body.seasonal-halloween .nav-link:not(.active):hover{
  background:rgba(139,58,132,.48) !important;
  border-color:rgba(255,154,54,.54) !important;
}
body.seasonal-halloween .nav-link.active,
body.seasonal-halloween :is(.btn-primary,.tab.active,.ch-filter-btn.active,.music-enable-btn){
  background:linear-gradient(180deg,#FF9B3D,#FF8126) !important;
  color:#35113F !important;
  border-color:#D85E16 !important;
}
body.seasonal-halloween .topbar :is(.searchbar,.icon-btn,.music-player){
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
body.dark.seasonal-halloween .topbar :is(.searchbar,.icon-btn,.music-player){
  background:var(--surface-2) !important;
}
body.seasonal-halloween .user-chip{
  background:linear-gradient(145deg,#6A2468,#4A184F) !important;
  color:#FFF5E8 !important;
  border-color:#FFB760 !important;
}
body.seasonal-halloween :is(.panel,.kpis,.ch-filters,.infobox,.list-card,.item-card,.tabs,.searchbar,.empty-state),
body.dark.seasonal-halloween :is(.panel,.kpis,.ch-filters,.infobox,.list-card,.item-card,.tabs,.searchbar,.empty-state){
  color:var(--text) !important;
  border-color:var(--border) !important;
}
body.seasonal-halloween .section-head h3{
  background:linear-gradient(90deg,#4A184F,#6A2468) !important;
  border-color:#E1A44A !important;
}
body.seasonal-halloween .count-pill{
  background:#4A184F !important;
  border-color:rgba(255,183,96,.55) !important;
}
body.seasonal-halloween .global-footer{border-top-color:var(--border) !important}

@media (max-width: 920px){
  .global-footer{margin:4px 14px 14px;flex-direction:column}
}

/* ---------- Footer: simple warning strip ---------- */
.global-footer,
body.dark .global-footer,
body.seasonal-halloween .global-footer,
body.dark.seasonal-halloween .global-footer{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  padding:14px 0 0 !important;
}

/* Generic Pages: keep the artist image, copy and links in separate columns. */
.page-artist-block .home-artist-grid{
  grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(280px,.9fr);
  grid-template-areas:'artist-image artist-copy artist-links';
  column-gap:30px;
}

.page-artist-block .home-artist-grid > *{
  width:100%;
  max-width:100%;
  min-width:0;
}

.page-artist-block .home-artist-image-wrap{
  grid-area:artist-image;
  align-self:start;
  justify-self:stretch;
}

.page-artist-block .home-artist-copy{
  grid-area:artist-copy;
  overflow:hidden;
}

.page-artist-block .home-artist-copy h4,
.page-artist-block .home-artist-copy p,
.page-artist-block .artist-support-message span{
  overflow-wrap:anywhere;
}

.page-artist-block .home-artist-links{
  grid-area:artist-links;
}

@media (max-width:1280px){
  .page-artist-block .home-artist-grid{
    grid-template-columns:minmax(190px,240px) minmax(0,1fr);
    grid-template-areas:
      'artist-image artist-copy'
      'artist-links artist-links';
  }

  .page-artist-block .home-artist-links{
    padding:18px 0 0;
    border-top:1px solid #D7BC8A;
    border-left:0;
  }
}

@media (max-width:680px){
  .page-artist-block .home-artist-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      'artist-image'
      'artist-copy'
      'artist-links';
  }

  .page-artist-block .home-artist-image-wrap{
    width:min(100%,360px);
    margin-inline:auto;
  }
}

/* ---------- Halloween readability refinements ---------- */
body.seasonal-halloween .page-head{
  border-bottom-color:rgba(255,214,170,.40) !important;
}
body.seasonal-halloween .page-head::before{
  background:linear-gradient(#FF9B3D 0 62%,#FFD06E 62%) !important;
  box-shadow:0 0 0 1px rgba(53,17,63,.12);
}
body.seasonal-halloween .page-title,
body.dark.seasonal-halloween .page-title{
  color:#FFF5E8 !important;
  text-shadow:0 2px 12px rgba(28,4,33,.22);
}
body.seasonal-halloween .page-sub,
body.dark.seasonal-halloween .page-sub{
  color:#F2D9B7 !important;
}
body.seasonal-halloween .global-footer,
body.dark.seasonal-halloween .global-footer{
  color:#EFD9BC !important;
  border-top-color:rgba(255,214,170,.38) !important;
  text-shadow:0 1px 8px rgba(15,3,21,.22);
}
body.seasonal-halloween .global-footer strong,
body.dark.seasonal-halloween .global-footer strong{
  color:#FFF6EA !important;
}

/* ---------- Custom background: page subtitle readability ----------
   Applied to every theme so user-selected artwork cannot erase subtitles. */
body.has-custom-site-background .page-sub{
  font-weight:700;
  text-shadow:
    -1px 0 0 rgba(255,249,238,.78),
    1px 0 0 rgba(255,249,238,.78),
    0 -1px 0 rgba(255,249,238,.78),
    0 1px 0 rgba(255,249,238,.92),
    0 2px 8px rgba(255,249,238,.72);
}
body.dark.has-custom-site-background .page-sub,
body.seasonal-halloween.has-custom-site-background .page-sub,
body.dark.seasonal-halloween.has-custom-site-background .page-sub{
  text-shadow:
    -1px 0 1px rgba(4,13,19,.82),
    1px 0 1px rgba(4,13,19,.82),
    0 -1px 1px rgba(4,13,19,.82),
    0 1px 1px rgba(4,13,19,.96),
    0 2px 10px rgba(4,13,19,.88);
}

/* ---------- Halloween: tabs and shared gallery lightbox ----------
   Visual-only treatment. Gallery data, navigation and page rendering stay shared. */
body.seasonal-halloween .tabs,
body.dark.seasonal-halloween .tabs{
  background:linear-gradient(180deg,rgba(91,31,91,.96),rgba(67,21,73,.97)) !important;
  border-color:#D89A54 !important;
  box-shadow:0 7px 18px rgba(34,6,41,.16);
}
body.seasonal-halloween .tab,
body.dark.seasonal-halloween .tab{
  background:#F3DFBB !important;
  color:#684E3B !important;
  border-color:rgba(216,154,84,.28) !important;
}
body.seasonal-halloween .tab:hover,
body.dark.seasonal-halloween .tab:hover{
  background:#FFF0CF !important;
  color:#35113F !important;
  border-color:#E0A455 !important;
}
body.seasonal-halloween .tab.active,
body.dark.seasonal-halloween .tab.active{
  background:linear-gradient(180deg,#FF9B3D,#FF8126) !important;
  color:#35113F !important;
  border-color:#D85E16 !important;
  box-shadow:3px 3px 0 rgba(53,17,63,.20) !important;
}

body.seasonal-halloween .gallery-item,
body.dark.seasonal-halloween .gallery-item{
  border-color:#D29A59 !important;
  background:var(--surface) !important;
}
body.seasonal-halloween .gallery-item:hover,
body.dark.seasonal-halloween .gallery-item:hover{
  border-color:#FF9B3D !important;
  box-shadow:0 10px 24px rgba(53,17,63,.24) !important;
}
body.seasonal-halloween .lightbox,
body.dark.seasonal-halloween .lightbox{
  background:rgba(24,5,30,.72) !important;
  backdrop-filter:blur(6px);
}
body.seasonal-halloween .lightbox-panel,
body.dark.seasonal-halloween .lightbox-panel{
  border-color:#D89A54 !important;
  box-shadow:0 30px 86px rgba(17,2,23,.58) !important;
}
body.seasonal-halloween .lightbox-header,
body.seasonal-halloween .lightbox-strip,
body.dark.seasonal-halloween .lightbox-header,
body.dark.seasonal-halloween .lightbox-strip{
  background:linear-gradient(180deg,#5A235D,#45174C) !important;
  border-color:#B96D83 !important;
}
body.seasonal-halloween .lightbox-name,
body.dark.seasonal-halloween .lightbox-name{
  color:#FFF5E8 !important;
}
body.seasonal-halloween .lightbox-role,
body.dark.seasonal-halloween .lightbox-role{
  color:#FFAA50 !important;
}
body.seasonal-halloween .lightbox-desc,
body.dark.seasonal-halloween .lightbox-desc{
  color:#EFD9BC !important;
}
body.seasonal-halloween .lightbox-stage{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(232,213,223,.58) 0%,transparent 60%),
    #FFF9EF !important;
}
body.dark.seasonal-halloween .lightbox-stage{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(109,63,99,.32) 0%,transparent 60%),
    #0D2A36 !important;
}
body.seasonal-halloween :is(.lightbox-full,.lightbox-close,.lightbox-nav,.lightbox-counter){
  background:#FFF9EF !important;
  color:#153D48 !important;
  border-color:#D89A54 !important;
}
body.dark.seasonal-halloween :is(.lightbox-full,.lightbox-close,.lightbox-nav,.lightbox-counter){
  background:#153846 !important;
  color:#FFF5E8 !important;
  border-color:#D89A54 !important;
}
body.seasonal-halloween :is(.lightbox-full,.lightbox-close,.lightbox-nav):hover,
body.dark.seasonal-halloween :is(.lightbox-full,.lightbox-close,.lightbox-nav):hover{
  background:#FF8A2B !important;
  color:#35113F !important;
  border-color:#D85E16 !important;
}
body.seasonal-halloween .lightbox-thumb,
body.dark.seasonal-halloween .lightbox-thumb{
  background-color:#35113F !important;
  border-color:rgba(255,183,96,.20) !important;
}
body.seasonal-halloween .lightbox-thumb.active,
body.dark.seasonal-halloween .lightbox-thumb.active{
  border-color:#FF9B3D !important;
  box-shadow:0 0 0 2px rgba(255,155,61,.18);
}

/* ---------- Admin artwork fallback previews ---------- */

/* ---------- Shared gallery interaction refinements ---------- */
.lightbox-stage{
  touch-action:pan-y;
  overscroll-behavior:contain;
}
.lightbox-img{
  -webkit-user-drag:none;
  user-select:none;
}
.lightbox-thumb{
  padding:0;
  overflow:hidden;
}
.lightbox-thumb-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}

/* ---------- Mixed image / YouTube gallery ---------- */
.gallery-item{position:relative}
.gallery-play-badge{
  position:absolute;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:rgba(7,56,75,.86);
  color:#FFF7E9;
  font-size:18px;
  line-height:1;
  padding-left:3px;
  box-shadow:0 5px 18px rgba(0,0,0,.28);
  pointer-events:none;
}
.gallery-item:hover .gallery-play-badge{background:var(--coral);transform:translate(-50%,-50%) scale(1.06)}

.lightbox-panel:focus{outline:none}
.lightbox :is(button,a,iframe):focus-visible{
  outline:3px solid color-mix(in srgb,var(--coral) 75%,white);
  outline-offset:2px;
}
.lightbox-stage.is-video{
  min-height:min(64vh,620px);
  background:#10161A;
}
.lightbox-video{
  display:block;
  width:min(88%,960px);
  max-width:calc(100% - 96px);
  aspect-ratio:16/9;
  max-height:min(64vh,540px);
  border:0;
  border-radius:10px;
  background:#000;
  box-shadow:0 14px 34px rgba(0,0,0,.32);
}
.lightbox-thumb{position:relative}
.lightbox-thumb-play{
  position:absolute;
  inset:50% auto auto 50%;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(7,56,75,.86);
  color:#FFF;
  font-size:10px;
  padding-left:2px;
  pointer-events:none;
}
.lightbox-thumb.is-video.active .lightbox-thumb-play{background:var(--coral)}

@media (max-width:720px){
  .lightbox-stage.is-video{min-height:42vh;padding:14px 52px}
  .lightbox-video{width:100%;max-width:100%;max-height:48vh}
}

/* ---------- Reusable character effect presets ---------- */
.feat-art.has-character-card-effect,
.ch-card-art.has-character-card-effect{position:relative;overflow:hidden}
.character-preset-effect-layer{
  position:fixed;
  inset:0;
  z-index:880;
  overflow:hidden;
  pointer-events:none;
}
.character-card-effect-layer{
  position:absolute;
  inset:0;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
}
.character-preset-particle{
  position:absolute;
  display:block;
  width:var(--size);
  height:auto;
  opacity:var(--opacity,.7);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform,opacity;
}

.effect-floating .character-preset-particle{
  left:var(--left);
  bottom:-12%;
  animation:characterEffectFloat var(--duration) linear var(--delay) infinite;
}
@keyframes characterEffectFloat{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--rotation)) scale(.72)}
  12%{opacity:var(--opacity,.7)}
  82%{opacity:var(--opacity,.7)}
  100%{opacity:0;transform:translate3d(var(--drift),-118vh,0) rotate(calc(var(--rotation) + 220deg)) scale(1.02)}
}
.character-card-effect-layer.effect-floating .character-preset-particle{
  animation-name:characterCardEffectFloat;
}
@keyframes characterCardEffectFloat{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--rotation)) scale(.72)}
  15%,78%{opacity:var(--opacity,.7)}
  100%{opacity:0;transform:translate3d(var(--drift),-125%,0) rotate(calc(var(--rotation) + 160deg)) scale(1)}
}

.effect-falling .character-preset-particle{
  left:var(--left);
  top:-12%;
  animation:characterEffectFall var(--duration) linear var(--delay) infinite;
}
@keyframes characterEffectFall{
  0%{opacity:0;transform:translate3d(0,-8vh,0) rotate(var(--rotation))}
  10%,82%{opacity:var(--opacity,.72)}
  100%{opacity:0;transform:translate3d(var(--drift),118vh,0) rotate(calc(var(--rotation) + 520deg))}
}
.character-card-effect-layer.effect-falling .character-preset-particle{animation-name:characterCardEffectFall}
@keyframes characterCardEffectFall{
  0%{opacity:0;transform:translate3d(0,-15%,0) rotate(var(--rotation))}
  12%,82%{opacity:var(--opacity,.72)}
  100%{opacity:0;transform:translate3d(var(--drift),125%,0) rotate(calc(var(--rotation) + 360deg))}
}

.effect-rain .character-preset-particle{
  left:var(--left);
  top:-18%;
  width:2px;
  height:var(--size);
  border-radius:999px;
  background:linear-gradient(180deg,transparent,rgba(197,229,243,.86));
  filter:drop-shadow(0 0 3px rgba(156,211,237,.3));
  animation:characterEffectRain var(--duration) linear var(--delay) infinite;
}
.effect-rain img.character-preset-particle{width:var(--size);height:auto;background:none;border-radius:0}
@keyframes characterEffectRain{
  0%{opacity:0;transform:translate3d(0,-12vh,0) rotate(12deg)}
  8%,84%{opacity:var(--opacity,.7)}
  100%{opacity:0;transform:translate3d(-12vw,120vh,0) rotate(12deg)}
}
.character-card-effect-layer.effect-rain .character-preset-particle{animation-name:characterCardEffectRain}
@keyframes characterCardEffectRain{
  0%{opacity:0;transform:translate3d(0,-20%,0) rotate(12deg)}
  8%,84%{opacity:var(--opacity,.7)}
  100%{opacity:0;transform:translate3d(-28px,125%,0) rotate(12deg)}
}

.effect-mist .character-preset-particle{
  left:var(--left);
  top:var(--top);
  width:var(--size);
  aspect-ratio:2.4/1;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(225,235,235,.34),rgba(210,225,228,.12) 52%,transparent 72%);
  filter:blur(12px);
  animation:characterEffectMist var(--duration) ease-in-out var(--delay) infinite alternate;
}
.effect-mist img.character-preset-particle{height:auto;aspect-ratio:auto;background:none;filter:blur(4px)}
@keyframes characterEffectMist{
  0%{opacity:.08;transform:translate3d(-22%,8px,0) scale(.88)}
  45%{opacity:var(--opacity,.45)}
  100%{opacity:.12;transform:translate3d(36%,-14px,0) scale(1.12)}
}

.effect-orbiting .character-preset-particle{
  left:50%;
  top:50%;
  animation:characterEffectOrbit var(--duration) linear var(--delay) infinite;
}
@keyframes characterEffectOrbit{
  from{opacity:var(--opacity,.7);transform:rotate(var(--start-angle)) translateX(var(--orbit-radius)) rotate(0deg)}
  to{opacity:var(--opacity,.7);transform:rotate(calc(var(--start-angle) + 360deg)) translateX(var(--orbit-radius)) rotate(-360deg)}
}

body.dark .effect-rain .character-preset-particle{
  background:linear-gradient(180deg,transparent,rgba(190,226,244,.78));
}
body.dark .effect-mist .character-preset-particle{
  background:radial-gradient(ellipse,rgba(210,225,231,.24),rgba(175,203,215,.08) 54%,transparent 74%);
}

@media (prefers-reduced-motion:reduce){
  .character-preset-effect-layer,
  .character-card-effect-layer,
  .character-sparkle-layer,
  .character-card-sparkle-layer{display:none!important}
}

/* ---------- Character effects: built-in fallbacks and adaptive contrast ---------- */
.character-sparkle-layer span.character-sparkle,
.character-card-sparkle-layer span.character-card-sparkle{
  aspect-ratio:1;
  height:auto;
  background:linear-gradient(135deg,#FFFCEB 0 34%,#F0B64F 35% 52%,#0B7180 53% 68%,#FFFCEB 69% 100%);
  clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);
}
body.dark .character-sparkle-layer span.character-sparkle,
body.dark .character-card-sparkle-layer span.character-card-sparkle{
  background:linear-gradient(135deg,#FFFFFF 0 34%,#FFD574 35% 55%,#7DE0E8 56% 70%,#FFFFFF 71% 100%);
}
body.seasonal-halloween .character-sparkle-layer span.character-sparkle,
body.seasonal-halloween .character-card-sparkle-layer span.character-card-sparkle{
  background:linear-gradient(135deg,#FFF7DD 0 34%,#FF9B3D 35% 55%,#D77AB3 56% 70%,#FFF7DD 71% 100%);
}

.effect-floating span.character-preset-particle{
  aspect-ratio:1;
  border:1px solid rgba(9,82,96,.48);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFFDE9 0 12%,#F2C768 20%,rgba(24,139,150,.92) 48%,rgba(7,61,76,.18) 72%,transparent 76%);
  box-shadow:0 0 8px rgba(14,117,131,.58),0 0 15px rgba(226,172,73,.34);
}
.effect-falling span.character-preset-particle{
  aspect-ratio:1.45/1;
  border:1px solid rgba(142,83,40,.36);
  border-radius:78% 22% 72% 28% / 66% 34% 66% 34%;
  background:linear-gradient(145deg,#F7CF7B 0 22%,#DE795D 48%,#8B4B72 100%);
  box-shadow:0 2px 7px rgba(90,41,33,.28);
}
.effect-orbiting span.character-preset-particle{
  aspect-ratio:1;
  background:linear-gradient(145deg,#FFF9D8 0 22%,#E9B84F 42%,#177D89 72%,#0A4859 100%);
  clip-path:polygon(50% 0,62% 34%,100% 50%,62% 66%,50% 100%,38% 66%,0 50%,38% 34%);
  filter:drop-shadow(0 0 5px rgba(8,92,105,.68)) drop-shadow(0 0 9px rgba(226,172,73,.42));
}

.effect-rain span.character-preset-particle{
  background:linear-gradient(180deg,transparent 0%,rgba(17,105,130,.55) 30%,rgba(5,61,83,.94) 100%);
  filter:drop-shadow(0 0 2px rgba(255,255,255,.88)) drop-shadow(0 0 4px rgba(10,91,119,.48));
}
.effect-mist span.character-preset-particle{
  background:radial-gradient(ellipse,rgba(37,110,123,.34),rgba(74,143,151,.20) 48%,rgba(255,247,227,.08) 66%,transparent 76%);
  filter:blur(10px);
}

body.dark .effect-floating span.character-preset-particle{
  border-color:rgba(255,221,140,.56);
  background:radial-gradient(circle at 34% 30%,#FFFFFF 0 14%,#FFD16D 22%,rgba(93,210,222,.96) 50%,rgba(12,76,92,.28) 72%,transparent 77%);
  box-shadow:0 0 9px rgba(99,222,232,.70),0 0 17px rgba(255,198,91,.42);
}
body.dark .effect-falling span.character-preset-particle{
  border-color:rgba(255,207,118,.44);
  background:linear-gradient(145deg,#FFD77E 0 20%,#EE8B68 48%,#C26AA5 100%);
  box-shadow:0 0 8px rgba(255,183,91,.34);
}
body.dark .effect-orbiting span.character-preset-particle{
  background:linear-gradient(145deg,#FFFFFF 0 20%,#FFD470 42%,#73DDE5 72%,#26899A 100%);
  filter:drop-shadow(0 0 5px rgba(110,226,236,.78)) drop-shadow(0 0 10px rgba(255,202,104,.50));
}
body.dark .effect-rain span.character-preset-particle{
  background:linear-gradient(180deg,transparent 0%,rgba(149,220,240,.64) 28%,rgba(225,247,255,.96) 100%);
  filter:drop-shadow(0 0 4px rgba(109,202,235,.68));
}
body.dark .effect-mist span.character-preset-particle{
  background:radial-gradient(ellipse,rgba(224,243,248,.38),rgba(148,199,215,.22) 50%,rgba(89,148,169,.10) 68%,transparent 78%);
  filter:blur(10px);
}

body.seasonal-halloween .effect-floating span.character-preset-particle{
  border-color:rgba(255,183,96,.62);
  background:radial-gradient(circle at 34% 30%,#FFF8E8 0 13%,#FFB24F 22%,rgba(209,102,188,.96) 49%,rgba(87,28,91,.25) 72%,transparent 77%);
  box-shadow:0 0 9px rgba(215,122,179,.70),0 0 16px rgba(255,139,42,.48);
}
body.seasonal-halloween .effect-falling span.character-preset-particle{
  border-color:rgba(255,183,96,.58);
  background:linear-gradient(145deg,#FFC360 0 20%,#FF8126 48%,#A94A91 100%);
  box-shadow:0 0 8px rgba(255,129,38,.40);
}
body.seasonal-halloween .effect-orbiting span.character-preset-particle{
  background:linear-gradient(145deg,#FFF8E8 0 20%,#FFB34F 42%,#E17CBD 70%,#7B3479 100%);
  filter:drop-shadow(0 0 6px rgba(225,124,189,.78)) drop-shadow(0 0 11px rgba(255,155,61,.54));
}
body.seasonal-halloween .effect-rain span.character-preset-particle{
  background:linear-gradient(180deg,transparent 0%,rgba(240,169,210,.62) 28%,rgba(255,207,126,.96) 100%);
  filter:drop-shadow(0 0 4px rgba(255,141,48,.58));
}
body.seasonal-halloween .effect-mist span.character-preset-particle{
  background:radial-gradient(ellipse,rgba(238,176,216,.38),rgba(207,112,190,.22) 48%,rgba(255,174,88,.10) 67%,transparent 78%);
}

/* ---------- Character effect clarity and rain contrast ---------- */

/* A dark core plus a light rim keeps rain visible over both pale paper and artwork. */
.effect-rain span.character-preset-particle{
  width:3px;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,.92) 0 24%,
    rgba(13,82,108,.98) 25% 76%,
    rgba(255,255,255,.82) 77% 100%
  );
  box-shadow:0 0 1px rgba(255,255,255,.95),0 0 4px rgba(5,48,69,.72);
  filter:none;
}
body.dark .effect-rain span.character-preset-particle{
  background:linear-gradient(
    90deg,
    rgba(22,73,94,.96) 0 20%,
    rgba(217,246,255,.98) 21% 79%,
    rgba(22,73,94,.94) 80% 100%
  );
  box-shadow:0 0 2px rgba(178,231,249,.88),0 0 5px rgba(47,153,192,.64);
  filter:none;
}
body.seasonal-halloween .effect-rain span.character-preset-particle{
  background:linear-gradient(
    90deg,
    rgba(84,27,88,.96) 0 20%,
    rgba(255,210,130,.98) 21% 79%,
    rgba(84,27,88,.94) 80% 100%
  );
  box-shadow:0 0 2px rgba(255,217,153,.90),0 0 5px rgba(222,104,181,.68);
  filter:none;
}

/* ---------- Compact gallery workbench ---------- */

/* ---------- Private editor: wider, clearer workspace ---------- */
body.admin-editor-page .content{
  max-width:none;
  padding:24px clamp(20px,2.1vw,38px) 42px;
}

@media (max-width:1040px){
  body.admin-editor-page .content{padding-inline:18px}
}

/* ---------- Admin content ordering and quick actions ---------- */

/* ---------- Admin list: visible ordering controls ---------- */

/* ---------- Admin list: smoother drag ordering ---------- */

/* ---------- Species icon settings ---------- */
.species-filter-image{
  width:16px;
  height:16px;
  flex:0 0 16px;
  object-fit:contain;
}
.ch-card-species img{
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
}

/* ---------- Linked character affiliations ---------- */
.affiliation-links{
  display:inline;
  text-align:right;
}
.affiliation-links a{
  color:var(--primary);
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.affiliation-links a:hover{
  color:var(--coral);
  border-bottom-color:currentColor;
}

/* Species manager */

/* ---------- Private editor: unified section system ---------- */

/* The action row stays within reach on long character and page forms. */

/* Settings tabs use the same visual hierarchy as content editors. */

/* ---------- Private editor: embedded workbenches and settings polish ---------- */

body.dark .directory-filter-btn.active,
body.dark .ch-filter-btn.active{
  background:linear-gradient(180deg,#FF8965,#FF7454) !important;
  border-color:#FF9A72 !important;
  color:#102F3A !important;
}
body.dark .directory-filter-btn.active :is(i,span,strong),
body.dark .ch-filter-btn.active :is(i,span,strong){color:#102F3A !important}
body.dark.seasonal-halloween .directory-filter-btn.active,
body.dark.seasonal-halloween .ch-filter-btn.active{
  background:linear-gradient(180deg,#FF9B3D,#FF8126) !important;
  border-color:#FFB760 !important;
  color:#35113F !important;
}
body.dark.seasonal-halloween .directory-filter-btn.active :is(i,span,strong),
body.dark.seasonal-halloween .ch-filter-btn.active :is(i,span,strong){color:#35113F !important}

/* =========================================================
   ADMIN APPLICATION — DESIGN OPTION A
   Separate editor shell; public site layout remains unchanged.
   ========================================================= */
body.admin-editor-page{overflow-x:hidden}

/* Live overlay editor: the public page runs inside an isolated same-origin frame. */
body.admin-live-editor-page{overflow:hidden}

/* Shared rich-text improvements */
.admin-editor-toolbar mark,
.rich-text-content mark{
  padding:0 .12em;
  border-radius:3px;
  background:color-mix(in srgb,var(--sun) 55%,transparent);
  color:inherit;
}
.admin-image-text-node[data-text-align='left'] .admin-image-text-content,
.rich-image-text[data-text-align='left'] .rich-image-text-content{text-align:left}
.admin-image-text-node[data-text-align='center'] .admin-image-text-content,
.rich-image-text[data-text-align='center'] .rich-image-text-content{text-align:center}
.admin-image-text-node[data-text-align='right'] .admin-image-text-content,
.rich-image-text[data-text-align='right'] .rich-image-text-content{text-align:right}
.admin-image-text-node[data-vertical-align='top'] .admin-image-text-layout,
.rich-image-text[data-vertical-align='top']{align-items:start}
.admin-image-text-node[data-vertical-align='center'] .admin-image-text-layout,
.rich-image-text[data-vertical-align='center']{align-items:center}
.admin-image-text-node[data-vertical-align='bottom'] .admin-image-text-layout,
.rich-image-text[data-vertical-align='bottom']{align-items:end}

/* Keep the private editor readable while the public site is in a seasonal theme. */

/* =========================================================
   SHARED TIPTAP TOOLBAR — compact, predictable and global
   ========================================================= */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* ---------- Final stability fixes: admin pages and seasonal effects ---------- */

/* Louise sparkle compatibility: keeps the approved warm halo in every public theme. */
.character-sparkle,
.character-card-sparkle{
  visibility:visible!important;
}
body.seasonal-christmas .character-sparkle,
body.seasonal-christmas .character-card-sparkle,
body.seasonal-new-year .character-sparkle,
body.seasonal-new-year .character-card-sparkle{
  filter:
    drop-shadow(0 0 2px rgba(124,76,12,.84))
    drop-shadow(0 0 6px rgba(226,171,57,.78))
    drop-shadow(0 0 11px rgba(255,239,180,.68));
}


/* Keep every admin section inside the current viewport, including after section changes. */
html:has(body.admin-interface-active),
body.admin-interface-active{
  max-width:100%;
  overflow-x:hidden;
}


/* Species selector: a real dropdown for registered species, with a separate new-name field. */

/* The private editor intentionally ignores public seasonal palettes. */

/* ---------- Shared public gallery + Swiper lightbox ---------- */
.shared-gallery{
  min-width:0;
  scroll-margin-top:24px;
}
.gallery-item{
  content-visibility:auto;
  contain-intrinsic-size:160px 160px;
}
.gallery-thumb{
  overflow:hidden;
}
.gallery-thumb-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
  user-select:none;
}
.gallery-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--border);
}
.gallery-pagination span{
  min-width:110px;
  color:var(--muted);
  font-family:var(--display-font);
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:center;
  text-transform:uppercase;
}
.gallery-pagination button{
  min-width:104px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;
}
.gallery-pagination button:hover:not(:disabled){
  border-color:var(--coral);
  background:var(--coral);
  color:#fff;
}
.gallery-pagination button:disabled{
  cursor:not-allowed;
  opacity:.38;
}

.lightbox-stage{
  min-width:0;
}
.lightbox-main-swiper{
  width:100%;
  height:100%;
  min-width:0;
}
.lightbox-main-swiper .swiper-wrapper,
.lightbox-main-swiper .swiper-slide{
  width:100%;
  height:100%;
}
.lightbox-main-swiper .swiper-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.lightbox-main-swiper .swiper-zoom-container{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
}
.lightbox-main-swiper .lightbox-img{
  width:auto;
  height:auto;
}
.lightbox-nav,
.lightbox-counter{
  z-index:5;
}
.lightbox-strip{
  display:block;
  min-width:0;
  overflow:hidden;
}
.lightbox-strip-swiper{
  width:100%;
  overflow:hidden;
}
.lightbox-strip-swiper .swiper-slide{
  width:64px;
  height:64px;
}
.lightbox-strip-swiper .lightbox-thumb{
  width:64px;
  height:64px;
}
.lightbox-video-placeholder{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(88%,960px);
  max-width:calc(100% - 96px);
  aspect-ratio:16/9;
  max-height:min(64vh,540px);
  overflow:hidden;
  border-radius:10px;
  background:#000;
}
.lightbox-video-placeholder img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
}
.lightbox-video-placeholder span{
  position:absolute;
  inset:50% auto auto 50%;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:rgba(7,56,75,.88);
  color:#fff;
  font-size:20px;
  padding-left:3px;
}

@media (max-width:720px){
  .gallery-pagination{
    gap:8px;
  }
  .gallery-pagination button{
    min-width:88px;
    padding-inline:9px;
  }
  .gallery-pagination span{
    min-width:82px;
    font-size:10px;
  }
  .lightbox-strip-swiper .swiper-slide,
  .lightbox-strip-swiper .lightbox-thumb{
    width:52px;
    height:52px;
  }
}

/* Keep the Swiper stage at the same visual scale as the previous lightbox. */
.lightbox-main-swiper{
  height:min(64vh,620px);
}
.character-gallery-lightbox .lightbox-main-swiper{
  height:min(64vh,calc(100dvh - 230px));
}
@media (max-width:720px){
  .lightbox-main-swiper{
    height:52vh;
  }
  .character-gallery-lightbox .lightbox-main-swiper{
    height:min(58vh,calc(100dvh - 260px));
  }
}

/* ---------- Optimized particle system (tsParticles) ---------- */
.character-particle-page-layer,
.seasonal-particle-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.character-particle-page-layer{z-index:870}
.seasonal-particle-layer{z-index:760}
.polaris-particle-canvas,
.polaris-particle-canvas>div,
.polaris-particle-canvas canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
}
.character-particle-page-layer.particle-mist .polaris-particle-canvas canvas{
  filter:blur(5px);
  transform:scale(1.04);
}
.character-asset-image{contain:layout paint style}
.lightweight-particle{contain:layout paint style}
.seasonal-particles-halloween .polaris-particle-canvas canvas{
  filter:blur(2.8px) saturate(1.08);
}
body.admin-interface-active .seasonal-particle-layer{display:none!important}
@media(prefers-reduced-motion:reduce){
  .character-particle-page-layer,
  .seasonal-particle-layer,
  .character-asset-layer,
  .lightweight-particle-layer{display:none!important}
}

/* ---------- Particle preset manager ---------- */

/* ---------- Particle editor expansion and scoped Character effects ---------- */
.page.active{position:relative;isolation:isolate}
.character-particle-page-layer,
.character-page-asset-layer{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint style;
}
.character-page-asset-layer.character-preset-effect-layer,
.character-page-asset-layer.character-sparkle-layer{position:absolute!important}
.seasonal-particle-layer{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.character-particle-page-layer{z-index:8}
.seasonal-particle-layer{z-index:760}
.character-particle-page-layer .polaris-particle-canvas,
.character-page-asset-layer{
  border-radius:inherit;
}

/* ---------- Character effect layer controls ---------- */

/* Artist settings preview stays inside the editor flow instead of using the floating content preview. */

/* Shared native-lazy card media */
.lazy-card-image{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.feat-art::after,.ch-card-art::after,.thumb::after{z-index:1}
.feat-art>span:not(.character-card-effect-layer):not(.character-card-sparkle-layer),
.ch-card-art>span:not(.character-card-effect-layer):not(.character-card-sparkle-layer),
.thumb>span{position:relative;z-index:2}
.block-image-media>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- Unified Site & Themes admin page ---------- */

/* ---------- Character effect visibility and dynamic sparkle emitters ---------- */
.character-particle-page-layer{z-index:28!important}
.character-card-effect-layer,
.character-card-sparkle-layer{z-index:6!important}
.character-sparkle,
.character-card-sparkle{will-change:transform,opacity}

/* Music controls remain visible without opening a secondary editor section. */

/* Page Blocks can be folded without changing the public document. */

/* Particle preset package import */