/* Light Field atmosphere layer for 佳嘉记事本
   Keeps the original layout and components; adds a sakura pink-white
   light field, depth and material highlights on top. */

:root,
html[data-theme="dark"] {
  --lf-pink-rgb: 255, 190, 210;
  --lf-rose-rgb: 255, 224, 234;
  --lf-blush-rgb: 255, 242, 247;
  --lf-dust-rgb: 255, 250, 252;
  --lf-beam-alpha: 0.09;
  --lf-grain-opacity: 0.038;
  --lf-vignette: rgba(2, 2, 4, 0.8);

  --rc-accent: #f3adc2;
  --rc-accent-2: #ffd9e3;
  --rc-accent-soft: rgba(243, 173, 194, 0.14);
  --rc-accent-text: #ffc6d6;
  --glow1: rgba(255, 190, 210, 0.12);
  --glow2: rgba(255, 224, 234, 0.06);
}

html[data-theme="light"] {
  --lf-pink-rgb: 214, 120, 148;
  --lf-rose-rgb: 238, 174, 192;
  --lf-blush-rgb: 250, 226, 233;
  --lf-dust-rgb: 160, 96, 118;
  --lf-beam-alpha: 0.055;
  --lf-grain-opacity: 0.022;
  --lf-vignette: rgba(222, 220, 218, 0.58);

  --rc-accent: #e79ab0;
  --rc-accent-2: #ffd1de;
  --rc-accent-soft: rgba(231, 154, 176, 0.12);
  --rc-accent-text: #b44263;
  --glow1: rgba(214, 120, 148, 0.1);
  --glow2: rgba(238, 174, 192, 0.06);
}

body,
body.rc-ui {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1000px 660px at 50% -16%, rgba(var(--lf-pink-rgb), 0.14), transparent 62%),
    radial-gradient(900px 600px at 89% 3%, rgba(var(--lf-rose-rgb), 0.075), transparent 60%),
    radial-gradient(760px 540px at 7% 38%, rgba(var(--lf-pink-rgb), 0.045), transparent 66%),
    var(--rc-bg);
  background-attachment: fixed;
}

html[data-theme="light"] body,
html[data-theme="light"] body.rc-ui {
  background:
    radial-gradient(1000px 660px at 50% -16%, rgba(var(--lf-pink-rgb), 0.1), transparent 62%),
    radial-gradient(900px 600px at 89% 3%, rgba(var(--lf-rose-rgb), 0.06), transparent 60%),
    radial-gradient(760px 540px at 7% 38%, rgba(var(--lf-pink-rgb), 0.03), transparent 66%),
    var(--rc-bg);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(125% 95% at 50% 42%, transparent 50%, var(--lf-vignette) 100%);
  opacity: 0.86;
}

.site-header,
main.container,
.flash-area {
  position: relative;
  z-index: 3;
}

/* ---------- stage ---------- */
.lf-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

#lfCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.lf-nebula {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  pointer-events: none;
}
.lf-nebula-1 {
  width: 78vmax;
  height: 78vmax;
  top: -34vmax;
  left: -20vmax;
  background: radial-gradient(circle at 46% 48%,
    rgba(var(--lf-pink-rgb), 0.14) 0%,
    rgba(var(--lf-pink-rgb), 0.055) 28%,
    transparent 68%);
  animation: lf-drift-a 36s ease-in-out infinite alternate;
}
.lf-nebula-2 {
  width: 66vmax;
  height: 66vmax;
  top: -16vmax;
  right: -24vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--lf-rose-rgb), 0.11) 0%,
    rgba(var(--lf-rose-rgb), 0.04) 34%,
    transparent 70%);
  animation: lf-drift-b 44s ease-in-out infinite alternate;
}
.lf-nebula-3 {
  width: 72vmax;
  height: 72vmax;
  bottom: -46vmax;
  left: 16vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--lf-pink-rgb), 0.045) 0%,
    rgba(var(--lf-blush-rgb), 0.025) 40%,
    transparent 72%);
  animation: lf-drift-c 50s ease-in-out infinite alternate;
}

html[data-theme="light"] .lf-nebula-1 {
  background: radial-gradient(circle at 46% 48%,
    rgba(var(--lf-pink-rgb), 0.09) 0%, rgba(var(--lf-pink-rgb), 0.03) 30%, transparent 68%);
}
html[data-theme="light"] .lf-nebula-2 {
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--lf-rose-rgb), 0.075) 0%, rgba(var(--lf-rose-rgb), 0.025) 36%, transparent 70%);
}

