/* ==========================================================================
   ANIMA · SKY THEME
   Blue-and-white pastel override. Loaded after style.css.
   ========================================================================== */

:root {
  color-scheme: light;
  accent-color: #3c8fc3;
  --bg: #f4faff;
  --bg-soft: #eaf6fd;
  --bg-raised: #ffffff;
  --paper: #173a52;
  --paper-bright: #0b293f;
  --paper-dim: #3b5d73;
  --muted: #5f7b90;
  --muted-dim: #7f97a8;
  --line: rgba(37, 89, 124, 0.13);
  --line-strong: rgba(37, 89, 124, 0.25);
  --gold: #3c8fc3;
  --gold-bright: #1f74a8;
  --gold-deep: #83b9d7;
  --red: #d3786f;
  --green: #469b8b;
  --sky: #8bcbe8;
  --sky-soft: #e3f4fe;
  --sky-deep: #216f9e;
  --shadow-blue: 0 22px 55px rgba(28, 81, 115, 0.1);
}

html {
  background: var(--bg);
}

body {
  background:
    radial-gradient(circle at 7% 0%, rgba(221, 242, 255, 0.9), transparent 27%),
    radial-gradient(circle at 94% 8%, rgba(217, 240, 255, 0.72), transparent 26%),
    linear-gradient(180deg, #f8fcff 0%, #f2faff 46%, #f8fcff 100%);
  color: var(--paper);
}

::selection {
  background: #9dd6ee;
  color: #0f2e44;
}

.skip-link {
  background: var(--paper);
  color: #ffffff;
}

.grain {
  opacity: 0.018;
  mix-blend-mode: multiply;
}

.cursor-glow {
  background: radial-gradient(circle, rgba(78, 163, 208, 0.09), transparent 64%);
  mix-blend-mode: multiply;
}

/* Header ------------------------------------------------------------------- */
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(249, 253, 255, 0.87);
  box-shadow: 0 10px 30px rgba(35, 86, 119, 0.05);
}

.library-trigger {
  border-radius: 999px;
  padding-left: 15px;
}

.menu-toggle {
  border-radius: 50%;
}

.brand-seal {
  border-color: rgba(60, 143, 195, 0.48);
  color: var(--gold);
}

.brand:hover .brand-seal {
  background: var(--gold);
  color: #ffffff;
}

.brand-text strong {
  color: var(--paper-bright);
}

.brand-text small {
  color: var(--muted);
}

.nav-link {
  color: var(--muted);
}

.nav-link span {
  color: var(--muted-dim);
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--paper-bright);
}

.nav-link:hover span,
.nav-link.is-active span {
  color: var(--gold);
}

.nav-link::after {
  background: var(--gold);
}

.header-random {
  color: var(--muted);
}

.header-random:hover {
  color: var(--gold);
}

.library-trigger {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.56);
  color: var(--paper-dim);
}

.library-trigger svg {
  color: var(--gold);
}

.library-trigger b {
  background: #e0f2fc;
  color: var(--gold-bright);
}

.library-trigger:hover {
  border-color: rgba(60, 143, 195, 0.45);
  background: #ffffff;
  color: var(--paper-bright);
}

.library-trigger:hover b {
  background: var(--gold);
  color: #ffffff;
}

.menu-toggle {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.45);
}

.menu-toggle span {
  background: var(--paper-dim);
}

.site-header.nav-open .menu-toggle span {
  background: var(--gold);
}

/* Buttons ------------------------------------------------------------------ */
.button {
  border-radius: 999px;
}

.button-primary {
  border-color: var(--gold);
  background: var(--gold);
  color: #ffffff;
  box-shadow: 0 12px 25px rgba(44, 123, 168, 0.17);
}

.button-primary:hover {
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  box-shadow: 0 15px 28px rgba(31, 105, 146, 0.22);
}

.button-ghost {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.58);
  color: var(--paper-dim);
}

