/* Theme completion: shared surfaces and the five lunar atmosphere scenes. */
body {
  --accent-strong: color-mix(in srgb, var(--accent) 83%, white);
  --accent-border: color-mix(in srgb, var(--accent) 42%, var(--line));
  --surface-glass: color-mix(in srgb, var(--panel) var(--panel-fill, 75%), transparent);
  --surface-deep: color-mix(in srgb, var(--bg) 74%, var(--panel));
  --space-highlight: color-mix(in srgb, var(--logo-light) 82%, white);
}

/* Tie controls, navigation, content cards, and overlays to the active palette. */
:focus-visible { outline-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.header { background: color-mix(in srgb, var(--bg) 90%, transparent); border-color: var(--line); }
.header nav a, .header-actions > a { color: var(--muted); }
.header nav a:hover, .header nav a.active, .header-actions > a:hover, .header-actions > a.active { color: var(--text); }
.header nav a.active::after { background: var(--accent); box-shadow: 0 0 16px var(--glow); }
.profile .avatar, .social-avatar { color: var(--accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 26%, var(--raised)), var(--panel)); border-color: var(--accent-border); }
.button, button, .icon-button, .filters button, .tabs button { color: var(--text); border-color: var(--line); }
.button:hover, button:hover, .filters button:hover, .tabs button:hover { border-color: var(--accent-border); }
.button.primary, .request-accept, .social-primary, .comment-submit { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.button.primary:hover, .request-accept:hover, .social-primary:hover, .comment-submit:hover { background: var(--accent-strong); }
.filters button[aria-pressed="true"], .tabs button[aria-pressed="true"], .account-tabs button[aria-selected="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: var(--accent-border); }
input, select, textarea, .search-form input, .member-field input, .chat-compose textarea, .comment-compose textarea, .comment-reply-compose textarea { color: var(--text); background-color: var(--surface-deep); border-color: var(--line); }
input::placeholder, textarea::placeholder { color: var(--muted); }
.panel, .account-tabs, .account-tabs-layout > [role="tabpanel"], .settings-identity, .community-lounge, .title-comment, .profile-history, .profile-comment-history, .profile-watch-card, .profile-comment-card, .notification-panel, .share-dialog { color: var(--text); border-color: var(--line); background-color: var(--surface-glass); }
.panel h2, .panel h3, .section-head h2, .setting label, .comment-author, .social-room-link, .social-dm-link, .social-message-body > p, .social-friend-link strong, .notification-item strong { color: var(--text); }
.panel p, .setting small, .metadata, .card .card-meta, .muted, footer, footer small, .comment-meta time, .comment-author time, .notification-item small, .fine-print { color: var(--muted); }
.poster { background: linear-gradient(145deg, var(--raised), var(--panel)); border-color: var(--line); }
.card:hover .poster, .profile-watch-card:hover > img, .profile-comment-card:hover { border-color: var(--accent-border); }
.hero::before, .detail::before { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 96%, transparent), color-mix(in srgb, var(--bg) 70%, transparent) 48%, transparent); }
.hero-copy .eyebrow, .eyebrow, .settings-nav-icon, .settings-sync, .profile-count, .metadata .rating { color: var(--accent); }
.social-workspace { color: var(--text); background: color-mix(in srgb, var(--panel) 86%, var(--bg)); border-color: var(--line); }
.social-sidebar, .social-friends-panel { background: var(--surface-deep); border-color: var(--line); }
.social-conversation { background: var(--panel); border-color: var(--line); }
.social-compose, .comment-compose { background: color-mix(in srgb, var(--bg) 55%, var(--panel)); border-color: var(--line); }
.social-room-link.active, .social-dm-link.active, .social-request, .comment-actions button:hover, .notification-item:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--panel)); }
.social-room-icon, .social-shared-title { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border-color: var(--accent-border); }
.social-live-badge { color: var(--accent); border-color: var(--accent-border); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.comment-body > p, .profile-comment-card p { color: var(--text); }
.comment-replies { border-left-color: var(--accent-border); }
.title-comment-reply { color: var(--text); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); border-color: var(--line); }
.public-profile-hero.has-image-banner::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 34%, transparent) 72%), linear-gradient(0deg, color-mix(in srgb, var(--bg) 75%, transparent), transparent 76%); }
.banner-choice[aria-pressed="true"], .avatar-choice[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.notification-bell { color: var(--accent); border-color: var(--line); background: var(--surface-glass); }
.notification-bell:hover, .notification-bell[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); border-color: var(--accent-border); }
.notification-count { color: var(--bg); background: var(--accent); border-color: var(--bg); }
.notification-panel { box-shadow: 0 22px 75px color-mix(in srgb, black 68%, transparent); backdrop-filter: blur(22px); }
dialog, #toast, .toast { color: var(--text); background: var(--panel); border-color: var(--accent-border); }
dialog::backdrop { background: color-mix(in srgb, var(--bg) 84%, transparent); }
::selection { color: var(--bg); background: var(--accent); }