.lf-beam {
  position: absolute;
  top: -32%;
  left: -20%;
  width: 92vw;
  height: 112vh;
  background: conic-gradient(
    from 205deg at 22% 4%,
    transparent 0deg,
    rgba(var(--lf-blush-rgb), var(--lf-beam-alpha)) 10deg,
    rgba(var(--lf-pink-rgb), calc(var(--lf-beam-alpha) * 0.42)) 19deg,
    transparent 34deg
  );
  filter: blur(28px);
  opacity: 0.9;
  transform-origin: 20% 0%;
  animation: lf-beam-breathe 15s ease-in-out infinite alternate;
}

.lf-grain {
  position: absolute;
  inset: 0;
  opacity: var(--lf-grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
html[data-theme="light"] .lf-grain { mix-blend-mode: multiply; }

.lf-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(125% 100% at 50% 44%, transparent 48%, rgba(2, 2, 4, 0.62) 100%),
    linear-gradient(180deg, rgba(2, 2, 4, 0.22), transparent 20%, transparent 82%, rgba(2, 2, 4, 0.32));
}
html[data-theme="light"] .lf-vignette {
  background:
    radial-gradient(125% 100% at 50% 44%, transparent 50%, rgba(210, 208, 206, 0.5) 100%),
    linear-gradient(180deg, rgba(230, 228, 225, 0.42), transparent 20%, transparent 82%, rgba(216, 214, 212, 0.42));
}

.lf-cursor {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    440px circle at var(--lf-cx, 50%) var(--lf-cy, 30%),
    rgba(var(--lf-blush-rgb), 0.09),
    rgba(var(--lf-pink-rgb), 0.035) 38%,
    transparent 68%
  );
  mix-blend-mode: screen;
  transition: opacity 0.55s ease;
}
html.lf-pointer .lf-cursor { opacity: 1; }
html[data-theme="light"] .lf-cursor {
  background: radial-gradient(
    420px circle at var(--lf-cx, 50%) var(--lf-cy, 30%),
    rgba(var(--lf-pink-rgb), 0.07),
    transparent 66%
  );
  mix-blend-mode: multiply;
}

@keyframes lf-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(7vw, 5vh, 0) scale(1.12); }
}
@keyframes lf-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to { transform: translate3d(-6vw, 8vh, 0) scale(0.96); }
}
@keyframes lf-drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.98); }
  to { transform: translate3d(5vw, -6vh, 0) scale(1.1); }
}
@keyframes lf-beam-breathe {
  from { opacity: 0.52; transform: rotate(-1.4deg) scaleY(0.96); }
  to { opacity: 1; transform: rotate(1.4deg) scaleY(1.06); }
}
@keyframes lf-halo {
  from { opacity: 0.58; transform: translateX(-50%) scale(0.95); }
  to { opacity: 1; transform: translateX(-50%) scale(1.07); }
}

/* ---------- existing panels get light, not new colors ---------- */
.header-inner {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 10px 30px -14px rgba(0, 0, 0, 0.75),
    0 0 54px -34px rgba(var(--lf-pink-rgb), 0.45);
}
.header-inner::before {
  content: "";
  position: absolute;
  inset: 0 14% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--lf-blush-rgb), 0.5), transparent);
  opacity: 0.65;
  pointer-events: none;
}
.site-header.is-scrolled .header-inner {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 20px 56px -26px rgba(0, 0, 0, 0.88),
    0 0 64px -30px rgba(var(--lf-pink-rgb), 0.4);
}

.page-head::before {
  content: "";
  position: absolute;
  left: 28%;
  top: -92px;
  width: min(720px, 92vw);
  height: 330px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 40% 44%, rgba(var(--lf-pink-rgb), 0.2), transparent 60%),
    radial-gradient(ellipse at 66% 54%, rgba(var(--lf-rose-rgb), 0.13), transparent 66%),
    radial-gradient(ellipse at 52% 70%, rgba(var(--lf-blush-rgb), 0.06), transparent 70%);
  filter: blur(20px);
  opacity: 0.9;
  pointer-events: none;
  animation: lf-halo 9s ease-in-out infinite alternate;
}
html[data-theme="light"] .page-head::before { opacity: 0.62; }
.page-head > * { position: relative; z-index: 1; }