.button-ghost:hover {
  border-color: rgba(60, 143, 195, 0.55);
  background: #ffffff;
  color: var(--gold-bright);
}

.text-button {
  color: var(--gold-bright);
}

.text-button span::after {
  background: currentColor;
}

/* Hero --------------------------------------------------------------------- */
.hero {
  background: #eaf7ff;
}

.hero-bg {
  background: #eaf7ff;
}

.hero-bg img {
  object-position: center 52%;
  filter: saturate(0.88) brightness(1.03) contrast(0.99);
}

.hero-bg-wash {
  background:
    linear-gradient(180deg, rgba(250, 253, 255, 0.96) 0%, rgba(250, 253, 255, 0.62) 10%, rgba(250, 253, 255, 0.18) 22%, transparent 32%),
    linear-gradient(90deg,
      rgba(250, 253, 255, 0.99) 0%,
      rgba(249, 253, 255, 0.95) 21%,
      rgba(248, 252, 255, 0.66) 43%,
      rgba(252, 254, 255, 0.08) 72%,
      rgba(238, 249, 255, 0.24) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(244, 250, 255, 0.42) 20%, transparent 45%),
    radial-gradient(circle at 76% 30%, rgba(255, 255, 255, 0.02), rgba(202, 232, 247, 0.18) 100%);
}

.hero-eyebrow {
  color: var(--gold-bright);
}

.hero-eyebrow em {
  color: var(--muted);
}

.hero-eyebrow .eyebrow-line {
  background: var(--gold);
}

.hero-side-note {
  color: rgba(46, 124, 167, 0.72);
}

.hero-title {
  color: var(--paper-bright);
  text-shadow: 0 16px 40px rgba(40, 100, 136, 0.08);
}

.hero-title em {
  background: linear-gradient(104deg, #174c70 2%, #2f83b4 47%, #68b8dc 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-jp {
  color: var(--muted);
}

.hero-jp span {
  color: var(--gold);
}

.hero-lead {
  color: var(--paper-dim);
}

.hero-meta {
  color: var(--muted);
}

.hero-meta i {
  background: var(--gold);
}

.hero-score {
  color: var(--gold-bright);
}

.hero-fav.is-active {
  border-color: rgba(60, 143, 195, 0.48);
  background: #ffffff;
  color: var(--gold-bright);
}

.hero-screening {
  color: var(--muted);
}

.pulse-dot {
  background: var(--green);
}

.pulse-dot::after {
  border-color: rgba(70, 155, 139, 0.45);
}

.hero-poster-halo {
  background: radial-gradient(circle, rgba(115, 188, 225, 0.22), rgba(255, 255, 255, 0.1) 42%, transparent 68%);
}

.hero-poster-back {
  border-color: rgba(59, 139, 187, 0.24);
  background: rgba(255, 255, 255, 0.48);
}

.hero-poster {
  border-color: rgba(65, 131, 169, 0.28);
  background: #ffffff;
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.92),
    0 40px 85px rgba(35, 92, 126, 0.2);
}

.hero-poster figcaption {
  color: var(--muted);
}

.hero-stamp {
  border-color: rgba(60, 143, 195, 0.62);
  background: rgba(255, 255, 255, 0.55);
  color: var(--gold);
}

.hero-stamp::before {
  border-color: rgba(60, 143, 195, 0.28);
}

.hero-stage-caption {
  color: rgba(24, 70, 99, 0.42);
}

.scroll-cue {
  color: var(--muted);
}

.scroll-line {
  background: var(--line-strong);
}

.scroll-line::after {
  background: var(--gold);
}

.hero-stat {
  color: var(--muted);
}

.hero-stat span {
  color: var(--gold);
}

/* Ticker ------------------------------------------------------------------- */
.genre-ticker {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.74);
}

.ticker-track span {
  color: var(--muted);
}

.ticker-track b {
  color: var(--gold);
}

