:root {
  --bg:#dfe6ef;
  --panel:#fbfdff;
  --ink:#141c29;
  --muted:#5f6d80;
  --line:#d2dbe8;
  --accent:#2374e1;
  --accent-strong:#155ec4;
  --accent-2:#12a594;
  --danger:#c84054;
  --category-accent:#2374e1;
  --category-accent-strong:#155ec4;
  --category-accent-rgb:35,116,225;
  --category-soft:#e8f1ff;
  --category-icon-filter:invert(42%) sepia(89%) saturate(1812%) hue-rotate(199deg) brightness(91%) contrast(94%);
  --category-neutral-filter:invert(50%) sepia(12%) saturate(523%) hue-rotate(178deg) brightness(91%) contrast(89%);
  --category-neutral-glow-rgb:119,131,152;
  --dark:#101318;
  --button-shadow:0 8px 18px #18243a14;
  --glass-bg:linear-gradient(135deg,#ffffff42,#ffffff18);
  --glass-border:#ffffff55;
  --glass-shadow:0 16px 40px #00000035,inset 0 1px 0 #ffffff7a,inset 0 -1px 0 #ffffff18;
  --shell-bg:#d8e1ec;
  --stage-bg:#edf2f7;
  --surface-bg:#dfe7f0;
  --sidebar-bg:#f8fbff;
  --sidebar-ink:#18212f;
  --sidebar-muted:#647084;
  --sidebar-line:#d5deeb;
  --sidebar-hover:#eaf1f9;
  --sidebar-control:#eef3f9;
  --header-bg:linear-gradient(100deg,#f9fcff 0%,#eef4fb 52%,#e7f5f3 100%);
  --header-line:#ccd8e6;
  --header-ink:#18212f;
  --header-muted:#617083;
  --panel-shadow:0 14px 34px #18243a18,inset 0 1px 0 #ffffffd8;
  --sidebar-width:280px;
  --car-thumbnail-width:128px;
  --car-thumbnail-height:80px;
  color-scheme:light;
  background-color:#f8fafc;
}
html[data-theme="dark"] {
  --bg:#0f141b;
  --panel:#151a21;
  --ink:#edf3fb;
  --muted:#9aa7b8;
  --line:#2d3747;
  --shell-bg:#151a21;
  --stage-bg:#10151d;
  --surface-bg:#20252d;
  --sidebar-bg:#151a21;
  --sidebar-ink:#ffffff;
  --sidebar-muted:#aab4c3;
  --sidebar-line:#ffffff18;
  --sidebar-hover:#ffffff0a;
  --sidebar-control:#ffffff0c;
  --header-bg:radial-gradient(circle at 22% 0%, #2f80ed26 0, transparent 34%),radial-gradient(circle at 88% 12%, #18a99924 0, transparent 30%),linear-gradient(100deg,#111827 0%,#172131 48%,#10242d 100%);
  --header-line:#2d3747;
  --header-ink:#f8fbff;
  --header-muted:#aebbd0;
  --panel-shadow:inset 0 1px 0 #ffffff12,0 10px 30px #05070a2f;
  --category-accent:#78adff;
  --category-accent-strong:#a8caff;
  --category-soft:#2374e126;
  --category-icon-filter:invert(71%) sepia(35%) saturate(1269%) hue-rotate(185deg) brightness(101%) contrast(103%);
  --category-neutral-filter:invert(80%) sepia(9%) saturate(470%) hue-rotate(178deg) brightness(94%) contrast(89%);
  --category-neutral-glow-rgb:190,202,219;
  color-scheme:dark;
  background-color:#0f141b;
}
html[data-brand="ts"] {
  --category-accent:#12a594;
  --category-accent-strong:#087e77;
  --category-accent-rgb:18,165,148;
  --category-soft:#e4f8f4;
  --category-icon-filter:invert(51%) sepia(52%) saturate(797%) hue-rotate(125deg) brightness(88%) contrast(91%);
}
html[data-theme="dark"][data-brand="ts"] {
  --category-accent:#4ad7c3;
  --category-accent-strong:#8ce8da;
  --category-soft:#12a59426;
  --category-icon-filter:invert(77%) sepia(48%) saturate(590%) hue-rotate(117deg) brightness(91%) contrast(90%);
}
* { box-sizing:border-box; }
[hidden],.hidden { display:none!important; }
body {
  margin:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
html.fullscreen-exit-viewport-lock body,
html.fullscreen-exit-viewport-lock .app-shell {
  height:var(--fullscreen-exit-viewport-height)!important;
}
html.fullscreen-background-isolated .app-shell {
  content-visibility:hidden;
  visibility:hidden;
}
html.fullscreen-transition-critical .viewer-native-fullscreen-ripple,
html.fullscreen-transition-critical .viewer-native-fullscreen-ripple::before,
html.fullscreen-transition-critical .viewer-native-fullscreen-ripple::after,
html.fullscreen-transition-critical .viewer-close,
html.fullscreen-transition-critical .viewer-clock,
html.fullscreen-transition-critical .video-viewer.open.is-video-loading::after,
html.fullscreen-transition-critical .fullscreen-media-strip {
  animation:none!important;
  transition:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
html.fullscreen-transition-critical .viewer-native-fullscreen-ripple,
html.fullscreen-transition-critical .viewer-close,
html.fullscreen-transition-critical .viewer-clock,
html.fullscreen-transition-critical .video-viewer.open.is-video-loading::after,
html.fullscreen-transition-critical .fullscreen-media-strip {
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.fullscreen-transition-critical .viewer-image-stage {
  animation-play-state:paused!important;
}
.startup-loader {
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  color:#e5e7eb;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(135deg,#050508 0%,#101827 56%,#050508 100%);
  transition:opacity .65s ease,visibility .65s ease;
}
.startup-loader.is-hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.startup-reminder-mask {
  --reminder-primary:#2374e1;
  --reminder-secondary:#7c3aed;
  --reminder-primary-rgb:35,116,225;
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 32%,rgba(var(--reminder-primary-rgb),.17),transparent 38%),
    linear-gradient(145deg,rgba(8,15,28,.46),rgba(4,9,18,.62));
  backdrop-filter:blur(11px) saturate(1.08);
  -webkit-backdrop-filter:blur(11px) saturate(1.08);
  animation:startupReminderMaskIn .34s ease-out both;
  isolation:isolate;
}
html[data-brand="ts"] .startup-reminder-mask {
  --reminder-primary:#12a594;
  --reminder-secondary:#22c7b5;
  --reminder-primary-rgb:18,165,148;
}
.startup-reminder-mask::before,.startup-reminder-mask::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:min(68vw,760px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--reminder-primary-rgb),.12),transparent 70%);
  filter:blur(14px);
  pointer-events:none;
  animation:startupReminderAura 7s ease-in-out infinite alternate;
}
.startup-reminder-mask::before { top:-44%;left:-22%; }
.startup-reminder-mask::after { right:-25%;bottom:-52%;animation-delay:-3.5s; }
.startup-reminder-mask[data-reminder-type="excited"] {
  background:
    radial-gradient(circle at 50% 30%,rgba(var(--reminder-primary-rgb),.25),transparent 40%),
    radial-gradient(circle at 18% 80%,rgba(245,158,11,.1),transparent 34%),
    linear-gradient(145deg,rgba(8,15,28,.48),rgba(4,9,18,.66));
}
.startup-reminder-mask.is-closing { animation:startupReminderMaskOut .25s ease-in both; }
.startup-reminder-mask.is-closing .startup-reminder-card { animation:startupReminderCardOut .25s ease-in both; }
.startup-reminder-effects { position:absolute;z-index:4;inset:0;overflow:hidden;pointer-events:none; }
.startup-reminder-confetti {
  position:absolute;
  top:50%;
  left:50%;
  width:var(--confetti-width);
  height:var(--confetti-height);
  border-radius:var(--confetti-radius);
  opacity:0;
  background:var(--confetti-color);
  box-shadow:0 0 8px rgba(255,255,255,.35);
  transform:translate(-50%,-50%) rotate(0deg) scale(.2);
  animation:startupReminderConfettiBurst var(--confetti-duration) cubic-bezier(.12,.68,.18,1) var(--confetti-delay) forwards;
  will-change:transform,opacity;
}
.startup-reminder-bookmark-star {
  position:absolute;
  top:50%;
  left:50%;
  color:#fbbf24;
  font-size:58px;
  font-weight:900;
  line-height:1;
  opacity:0;
  text-shadow:0 0 10px rgba(251,191,36,.55),0 0 24px rgba(255,255,255,.48);
  transform:translate(-50%,-50%) scale(.7) rotate(-12deg);
  animation:startupReminderBookmarkStar 4.2s .1s cubic-bezier(.2,.78,.24,1) infinite;
  will-change:transform,opacity;
}
.startup-reminder-card {
  position:relative;
  z-index:1;
  width:min(680px,100%);
  max-height:calc(100dvh - 40px);
  padding:clamp(28px,4.5vw,42px);
  overflow:auto;
  border:1px solid rgba(255,255,255,.62);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(242,247,255,.76));
  color:#182235;
  text-align:center;
  box-shadow:0 22px 62px rgba(1,8,20,.27),0 0 0 1px rgba(var(--reminder-primary-rgb),.07),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(1.08);
  -webkit-backdrop-filter:blur(24px) saturate(1.08);
  animation:startupReminderCardIn .58s cubic-bezier(.2,.9,.25,1.12) both;
}
.startup-reminder-card::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg,var(--reminder-primary),var(--reminder-secondary),var(--reminder-primary));
  background-size:200% 100%;
  animation:startupReminderAccent 4s linear infinite;
}
.startup-reminder-card::after {
  content:"";
  position:absolute;
  top:-120px;
  left:50%;
  width:360px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--reminder-primary-rgb),.15),transparent 68%);
  transform:translateX(-50%);
  pointer-events:none;
}
html[data-theme="dark"] .startup-reminder-card {
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(145deg,rgba(29,38,53,.82),rgba(16,23,35,.76));
  color:#f4f8ff;
  box-shadow:0 24px 70px rgba(0,0,0,.44),0 0 0 1px rgba(var(--reminder-primary-rgb),.12),inset 0 1px 0 rgba(255,255,255,.12);
}
.startup-reminder-mask[data-reminder-type="excited"] .startup-reminder-card {
  box-shadow:0 24px 72px rgba(1,8,20,.34),0 0 0 1px rgba(var(--reminder-primary-rgb),.13),0 0 42px rgba(var(--reminder-primary-rgb),.11),inset 0 1px 0 rgba(255,255,255,.9);
}
.startup-reminder-mask[data-reminder-type="excited"] .startup-reminder-badge {
  animation:startupReminderBadgeIn .62s .12s cubic-bezier(.2,.9,.25,1.25) both,startupReminderExcitedBadge 1.8s 1s ease-in-out 2;
}
.startup-reminder-mask[data-reminder-context=bookmark-welcome] .startup-reminder-badge {
  width:78px;
  height:78px;
  border-radius:50%;
  color:#fff4bd;
  animation:startupReminderBadgeIn .62s .12s cubic-bezier(.2,.9,.25,1.25) both,startupReminderBookmarkBadge 2.2s .9s ease-in-out infinite;
}
.startup-reminder-mask[data-reminder-context=bookmark-welcome] .startup-reminder-badge span { font-size:44px; }
.startup-reminder-badge {
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  margin:0 auto 13px;
  border:1px solid rgba(255,255,255,.64);
  border-radius:20px;
  color:#fff;
  background:linear-gradient(145deg,var(--reminder-primary),var(--reminder-secondary));
  box-shadow:0 11px 26px rgba(var(--reminder-primary-rgb),.22),inset 0 1px 0 rgba(255,255,255,.42);
  transform:rotate(-4deg);
  animation:startupReminderBadgeIn .62s .12s cubic-bezier(.2,.9,.25,1.25) both;
}
.startup-reminder-badge span { font-size:34px;font-weight:900;line-height:1;transform:rotate(4deg); }
.startup-reminder-eyebrow {
  position:relative;
  z-index:1;
  width:max-content;
  margin:0 auto 9px;
  padding:5px 12px;
  border:1px solid rgba(var(--reminder-primary-rgb),.2);
  border-radius:999px;
  color:var(--reminder-primary);
  background:rgba(var(--reminder-primary-rgb),.08);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
}
.startup-reminder-card h2 { position:relative;z-index:1;margin:0 0 14px;color:inherit;font-size:clamp(22px,3.2vw,32px);line-height:1.28;letter-spacing:.02em; }
.startup-reminder-card.is-title-only h2 { max-width:540px;margin:4px auto 30px;font-size:clamp(22px,3.2vw,32px);line-height:1.35; }
.startup-reminder-content { position:relative;z-index:1;width:fit-content;margin:0 auto 20px;max-width:min(560px,100%);color:#526174;font-size:clamp(17px,2vw,20px);line-height:1.9;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere; }
.startup-reminder-content-lead { display:block;margin:0 auto 14px;color:inherit;font-size:1.05em;font-weight:900;line-height:1.6;text-align:center; }
.startup-reminder-mask[data-reminder-context=bookmark-welcome] .startup-reminder-content { width:100%;text-align:center; }
.startup-reminder-mask[data-reminder-context=bookmark-welcome] .bookmark-welcome-copy { margin:0;color:var(--reminder-primary);font-size:clamp(16px,2.2vw,20px);line-height:1.75;text-align:center; }
.startup-reminder-mask[data-reminder-context=bookmark-welcome] .bookmark-welcome-copy strong { color:var(--reminder-primary);font-weight:900; }
html[data-theme=dark] .startup-reminder-mask[data-reminder-context=bookmark-welcome] .bookmark-welcome-copy { color:var(--reminder-primary); }
.startup-reminder-mask[data-reminder-context=bookmark-welcome] .bookmark-welcome-copy.is-confirm-shaking { animation:bookmarkWelcomeCopyShake .58s ease-in-out; }
.startup-reminder-tips { position:relative;z-index:1;width:100%;margin:-14px auto 20px;color:var(--reminder-primary);font-size:13px; }
body[data-mode="remote"] .startup-reminder-tips { display:none!important; }
html[data-theme="dark"] .startup-reminder-content { color:#c4cfdd; }
.startup-reminder-mask[data-reminder-context="qr-guidance"] .startup-reminder-card { width:min(720px,100%); }
.startup-reminder-mask[data-reminder-context="qr-guidance"] .startup-reminder-content {
  width:100%;
  max-width:620px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:26px;
  color:#34445a;
  font-size:14px;
  line-height:1.65;
  white-space:normal;
}
.startup-reminder-mask[data-reminder-context="qr-guidance"] .startup-reminder-content-lead {
  grid-column:1 / -1;
  width:100%;
  margin:0 0 4px;
  padding:11px 15px;
  border:1px solid rgba(var(--reminder-primary-rgb),.18);
  border-radius:13px;
  color:var(--reminder-primary);
  background:linear-gradient(135deg,rgba(var(--reminder-primary-rgb),.11),rgba(var(--reminder-primary-rgb),.035));
  font-size:15px;
  line-height:1.55;
}
.startup-reminder-mask[data-reminder-context="qr-guidance"] .startup-reminder-content-lead::before { content:"✓";display:inline-grid;place-items:center;width:21px;height:21px;margin-right:8px;border-radius:50%;color:#fff;background:var(--reminder-primary);font-size:12px;vertical-align:1px; }
.qr-guidance-step { min-width:0;padding:14px 15px;border:1px solid rgba(var(--reminder-primary-rgb),.14);border-radius:15px;background:rgba(255,255,255,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
.qr-guidance-step-heading { display:flex;align-items:center;gap:9px;margin-bottom:8px;color:#1f2d42;line-height:1.45; }
.qr-guidance-step-heading strong { font-size:15px;font-weight:900; }
.qr-guidance-step-number { flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#fff;background:linear-gradient(135deg,var(--reminder-primary),var(--reminder-secondary));font-size:11px;font-weight:900;letter-spacing:.04em;box-shadow:0 6px 14px rgba(var(--reminder-primary-rgb),.2); }
.qr-guidance-item,.qr-guidance-copy { margin-top:6px;color:#536176; }
html[data-theme="dark"] .startup-reminder-mask[data-reminder-context="qr-guidance"] .startup-reminder-content { color:#c4cfdd; }
html[data-theme="dark"] .qr-guidance-step { border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
html[data-theme="dark"] .qr-guidance-step-heading { color:#f2f6fc; }
html[data-theme="dark"] .qr-guidance-item,html[data-theme="dark"] .qr-guidance-copy { color:#c4cfdd; }
.startup-reminder-actions { position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px; }
.startup-reminder-actions button {
  min-width:150px;
  min-height:46px;
  padding:11px 18px;
  border:1px solid transparent;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
  box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
  animation:startupReminderActionIn .42s .22s ease-out both;
}
.startup-reminder-actions button:nth-child(2) { animation-delay:.28s; }
.startup-reminder-actions button:nth-child(3) { animation-delay:.34s; }
#startupReminderAcknowledgeButton {
  color:#fff;
  background:linear-gradient(135deg,var(--reminder-primary),var(--reminder-secondary));
  box-shadow:0 12px 26px rgba(var(--reminder-primary-rgb),.26),inset 0 1px 0 rgba(255,255,255,.3);
}
.startup-reminder-actions .secondary {
  color:#43516a;
  border-color:rgba(var(--reminder-primary-rgb),.18);
  background:rgba(var(--reminder-primary-rgb),.055);
}
html[data-theme="dark"] .startup-reminder-actions .secondary { color:#d8e2ef;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12); }
.startup-reminder-actions button:hover { transform:translateY(-2px); }
#startupReminderAcknowledgeButton:hover { box-shadow:0 16px 32px rgba(var(--reminder-primary-rgb),.36),inset 0 1px 0 rgba(255,255,255,.32); }
.startup-reminder-actions .secondary:hover { border-color:rgba(var(--reminder-primary-rgb),.36);background:rgba(var(--reminder-primary-rgb),.1); }
.startup-reminder-actions button:active { transform:translateY(0) scale(.97); }
.startup-reminder-actions button:focus-visible { outline:3px solid rgba(var(--reminder-primary-rgb),.36);outline-offset:3px; }
@keyframes startupReminderMaskIn { from{opacity:0} to{opacity:1} }
@keyframes startupReminderMaskOut { to{opacity:0} }
@keyframes startupReminderCardIn { from{opacity:0;transform:translateY(34px) scale(.92)} to{opacity:1;transform:none} }
@keyframes startupReminderCardOut { to{opacity:0;transform:translateY(18px) scale(.96)} }
@keyframes startupReminderBadgeIn { from{opacity:0;transform:translateY(18px) scale(.7) rotate(-14deg)} to{opacity:1;transform:rotate(-4deg)} }
@keyframes startupReminderActionIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes startupReminderAccent { to{background-position:200% 0} }
@keyframes startupReminderAura { from{transform:scale(.88) translate3d(-2%,0,0);opacity:.55} to{transform:scale(1.12) translate3d(4%,2%,0);opacity:1} }
@keyframes startupReminderConfettiBurst {
  0% { opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.2); }
  10% { opacity:1; }
  100% { opacity:0;transform:translate(calc(-50% + var(--confetti-x)),calc(-50% + var(--confetti-y))) rotate(var(--confetti-rotate)) scale(1); }
}
@keyframes startupReminderExcitedBadge { 0%,100%{filter:none} 50%{filter:brightness(1.16) saturate(1.25);box-shadow:0 20px 46px rgba(var(--reminder-primary-rgb),.48),inset 0 1px 0 rgba(255,255,255,.5)} }
@keyframes startupReminderBookmarkStar {
  0% { opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-12deg); }
  14% { opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(4deg); }
  72% { opacity:1; }
  100% { opacity:0;transform:translate(calc(-50% + var(--bookmark-star-x)),calc(-50% + var(--bookmark-star-y))) scale(.48) rotate(22deg); }
}
@keyframes startupReminderBookmarkBadge { 0%,100%{transform:rotate(-4deg) scale(1)} 50%{transform:rotate(3deg) scale(1.1)} }
@keyframes bookmarkWelcomeCopyShake {
  0%,100% { transform:translateX(0); }
  18% { transform:translateX(-8px) rotate(-.6deg); }
  36% { transform:translateX(7px) rotate(.5deg); }
  54% { transform:translateX(-5px) rotate(-.35deg); }
  72% { transform:translateX(3px) rotate(.2deg); }
}
@media(max-width:620px) {
  .startup-reminder-card { padding:27px 20px 23px;border-radius:19px; }
  .startup-reminder-badge { width:58px;height:58px;border-radius:18px; }
  .startup-reminder-badge span { font-size:30px; }
  .startup-reminder-actions { display:grid;grid-template-columns:1fr; }
  .startup-reminder-actions button { width:100%; }
  .startup-reminder-mask[data-reminder-context="qr-guidance"] .startup-reminder-content { grid-template-columns:1fr;gap:9px; }
  .startup-reminder-mask[data-reminder-context="qr-guidance"] .startup-reminder-content-lead { margin-bottom:2px;padding:10px 12px;font-size:14px; }
  .qr-guidance-step { padding:12px 13px; }
}
@media(prefers-reduced-motion:reduce) {
  .startup-reminder-mask,.startup-reminder-mask::before,.startup-reminder-mask::after,.startup-reminder-mask.is-closing,
  .startup-reminder-card,.startup-reminder-mask.is-closing .startup-reminder-card,.startup-reminder-card::before,
  .startup-reminder-badge,.startup-reminder-actions button,.startup-reminder-confetti,.startup-reminder-bookmark-star,
  .startup-reminder-mask[data-reminder-context=bookmark-welcome] .bookmark-welcome-copy.is-confirm-shaking { animation:none!important; }
}
html.startup-access-pending .app-shell { visibility:hidden; }
.startup-loader-inner {
  display:grid;
  justify-items:center;
  gap:28px;
  transform:translateY(-8px);
}
.startup-logo-wrap {
  position:relative;
  width:min(54vw,420px);
  aspect-ratio:35 / 18;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.42));
  animation:startupLogoPulse 1.9s ease-in-out infinite;
}
.startup-logo-wrap::before {
  content:"";
  position:absolute;
  inset:-28%;
  border-radius:999px;
  background:conic-gradient(from 0deg,#7c3aed,#06b6d4,#22c55e,#f59e0b,#ef4444,#7c3aed);
  opacity:.22;
  filter:blur(34px);
  animation:startupHaloSpin 4.5s linear infinite;
}
.startup-logo {
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain;
  overflow:visible;
}
.startup-logo-ts {
  display:none;
  width:56%;
  height:88%;
}
.startup-logo-dev { display:none; }
html[data-brand-resolved="0"] .startup-logo-wrap { visibility:hidden; }
html[data-brand="ts"] .startup-logo-xp { display:none; }
html[data-brand="ts"] .startup-logo-ts { display:block; }
html[data-brand="dev"] .startup-logo-xp { display:none; }
html[data-brand="dev"] .startup-logo-dev { display:block; }
.startup-logo-mark { fill:url(#startupLogoGradient); }
.startup-logo-mark-ts { fill:url(#startupTeslaGradient); }
.startup-logo-shine {
  fill:rgba(255,255,255,.52);
  mix-blend-mode:screen;
  transform-origin:center;
  animation:startupShineSweep 1.55s ease-in-out infinite;
}
.startup-logo-shine-ts {
  animation:startupTeslaShineSweep 1.55s ease-in-out infinite;
}
.startup-progress {
  width:min(46vw,260px);
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.startup-progress::before {
  content:"";
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7c3aed,#06b6d4,#ffffff);
  animation:startupProgressMove 1.15s ease-in-out infinite;
}
.startup-loading-text {
  margin:-14px 0 0;
  color:rgba(229,231,235,.72);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.startup-cache-reset {
  min-height:42px;
  margin:-14px 0 0;
  padding:9px 20px;
  border:1px solid rgba(147,197,253,.56);
  border-radius:999px;
  color:#eff6ff;
  background:linear-gradient(135deg,rgba(37,99,235,.76),rgba(124,58,237,.72));
  box-shadow:0 10px 30px rgba(37,99,235,.22),inset 0 1px 0 rgba(255,255,255,.18);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.startup-cache-reset[hidden] { display:none; }
.startup-cache-reset:hover { transform:translateY(-1px);box-shadow:0 13px 34px rgba(37,99,235,.3),inset 0 1px 0 rgba(255,255,255,.2); }
.startup-cache-reset:focus-visible { outline:3px solid rgba(125,211,252,.42);outline-offset:3px; }
.startup-cache-reset:disabled { opacity:.68;cursor:wait;transform:none; }
@media(prefers-reduced-motion:reduce) { .startup-cache-reset { transition:none; } }
.startup-preview-entry {
  display:inline-flex;
  min-height:38px;
  align-items:center;
  justify-content:center;
  margin-top:-12px;
  padding:8px 18px;
  border:1px solid rgba(125,211,252,.36);
  border-radius:999px;
  color:#dbeafe;
  background:rgba(30,64,175,.28);
  box-shadow:0 8px 28px rgba(2,6,23,.28),inset 0 1px 0 rgba(255,255,255,.1);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-decoration:none;
  backdrop-filter:blur(10px);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.startup-preview-entry:hover { border-color:rgba(125,211,252,.68);background:rgba(37,99,235,.4);transform:translateY(-1px); }
.startup-preview-entry:focus-visible { outline:3px solid #6cb2ff;outline-offset:3px; }
@keyframes startupLogoPulse {
  0%,100% { transform:scale(.965);opacity:.86; }
  50% { transform:scale(1.035);opacity:1; }
}
@keyframes startupHaloSpin { to { transform:rotate(360deg); } }
@keyframes startupShineSweep {
  0% { transform:translateX(-44px) skewX(-18deg);opacity:0; }
  22% { opacity:.32; }
  60% { opacity:.62; }
  100% { transform:translateX(54px) skewX(-18deg);opacity:0; }
}
@keyframes startupTeslaShineSweep {
  0% { transform:translateX(-520px) skewX(-18deg);opacity:0; }
  22% { opacity:.32; }
  60% { opacity:.62; }
  100% { transform:translateX(1500px) skewX(-18deg);opacity:0; }
}
@keyframes startupProgressMove {
  0% { transform:translateX(-110%); }
  100% { transform:translateX(250%); }
}
@keyframes room-record-pulse {
  0%,100% { color:#7f8b9d;background:transparent;box-shadow:none; }
  45% { color:#dbeafe;background:#2563eb30;box-shadow:0 0 0 1px #60a5fa3d,0 0 16px #3b82f64d; }
}
@keyframes message-notice-breathe {
  0%,100% { transform:scale(1);filter:drop-shadow(0 0 0 #efcf7b00);opacity:.86; }
  50% { transform:scale(1.18);filter:drop-shadow(0 0 8px #efcf7b88);opacity:1; }
}
@keyframes showcaseWelcomeIn {
  from { opacity:0;transform:translateY(12px) scale(.96); }
  to { opacity:1;transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion:reduce) {
  .startup-logo-wrap,
  .startup-logo-wrap::before,
  .startup-logo-shine,
  .startup-progress::before,
  .showcase-welcome-title,
  .self-card .fixed-fullscreen-quick.active::before,
  .showcase-mode-hint.is-visible,
  .showcase-mode-hint.is-visible::before,
  .showcase-mode-hint.hint-fullscreen.is-visible {
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
  }
}
button,input,textarea,select { font:inherit; }
button {
  cursor:pointer;
  transition:transform .1s ease,border-color .1s ease,color .1s ease,opacity .1s ease;
  -webkit-tap-highlight-color:transparent;
}
button:hover { transform:translateY(-1px); }
button:active { transform:translateY(0) scale(.98); }
button:disabled { cursor:not-allowed; opacity:.5; transform:none; box-shadow:none; }
button:focus-visible,a:focus-visible {
  outline:2px solid #8bc2ff;
  outline-offset:2px;
}
.room-list,#memberList,.messages { scrollbar-width:thin; scrollbar-color:#52607933 transparent; }
.room-list::-webkit-scrollbar,#memberList::-webkit-scrollbar,.messages::-webkit-scrollbar { width:6px;height:6px; }
.room-list::-webkit-scrollbar-thumb,#memberList::-webkit-scrollbar-thumb,.messages::-webkit-scrollbar-thumb { background:#52607933;border-radius:999px; }

.app-shell {
  width:100%;
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  background:
    linear-gradient(90deg,#cfd9e6 0,#dfe7f0 var(--sidebar-width),#e8eef5 var(--sidebar-width),#e8eef5 100%);
  overflow:hidden;
}
.sidebar {
  min-height:0;
  padding:24px 16px 16px;
  display:flex;
  flex-direction:column;
  color:var(--sidebar-ink);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-line);
  box-shadow:8px 0 24px #18243a0c;
  z-index:2;
}
.sidebar-close,.sidebar-backdrop { display:none; }
.close-icon {
  display:block;
  width:14px;
  height:14px;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(32%) sepia(17%) saturate(690%) hue-rotate(176deg) brightness(93%) contrast(89%);
}
html[data-theme="dark"] .close-icon {
  filter:brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(690%) hue-rotate(177deg) brightness(103%) contrast(96%);
}
.brand { display:flex;align-items:center;gap:12px;padding:0 8px 24px; }
.brand-copy { min-width:0;flex:1; }
.brand .logo { position:relative;width:48px;height:48px;flex:none;border-radius:12px;overflow:hidden;background:var(--sidebar-control);cursor:pointer; }
.brand .logo:focus-visible { outline:2px solid #8fd7ff;outline-offset:3px; }
.brand .logo img { display:block;width:100%;height:100%;object-fit:cover; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:18px; }
.brand span { margin-top:3px;color:var(--sidebar-muted);font-size:12px; }
.brand-title { color:var(--sidebar-ink); }
.brand-live {
  display:inline-block;
  margin-left:2px;
  color:inherit;
  background:linear-gradient(110deg,var(--sidebar-ink) 0%,var(--sidebar-ink) 42%,#9bdcff 49%,#fff 52%,#9bdcff 57%,var(--sidebar-ink) 64%,var(--sidebar-ink) 100%);
  background-size:300% 100%;
  background-position:100% 0;
  background-repeat:no-repeat;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:1em;
  font-style:normal;
  font-weight:800;
  letter-spacing:.035em;
  vertical-align:baseline;
  animation:brandLiveSweep 5s linear infinite;
}
.brand-tagline { transition:opacity .24s ease,transform .24s ease,color .3s ease; }
.brand-tagline.is-switching { opacity:0;transform:translateY(3px); }
.brand-tagline.is-refresh-hint {
  color:transparent;
  font-weight:inherit;
  background:linear-gradient(105deg,#38bdf8 0%,#60a5fa 22%,#818cf8 44%,#c084fc 66%,#7c3aed 82%,#22d3ee 100%);
  background-size:100% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 7px #818cf84d);
  animation:brandRefreshHint 4.4s ease both;
}
.brand-tagline.is-restoring { animation:brandTaglineRestore .38s ease both; }
.brand .logo.is-refresh-hint-active {
  overflow:visible;
  isolation:isolate;
  animation:brandLogoRefreshCue 1.35s ease-in-out 2;
}
.brand .logo.is-refresh-hint-active img { position:relative;z-index:1;border-radius:inherit; }
.brand .logo.is-refresh-hint-active::before {
  content:"";
  position:absolute;
  inset:-4px;
  z-index:0;
  border-radius:15px;
  background:conic-gradient(from 20deg,#38bdf8,#6366f1,#a855f7,#7c3aed,#22d3ee,#38bdf8);
  filter:blur(6px) saturate(1.18);
  opacity:0;
  animation:brandLogoAuraMotion 2.2s linear infinite,brandLogoAuraLifecycle 4.4s linear both;
  pointer-events:none;
}
@keyframes brandRefreshHint {
  0% { opacity:0;transform:translateY(4px); }
  14% { opacity:1;transform:translateY(0); }
  72% { opacity:1;transform:translateY(0);animation-timing-function:linear; }
  100% { opacity:0;transform:translateY(0); }
}
@keyframes brandTaglineRestore {
  from { opacity:0;transform:translateY(3px); }
  to { opacity:1;transform:translateY(0); }
}
@keyframes brandLogoRefreshCue {
  0%,100% { transform:scale(1);box-shadow:0 0 0 0 #6366f100,0 5px 16px #38bdf818; }
  50% { transform:scale(1.045);box-shadow:0 0 0 5px #818cf824,0 7px 24px #7c3aed52,0 0 18px #38bdf838; }
}
@keyframes brandLogoAuraMotion {
  0% { transform:rotate(0deg) scale(.96);filter:blur(5px) saturate(1.04); }
  25% { transform:rotate(90deg) scale(1.02);filter:blur(6px) saturate(1.24); }
  50% { transform:rotate(180deg) scale(1.06);filter:blur(7px) saturate(1.4); }
  75% { transform:rotate(270deg) scale(1.02);filter:blur(6px) saturate(1.24); }
  100% { transform:rotate(360deg) scale(.96);filter:blur(5px) saturate(1.04); }
}
@keyframes brandLogoAuraLifecycle {
  0% { opacity:0; }
  14% { opacity:.5; }
  36% { opacity:.62; }
  54% { opacity:.4; }
  70% { opacity:.56; }
  72% { opacity:.54; }
  100% { opacity:0; }
}
@keyframes brandLiveSweep {
  0%,70% { background-position:100% 0; }
  84%,100% { background-position:0 0; }
}
html[data-theme="light"] .brand-tagline.is-refresh-hint {
  background-image:linear-gradient(105deg,#0369a1 0%,#2563eb 24%,#4f46e5 46%,#9333ea 68%,#6d28d9 84%,#0891b2 100%);
  filter:drop-shadow(0 0 5px #6366f838);
}
@media (prefers-reduced-motion:reduce) {
  .brand-tagline.is-refresh-hint { opacity:1;transform:none;filter:none;animation:none!important; }
  .brand-live { background:none;-webkit-text-fill-color:currentColor;animation:none!important; }
  .brand-tagline.is-restoring,
  .brand .logo.is-refresh-hint-active,
  .brand .logo.is-refresh-hint-active::before { animation:none!important; }
}
.theme-toggle {
  height:34px;
  min-width:34px;
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-left:auto;
  padding:0 8px;
  border:1px solid var(--sidebar-line);
  border-radius:8px;
  color:var(--sidebar-ink);
  background:var(--sidebar-control);
  box-shadow:inset 0 1px 0 #ffffff18;
}
.theme-toggle img {
  width:17px;
  height:17px;
  display:block;
}
.theme-toggle b {
  font-size:11px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}
.theme-toggle:hover {
  color:var(--sidebar-ink);
  border-color:#7db9ff88;
  background:var(--sidebar-hover);
}
.new-message-notice {
  position:absolute;
  right:8px;
  top:0;
  height:16px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:150px;
  pointer-events:none;
  transform:translateY(-1px);
  opacity:0;
  padding:0;
  border:0;
  border-radius:0;
  color:#9fc5ff;
  background:transparent;
  box-shadow:none;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  transition:opacity .18s ease, transform .18s ease;
}
.new-message-notice.show { opacity:1;transform:translateY(0); }
.new-message-notice-icon {
  width:14px;
  height:14px;
  display:block;
  flex:none;
  object-fit:contain;
}
.new-message-notice.show .new-message-notice-icon {
  animation:message-notice-breathe 1s ease-in-out 3;
}
.new-message-notice-text {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rooms-section { flex:1.55 1 0;max-height:62%;min-height:160px;display:flex;flex-direction:column; }
.section-title { position:relative;height:20px;padding:0 8px 9px;display:flex;align-items:center;gap:8px; }
.section-title h2,.members h2 { margin:0;color:var(--sidebar-muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase; }
.room-tools { display:grid;gap:8px;padding:0 2px 12px; }
.room-tool-label-short { display:none; }
.room-tool-label { font:inherit;white-space:nowrap; }
.room-tool-label-suffix { font:inherit; }
.room-tools button {
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:10px;
  padding:8px 11px;
  color:white;
  font-size:12px;
  font-weight:700;
  text-align:left;
}
.room-tools button span { width:20px;text-align:center; }
.room-tools .room-create-icon { height:14px;flex:none;background:currentColor;-webkit-mask:url("./assets-v590/images/icons/icon-create.svg") center / 10px 10px no-repeat;mask:url("./assets-v590/images/icons/icon-create.svg") center / 10px 10px no-repeat; }
.join-private-button { color:var(--sidebar-ink);border:1px solid var(--sidebar-line);background:var(--sidebar-control);box-shadow:inset 0 1px 0 #ffffff16; }
.join-private-button:hover { background:var(--sidebar-hover);border-color:#7db9ff88;box-shadow:0 10px 22px #00000012,inset 0 1px 0 #ffffff25; }
.create-private-button { border:0;background:linear-gradient(135deg,#2b7df0,#1b64d8);box-shadow:0 10px 24px #2374e138,inset 0 1px 0 #ffffff35; }
.create-private-button:hover { filter:saturate(1.08) brightness(1.03);box-shadow:0 14px 30px #2374e14a,inset 0 1px 0 #ffffff45; }
@media(min-width:761px) {
  .room-tools {
    display:flex;
    align-items:stretch;
    gap:6px;
    padding-bottom:10px;
  }
  .room-tools button {
    width:auto;
    min-width:0;
    min-height:38px;
    justify-content:center;
    gap:5px;
    padding:8px 10px;
    border-radius:10px;
    text-align:center;
  }
  .room-tools .create-private-button { order:-1;flex:1 0 136px;min-width:136px;box-shadow:0 4px 12px #2374e124,inset 0 1px 0 #ffffff35; }
  .room-tools .join-private-button { flex:0 1 96px;min-width:53px;color:#c5dcff;border-color:#458be044;background:linear-gradient(135deg,#2b7df01c,#1b64d810);box-shadow:inset 0 1px 0 #ffffff12; }
  html[data-theme="light"] .room-tools .create-private-button { box-shadow:0 4px 12px #2374e11c,inset 0 1px 0 #ffffff55; }
  html[data-theme="light"] .room-tools .join-private-button { color:#2566b6;border-color:#bfd6ef;background:linear-gradient(135deg,#edf5ff,#eaf5f5);box-shadow:inset 0 1px 0 #ffffff; }
  .room-tools .join-private-button:hover { border-color:#7db9ff88;filter:brightness(1.06); }
  .room-tools button .room-tool-icon { width:14px; }
  .room-tool-label-full { display:none; }
  .room-tool-label-short { display:inline; }
}
.room-list { min-height:0;overflow:auto;padding-right:2px; }
.room-item {
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  border-radius:8px;
  padding:10px;
  color:var(--sidebar-muted);
  background:transparent;
  text-align:left;
}
.room-item:hover { background:var(--sidebar-hover); }
.room-item.active {
  color:var(--sidebar-ink);
  background:
    radial-gradient(circle at 18% 50%,#2f80ed18 0,transparent 55%),
    linear-gradient(135deg,#eef6ff,#e8f4f7 58%,#eef8f3);
  box-shadow:0 12px 24px #18243a12,inset 3px 0 0 #2f80ed,inset 0 1px 0 #ffffff;
}
html[data-theme="dark"] .room-item.active {
  color:white;
  background:
    radial-gradient(circle at 18% 50%,#2f80ed24 0,transparent 55%),
    linear-gradient(135deg,#263241,#1b2630 58%,#172a2e);
  box-shadow:0 12px 24px #00000030,inset 3px 0 0 #75c7ff,inset 0 1px 0 #ffffff1f;
}
html[data-theme="dark"] .room-item.active .room-copy small { color:#c7d0dd; }
.room-symbol {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:7px;
  color:#d9e2ef;
  background:#ffffff12;
  font-size:12px;
  font-weight:800;
}
.room-announcement .room-symbol {
  color:#d9f7ff;
  background:linear-gradient(135deg,#0ea5e933,#22d3ee18);
  box-shadow:inset 0 0 0 1px #7dd3fc24;
}
.room-public .room-symbol {
  color:#e4fff7;
  background:linear-gradient(135deg,#14b8a633,#2f80ed18);
  box-shadow:inset 0 0 0 1px #5eead424;
}
.room-private .room-symbol {
  color:#f0e9ff;
  background:linear-gradient(135deg,#8b5cf633,#ec489918);
  box-shadow:inset 0 0 0 1px #c4b5fd24;
}
.room-developer .room-symbol {
  color:#fff7ed;
  background:linear-gradient(135deg,#f9731633,#facc1518);
  box-shadow:inset 0 0 0 1px #fdba7424;
}
.room-item.active.room-announcement .room-symbol { background:linear-gradient(135deg,#0ea5e968,#22d3ee38);box-shadow:inset 0 0 0 1px #bae6fd55,0 6px 14px #00000022; }
.room-item.active.room-public .room-symbol { background:linear-gradient(135deg,#14b8a666,#2f80ed34);box-shadow:inset 0 0 0 1px #99f6e455,0 6px 14px #00000022; }
.room-item.active.room-private .room-symbol { background:linear-gradient(135deg,#8b5cf666,#ec489934);box-shadow:inset 0 0 0 1px #ddd6fe55,0 6px 14px #00000022; }
.room-item.active.room-developer .room-symbol { background:linear-gradient(135deg,#f9731668,#facc1538);box-shadow:inset 0 0 0 1px #fed7aa55,0 6px 14px #00000022; }
.room-item.active .room-symbol { color:white; }
.room-item.active .room-copy small { color:var(--sidebar-muted); }
html[data-theme="light"] .room-symbol {
  color:#3b4a5f;
  background:#f4f7fb;
  box-shadow:inset 0 0 0 1px #dce6f1;
}
html[data-theme="light"] .room-announcement .room-symbol {
  color:#075985;
  background:#e8f7ff;
  box-shadow:inset 0 0 0 1px #bae6fd;
}
html[data-theme="light"] .room-public .room-symbol {
  color:#0f766e;
  background:#e9fbf7;
  box-shadow:inset 0 0 0 1px #99f6e4;
}
html[data-theme="light"] .room-private .room-symbol {
  color:#6d28d9;
  background:#f3edff;
  box-shadow:inset 0 0 0 1px #ddd6fe;
}
html[data-theme="light"] .room-developer .room-symbol {
  color:#9a3412;
  background:#fff3e6;
  box-shadow:inset 0 0 0 1px #fed7aa;
}
html[data-theme="light"] .room-item.active .room-symbol {
  color:white;
}
.room-copy { min-width:0;flex:1; }
.room-copy strong,.room-copy small { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.room-copy strong { display:flex;align-items:center;gap:6px;font-size:13px; }
.room-name-text { min-width:0;overflow:hidden;text-overflow:ellipsis; }
.room-copy small { margin-top:3px;color:var(--sidebar-muted);font-size:10px; }
.room-record-count {
  display:inline-flex;
  align-items:center;
  min-height:16px;
  border-radius:5px;
  padding:0 3px;
  margin-left:-3px;
}
.room-record-count.new-message-flash {
  animation:room-record-pulse 1s ease-in-out 5;
}
.room-unread-dot {
  width:6px;
  height:6px;
  flex:none;
  border-radius:999px;
  background:#60a5fa;
  box-shadow:0 0 0 3px #60a5fa24, 0 0 12px #60a5fa88;
}
.room-mention-badge {
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  flex:none;
  border-radius:50%;
  color:#ef4444;
  background:#ef444412;
  box-shadow:none;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.room-mention-badge.is-flashing { animation:room-mention-pulse 1.2s ease-in-out 5; }
@keyframes room-mention-pulse {
  0%,100% { background:#ef444410;box-shadow:0 0 0 0 #ef444400; }
  50% { background:#ef444426;box-shadow:0 0 0 4px #ef444410; }
}
.room-online.online { color:#65d6c5;font-weight:800; }
.room-status-dot {
  width:8px;
  height:8px;
  flex:none;
  border-radius:999px;
  box-shadow:0 0 0 3px #00000014;
}
.room-status-dot.online { background:#12a594; }
.room-status-dot.recent { background:#f2b84b; }
.room-status-dot.offline { background:#c84054; }
.members { flex:0.7 1 0;min-height:76px;margin-top:18px;overflow:hidden;display:flex;flex-direction:column; }
.members h2 { flex:0 0 auto;margin:0 10px 12px; }
#memberList { min-height:0;overflow:auto; }
.member { display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;font-size:13px; }
.member-name { min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.member.offline { color:var(--sidebar-muted); }
.member:hover { background:var(--sidebar-hover); }
.member.owner .member-name { color:var(--sidebar-ink);font-weight:800; }
.member-owner-badge {
  flex:none;
  border:1px solid #7dd3fc55;
  border-radius:999px;
  padding:2px 6px;
  color:#bae6fd;
  background:#0ea5e91f;
  font-size:10px;
  font-weight:900;
}
.remove-member {
  flex:none;
  border:1px solid #ffb4b433;
  border-radius:6px;
  padding:3px 7px;
  color:#ffc9c9;
  background:#ff4d4d14;
  font-size:11px;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transform:translateX(4px);
  transition:opacity .16s ease,transform .16s ease,background .16s ease,border-color .16s ease;
}
.member:hover .remove-member,
.remove-member:focus {
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
.remove-member:hover { border-color:#ffb4b466;background:#ff4d4d24; }
html[data-theme="light"] .remove-member {
  color:#b42318;
  border-color:#f7b4ad;
  background:#fff2f0;
  box-shadow:0 4px 10px #b4231810,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .member:hover .remove-member,
html[data-theme="light"] .remove-member:focus {
  color:#ffffff;
  border-color:#d92d20;
  background:#d92d20;
  box-shadow:0 8px 18px #b4231826,inset 0 1px 0 #ffffff30;
}
html[data-theme="light"] .remove-member:hover {
  color:#ffffff;
  border-color:#b42318;
  background:#b42318;
}
.mini-avatar,.avatar,.message-avatar {
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  font-weight:800;
  box-shadow:inset 0 1px 0 #ffffff33;
}
.mini-avatar { width:26px;height:26px;font-size:13px; }
.mini-avatar.offline { background:linear-gradient(135deg,#6b7280,#3f4652)!important;color:#d1d5db;filter:grayscale(1);opacity:.68; }
.avatar { width:38px;height:38px;font-size:15px; }
.self-card .avatar[role="button"] {
  cursor:pointer;
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.self-card .avatar[role="button"]:hover { transform:scale(1.06);filter:brightness(1.08); }
.self-card .avatar[role="button"]:active { transform:scale(.97); }
.self-card .avatar[role="button"]:focus-visible { outline:2px solid #8bc2ff;outline-offset:3px; }
.owner-avatar {
  position:relative;
  animation:owner-avatar-breathe 2.8s ease-in-out infinite;
  box-shadow:
    0 0 0 2px #fef3c7,
    0 0 0 6px #f59e0b20,
    0 8px 22px #f59e0b35,
    inset 0 1px 0 #ffffff45;
}
@keyframes owner-avatar-breathe {
  0%,100% {
    box-shadow:
      0 0 0 2px #fef3c7,
      0 0 0 6px #f59e0b20,
      0 8px 22px #f59e0b35,
      inset 0 1px 0 #ffffff45;
    filter:saturate(1);
  }
  50% {
    box-shadow:
      0 0 0 2px #fff7d6,
      0 0 0 7px #f59e0b26,
      0 8px 24px #f59e0b42,
      inset 0 1px 0 #ffffff4d;
    filter:saturate(1.04);
  }
}
.developer-avatar {
  position:relative;
  isolation:isolate;
  color:white!important;
  background:
    radial-gradient(circle at 30% 24%,#ffffff8c 0 12%,transparent 28%),
    linear-gradient(135deg,#111827 0%,#2563eb 46%,#06b6d4 100%)!important;
  box-shadow:
    0 0 0 2px #bfdbfe,
    0 0 0 5px #38bdf826,
    0 10px 24px #2563eb42,
    inset 0 1px 0 #ffffff5c;
  text-shadow:0 1px 4px #0008;
  font-weight:900;
}
.developer-avatar::after {
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border-radius:50%;
  background:conic-gradient(from 120deg,#38bdf8,#2563eb,#a855f7,#38bdf8);
  opacity:.28;
  filter:blur(2px);
  animation:developer-avatar-pulse 2.4s ease-in-out infinite;
}
@keyframes developer-avatar-pulse {
  0%,100% { transform:scale(.96);opacity:.2; }
  50% { transform:scale(1.08);opacity:.42; }
}
.self-card {
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:13px 8px 0;
  border-top:1px solid var(--sidebar-line);
}
.self-info { min-width:0;cursor:pointer; }
.self-card strong,.self-card span { display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.self-card span { margin-top:2px;color:#5ee0a5;font-size:11px; }
.self-actions {
  display:flex;
  align-items:center;
  gap:5px;
  flex:none;
}
.self-card button { width:32px;border:1px solid var(--sidebar-line);background:var(--sidebar-control);color:var(--sidebar-muted);border-radius:9px;height:30px;padding:0;font-size:14px; }
.self-card button:hover { color:var(--sidebar-ink);background:var(--sidebar-hover);border-color:#7db9ff88; }
.self-card .fixed-fullscreen-quick {
  position:relative;
  z-index:0;
  overflow:visible;
  font-size:16px;
  font-weight:900;
}
.fullscreen-icon {
  display:block;
  width:18px;
  height:18px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("./assets-v590/images/icons/icon-full-screen.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-full-screen.svg") center / contain no-repeat;
  pointer-events:none;
}
.self-card .fixed-fullscreen-quick .fullscreen-icon { margin:auto; }
.settings-icon {
  display:block;
  width:18px;
  height:18px;
  flex:none;
  background:currentColor;
  -webkit-mask:url("./assets-v590/images/icons/icon-settings.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-settings.svg") center / contain no-repeat;
  pointer-events:none;
}
.self-card #settingsButton .settings-icon { margin:auto; }
.settings-modal-device-icon .settings-icon { width:22px;height:22px; }
.self-card .fixed-fullscreen-quick::before {
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  border-radius:11px;
  opacity:0;
  transform:scale(1);
  transform-origin:center center;
  pointer-events:none;
}
.self-card .fixed-fullscreen-quick.active {
  color:#07111f;
  border-color:#ffffffd6;
  background:linear-gradient(135deg,#ffffff,#9fe8ff);
  box-shadow:0 0 0 2px #67e8f955,0 10px 24px #00000032,inset 0 1px 0 #ffffff;
}
.self-card .fixed-fullscreen-quick.active::before {
  opacity:1;
  background:#67e8f91f;
  box-shadow:0 0 0 0 #67e8f955,0 10px 24px #06b6d42e;
  animation:fixed-fullscreen-active-pulse 1.55s ease-in-out infinite;
}
.self-card .fixed-fullscreen-quick.active:hover {
  color:#07111f;
  border-color:#ffffff;
  background:linear-gradient(135deg,#ffffff,#bff3ff);
}
@keyframes fixed-fullscreen-active-pulse {
  0%,100% {
    opacity:.68;
    transform:scale(1);
    box-shadow:0 0 0 0 #67e8f94d,0 10px 24px #06b6d42e;
  }
  50% {
    opacity:1;
    transform:scale(1.16);
    box-shadow:0 0 0 5px #67e8f926,0 15px 30px #06b6d43d;
  }
}

.stage { position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--stage-bg);overflow:hidden;box-shadow:inset 1px 0 0 #ffffffa8; }
.stage-header {
  position:relative;
  min-height:70px;
  flex:none;
  padding:12px 22px;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  border-bottom:0;
  background:var(--header-bg);
  box-shadow:var(--panel-shadow);
}
.stage-header::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#ffffff0b,transparent 34%,#ffffff08);
}
.stage-header > * { position:relative;z-index:1; }
.menu-button { display:none;align-items:center;justify-content:center;padding:0;border:1px solid var(--header-line);background:#ffffff75;color:var(--header-ink);border-radius:10px;width:38px;height:38px;margin-right:4px;line-height:1;-webkit-appearance:none;appearance:none; }
.menu-button svg { display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; }
.header-copy { flex:1;min-width:0; }
.room-heading { display:flex;align-items:center;gap:9px;min-width:0; }
.room-heading h1 { margin:0;color:var(--header-ink);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none; }
.stage-header p { margin:4px 0 0;color:var(--header-muted);font-size:12px; }
html[data-theme="dark"] .room-heading h1 { text-shadow:0 1px 18px #0000004a; }
.stage-header p::before {
  content:"";
  width:8px;
  height:8px;
  display:inline-block;
  margin-right:6px;
  border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 3px #ef444422;
  vertical-align:1px;
}
body[data-connection="online"] .stage-header p::before {
  background:#22c55e;
  box-shadow:0 0 0 3px #22c55e25;
}
body[data-connection="idle"] .stage-header p::before {
  background:#ef4444;
  box-shadow:0 0 0 3px #ef444422;
}
.private-room-meta { display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0; }
.header-room-id {
  padding:3px 6px;
  border-radius:5px;
  background:#ffffff12;
  color:#b9d8ff;
  border:1px solid #ffffff14;
  font-size:10px;
  font-weight:800;
}
.password-display,.share-room-button,.edit-room-button,.announcement-button,.donation-button,.mode-button,.leave-room-button,.delete-room-button {
  flex:none;
  border:1px solid var(--header-line);
  border-radius:10px;
  background:#ffffff75;
  color:var(--header-ink);
  padding:8px 10px;
  font-size:11px;
  font-weight:700;
  box-shadow:0 12px 28px #00000026,inset 0 1px 0 #ffffff18;
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}
.mode-button { position:relative;transition:none; }
.mode-button.has-room-unread::before {
  content:"";
  position:absolute;
  right:3px;
  top:3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#60a5fa;
}
.mode-button:disabled {
  cursor:not-allowed;
  opacity:.42;
  filter:saturate(.45);
  box-shadow:none;
}
.mode-button:disabled:hover { transform:none;background:inherit;border-color:var(--header-line);box-shadow:none; }
.notice-board-trigger { position:relative;display:none;align-items:center;justify-content:center;flex:none;border:0;padding:5px;background:transparent;color:inherit;font-size:20px;line-height:1;box-shadow:none;opacity:.2;transition:opacity .18s ease; }
.notice-board-trigger:hover { transform:scale(1.08);background:transparent;opacity:.55; }
.notice-board-trigger > span { display:block;transform:scaleX(-1);transform-origin:center; }
body[data-mode="display"] .notice-board-trigger:not([hidden]) { display:inline-flex; }
.notice-board-trigger.has-unread::after { content:"";position:absolute;right:1px;top:1px;width:7px;height:7px;border:2px solid var(--header-bg);border-radius:50%;background:#ef4444;box-sizing:content-box; }
.notice-board-trigger.has-unread,.notice-board-trigger.has-unread:hover { font-size:24px;opacity:1; }
.notice-board-trigger.has-unread > span { animation:noticeBellBounce 1.8s ease-in-out infinite; }
@keyframes noticeBellBounce {
  0%,36%,100% { transform:scaleX(-1) translateY(0) rotate(0); }
  8% { transform:scaleX(-1) translateY(-4px) rotate(-9deg); }
  16% { transform:scaleX(-1) translateY(0) rotate(7deg); }
  24% { transform:scaleX(-1) translateY(-2px) rotate(-5deg); }
  31% { transform:scaleX(-1) translateY(0) rotate(0); }
}
@media(prefers-reduced-motion:reduce) { .notice-board-trigger.has-unread > span { animation:none; } }
.password-display:hover,.share-room-button:hover,.edit-room-button:hover,.delete-room-button:hover,.announcement-button:hover,.donation-button:hover,.mode-button:hover,.leave-room-button:hover { border-color:#7db9ff88;background:#ffffff;color:var(--header-ink);box-shadow:0 14px 30px #18243a18,inset 0 1px 0 #ffffff; }
html[data-theme="dark"] .menu-button { border-color:#ffffff18;background:#ffffff10;color:#e7edf7; }
html[data-theme="dark"] .password-display,
html[data-theme="dark"] .share-room-button,
html[data-theme="dark"] .edit-room-button,
html[data-theme="dark"] .announcement-button,
html[data-theme="dark"] .donation-button,
html[data-theme="dark"] .mode-button,
html[data-theme="dark"] .leave-room-button,
html[data-theme="dark"] .delete-room-button {
  border-color:#ffffff18;
  background:#ffffff10;
  color:#d8e2f0;
}
html[data-theme="dark"] .password-display:hover,
html[data-theme="dark"] .share-room-button:hover,
html[data-theme="dark"] .edit-room-button:hover,
html[data-theme="dark"] .delete-room-button:hover,
html[data-theme="dark"] .announcement-button:hover,
html[data-theme="dark"] .donation-button:hover,
html[data-theme="dark"] .mode-button:hover,
html[data-theme="dark"] .leave-room-button:hover {
  border-color:#ffffff36;
  background:#ffffff19;
  color:white;
  box-shadow:0 14px 30px #00000030,inset 0 1px 0 #ffffff24;
}
.password-display,
.share-room-button,
.edit-room-button,
.leave-room-button,
.delete-room-button {
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  font-size:10px;
  line-height:1.2;
  box-shadow:none;
}
.password-display { gap:5px;max-width:170px; }
.password-display span { max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.password-display b { color:#8bd7ff; }
.share-room-button { color:#dff3ff;background:linear-gradient(135deg,#2f80ed33,#18a99924);border-color:#61b8ff42; }
.edit-room-button { color:#e6f6ff;background:linear-gradient(135deg,#64748b33,#ffffff10);border-color:#cbd5e144; }
.share-room-button,
.edit-room-button,
.leave-room-button,
.delete-room-button { gap:5px; }
.room-action-icon,
.announcement-icon {
  width:13px;
  height:13px;
  display:block;
  background:currentColor;
  pointer-events:none;
}
.room-action-icon { display:none; }
.share-room-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-share.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-share.svg") center / contain no-repeat;
}
.edit-room-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-edit.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-edit.svg") center / contain no-repeat;
}
.leave-room-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-leave.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-leave.svg") center / contain no-repeat;
}
.mode-button.active { color:#07111f;background:linear-gradient(135deg,#ffffff,#cfe4ff);border-color:#ffffffd6;box-shadow:0 14px 32px #00000038,inset 0 1px 0 #ffffff; }
.announcement-button { display:flex;align-items:center;gap:5px;color:#baf8e7;background:linear-gradient(135deg,#18a9992b,#ffffff10);border-color:#6ee7d044; }
.donation-button {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  color:inherit;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none;
  transition:opacity .14s ease;
}
.donation-button[hidden] { display:none; }
.donation-button:hover { border:0;background:transparent;box-shadow:none;transform:none;opacity:.9; }
.donation-button:active { transform:none;opacity:.74; }
.donation-button-icon { width:28px;height:28px;display:block;object-fit:contain;filter:none; }
html[data-theme="dark"] .donation-button,html[data-theme="dark"] .donation-button:hover { border:0;color:inherit;background:transparent;box-shadow:none; }
.announcement-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-info.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-info.svg") center / contain no-repeat;
}
.delete-room-button { color:#ffd5dc;background:linear-gradient(135deg,#ef444433,#ffffff0e);border-color:#ff8a9a44; }
.delete-room-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-delete.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-delete.svg") center / contain no-repeat;
}
.delete-room-button:hover { color:white;border-color:#ff9aaa66;background:linear-gradient(135deg,#ef44444a,#ffffff16);box-shadow:0 14px 30px #00000030,inset 0 1px 0 #ffffff24; }
.leave-room-button { color:#dff3ff;background:linear-gradient(135deg,#2f80ed33,#ffffff10);border-color:#61b8ff42; }
html[data-theme="dark"] .private-room-meta .share-room-button {
  color:#93c5fd;
  border-color:#60a5fa52;
  background:linear-gradient(135deg,#1d4ed842,#0f172433);
}
html[data-theme="dark"] .private-room-meta .edit-room-button {
  color:#facc15;
  border-color:#facc1545;
  background:linear-gradient(135deg,#854d0e3f,#0f172433);
}
html[data-theme="dark"] .private-room-meta .leave-room-button {
  color:#5eead4;
  border-color:#2dd4bf50;
  background:linear-gradient(135deg,#0f766e3f,#0f172433);
}
html[data-theme="dark"] .private-room-meta .delete-room-button {
  color:#fda4af;
  border-color:#fb718552;
  background:linear-gradient(135deg,#be123c42,#0f172433);
}
html[data-theme="dark"] .private-room-meta .share-room-button:hover {
  color:#bfdbfe;
  border-color:#93c5fd88;
  background:linear-gradient(135deg,#2563eb5a,#1e3a8a36);
}
html[data-theme="dark"] .private-room-meta .edit-room-button:hover {
  color:#fde68a;
  border-color:#facc1580;
  background:linear-gradient(135deg,#a1620755,#42200638);
}
html[data-theme="dark"] .private-room-meta .leave-room-button:hover {
  color:#99f6e4;
  border-color:#5eead480;
  background:linear-gradient(135deg,#0f766e5c,#134e4a38);
}
html[data-theme="dark"] .private-room-meta .delete-room-button:hover {
  color:#fecdd3;
  border-color:#fb718590;
  background:linear-gradient(135deg,#be123c62,#7f1d1d3a);
}
.admin-notice { flex:none;overflow:hidden;padding:4px 18px;background:#fff8df;border-bottom:1px solid #f1e4b5;color:#755d18;text-align:center;font-size:12px;white-space:pre-wrap; }
.admin-notice > span { display:block; }
.admin-notice.is-scrolling > span { animation:announcementTipScroll var(--announcement-tip-duration,4s) ease-in-out forwards; }
.admin-notice.is-entering > span { animation:adminNoticeSlideIn var(--admin-notice-transition-duration,.36s) ease-in-out both; }
.admin-notice.is-exiting > span { animation:adminNoticeSlideOut var(--admin-notice-transition-duration,.36s) ease-in-out both; }
html[data-theme="dark"] .admin-notice {
  color:#dce8f7;
  background:#121a25;
  border-bottom-color:#2d3747;
  box-shadow:inset 0 1px 0 #ffffff0d;
}
body[data-mode="display"] .admin-notice {
  border:1px solid #ffffff1c;
  border-left:0;
  border-right:0;
  border-radius:0;
  color:#dce8f7;
  background:#0d1624e6;
  box-shadow:0 10px 26px #05070a2f,inset 0 1px 0 #ffffff12;
  backdrop-filter:blur(12px) saturate(1.18);
  -webkit-backdrop-filter:blur(12px) saturate(1.18);
  line-height:1.5;
  white-space:nowrap;
}
body[data-mode="display"] .admin-notice > span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-theme="light"] body[data-mode="display"] .admin-notice {
  border-color:#d8e3ef;
  color:#5c4716;
  background:#fff8df;
  box-shadow:none;
}
html[data-theme="light"] .announcement-button {
  color:#0f766e;
  background:linear-gradient(135deg,#e8fbf7,#f7fbff);
  border-color:#9be5d7;
  box-shadow:0 10px 24px #12a5941a,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .announcement-button:hover {
  color:#0b5f59;
  background:linear-gradient(135deg,#dcf8f1,#ffffff);
  border-color:#72dcca;
}
html[data-theme="light"] .announcement-icon {
  background:#0f766e;
}
html[data-theme="dark"] .mode-button.active {
  color:#eaf6ff;
  background:linear-gradient(135deg,#1e3a5f,#155e75 62%,#0f766e);
  border-color:#67e8f966;
  box-shadow:0 12px 28px #00000042,0 0 0 1px #67e8f924,inset 0 1px 0 #ffffff22;
}
html[data-theme="dark"] .mode-button.active:hover {
  color:#ffffff;
  background:linear-gradient(135deg,#24507d,#177089 62%,#128477);
  border-color:#8eeaf5a0;
}

.display-surface {
  position:relative;
  flex:1;
  min-height:300px;
  padding:18px 22px 10px;
  background:
    linear-gradient(180deg,#e7edf5 0%,var(--surface-bg) 58%,#d8e2ec 100%);
  box-shadow:inset 0 1px 0 #ffffffa8,inset 0 -1px 0 #cbd7e5;
}
.wallpaper-screen {
  position:relative;
  width:100%;
  height:100%;
  min-height:280px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:16px;
  background:#05070a;
  box-shadow:inset 0 0 0 1px #ffffff12,0 14px 40px #00000036;
  touch-action:pan-y;
  cursor:default;
  user-select:none;
}
.wallpaper-screen.dragging { cursor:grabbing; }
.wallpaper-screen img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#000;
  object-fit:contain!important;
  object-position:center center;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.wallpaper-loading-preview {
  z-index:0;
  object-fit:cover!important;
  transform:scale(1.08);
  filter:blur(24px) saturate(1.12) brightness(.74);
  opacity:0;
  transition:opacity .2s ease;
}
.wallpaper-loading-preview.visible { opacity:1; }
#wallpaperImage { z-index:1; }
#wallpaperImage.is-loading {
  background:transparent;
}
#wallpaperImage.is-replacing {
  opacity:0!important;
}
.wallpaper-video-layer {
  position:absolute;
  inset:0;
  z-index:2;
  background:#000;
  overflow:hidden;
}
.wallpaper-video-layer[hidden] { display:none; }
.wallpaper-video-poster-blur,
.wallpaper-video-poster-cover {
  z-index:0;
  object-fit:contain!important;
  opacity:1;
  transition:opacity .22s ease,filter .22s ease;
}
.wallpaper-video-poster-blur { object-fit:cover!important;transform:scale(1.08);filter:blur(24px) saturate(1.12) brightness(.74); }
.wallpaper-video-poster-cover { opacity:0;filter:blur(8px); }
.wallpaper-video-layer.cover-ready .wallpaper-video-poster-cover { opacity:1;filter:none; }
.wallpaper-video-layer.cover-ready .wallpaper-video-poster-blur,
.wallpaper-video-layer.is-playing.video-ready .wallpaper-video-poster-blur,
.wallpaper-video-layer.is-playing.video-ready .wallpaper-video-poster-cover { opacity:0; }
.wallpaper-video-layer.is-video-loading::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  box-sizing:border-box;
  border:3px solid #ffffff52;
  border-top-color:#7dd3fc;
  border-radius:50%;
  background:#02061742;
  box-shadow:0 0 0 7px #02061742,0 5px 18px #00000070;
  pointer-events:none;
  animation:fullscreenMediaSwitchSpin .72s linear infinite;
}
.wallpaper-video {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#000;
  opacity:0;
  transition:opacity .22s ease;
}
.wallpaper-video-layer.is-playing.video-ready .wallpaper-video { opacity:1; }
.video-performance-stats {
  position:absolute;
  right:70px;
  top:14px;
  z-index:5;
  max-width:calc(100% - 32px);
  padding:5px 8px;
  border:1px solid #ffffff2b;
  border-radius:5px;
  color:#dbeafe;
  background:#020617b8;
  font:600 11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.video-control-bar {
  position:absolute;
  left:16px;
  top:14px;
  z-index:6;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.video-control-bar button {
  min-width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 10px;
  border:1px solid #ffffff28;
  border-radius:999px;
  background:#00000052;
  color:#dce8f7;
  box-shadow:0 10px 22px #0000002f,inset 0 1px 0 #ffffff18;
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  font-size:12px;
  font-weight:800;
}
.video-control-icon {
  width:21px;
  height:21px;
  display:block;
  flex:none;
  background:currentColor;
  opacity:.94;
  -webkit-mask:center / contain no-repeat;
  mask:center / contain no-repeat;
}
.video-control-bar [data-video-action="play"][data-video-state="paused"] .video-control-icon {
  -webkit-mask-image:url("./assets-v590/images/icons/icon-play.svg");
  mask-image:url("./assets-v590/images/icons/icon-play.svg");
}
.video-control-bar [data-video-action="play"][data-video-state="playing"] .video-control-icon {
  -webkit-mask-image:url("./assets-v590/images/icons/icon-pause.svg");
  mask-image:url("./assets-v590/images/icons/icon-pause.svg");
}
.video-control-bar [data-video-action="mute"][data-video-state="muted"] .video-control-icon {
  -webkit-mask-image:url("./assets-v590/images/icons/icon-volume-off.svg");
  mask-image:url("./assets-v590/images/icons/icon-volume-off.svg");
}
.video-control-bar [data-video-action="mute"][data-video-state="sound"] .video-control-icon {
  -webkit-mask-image:url("./assets-v590/images/icons/icon-volume-on.svg");
  mask-image:url("./assets-v590/images/icons/icon-volume-on.svg");
}
.video-control-bar [data-video-action="speed"] .video-control-icon {
  -webkit-mask-image:url("./assets-v590/images/icons/icon-speed.svg");
  mask-image:url("./assets-v590/images/icons/icon-speed.svg");
}
.video-control-bar [data-video-action="cache"] .video-control-icon {
  color:#22c55e;
  -webkit-mask-image:url("./assets-v590/images/icons/icon-buffered.svg");
  mask-image:url("./assets-v590/images/icons/icon-buffered.svg");
}
.video-control-bar [data-video-action="clear-cache"] .video-control-icon {
  color:#fde68a;
  -webkit-mask-image:url("./assets-v590/images/icons/icon-clear.svg");
  mask-image:url("./assets-v590/images/icons/icon-clear.svg");
}
.video-control-bar button span {
  min-width:0;
  color:#dce8f7;
  font-size:12px;
  font-weight:900;
  line-height:1;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.video-control-bar .video-control-button:not(.video-speed-button) {
  width:38px;
  padding:0;
}
.video-control-bar .video-speed-button {
  width:88px;
  min-width:88px;
  padding:8px 9px;
  flex:none;
}
.video-speed-value {
  width:38px;
  flex:0 0 38px;
}
.video-control-bar [data-video-action="mute"] {
  border-color:#f87171cc;
  box-shadow:0 0 0 1px #f8717130,0 10px 22px #00000028,inset 0 1px 0 #ffffff18;
}
.video-control-bar [data-video-action="mute"] .video-control-icon {
  color:#fee2e2;
}
.video-control-bar [data-video-action="cache"] {
  position:relative;
  border-color:#22c55e66;
  box-shadow:0 0 0 1px #22c55e24,0 10px 22px #00000028,inset 0 1px 0 #ffffff18;
}
.video-control-bar [data-video-action="cache"]::before,
.video-control-bar [data-video-action="cache"]::after {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  pointer-events:none;
  animation:video-cache-orbit 2.8s linear infinite;
}
.video-control-bar [data-video-action="cache"]::before {
  inset:-1px;
  background:conic-gradient(from -40deg,transparent 0deg,#22c55e 40deg,transparent 41deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 0);
  mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 0);
}
.video-control-bar [data-video-action="cache"]::after {
  background:radial-gradient(circle at 50% 2px,#22c55e 0 .9px,#22c55e66 1.3px,transparent 1.8px);
}
@keyframes video-cache-orbit { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
  .video-control-bar [data-video-action="cache"]::before,
  .video-control-bar [data-video-action="cache"]::after { animation:none; }
}
.video-control-bar [data-video-action="cache"][hidden] {
  display:none;
}
.video-control-bar [data-video-action="clear-cache"][hidden] { display:none; }
.video-control-bar [data-video-action="clear-cache"] { border-color:#fbbf2466; }
.video-control-bar [data-video-action="clear-cache"]:hover { border-color:#fbbf24;background:#78350f55; }
.video-control-bar button:hover {
  border-color:#ffffff48;
  background:#ffffff18;
  color:white;
}
.video-control-bar [data-video-action="cache"]:hover {
  border-color:#4ade80;
  background:#14532d42;
}
.video-control-bar [data-video-action="mute"]:hover {
  border-color:#fb7185;
  background:#7f1d1d42;
}
.thumbnail-video-live {
  position:absolute;
  left:5px;
  top:5px;
  z-index:3;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid #ffffff42;
  border-radius:999px;
  background:#000000a8;
  box-shadow:0 4px 12px #0000003d;
  animation:video-live-breathe 2.4s ease-in-out infinite;
}
.thumbnail-video-live img {
  width:20px;
  height:20px;
  display:block;
  object-fit:contain;
}
.chat-video-live {
  left:7px;
  top:7px;
  width:30px;
  height:30px;
}
.chat-video-live img {
  width:21px;
  height:21px;
}
@keyframes video-live-breathe {
  0%,100% {
    transform:scale(0.95);
    box-shadow:0 4px 12px #0000003d;
  }
  50% {
    transform:scale(1.06);
    box-shadow:0 4px 14px #ffffff30,0 4px 12px #0000003d;
  }
}
.thumbnail-video-badge {
  position:absolute;
  left:5px;
  bottom:5px;
  z-index:2;
  padding:2px 5px;
  border-radius:5px;
  background:#000000a8;
  color:#facc15;
  font-size:11px;
  line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.thumbnail-video-badge.is-cached,
.thumbnail-image-cache-badge {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #22c55e66;
  border-radius:999px;
  background:#000000a8;
  box-shadow:0 0 0 1px #22c55e24,0 6px 14px #00000030;
}
.thumbnail-video-badge.is-cached img,
.thumbnail-item .thumbnail-image-cache-badge img {
  width:14px;
  height:14px;
  display:block;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(58%) sepia(76%) saturate(507%) hue-rotate(90deg) brightness(95%) contrast(91%);
}
.thumbnail-image-cache-badge {
  position:absolute;
  left:5px;
  top:5px;
  z-index:2;
}
.thumbnail-image-cache-badge[hidden] { display:none; }
.thumbnail-carousel-badge {
  position:absolute;
  left:5px;
  top:5px;
  z-index:2;
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border:1px solid #60a5fa88;
  border-radius:999px;
  background:#000000a8;
  box-shadow:0 0 0 1px #60a5fa24,0 0 8px #60a5fa30;
  pointer-events:none;
}
.thumbnail-image-cache-badge:not([hidden]) ~ .thumbnail-carousel-badge { left:31px; }
.thumbnail-carousel-badge::before {
  content:"";
  width:15px;
  height:15px;
  background:#60a5fa;
  -webkit-mask:url('./assets-v590/images/icons/carousel.svg') center/contain no-repeat;
  mask:url('./assets-v590/images/icons/carousel.svg') center/contain no-repeat;
}
.thumbnail-carousel-badge[hidden] { display:none; }
.video-viewer {
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  background:#000;
  overflow:hidden;
}
.video-viewer.open { display:block; }
.video-viewer.open.is-video-loading::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  box-sizing:border-box;
  border:3px solid #ffffff52;
  border-top-color:#7dd3fc;
  border-radius:50%;
  background:#02061742;
  box-shadow:0 0 0 7px #02061742,0 5px 18px #00000070;
  pointer-events:none;
  animation:fullscreenMediaSwitchSpin .72s linear infinite;
}
.video-viewer.native-viewport-synced,
.image-viewer.native-viewport-synced {
  inset:auto;
  top:var(--native-viewport-top);
  left:var(--native-viewport-left);
  width:var(--native-viewport-width);
  height:var(--native-viewport-height);
}
.video-viewer-media {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#000;
}
.video-viewer-close { z-index:6; }
.video-viewer.open.controls-visible .viewer-close { opacity:1;pointer-events:auto; }
body[data-mode="display"] .video-viewer.open .viewer-close-left { display:grid; }
.video-viewer-controls { display:none; }
body[data-mode="display"] .video-viewer.open.show-clock .video-viewer-clock { display:flex; }
.wallpaper-effect-canvas {
  position:absolute;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:normal;
}
.wallpaper-screen.effect-canvas-active #wallpaperImage { opacity:0; }
.wallpaper-screen.effect-highlightGlow #wallpaperImage,
.wallpaper-screen.effect-edgeFlow #wallpaperImage { opacity:1; }
.wallpaper-screen.effect-debug-view #wallpaperImage { opacity:0!important; }
.screen-empty { position:relative;z-index:2;width:min(560px,90%);display:flex;flex-direction:column;align-items:center;text-align:center;color:white;padding:30px; }
.screen-room-loading {
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#dbeafe;
  background:#05070a;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  pointer-events:none;
}
.screen-room-loading[hidden] { display:none; }
.screen-room-loading::before {
  content:'';
  width:16px;
  height:16px;
  border:2px solid #93c5fd55;
  border-top-color:#93c5fd;
  border-radius:50%;
  animation:screenRoomLoadingSpin .8s linear infinite;
}
body.display-room-loading #thumbnailPanel { visibility:hidden; }
body[data-channel='showcase'] .screen-room-loading { display:none!important; }
@keyframes screenRoomLoadingSpin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
  .screen-room-loading::before { animation:none; }
}
.screen-device { display:inline-block;margin-bottom:14px;padding:6px 10px;border:1px solid #ffffff2d;border-radius:999px;color:#b6c1d2;font-size:12px; }
.screen-empty h2 { margin:0 0 10px;font-size:32px;letter-spacing:0; }
.screen-empty p { margin:0 auto;color:#b6c1d2;line-height:1.7; }
.screen-link { margin:18px auto 0;padding:10px 12px;width:min(420px,100%);border-radius:7px;background:#ffffff12;color:#dbe5f3;font-size:12px;word-break:break-all; }
.screen-share-qr {
  --screen-qr-spinner-top:94px;
  position:relative;
  width:190px;
  margin:18px auto 0;
  padding:12px;
  display:grid;
  justify-items:center;
  /* border:1px solid #ffffff24; */
  border-radius:8px;
  /* background:#06111bcc; */
  box-shadow:0 18px 48px #00000055,inset 0 1px 0 #ffffff1e;
}
.screen-share-qr[hidden] { display:none; }
.screen-share-qr::before {
  content:"";
  position:absolute;
  z-index:2;
  top:var(--screen-qr-spinner-top);
  left:50%;
  display:none;
  width:30px;
  height:30px;
  margin:0;
  border:3px solid #ffffff24;
  border-top-color:#8fb8e8;
  border-radius:50%;
  animation:screenQrLoadingSpin .8s linear infinite;
}
.screen-share-qr.is-loading::before { display:block; }
.screen-share-qr.is-loading #screenShareQrImage,.screen-share-qr #screenShareQrImage:not([src]) { visibility:hidden; }
body[data-mode="display"][data-channel="showcase"] .screen-share-qr::before { border-color:#a9cdb926;border-top-color:#8fbea4; }
@keyframes screenQrLoadingSpin {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to { transform:translate(-50%,-50%) rotate(360deg); }
}
.screen-share-qr-visual {
  position:relative;
  width:164px;
  height:164px;
  margin:0 auto;
  border-radius:6px;
  overflow:hidden;
}
.screen-share-qr #screenShareQrImage {
  position:static;
  inset:auto;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  border-radius:inherit;
  background:white;
  object-fit:contain;
}
.screen-share-qr #screenShareQrImage[hidden] { display:none; }
.screen-share-qr span {
  display:block;
  margin-top:8px;
  color:#dbeafe;
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.screen-share-qr-help {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:max-content;
  max-width:none;
  margin:8px 0 0;
  padding:5px 9px;
  border:1px solid #ffffff1f;
  border-radius:999px;
  color:inherit;
  background:#ffffff0a;
  box-shadow:inset 0 1px 0 #ffffff0f;
  font:inherit;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}
.screen-share-qr-help #screenShareQrText { margin-top:0;font-size:inherit;line-height:inherit;white-space:inherit; }
#screenShareQr .screen-share-qr-help-icon {
  position:static;
  inset:auto;
  flex:0 0 auto;
  width:1.25em;
  height:1.25em;
  display:block;
  background:transparent;
  object-fit:contain!important;
  object-position:center;
  pointer-events:none;
  opacity:.68;
  filter:brightness(0) invert(1);
  animation:screenQrHelpBreathe 2.2s ease-in-out infinite;
}
.screen-share-qr-help:hover .screen-share-qr-help-icon,
.screen-share-qr-help:focus-visible .screen-share-qr-help-icon { opacity:1; }
.screen-share-qr-help:hover { color:#fff;background:#ffffff12;border-color:#ffffff3d;transform:translateY(-1px); }
.screen-share-qr-help:active { transform:translateY(0) scale(.98); }
.screen-share-qr-help:focus-visible { outline:2px solid #93c5fd;outline-offset:3px; }
@keyframes screenQrHelpBreathe {
  0%,100% { opacity:.58;transform:scale(.96); }
  50% { opacity:1;transform:scale(1.04); }
}
@media(prefers-reduced-motion:reduce) {
  .screen-share-qr-help-icon { animation:none!important; }
}
.image-rating-controls {
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:auto;
  transition:opacity .14s ease,visibility .14s ease;
}
.image-rating-controls[hidden] { display:none; }
body[data-mode="display"][data-channel="showcase"] .image-rating-controls { display:none!important; }
.image-rating-controls.disabled { opacity:.68; }
body.media-filter-menu-open .image-rating-controls,
body.media-filter-rating-restore-pending .image-rating-controls {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.image-rating-button {
  min-width:0;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:0;
  border-radius:0;
  padding:0;
  color:white;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  font-size:11px;
  font-weight:900;
}
.image-rating-button img {
  position:static;
  inset:auto;
  width:18px;
  height:18px;
  display:block;
  background:transparent!important;
  object-fit:contain;
  filter:none;
}
.image-rating-button span {
  min-width:12px;
  color:#fff;
  text-shadow:0 1px 3px #000000b0;
}
.image-rating-button:hover img { filter:none; }
.image-rating-button:disabled { cursor:not-allowed; }
.image-rating-button:disabled img { opacity:.76; }
.image-rating-button.active {
  color:#ff4d5f;
  background:transparent;
  box-shadow:none;
}
.image-rating-button.active span { color:#ff4d5f; }
.image-rating-button.active img { filter:brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3318%) hue-rotate(326deg) brightness(104%) contrast(101%); }
.qr-scan-box {
  margin:10px 0;
  padding:10px;
  border:1px solid #d9e4f6;
  border-radius:8px;
  background:#f8fbff;
}
.qr-scan-box.hidden { display:none; }
.qr-scan-box video {
  display:block;
  width:100%;
  max-height:260px;
  border-radius:6px;
  background:#0f172a;
  object-fit:cover;
}
.qr-scan-box p {
  margin:8px 0;
  color:#536176;
  font-size:12px;
  font-weight:700;
  text-align:center;
}
.showcase-empty-copy { display:none; }
.showcase-welcome-title {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  animation:showcaseWelcomeIn .58s ease both;
}
.showcase-welcome-title strong { font-weight:950; }
.showcase-empty-actions {
  display:none;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}
.showcase-channel-card {
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  min-height:38px;
  border:1px solid #67e8f955;
  border-radius:999px;
  padding:8px 15px;
  color:#f8fbff;
  text-align:left;
  box-shadow:0 14px 34px #00000038,inset 0 1px 0 #ffffff1f;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.showcase-empty-actions .showcase-channel-card { flex:0 0 auto; }
.showcase-channel-card-wallpaper,
.showcase-channel-card-motion { background:linear-gradient(135deg,#083344cc,#0f766e99); }
.showcase-channel-icon {
  display:grid;
  place-items:center;
  /* width:30px; */
  /* height:30px; */
  /* border:1px solid #ffffff2e; */
  /* border-radius:9px; */
  /* background:#ffffff12; */
  /* box-shadow:inset 0 1px 0 #ffffff20; */
}
.showcase-channel-icon svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.showcase-channel-copy { display:block;min-width:0; }
.showcase-channel-copy strong { display:block;overflow:hidden;font-size:13px;font-weight:900;line-height:1.2;text-overflow:ellipsis;white-space:nowrap; }
.showcase-channel-arrow { color:#ffffffa8;font-size:19px;font-weight:300;line-height:1;transition:transform .16s ease,color .16s ease; }
.showcase-channel-card:hover { transform:translateY(-1px);border-color:#ffffff52;box-shadow:0 17px 38px #00000045,inset 0 1px 0 #ffffff2b; }
.showcase-channel-card:hover .showcase-channel-arrow { color:white;transform:translateX(2px); }
.showcase-channel-card:active { transform:scale(.985); }
.showcase-channel-card:focus-visible { outline:2px solid #cffafe;outline-offset:3px; }
@media(prefers-reduced-motion:reduce) {
  .showcase-channel-card,
  .showcase-channel-arrow { transition:none; }
}
.screen-overlay {
  position:absolute;
  z-index:4;
  left:16px;
  top:14px;
  right:16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:white;
  pointer-events:none;
}
.screen-overlay span {
  min-width:0;
  max-width:min(280px,48%);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:999px;
  background:#00000066;
  backdrop-filter:blur(8px);
  font-size:12px;
}
#screenCount,.screen-overlay .screen-count {
  flex:none;
  max-width:120px;
  text-align:right;
}
body[data-mode="display"] #screenChannel { display:none; }
body[data-mode="display"] .screen-overlay { left:auto;right:16px;justify-content:flex-end; }
.effect-controls {
  --effect-select-bg:linear-gradient(180deg,#1c2a3ded,#0b1422ed);
  --effect-select-bg-hover:linear-gradient(180deg,#263850f2,#101d2df2);
  --effect-select-border:#7895b45c;
  --effect-select-border-hover:#9bc7f08c;
  --effect-select-text:#e7f3ff;
  --effect-select-arrow:#9dd9ff;
  --effect-select-shadow:0 6px 16px #00000038,inset 0 1px 0 #ffffff1c;
  --effect-scroll-track:#07111d70;
  --effect-scroll-thumb:#9ac9ed8c;
  --effect-scroll-thumb-hover:#bde5ffbd;
  position:absolute;
  left:16px;
  top:14px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  max-width:calc(100% - 32px);
}
.effect-controls[hidden] { display:none; }
html[data-theme=light] .effect-controls {
  --effect-select-bg:linear-gradient(180deg,#fffffff5,#eaf2fbf2);
  --effect-select-bg-hover:linear-gradient(180deg,#ffffff,#dfeefd);
  --effect-select-border:#aebfd3;
  --effect-select-border-hover:#6fa8e8;
  --effect-select-text:#24364d;
  --effect-select-arrow:#376b9f;
  --effect-select-shadow:0 6px 16px #18365324,inset 0 1px 0 #ffffff;
}
.effect-toggle-row,
.effect-param-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.effect-param-row {
  min-width:min(280px, calc(100vw - 56px));
  max-width:min(360px, calc(100vw - 56px));
  max-height:var(--effect-param-max-height,none);
  flex-direction:column;
  align-items:stretch;
  flex-wrap:nowrap;
  gap:6px;
  border:1px solid #ffffff24;
  border-radius:8px;
  padding:8px;
  background:#00000066;
  box-shadow:0 16px 34px #00000038,inset 0 1px 0 #ffffff16;
  backdrop-filter:blur(12px) saturate(1.25);
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  pointer-events:auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.effect-param-row[hidden] { display:none; }
.effect-perf-control-row {
  max-width:calc(100vw - 56px);
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:8px;
  pointer-events:auto;
}
.effect-perf-control-row[hidden] { display:none; }
.effect-perf-compact-wrap {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:11px;
  min-width:0;
  width:max-content;
  max-width:calc(100vw - 56px);
  flex:0 1 auto;
  pointer-events:auto;
}
.effect-perf-compact-wrap[hidden] { display:none; }
.effect-perf-row {
  width:max-content;
  min-width:0;
  max-width:calc(100vw - 56px);
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  color:#dce7f6;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  pointer-events:auto;
}
.effect-perf-compact-wrap .effect-perf-row {
  min-width:0;
  max-width:none;
  flex:0 0 auto;
}
.effect-perf-row[hidden] { display:none; }
.effect-compact-control-group {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  width:max-content;
  flex:0 0 auto;
  pointer-events:auto;
}
.effect-compact-control-group[hidden] { display:none; }
.effect-compact-actions {
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:max-content;
  max-width:100%;
}
.effect-perf-row > span {
  min-width:0;
  min-height:30px;
  order:2;
  flex:0 1 auto;
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid #ffffff1d;
  border-radius:9px;
  background:#07111dcc;
  box-shadow:0 12px 26px #0000002b;
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  font-size:11px;
  font-weight:800;
}
.effect-perf-row select {
  width:100%;
  height:100%;
  min-width:0;
  appearance:none;
  -webkit-appearance:none;
  flex:none;
  border:0;
  border-radius:999px;
  padding:0 27px 0 11px;
  color:var(--effect-select-text);
  background:transparent;
  font:inherit;
  font-size:11px;
  font-weight:900;
  line-height:1.2;
  outline:none;
  cursor:pointer;
}
.effect-perf-row select option {
  color:#e7f3ff;
  background:#132033;
  font-weight:800;
}
html[data-theme=light] .effect-perf-row select option { color:#1f3045;background:#f8fbff; }
.effect-perf-select {
  width:92px;
  min-width:92px;
  height:32px;
  min-height:32px;
  order:1;
  flex:none;
  position:relative;
  display:block;
  border:1px solid var(--effect-select-border);
  border-radius:999px;
  background:var(--effect-select-bg);
  box-shadow:var(--effect-select-shadow);
}
.effect-perf-select::after {
  content:"";
  position:absolute;
  right:11px;
  top:50%;
  width:6px;
  height:6px;
  border-right:2px solid var(--effect-select-arrow);
  border-bottom:2px solid var(--effect-select-arrow);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
  opacity:.86;
}
.effect-perf-select:hover {
  border-color:var(--effect-select-border-hover);
  background:var(--effect-select-bg-hover);
}
.effect-perf-select:focus-within {
  border-color:var(--category-accent);
  box-shadow:0 0 0 3px rgba(var(--category-accent-rgb),.22),var(--effect-select-shadow);
}
.effect-toggle {
  min-height:30px;
  border:1px solid #ffffff28;
  border-radius:999px;
  padding:6px 10px;
  color:#dce8f7;
  background:#00000052;
  box-shadow:0 10px 22px #0000002f,inset 0 1px 0 #ffffff18;
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  font-size:11px;
  font-weight:800;
}
.image-cache-status {
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border-color:#22c55e66;
  background:#00000052;
  box-shadow:0 0 0 1px #22c55e24,0 10px 22px #0000002f,inset 0 1px 0 #ffffff18;
}
.image-cache-status[hidden] { display:none; }
.image-cache-status-icon {
  width:16px;
  height:16px;
  display:block;
  background:#22c55e;
  -webkit-mask:url("./assets-v590/images/icons/icon-buffered.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-buffered.svg") center / contain no-repeat;
}
.effect-param {
  min-height:30px;
  display:grid;
  grid-template-columns:minmax(72px, 1fr) minmax(112px, 1.6fr) 26px;
  align-items:center;
  gap:6px;
  border:0;
  border-radius:6px;
  padding:5px 6px;
  color:#dce8f7;
  background:#ffffff08;
  font-size:11px;
  font-weight:800;
  cursor:default;
}
.effect-param-check {
  grid-template-columns:auto 1fr;
  justify-content:start;
}
.effect-param-select {
  grid-template-columns:minmax(72px, 1fr) minmax(112px, 1.6fr);
}
.effect-param-segmented {
  grid-template-columns:minmax(72px, 1fr) minmax(112px, 1.6fr);
}
.effect-param-segments {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:2px;
  min-width:0;
  padding:2px;
  border:1px solid #ffffff20;
  border-radius:7px;
  background:#050b14a8;
}
.effect-param-segment {
  min-width:0;
  min-height:22px;
  border:0;
  border-radius:5px;
  padding:3px 6px;
  color:#b9c7d8;
  background:transparent;
  font:inherit;
  font-size:11px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}
.effect-param-segment.active {
  color:#07111e;
  background:linear-gradient(180deg,#f7fbff,#a9d9ff);
  box-shadow:0 0 0 1px #ffffff40,0 6px 14px #7bc8ff22;
}
.effect-param-segment:not(.active):hover {
  color:#ffffff;
  background:#ffffff12;
}
.effect-param input[type="range"] { width:100%;accent-color:#cfe4ff; }
.effect-param input[type="checkbox"] { width:14px;height:14px;accent-color:#cfe4ff; }
.effect-param select {
  width:100%;
  min-width:0;
  border:1px solid #ffffff24;
  border-radius:7px;
  padding:4px 7px;
  color:white;
  background:#0d1420cc;
  font:inherit;
  font-size:11px;
  outline:none;
}
.effect-param select:focus { border-color:#cfe4ff;box-shadow:0 0 0 2px #cfe4ff24; }
.effect-param output { min-width:22px;text-align:right;color:white; }
.effect-param-toggle,
.effect-sound-toggle {
  width:86px;
  min-width:86px;
  height:30px;
  min-height:30px;
  box-sizing:border-box;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:none;
  line-height:1;
}
.effect-toggle-label {
  display:inline-block;
  line-height:1;
}
.effect-param-icon,
.effect-sound-icon {
  width:14px;
  height:14px;
  display:block;
  background:currentColor;
  pointer-events:none;
}
.effect-param-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-sliders.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-sliders.svg") center / contain no-repeat;
}
.effect-sound-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-volume-on.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-volume-on.svg") center / contain no-repeat;
}
.effect-sound-toggle:not(.active) {
  border-color:#f87171cc;
  box-shadow:0 0 0 1px #f8717130,0 10px 22px #00000028;
}
.effect-param-toggle:not(.active) {
  border-color:#f8d37b99;
  box-shadow:0 0 0 1px #f8d37b36,0 10px 22px #0000002f,inset 0 1px 0 #fff4;
}
.effect-sound-toggle:not(.active) .effect-sound-icon {
  -webkit-mask:url("./assets-v590/images/icons/icon-volume-off.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-volume-off.svg") center / contain no-repeat;
}
.effect-sound-toggle:not(.active):hover {
  border-color:#fca5a5;
  box-shadow:0 0 0 1px #fca5a545,0 12px 24px #00000032;
}
.effect-param-toggle:not(.active):hover {
  border-color:#ffe0a3cc;
  box-shadow:0 0 0 1px #ffe0a34a,0 12px 24px #00000032,inset 0 1px 0 #fff5;
}
.effect-toggle:hover { border-color:#ffffff48;background:#ffffff18;color:white; }
.effect-toggle.active {
  color:#07111f;
  background:linear-gradient(135deg,#ffffff,#cfe4ff);
  border-color:#ffffffd8;
  box-shadow:0 12px 26px #00000038,inset 0 1px 0 #ffffff;
}
.effect-toggle[data-effect="chromatic"].active,
.effect-toggle[data-effect="highlightGlow"].active,
.effect-toggle[data-effect="edgeFlow"].active,
.effect-toggle[data-effect="rainGlass"].active {
  color:#fff8ed;
  background:linear-gradient(135deg,#7c2d12,#b45309 54%,#eab308);
  border-color:#f8d37b;
  box-shadow:0 12px 26px #00000042,0 0 18px #b4530938,inset 0 1px 0 #fff4;
}
.effect-toggle[data-effect="chromatic"].active:hover,
.effect-toggle[data-effect="highlightGlow"].active:hover,
.effect-toggle[data-effect="edgeFlow"].active:hover,
.effect-toggle[data-effect="rainGlass"].active:hover {
  color:#fffdf7;
  border-color:#ffe0a3;
  background:linear-gradient(135deg,#8b3416,#c15d0b 54%,#f1bd28);
}
.wallpaper-screen.effect-chromatic #wallpaperEffectCanvas,
.wallpaper-screen.effect-highlightGlow #wallpaperEffectCanvas,
.wallpaper-screen.effect-edgeFlow #wallpaperEffectCanvas,
.wallpaper-screen.effect-rainGlass #wallpaperEffectCanvas { display:block; }
.wallpaper-screen.effect-kenburns #wallpaperImage {
  animation:kenburns-drift 22s ease-in-out infinite alternate;
  transform-origin:center center;
}
.wallpaper-screen.effect-float #wallpaperImage {
  animation:image-float 6s ease-in-out infinite;
  transform-origin:center center;
}
.screen-nav {
  position:absolute;
  top:50%;
  z-index:2;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--glass-border);
  border-radius:50%;
  color:white;
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  font-size:26px;
  font-weight:400;
  line-height:1;
  padding:0 0 4px;
  transform:translateY(-50%);
  opacity:1;
  transition:opacity .16s ease,transform .12s ease,border-color .12s ease;
}
.screen-nav-prev { left:14px; }
.screen-nav-next { right:14px; }
.screen-media-actions {
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.screen-fullscreen {
  border:1px solid var(--glass-border);
  border-radius:999px;
  min-height:36px;
  padding:8px 12px;
  color:white;
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  font-size:12px;
  font-weight:800;
  opacity:1;
  transition:.2s;
}
.screen-fit-toggle {
  display:flex;
  align-items:center;
  min-height:36px;
  padding:3px;
  border:1px solid var(--glass-border);
  border-radius:999px;
  color:white;
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
}
.screen-fit-toggle.fit-ratio-attention{position:relative}
.screen-fit-toggle.fit-ratio-attention::after{content:"";position:absolute;inset:-2px;border:2px solid #ff5967;border-radius:inherit;box-shadow:0 0 12px #ff3f5073;pointer-events:none;animation:viewer-fit-ratio-breathe 1.8s ease-in-out infinite;will-change:transform,opacity}
@keyframes viewer-fit-ratio-breathe{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.screen-fit-toggle.fit-ratio-attention::after{animation:none;opacity:.8}}
.screen-fit-toggle[hidden],
.screen-fullscreen[hidden] {
  display:none!important;
}
.screen-fit-toggle button {
  min-width:44px;
  height:28px;
  border:0;
  border-radius:999px;
  color:#ffffffcc;
  background:transparent;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.screen-fit-toggle button[aria-pressed="true"] {
  color:#07111f;
  background:linear-gradient(135deg,#ffffff,#d8efff);
  box-shadow:inset 0 1px 0 #ffffff,0 8px 18px #00000024;
}
.screen-fit-toggle button.fit-warning[aria-pressed="true"] {
  color:#fff4f4;
  background:linear-gradient(135deg,#d96b72,#a93f4a);
  box-shadow:inset 0 1px 0 #ffffff52,0 8px 18px #6f1d272e;
}
.screen-fit-toggle button:focus-visible {
  outline:2px solid #8fd7ff;
  outline-offset:2px;
}
.screen-nav:hover { transform:translateY(-50%) scale(1.06);background:linear-gradient(135deg,#ffffff62,#ffffff2c);border-color:#ffffff82;box-shadow:0 18px 46px #00000045,inset 0 1px 0 #ffffff90; }
.screen-nav:active { transform:translateY(-50%) scale(.96); }
.screen-fullscreen:hover { transform:translateY(-1px);background:linear-gradient(135deg,#ffffff58,#ffffff26);border-color:#ffffff78;box-shadow:0 18px 46px #00000045,inset 0 1px 0 #ffffff90; }
.screen-fullscreen:active { transform:scale(.98); }

@keyframes kenburns-drift {
  0% { transform:scale(1) translate3d(-1.6%,-1.1%,0); }
  50% { transform:scale(1.07) translate3d(1.8%,1.1%,0); }
  100% { transform:scale(1.12) translate3d(-.9%,1.6%,0); }
}
@keyframes image-float {
  0%,100% { transform:translate3d(0,0,0); }
  50% { transform:translate3d(0,-14px,0); }
}

.thumbnail-panel {
  display:none;
  flex:none;
  min-height:126px;
  padding:10px 22px 14px;
  border-top:1px solid var(--header-line);
  background:linear-gradient(180deg,#f4f8fc 0%,#edf3f8 100%);
  box-shadow:inset 0 1px 0 #ffffff,0 -10px 24px #18243a0a;
}
.thumbnail-title {
  flex:none;
  display:grid;
  grid-template-columns:auto minmax(44px, 1fr) auto;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.thumbnail-title h2 { grid-column:1;margin:0;color:var(--ink);font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap; }
.thumbnail-title span { color:var(--muted);font-size:12px; }
.thumbnail-media-filter-title {
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
}
.thumbnail-media-filter-title.is-filter-enabled:hover { color:var(--accent-strong); }
.thumbnail-media-filter-title:focus-visible { outline:2px solid #2374e14d;outline-offset:3px;border-radius:2px; }
.thumbnail-title-leading {
  grid-column:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.thumbnail-title-actions {
  grid-column:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  white-space:nowrap;
}
.media-filter {
  position:relative;
  height:30px;
}
.media-filter[hidden] { display:none; }
.media-filter-trigger {
  display:flex;
  align-items:center;
  gap:5px;
  box-sizing:border-box;
  min-width:72px;
  height:30px;
  padding:4px 8px 4px 10px;
  border:1px solid #c4d3e5;
  border-radius:9px;
  background:linear-gradient(145deg,#f9fcff 0%,#e8f0f9 100%);
  box-shadow:inset 2px 0 0 var(--accent),inset 0 1px 0 #ffffffd9,0 3px 9px #18243a12;
  color:#43556d;
  font-size:12px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.media-filter-trigger > span { color:inherit; }
.media-filter-trigger:hover { border-color:#aebfd5;background:linear-gradient(145deg,#ffffff 0%,#edf4fc 100%); }
.media-filter-trigger:focus-visible { outline:2px solid #2374e14d;outline-offset:2px; }
.media-filter-trigger[aria-expanded="true"] {
  border-color:var(--accent);
  background:linear-gradient(145deg,#f7fbff 0%,#e6f0fd 100%);
  box-shadow:inset 2px 0 0 var(--accent),inset 0 1px 0 #fff,0 0 0 2px #2374e116,0 5px 14px #155ec422;
  color:var(--accent-strong);
}
.media-filter-chevron {
  width:7px;
  height:7px;
  margin-left:auto;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(2px) rotate(225deg);
  transition:transform .16s ease;
}
.media-filter-trigger[aria-expanded="true"] .media-filter-chevron { transform:translateY(-2px) rotate(45deg); }
.media-filter.is-category-filter .media-filter-trigger { min-width:106px; }
.media-filter.is-category-filter.is-developer-filter .media-filter-trigger { min-width:92px; }
.media-filter-menu {
  position:absolute;
  z-index:30;
  box-sizing:border-box;
  bottom:calc(100% + 4px);
  right:0;
  width:100%;
  max-height:min(360px,calc(100dvh - 120px));
  overflow-y:auto;
  padding:5px;
  border:1px solid #bdcde0;
  border-radius:10px;
  background:#f8fbffed;
  box-shadow:0 -12px 30px #18243a25,inset 0 1px 0 #ffffff;
  backdrop-filter:blur(14px) saturate(1.15);
  transform-origin:right bottom;
  animation:mediaFilterMenuIn .14s ease-out;
}
.media-filter-menu[hidden] { display:none; }
.media-filter-menu button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:36px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  box-shadow:none;
  color:#526278;
  font-size:12px;
  font-weight:700;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease;
}
.media-filter-menu button + button { margin-top:6px; }
.media-filter-menu button b {
  min-width:18px;
  color:#7b899c;
  font-size:11px;
  text-align:right;
}
.media-filter-menu button span { color:inherit; }
.media-filter-menu button:not(:disabled):hover { background:#2374e10d;color:var(--accent-strong); }
.media-filter-menu button:focus-visible { outline:2px solid #2374e14d;outline-offset:-2px; }
.media-filter-menu button[aria-selected="true"] {
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);
  color:#fff;
  box-shadow:0 4px 10px #155ec42c,inset 0 1px 0 #ffffff35;
}
.media-filter-menu button[aria-selected="true"] b { color:#fff; }
.media-filter-menu button:disabled { opacity:.38;cursor:not-allowed; }
.media-filter.is-category-filter .media-filter-menu {
  left:0;
  right:auto;
  width:248px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.media-filter.is-category-filter.is-developer-filter .media-filter-menu { width:216px; }
.media-filter.is-developer-filter .media-filter-menu button[data-media-filter="video"] span { color:#996600; }
.media-filter.is-developer-filter .media-filter-menu button[data-media-filter="video"][aria-selected="true"] span { color:#ffcc66; }
.media-filter.is-category-filter .media-filter-menu[hidden] { display:none; }
.media-filter.is-category-filter .media-filter-menu button + button { margin-top:0; }
@keyframes mediaFilterMenuIn {
  from { opacity:0;transform:translateY(4px) scale(.98); }
  to { opacity:1;transform:translateY(0) scale(1); }
}
.thumbnail-expand-button {
  grid-column:2;
  width:100%;
  height:30px;
  display:grid;
  place-items:center;
  min-width:0;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
}
.thumbnail-expand-button[hidden] { display:none; }
.thumbnail-expand-button img {
  width:26px;
  height:9px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  transition:transform .16s ease;
}
.thumbnail-expand-button:hover { background:transparent; }
.thumbnail-panel.is-expanded .thumbnail-expand-button img { transform:rotate(180deg); }
.thumbnail-strip {
  min-height:78px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 0 8px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:#ffffff33 transparent;
}
.thumbnail-panel.can-swipe-thumbnails:not(.is-expanded) .thumbnail-strip { touch-action:pan-x; }
.thumbnail-strip::-webkit-scrollbar { height:6px; }
.thumbnail-strip::-webkit-scrollbar-thumb { background:#ffffff33;border-radius:999px; }
.thumbnail-panel.is-expanded .thumbnail-strip {
  display:grid;
  min-height:0;
  grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
  grid-auto-rows:80px;
  align-content:start;
  overflow-x:hidden;
  overflow-y:auto;
  padding:2px 2px 8px 0;
  scroll-snap-type:none;
  max-height:var(--thumbnail-expanded-height, 236px);
}
.thumbnail-panel.can-swipe-thumbnails.is-expanded .thumbnail-strip {
  touch-action:pan-y;
  overscroll-behavior-y:contain;
}
.thumbnail-panel.is-expanded .thumbnail-strip::-webkit-scrollbar { width:6px;height:6px; }
.thumbnail-item {
  position:relative;
  width:var(--car-thumbnail-width);
  height:var(--car-thumbnail-height);
  flex:0 0 auto;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:7px;
  padding:0;
  background:#05070a;
  box-shadow:0 8px 18px #0000002d;
  scroll-snap-align:center;
}
html[data-theme="light"] .thumbnail-panel {
  background:linear-gradient(180deg,#f4f8fc 0%,#edf3f8 100%);
}
html[data-theme="light"] .thumbnail-strip {
  scrollbar-color:#b9c6d8 transparent;
}
html[data-theme="light"] .thumbnail-strip::-webkit-scrollbar-thumb {
  background:#b9c6d8;
}
html[data-theme="light"] .thumbnail-item {
  border-color:#d8e2ef;
  background:transparent;
  box-shadow:0 6px 14px #18243a12;
}
html[data-theme="light"] .thumbnail-item.active {
  border-color:#2374e1;
  box-shadow:0 0 0 2px #2374e124,0 10px 22px #18243a18;
}
.thumbnail-panel.is-expanded .thumbnail-item { width:100%;height:80px;scroll-snap-align:none; }
.thumbnail-item img { width:100%;height:100%;display:block;object-fit:cover; }
.thumbnail-index,
.thumbnail-rating-badge {
  position:absolute;
  bottom:5px;
  min-width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:white;
  background:#00000099;
  font-size:11px;
  font-weight:800;
}
.thumbnail-index { right:5px; }
.thumbnail-rating-badge {
  left:5px;
  min-width:20px;
  padding:0;
}
.video-thumbnail .thumbnail-rating-badge {
  left:auto;
  right:30px;
}
.thumbnail-rating-badge img {
  width:13px;
  height:13px;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(3318%) hue-rotate(326deg) brightness(104%) contrast(101%);
}
.thumbnail-item.active { border-color:#8bc2ff;box-shadow:0 0 0 2px #8bc2ff33,0 12px 24px #00000038; }
html[data-theme="light"] .thumbnail-item.active {
  border-color:#2374e1;
  box-shadow:0 0 0 2px #2374e124,0 10px 22px #18243a18;
}
body[data-mode="display"] .thumbnail-item.active {
  border-color:#67e8f9;
  box-shadow:0 0 0 3px #38bdf855,inset 0 0 0 1px #ffffff70,0 12px 26px #00000055;
}
html[data-theme="light"] body[data-mode="display"] .thumbnail-item.active {
  border-color:#1268d8;
  box-shadow:0 0 0 3px #2374e13d,inset 0 0 0 1px #ffffff,0 10px 24px #18243a2b;
}
.thumbnail-empty { color:#9faabd;font-size:12px;padding:22px 0;text-align:center; }
body[data-mode="display"] .thumbnail-panel.is-empty {
  min-height:52px;
  padding:8px 22px;
}
body[data-mode="display"] .thumbnail-panel.is-empty .thumbnail-title {
  margin-bottom:0;
}
body[data-mode="display"] .thumbnail-panel.is-empty .thumbnail-strip,
body[data-mode="display"] .thumbnail-panel.is-empty .thumbnail-empty {
  display:none;
}

.history-panel { flex:none;max-height:32%;min-height:150px;display:flex;flex-direction:column;background:linear-gradient(180deg,#f3f7fb 0%,var(--stage-bg) 100%);border-top:1px solid var(--header-line);box-shadow:inset 0 1px 0 #ffffffc8; }
.history-title {
  flex:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 22px 4px;
}
.history-title h2 { margin:0;font-size:13px;letter-spacing:.08em;color:var(--ink);text-transform:uppercase; }
.history-title span { color:var(--muted);font-size:12px; }
.reply-mention-notice {
  min-width:0;
  margin-left:auto;
  margin-right:12px;
  overflow:hidden;
  border:1px solid #fb923c66;
  border-radius:999px;
  padding:4px 10px;
  color:#c2410c;
  background:#fff7ed;
  box-shadow:0 5px 14px #f9731620;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reply-mention-notice:hover { border-color:#f97316;background:#ffedd5;transform:none; }
html[data-theme="dark"] .reply-mention-notice { color:#fed7aa;border-color:#fb923c70;background:#431407;box-shadow:0 5px 16px #00000038; }
html[data-theme="dark"] .reply-mention-notice:hover { border-color:#fdba74;background:#57200b; }
.messages { flex:1;min-height:0;overflow:auto;padding:8px 22px 16px; }
.welcome { text-align:center;color:var(--muted);padding:12px 0 22px; }
.welcome div { margin:auto;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--surface-bg);color:var(--muted);font-weight:800; }
.welcome h2 { margin:10px 0 5px;color:var(--ink);font-size:15px; }
.welcome p { margin:0;font-size:12px; }
.history-item { display:flex;gap:10px;margin:10px 0;align-items:flex-start;max-width:720px; }
.history-item.mine { margin-left:auto;flex-direction:row-reverse; }
.message-avatar { width:32px;height:32px;flex:none;font-size:13px; }
.message-avatar.can-mute { cursor:pointer;box-shadow:0 0 0 2px #f59e0b33; }
.message-avatar.can-mute:hover { filter:saturate(1.08) brightness(1.04); }
.message-content { min-width:0;max-width:min(100%,640px);display:flex;flex-direction:column;align-items:flex-start; }
.history-item.mine .message-content { align-items:flex-end; }
.message-meta { display:flex;align-items:center;gap:7px;max-width:100%;min-width:0;margin:0 2px 5px;color:#7b8493;font-size:11px; }
.history-item.mine .message-meta { flex-direction:row-reverse;justify-content:flex-start; }
.message-meta strong { min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#465264;font-size:12px; }
.delete-message,.reply-message,.copy-message { border:0;background:transparent;color:#9aa4b2;padding:0 3px;font-size:10px;opacity:0; }
.reply-message { color:#2b7df0; }
.messages.reply-disabled .reply-message { display:none; }
.copy-message { color:#0f8f8a; }
.history-item:hover .delete-message,.delete-message:focus,.history-item:hover .reply-message,.reply-message:focus,.history-item:hover .copy-message,.copy-message:focus { opacity:1; }
.history-body { width:fit-content;max-width:100%;min-width:0; }
.message-reply-preview {
  width:min(340px,100%);
  min-width:min(210px,100%);
  display:grid;
  gap:2px;
  margin:0 0 5px;
  padding:7px 9px;
  overflow:hidden;
  border:1px solid #bfdbfe;
  border-left:3px solid #3b82f6;
  border-radius:7px;
  color:#334155;
  background:#eff6ff;
  box-shadow:none;
  text-align:left;
}
.message-reply-preview strong { color:#1d4ed8;font-size:11px;line-height:1.3; }
.message-reply-preview span { overflow:hidden;color:#64748b;font-size:11px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap; }
.message-reply-preview:hover { border-color:#93c5fd;background:#dbeafe;transform:none; }
.history-item.reply-locate-highlight .history-body { animation:replyLocateHighlight 1.8s ease-out; }
@keyframes replyLocateHighlight {
  0%,28% { filter:drop-shadow(0 0 8px #3b82f6aa);transform:scale(1.025); }
  100% { filter:none;transform:none; }
}
.text-note {
  display:inline-block;
  max-width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:white;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:13px;
  line-height:1.55;
}
.message-link {
  display:inline;
  padding:1px 4px;
  border-radius:5px;
  color:#075fc7;
  background:linear-gradient(135deg,#dbeafe,#e0f2fe);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  font-weight:750;
  overflow-wrap:anywhere;
  text-decoration-color:#38bdf8;
  text-decoration-line:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease;
}
.message-link:visited { color:#5b4fc4; }
.message-link:hover,.message-link:focus-visible {
  color:#064da5;
  background:linear-gradient(135deg,#bfdbfe,#bae6fd);
  box-shadow:0 0 0 2px #38bdf833;
}
.message-link:focus-visible { outline:2px solid #38bdf8;outline-offset:2px; }
html[data-theme="dark"] .message-meta {
  color:#8f9caf;
}
html[data-theme="dark"] .message-meta strong {
  color:#d9e4f2;
}
html[data-theme="dark"] .copy-message {
  color:#5eead4;
}
html[data-theme="dark"] .text-note,
html[data-theme="dark"] .image-card {
  color:#edf3fb;
  background:#171f2b;
  border-color:#2d3a4d;
  box-shadow:0 8px 20px #00000024;
}
html[data-theme="dark"] .history-item.mine .text-note {
  color:#f8fbff;
  background:linear-gradient(135deg,#1d4f91,#0f766e);
  border-color:#67e8f94d;
}
html[data-theme="dark"] .message-link {
  color:#bae6fd;
  background:linear-gradient(135deg,#0c4a6eaa,#164e63aa);
  text-decoration-color:#38bdf8;
}
html[data-theme="dark"] .message-link:visited { color:#c4b5fd; }
html[data-theme="dark"] .message-link:hover,
html[data-theme="dark"] .message-link:focus-visible { color:#ecfeff;background:linear-gradient(135deg,#075985,#0e7490); }
html[data-theme="dark"] .message-reply-preview {
  color:#bfdbfe;
  background:#1e3a5f66;
  border-color:#60a5fa55;
}
html[data-theme="dark"] .message-reply-preview strong { color:#93c5fd; }
html[data-theme="dark"] .message-reply-preview span { color:#cbd5e1; }
html[data-theme="dark"] .message-reply-preview:hover { border-color:#60a5fa99;background:#1e3a5faa; }
html[data-theme="dark"] .inline-reply-mention {
  color:#93c5fd;
}
.inline-reply-mention {
  color:#1d4ed8;
  font-weight:800;
}
html[data-theme="dark"] .inline-reply-mention {
  color:#93c5fd;
}
.image-card {
  position:relative;
  border:1px solid var(--line);
  display:block;
  padding:0;
  border-radius:8px;
  overflow:hidden;
  background:white;
  box-shadow:0 4px 16px #1f2b3d14;
  text-align:left;
}
.chat-image-wrap {
  display:flex;
  align-items:center;
  gap:7px;
}
.history-item.mine .chat-image-wrap { flex-direction:row-reverse; }
.chat-image-wrap.has-image-review { flex-direction:column;align-items:flex-start;gap:5px; }
.history-item.mine .chat-image-wrap.has-image-review { flex-direction:column;align-items:flex-end; }
.image-review-note { max-width:min(260px,52vw);padding:4px 8px;border-radius:6px;font-size:11px;font-weight:800;line-height:1.4;overflow-wrap:anywhere; }
.image-review-note.pending { color:#8a5a00;background:#fff3c4; }
.image-review-note.rejected { color:#9f2018;background:#ffe1dd; }
.image-card.review-rejected .image-message { cursor:default; }
.image-expired-note { max-width:min(260px,52vw);padding:4px 8px;border-radius:6px;color:#b42318;background:#e9eef5;font-size:11px;font-weight:800;line-height:1.4; }
.image-card.image-expired .image-message { cursor:default;pointer-events:none;filter:saturate(.65) opacity(.82); }
html[data-theme="dark"] .image-review-note.pending { color:#f6d878;background:#5b430f; }
html[data-theme="dark"] .image-review-note.rejected { color:#ffb4aa;background:#59231f; }
html[data-theme="dark"] .image-expired-note { color:#ff8a80;background:#273244; }
.image-message {
  display:block;
  width:min(220px,40vw);
  height:118px;
  object-fit:cover;
}
.image-card > span {
  display:block;
  padding:7px 9px;
  color:#526070;
  font-size:11px;
  font-weight:700;
}
.image-card > .thumbnail-video-live {
  position:absolute;
  left:7px;
  top:7px;
  z-index:3;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #ffffff42;
  border-radius:999px;
  background:#000000a8;
}
.image-card > .thumbnail-video-live img {
  width:21px;
  height:21px;
  display:block;
  object-fit:contain;
}
.image-placeholder { display:none;padding:10px 11px;border-bottom:1px solid var(--line); }
.image-placeholder strong,.image-placeholder span { display:block; }
.image-placeholder strong { max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2f3a49;font-size:13px; }
.image-placeholder span { margin-top:2px;color:var(--muted);font-size:11px; }
.image-actions {
  display:flex;
  justify-content:flex-end;
  gap:4px;
  padding:5px 5px 4px;
  border-top:0;
  background:white;
}
html[data-theme="dark"] .image-card > span {
  color:#b8c4d5;
}
html[data-theme="dark"] .image-placeholder strong {
  color:#e5edf7;
}
html[data-theme="dark"] .image-actions {
  background:#151c27;
}
html[data-theme="dark"] .image-actions button,
html[data-theme="dark"] .image-actions a {
  color:#aab6c8;
}
html[data-theme="dark"] .image-actions .image-category-button {
  color:#9aa8bc;
  border:0;
  background:transparent;
  box-shadow:none;
}
html[data-theme="dark"] .image-actions .image-category-button:not(:disabled):hover {
  color:var(--category-accent);
  background:transparent;
  box-shadow:none;
}
html[data-theme="dark"] .image-actions .image-category-button.is-classified,
html[data-theme="dark"] .image-actions .image-category-button.is-classified:disabled {
  color:var(--category-accent);
  border:0;
  background:transparent;
  box-shadow:none;
}
html[data-theme="dark"] .image-actions .image-category-button:not(.is-classified) img {
  opacity:.88;
  filter:var(--category-neutral-filter);
}
.image-actions button,.image-actions a {
  border:0;
  border-radius:5px;
  padding:3px 6px;
  color:#697389;
  background:transparent;
  text-decoration:none;
  font-size:11px;
  line-height:1.35;
  font-weight:700;
  box-shadow:none;
}
.image-actions a { color:#697389;background:transparent; }
.image-actions button:hover,.image-actions a:hover { color:#1d63c7;background:#00000008;box-shadow:none;filter:none; }
.image-actions.has-chat-only { justify-content:flex-start; }
.image-actions .chat-only-image {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  margin-right:0;
  padding:0;
}
.chat-only-icon,
.image-display-note-icon {
  display:block;
  width:16px;
  height:16px;
}
.chat-only-icon { opacity:.82; }
.image-display-note-icon { opacity:.9; }
.image-actions.has-chat-only a { margin-left:auto; }
.image-actions .chat-only-image.active.user-excluded {
  color:#1d63c7;
  background:#dbeafe;
}
.image-actions .chat-only-image.active.user-excluded:hover {
  color:#174ea6;
  background:#c7ddff;
}
.image-actions .chat-only-image.active.admin-excluded,
.image-actions .chat-only-image.admin-excluded:disabled {
  color:#b42318;
  background:#ffe1dd;
  cursor:default;
  opacity:1;
}
.image-display-note {
  margin-right:auto;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  min-height:22px;
  padding:2px 6px;
  border-radius:5px;
  color:#b42318;
  background:#ffe1dd;
  font-size:11px;
  font-weight:700;
  line-height:1.35;
}
.image-display-note-detail {
  padding:0;
  border-radius:0;
  color:#64748b;
  background:transparent;
  font-weight:600;
}
.image-actions .admin-image-toggle { display:none; }
body[data-mode="remote"] .image-actions .admin-image-toggle { display:inline-flex;align-items:center;justify-content:center; }
.video-review-upload-entry { position:relative;z-index:4;align-self:flex-end;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;margin:36px 16px -88px 0;padding:0;border:1px solid #f6d878;border-radius:50%;color:#fff;background:linear-gradient(135deg,#c79416,#8a5a00);box-shadow:0 10px 28px #8a5a004d,inset 0 1px 0 #fff4bd66;font-size:12px;font-weight:900;line-height:1.12;letter-spacing:.08em;cursor:pointer; }
.video-review-upload-entry span { display:block; }
.video-review-upload-entry:active { transform:scale(.97); }
.video-review-upload-entry[hidden] { display:none!important; }
.mobile-video-upload-entry { display:none; }
.composer.mobile-video-upload-only > :not(.mobile-video-upload-entry) { display:none!important; }
.composer.mobile-video-upload-only .mobile-video-upload-entry {
  display:flex;
  flex:1;
  min-height:44px;
  align-items:center;
  justify-content:center;
  border:1px solid #f6d878;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#c79416,#8a5a00);
  box-shadow:0 8px 22px #8a5a0038,inset 0 1px 0 #fff4bd66;
  font-size:15px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}
.composer.mobile-video-upload-only .mobile-video-upload-entry:active { transform:scale(.99); }
.composer.mobile-video-upload-only .mobile-video-upload-entry[hidden] { display:none!important; }
.image-actions .pin-image.active { color:#b77900;background:#fff3c4; }
.image-actions .pin-image.active:hover { color:#9a5f00;background:#ffe89a; }
.image-actions .default-image.active { color:#0f766e;background:#d9f8ee; }
.image-actions .default-image.active:hover { color:#0d665f;background:#c3f3e4; }
.image-actions .exclude-image.active { color:#b42318;background:#ffe1dd; }
.image-actions .exclude-image.active:hover { color:#971c13;background:#ffcfc8; }
.image-actions .image-category-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:0;
  color:#778398;
  background:transparent;
  box-shadow:none;
  transition:transform .16s ease,opacity .16s ease;
}
.image-actions .image-category-button img {
  width:15px;
  height:15px;
  opacity:.72;
  filter:var(--category-neutral-filter);
  transition:filter .16s ease,opacity .16s ease,transform .16s ease;
}
.image-actions .image-category-button:not(:disabled):hover {
  background:transparent;
  box-shadow:none;
  transform:scale(1.08);
}
.image-actions .image-category-button:not(:disabled):hover img {
  opacity:1;
  filter:var(--category-neutral-filter);
}
.image-actions .image-category-button.is-classified:not(:disabled):hover img { filter:var(--category-icon-filter); }
.image-actions .image-category-button:disabled {
  color:#8993a3;
  cursor:default;
  opacity:.72;
}
.image-actions.has-readonly-category { justify-content:flex-start; }
.image-actions.has-readonly-category .image-display-note { margin-right:0; }
.image-actions.has-readonly-category a { margin-left:auto; }
.image-actions .image-category-button.is-classified,
.image-actions .image-category-button.is-classified:disabled {
  border:0;
  color:var(--category-accent-strong);
  background:transparent;
  box-shadow:none;
  opacity:1;
}
.image-actions .image-category-button.is-classified img { opacity:1;filter:var(--category-icon-filter); }
.image-actions .image-category-button.needs-category { animation:image-category-reminder .78s ease-in-out infinite alternate; }
.image-actions .image-category-button.needs-category img { filter:var(--category-neutral-filter);animation:image-category-icon-reminder .78s ease-in-out infinite alternate; }
@keyframes image-category-reminder {
  from { transform:translateY(0); }
  to { transform:translateY(-4px); }
}
@keyframes image-category-icon-reminder {
  from { opacity:.72;filter:var(--category-neutral-filter) drop-shadow(0 0 0 rgba(var(--category-neutral-glow-rgb),0)); }
  to { opacity:1;filter:var(--category-neutral-filter) drop-shadow(0 2px 4px rgba(var(--category-neutral-glow-rgb),.38)); }
}
body[data-mode="remote"] .display-surface,
body[data-mode="remote"] .thumbnail-panel { display:none; }
body[data-mode="remote"] .history-panel { flex:1;max-height:none;min-height:0; }
body[data-mode="display"] .thumbnail-panel { display:flex;flex-direction:column; }
body[data-mode="display"][data-channel="showcase"] .wallpaper-screen {
  background:
    radial-gradient(circle at 28% 24%, #1d4f9118, transparent 36%),
    radial-gradient(circle at 74% 70%, #0f766e14, transparent 40%),
    linear-gradient(135deg,#020407 0%,#050a10 48%,#021012 100%);
}
body[data-mode="display"][data-channel="showcase"] #wallpaperEffectCanvas {
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .75s ease;
}
body[data-mode="display"][data-channel="showcase"] .wallpaper-screen.showcase-effect-ready #wallpaperEffectCanvas { opacity:.80; }
body[data-mode="display"][data-channel="showcase"] #wallpaperImage { opacity:0!important; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty {
  display:flex!important;
  flex-direction:column;
  align-items:center;
  --showcase-empty-offset:clamp(-48px,-4vh,-24px);
  transform:translateY(var(--showcase-empty-offset));
  text-shadow:0 2px 18px #000,0 0 34px #000;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty > h2,
body[data-mode="display"][data-channel="showcase"] #screenEmpty > p { display:none!important; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy { display:block; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy h2 { margin:0 0 12px;font-size:32px;letter-spacing:0; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy p { max-width:560px;color:#c8d9e7;font-size:15px;line-height:1.75; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-device { order:0; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy { order:1; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-link { order:2; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-share-qr {
  order:3;
  border-color:#6b9f8138;
  /* background:linear-gradient(145deg,#07130fdd,#091811cc); */
  box-shadow:0 16px 38px #00000048,inset 0 1px 0 #c7ead414;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-share-qr #screenShareQrImage { background:#f4faf7; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-share-qr span { color:#a9cdb9;font-weight:700; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-actions { order:4; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-link { background:#0000004d;border:1px solid #ffffff1f; }
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-actions { display:flex; }
.showcase-mode-hint {
  position:fixed;
  z-index:25;
  max-width:min(320px, calc(100vw - 32px));
  border:1px solid #7dd3fc55;
  border-radius:999px;
  padding:11px 16px;
  color:#e9fbff;
  background:linear-gradient(135deg,#07131cf2,#082830e8);
  box-shadow:0 18px 46px #00000075,0 0 26px #0891b240,inset 0 1px 0 #ffffff28;
  font-size:14px;
  font-weight:900;
  letter-spacing:0;
  line-height:1.35;
  text-align:center;
  opacity:0;
  transform:translateY(6px) scale(.98);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,1.35,.34,1);
  touch-action:manipulation;
  overflow:visible;
}
.showcase-mode-hint[hidden] { display:none; }
.showcase-mode-hint.is-visible {
  opacity:1;
  transform:translateY(0) scale(1);
  animation:showcase-hint-pop .42s cubic-bezier(.2,1.45,.32,1),showcase-hint-glow 1.55s ease-in-out .12s 2;
}
.showcase-mode-hint::before {
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg,#38bdf855,#22c55e33);
  opacity:0;
  transform:scale(.88);
  pointer-events:none;
}
.showcase-mode-hint.is-visible::before { animation:showcase-hint-ripple 1.25s ease-out .08s 2; }
.showcase-mode-hint::after {
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  border-right:1px solid #7dd3fc55;
  border-bottom:1px solid #7dd3fc55;
  background:#082830e8;
  transform:rotate(45deg);
}
.showcase-mode-hint.hint-fullscreen {
  left:50%;
  right:auto;
  bottom:max(22px, env(safe-area-inset-bottom));
  transform:translate(-50%, 6px) scale(.98);
}
.showcase-mode-hint.hint-fullscreen.is-visible {
  transform:translate(-50%, 0) scale(1);
  animation:showcase-hint-fullscreen-pop .42s cubic-bezier(.2,1.45,.32,1),showcase-hint-glow 1.55s ease-in-out .12s 2;
}
.showcase-mode-hint.hint-fullscreen::after {
  left:50%;
  bottom:-7px;
  margin-left:-7px;
}
.showcase-mode-hint.hint-windowed {
  top:max(18px, env(safe-area-inset-top));
  right:max(18px, env(safe-area-inset-right));
}
.showcase-mode-hint.hint-windowed::after {
  left:50%;
  top:-7px;
  margin-left:-7px;
  transform:rotate(225deg);
}
@keyframes showcase-hint-pop {
  0% { opacity:0;transform:translateY(14px) scale(.9); }
  68% { opacity:1;transform:translateY(-2px) scale(1.04); }
  100% { opacity:1;transform:translateY(0) scale(1); }
}
@keyframes showcase-hint-fullscreen-pop {
  0% { opacity:0;transform:translate(-50%, 14px) scale(.9); }
  68% { opacity:1;transform:translate(-50%, -2px) scale(1.04); }
  100% { opacity:1;transform:translate(-50%, 0) scale(1); }
}
@keyframes showcase-hint-glow {
  0%,100% { box-shadow:0 18px 46px #00000075,0 0 26px #0891b240,inset 0 1px 0 #ffffff28; }
  50% { box-shadow:0 20px 52px #00000082,0 0 34px #38bdf878,inset 0 1px 0 #ffffff45; }
}
@keyframes showcase-hint-ripple {
  0% { opacity:.55;transform:scale(.88); }
  100% { opacity:0;transform:scale(1.18); }
}
body[data-mode="display"][data-channel="showcase"] .screen-overlay,
body[data-mode="display"][data-channel="showcase"] .screen-nav,
body[data-mode="display"][data-channel="showcase"] .effect-controls,
body[data-mode="display"][data-channel="showcase"] .screen-media-actions,
body[data-mode="display"][data-channel="showcase"] .thumbnail-panel { display:none!important; }
body[data-mode="display"] .history-panel,
body[data-mode="display"] .typing,
body[data-mode="display"] .composer,
body[data-mode="display"] .upload-progress { display:none; }
.file-card {
  min-width:230px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  color:inherit;
  background:var(--panel);
  text-decoration:none;
}
.file-icon { width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:7px;background:#edf4ff;color:#1d63c7;font-weight:800; }
.file-info { min-width:0; }
.file-info strong,.file-info span { display:block; }
.file-info strong { max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px; }
.file-info span { margin-top:3px;color:var(--muted);font-size:11px; }
html[data-theme="dark"] .file-card {
  color:#edf3fb;
  background:#171f2b;
  border-color:#2d3a4d;
  box-shadow:0 8px 20px #00000024;
}
html[data-theme="dark"] .file-icon {
  color:#bfdbfe;
  background:#1e3a5f66;
}
html[data-theme="dark"] .file-info span {
  color:#aab6c8;
}
.typing { height:22px;flex:none;padding:0 24px;color:var(--muted);font-size:11px;background:var(--stage-bg); }
.typing:empty { display:none; }
html[data-theme="dark"] .typing { color:#aab6c8;background:var(--stage-bg); }
.composer {
  position:relative;
  flex:none;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:10px 22px 16px;
  background:linear-gradient(180deg,#edf2f7 0%,#e5ecf4 100%);
  border-top:1px solid #d4deea;
  box-shadow:0 -12px 30px #18243a0b,inset 0 1px 0 #ffffffc8;
}
.composer textarea {
  flex:1;
  min-height:42px;
  max-height:130px;
  resize:none;
  border:1px solid var(--line);
  border-radius:12px;
  outline:0;
  padding:11px 12px;
  color:var(--ink);
  background:var(--panel);
  line-height:1.45;
}
.developer-intent-select {
  flex:0 0 124px;
  width:124px;
  min-width:124px;
  height:42px;
  max-width:124px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 8px;
  color:var(--ink);
  background:var(--panel);
  box-shadow:var(--button-shadow);
  outline:none;
}
.developer-intent-select[hidden] { display:none; }
.developer-reply-bar {
  flex:none;
  max-width:160px;
  height:42px;
  display:flex;
  align-items:center;
  gap:6px;
  border:1px solid #bfdbfe;
  border-radius:12px;
  padding:0 8px;
  color:#1d4ed8;
  background:#eff6ff;
  box-shadow:var(--button-shadow);
  font-size:12px;
}
.developer-reply-bar[hidden] { display:none; }
.developer-reply-bar span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700; }
.developer-reply-bar button {
  flex:none;
  width:20px;
  height:20px;
  border:0;
  border-radius:50%;
  color:#64748b;
  background:#ffffffb8;
  font-weight:800;
}
.attach,.send {
  flex:none;
  border:0;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:800;
}
.attach { width:42px;padding:0;background:linear-gradient(135deg,#eef4fb,#e4ebf4);color:#526070;box-shadow:var(--button-shadow);line-height:1;-webkit-appearance:none;appearance:none; }
.attach svg { display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round; }
.attach:hover { color:#1d63c7;background:linear-gradient(135deg,#f8fbff,#eaf3ff); }
.send { width:62px;background:linear-gradient(135deg,#1f2937,#111827);color:white;font-size:13px;box-shadow:0 10px 24px #1118272d,inset 0 1px 0 #ffffff1f; }
.send:hover { background:linear-gradient(135deg,#2b3444,#182234);box-shadow:0 14px 30px #1118273b,inset 0 1px 0 #ffffff2d; }
.upload-progress { display:none;flex:none;flex-direction:column;gap:10px;margin:18px 24px 5px; }
.upload-progress.active.is-visible { display:flex; }
.upload-progress-item { min-width:0;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px; }
.upload-progress-item small { grid-column:2;display:flex;align-items:center;gap:12px;min-width:0;margin:0 0 4px;color:var(--muted);font-size:12px;line-height:18px; }
.upload-progress-item small b { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500; }
.upload-progress-item small em { flex:none;margin-left:auto;white-space:nowrap;font-style:normal; }
.upload-progress-item span { grid-column:2;display:block;width:35%;height:3px;background:var(--accent);border-radius:5px;animation:loading 1s infinite ease-in-out; }
.upload-progress-cancel { display:none;grid-column:1;grid-row:1 / span 2;width:30px;min-height:25px;padding:0;border:0;border-radius:5px;background:#dc2626;cursor:pointer;align-items:center;justify-content:center; }
.upload-progress-item.is-video-task .upload-progress-cancel { display:flex; }
.upload-progress-cancel:hover { background:#b91c1c; }
.upload-progress-cancel:disabled { opacity:.55;cursor:wait; }
.upload-progress-cancel img { width:13px;height:13px;filter:brightness(0) invert(1); }
@keyframes loading { from { transform:translateX(-110%); } to { transform:translateX(310%); } }

.modal {
  position:fixed;
  inset:0;
  z-index:10;
  display:grid;
  place-items:center;
  padding:20px;
  background:#101827cc;
  backdrop-filter:blur(8px);
}
.modal-card {
  width:min(400px,100%);
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  padding:30px 18px 30px 30px;
  border-radius:8px;
  overflow-y:auto;
  background:var(--panel);
  color:var(--ink);
  text-align:center;
  box-shadow:0 30px 90px #0004;
}
.modal-icon {
  width:44px;
  height:44px;
  flex:none;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:white;
  background:#161b22;
  font-weight:800;
}
.modal h2 { margin:14px 0 7px;font-size:20px; }
.modal p { margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.65; }
.modal input,.modal textarea,.invite-paste-box {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 13px;
  outline:0;
  color:var(--ink);
  background:var(--panel);
}
.modal input:focus,.modal textarea:focus,.invite-paste-box:focus { border-color:var(--accent);box-shadow:0 0 0 3px #2374e11f; }
#roomModal .room-creation-gate {
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin:15px 0 14px;
  padding:14px 12px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:linear-gradient(145deg,var(--panel),rgba(var(--category-accent-rgb),.04));
  transition:border-color .18s ease,box-shadow .18s ease;
}
#roomModal .room-creation-gate > strong { color:var(--ink);font-size:14px; }
#roomModal .room-creation-code-inputs { display:flex;justify-content:center;gap:8px; }
#roomModal .room-creation-code-inputs input {
  width:40px;
  height:40px;
  margin-top:0;
  padding:0;
  border-radius:9px;
  text-align:center;
  font-size:20px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
#roomModal .room-creation-gate small { grid-column:1 / -1;color:var(--muted);font-size:12px;line-height:1.5; }
#roomModal .room-creation-gate.is-verified {
  border-color:#20a77870;
  box-shadow:0 0 0 3px #20a77812;
}
#roomModal input:disabled { opacity:.56;cursor:not-allowed;background:var(--soft); }
#roomModal button:disabled { opacity:.48;cursor:not-allowed;box-shadow:none; }
.modal input+input { margin-top:10px; }
.modal input+textarea { margin-top:10px;resize:vertical;line-height:1.5; }
.image-category-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  text-align:left;
}
.modal .image-category-option {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  color:var(--ink);
  background:linear-gradient(145deg,var(--panel),rgba(var(--category-accent-rgb),.025));
  box-shadow:inset 0 1px 0 #ffffff70,0 4px 11px #18243a0c;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.modal .image-category-option:hover { transform:translateY(-1px);border-color:rgba(var(--category-accent-rgb),.35); }
.modal .image-category-option.is-selected {
  border-color:var(--category-accent);
  color:var(--category-accent-strong);
  background:linear-gradient(145deg,var(--panel),var(--category-soft));
  box-shadow:inset 3px 0 0 var(--category-accent),inset 0 1px 0 #ffffffa8,0 7px 18px rgba(var(--category-accent-rgb),.16);
}
.modal .image-category-option input { width:17px;height:17px;margin:0;padding:0;box-shadow:none;accent-color:var(--category-accent); }
.modal .image-category-option span { font-size:13px;font-weight:700; }
.modal button {
  width:100%;
  border:0;
  border-radius:10px;
  margin-top:12px;
  padding:12px 13px;
  color:white;
  background:linear-gradient(135deg,#2b7df0,#1b64d8);
  font-weight:800;
  box-shadow:0 12px 26px #2374e12e,inset 0 1px 0 #ffffff35;
}
.modal-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.modal button.secondary { background:linear-gradient(135deg,#f5f7fb,#e9eef5);color:#5f6b7c;box-shadow:0 8px 18px #18243a12; }
.attach-video-hint { display:block;margin:6px 4px 0;color:var(--muted);font-size:11px;line-height:1.5; }
#pickVideoButton {
  background:linear-gradient(135deg,#34c98a,#149c68);
  color:#fff;
  box-shadow:0 10px 22px #149c6840,inset 0 1px 0 #ffffff42;
}
.modal button.danger {
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:white;
  box-shadow:0 10px 22px #ef444433,inset 0 1px 0 #ffffff40;
}
.confirm-card {
  text-align:center;
}
.confirm-icon {
  color:#fff5f5;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  box-shadow:0 12px 28px #ef444433,inset 0 1px 0 #ffffff40;
}
.confirm-card p {
  white-space:pre-line;
}
.modal button.paste-invite-button { margin:0 0 12px;background:linear-gradient(135deg,#f7fbff,#edf5ff);color:#1d63c7;border:1px solid #d7e8ff;box-shadow:0 8px 18px #1d63c714; }
.modal button.intro-rename-button { margin-top:8px;background:transparent;color:#667085;padding:8px; }
.invite-paste-box { resize:vertical;margin:0 0 12px;background:#fbfcff;font-size:12px;line-height:1.5; }
.form-error { min-height:18px;padding-top:7px;color:var(--danger);text-align:left;font-size:11px; }
.settings-card .form-error:empty { display:none; }
.conditional-field { margin-top:10px; }
.conditional-field input { margin-top:6px!important; }
.admin-hint { padding:7px 10px;border-radius:7px;background:#fff8df;color:#755d18;text-align:left;font-size:11px; }
.room-id-box { margin:18px 0 4px;padding:14px;border:1px dashed #a8bceb;border-radius:8px;background:#f5f9ff; }
.room-id-box span,.room-id-box strong { display:block; }
.room-id-box span { color:var(--muted);font-size:11px; }
.room-id-box strong { margin-top:5px;color:#1d63c7;font-size:24px;letter-spacing:.12em; }
.share-qr-box {
  position:relative;
  display:grid;
  justify-items:center;
  gap:8px;
  margin:12px 0 6px;
  padding:14px;
  border:1px solid #e1e8f3;
  border-radius:8px;
  background:#fbfdff;
}
.share-qr-box.is-loading::before {
  content:"";
  position:absolute;
  z-index:2;
  top:124px;
  left:50%;
  width:30px;
  height:30px;
  border:3px solid #8fb8e833;
  border-top-color:#3b82f6;
  border-radius:50%;
  animation:screenQrLoadingSpin .8s linear infinite;
}
.share-qr-box.is-loading > img,
.share-qr-box > img:not([src]) {
  visibility:hidden;
}
html[data-theme="dark"] .modal {
  background:#05070ad9;
}
html[data-theme="dark"] .modal-icon {
  color:#eaf6ff;
  background:#0f1724;
  box-shadow:inset 0 0 0 1px #ffffff14;
}
html[data-theme="dark"] .modal button.secondary {
  color:#d4deec;
  background:linear-gradient(135deg,#202a38,#17202d);
  box-shadow:0 8px 18px #00000024,inset 0 1px 0 #ffffff10;
}
html[data-theme="dark"] .modal button.paste-invite-button {
  color:#bfdbfe;
  background:linear-gradient(135deg,#1e3a5f66,#17202d);
  border-color:#60a5fa44;
  box-shadow:0 8px 18px #00000022;
}
html[data-theme="dark"] .modal button.intro-rename-button {
  color:#aab6c8;
}
html[data-theme="dark"] .invite-paste-box,
html[data-theme="dark"] .room-id-box,
html[data-theme="dark"] .share-qr-box {
  color:var(--ink);
  border-color:#2d3a4d;
  background:#121a25;
}
html[data-theme="dark"] .room-id-box strong {
  color:#93c5fd;
}
html[data-theme="dark"] .share-qr-box img {
  background:white;
}
html[data-theme="dark"] .admin-hint {
  color:#f8e5ad;
  background:#4a3413;
}
.share-qr-box img {
  width:220px;
  height:220px;
  display:block;
  border-radius:6px;
  background:white;
}
.share-qr-box small {
  max-width:100%;
  color:#667085;
  font-size:11px;
  line-height:1.5;
  word-break:break-all;
}
.announcement-card {
  position:relative;
  width:min(660px,100%);
  max-width:660px;
  padding:30px;
  text-align:left;
  color:#edf8ff;
  background:
    radial-gradient(circle at 18% 20%, rgba(68,168,200,.12), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(63,120,216,.16), transparent 32%),
    linear-gradient(180deg, rgba(5,25,38,.97), rgba(2,9,15,.99));
  border:1px solid rgba(64,142,170,.24);
  box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
}
.announcement-card .announcement-close-button {
  position:absolute;
  z-index:2;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  min-height:0;
  margin:0;
  padding:0;
  border:1px solid rgba(127,205,228,.28);
  border-radius:50%;
  color:#7fcde4;
  background:rgba(68,168,200,.09);
  box-shadow:0 7px 20px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.announcement-card .announcement-close-button img {
  display:block;
  width:12px;
  height:12px;
  opacity:.9;
  filter:brightness(0) saturate(100%) invert(78%) sepia(27%) saturate(748%) hue-rotate(151deg) brightness(94%) contrast(91%);
}
.announcement-card .announcement-close-button:hover {
  transform:scale(1.06);
  border-color:rgba(127,205,228,.58);
  background:rgba(68,168,200,.18);
}
.announcement-card .announcement-close-button:active { transform:scale(.94); }
.announcement-card .announcement-close-button:focus-visible { outline:2px solid #7fcde4;outline-offset:3px; }
.announcement-panel { display:block; }
.announcement-community-button {
  margin:0!important;
  padding:8px 12px!important;
  color:#7fcde4!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:13px;
}
.announcement-secondary-actions { width:min(280px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:7px auto 0; }
.announcement-secondary-actions-single { grid-template-columns:1fr; }
.announcement-secondary-actions .announcement-community-button { width:100%; }
.announcement-secondary-actions .announcement-community-button[hidden] + .announcement-preview-button { grid-column:1 / -1; }
.announcement-preview-button:hover { background:rgba(68,168,200,.12)!important; }
.notice-board-mask {
  position:absolute;
  inset:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  overflow:auto;
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.notice-board-wrap { width:min(620px,100%);position:relative;padding-top:72px;animation:noticeBoardShow .45s ease; }
.notice-board-rope { position:absolute;top:0;width:3px;height:84px;background:#94a3b8;box-shadow:0 0 0 1px #0f172a22; }
.notice-board-rope-left { left:20%;transform:rotate(-8deg); }
.notice-board-rope-right { right:20%;transform:rotate(8deg); }
.notice-board { position:relative;padding:22px;border:9px solid #64748b;border-radius:12px;background:#111827;box-shadow:0 25px 60px rgba(0,0,0,.5); }
.notice-board::before { content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.1);border-radius:7px;pointer-events:none; }
.notice-board-paper { position:relative;height:270px;padding:34px 38px 8px;overflow:hidden;border-radius:6px;background:#fff;box-shadow:0 8px 25px rgba(0,0,0,.25); }
.notice-board-pin { position:absolute;top:12px;left:50%;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;background:#ef4444;box-shadow:0 2px 5px #7f1d1d55; }
.notice-board-paper h2 { margin:8px 0 22px;color:#111827;text-align:center;font-size:30px; }
.notice-board-view { height:100%;min-height:0;display:flex;flex-direction:column; }
.notice-board-news-view { height:100%;box-sizing:border-box;padding-bottom:8px;transform:translateY(-5px); }
.notice-board-news-view h2 { margin:12px 0 14px;font-size:25px;line-height:1.15; }
.notice-board-content { min-height:0;max-height:none;flex:1 1 auto;display:block;padding-right:6px;color:#374151;font-size:17px;line-height:1.9;text-align:left;overflow-wrap:anywhere;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#60a5a0 #dbe5ef; }
.notice-board-content-body { min-height:100%;display:flex;align-items:center; }
.notice-board-content-text { width:100%;white-space:pre-wrap; }
.notice-board-link { border-radius:4px;padding:0 2px;color:#0f766e;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere;transition:color .15s ease,background .15s ease; }
.notice-board-link:hover,.notice-board-link:focus-visible { color:#2563eb;background:#dbeafe;outline:2px solid #60a5fa;outline-offset:2px; }
.notice-board-content::-webkit-scrollbar { width:6px; }
.notice-board-content::-webkit-scrollbar-track { border-radius:999px;background:#dbe5ef; }
.notice-board-content::-webkit-scrollbar-thumb { border:1px solid #dbe5ef;border-radius:999px;background:#60a5a0; }
.notice-board-content::-webkit-scrollbar-thumb:hover { background:#3d8f8a; }
.notice-board-date { display:block;margin-top:2px;color:#64748b;text-align:right;font-size:12px; }
.notice-board-read { width:70%;flex:none;margin:12px auto 0;border:0;border-radius:8px;padding:11px 16px;color:white;background:#2563eb;font-weight:800;box-shadow:0 8px 18px #2563eb33; }
.notice-board-secondary-actions { display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px; }
.notice-board-preview-entry { padding:7px 10px;border-radius:7px;color:#2563eb;text-decoration:none;font-size:12px;font-weight:800;line-height:1.2; }
.notice-board-preview-entry:hover { background:#2563eb12; }
html[data-theme="light"] .notice-board-mask { background:rgba(77,94,113,.32);backdrop-filter:blur(4px) saturate(.9);-webkit-backdrop-filter:blur(4px) saturate(.9); }
html[data-theme="light"] .notice-board-rope { background:#94a3b8;box-shadow:0 1px 2px #33415524; }
html[data-theme="light"] .notice-board { border-color:#b9c7d8;background:linear-gradient(145deg,#eef4fa,#d7e2ed);box-shadow:0 22px 48px #3341552e,inset 0 1px 0 #ffffff; }
html[data-theme="light"] .notice-board::before { border-color:#ffffffc4;box-shadow:inset 0 0 18px #64748b12; }
html[data-theme="light"] .notice-board-paper { background:linear-gradient(180deg,#ffffff,#f5f9fd);box-shadow:0 8px 22px #3341551f,inset 0 0 0 1px #ffffff; }
html[data-theme="light"] .notice-board-pin { background:#f06456;box-shadow:0 2px 6px #9f2f2652,inset 0 1px 0 #ffffff80; }
html[data-theme="light"] .notice-board-paper h2 { color:#243244; }
html[data-theme="light"] .notice-board-content { color:#3f4d5d; }
html[data-theme="light"] .notice-board-content { scrollbar-color:#4fa39d #e4edf5; }
html[data-theme="light"] .notice-board-content::-webkit-scrollbar-track { background:#e4edf5; }
html[data-theme="light"] .notice-board-content::-webkit-scrollbar-thumb { border-color:#e4edf5;background:#4fa39d; }
html[data-theme="light"] .notice-board-date { color:#738092; }
html[data-theme="light"] .notice-board-read { color:white;background:linear-gradient(135deg,#2f80ed,#12a594);box-shadow:0 10px 22px #2374e128,inset 0 1px 0 #ffffff45; }
html[data-theme="light"] .notice-board-read:hover { background:linear-gradient(135deg,#2374df,#0f9586); }
html[data-theme="light"] .notice-board-preview-entry { color:#0f766e; }
html[data-theme="dark"] .notice-board-mask { background:rgba(2,6,23,.76); }
html[data-theme="dark"] .notice-board { border-color:#536174;background:#0d1522; }
html[data-theme="dark"] .notice-board-paper { background:#172131;box-shadow:0 8px 28px #0008,inset 0 0 0 1px #ffffff0d; }
html[data-theme="dark"] .notice-board-paper h2 { color:#f1f5f9; }
html[data-theme="dark"] .notice-board-content { color:#d5deea; }
html[data-theme="dark"] .notice-board-link { color:#7dd3fc; }
html[data-theme="dark"] .notice-board-link:hover,html[data-theme="dark"] .notice-board-link:focus-visible { color:#bae6fd;background:#164e63;outline-color:#38bdf8; }
html[data-theme="dark"] .notice-board-content { scrollbar-color:#4c7d9e #202c3b; }
html[data-theme="dark"] .notice-board-content::-webkit-scrollbar-track { background:#202c3b; }
html[data-theme="dark"] .notice-board-content::-webkit-scrollbar-thumb { border-color:#202c3b;background:#4c7d9e; }
html[data-theme="dark"] .notice-board-date { color:#94a3b8; }
html[data-theme="dark"] .notice-board-read { background:linear-gradient(135deg,#2563eb,#0f766e); }
html[data-theme="dark"] .notice-board-preview-entry { color:#7dd3fc; }
@keyframes noticeBoardShow { from { opacity:0;transform:translateY(-36px) scale(.92); } to { opacity:1;transform:none; } }
@media(max-width:600px),(max-height:650px) {
  .notice-board-mask { align-items:flex-start;padding:10px; }
  .notice-board-wrap { width:min(460px,100%);padding-top:46px; }
  .notice-board-rope { height:58px; }
  .notice-board { padding:12px;border-width:7px; }
  .notice-board-paper { height:250px;padding:30px 22px 20px; }
  .notice-board-paper h2 { margin-bottom:14px;font-size:24px; }
  .notice-board-news-view h2 { margin:6px 0 8px;font-size:22px; }
  .notice-board-content { font-size:15px;line-height:1.7; }
  .notice-board-content { max-height:none;flex:1 1 auto; }
  .notice-board-date { margin-top:14px; }
  .notice-board-read { margin:12px auto 0; }
}
.announcement-community { text-align:center; }
.group-chat-modal { z-index:30; }
.group-chat-board-paper { height:auto;min-height:320px;padding:14px 14px 6px; }
.group-chat-board-view h2 { flex:none;margin:8px 34px 14px;font-size:20px;line-height:1.15; }
.group-chat-close-icon { position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid #cbd5e1;border-radius:50%;color:#64748b;background:rgba(248,250,252,.88);box-shadow:0 3px 10px rgba(15,23,42,.1);font-size:22px;font-weight:400;line-height:1;cursor:pointer; }
.group-chat-close-icon:hover { color:#334155;border-color:#94a3b8;background:#fff; }
.group-chat-qr-grid { min-height:206px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));place-content:center;align-items:center;gap:10px;overflow-y:auto; }
.group-chat-qr-grid article { min-width:0;display:grid;justify-items:center;gap:3px;padding:6px;border:1px solid #dbe5ef;border-radius:8px;background:#f8fbfe; }
.group-chat-qr-grid article:only-child { width:min(190px,100%);grid-column:1 / -1;justify-self:center; }
.group-chat-qr-grid strong { color:#0f766e;font-size:15px; }
.group-chat-qr-grid span { max-width:100%;min-height:16px;overflow:hidden;color:#475569;font-size:11px;text-overflow:ellipsis;white-space:nowrap; }
.group-chat-qr-grid img { width:min(150px,100%);aspect-ratio:1;display:block;border:5px solid white;border-radius:6px;object-fit:contain;background:white; }
.group-chat-qr-grid .group-chat-loading-card { min-height:190px;border-color:transparent;background:transparent;align-content:center;gap:12px; }
.group-chat-loading-indicator { width:24px;height:24px;border:2px solid rgba(14,116,144,.18);border-top-color:#0e7490;border-radius:50%;animation:group-chat-loading-spin .8s linear infinite; }
@keyframes group-chat-loading-spin { to { transform:rotate(360deg); } }
.group-chat-hint { flex:none;margin:12px 0 0;color:#64748b;font-size:12px;line-height:1.5;text-align:center; }
html[data-theme="dark"] .group-chat-qr-grid article { border-color:#334155;background:#111b29; }
html[data-theme="dark"] .group-chat-qr-grid .group-chat-loading-card { border-color:transparent;background:transparent; }
html[data-theme="dark"] .group-chat-qr-grid strong { color:#7dd3fc; }
html[data-theme="dark"] .group-chat-qr-grid span { color:#cbd5e1; }
html[data-theme="dark"] .group-chat-loading-indicator { border-color:rgba(125,211,252,.2);border-top-color:#7dd3fc; }
html[data-theme="dark"] .group-chat-hint { color:#94a3b8; }
html[data-theme="dark"] .group-chat-close-icon { color:#cbd5e1;border-color:#475569;background:rgba(15,23,42,.88);box-shadow:0 3px 10px rgba(0,0,0,.24); }
html[data-theme="dark"] .group-chat-close-icon:hover { color:#fff;border-color:#64748b;background:#1e293b; }
@media(max-width:600px),(max-height:650px) {
  .group-chat-board-paper { min-height:280px;padding:12px 8px 4px; }
  .group-chat-qr-grid { min-height:180px; }
  .group-chat-qr-grid .group-chat-loading-card { min-height:164px; }
  .group-chat-qr-grid img { width:min(130px,100%); }
}
.community-qr-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.community-qr-grid article { display:grid;justify-items:center;gap:8px;padding:16px;border:1px solid rgba(68,168,200,.24);border-radius:10px;background:rgba(68,168,200,.07); }
.community-qr-grid article:only-child { width:min(300px,100%);grid-column:1 / -1;justify-self:center; }
.community-qr-grid strong { color:#7fcde4;font-size:19px; }
.community-qr-grid span { min-height:20px;color:#edf8ff;font-size:14px;overflow-wrap:anywhere; }
.community-qr-grid img { width:min(220px,100%);aspect-ratio:1;display:block;border:8px solid white;border-radius:8px;object-fit:contain;background:white; }
@media(max-width:560px) { .community-qr-grid { grid-template-columns:1fr; } }
.announcement-header { 
  text-align:center; 
  /* margin-top: 40px; */
  margin-bottom: 34px;
}
.announcement-eyebrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border:1px solid rgba(68,168,200,.26);
  border-radius:999px;
  color:#44a8c8;
  background:rgba(68,168,200,.08);
  font-size:15px;
  letter-spacing:.08em;
  margin-bottom: 12px;
}
.announcement-card h2 {
  margin:14px 0 8px;
  color:#edf8ff;
  font-size:clamp(30px,5vw,42px);
  line-height:1.12;
  letter-spacing:0;
  text-align:center;
}
.announcement-card h2.announcement-title {
  font-size:clamp(24px,3.8vw,32px);
}
.announcement-panel .announcement-header {
  margin-bottom:18px;
  padding-top:24px;
}
.announcement-panel .announcement-eyebrow {
  position:absolute;
  top:16px;
  left:20px;
  margin:0;
  padding:6px 12px;
  font-size:13px;
}
.announcement-panel .announcement-title {
  margin:16px 0 12px;
}

.donation-modal-card { position:relative;width:min(680px,100%);padding:26px;text-align:left;overflow-x:hidden; }
.modal button.donation-modal-close { position:absolute;right:15px;top:13px;width:34px;height:34px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--muted);background:transparent;box-shadow:none;font-size:24px;font-weight:500;line-height:30px;z-index:2; }
.modal button.donation-modal-close:hover { color:var(--ink);background:#94a3b814; }
.donation-back-content { display:none; }
.donation-modal-card.is-ranking .donation-close-symbol { display:none; }
.donation-modal-card.is-ranking .donation-back-content { display:inline-flex;align-items:center;gap:5px; }
.donation-back-icon { display:block;width:17px;height:17px;background:currentColor;-webkit-mask:url('./assets-v590/images/icons/icon-back-2.svg') center/contain no-repeat;mask:url('./assets-v590/images/icons/icon-back-2.svg') center/contain no-repeat; }
.modal .donation-modal-card.is-ranking button.donation-modal-close { display:flex;align-items:center;justify-content:center;width:auto;padding:0 10px;border-radius:999px;font-size:13px;font-weight:700;line-height:1; }
.donation-modal-card.is-ranking .donation-modal-heading { padding-right:78px; }
.donation-modal-heading { display:flex;align-items:center;gap:12px;padding-right:44px; }
.donation-heading-icon { width:42px;height:42px;display:block;flex:none;object-fit:contain;filter:drop-shadow(0 7px 14px #ec489935); }
.donation-heading-copy { display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0; }
.donation-modal-heading h2 { flex:none;margin:0;font-size:21px; }
.donation-modal-heading p { margin:0;font-size:12px; }
.donation-qr-intro { display:grid;justify-items:center;gap:12px;margin:22px 0 8px;padding:23px 14px;border:1px dashed var(--line);border-radius:12px;background:linear-gradient(145deg,#fffafd,#f7faff);text-align:center; }
.donation-qr-intro[hidden] { display:none; }
.donation-qr-intro strong { color:var(--ink);font-size:14px; }
.modal .donation-qr-intro button { width:auto;min-width:128px;margin:0;padding:9px 18px;border:1px solid #e9a8c35c;border-radius:999px;color:#a63a68;background:linear-gradient(135deg,#fff4f8,#f8eef5);box-shadow:0 6px 14px #9f426612; }
.modal .donation-qr-intro button:hover { color:#8f2855;border-color:#dc8aaf80;background:linear-gradient(135deg,#fff8fa,#f5e8f1);box-shadow:0 7px 16px #9f42661c; }
.donation-loading,.donation-empty { margin:22px 0 8px;padding:28px 12px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center;font-size:13px; }
.donation-qr-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px; }
.donation-qr-card { position:relative;display:grid;align-content:start;justify-items:center;gap:8px;margin:0;padding:12px 10px 10px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 12px 30px #17243a10,inset 0 1px 0 #fff; }
.donation-qr-card img { width:min(190px,100%);aspect-ratio:1;display:block;border-radius:9px;object-fit:contain;background:#fff; }
.donation-notice-card { min-height:230px; }
.donation-notice-card [hidden] { display:none!important; }
.donation-notice-state { width:min(190px,100%);aspect-ratio:1;display:grid;place-content:center;justify-items:center;gap:10px;border-radius:9px;color:var(--muted);background:linear-gradient(145deg,#f4f7fc,#edf2f8);font-size:12px;font-weight:700; }
.donation-notice-state i { width:24px;height:24px;border:3px solid #7c87f029;border-top-color:#7167e8;border-radius:50%;animation:donation-notice-spin .8s linear infinite; }
.donation-notice-state.is-error i { display:none; }
.donation-notice-retry { width:auto!important;margin:-52px 0 13px!important;padding:7px 14px!important;border:1px solid #776ee45c!important;border-radius:999px!important;color:#6158c9!important;background:#f5f3ff!important;font-size:11px!important;font-weight:800!important; }
@keyframes donation-notice-spin { to { transform:rotate(360deg); } }
.donation-qr-card figcaption { color:var(--muted);font-size:12px;font-weight:700; }
.donation-platform { position:static;display:inline-flex;align-items:center;justify-content:center;align-self:start;padding:4px 12px;border-radius:999px;color:white;font-size:14px;font-weight:800;letter-spacing:.06em;line-height:1.4;text-align:center;box-shadow:0 5px 13px #0002; }
.donation-platform.wechat { background:#16a866; }
.donation-platform.alipay { background:#1677ff; }
.donation-platform.contact { background:linear-gradient(135deg,#8b5cf6,#6366f1); }
.donation-qr-reminder { display:flex;align-items:center;justify-content:center;gap:9px;margin:10px 0 !important;padding:10px 14px;border:1px solid #db729a55;border-radius:12px;background:#fff0f5;color:#a63a68;text-align:center;font-size:15px;font-weight:500;line-height:1.6; }
.donation-qr-reminder strong { margin:0 6px;font-size:17px;font-weight:800;letter-spacing:2px; }
.donation-reminder-character { display:inline-block;animation:donation-reminder-hop 2.4s ease-in-out infinite; }
@keyframes donation-reminder-hop { 0%,24%,100%{transform:translateY(0)} 12%{transform:translateY(-4px)} }
@media(prefers-reduced-motion:reduce){.donation-reminder-character{animation:none}}
.donation-reminder-bell { width:21px;height:21px;flex:none;color:#ef4444;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 15%;animation:donation-reminder-ring 1.6s ease-in-out infinite; }
@keyframes donation-reminder-ring { 0%,50%,100%{transform:rotate(0)} 25%{transform:rotate(-12deg)} 75%{transform:rotate(12deg)} }
@media(prefers-reduced-motion:reduce){.donation-reminder-bell{animation:none}}
.donation-qr-reminder[hidden] { display:none; }
.donation-history { margin-top:10px;padding-top:16px;border-top:1px solid var(--line); }
.donation-history-title { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.donation-history-title h3 { margin:0;font-size:15px; }
.donation-history-title span { color:var(--muted);font-size:10px; }
.donation-history-list { display:grid;grid-auto-rows:38px;gap:2px;height:139px;overflow-y:auto;overscroll-behavior:contain;padding-right:3px;scrollbar-width:thin;scrollbar-color:#94a3b866 transparent; }
.donation-history-actions { display:flex;align-items:center;gap:8px; }
.modal button.donation-view-tab { flex:none;width:68px;min-height:22px;margin:0;padding:2px 6px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);box-shadow:none;font-size:10px;line-height:16px;white-space:nowrap; }
.modal button.donation-view-tab:disabled { border-color:transparent;background:transparent;color:var(--muted);font-weight:400;opacity:1;cursor:default; }
#donationRankingButton[hidden],#donationPersonalButton[hidden],#donationPersonalView[hidden] { display:none!important; }
.modal button.donation-view-tab[aria-pressed="true"] { border-color:#db277766;color:#db2777;background:#db277710;font-weight:800; }
html[data-theme="dark"] .modal button.donation-view-tab[aria-pressed="true"] { color:#f9a8d4;border-color:#f9a8d466;background:#f9a8d414; }
#donationSupportView[hidden],#donationRankingView[hidden],#donationHistoryList[hidden],#donationSupportFooter[hidden] { display:none!important; }
#donationHistoryActions[hidden],#donationRecordsTitle[hidden] { display:none!important; }
.donation-modal-card.is-ranking .donation-history-title { display:none; }
.donation-history-title { flex-wrap:wrap;gap:8px; }
.donation-modal-card .donation-ranking-subtitle,.donation-modal-card.is-ranking .donation-support-subtitle { display:none; }
.donation-modal-card.is-ranking .donation-ranking-subtitle { display:block; }
.donation-modal-card.is-personal .donation-ranking-subtitle { color:#dc2626; }
html[data-theme="dark"] .donation-modal-card.is-personal .donation-ranking-subtitle { color:#f87171; }
.donation-modal-card.is-ranking { display:flex;flex-direction:column;overflow:hidden; }
.donation-modal-card.is-ranking .donation-modal-heading,.donation-modal-card.is-ranking .donation-footer-hint,.donation-modal-card.is-ranking .donation-history-title { flex:none; }
.donation-modal-card.is-ranking .donation-history { display:flex;flex-direction:column;flex:1;min-height:0; }
.donation-modal-card.is-ranking #donationRankingView,.donation-modal-card.is-ranking #donationPersonalView { flex:1;min-height:0; }
.donation-history-list,.donation-ranking { scrollbar-width:thin;scrollbar-color:#94a3b866 transparent; }
.donation-history-list::-webkit-scrollbar,.donation-ranking::-webkit-scrollbar { width:4px; }
.donation-history-list::-webkit-scrollbar-track,.donation-ranking::-webkit-scrollbar-track { background:transparent; }
.donation-history-list::-webkit-scrollbar-thumb,.donation-ranking::-webkit-scrollbar-thumb { border-radius:999px;background:#94a3b866; }
.donation-history-item { display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:38px;padding:5px 7px;border-radius:8px; }
.donation-history-item:nth-child(odd) { background:#7180960a; }
.donation-history-avatar { width:27px;height:27px;display:grid;place-items:center;border-radius:50%;font-size:14px; }
.donation-history-avatar.anonymous { color:#fff;background:linear-gradient(135deg,#fb7185,#db2777);font-size:13px; }
.donation-history-identity { min-width:0;display:contents; }
.donation-history-identity strong,.donation-history-identity time { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.donation-history-identity strong { min-width:0;font-size:12px; }
.donation-history-identity time { color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums; }
.donation-history-amount { color:#db2777;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap; }
.donation-history-empty { padding:17px;color:var(--muted);text-align:center;font-size:12px; }
.donation-modal-card .donation-footer-hint { margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:11px;font-weight:700;line-height:1.6; }
html[data-theme="dark"] .donation-qr-card { background:linear-gradient(145deg,#17202d,#101720);box-shadow:0 12px 30px #0004,inset 0 1px 0 #ffffff0b; }
html[data-theme="dark"] .donation-notice-state { background:linear-gradient(145deg,#111a27,#0c131d); }
html[data-theme="dark"] .donation-qr-intro { background:linear-gradient(145deg,#211522,#121a25); }
html[data-theme="dark"] .modal .donation-qr-intro button { color:#e8b7cc;border-color:#b9678b52;background:linear-gradient(135deg,#33202b,#241a24);box-shadow:none; }
html[data-theme="dark"] .donation-history-amount { color:#f9a8d4; }
html[data-theme="dark"] .donation-qr-reminder { color:#f9b8d7;background:#f472b612;border-color:#f9a8d440; }

@media(max-width:600px) {
  .donation-modal-card { padding:22px 15px 16px; }
  .donation-qr-grid { gap:6px; }
  .donation-qr-card { padding:8px 3px 7px; }
  .donation-qr-card figcaption { font-size:10px; }
  .donation-platform { position:static;justify-self:center;margin-bottom:-3px;font-size:12px; }
}
.announcement-desc {
  margin:0 0 22px;
  color:#93aebe;
  font-size:18px;
  line-height:1.8;
  text-align:left;
}
.announcement-desc strong { color:#edf8ff;font-weight:700; }
.announcement-desc span { color:#ffd166;font-weight:700; }
.announcement-steps {
  list-style:none;
  display:grid;
  gap:14px;
  margin:22px 0;
  padding:0;
}
.announcement-steps li {
  display:grid;
  grid-template-columns:36px 1fr;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:8px;
  color:#dffdfa;
  background:rgba(255,255,255,.05);
  font-size:16px;
  line-height:1.65;
}
.announcement-index {
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#001b1a;
  font-weight:800;
  background:linear-gradient(135deg,#44a8c8,#3f78d8);
  box-shadow:0 0 28px rgba(68,168,200,.18);
}
.announcement-tag,
.announcement-voice {
  display:inline-flex;
  align-items:center;
  margin:0 2px;
  color:#44a8c8;
  font-weight:700;
}
.announcement-tag {
  gap:5px;
  padding:3px 8px;
  border:1px solid rgba(68,168,200,.22);
  border-radius:999px;
  background:rgba(68,168,200,.10);
  white-space:nowrap;
}
.announcement-fullscreen-tag {
  padding:4px 7px 4px 7px;
  color:#07111f;
  background:linear-gradient(135deg,#ffffff,#9fe8ff);
  border-color:rgba(255,255,255,.84);
  box-shadow:0 6px 16px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.9);
}
.announcement-fullscreen-icon {
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  font-size:16px;
  font-weight:900;
  line-height:1;
}
.announcement-note {
  margin:16px 0 0;
  color:#93aebe;
  font-size:15px;
  line-height:1.6;
  text-align:center;
}
.announcement-tips { min-height:24px;margin-top:10px;overflow:hidden;color:#44a8c8;font-size:14px;line-height:24px;text-align:center; }
.announcement-tips span { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.announcement-tips.is-scrolling span { animation:announcementTipScroll var(--announcement-tip-duration,4.4s) ease-in-out forwards; }
@keyframes announcementTipScroll {
  0% { opacity:0;transform:translateY(8px); }
  6%,94% { opacity:1;transform:translateY(0); }
  100% { opacity:0;transform:translateY(-8px); }
}
@keyframes adminNoticeSlideIn {
  from { opacity:0;transform:translateY(8px); }
  to { opacity:1;transform:translateY(0); }
}
@keyframes adminNoticeSlideOut {
  from { opacity:1;transform:translateY(0); }
  to { opacity:0;transform:translateY(-8px); }
}
@media(prefers-reduced-motion:reduce) {
  .admin-notice.is-scrolling > span,
  .admin-notice.is-entering > span,
  .admin-notice.is-exiting > span { animation:none!important; }
}
html[data-theme="light"] .announcement-tips { color:#0f766e; }
.announcement-card #closeAnnouncementButton {
  display:block;
  width:min(220px,100%);
  min-height:42px;
  margin:18px auto 0;
  color:#021316;
  background:linear-gradient(135deg,#44a8c8,#3f78d8);
  box-shadow:0 14px 38px rgba(63,120,216,.24);
}
.settings-card {
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - 40px);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  text-align:left;
  background:linear-gradient(180deg,var(--panel),var(--stage-bg));
}
.public-mute-card {
  max-width:480px;
  text-align:left;
}
.public-mute-card .modal-icon,.public-mute-card h2 { text-align:center; }
.mute-target {
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0 12px;
  padding:12px;
  border:1px solid #f1dfb4;
  border-radius:8px;
  background:#fff8df;
}
.mute-target strong,.mute-item strong { display:block;color:#1f2937;font-size:14px; }
.mute-target small,.mute-item small { display:block;margin-top:2px;color:#687384;font-size:11px;word-break:break-all; }
.mute-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:14px;
}
.mute-actions button { margin-top:0;padding:10px 8px;font-size:12px; }
.mute-list {
  max-height:260px;
  overflow:auto;
  border:1px solid #e5eaf2;
  border-radius:8px;
  background:#fbfdff;
}
.mute-empty { padding:16px;color:#687384;text-align:center;font-size:12px; }
.mute-item {
  display:grid;
  grid-template-columns:36px 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 11px;
}
.mute-item+.mute-item { border-top:1px solid #e9eef5; }
.mute-item .mini-avatar { width:34px;height:34px;font-size:13px; }
.mute-item button {
  width:auto;
  margin-top:0;
  padding:7px 10px;
  border-radius:8px;
  color:#5f6b7c;
  background:#eef2f7;
  box-shadow:none;
  font-size:12px;
}
html[data-theme="dark"] .mute-target {
  border-color:#6b4a17;
  background:#2a2117;
}
html[data-theme="dark"] .mute-target strong,
html[data-theme="dark"] .mute-item strong {
  color:#edf3fb;
}
html[data-theme="dark"] .mute-target small,
html[data-theme="dark"] .mute-item small,
html[data-theme="dark"] .mute-empty {
  color:#9aa7b8;
}
html[data-theme="dark"] .mute-list {
  border-color:#2d3a4d;
  background:#121a25;
}
html[data-theme="dark"] .mute-item+.mute-item {
  border-top-color:#2d3a4d;
}
html[data-theme="dark"] .mute-item button {
  color:#d4deec;
  background:#202a38;
}
.settings-card .modal-icon,.settings-card h2 { text-align:center; }
.settings-modal-device-icon { cursor:pointer;user-select:none; }
.settings-modal-device-icon:active { transform:scale(.96); }
.setting-name {
  padding:12px;
  border:1px solid #e5edf7;
  border-radius:10px;
  background:linear-gradient(180deg,#fbfdff,#f5f9ff);
  box-shadow:inset 0 1px 0 #ffffff;
}
.setting-name label {
  display:block;
  margin-bottom:8px;
  color:#18212f;
  font-size:14px;
  font-weight:800;
}
.setting-name-editor {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.setting-name-editor input,
#settingsAdminPasswordInput {
  min-width:0;
  border:1px solid #d8e2ef;
  background:linear-gradient(180deg,#ffffff,#f7fbff);
  box-shadow:inset 0 1px 2px #1f29370a,0 1px 0 #ffffff;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.setting-name-editor input:focus,
#settingsAdminPasswordInput:focus {
  border-color:#7db9ff;
  box-shadow:0 0 0 3px #2374e11f,inset 0 1px 2px #1f29370a;
}
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:10px;
  padding:10px 12px;
  border:1px solid #e5edf7;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#f7faff);
  box-shadow:0 8px 18px #18243a0a,inset 0 1px 0 #ffffff;
}
.setting-row > span:first-child { min-width:0; }
.setting-row span,.setting-row strong,.setting-row small { display:block; }
.setting-row strong { color:#18212f;font-size:14px; }
.setting-row small { margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45; }
.scene-code {
  display:inline-block;
  margin:0 2px;
  padding:1px 6px;
  border:1px solid #b9d8ff;
  border-radius:6px;
  color:#1555a8;
  font-weight:700;
  line-height:1.45;
  background:#eaf4ff;
}
html[data-theme="dark"] .setting-name,
html[data-theme="dark"] .setting-row {
  border-color:#2d3a4d;
  background:linear-gradient(180deg,#151e2a,#121a25);
  box-shadow:inset 0 1px 0 #ffffff0e;
}
html[data-theme="dark"] .setting-name label,
html[data-theme="dark"] .setting-row strong {
  color:#edf3fb;
}
html[data-theme="dark"] .setting-name-editor input,
html[data-theme="dark"] #settingsAdminPasswordInput {
  color:var(--ink);
  border-color:#2d3a4d;
  background:#0f1724;
  box-shadow:inset 0 1px 2px #00000033;
}
html[data-theme="dark"] .scene-code {
  color:#bfdbfe;
  border-color:#60a5fa55;
  background:#1e3a5f66;
}
.scene-recommendations {
  background:linear-gradient(180deg,#ffffff,#f7faff);
  box-shadow:0 8px 18px #18243a0a,inset 0 1px 0 #ffffff;
}
.scene-recommendations > span:first-child { width:100%; }
.setting-row .scene-recommendation-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:4px; }
.setting-row .scene-recommendation-item {
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
}
.scene-recommendation-item .scene-code { margin:0;padding:1px 4px;font-size:12px;white-space:nowrap; }
.setting-row .scene-recommendation-item small { margin:0;font-size:12px;line-height:1.3;text-align:center;white-space:nowrap; }
html[data-theme="dark"] .scene-recommendations {
  background:linear-gradient(180deg,#151e2a,#121a25);
  box-shadow:inset 0 1px 0 #ffffff0e;
}
html[data-brand="ts"] .scene-recommendations { display:none; }
.background-exit-copy-ts { display:none!important; }
html[data-brand="ts"] .background-exit-copy-xp { display:none!important; }
html[data-brand="ts"] .background-exit-copy-ts { display:block!important; }
.switch-control {
  position:relative;
  width:48px;
  height:28px;
  flex:none;
}
.switch-control input {
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.switch-control i {
  position:absolute;
  inset:0;
  border-radius:999px;
  background:linear-gradient(180deg,#e7edf5,#d9e1eb);
  box-shadow:inset 0 1px 3px #1f293720,0 1px 0 #ffffff;
  transition:background .18s ease,box-shadow .18s ease;
}
.switch-control i::after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffffff,#f4f7fb);
  box-shadow:0 4px 10px #1f29372b,inset 0 1px 0 #ffffff;
  transition:transform .18s ease;
}
.switch-control input:checked+i {
  background:linear-gradient(135deg,#2b7df0,#12a594);
  box-shadow:0 8px 18px #2374e12c,inset 0 1px 0 #ffffff4f;
}
.switch-control input:checked+i::after { transform:translateX(20px); }
.switch-control input:focus-visible+i { outline:2px solid #8bc2ff;outline-offset:2px; }
.settings-cache-row {
  display:grid;
  grid-template-columns:auto auto auto 48px;
  align-items:center;
  justify-content:space-between;
  gap:clamp(5px,1.8vw,10px);
  white-space:nowrap;
}
.settings-cache-label { font-size:13px!important; }
.settings-cache-metric {
  display:flex!important;
  align-items:center;
  gap:4px;
  min-width:0;
}
.settings-cache-metric small {
  margin:0;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.settings-cache-type-icon {
  width:15px;
  height:15px;
  flex:none;
  display:block;
  background:currentColor;
  -webkit-mask:center / contain no-repeat;
  mask:center / contain no-repeat;
}
.settings-cache-video { color:#3b82f6; }
.settings-cache-video .settings-cache-type-icon {
  -webkit-mask-image:url("./assets-v590/images/icons/icon-live.svg");
  mask-image:url("./assets-v590/images/icons/icon-live.svg");
}
.settings-cache-image { color:#16a879; }
.settings-cache-image .settings-cache-type-icon {
  -webkit-mask-image:url("./assets-v590/images/icons/icon-wall.svg");
  mask-image:url("./assets-v590/images/icons/icon-wall.svg");
}
.settings-card button.settings-cache-clear {
  width:28px;
  min-width:28px;
  height:28px;
  min-height:28px;
  justify-self:center;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:1px solid #efb8b8;
  border-radius:9px;
  color:#c45d5d;
  background:#fff1f1;
  box-shadow:inset 0 1px 0 #ffffff,0 5px 12px #9f2f2f12;
}
.settings-card button.settings-cache-clear:hover { border-color:#e29292;color:#a94343;background:#ffe7e7; }
.settings-card button.settings-cache-clear:disabled { cursor:wait;opacity:.68; }
.settings-cache-clear-icon {
  width:13px;
  height:13px;
  display:block;
  background:currentColor;
  -webkit-mask:url("./assets-v590/images/icons/icon-clear.svg") center / contain no-repeat;
  mask:url("./assets-v590/images/icons/icon-clear.svg") center / contain no-repeat;
}
html[data-theme="dark"] .settings-card button.settings-cache-clear {
  color:#f0a4a4;
  border-color:#704047;
  background:#352126;
}
html[data-theme="dark"] .settings-card button.settings-cache-clear:hover { color:#fecaca;border-color:#9c5860;background:#44282e; }
html[data-theme="dark"] .settings-cache-video { color:#7db9ff; }
html[data-theme="dark"] .settings-cache-image { color:#5dd6aa; }
.settings-cache-clear.is-clearing .settings-cache-clear-icon { animation:settingsCacheClearSpin .8s linear infinite; }
@keyframes settingsCacheClearSpin { to { transform:rotate(360deg); } }
.settings-actions {
  position:sticky;
  bottom:0;
  z-index:1;
  margin-top:0px;
}
.settings-actions #closeSettingsButton {
  color:#f8fbff;
  background:linear-gradient(135deg,#182234,#111827);
  box-shadow:0 12px 26px #1118272f,inset 0 1px 0 #ffffff22;
}
.settings-actions #closeSettingsButton:hover {
  background:linear-gradient(135deg,#22304a,#111827);
}

.image-viewer {
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#000;
  overflow:hidden;
  touch-action:none;
}
.image-viewer.open { display:flex; }
.viewer-image-stage {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  transform-origin:center center;
  will-change:transform;
}
.viewer-image-stage.effect-kenburns {
  animation:kenburns-drift 22s ease-in-out infinite alternate;
}
.viewer-image-stage.effect-float {
  animation:image-float 6s ease-in-out infinite;
}
.image-viewer img {
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:fill;
  touch-action:none;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:center;
  will-change:transform;
  opacity:0;
  transition:opacity .12s ease;
}
.image-viewer.viewport-transition .viewer-image-stage {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:none;
}
.image-viewer.viewport-transition #viewerImage {
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  opacity:1!important;
  transform:none!important;
  transition:none;
}
.image-viewer.viewport-transition.viewport-transition-contain #viewerImage { object-fit:contain; }
.image-viewer.viewport-transition #viewerEffectCanvas { opacity:0!important;visibility:hidden; }
.viewer-effect-canvas {
  position:absolute;
  left:50%;
  top:50%;
  pointer-events:none;
  transform-origin:center;
  will-change:transform;
}
.image-viewer.ready img { opacity:1; }
.image-viewer.fullscreen-entry-pending .viewer-image-stage {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:none;
}
.image-viewer.fullscreen-entry-pending #viewerImage {
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover;
  opacity:1!important;
  transform:none!important;
  transition:none;
}
.image-viewer.fullscreen-entry-pending.fullscreen-entry-contain #viewerImage { object-fit:contain; }
.image-viewer.fullscreen-entry-pending #viewerEffectCanvas { opacity:0!important;visibility:hidden; }
.image-viewer.ready .viewer-image-stage.effect-canvas-active #viewerImage { opacity:0; }
.image-viewer.ready .viewer-image-stage.effect-highlightGlow #viewerImage,
.image-viewer.ready .viewer-image-stage.effect-edgeFlow #viewerImage { opacity:1; }
.image-viewer.ready .viewer-image-stage.effect-debug-view #viewerImage { opacity:0!important; }
.viewer-clock {
  position:absolute;
  right:max(22px, env(safe-area-inset-right));
  top:calc(env(safe-area-inset-top) + 76px);
  z-index:2;
  min-width:128px;
  display:none;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  padding:10px 13px 9px;
  border:1px solid #ffffff2a;
  border-radius:8px;
  color:#fff;
  background:
    linear-gradient(135deg,#ffffff18,#ffffff08 46%,#00000018),
    linear-gradient(180deg,#00000018,#00000024);
  box-shadow:0 10px 28px #00000024,inset 0 1px 0 #ffffff2c;
  backdrop-filter:blur(10px) saturate(1.08);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  text-align:right;
  pointer-events:none;
  text-shadow:
    0 1px 2px #000000d0,
    0 4px 16px #000000a8,
    0 0 1px #000;
}
.viewer-clock::before {
  content:"";
  position:absolute;
  inset:-10px -12px -10px -18px;
  z-index:-1;
  border-radius:14px;
  background:radial-gradient(ellipse at 70% 42%,#00000030 0%,#0000001b 44%,transparent 72%);
  pointer-events:none;
}
body[data-mode="display"] .image-viewer.open.show-clock .viewer-clock { display:flex; }
.viewer-clock-time {
  font-size:clamp(32px, 5.2vh, 58px);
  line-height:.95;
  font-weight:820;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  color:#ffffff;
  filter:none;
}
.viewer-clock-date {
  font-size:clamp(12px, 1.8vh, 18px);
  line-height:1.2;
  font-weight:650;
  color:#f4f8ff;
  font-variant-numeric:tabular-nums;
  opacity:.92;
}
.viewer-native-fullscreen-ripple {
  position:absolute;
  left:50%;
  top:50%;
  z-index:8;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  color:white;
  background:
    radial-gradient(circle at 30% 22%,#ffffffd8 0 8%,transparent 25%),
    radial-gradient(circle at 44% 38%,#ffffff75 0 18%,transparent 42%),
    radial-gradient(circle at 70% 76%,#67e8f94a 0 18%,transparent 42%),
    radial-gradient(circle at 50% 50%,#ffffff4a 0 34%,#ffffff20 52%,transparent 76%);
  box-shadow:
    0 22px 62px #00000050,
    0 0 54px #bae6fd42,
    inset 0 1px 0 #ffffffd0,
    inset 11px 13px 24px #ffffff38,
    inset -16px -18px 32px #0759852b;
  backdrop-filter:blur(22px) saturate(1.65) contrast(1.12);
  -webkit-backdrop-filter:blur(10px) saturate(1.65) contrast(1.12);
  opacity:0;
  pointer-events:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transform:translate(-50%,-50%) scale(.86);
  transition:opacity .24s ease,transform .28s cubic-bezier(.2,.82,.22,1);
  overflow:visible;
  isolation:isolate;
  animation:liquid-button-breathe 5.8s ease-in-out infinite;
}
.viewer-native-fullscreen-ripple::before,
.viewer-native-fullscreen-ripple::after {
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:45% 55% 52% 48% / 48% 46% 54% 52%;
  pointer-events:auto;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
html[data-theme="dark"] #pickVideoButton {
  background:linear-gradient(135deg,#2fc58a,#14865f);
  color:#fff;
}
.viewer-native-fullscreen-ripple::before {
  inset:-20px;
  border:2px solid #ffffffb8;
  border-left-color:#ffffff20;
  border-right-color:#ffffff72;
  border-bottom-color:#ffffff30;
  background:transparent;
  box-shadow:0 0 10px #ffffff70,0 0 22px #7dd3fc55;
  animation:liquid-ring 2.55s cubic-bezier(.17,.67,.28,1) infinite;
}
.viewer-native-fullscreen-ripple::after {
  inset:-42px;
  border:1.5px solid #ffffff94;
  border-top-color:#ffffff26;
  border-left-color:#ffffff66;
  border-right-color:#ffffff1e;
  background:transparent;
  box-shadow:0 0 12px #ffffff62,0 0 30px #bae6fd4f;
  animation:liquid-ring-wide 3.1s cubic-bezier(.17,.67,.28,1) infinite .7s;
}
.viewer-native-fullscreen-ripple span {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#ffffff70 0 10%,#ffffff2a 36%,transparent 72%);
  text-shadow:0 2px 18px #00000080;
  font-size:29px;
  line-height:1;
}
.viewer-native-fullscreen-ripple .fullscreen-icon {
  width:29px;
  height:29px;
  filter:drop-shadow(0 2px 8px #00000080);
}
.image-viewer.open.needs-native-fullscreen .viewer-native-fullscreen-ripple {
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.image-viewer.open:not(.needs-native-fullscreen) .viewer-native-fullscreen-ripple,
.image-viewer.open:not(.needs-native-fullscreen) .viewer-native-fullscreen-ripple::before,
.image-viewer.open:not(.needs-native-fullscreen) .viewer-native-fullscreen-ripple::after,
.video-viewer.open:not(.needs-native-fullscreen) .viewer-native-fullscreen-ripple,
.video-viewer.open:not(.needs-native-fullscreen) .viewer-native-fullscreen-ripple::before,
.video-viewer.open:not(.needs-native-fullscreen) .viewer-native-fullscreen-ripple::after {
  animation:none;
}
.video-viewer.open.needs-native-fullscreen .viewer-native-fullscreen-ripple {
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.image-viewer.open.is-native-fullscreen .viewer-native-fullscreen-ripple,
.video-viewer.open.is-native-fullscreen .viewer-native-fullscreen-ripple {
  display:none;
}
.image-viewer.open.needs-native-fullscreen.is-native-fullscreen .viewer-native-fullscreen-ripple {
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.9);
}
.video-viewer.open.needs-native-fullscreen.is-native-fullscreen .viewer-native-fullscreen-ripple {
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.9);
}
.viewer-native-fullscreen-ripple:hover {
  background:
    radial-gradient(circle at 30% 22%,#fffffff0 0 8%,transparent 25%),
    radial-gradient(circle at 44% 38%,#ffffff90 0 18%,transparent 42%),
    radial-gradient(circle at 70% 76%,#67e8f95f 0 18%,transparent 42%),
    radial-gradient(circle at 50% 50%,#ffffff5c 0 34%,#ffffff28 52%,transparent 76%);
  transform:translate(-50%,-50%) scale(1.06);
}
.viewer-native-fullscreen-ripple:active { transform:translate(-50%,-50%) scale(.96); }
@keyframes liquid-button-breathe {
  0%,100% { border-radius:50% 46% 52% 48% / 48% 52% 46% 54%; }
  50% { border-radius:46% 54% 48% 52% / 54% 47% 53% 46%; }
}
@keyframes liquid-ring {
  0% { opacity:.92;transform:scale(.72) rotate(0deg); }
  42% { opacity:.66; }
  100% { opacity:0;transform:scale(1.72) rotate(22deg); }
}
@keyframes liquid-ring-wide {
  0% { opacity:.72;transform:scale(.62) rotate(-12deg); }
  45% { opacity:.46; }
  100% { opacity:0;transform:scale(1.48) rotate(16deg); }
}
.viewer-close {
  position:absolute;
  right:20px;
  top:16px;
  z-index:2;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid var(--glass-border);
  border-radius:50%;
  background:var(--glass-bg);
  color:white;
  line-height:1;
  padding:0;
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(10px) saturate(1.25);
  -webkit-backdrop-filter:blur(10px) saturate(1.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease,transform .12s ease,border-color .12s ease;
}
.viewer-close::before {
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:50%;
}
.viewer-close-left { left:20px;right:auto;display:none; }
.viewer-close .close-icon {
  width:18px;
  height:18px;
  filter:brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(690%) hue-rotate(177deg) brightness(103%) contrast(96%);
}
.image-viewer.open.controls-visible .viewer-close { opacity:1;pointer-events:auto; }
body[data-mode="display"] .image-viewer.open .viewer-close-left { display:grid; }
.fullscreen-media-switch-transition {
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#000;
  pointer-events:none;
  opacity:1;
  transition:opacity .20s ease-out;
}
.fullscreen-media-switch-transition.is-leaving { opacity:0; }
.fullscreen-media-switch-transition.is-cached-switch { transition:none; }
.fullscreen-media-switch-snapshot {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.fullscreen-media-switch-snapshot.is-target-preview {
  transform:scale(1.08);
  filter:blur(18px) saturate(.88) brightness(.72);
}
.fullscreen-media-switch-transition.is-cached-switch .is-target-preview {
  transform:none;
  filter:none;
}
.fullscreen-media-switch-spinner {
  position:relative;
  z-index:1;
  width:28px;
  height:28px;
  border:3px solid #ffffff52;
  border-top-color:#7dd3fc;
  border-radius:50%;
  background:#02061742;
  box-shadow:0 0 0 7px #02061742,0 5px 18px #00000070;
  animation:fullscreenMediaSwitchSpin .72s linear infinite;
}
@keyframes fullscreenMediaSwitchSpin { to { transform:rotate(360deg); } }
.fullscreen-media-strip {
  /* Keep the same fixed thumbnail size as the car-mode thumbnail panel. */
  --fullscreen-strip-thumb-height:var(--car-thumbnail-height);
  --fullscreen-strip-thumb-width:var(--car-thumbnail-width);
  /* Five thumbnail heights + four 7px gaps. The panel adds 56px for both arrows, outer gaps, padding and borders. */
  --fullscreen-strip-list-height:calc(var(--fullscreen-strip-thumb-height) + var(--fullscreen-strip-thumb-height) + var(--fullscreen-strip-thumb-height) + var(--fullscreen-strip-thumb-height) + var(--fullscreen-strip-thumb-height) + 28px);
  position:absolute;
  left:max(18px, env(safe-area-inset-left));
  top:50%;
  z-index:5;
  width:calc(var(--fullscreen-strip-thumb-width) + 16px);
  max-height:min(calc(var(--fullscreen-strip-list-height) + 56px),calc(100dvh - 36px));
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:7px;
  border:1px solid #ffffff48;
  border-radius:18px;
  background:
    linear-gradient(135deg,#ffffff20,#ffffff0b 46%,#00000016),
    linear-gradient(180deg,#14233b78,#07101f88);
  box-shadow:0 16px 42px #00000048,inset 0 1px 0 #ffffff38;
  contain:layout paint style;
  isolation:isolate;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(-42px,-50%,0);
  transition:opacity .18s ease-out,visibility .18s ease-out,transform .28s ease-out;
  will-change:opacity,transform;
  backface-visibility:hidden;
}
.fullscreen-media-strip[hidden] { display:none; }
.fullscreen-media-strip.is-right {
  right:max(18px, env(safe-area-inset-right));
  left:auto;
  transform:translate3d(42px,-50%,0);
}
.image-viewer.open > .fullscreen-media-strip.is-revealed,
.video-viewer.open > .fullscreen-media-strip.is-revealed {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,-50%,0);
}
.image-viewer.open > .fullscreen-media-strip.is-revealed:not(.is-right),
.video-viewer.open > .fullscreen-media-strip.is-revealed:not(.is-right) {
  animation:fullscreenMediaStripSlideInLeft .28s cubic-bezier(.2,.8,.2,1) both;
}
.video-viewer.open > .fullscreen-media-strip.is-revealed.is-right,
.image-viewer.open > .fullscreen-media-strip.is-revealed.is-right {
  animation:fullscreenMediaStripSlideInRight .28s cubic-bezier(.2,.8,.2,1) both;
}
.fullscreen-media-strip.is-resetting-side { animation:none!important; }
.image-viewer.open > .fullscreen-media-strip.is-revealed.is-stable,
.video-viewer.open > .fullscreen-media-strip.is-revealed.is-stable {
  animation:none;
}
@keyframes fullscreenMediaStripSlideInLeft {
  from { opacity:0;transform:translate3d(-42px,-50%,0); }
  to { opacity:1;transform:translate3d(0,-50%,0); }
}
@keyframes fullscreenMediaStripSlideInRight {
  from { opacity:0;transform:translate3d(42px,-50%,0); }
  to { opacity:1;transform:translate3d(0,-50%,0); }
}
.fullscreen-media-strip-list {
  position:relative;
  max-height:var(--fullscreen-strip-list-height);
  display:flex;
  flex-direction:column;
  gap:7px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  contain:layout paint style;
}
.fullscreen-media-strip-list::-webkit-scrollbar { display:none; }
.fullscreen-media-scroll-indicator {
  position:relative;
  left:50%;
  z-index:1;
  width:16px;
  height:12px;
  flex:0 0 12px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  box-shadow:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%);
  transition:opacity .16s ease,visibility .16s ease;
}
.fullscreen-media-scroll-indicator::before {
  content:"";
  width:0;
  height:0;
  border-right:6px solid transparent;
  border-left:6px solid transparent;
}
.fullscreen-media-scroll-indicator.is-top { top:auto; }
.fullscreen-media-scroll-indicator.is-top::before { border-bottom:7px solid #e2e8f0; }
.fullscreen-media-scroll-indicator.is-bottom { bottom:auto; }
.fullscreen-media-scroll-indicator.is-bottom::before { border-top:7px solid #e2e8f0; }
.fullscreen-media-strip.can-scroll-up .fullscreen-media-scroll-indicator.is-top,
.fullscreen-media-strip.can-scroll-down .fullscreen-media-scroll-indicator.is-bottom {
  opacity:.92;
  visibility:visible;
  transform:translateX(-50%);
  animation:none;
}
@keyframes fullscreenMediaScrollHint {
  from { transform:translate(-50%,-1px); }
  to { transform:translate(-50%,2px); }
}
.fullscreen-media-thumb {
  position:relative;
  width:var(--fullscreen-strip-thumb-width);
  height:var(--fullscreen-strip-thumb-height);
  flex:0 0 var(--fullscreen-strip-thumb-height);
  padding:0;
  overflow:hidden;
  border:2px solid transparent;
  border-radius:11px;
  background:#111827;
  box-shadow:0 2px 6px #0000004d;
  opacity:1;
  transition:border-color .15s ease;
}
.fullscreen-media-thumb.active {
  border-color:#7dd3fc;
  box-shadow:0 0 0 2px #0ea5e944,0 6px 18px #00000070;
}
.image-viewer .fullscreen-media-thumb img,
.video-viewer .fullscreen-media-thumb img {
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  display:block;
  object-fit:cover;
  opacity:1;
  transform:none;
  transition:none;
  pointer-events:none;
}
.fullscreen-video-cache-badge {
  position:absolute;
  right:4px;
  left:auto;
  bottom:4px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #94a3b866;
  border-radius:999px;
  background:#000000a8;
  box-shadow:0 0 0 1px #94a3b824,0 4px 10px #00000044;
}
.image-viewer .fullscreen-media-thumb .fullscreen-video-cache-badge img,
.video-viewer .fullscreen-media-thumb .fullscreen-video-cache-badge img {
  width:14px;
  height:14px;
  object-fit:contain;
  filter:brightness(0) saturate(100%) invert(68%) sepia(8%) saturate(608%) hue-rotate(176deg) brightness(91%) contrast(87%);
}
.fullscreen-video-cache-badge.is-cached {
  border-color:#22c55e66;
  box-shadow:0 0 0 1px #22c55e24,0 4px 10px #00000044;
}
.image-viewer .fullscreen-media-thumb .fullscreen-video-cache-badge.is-cached img,
.video-viewer .fullscreen-media-thumb .fullscreen-video-cache-badge.is-cached img {
  filter:brightness(0) saturate(100%) invert(58%) sepia(76%) saturate(507%) hue-rotate(90deg) brightness(95%) contrast(91%);
}
@media(max-width:700px), (max-height:540px) {
  .fullscreen-media-strip { left:max(9px, env(safe-area-inset-left));border-radius:15px; }
  .fullscreen-media-strip.is-right { right:max(9px, env(safe-area-inset-right));left:auto; }
  .fullscreen-media-thumb { border-radius:9px; }
}
@media(prefers-reduced-motion:reduce) {
  .image-viewer.open > .fullscreen-media-strip.is-revealed,
  .video-viewer.open > .fullscreen-media-strip.is-revealed { animation:none; }
  .fullscreen-media-scroll-indicator { animation:none!important; }
  .fullscreen-media-switch-transition { transition:none; }
  .fullscreen-media-switch-spinner { animation-duration:1.4s; }
}
.viewer-close:hover { transform:scale(1.06);background:linear-gradient(135deg,#ffffff62,#ffffff2c);border-color:#ffffff82;box-shadow:0 18px 46px #00000045,inset 0 1px 0 #ffffff90; }
.viewer-close:active { transform:scale(.96); }
.toast {
  --toast-sidebar-offset:var(--sidebar-width);
  position:fixed;
  left:calc(50% + var(--toast-sidebar-offset) / 2);
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  max-width:min(520px,calc(100% - var(--toast-sidebar-offset) - 32px));
  width:max-content;
  overflow-wrap:anywhere;
  z-index:40;
  transform:translate(-50%,10px);
  padding:16px 24px;
  border:1px solid #ffffffb8;
  border-radius:16px;
  background:radial-gradient(ellipse at 8% 0%,rgba(var(--category-accent-rgb),.06),transparent 65%),#f8fafdf5;
  color:var(--ink);
  box-shadow:0 18px 48px #18243a1c,0 4px 12px #18243a0a,0 0 0 1px #18243a0a,inset 0 1px 0 #ffffff,inset 0 -1px 0 #18243a05;
  font-size:14px;
  font-weight:500;
  line-height:1.65;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.toast[data-center="screen"] { --toast-sidebar-offset:0px;white-space:pre-line; }
.toast.show { opacity:1;transform:translate(-50%,0); }
@property --toast-edge-angle {
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)) {
  .toast::before {
    content:"";
    position:absolute;
    inset:-1px;
    padding:1px;
    border-radius:inherit;
    pointer-events:none;
    background:conic-gradient(from var(--toast-edge-angle),transparent 0deg 245deg,rgba(var(--category-accent-rgb),.12) 280deg,var(--category-accent) 325deg,transparent 360deg);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.7;
  }
  .toast.show::before { animation:toast-edge-orbit 3s linear infinite; }
}
@keyframes toast-edge-orbit {
  to { --toast-edge-angle:360deg; }
}
html[data-theme="dark"] .toast {
  background:radial-gradient(ellipse at 8% 0%,rgba(var(--category-accent-rgb),.09),transparent 65%),#191f28f5;
  border-color:#ffffff14;
  box-shadow:0 20px 52px #00000045,0 4px 14px #00000024,inset 0 1px 0 #ffffff0d,inset 0 -1px 0 #00000018;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .toast {
    background-color:#f8fafde8;
    -webkit-backdrop-filter:blur(16px) saturate(120%);
    backdrop-filter:blur(16px) saturate(120%);
  }
  html[data-theme="dark"] .toast { background-color:#191f28e8; }
}
@media(max-width:760px) {
  .toast { --toast-sidebar-offset:0px;padding:14px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .toast { transition:none;transform:translate(-50%,0); }
  .toast.show::before { animation:none; }
}

@media(min-width:1100px) {
  body[data-mode="display"] .display-surface { padding:22px; }
}

@media(max-height:720px) {
  body[data-mode="display"][data-channel="showcase"] #screenEmpty { padding:18px 20px; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy h2 { margin-bottom:6px;font-size:26px; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy p { line-height:1.45; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-link,
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-share-qr,
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-actions { margin-top:10px; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-share-qr { --screen-qr-spinner-top:77px;width:158px;padding:9px; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-share-qr-visual { width:136px;height:136px; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-share-qr-help { font-size:11px; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-actions { gap:8px; }
  body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-actions button { min-height:34px;padding:6px 13px;font-size:12px; }
}

@media(max-height:680px) {
  body[data-mode="display"] .thumbnail-panel.is-empty {
    min-height:42px;
    padding:6px 18px;
  }
  body[data-mode="display"] .thumbnail-panel.is-empty .thumbnail-title h2 {
    font-size:12px;
  }
  body[data-mode="display"] .thumbnail-panel.is-empty .thumbnail-title span {
    font-size:11px;
  }
  body[data-mode="display"] .display-surface {
    min-height:0;
    padding-top:12px;
    padding-bottom:8px;
  }
  body[data-mode="display"] .wallpaper-screen {
    min-height:0;
  }
}

@media(max-height:580px) {
  body[data-mode="display"] .screen-empty {
    padding:18px 20px;
  }
  body[data-mode="display"] .screen-device {
    margin-bottom:8px;
  }
  body[data-mode="display"] .screen-empty h2 {
    margin-bottom:6px;
    font-size:26px;
  }
  body[data-mode="display"] .screen-empty p {
    line-height:1.45;
  }
  body[data-mode="display"] .screen-link,
  body[data-mode="display"] .screen-share-qr {
    margin-top:10px;
  }
  body[data-mode="display"] .screen-share-qr {
    --screen-qr-spinner-top:77px;
    width:158px;
    padding:9px;
  }
  body[data-mode="display"] .screen-share-qr-visual {
    width:136px;
    height:136px;
  }
  body[data-mode="display"] .screen-share-qr span {
    margin-top:5px;
    font-size:11px;
  }
  body[data-mode="display"] .screen-share-qr-help { margin-top:5px;font-size:11px; }
}

@media(max-width:760px) {
  :root {
    --car-thumbnail-width:104px;
    --car-thumbnail-height:66px;
  }
  html.fullscreen-exit-viewport-lock .stage { height:var(--fullscreen-exit-viewport-height)!important; }
  .app-shell { display:block;height:100vh;height:100dvh; }
  .sidebar {
    position:fixed;
    z-index:6;
    left:0;
    top:0;
    bottom:0;
    width:min(260px,88vw);
    transform:translateX(-100%);
    transition:transform .18s ease-out;
    box-shadow:10px 0 26px #0003;
    will-change:transform;
  }
  .sidebar.open { transform:none; }
  .sidebar-close {
    display:none;
    place-items:center;
    position:absolute;
    right:6px;
    top:6px;
    width:32px;
    height:32px;
    border:1px solid var(--sidebar-line);
    border-radius:50%;
    background:var(--sidebar-control);
    color:var(--sidebar-muted);
    box-shadow:0 8px 18px #18243a12,inset 0 1px 0 #ffffff35;
  }
  .sidebar-close:hover {
    color:var(--sidebar-ink);
    border-color:#7db9ff88;
    background:var(--sidebar-hover);
  }
  html[data-theme="dark"] .sidebar-close {
    color:#d7dce7;
    box-shadow:0 8px 18px #00000028,inset 0 1px 0 #ffffff14;
  }
  .sidebar-backdrop {
    display:block;
    position:fixed;
    z-index:5;
    inset:0;
    border:0;
    background:#11182766;
    opacity:0;
    visibility:hidden;
    transition:opacity .16s ease-out,visibility .16s ease-out;
    will-change:opacity;
  }
  .sidebar-backdrop.open { opacity:1;visibility:visible; }
  .stage { height:100vh;height:100dvh; }
  .stage-header { min-height:62px;padding:9px 10px;gap:5px; }
  .menu-button { display:inline-flex; }
  .room-heading { flex-direction:column;align-items:flex-start;gap:4px; }
  .room-heading h1 { font-size:16px; }
  .stage-header p { font-size:11px; }
  .mode-button { display:none; }
  body[data-mode="display"]:not([data-sidebar="open"]) #remoteModeButton,
  body[data-mode="remote"]:not([data-sidebar="open"]) #displayModeButton {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    font-size:0;
  }
  body[data-mode="display"]:not([data-sidebar="open"]) #remoteModeButton::after {
    content:"手";
    font-size:15px;
    font-weight:800;
  }
  body[data-mode="remote"]:not([data-sidebar="open"]) #displayModeButton::after {
    content:"车";
    font-size:15px;
    font-weight:800;
  }
  .announcement-button {
    width:34px;
    height:34px;
    min-height:34px;
    justify-content:center;
    padding:0;
  }
  .announcement-button b { display:none; }
  .share-room-button,
  .edit-room-button,
  .leave-room-button,
  .delete-room-button {
    width:28px;
    min-width:28px;
    height:28px;
    min-height:28px;
    padding:0;
  }
  .share-room-button b,
  .edit-room-button b,
  .leave-room-button b,
  .delete-room-button b { display:none; }
  .share-room-button .room-action-icon,
  .edit-room-button .room-action-icon,
  .leave-room-button .room-action-icon,
  .delete-room-button .room-action-icon { display:block; }
  .share-room-button .room-action-icon,
  .edit-room-button .room-action-icon,
  .leave-room-button .room-action-icon,
  .delete-room-button .room-action-icon {
    width:16px;
    height:16px;
  }
  .announcement-button .announcement-icon {
    width:17px;
    height:17px;
  }
  .private-room-meta { max-width:100%;gap:3px; }
  .password-display { max-width:116px; }
  .password-display span { max-width:62px; }
  .display-surface { min-height:210px;padding:10px;background:#151a21; }
  body[data-mode="remote"] .display-surface { display:none; }
  .wallpaper-screen { min-height:180px;border-radius:12px; }
  .screen-empty { padding:18px; }
  .screen-empty h2 { font-size:22px; }
  .screen-empty p { font-size:12px; }
  .showcase-welcome-title { font-size:22px; }
  .showcase-empty-actions { gap:8px; }
  .showcase-empty-actions button { flex:1 1 130px;min-width:0; }
  .screen-link { display:block; }
  .screen-overlay { left:10px;right:86px;top:10px; }
  body[data-mode="display"] .screen-overlay { right:16px; }
  #screenCount { max-width:104px; }
  .screen-nav { width:36px;height:36px;font-size:24px;opacity:1;padding:0 0 3px; }
  .screen-nav-prev { left:8px; }
  .screen-nav-next { right:8px; }
  .screen-media-actions { right:10px;bottom:10px;gap:6px; }
  .screen-fullscreen { opacity:1;padding:8px 11px;font-size:11px; }
  .thumbnail-panel { min-height:104px;padding:8px 10px 10px; }
  .thumbnail-title { margin-bottom:6px; }
  .thumbnail-title h2 { font-size:12px; }
  .thumbnail-title span { font-size:11px; }
  .thumbnail-expand-button { width:100%;height:28px;border-radius:6px; }
  .thumbnail-expand-button img { width:34px;height:8px; }
  .thumbnail-strip { min-height:62px;gap:8px;padding-bottom:6px; }
  .thumbnail-panel.is-expanded .thumbnail-strip {
    grid-template-columns:repeat(auto-fit, minmax(104px, 1fr));
    grid-auto-rows:66px;
  }
  .thumbnail-panel.is-expanded .thumbnail-item { height:66px; }
  .thumbnail-item { width:var(--car-thumbnail-width);height:var(--car-thumbnail-height);border-radius:6px; }
  .history-panel { max-height:34%;min-height:145px; }
  .history-title { padding:10px 12px 2px; }
  .messages { padding:8px 12px 12px; }
  .history-item { max-width:92%; }
  .image-message { width:min(180px,58vw);height:100px; }
  body[data-mode="remote"] .history-panel { flex:1;max-height:none;min-height:0; }
  .modal { padding:10px; }
  .modal-card {
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
  }
  .announcement-card { padding:24px; }
  .announcement-card h2 { font-size:30px; }
  .announcement-card h2.announcement-title { font-size:24px; }
  .announcement-desc { font-size:16px; }
  .announcement-steps li {
    grid-template-columns:30px 1fr;
    font-size:15px;
  }
  .announcement-note { font-size:14px; }
  .announcement-index {
    width:30px;
    height:30px;
    font-size:14px;
  }
  .announcement-card #closeAnnouncementButton { width:100%; }
  .settings-card {
    max-height:calc(100vh - 20px);
    max-height:calc(100dvh - 20px);
    padding:18px;
  }
  .setting-row { gap:12px;margin-top:8px;padding:11px 10px; }
  .settings-actions { margin-top:12px; }
  .composer { padding:9px 10px 12px; }
  .composer textarea { min-height:40px; }
  .developer-intent-select { flex-basis:124px;width:124px;min-width:124px;max-width:124px;padding:0 8px;font-size:12px; }
  .developer-reply-bar { max-width:110px;padding:0 6px;font-size:11px; }
  .send { width:50px; }
  .typing { padding:0 12px; }
  .image-viewer { padding:0; }
}

html[data-theme="light"] .join-private-button {
  color:#1f3a5f;
  background:linear-gradient(135deg,#ffffff,#f1f6fb);
  border-color:#d5e2f0;
  box-shadow:0 8px 18px #18243a0d,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .join-private-button:hover {
  color:#155ec4;
  background:linear-gradient(135deg,#ffffff,#eaf4ff);
  border-color:#9bc7ff;
}
html[data-theme="light"] .create-private-button {
  color:#ffffff;
  background:linear-gradient(135deg,#2f80ed,#12a594);
  border:1px solid #ffffff;
  box-shadow:0 12px 26px #2374e126,inset 0 1px 0 #ffffff55;
}
html[data-theme="light"] .password-display,
html[data-theme="light"] .share-room-button,
html[data-theme="light"] .edit-room-button,
html[data-theme="light"] .leave-room-button {
  color:#1f3a5f;
  background:linear-gradient(135deg,#ffffff,#f2f7fc);
  border-color:#d3e0ef;
  box-shadow:0 8px 18px #18243a10,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .share-room-button { color:#155ec4;border-color:#b9d8ff; }
html[data-theme="light"] .edit-room-button { color:#475569;border-color:#d3dce8; }
html[data-theme="light"] .leave-room-button { color:#0f766e;border-color:#99f6e4; }
html[data-theme="light"] .delete-room-button {
  color:#b42318;
  background:linear-gradient(135deg,#fff7f6,#fff0ee);
  border-color:#ffc6bf;
  box-shadow:0 8px 18px #b4231812,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .password-display:hover,
html[data-theme="light"] .share-room-button:hover,
html[data-theme="light"] .edit-room-button:hover,
html[data-theme="light"] .leave-room-button:hover {
  background:#ffffff;
  border-color:#8bc2ff;
  box-shadow:0 12px 24px #18243a18,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .delete-room-button:hover {
  color:#971c13;
  background:#fff7f6;
  border-color:#ffaaa0;
  box-shadow:0 12px 24px #b4231818,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .member-owner-badge {
  color:#075985;
  background:#e8f7ff;
  border-color:#7dd3fc;
}

html[data-theme="light"] body[data-mode="display"] .display-surface {
  background:
    linear-gradient(180deg,#e7edf5 0%,var(--surface-bg) 58%,#d8e2ec 100%);
  box-shadow:inset 0 1px 0 #ffffffa8,inset 0 -1px 0 #cbd7e5;
}
html[data-theme="light"] .wallpaper-screen {
  background:#05070a;
  box-shadow:inset 0 0 0 1px #ffffff12,0 14px 40px #00000036;
}
html[data-theme="light"] .mode-button.active {
  color:#0f3d69;
  background:linear-gradient(135deg,#ffffffb8,#dcefff9c 56%,#dff8f0a8);
  border-color:#79b9f5;
  box-shadow:0 12px 28px #2374e124,0 0 0 1px #ffffff,inset 0 1px 0 #ffffffd8,inset 0 -1px 0 #7db9ff26;
  text-shadow:none;
}
html[data-theme="light"] .mode-button:not(.active) {
  color:#4d5f75;
  background:#edf3f9bf;
  border-color:#cbd8e6;
  box-shadow:inset 0 1px 0 #ffffffb8;
}
html[data-theme="light"] .mode-button:not(.active):hover {
  color:#1f3a5f;
  background:#ffffff;
  border-color:#9bc7ff;
  box-shadow:0 10px 22px #18243a14,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .mode-button.active:hover {
  color:#0b355c;
  background:linear-gradient(135deg,#ffffffd4,#d2e9ffb8 56%,#d4f5ecbf);
  border-color:#5fa8ef;
  box-shadow:0 14px 30px #2374e130,0 0 0 1px #ffffff,inset 0 1px 0 #ffffff,inset 0 -1px 0 #62aaf530;
}
html[data-theme="dark"] .mode-button.active {
  color:#ecfeff;
  background:linear-gradient(135deg,#14365a,#155e75 58%,#0f766e);
  border-color:#67e8f980;
  box-shadow:0 12px 28px #00000042,0 0 0 1px #67e8f924,inset 0 1px 0 #ffffff26;
}
html[data-theme="dark"] .mode-button.active:hover {
  color:#ffffff;
  background:linear-gradient(135deg,#1a4772,#177089 58%,#128477);
  border-color:#99f6e4a0;
}

@keyframes showcase-light-bg-drift {
  0% { transform:translate3d(-2%, -1%, 0) rotate(0deg) scale(1); }
  45% { transform:translate3d(2%, 1.5%, 0) rotate(7deg) scale(1.04); }
  100% { transform:translate3d(1%, -2%, 0) rotate(-5deg) scale(1.02); }
}

body[data-mode="display"] .wallpaper-screen {
  background:#05070a;
  box-shadow:inset 0 0 0 1px #ffffff12,0 14px 40px #00000036;
}
body[data-mode="display"][data-channel="showcase"] .wallpaper-screen {
  background:
    radial-gradient(circle at 28% 24%, #1d4f9118, transparent 36%),
    radial-gradient(circle at 74% 70%, #0f766e14, transparent 40%),
    linear-gradient(135deg,#020407 0%,#050a10 48%,#021012 100%);
}
body[data-mode="display"] .screen-empty {
  color:white;
}
body[data-mode="display"] .screen-device,
body[data-mode="display"] .screen-empty p {
  color:#b6c1d2;
}
body[data-mode="display"] .screen-link {
  color:#dbe5f3;
  background:#ffffff12;
  border:0;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty {
  color:white;
  text-shadow:0 2px 18px #000,0 0 34px #000;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy p {
  color:#c8d9e7;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-link {
  background:#0000004d;
  border:1px solid #ffffff1f;
}
.theme-toggle {
  width:34px;
  min-width:34px;
  padding:0;
}
.theme-toggle b {
  display:none;
}
.theme-toggle img,
.thumbnail-expand-button img,
.chat-only-icon,
.image-display-note-icon,
.new-message-notice-icon {
  filter:brightness(0) saturate(100%) invert(23%) sepia(21%) saturate(969%) hue-rotate(176deg) brightness(92%) contrast(91%);
}
html:not([data-theme="dark"]) .thumbnail-expand-button img {
  filter:brightness(0) saturate(100%) invert(64%) sepia(10%) saturate(614%) hue-rotate(178deg) brightness(91%) contrast(86%);
}
html[data-theme="dark"] .theme-toggle img,
html[data-theme="dark"] .thumbnail-expand-button img,
html[data-theme="dark"] .chat-only-icon,
html[data-theme="dark"] .image-display-note-icon,
html[data-theme="dark"] .new-message-notice-icon {
  filter:brightness(0) saturate(100%) invert(92%) sepia(9%) saturate(778%) hue-rotate(177deg) brightness(105%) contrast(97%);
}
html[data-theme="light"] .image-actions .chat-only-image.active.user-excluded .chat-only-icon {
  filter:brightness(0) saturate(100%) invert(36%) sepia(72%) saturate(1767%) hue-rotate(202deg) brightness(91%) contrast(92%);
}
html[data-theme="dark"] .image-actions .chat-only-image.active.user-excluded .chat-only-icon {
  filter:brightness(0) saturate(100%) invert(75%) sepia(41%) saturate(1082%) hue-rotate(184deg) brightness(103%) contrast(98%);
}
html[data-theme="light"] .image-actions .chat-only-image.active.admin-excluded .chat-only-icon,
html[data-theme="light"] .image-actions .chat-only-image.admin-excluded:disabled .chat-only-icon,
html[data-theme="light"] .image-display-note-icon {
  filter:brightness(0) saturate(100%) invert(21%) sepia(99%) saturate(2313%) hue-rotate(351deg) brightness(87%) contrast(93%);
}
html[data-theme="dark"] .image-actions .chat-only-image.active.admin-excluded .chat-only-icon,
html[data-theme="dark"] .image-actions .chat-only-image.admin-excluded:disabled .chat-only-icon,
html[data-theme="dark"] .image-display-note-icon {
  filter:brightness(0) saturate(100%) invert(78%) sepia(34%) saturate(1035%) hue-rotate(309deg) brightness(104%) contrast(101%);
}
.room-action-icon,
.announcement-icon,
.effect-param-icon,
.effect-sound-icon {
  background:currentColor;
}
html[data-theme="light"] .room-action-icon,
html[data-theme="light"] .announcement-icon,
html[data-theme="light"] .effect-param-icon,
html[data-theme="light"] .effect-sound-icon {
  background:currentColor;
}
html[data-theme="dark"] .room-action-icon,
html[data-theme="dark"] .announcement-icon,
html[data-theme="dark"] .effect-param-icon,
html[data-theme="dark"] .effect-sound-icon {
  background:currentColor;
}

html[data-theme="light"] .announcement-card {
  color:#172033;
  background:
    radial-gradient(circle at 18% 18%, #2f80ed12, transparent 34%),
    radial-gradient(circle at 78% 18%, #12a59414, transparent 32%),
    linear-gradient(180deg,#ffffff,#f4f9fd);
  border-color:#d6e5f2;
  box-shadow:0 30px 80px #18243a24,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .announcement-card .announcement-close-button {
  border-color:#99f6e4;
  background:#e8fbf7;
  box-shadow:0 7px 18px #18243a16,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .announcement-card .announcement-close-button img {
  filter:brightness(0) saturate(100%) invert(35%) sepia(65%) saturate(788%) hue-rotate(128deg) brightness(88%) contrast(88%);
}
html[data-theme="light"] .announcement-card .announcement-close-button:hover {
  border-color:#5eead4;
  background:#d7f8f1;
}
html[data-theme="light"] .announcement-card .announcement-close-button:focus-visible { outline-color:#0f766e; }
html[data-theme="light"] .announcement-eyebrow {
  color:#0f766e;
  background:#e8fbf7;
  border-color:#99f6e4;
}
html[data-theme="light"] .announcement-card h2 {
  color:#172033;
}
html[data-theme="light"] .announcement-desc {
  color:#526070;
}
html[data-theme="light"] .announcement-desc strong {
  color:#172033;
}
html[data-theme="light"] .announcement-desc span {
  color:#b77900;
}
html[data-theme="light"] .announcement-steps li {
  color:#253143;
  background:#ffffffcc;
  border-color:#d9e6f2;
  box-shadow:0 10px 24px #18243a0d,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .announcement-index {
  color:#ffffff;
  background:linear-gradient(135deg,#2f80ed,#12a594);
  box-shadow:0 8px 20px #2374e124;
}
html[data-theme="light"] .announcement-tag,
html[data-theme="light"] .announcement-voice {
  color:#0f766e;
}
html[data-theme="light"] .announcement-tag {
  border-color:#99f6e4;
  background:#e8fbf7;
}
html[data-theme="light"] .announcement-fullscreen-tag {
  color:#0f3d69;
  background:linear-gradient(135deg,#ffffff,#dff0ff);
  border-color:#9bc7ff;
  box-shadow:0 6px 16px #2374e11a,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .announcement-note {
  color:#617083;
}
html[data-theme="light"] .announcement-community-button {
  color:#0f766e!important;
}
html[data-theme="light"] .community-qr-grid article {
  color:#172033;
  background:#ffffffd9;
  border-color:#cfe1ed;
  box-shadow:0 10px 24px #18243a0d,inset 0 1px 0 #ffffff;
}
html[data-theme="light"] .community-qr-grid strong {
  color:#0f766e;
}
html[data-theme="light"] .community-qr-grid span {
  color:#253143;
}
html[data-theme="light"] .announcement-card #closeAnnouncementButton {
  color:#ffffff;
  background:linear-gradient(135deg,#2f80ed,#12a594);
  box-shadow:0 14px 30px #2374e126,inset 0 1px 0 #ffffff45;
}
html[data-theme="light"] .announcement-card #closeAnnouncementButton:hover {
  background:linear-gradient(135deg,#1f72df,#0f9989);
}

html[data-theme="dark"] .announcement-card {
  color:#edf8ff;
  background:
    radial-gradient(circle at 18% 20%, rgba(68,168,200,.12), transparent 34%),
    radial-gradient(circle at 78% 18%, rgba(63,120,216,.16), transparent 32%),
    linear-gradient(180deg, rgba(5,25,38,.97), rgba(2,9,15,.99));
  border-color:rgba(64,142,170,.24);
  box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .announcement-card h2,
html[data-theme="dark"] .announcement-desc strong {
  color:#edf8ff;
}
html[data-theme="dark"] .announcement-desc,
html[data-theme="dark"] .announcement-note {
  color:#93aebe;
}
html[data-theme="dark"] .announcement-steps li {
  color:#dffdfa;
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.075);
}

html[data-theme="dark"] .app-shell {
  background:var(--shell-bg);
}
html[data-theme="dark"] .sidebar {
  box-shadow:none;
}
html[data-theme="dark"] .stage {
  box-shadow:none;
}
html[data-theme="dark"] .display-surface {
  background:var(--surface-bg);
  box-shadow:none;
}
html[data-theme="dark"] .thumbnail-panel {
  background:var(--surface-bg);
  box-shadow:none;
}
html[data-theme="dark"] .media-filter {
  background:transparent;
}
html[data-theme="dark"] .media-filter-trigger {
  border-color:#3a4a61;
  background:linear-gradient(145deg,#283345 0%,#1b2534 100%);
  box-shadow:inset 2px 0 0 var(--accent),inset 0 1px 0 #ffffff12,0 4px 12px #00000026;
  color:#c5d1e2;
}
html[data-theme="dark"] .media-filter-trigger:hover {
  border-color:#4a5d77;
  background:linear-gradient(145deg,#2d394d 0%,#202b3b 100%);
}
html[data-theme="dark"] .media-filter-trigger[aria-expanded="true"] {
  border-color:#4389eb;
  background:linear-gradient(145deg,#263a56 0%,#1c2d45 100%);
  box-shadow:inset 2px 0 0 #4389eb,inset 0 1px 0 #ffffff16,0 0 0 2px #2374e126,0 6px 16px #00000038;
  color:#8ebcff;
}
html[data-theme="dark"] .media-filter-menu {
  border-color:#3a4a61;
  background:#172235ed;
  box-shadow:0 -14px 34px #00000066,inset 0 1px 0 #ffffff10;
}
html[data-theme="dark"] .media-filter-menu button { color:#aebbd0; }
html[data-theme="dark"] .media-filter-menu button b { color:#77859b; }
html[data-theme="dark"] .media-filter.is-developer-filter .media-filter-menu button[data-media-filter="video"] span { color:#ffcc66; }
html[data-theme="dark"] .media-filter-menu button[aria-selected="true"],
html[data-theme="dark"] .media-filter-menu button[aria-selected="true"] b { color:#fff; }
@media (prefers-reduced-motion:reduce) {
  .media-filter-menu { animation:none; }
  .media-filter-trigger,
  .media-filter-menu button,
  .media-filter-chevron { transition:none; }
}
html[data-theme="dark"] .history-panel {
  background:var(--stage-bg);
  box-shadow:none;
}
html[data-theme="dark"] .composer {
  background:var(--stage-bg);
  border-top-color:#2d3747;
  box-shadow:none;
}

body[data-mode="display"][data-channel="showcase"] .display-surface {
  background:#151a21;
  box-shadow:inset 0 1px 0 #ffffff0d,inset 0 -1px 0 #00000055;
}
body[data-mode="display"][data-channel="showcase"] .wallpaper-screen {
  background:
    radial-gradient(circle at 28% 24%, #1d4f9118, transparent 36%),
    radial-gradient(circle at 74% 70%, #0f766e14, transparent 40%),
    linear-gradient(135deg,#020407 0%,#050a10 48%,#021012 100%);
  box-shadow:inset 0 0 0 1px #ffffff12,0 14px 40px #00000036;
}
body[data-mode="display"][data-channel="showcase"] .wallpaper-screen::before {
  content:none;
}
body[data-mode="display"][data-channel="showcase"] #wallpaperEffectCanvas {
  mix-blend-mode:screen;
}
body[data-mode="display"][data-channel="showcase"] .wallpaper-screen.showcase-effect-ready #wallpaperEffectCanvas {
  opacity:.80;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty,
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy h2 {
  color:white;
  text-shadow:0 2px 18px #000,0 0 34px #000;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty .showcase-empty-copy p {
  color:#c8d9e7;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-device {
  color:#b6c1d2;
  border-color:#ffffff2d;
  background:transparent;
}
body[data-mode="display"][data-channel="showcase"] #screenEmpty .screen-link {
  color:#dbe5f3;
  background:#0000004d;
  border:1px solid #ffffff1f;
}
body[data-mode="display"][data-channel="showcase"] .showcase-empty-actions button {
  color:#ecfeff;
  border-color:#67e8f955;
  box-shadow:0 12px 26px #00000033,inset 0 1px 0 #ffffff1f;
}
body[data-mode="display"][data-channel="showcase"] .showcase-empty-actions .showcase-channel-card-wallpaper,
body[data-mode="display"][data-channel="showcase"] .showcase-empty-actions .showcase-channel-card-motion {
  background:linear-gradient(135deg,#083344cc,#0f766e99);
}
body[data-mode="display"][data-channel="showcase"] .showcase-empty-actions .showcase-channel-card:hover {
  color:white;
  background:linear-gradient(135deg,#0e7490cc,#14b8a699);
  border-color:#a5f3fc88;
}

.stage-header > .mode-button,
.stage-header > .announcement-button {
  overflow:hidden;
  contain:paint;
  background-clip:padding-box;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transform:translateZ(0);
}
html[data-theme="light"] .stage-header > .mode-button:not(.active) {
  background:linear-gradient(135deg,#f8fbff,#eaf2fb);
}
html[data-theme="light"] .stage-header > .mode-button.active {
  background:linear-gradient(135deg,#ffffff,#dcefff 56%,#dff8f0);
}
html[data-theme="light"] .stage-header > .announcement-button {
  background:linear-gradient(135deg,#e8fbf7,#f7fbff);
}
html[data-theme="dark"] .stage-header > .mode-button:not(.active) {
  background:linear-gradient(135deg,#172131,#121a25);
}
html[data-theme="dark"] .stage-header > .mode-button.active {
  background:linear-gradient(135deg,#14365a,#155e75 58%,#0f766e);
}
html[data-theme="dark"] .stage-header > .announcement-button {
  background:linear-gradient(135deg,#12352f,#121a25);
}

/* Keep the primary controls usable when the browser viewport is short. */
@media(max-height:720px) {
  .sidebar { padding:16px 14px 12px; }
  .brand { padding-bottom:14px; }
  .brand .logo { width:42px;height:42px; }
  .rooms-section { min-height:120px; }
  .members { min-height:60px;margin-top:10px; }
  .stage-header { min-height:58px;padding-top:8px;padding-bottom:8px; }
  body[data-mode=display] .thumbnail-panel { min-height:104px;padding-top:8px;padding-bottom:10px; }
  .history-panel { min-height:120px; }
  .history-title { padding-top:8px; }
  .composer { padding-top:8px;padding-bottom:10px; }
  .composer textarea { min-height:40px; }
}

@media(max-height:720px) {
  body[data-mode=display]:not([data-channel=showcase]) .effect-controls {
    height:calc(100% - 28px);
    overflow:hidden;
    pointer-events:none;
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-toggle-row {
    flex:none;
    pointer-events:auto;
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-perf-control-row {
    min-height:0;
    flex:1 1 auto;
    align-items:stretch;
    overflow:hidden;
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-perf-compact-wrap {
    min-height:0;
    max-height:100%;
    flex:1 1 auto;
    overflow:hidden;
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-compact-actions {
    min-height:0;
    max-height:100%;
    flex:1 1 auto;
    align-items:stretch;
    overflow:hidden;
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-param-row {
    min-height:0;
    max-height:var(--effect-param-max-height,100%);
    flex:0 1 auto;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--effect-scroll-thumb) var(--effect-scroll-track);
    scrollbar-gutter:stable;
    touch-action:pan-y;
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-param-row::-webkit-scrollbar { width:6px; }
  body[data-mode=display]:not([data-channel=showcase]) .effect-param-row::-webkit-scrollbar-track {
    margin:6px 0;
    border-radius:999px;
    background:var(--effect-scroll-track);
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-param-row::-webkit-scrollbar-thumb {
    border:1px solid transparent;
    border-radius:999px;
    background:var(--effect-scroll-thumb);
    background-clip:padding-box;
  }
  body[data-mode=display]:not([data-channel=showcase]) .effect-param-row::-webkit-scrollbar-thumb:hover { background-color:var(--effect-scroll-thumb-hover); }
}

@media(max-height:680px) {
  :root {
    --car-thumbnail-width:112px;
    --car-thumbnail-height:70px;
  }
  body[data-mode=display] .thumbnail-panel.is-expanded .thumbnail-strip {
    grid-template-columns:repeat(auto-fit,minmax(var(--car-thumbnail-width),1fr));
    grid-auto-rows:var(--car-thumbnail-height);
  }
  body[data-mode=display] .thumbnail-panel.is-expanded .thumbnail-item {
    width:100%;
    height:100%;
  }
  body[data-mode=display] .display-surface,
  body[data-mode=display] .wallpaper-screen { min-height:0; }
}

@media(max-height:620px) {
  .sidebar { padding-top:12px;padding-bottom:10px; }
  .brand { padding-bottom:10px; }
  .rooms-section { min-height:96px;max-height:none; }
  .room-tools { gap:6px;padding-bottom:8px; }
  .room-tools button { min-height:34px;padding-top:6px;padding-bottom:6px; }
  .members { min-height:52px;margin-top:8px; }
  .members h2 { margin-bottom:7px; }
  .member { padding-top:6px;padding-bottom:6px; }
  .stage-header { min-height:54px;padding-top:6px;padding-bottom:6px; }
  body[data-mode=display] .thumbnail-panel { min-height:96px;padding-top:6px;padding-bottom:8px; }
  .thumbnail-title { margin-bottom:5px; }
  .history-panel { min-height:104px;max-height:28%; }
  .history-title { padding-top:7px;padding-bottom:2px; }
  .messages { padding-top:6px;padding-bottom:8px; }
  .composer { padding-top:6px;padding-bottom:8px; }
  .composer textarea { min-height:38px; }
}

@media(max-height:580px) {
  :root {
    --car-thumbnail-width:96px;
    --car-thumbnail-height:60px;
  }
  body[data-mode=display] .thumbnail-panel.is-expanded .thumbnail-strip {
    max-height:calc(var(--car-thumbnail-height) + 10px);
  }
}

@media(max-height:520px) {
  .sidebar { padding-top:9px;padding-bottom:8px; }
  .brand { padding-bottom:8px; }
  .brand .logo { width:38px;height:38px; }
  .brand-tagline { display:none; }
  .rooms-section { min-height:82px; }
  .members { min-height:40px; }
  .stage-header { min-height:50px;padding-top:5px;padding-bottom:5px; }
  body[data-mode=display] .thumbnail-panel { min-height:84px;padding-top:5px;padding-bottom:6px; }
  .thumbnail-strip { min-height:var(--car-thumbnail-height); }
  .history-panel { min-height:88px;max-height:24%; }
  .history-title { padding-top:5px; }
  .composer { padding-top:5px;padding-bottom:6px; }
  .composer textarea { min-height:36px; }
  body[data-mode=display][data-channel=showcase] #screenEmpty .screen-link { display:none; }
  body[data-mode=display] .screen-share-qr { --screen-qr-spinner-top:65px;width:132px;padding:7px; }
  body[data-mode=display] .screen-share-qr-visual { width:112px;height:112px; }
}

@media(min-width:961px) and (max-width:1280px) {
  :root { --sidebar-width:248px; }
}

@media(min-width:761px) and (max-width:1280px) {
  .room-tools .room-tool-label-suffix { display:none; }
  .room-tools .join-private-button { gap:3px;padding-left:5px;padding-right:5px; }
}

@media(min-width:761px) and (max-width:960px) {
  :root { --sidebar-width:224px; }
  .sidebar { padding-left:12px;padding-right:12px; }
  .brand { gap:8px;padding-left:4px;padding-right:4px; }
  .brand .logo { max-width:42px;max-height:42px; }
  .brand strong { font-size:16px; }
  .brand span { font-size:11px; }
  .room-tools button { padding-left:9px;padding-right:9px; }
}

.domain-migration-modal { z-index:10001; }
.domain-migration-card { width:min(540px,100%);padding:32px; }
.domain-migration-icon {
  overflow:hidden;
  border-radius:12px;
  background:transparent;
  box-shadow:0 12px 28px #4f46e529;
}
.domain-migration-icon img { display:block;width:100%;height:100%;object-fit:contain; }
.domain-migration-completed-modal .domain-migration-actions { grid-template-columns:minmax(0,240px);justify-content:center; }
.domain-migration-copy { margin-top:16px; }
.domain-migration-copy p { margin:0 0 12px;text-align:left;font-size:14px;line-height:1.75; }
.domain-migration-status { min-height:24px;margin:4px 0 2px!important;color:#1d63c7!important;font-weight:700; }
.domain-migration-actions button:disabled { opacity:.62;cursor:wait; }
html[data-theme=dark] .domain-migration-status { color:#93c5fd!important; }

@media(max-width:560px) {
  .domain-migration-card { padding:26px 20px; }
  .domain-migration-actions { grid-template-columns:1fr; }
}