.search-box input:focus,
.search-box input[type="text"]:focus {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 0 0 3px var(--rc-accent-soft),
    0 0 46px -14px rgba(var(--lf-pink-rgb), 0.55);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.visitor-search input[type="text"]:focus {
  box-shadow:
    0 0 0 3px var(--rc-accent-soft),
    0 0 38px -16px rgba(var(--lf-pink-rgb), 0.5);
}

.note-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 26px 70px -38px rgba(0, 0, 0, 0.92);
}
.note-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 40px 96px -34px rgba(0, 0, 0, 0.96),
    0 0 62px -26px rgba(var(--lf-pink-rgb), 0.38);
}
.note-card::before {
  background:
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
      rgba(var(--lf-pink-rgb), 0.17), transparent 62%),
    radial-gradient(240px circle at calc(100% - var(--mx, 50%)) calc(100% - var(--my, 0%)),
      rgba(var(--lf-rose-rgb), 0.07), transparent 70%);
}
.note-card::after {
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--lf-blush-rgb), 0.16),
    transparent 64%
  );
  mix-blend-mode: screen;
}
html[data-theme="light"] .note-card::after {
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.55),
    transparent 64%
  );
}

.detail-card,
.comments-section,
.profile-card,
.poll-card,
.probe-card,
.stat-box,
.editor-wrap,
.related-card,
.toc,
.table-scroll,
.modal-card,
.admin-toolbar,
.stats-row {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    var(--shadow-sm),
    0 0 70px -48px rgba(var(--lf-pink-rgb), 0.28);
}
.detail-card::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--lf-blush-rgb), 0.42), transparent);
  pointer-events: none;
}
.detail-cover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 30px 80px -44px rgba(0, 0, 0, 0.95),
    0 0 52px -34px rgba(var(--lf-pink-rgb), 0.25);
}
.detail-title {
  filter: drop-shadow(0 0 28px rgba(var(--lf-pink-rgb), 0.14));
}
.detail-content img {
  box-shadow: 0 24px 60px -38px rgba(0, 0, 0, 0.9);
}
.reading-progress span {
  box-shadow: 0 0 18px rgba(var(--lf-pink-rgb), 0.65);
}

.auth-wrap {
  position: relative;
  isolation: isolate;
}
.auth-wrap::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(620px, 94vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--lf-pink-rgb), 0.16), transparent 56%),
    radial-gradient(circle at 43% 58%, rgba(var(--lf-rose-rgb), 0.1), transparent 64%);
  filter: blur(12px);
  animation: lf-portal 11s ease-in-out infinite alternate;
}
.auth-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(470px, 86vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(var(--lf-blush-rgb), 0.12);
  box-shadow:
    0 0 70px rgba(var(--lf-pink-rgb), 0.08),
    0 0 120px rgba(var(--lf-rose-rgb), 0.04) inset;
  animation: lf-ring 18s linear infinite;
}
.auth-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 40px 110px -48px rgba(0, 0, 0, 0.95),
    0 0 70px -36px rgba(var(--lf-pink-rgb), 0.32);
}
@keyframes lf-portal {
  from { opacity: 0.64; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}
@keyframes lf-ring {
  from { transform: rotate(0deg) scale(0.99); }
  to { transform: rotate(360deg) scale(1.01); }
}

.btn:not(.btn-ghost):not(.btn-danger) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 12px 34px -16px rgba(var(--lf-pink-rgb), 0.68);
}
.btn:not(.btn-ghost):not(.btn-danger):hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 18px 44px -16px rgba(var(--lf-pink-rgb), 0.82),
    0 0 34px -14px rgba(var(--lf-pink-rgb), 0.55);
}
.btn-ghost:hover {
  box-shadow: 0 0 26px -16px rgba(var(--lf-pink-rgb), 0.5);
}

.ui-dialog,
.rc-palette {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 50px 140px -52px rgba(0, 0, 0, 1),
    0 0 80px -44px rgba(var(--lf-pink-rgb), 0.4);
}
.ui-dialog::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--lf-blush-rgb), 0.4), transparent);
  pointer-events: none;
}

.related-card:hover,
.profile-card:hover,
.stat-box:hover,
.probe-card:hover,
.poll-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    var(--shadow-sm),
    0 0 54px -30px rgba(var(--lf-pink-rgb), 0.28);
}



/* remove mobile tap highlight / default focus frame on cards */
html,
a,
button,
.note-card,
.related-card,
.profile-card,
.stat-box,
.probe-card {
  -webkit-tap-highlight-color: transparent;
}

.note-card:focus,
.related-card:focus,
.profile-card:focus,
.stat-box:focus,
.probe-card:focus {
  outline: none;
}
.note-card:focus-visible,
.related-card:focus-visible,
.profile-card:focus-visible,
.stat-box:focus-visible,
.probe-card:focus-visible {
  outline: 2px solid rgba(var(--lf-pink-rgb), 0.55);
  outline-offset: 3px;
}

@media (hover: none) {
  .note-card:active,
  .related-card:active {
    transform: scale(0.994);
    border-color: rgba(var(--lf-pink-rgb), 0.38);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.045) inset,
      0 18px 44px -30px rgba(0, 0, 0, 0.9),
      0 0 40px -22px rgba(var(--lf-pink-rgb), 0.38);
  }
}