/* Statement ---------------------------------------------------------------- */
.intro {
  background:
    radial-gradient(circle at 92% 46%, rgba(220, 242, 254, 0.72), transparent 24%),
    transparent;
}

.intro-title {
  color: var(--paper-bright);
}

.intro-title em {
  color: var(--gold);
}

.intro-copy {
  border-left-color: var(--line-strong);
}

.intro-lead {
  color: var(--paper);
}

.intro-copy > p:not(.intro-lead) {
  color: var(--muted);
}

.intro-signature > span {
  color: var(--muted);
}

.stamp-small {
  border-color: rgba(60, 143, 195, 0.52);
  color: var(--gold);
}

/* Collection --------------------------------------------------------------- */
.collection {
  border-top-color: var(--line);
  background:
    radial-gradient(circle at 84% 5%, rgba(211, 239, 254, 0.82), transparent 30%),
    linear-gradient(180deg, #f4fbff 0%, #edf8ff 54%, #f8fcff 100%);
}

.heading-row h2 {
  color: var(--paper-bright);
}

.heading-row h2 > span {
  color: var(--muted);
}

.heading-aside p {
  color: var(--muted);
}

.filter-panel {
  border-color: var(--line);
}

.search-field {
  border-bottom-color: var(--line-strong);
}

.search-field:focus-within {
  border-color: rgba(60, 143, 195, 0.55);
}

.search-icon {
  color: var(--muted);
}

.search-field:focus-within .search-icon {
  color: var(--gold);
}

.search-field input {
  color: var(--paper);
}

.search-field input::placeholder {
  color: var(--muted-dim);
}

.search-field kbd {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.5);
  color: var(--muted);
}

.search-clear {
  background: #e8f5fd;
  color: var(--muted);
}

.search-clear:hover {
  background: #d7edf9;
  color: var(--paper);
}

.select-wrap select {
  border-color: var(--line-strong);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--paper-dim);
}

.select-wrap select:hover {
  border-color: rgba(60, 143, 195, 0.45);
  background: #ffffff;
  color: var(--paper-bright);
}

.select-wrap select:focus {
  border-color: rgba(60, 143, 195, 0.6);
}

.select-wrap select option {
  background: #ffffff;
  color: var(--paper);
}

.select-wrap > svg {
  color: var(--muted);
}

.fav-filter {
  border-color: var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
}

.fav-filter b {
  background: #e7f4fc;
  color: var(--muted);
}

.fav-filter:hover {
  border-color: rgba(60, 143, 195, 0.45);
  background: #ffffff;
  color: var(--paper);
}

.fav-filter.is-active {
  border-color: rgba(60, 143, 195, 0.42);
  background: #e8f5fd;
  color: var(--gold-bright);
}

.fav-filter.is-active svg {
  fill: currentColor;
}

.fav-filter.is-active b {
  background: var(--gold);
  color: #ffffff;
}

.mood-row {
  border-top-color: var(--line);
}

.mood-label {
  color: var(--muted-dim);
}

.mood-pill {
  color: var(--muted);
}

.mood-pill:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  color: var(--paper);
}

.mood-pill.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: #ffffff;
}

.result-count {
  color: var(--muted);
}

.result-count strong {
  color: var(--gold-bright);
}

.result-count i {
  color: var(--muted-dim);
}

.active-filters {
  color: var(--muted);
}

.filter-tag {
  border-color: var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--paper-dim);
}

.filter-tag button {
  color: var(--muted);
}

.filter-tag button:hover {
  color: var(--gold-bright);
}

#resetFilters {
  color: var(--gold-bright);
}

/* Cards -------------------------------------------------------------------- */
.card-poster {
  border-color: rgba(49, 105, 140, 0.18);
  border-radius: 3px;
  background: #ffffff;
  box-shadow:
    0 0 0 5px #ffffff,
    0 18px 36px rgba(30, 83, 116, 0.13);
}

