/* ============================================================
   Anime campus wall — pastel, halftone, manga panels
   ============================================================ */
:root {
  --an-ink: #23213e;
  --an-ink-soft: #5b5775;
  --an-pink: #ff8fc7;
  --an-pink-soft: #ffe4f1;
  --an-lilac: #bda7ff;
  --an-sky: #bfe4ff;
  --an-cream: #fffaf2;
  --an-line: rgba(69, 56, 112, .14);
  --an-shadow: 0 18px 44px rgba(93, 70, 140, .14);
}
html { background: #fff7fb !important; }
body {
  color: var(--an-ink);
  background-color: #fff8fc !important;
  background-image:
    radial-gradient(circle at 8% -4%, rgba(255, 173, 209, .55), transparent 24rem),
    radial-gradient(circle at 96% 2%, rgba(182, 217, 255, .7), transparent 26rem),
    radial-gradient(circle at 50% 16%, rgba(229, 214, 255, .52), transparent 30rem),
    linear-gradient(180deg, #fff8fc 0%, #f9fbff 48%, #fff8f2 100%) !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  background-image: radial-gradient(rgba(83, 69, 126, .28) .7px, transparent .8px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 42%, transparent 82%, #000 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 42%, transparent 82%, #000 100%);
}
body > * { position: relative; z-index: 1; }

/* drifting petals */
.anime-petals {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.anime-petals i {
  position: absolute;
  top: -8vh;
  width: 8px;
  height: 11px;
  background: linear-gradient(135deg, #ffd3e5, #ff9ac9);
  border-radius: 70% 6% 70% 12%;
  opacity: .7;
  animation: petal-fall 12s linear infinite;
  filter: drop-shadow(0 2px 2px rgba(170, 92, 137, .14));
}
.anime-petals i:nth-child(1) { left: 7%; animation-delay: -1s; animation-duration: 14s; transform: rotate(18deg); }
.anime-petals i:nth-child(2) { left: 21%; animation-delay: -6s; animation-duration: 18s; width: 6px; height: 8px; }
.anime-petals i:nth-child(3) { left: 38%; animation-delay: -9s; animation-duration: 15s; opacity: .45; }
.anime-petals i:nth-child(4) { left: 57%; animation-delay: -3s; animation-duration: 20s; width: 10px; height: 13px; }
.anime-petals i:nth-child(5) { left: 73%; animation-delay: -11s; animation-duration: 16s; opacity: .5; }
.anime-petals i:nth-child(6) { left: 89%; animation-delay: -7s; animation-duration: 19s; width: 7px; height: 9px; }
@keyframes petal-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  50% { transform: translate3d(24px, 48vh, 0) rotate(160deg); }
  100% { transform: translate3d(-14px, 108vh, 0) rotate(320deg); }
}

/* header */
.topbar {
  background: rgba(255, 250, 253, .82) !important;
  border-bottom: 1px solid rgba(126, 101, 166, .14) !important;
  box-shadow: 0 8px 28px rgba(108, 82, 150, .06);
}
.brand span { color: var(--an-ink) !important; }
.brand small { color: #8c7aa8 !important; letter-spacing: .15em; }
.page-tag {
  color: #6b4b92 !important;
  background: linear-gradient(135deg, #fff0f8, #edf4ff) !important;
  border: 1px solid rgba(161, 124, 201, .28) !important;
  box-shadow: 0 3px 8px rgba(112, 80, 158, .08);
}
.personal-bar {
  color: #7a6d90 !important;
  background: rgba(255, 255, 255, .52) !important;
  border-bottom: 1px solid rgba(126, 101, 166, .1) !important;
}
.personal-bar strong { color: #a25488 !important; }

/* hero */
.hero {
  position: relative;
  overflow: hidden;
  background-color: #ffe4f0 !important;
  padding: 23px 20px 22px !important;
  color: var(--an-ink) !important;
  background-image:
    radial-gradient(circle at 87% 22%, rgba(255, 255, 255, .9) 0 4%, transparent 4.5%),
    radial-gradient(circle at 82% 34%, rgba(255, 255, 255, .6) 0 6%, transparent 6.5%),
    linear-gradient(135deg, #ffe0ed 0%, #e8e4ff 46%, #d8efff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 48px rgba(129, 93, 174, .16), inset 0 1px 0 #fff !important;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255, 255, 255, .32) 62.2% 62.8%, transparent 63%),
    linear-gradient(115deg, transparent 0 70%, rgba(255, 255, 255, .24) 70.2% 70.9%, transparent 71.1%);
  pointer-events: none;
}
.hero::after {
  content: "✦";
  position: absolute;
  top: 18px;
  right: 22px;
  color: #fff;
  font-size: 22px;
  text-shadow: 0 2px 10px rgba(161, 93, 155, .28);
}
.scene-label {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px !important;
  padding: 4px 8px;
  color: #73528b !important;
  background: rgba(255, 255, 255, .64) !important;
  border: 1px solid rgba(172, 139, 202, .24) !important;
  border-radius: 999px !important;
  font-size: 6px !important;
  font-weight: 700;
  letter-spacing: .15em !important;
}
.hero .kicker {
  color: #9b5a87 !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}
.hero h1 {
  margin: 5px 0 4px !important;
  background: linear-gradient(110deg, #44345e 8%, #bd4f8d 45%, #617cff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: clamp(35px, 8.8vw, 50px) !important;
  font-weight: 900 !important;
  letter-spacing: -.065em !important;
  line-height: 1.06 !important;
  text-shadow: none !important;
}
.hero p:not(.kicker) {
  max-width: 28em;
  color: var(--an-ink-soft) !important;
  font-size: 9px !important;
  line-height: 1.9 !important;
}
.anime-sticker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  padding: 6px 10px;
  color: #653a64;
  background: rgba(255, 255, 255, .7);
  border: 1px dashed rgba(180, 102, 160, .4);
  border-radius: 8px;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .08em;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 10px rgba(176, 102, 154, .08);
}
.anime-sticker b { color: #d3509b; font-weight: 900; }
.anime-sticker span { color: #8b75b8; font-size: 9px; }

/* photo wall */
.photo-wall-card {
  position: relative;
  margin-top: 14px !important;
  padding: 17px !important;
  color: var(--an-ink) !important;
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 22px !important;
  box-shadow: var(--an-shadow), 0 0 0 1px rgba(200, 164, 218, .12) inset !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
}
.photo-wall-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #ff9cca, #c5a9ff 55%, #8ccbff);
  opacity: .75;
}
.photo-wall-head h2 { color: var(--an-ink) !important; font-weight: 900 !important; letter-spacing: -.04em !important; }
.photo-wall-head p { color: #8a789d !important; }
.photo-wall-upload {
  color: #fff !important;
  background: linear-gradient(135deg, #ff82bf, #a47dff) !important;
  box-shadow: 0 7px 16px rgba(178, 104, 216, .26);
  transition: transform .2s ease, box-shadow .2s ease;
}
.photo-wall-upload:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(178, 104, 216, .32); }
.photo-wall-grid { gap: 8px !important; }
.photo-tile {
  border: 2px solid #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 12px rgba(95, 67, 132, .12);
  background: #f4e9f3;
}
.photo-tile::after { background: linear-gradient(180deg, transparent 45%, rgba(46, 27, 62, .78) 100%) !important; }
.photo-tile-meta { color: #fff !important; }
.photo-tile-meta img, .photo-tile-meta .initial {
  border: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 2px 7px rgba(43, 22, 55, .24);
}
.photo-wall-empty {
  color: #8c7a9e !important;
  background: linear-gradient(135deg, rgba(255, 242, 249, .8), rgba(244, 247, 255, .8)) !important;
  border: 1px dashed #ddc5e1 !important;
  border-radius: 14px !important;
}
.photo-wall-more a { color: #a3548b !important; font-weight: 700; }

/* comments card */
.wall-card {
  color: var(--an-ink) !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 22px !important;
  box-shadow: var(--an-shadow), 0 0 0 1px rgba(200, 164, 218, .1) inset !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
}
.wall-head h2 { color: var(--an-ink) !important; font-weight: 900 !important; letter-spacing: -.04em !important; }
.wall-head span {
  color: #9e4f88 !important;
  background: #fff0f8 !important;
  border: 1px solid #f4c6de !important;
}
.wall-me {
  background: linear-gradient(135deg, #fff6fb, #f2f8ff) !important;
  border: 1px solid #f0d9e9 !important;
}
.wall-me-copy strong { color: var(--an-ink) !important; }
.wall-me-copy small { color: #8e7ba1 !important; }
.wall-me-avatar { border: 2px solid #fff; box-shadow: 0 3px 10px rgba(121, 77, 129, .16); }
.wall-me-fixed { color: #a2548b !important; background: #ffe8f4 !important; border-color: #f6c8df !important; }
.wall-login { color: #68557e !important; background: #fff3fa !important; border-color: #f1d2e3 !important; }
.wall-login a { color: #a63f86 !important; font-weight: 700; }

/* Waline */
.waline-wrap .wl-panel,
.waline-wrap .wl-card,
.waline-wrap .wl-comment {
  background: transparent !important;
}
.waline-wrap .wl-editor {
  min-height: 80px !important;
  color: var(--an-ink) !important;
  background: #fffafd !important;
  border: 1.5px solid #f0d7e7 !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 4px rgba(139, 99, 142, .03);
}
.waline-wrap .wl-editor:focus { border-color: #eaa6cd !important; box-shadow: 0 0 0 3px rgba(255, 154, 201, .12) !important; }
.waline-wrap .wl-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #ff82bf, #a77dff) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 14px rgba(174, 103, 212, .24);
}
.waline-wrap .wl-btn:hover { filter: brightness(1.04); }
.waline-wrap .wl-count { color: #a78db4 !important; }
.waline-wrap .wl-comment { border-bottom: 1px dashed #ecdcea !important; }
.waline-wrap .wl-nick { color: #593d6d !important; font-weight: 700 !important; }
.waline-wrap .wl-time, .waline-wrap .wl-reaction, .waline-wrap .wl-power { color: #a28fae !important; }
.waline-wrap .wl-content p { color: #4e4562 !important; }
.waline-wrap .wl-card-item { padding-top: 12px !important; padding-bottom: 12px !important; }
.waline-wrap .wl-avatar { border: 2px solid #fff !important; box-shadow: 0 3px 9px rgba(95, 68, 124, .16); }
.waline-wrap .wl-header { display: none !important; }

/* rules + footer */
.rules {
  color: #6b5b7f !important;
  background: rgba(255, 255, 255, .64) !important;
  border: 1px dashed rgba(183, 145, 196, .34) !important;
  border-radius: 15px !important;
}
.rules h3 { color: #654272 !important; }
.footer-note { color: #9482a0 !important; }
.footer-note .admin-link { color: #a54b8b !important; }

/* dock */
.app-dock {
  background: rgba(255, 251, 253, .9) !important;
  border: 1px solid rgba(255, 255, 255, .96) !important;
  box-shadow: 0 12px 32px rgba(102, 73, 137, .18) !important;
}
.app-dock-link { color: #8c7a9d !important; }
.app-dock-link.is-active {
  color: #4f2f63 !important;
  background: linear-gradient(135deg, #ffe0ef, #e9e0ff) !important;
  font-weight: 700;
}
.app-dock-link.is-active .app-dock-icon { color: #bd4f8d !important; }

/* composer */
.photo-composer { background: rgba(49, 30, 62, .54) !important; }
.photo-composer-card {
  color: var(--an-ink) !important;
  background: #fffafd !important;
  border: 1px solid #fff !important;
  box-shadow: 0 26px 70px rgba(77, 48, 94, .3) !important;
}
.photo-composer-head { color: #593a68 !important; }
.photo-composer textarea { border-color: #efd7e7 !important; background: #fff !important; }
.photo-composer textarea:focus { border-color: #e59cc9 !important; }
.photo-composer-publish { background: linear-gradient(135deg, #ff82bf, #a77dff) !important; }

@media (max-width: 420px) {
  .hero { padding: 19px 15px 18px !important; border-radius: 22px !important; }
  .hero h1 { font-size: 35px !important; }
  .hero p:not(.kicker) { font-size: 8.5px !important; line-height: 1.85 !important; }
  .photo-wall-card { padding: 13px !important; border-radius: 19px !important; }
  .wall-card { padding: 13px !important; border-radius: 19px !important; }
  .photo-wall-head h2 { font-size: 17px !important; }
  .photo-wall-upload { padding: 7px 10px !important; font-size: 8px !important; }
  .photo-wall-grid { gap: 6px !important; }
  .photo-tile { border-radius: 11px !important; }
  .photo-composer { padding: 12px !important; }
  .photo-composer-card { border-radius: 17px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .anime-petals { display: none !important; }
}

/* force the manga panel above legacy hero backgrounds */
body .shell > .hero,
body main > .hero {
  background: #ffe4f0 !important;
  background-image:
    radial-gradient(circle at 87% 22%, rgba(255,255,255,.92) 0 4%, transparent 4.5%),
    radial-gradient(circle at 82% 34%, rgba(255,255,255,.62) 0 6%, transparent 6.5%),
    linear-gradient(135deg, #ffe0ed 0%, #e8e4ff 46%, #d8efff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
body .shell > .hero::before,
body main > .hero::before {
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255,255,255,.5) 62.2% 62.8%, transparent 63%),
    linear-gradient(115deg, transparent 0 70%, rgba(255,255,255,.4) 70.2% 70.9%, transparent 71.1%) !important;
}

/* beats cinematic.css .hero:not(#home) specificity */
body .hero:not(#home) {
  padding: 23px 20px 22px !important;
  color: var(--an-ink) !important;
  background: #ffe4f0 !important;
  background-image:
    radial-gradient(circle at 87% 22%, rgba(255,255,255,.92) 0 4%, transparent 4.5%),
    radial-gradient(circle at 82% 34%, rgba(255,255,255,.62) 0 6%, transparent 6.5%),
    linear-gradient(135deg, #ffe0ed 0%, #e8e4ff 46%, #d8efff 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 48px rgba(129,93,174,.16), inset 0 1px 0 #fff !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
}
body .hero:not(#home) h1 {
  color: transparent !important;
  background: linear-gradient(110deg, #44345e 8%, #bd4f8d 45%, #617cff 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
body .hero:not(#home) p:not(.kicker) { color: var(--an-ink-soft) !important; }
@media (max-width: 420px) {
  body .hero:not(#home) { padding: 19px 15px 18px !important; border-radius: 22px !important; }
}