/* pointer-driven depth, desktop only */
@media (hover: hover) and (pointer: fine) {
  .note-card,
  .related-card,
  .stat-box,
  .probe-card {
    transform: perspective(1000px) rotateX(var(--lf-rx, 0deg)) rotateY(var(--lf-ry, 0deg));
    transform-style: preserve-3d;
    transition:
      transform 0.5s var(--rc-spring),
      border-color 0.3s var(--rc-ease),
      box-shadow 0.45s var(--rc-ease),
      background-color 0.35s var(--rc-ease);
  }
  .note-card:hover {
    transform: perspective(1000px) translate3d(0, -4px, 0)
      rotateX(var(--lf-rx, 0deg)) rotateY(var(--lf-ry, 0deg)) scale(1.004);
  }
  .related-card:hover,
  .stat-box:hover,
  .probe-card:hover {
    transform: perspective(1000px) translate3d(0, -2px, 0)
      rotateX(var(--lf-rx, 0deg)) rotateY(var(--lf-ry, 0deg));
  }
}


/* ---------- sakura-white accent cleanup ---------- */
.brand-logo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 6px 18px -8px rgba(243, 173, 194, 0.55);
}
.gradient-text {
  background: linear-gradient(100deg, #ffffff 6%, #fff0f5 38%, #ffc6d6 72%, #f3adc2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .gradient-text {
  background: linear-gradient(100deg, #2a1620 6%, #8f3f58 42%, #c96d88 74%, #e6a6b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.search-box input:focus,
.search-box input[type="text"]:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.visitor-search input[type="text"]:focus,
.ui-dialog-input:focus,
.comment-form textarea:focus {
  border-color: rgba(255, 190, 210, 0.55);
}
.btn:not(.btn-ghost):not(.btn-danger) {
  background: linear-gradient(180deg, #ffd9e3, #f3adc2);
  border-color: rgba(255, 255, 255, 0.28);
  color: #2a1620;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 26px -12px rgba(243, 173, 194, 0.7);
}
.btn:not(.btn-ghost):not(.btn-danger):hover {
  color: #2a1620;
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62) inset,
    0 16px 34px -12px rgba(243, 173, 194, 0.82),
    0 0 34px -14px rgba(255, 190, 210, 0.55);
}
.msg-badge {
  color: #2a1620;
  background: linear-gradient(135deg, #ffd9e3, #f3adc2);
  box-shadow: 0 0 16px -4px rgba(243, 173, 194, 0.7);
}
.pagination .current {
  color: #2a1620;
  border-color: transparent;
  background: linear-gradient(135deg, #ffd9e3, #f3adc2);
  box-shadow: 0 8px 24px -12px rgba(243, 173, 194, 0.75);
}
.na-play {
  color: #2a1620;
  background: linear-gradient(135deg, #ffd9e3, #f3adc2);
  box-shadow: 0 8px 18px -10px rgba(243, 173, 194, 0.8);
}

/* ---------- responsive / reduced motion ---------- */
@media (max-width: 820px) {
  body,
  body.rc-ui { background-attachment: scroll; }

  /* lighter static light field on phones: no continuous canvas / blur work */
  .lf-nebula-1 {
    width: 96vmax; height: 96vmax; top: -40vmax; left: -30vmax;
    animation: none; will-change: auto;
  }
  .lf-nebula-2 {
    width: 82vmax; height: 82vmax; top: -22vmax; right: -34vmax;
    animation: none; will-change: auto;
  }
  .lf-nebula-3 { display: none; }
  .lf-beam {
    width: 120vw; height: 88vh; opacity: 0.3;
    filter: none; animation: none;
  }
  .lf-grain,
  .lf-vignette,
  .lf-cursor { display: none; }
  .page-head::before { filter: none; animation: none; opacity: 0.66; }
  .header-inner {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
  .auth-card {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .auth-wrap::before { width: 112vw; }
  .auth-wrap::after { width: 88vw; }
}

@media (hover: none) {
  .note-card:hover,
  .related-card:hover,
  .profile-card:hover,
  .stat-box:hover,
  .probe-card:hover,
  .poll-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-nebula,
  .lf-beam,
  .auth-wrap::before,
  .auth-wrap::after,
  .page-head::before {
    animation: none !important;
  }
  .lf-cursor { display: none !important; }
  #lfCanvas { opacity: 0.5; }
}

html.lf-static .lf-cursor,
html.lf-static .lf-grain { display: none; }
html.lf-static #lfCanvas { opacity: 0.42; }