/* Lunar scenes are atmospheric illustrations, layered beneath the site UI. */
.space { isolation: isolate; overflow: hidden; background: var(--bg); }
.space::before, .space::after, body[data-background] .space::before, body[data-background] .space::after { display: none; }
.lunar-scenes, .lunar-scene { position: absolute; inset: 0; pointer-events: none; }
.lunar-scenes { z-index: 0; overflow: hidden; }
.lunar-scene { overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s ease; }
.lunar-scene { --scene-a: var(--accent); --scene-b: var(--logo-deep); }
body[data-background="moonrise"] .lunar-scene[data-scene="moonrise"],
body[data-background="eclipse"] .lunar-scene[data-scene="eclipse"],
body[data-background="aurora"] .lunar-scene[data-scene="aurora"],
body[data-background="craters"] .lunar-scene[data-scene="craters"],
body[data-background="deep-space"] .lunar-scene[data-scene="deep-space"] { opacity: 1; visibility: visible; }
.scene-starfield { position: absolute; inset: 0; opacity: .8; background-image: radial-gradient(1.5px 1.5px at 9% 19%,var(--space-highlight) 70%,transparent),radial-gradient(1px 1px at 18% 61%,var(--scene-a) 70%,transparent),radial-gradient(2px 2px at 30% 11%,var(--space-highlight) 65%,transparent),radial-gradient(1px 1px at 41% 37%,var(--scene-b) 70%,transparent),radial-gradient(1.5px 1.5px at 53% 17%,var(--space-highlight) 70%,transparent),radial-gradient(1px 1px at 67% 48%,var(--scene-a) 70%,transparent),radial-gradient(2px 2px at 77% 14%,var(--space-highlight) 65%,transparent),radial-gradient(1px 1px at 89% 38%,var(--scene-b) 70%,transparent),radial-gradient(1px 1px at 94% 74%,var(--space-highlight) 70%,transparent); background-size: 100% 100%; filter: drop-shadow(0 0 5px var(--scene-a)); animation: lunar-twinkle 5s ease-in-out infinite alternate; }
.scene-object, .scene-orbit { position: absolute; display: block; }
.scene-object { border-radius: 50%; }
.scene-orbit { border: 1px solid color-mix(in srgb, var(--scene-a) 50%, transparent); border-radius: 50%; }
.lunar-scene[data-scene="moonrise"] { background: radial-gradient(ellipse at 74% 60%,color-mix(in srgb,var(--scene-a) 14%,transparent),transparent 25%),radial-gradient(ellipse at 18% 75%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 35%); }
.lunar-scene[data-scene="moonrise"] .scene-object { width: clamp(190px,30vw,440px); aspect-ratio: 1; top: 16%; right: 11%; background: radial-gradient(circle at 35% 27%,#ffffff34 0 2%,transparent 3%),radial-gradient(ellipse at 65% 72%,#10141e45 0 5%,transparent 6%),radial-gradient(ellipse at 28% 63%,#10141e38 0 7%,transparent 8%),radial-gradient(circle at 34% 29%,color-mix(in srgb,var(--scene-a) 30%,#d9e6ff),color-mix(in srgb,var(--panel) 40%,#77889e) 70%,#18202e); box-shadow: inset -28px -22px 55px #080c18aa, 0 0 90px color-mix(in srgb,var(--scene-a) 35%,transparent); animation: moon-drift 18s ease-in-out infinite alternate; }
.lunar-scene[data-scene="moonrise"] .scene-orbit { width: 48vw; height: 16vw; top: 26%; right: 4%; transform: rotate(-24deg); opacity: .45; }
.lunar-scene[data-scene="eclipse"] { background: radial-gradient(circle at 75% 38%,color-mix(in srgb,var(--scene-a) 22%,transparent),transparent 22%),radial-gradient(ellipse at 73% 42%,#fff2 0 1px,transparent 2px); }
.lunar-scene[data-scene="eclipse"] .scene-object { width: clamp(210px,32vw,480px); aspect-ratio: 1; top: 13%; right: 12%; background: radial-gradient(circle at 50% 50%,#090b13 0 56%,transparent 57%),conic-gradient(from 15deg,transparent 0 7deg,var(--scene-a) 12deg,#fff9 17deg,var(--scene-b) 20deg,transparent 29deg 92%,var(--scene-a) 100deg,transparent 110deg 360deg); filter: drop-shadow(0 0 28px color-mix(in srgb,var(--scene-a) 56%,transparent)); animation: eclipse-pulse 6s ease-in-out infinite alternate; }
.lunar-scene[data-scene="eclipse"] .scene-orbit { width: 56vw; height: 25vw; top: 19%; right: 2%; transform: rotate(18deg); border-style: dashed; opacity: .35; }
.lunar-scene[data-scene="aurora"] { background: radial-gradient(ellipse at 76% 45%,color-mix(in srgb,var(--scene-a) 18%,transparent),transparent 40%),linear-gradient(180deg,transparent 60%,color-mix(in srgb,var(--scene-b) 14%,var(--bg))); }
.lunar-scene[data-scene="aurora"] .scene-object { inset: 17% -6% 28%; border-radius: 0; background: repeating-linear-gradient(168deg,transparent 0 12%,color-mix(in srgb,var(--scene-a) 16%,transparent) 16% 17%,transparent 23% 29%),repeating-linear-gradient(193deg,transparent 0 18%,color-mix(in srgb,var(--scene-b) 14%,transparent) 21% 22%,transparent 28% 36%); filter: blur(18px); transform: skewY(-8deg); animation: aurora-wave 10s ease-in-out infinite alternate; }
.lunar-scene[data-scene="aurora"] .scene-orbit { width: 44vw; height: 12vw; top: 32%; right: 8%; transform: rotate(-14deg); box-shadow: 0 0 40px color-mix(in srgb,var(--scene-a) 20%,transparent); }
.lunar-scene[data-scene="craters"] { background: radial-gradient(ellipse at 50% 100%,color-mix(in srgb,var(--scene-b) 18%,transparent),transparent 48%); }
.lunar-scene[data-scene="craters"] .scene-object { width: 150vw; height: 42vw; max-height: 520px; left: -25%; bottom: -30vw; background: radial-gradient(ellipse at 20% 23%,transparent 0 4%,#060a12aa 4.2% 5%,#ffffff12 5.2% 6%,transparent 6.2%),radial-gradient(ellipse at 44% 32%,transparent 0 6%,#060a12a8 6.2% 7.1%,#ffffff15 7.3% 8.1%,transparent 8.3%),radial-gradient(ellipse at 71% 20%,transparent 0 5%,#060a12aa 5.2% 6%,#ffffff12 6.2% 7%,transparent 7.2%),radial-gradient(ellipse at 83% 54%,transparent 0 8%,#060a12aa 8.2% 9.2%,#ffffff12 9.4% 10.2%,transparent 10.4%),linear-gradient(160deg,color-mix(in srgb,var(--scene-b) 28%,#454b58),color-mix(in srgb,var(--panel) 65%,#202a39) 60%,var(--bg)); box-shadow: 0 -25px 100px color-mix(in srgb,var(--scene-b) 18%,transparent); }
.lunar-scene[data-scene="craters"] .scene-orbit { width: 25vw; height: 25vw; top: 14%; right: 18%; border-color: color-mix(in srgb,var(--scene-a) 24%,transparent); }
.lunar-scene[data-scene="deep-space"] { background: radial-gradient(ellipse at 27% 54%,color-mix(in srgb,var(--scene-a) 16%,transparent),transparent 32%),radial-gradient(ellipse at 42% 51%,color-mix(in srgb,var(--scene-b) 15%,transparent),transparent 38%); }
.lunar-scene[data-scene="deep-space"] .scene-object { width: clamp(150px,22vw,310px); aspect-ratio: 1; top: 24%; right: 18%; background: radial-gradient(circle at 30% 25%,#fff7,transparent 3%),radial-gradient(circle at 35% 32%,color-mix(in srgb,var(--scene-a) 65%,#4b326b),color-mix(in srgb,var(--panel) 72%,#18283b) 68%,#090c15); box-shadow: inset -25px -22px 50px #02050acc,0 0 70px color-mix(in srgb,var(--scene-b) 28%,transparent); }
.lunar-scene[data-scene="deep-space"] .scene-orbit { width: 38vw; height: 13vw; top: 31%; right: 10%; transform: rotate(-24deg); border-width: 2px; border-color: color-mix(in srgb,var(--scene-a) 60%,transparent); box-shadow: 0 0 14px color-mix(in srgb,var(--scene-a) 28%,transparent); }
.stars { z-index: 1; opacity: .58; }
.shooting-star { z-index: 2; }
@keyframes lunar-twinkle { from { opacity: .45; } to { opacity: .95; } }
@keyframes moon-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-10px,8px,0); } }
@keyframes eclipse-pulse { from { filter: drop-shadow(0 0 19px color-mix(in srgb,var(--scene-a) 43%,transparent)); } to { filter: drop-shadow(0 0 38px color-mix(in srgb,var(--scene-b) 62%,transparent)); } }
@keyframes aurora-wave { from { transform: skewY(-8deg) translateX(-2%); opacity: .68; } to { transform: skewY(-3deg) translateX(3%); opacity: 1; } }
@media (max-width: 700px) {
  .lunar-scene[data-scene="moonrise"] .scene-object, .lunar-scene[data-scene="eclipse"] .scene-object { top: 25%; right: -22%; opacity: .7; }
  .lunar-scene[data-scene="aurora"] .scene-object { inset: 20% -30% 37%; }
  .lunar-scene[data-scene="craters"] .scene-object { width: 190vw; height: 70vw; left: -45%; bottom: -45vw; }
  .lunar-scene[data-scene="deep-space"] .scene-object { top: 30%; right: -9%; }
  .scene-orbit { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .lunar-scene, .scene-starfield, .scene-object, .shooting-star { animation: none !important; transition: none !important; }
}