/* The hit area stays put while the pumpkin drops, preventing hover flicker. */
.sidebar .brand.brand-seasonal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 0 16px 4px;
}
.halloween-anchor {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  visibility: hidden;
  pointer-events: none;
}
.halloween-drop {
  --halloween-rest-y: 24px;
  position: fixed;
  top: 0;
  left: calc(var(--sidebar-w) - 39px);
  width: 56px;
  height: 12px;
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 60;
}
.halloween-drop.is-revealed { height: calc(var(--halloween-rest-y) + 52px); }
.halloween-drop::after {
  content: '';
  position: absolute;
  left: 12px;
  top: calc(var(--halloween-rest-y) + 43px);
  width: 32px;
  height: 4px;
  border-radius: 50%;
  background: #27152E26;
  opacity: 0;
  pointer-events: none;
}
.halloween-drop.is-revealed::after { animation: halloween-pumpkin-impact 480ms ease-out both; }
.halloween-drop .halloween-toggle {
  position: absolute;
  top: 0;
  left: 6px;
}
.halloween-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #452039;
  cursor: pointer;
  touch-action: manipulation;
  transform: translateY(-33px);
  transition: transform 200ms cubic-bezier(.4, 0, 1, 1);
}
.halloween-toggle svg {
  display: block;
  width: 36px;
  height: 36px;
  overflow: visible;
}
.halloween-drop.is-revealed .halloween-toggle {
  transform: translateY(var(--halloween-rest-y));
  animation: halloween-pumpkin-drop 480ms both;
}
.halloween-drop.is-restored .halloween-toggle,
.halloween-drop.is-restored::after { animation: none; }
.halloween-drop.is-revealed .halloween-pumpkin { filter: drop-shadow(0 4px 3px #24142930); }
.halloween-toggle:focus-visible { outline: 2px solid var(--link-color); outline-offset: 2px; }
/* Accelerate downward, hit once, make one short rebound, then settle. */
@keyframes halloween-pumpkin-drop {
  0% { transform: translateY(-33px); animation-timing-function: cubic-bezier(.55, .02, .9, .55); }
  58% { transform: translateY(calc(var(--halloween-rest-y) + 4px)); animation-timing-function: cubic-bezier(.15, .65, .35, 1); }
  78% { transform: translateY(calc(var(--halloween-rest-y) - 7px)); animation-timing-function: cubic-bezier(.55, 0, 1, 1); }
  100% { transform: translateY(var(--halloween-rest-y)); }
}
@keyframes halloween-pumpkin-impact {
  0%, 45% { opacity: 0; transform: scaleX(.6); }
  58% { opacity: 1; transform: scaleX(1.25); }
  78% { opacity: .2; transform: scaleX(.8); }
  100% { opacity: .4; transform: scaleX(1); }
}

/* Match the specificity of skin + dark-mode rules without changing either preference. */
:root[data-season="halloween"][data-season] {
  color-scheme: dark;
  --bg: #17111F;
  --surface: #21182C;
  --surface-2: #2E223B;
  --border: #392B46;
  --border-strong: #574064;
  --primary: #F79A53;
  --primary-strong: #FFBC85;
  --primary-soft: #3F2931;
  --link-color: #FFBC85;
  --button-primary-bg: #F79A53;
  --button-primary-hover: #FFB577;
  --button-primary-fg: #28152B;
  --text: #F5EDF9;
  --text-secondary: #D2C1DE;
  --text-muted: #B09CBE;
  --text-disabled: #786785;
  --success: #82D6A4;
  --success-soft: #193C32;
  --warning: #FFD080;
  --warning-soft: #403025;
  --danger: #FF8E9D;
  --danger-soft: #482435;
  --on-solid: #28152B;
  --on-primary: #28152B;
  --on-accent: #28152B;
  --tint-blue-bg: #3F2931;    --tint-blue-fg: #FFBC85;
  --tint-red-bg: #482435;     --tint-red-fg: #FFABB5;
  --tint-amber-bg: #403025;   --tint-amber-fg: #FFD080;
  --tint-green-bg: #193C32;   --tint-green-fg: #91DEB2;
  --tint-teal-bg: #193A3A;    --tint-teal-fg: #8DDBD3;
  --tint-violet-bg: #35264D;  --tint-violet-fg: #D5B6FF;
  --tint-gray-bg: #352B40;    --tint-gray-fg: #D6C9DF;
  --accent-teal: #72CFC0;
  --accent-amber: #FFBF69;
  --accent-rose: #F58DA8;
  --accent-violet: #BB91ED;
  --editor-accent: #FFBC85;
  --field: #1A1323;
  --field-border: #685075;
  --overlay: rgba(10, 5, 17, .68);
  --overlay-strong: rgba(10, 5, 17, .84);
  --shadow-2: 0 2px 8px rgba(8, 3, 15, .25);
  --shadow-3: 0 12px 32px rgba(8, 3, 15, .45);
}
:root[data-season="halloween"] body {
  background-image:
    radial-gradient(ellipse at 96% 0, #7D3F5D24, transparent 42%),
    radial-gradient(ellipse at 32% 100%, #6D3C8E1A, transparent 50%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
:root[data-season="halloween"] .sidebar {
  background-image: radial-gradient(ellipse at 0 0, #F79A5314, transparent 45%);
}
:root[data-season="halloween"] .brand-logo-light { display: none; }
:root[data-season="halloween"] .brand-logo-dark { display: block; }

/* Accent fills are bright; photo overlays and switch handles still need white. */
:root[data-season="halloween"] :is(.fb-thumb-del, .fb-item-thumb-more, .fb-zoom, .set-switch-track, .chat-empty-hero-icon) {
  --on-solid: #FFFFFF;
}
:root[data-season="halloween"] .btn-full-analyze-sub { color: #452039; }
:root[data-season="halloween"] .btn-full-analyze .mode-chip:not(.mode-chip-done):not(.mode-chip-error) {
  color: var(--on-solid);
}
/* Older search/recording screens still specify white instead of the shared token. */
:root[data-season="halloween"] :is(.ls-go, .ls-pg.is-on, .ls-fcount,
  .js-go, .js-pg.is-on, .js-fcount, .lv-pop-go, .lv-field-btn,
  .rv-tab.is-on .rv-count, .rv-msg.is-user .rv-msg-body, .rv-chat-send,
  .guard-modal-ok, .shop-tag, .cel-banner-tag, .adm-group-n,
  button.adm-surveys-count[aria-expanded="true"]) {
  color: var(--on-solid);
}
:root[data-season="halloween"] .notice-text a.notice-cta { color: var(--on-solid) !important; }

/* Decorative scenery is confined to its own space, never over working controls. */
.halloween-scene, .halloween-sidebar-decor { display: none; }
.halloween-scene, .halloween-scene *, .halloween-sidebar-decor, .halloween-sidebar-decor * {
  pointer-events: none;
  user-select: none;
}
:root[data-season="halloween"] .halloween-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 232px;
  margin: 0 0 28px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #865033;
  border-radius: 22px;
  background:
    url('brand/halloween-web.svg') left top / 115px 115px no-repeat,
    radial-gradient(ellipse at 25% 130%, #9D492C38, transparent 60%),
    linear-gradient(115deg, #302032, #23172F 55%, #39213E);
  box-shadow: 0 12px 40px #09060F35, inset 0 1px 0 #FFBF7B1A;
}
.halloween-scene-copy { flex: 0 0 46%; padding: 26px 0 28px 38px; }
.halloween-scene-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #EDC099;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .28em;
}
.halloween-scene-title {
  margin: 0;
  color: #FFF0D7;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
}
.halloween-scene-title span {
  display: block;
  color: #FFAE65;
  font-size: 1.16em;
  font-style: italic;
  text-shadow: 0 0 28px #F47E3730;
}
.halloween-scene-caption { margin: 15px 0 0; color: #D8C0DB; font-size: 12px; line-height: 1.6; }
.halloween-scene-art { display: block; flex: 0 0 54%; width: 54%; height: 232px; object-fit: contain; }
.halloween-scene-date {
  position: absolute;
  right: 18px;
  bottom: 13px;
  color: #E8BD95;
  font: 10px/1.5 Georgia, serif;
  letter-spacing: .15em;
}
.halloween-spark { position: absolute; color: #EFC797; font-size: 19px; }
.halloween-spark-one { left: 41%; top: 38px; transform: rotate(12deg); }
.halloween-spark-two { left: 44%; bottom: 39px; font-size: 14px; }
:root[data-season="halloween"] .halloween-spark { animation: halloween-spark-arrive 700ms ease-out both; }
:root[data-season="halloween"] .halloween-spark-two { animation-delay: 120ms; }
@keyframes halloween-spark-arrive {
  from { opacity: 0; scale: .5; }
  to { opacity: 1; scale: 1; }
}

:root[data-season="halloween"] .sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 94px;
  height: 94px;
  background: url('brand/halloween-web.svg') left top / contain no-repeat;
  opacity: .28;
  pointer-events: none;
}
:root[data-season="halloween"] .sidebar .nav-item.active {
  background: linear-gradient(100deg, #633922, #3F2931);
  box-shadow: inset 0 0 0 1px #FFAD5329, 0 2px 14px #E76A1710;
}
:root[data-season="halloween"] .halloween-drop.is-revealed .halloween-pumpkin {
  filter: drop-shadow(0 0 6px #F58A3870);
}
:root[data-season="halloween"] .home-panel {
  border-color: #5D3C50;
  box-shadow: inset 0 1px 0 #F5AD6410;
}
.halloween-sidebar-decor {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 155px;
  height: 104px;
  overflow: hidden;
}
.halloween-sidebar-decor span {
  position: relative;
  z-index: 1;
  display: block;
  color: #DCC5DD;
  font: 14px/1.2 Georgia, serif;
  text-align: center;
}
.halloween-sidebar-decor i { color: #F6B77D; }
.halloween-sidebar-decor img { display: block; width: 100%; height: 91px; object-fit: contain; opacity: .85; }
@media (min-width: 769px) and (min-height: 1050px) {
  :root[data-season="halloween"] .halloween-sidebar-decor { display: block; }
}
@media (max-width: 768px) {
  .halloween-drop {
    --halloween-rest-y: 6px;
    top: env(safe-area-inset-top, 0px);
    left: calc(100% - 162px);
  }
  :root[data-season="halloween"] .mobile-header { border-bottom: 1px solid #70422E; }
  :root[data-season="halloween"] .mobile-bottom-nav {
    background: linear-gradient(0deg, #21182C, #302032);
    border-top-color: #70422E;
  }
}
@media (max-width: 640px) {
  :root[data-season="halloween"] .halloween-scene {
    flex-direction: column;
    min-height: 0;
    margin-bottom: 24px;
    border-radius: 18px;
    background-size: 80px 80px, auto, auto;
  }
  .halloween-scene-copy { flex: none; align-self: stretch; padding: 24px 20px 0; text-align: center; }
  .halloween-scene-eyebrow { font-size: 9px; margin-bottom: 10px; }
  .halloween-scene-title { font-size: 31px; }
  .halloween-scene-title span { display: inline; font-size: 1em; }
  .halloween-scene-caption { margin-top: 10px; font-size: 11px; }
  .halloween-scene-art { flex: none; width: 100%; height: 152px; }
  .halloween-scene-date { bottom: 9px; right: 12px; font-size: 9px; }
  .halloween-spark-one { left: 11%; top: 130px; font-size: 14px; }
  .halloween-spark-two { left: auto; right: 9%; top: 125px; bottom: auto; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-toggle { transition: none; }
  .halloween-drop.is-revealed .halloween-toggle,
  .halloween-drop.is-revealed::after { animation: none; }
  :root[data-season="halloween"] .halloween-spark { animation: none; }
}
@media print {
  .halloween-scene, .halloween-sidebar-decor, .halloween-drop, .halloween-toggle,
  :root[data-season="halloween"] .sidebar::after { display: none !important; }
}