.card-poster::after {
  background:
    linear-gradient(180deg, rgba(7, 34, 52, 0.27) 0%, transparent 26%, transparent 57%, rgba(7, 34, 52, 0.58) 100%),
    linear-gradient(0deg, rgba(7, 34, 52, 0.22), transparent 25%);
  opacity: 0.62;
}

.anime-card:hover .card-poster {
  border-color: rgba(60, 143, 195, 0.45);
  box-shadow:
    0 0 0 5px #ffffff,
    0 28px 52px rgba(27, 81, 116, 0.21);
}

.anime-card:hover .card-poster > img {
  filter: saturate(1.03) brightness(0.94);
}

.card-index,
.card-type {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 7px rgba(5, 31, 48, 0.45);
}

.card-fav {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.82);
  color: var(--paper-dim);
  box-shadow: 0 4px 12px rgba(14, 54, 79, 0.1);
}

.anime-card:hover .card-fav,
.card-fav:focus-visible,
.card-fav.is-active {
  opacity: 1;
}

.card-fav:hover {
  background: #ffffff;
  color: var(--gold-bright);
}

.card-fav.is-active {
  border-color: rgba(60, 143, 195, 0.48);
  background: #ffffff;
  color: var(--gold);
}

.card-status {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.85);
  color: var(--paper-dim);
  box-shadow: 0 3px 10px rgba(16, 55, 80, 0.08);
}

.card-status[data-status="watching"] {
  color: var(--gold-bright);
}

.card-status[data-status="done"] {
  color: var(--green);
}

.card-open {
  border-color: rgba(60, 143, 195, 0.35);
  background: rgba(255, 255, 255, 0.9);
  color: var(--gold-bright);
}

.card-open:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #ffffff;
}

.card-title {
  color: var(--paper-bright);
}

.anime-card:hover .card-title button {
  color: var(--gold-bright);
}

.card-score {
  color: var(--gold-bright);
}

.card-jp {
  color: var(--muted);
}

.card-meta {
  color: var(--muted-dim);
}

.card-meta span + span::before {
  color: var(--gold);
}

/* Empty + footer ----------------------------------------------------------- */
.empty-state {
  border-color: var(--line-strong);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
}

.empty-mark {
  border-color: var(--line-strong);
  color: var(--gold);
}

.empty-state h3 {
  color: var(--paper-bright);
}

.empty-state p {
  color: var(--muted);
}

.grid-footer {
  border-top-color: var(--line-strong);
}

.grid-footer > span {
  color: var(--muted-dim);
}

.grid-footer p {
  color: var(--muted);
}

/* Journal ------------------------------------------------------------------ */
.journal {
  border-top-color: var(--line);
  background:
    radial-gradient(circle at 8% 12%, rgba(215, 240, 254, 0.72), transparent 28%),
    linear-gradient(180deg, #edf8ff 0%, #f8fcff 100%);
}

.journal-heading h2 em {
  color: var(--gold);
}

.stats-card,
.activity-card {
  border-color: var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 55px rgba(30, 83, 116, 0.07);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.stats-card::after {
  border-color: rgba(60, 143, 195, 0.08);
}

.card-topline {
  color: var(--muted-dim);
}

.local-badge {
  color: var(--green);
}

.ring-track {
  stroke: #deedf6;
}

.ring-fill {
  stroke: var(--gold);
  filter: drop-shadow(0 0 4px rgba(60, 143, 195, 0.24));
}

.ring-label strong {
  color: var(--paper-bright);
}

.ring-label > span {
  color: var(--muted);
}

.ring-label small {
  color: var(--muted);
}

.stats-numbers {
  border-left-color: var(--line-strong);
}

.stats-numbers strong {
  color: var(--paper-bright);
}

.stats-numbers span {
  color: var(--muted);
}

.taste-block {
  border-top-color: var(--line-strong);
}

.taste-title {
  color: var(--paper-dim);
}

.taste-title > span:last-child {
  color: var(--muted-dim);
}

.taste-row {
  color: var(--muted);
}

.taste-track {
  background: #e4f0f7;
}

.taste-fill {
  background: linear-gradient(90deg, #81c5e3, #3c8fc3);
}

.taste-value {
  color: var(--muted);
}

.taste-empty {
  color: var(--muted);
}

.activity-card h3 {
  color: var(--paper-bright);
}

.activity-item {
  border-bottom-color: var(--line);
}

.activity-button:hover {
  background: rgba(227, 244, 254, 0.55);
}

.activity-thumb {
  border-color: #d7e8f3;
}

.activity-title {
  color: var(--paper-dim);
}

.activity-action {
  color: var(--muted);
}

.activity-action b {
  color: var(--gold-bright);
}

.activity-time {
  color: var(--muted-dim);
}

.activity-empty {
  border-color: var(--line-strong);
  color: var(--muted);
}

.activity-empty span {
  color: var(--gold);
}

.activity-foot {
  border-top-color: var(--line);
  color: var(--muted-dim);
}

.note-card {
  border-color: #d7e8f3;
  border-radius: 14px;
  background:
    linear-gradient(105deg, rgba(218, 241, 254, 0.5), transparent 38%),
    #ffffff;
  color: var(--paper);
  box-shadow: 0 24px 55px rgba(28, 81, 115, 0.1);
}

.note-card::before {
  background: rgba(60, 143, 195, 0.16);
}

.note-top {
  color: var(--muted);
}

.note-card > label {
  color: var(--paper-bright);
}

.note-card textarea {
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 31px,
    rgba(66, 128, 164, 0.13) 31px,
    rgba(66, 128, 164, 0.13) 32px
  );
  color: var(--paper);
}

.note-card textarea::placeholder {
  color: var(--muted-dim);
}

.note-card:focus-within {
  border-color: rgba(60, 143, 195, 0.34);
  box-shadow: 0 28px 65px rgba(28, 81, 115, 0.15);
}

.note-bottom {
  border-top-color: rgba(37, 89, 124, 0.15);
  color: var(--muted);
}

#noteStatus.is-saving {
  color: var(--gold-bright);
}

.note-stamp {
  border-color: rgba(60, 143, 195, 0.5);
  color: var(--gold);
}

.reset-link {
  color: var(--muted-dim);
}

.reset-link:hover {
  color: var(--red);
}

/* Closing + footer --------------------------------------------------------- */
.closing {
  border-top-color: var(--line);
  background:
    radial-gradient(circle at 50% 100%, rgba(212, 239, 254, 0.88), transparent 52%),
    linear-gradient(180deg, #f6fcff 0%, #eaf7ff 100%);
}

.closing-word {
  color: rgba(40, 113, 155, 0.055);
}

.closing h2 {
  color: var(--paper-bright);
}

.closing h2 em {
  color: var(--gold);
}

.site-footer {
  border-top-color: var(--line);
  background: rgba(252, 254, 255, 0.92);
}

.footer-brand strong {
  color: var(--paper-bright);
}

.footer-brand span {
  color: var(--muted);
}

.footer-main > p {
  color: var(--muted);
}

.footer-bottom {
  border-top-color: var(--line);
  color: var(--muted-dim);
}

.footer-bottom a {
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-bottom a:hover {
  color: var(--gold);
}

.footer-bottom kbd {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--muted);
}

/* Modals ------------------------------------------------------------------- */
.modal-scrim {
  background: rgba(226, 242, 252, 0.78);
  -webkit-backdrop-filter: blur(19px) saturate(0.85);
  backdrop-filter: blur(19px) saturate(0.85);
}

.modal-close {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.82);
  color: var(--paper-dim);
  box-shadow: 0 6px 18px rgba(28, 81, 115, 0.08);
}

.modal-close:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #ffffff;
}

.detail-panel {
  border-color: rgba(48, 111, 148, 0.2);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 45px 110px rgba(23, 66, 94, 0.23);
}

.detail-visual {
  background: #e3f3fc;
}

.detail-backdrop {
  filter: saturate(0.56) brightness(1.35) contrast(0.92);
  opacity: 0.48;
}

.detail-visual-wash {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.48) 55%, #ffffff 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.62) 0%, transparent 50%);
}

.detail-poster {
  border-color: rgba(60, 143, 195, 0.32);
  background: #ffffff;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.86),
    0 28px 60px rgba(23, 73, 103, 0.2);
}

.detail-visual-meta {
  color: rgba(23, 58, 82, 0.54);
}

.detail-content {
  background: #ffffff;
  scrollbar-color: rgba(60, 143, 195, 0.28) transparent;
}

.detail-content::-webkit-scrollbar-thumb {
  background: rgba(60, 143, 195, 0.24);
}

.detail-eyebrow {
  color: var(--gold-bright);
}

.detail-content h2 {
  color: var(--paper-bright);
}

.detail-jp {
  color: var(--muted);
}

.detail-badges span {
  border-color: var(--line-strong);
  background: #f4fbff;
  color: var(--paper-dim);
}

.detail-badges span:first-child {
  border-color: rgba(60, 143, 195, 0.32);
  background: #e8f5fd;
  color: var(--gold-bright);
}

.detail-tagline {
  color: var(--gold-bright);
}

.detail-synopsis {
  color: var(--paper-dim);
}

.detail-note {
  border-left-color: var(--gold);
  background: #f0f9ff;
}

.detail-note > span {
  color: var(--gold-bright);
}

.detail-note p {
  color: var(--paper);
}

.control-label {
  color: var(--muted);
}

.status-group {
  border-color: var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.status-group button {
  border-right-color: var(--line);
  color: var(--muted);
}

.status-group button:hover {
  background: #eff9ff;
  color: var(--paper);
}

.status-group button.is-active {
  background: var(--gold);
  color: #ffffff;
}

.star-rating button {
  color: #d5e5ee;
}

.star-rating button:hover,
.star-rating button.is-active {
  color: var(--gold);
}

#detailFav.is-active {
  border-color: rgba(60, 143, 195, 0.44);
  background: #e8f5fd;
  color: var(--gold-bright);
}

.detail-tech {
  border-top-color: var(--line-strong);
}

.detail-tech dt {
  color: var(--muted-dim);
}

.detail-tech dd {
  color: var(--paper-dim);
}

/* Random pick -------------------------------------------------------------- */
.random-panel {
  border-color: rgba(60, 143, 195, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 23%, rgba(212, 240, 254, 0.9), transparent 39%),
    #ffffff;
  box-shadow: 0 45px 105px rgba(23, 66, 94, 0.24);
}

.random-head {
  color: var(--muted);
}

.random-head span:first-child {
  color: var(--gold-bright);
}

.random-panel h2 {
  color: var(--paper-bright);
}

.random-glow {
  background: radial-gradient(circle, rgba(102, 184, 222, 0.2), transparent 58%);
}

.random-poster-wrap {
  border-color: rgba(60, 143, 195, 0.35);
  background: #ffffff;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.9),
    0 25px 55px rgba(25, 75, 105, 0.17);
}

.random-stage.is-rolling .random-poster-wrap img {
  filter: blur(1.6px) saturate(1.12) brightness(1.02);
}

.random-scan {
  background: linear-gradient(90deg, transparent, rgba(60, 143, 195, 0.75), transparent);
}

.random-result h3 {
  color: var(--paper-bright);
}

.random-result p {
  color: var(--muted);
}

/* Library drawer ----------------------------------------------------------- */
.drawer-scrim {
  background: rgba(226, 242, 252, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.drawer-panel {
  border-left-color: rgba(48, 111, 148, 0.18);
  background:
    radial-gradient(circle at 82% 0%, rgba(218, 242, 255, 0.76), transparent 28%),
    #ffffff;
  box-shadow: -28px 0 90px rgba(23, 66, 94, 0.17);
}

.drawer-kicker {
  color: var(--gold-bright);
}

.drawer-head h2 {
  color: var(--paper-bright);
}

.library-summary {
  border-color: var(--line-strong);
}

.library-summary strong {
  color: var(--paper-bright);
}

.library-summary span {
  color: var(--muted);
}

.library-tabs {
  border-bottom-color: var(--line-strong);
}

.library-tabs button {
  color: var(--muted);
}

.library-tabs button b {
  color: var(--muted-dim);
}

.library-tabs button:hover {
  color: var(--paper-dim);
}

.library-tabs button.is-active {
  color: var(--paper-bright);
}

.library-tabs button.is-active b {
  color: var(--gold-bright);
}

.library-tabs button::after {
  background: var(--gold);
}

.library-item {
  border-bottom-color: var(--line);
}

.library-item:hover {
  background: rgba(231, 246, 255, 0.62);
}

.library-thumb {
  border-color: #d7e8f3;
}

.library-title {
  color: var(--paper-dim);
}

.library-open:hover .library-title {
  color: var(--gold-bright);
}

.library-meta {
  color: var(--muted);
}

.library-badge {
  color: var(--gold-bright);
}

.library-remove {
  color: var(--muted-dim);
}

.library-remove:hover {
  border-color: rgba(211, 120, 111, 0.34);
  background: rgba(211, 120, 111, 0.07);
  color: var(--red);
}

.library-empty {
  color: var(--muted);
}

.library-empty span {
  color: var(--gold);
}

.library-empty h3 {
  color: var(--paper-dim);
}

.drawer-foot {
  border-top-color: var(--line-strong);
}

.drawer-foot p {
  color: var(--muted);
}

.toast {
  border-color: var(--line-strong);
  border-left-color: var(--gold);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 45px rgba(23, 66, 94, 0.16);
  color: var(--paper-dim);
}

.noscript {
  border-color: var(--gold);
  background: #ffffff;
  color: var(--paper);
}

/* Small responsive fixes --------------------------------------------------- */
@media (max-width: 900px) {
  .hero-side-note {
    display: none;
  }

  .site-nav {
    border-color: var(--line-strong);
    background: rgba(252, 254, 255, 0.98);
    box-shadow: 0 22px 50px rgba(23, 66, 94, 0.14);
  }

  .detail-panel {
    border-radius: 0;
  }

  .nav-link {
    border-bottom-color: var(--line);
  }

  .hero-bg-wash {
    background:
      linear-gradient(180deg, rgba(250, 253, 255, 0.96) 0%, rgba(250, 253, 255, 0.58) 12%, rgba(250, 253, 255, 0.12) 28%, transparent 40%),
      linear-gradient(90deg, rgba(250, 253, 255, 0.97) 0%, rgba(249, 253, 255, 0.8) 48%, rgba(248, 252, 255, 0.3) 100%),
      linear-gradient(0deg, var(--bg) 0%, rgba(244, 250, 255, 0.45) 24%, transparent 60%),
      radial-gradient(circle at 76% 35%, transparent 0%, rgba(193, 229, 246, 0.12) 100%);
  }

  .hero-bg img {
    opacity: 0.94;
  }

  .detail-visual-wash {
    background:
      linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0.42) 54%, rgba(255, 255, 255, 0.1) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 60%);
  }

  .detail-backdrop {
    filter: saturate(0.6) brightness(1.42) contrast(0.9);
    opacity: 0.5;
  }

  .detail-poster {
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.9),
      0 20px 45px rgba(23, 73, 103, 0.18);
  }
}

@media (max-width: 620px) {
  .card-fav {
    border-color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.88);
  }

  .note-card {
    background:
      linear-gradient(105deg, rgba(218, 241, 254, 0.44), transparent 38%),
      #ffffff;
  }

  .random-panel {
    background:
      radial-gradient(circle at 50% 23%, rgba(212, 240, 254, 0.9), transparent 39%),
      #ffffff;
  }
}