/* Stage 3.27 — persistent dark / original-light appearance switch */
:root{color-scheme:dark}
html[data-ui-theme="light"]{color-scheme:light}

.ui-theme-switch{
  direction:rtl;
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
  gap:4px;
  min-width:154px;
  padding:4px;
  border-radius:15px;
  background:rgba(3,18,42,.76);
  border:1px solid rgba(159,192,234,.17);
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 9px 24px rgba(0,4,16,.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  flex:0 0 auto;
}
.ui-theme-option{
  min-height:36px;
  padding:7px 10px;
  border:0;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font:700 .72rem/1 "Vazirmatn",sans-serif;
  color:#91a1b6;
  background:transparent;
  cursor:pointer;
  transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease;
  white-space:nowrap;
}
.ui-theme-option:hover{color:#f2c56d;transform:translateY(-1px)}
.ui-theme-option[aria-pressed="true"]{
  color:#071225;
  background:linear-gradient(135deg,#ffe09a,#d99a34);
  box-shadow:0 7px 18px rgba(218,154,48,.2),inset 0 1px rgba(255,255,255,.55);
}
.ui-theme-option-icon{font-size:.9rem;line-height:1}
.ui-theme-switch--floating{
  position:fixed;
  z-index:10000;
  top:14px;
  left:14px;
}

/* The direct-support heading had retained its old pale surface in dark mode. */
html[data-ui-theme="dark"] .support-section-heading{
  color:#edf2f8!important;
  background:
    radial-gradient(circle at 90% 0,rgba(242,193,96,.105),transparent 34%),
    linear-gradient(145deg,rgba(10,36,73,.94),rgba(4,20,46,.92))!important;
  border:1px solid rgba(161,194,235,.18)!important;
  box-shadow:0 20px 54px rgba(0,4,16,.3),inset 0 1px rgba(255,255,255,.028)!important;
}
html[data-ui-theme="dark"] .support-section-heading h2{color:#fff2d5!important}
html[data-ui-theme="dark"] .support-section-heading p{color:#9eacbe!important}
html[data-ui-theme="dark"] .support-section-heading .eyebrow{color:#efbd60!important}
html[data-ui-theme="dark"] .support-heading-icon{
  color:#f4c86f!important;
  background:linear-gradient(145deg,rgba(241,190,89,.14),rgba(7,29,61,.9))!important;
  border:1px solid rgba(241,190,89,.22)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 11px 28px rgba(0,4,16,.22)!important;
}

/* Original-light mode intentionally falls back to style.css, the first site UI. */
html[data-ui-theme="light"] body{
  color-scheme:light;
}
html[data-ui-theme="light"] .ui-theme-switch{
  background:rgba(255,253,248,.9);
  border-color:rgba(65,91,72,.14);
  box-shadow:0 8px 24px rgba(52,72,57,.1),inset 0 1px rgba(255,255,255,.75);
}
html[data-ui-theme="light"] .ui-theme-option{color:#728076}
html[data-ui-theme="light"] .ui-theme-option:hover{color:#345640;background:rgba(62,91,70,.055)}
html[data-ui-theme="light"] .ui-theme-option[aria-pressed="true"]{
  color:#fff;
  background:linear-gradient(135deg,#66836c,#3f614b);
  box-shadow:0 7px 17px rgba(54,88,65,.18),inset 0 1px rgba(255,255,255,.15);
}

@media(max-width:1180px){
  .site-header .ui-theme-switch{min-width:104px}
  .site-header .ui-theme-option{padding-inline:8px}
  .site-header .ui-theme-option-label{display:none}
}
@media(max-width:900px){
  .site-header .ui-theme-switch{
    min-width:82px;
    border-radius:13px;
    padding:3px;
    gap:2px;
  }
  .site-header .ui-theme-option{min-height:34px;padding:6px;border-radius:10px}
  .ui-theme-switch--floating{top:10px;left:10px;min-width:92px}
  .ui-theme-switch--floating .ui-theme-option-label{display:none}
}
@media(max-width:430px){
  .site-header .ui-theme-switch{min-width:76px}
  .site-header .ui-theme-option{padding:5px}
}
@media(prefers-reduced-motion:reduce){
  .ui-theme-option{transition:none}
}


/* Stage 3.28 — bring tasteful motion to original light theme too */
@keyframes floatSoft{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes sparkle{0%,100%{opacity:.28;transform:scale(.8)}50%{opacity:1;transform:scale(1.28)}}
@keyframes trailMove{0%{transform:translateX(-2%) rotate(8deg)}100%{transform:translateX(2%) rotate(12deg)}}

.reveal-item{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
.reveal-item.is-visible{opacity:1;transform:none}

html[data-ui-theme="light"] .ambient{
  position:fixed;
  pointer-events:none;
  z-index:-5;
  opacity:.17;
  filter:blur(95px);
  animation:floatSoft 14s ease-in-out infinite;
}
html[data-ui-theme="light"] .ambient-one{background:#9ab89d;width:520px;height:520px;left:-220px;top:70px}
html[data-ui-theme="light"] .ambient-two{background:#d8c18b;width:420px;height:420px;right:-180px;bottom:30px;animation-delay:-5s}
html[data-ui-theme="light"] .grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-4;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:radial-gradient(circle at 25% 25%, rgba(55,76,56,.1) 0 1px, transparent 1px);
  background-size:14px 14px;
}
html[data-ui-theme="light"] .site-motion-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  overflow:hidden;
}
html[data-ui-theme="light"] .site-motion-star{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#d0b06d;
  box-shadow:0 0 8px rgba(208,176,109,.55);
  opacity:.42;
  animation:sparkle var(--d,4s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
html[data-ui-theme="light"] .site-motion-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(18px);
  opacity:.16;
  animation:floatSoft var(--d,12s) ease-in-out infinite;
}
html[data-ui-theme="light"] .site-motion-trail{
  position:absolute;
  width:70vw;
  height:140px;
  border-top:1px solid rgba(144,119,63,.22);
  border-radius:50%;
  filter:blur(.2px) drop-shadow(0 0 10px rgba(193,164,98,.18));
  opacity:.24;
  animation:trailMove 14s ease-in-out infinite alternate;
}
html[data-ui-theme="light"] .jar-particle{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d8b46a;
  box-shadow:0 0 10px rgba(216,180,106,.5);
  opacity:.75;
  animation:sparkle var(--duration,3s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
html[data-ui-theme="light"] .site-header,
html[data-ui-theme="light"] .hero,
html[data-ui-theme="light"] .page-hero,
html[data-ui-theme="light"] .daily-prompt,
html[data-ui-theme="light"] .route-card,
html[data-ui-theme="light"] .reason-card,
html[data-ui-theme="light"] .contact-card,
html[data-ui-theme="light"] .about-card,
html[data-ui-theme="light"] .about-quote,
html[data-ui-theme="light"] .auth-panel,
html[data-ui-theme="light"] .profile-cover,
html[data-ui-theme="light"] .profile-about,
html[data-ui-theme="light"] .profile-content,
html[data-ui-theme="light"] .support-compose,
html[data-ui-theme="light"] .support-list,
html[data-ui-theme="light"] .support-detail,
html[data-ui-theme="light"] .admin-shell > *,
html[data-ui-theme="light"] .prose-card,
html[data-ui-theme="light"] .daily-question-card,
html[data-ui-theme="light"] .daily-page-answers,
html[data-ui-theme="light"] .swipe-shell,
html[data-ui-theme="light"] .swipe-card,
html[data-ui-theme="light"] .section-heading,
html[data-ui-theme="light"] .contact-faq,
html[data-ui-theme="light"] .contact-safety-note{
  transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease,background-color .26s ease,opacity .7s ease;
}
html[data-ui-theme="light"] .route-card:hover,
html[data-ui-theme="light"] .reason-card:hover,
html[data-ui-theme="light"] .contact-card:hover,
html[data-ui-theme="light"] .about-card:hover,
html[data-ui-theme="light"] .auth-panel:hover,
html[data-ui-theme="light"] .support-compose:hover,
html[data-ui-theme="light"] .support-list:hover,
html[data-ui-theme="light"] .admin-shell > *:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(68,91,70,.12);
}
html[data-ui-theme="light"] .primary-button,
html[data-ui-theme="light"] .ghost-button,
html[data-ui-theme="light"] .soft-button,
html[data-ui-theme="light"] .text-button,
html[data-ui-theme="light"] .filter,
html[data-ui-theme="light"] .round-action,
html[data-ui-theme="light"] .mini-action,
html[data-ui-theme="light"] .icon-button,
html[data-ui-theme="light"] .contact-action{
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease,border-color .22s ease;
}
html[data-ui-theme="light"] .primary-button:hover,
html[data-ui-theme="light"] .ghost-button:hover,
html[data-ui-theme="light"] .soft-button:hover,
html[data-ui-theme="light"] .text-button:hover,
html[data-ui-theme="light"] .filter:hover,
html[data-ui-theme="light"] .round-action:hover,
html[data-ui-theme="light"] .mini-action:hover,
html[data-ui-theme="light"] .icon-button:hover,
html[data-ui-theme="light"] .contact-action:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(68,91,70,.12);
}
html[data-ui-theme="light"] .hope-jar-image{
  animation:floatSoft 6.5s ease-in-out infinite;
  transform-origin:center bottom;
  will-change:transform;
}
html[data-ui-theme="light"] .ui-theme-switch{
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,border-color .22s ease;
}
html[data-ui-theme="light"] .ui-theme-switch:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(52,72,57,.12),inset 0 1px rgba(255,255,255,.78)}

@media(prefers-reduced-motion:reduce){
  html[data-ui-theme="light"] :is(.ambient,.grain,.site-motion-layer){display:none!important}
}


/* Stage 3.28 — light theme receives the same motion language as dark mode */
@keyframes lightMotionFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-13px,0)}}
@keyframes lightMotionSparkle{0%,100%{opacity:.13;transform:scale(.62)}50%{opacity:.72;transform:scale(1.2)}}
@keyframes lightMotionTrail{0%{transform:translateX(-7%) rotate(-2deg);opacity:.12}50%{opacity:.42}100%{transform:translateX(7%) rotate(2deg);opacity:.12}}
@keyframes lightMotionPageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lightMotionHeader{0%,100%{box-shadow:0 10px 35px rgba(42,58,49,.07)}50%{box-shadow:0 15px 44px rgba(70,102,77,.12)}}
@keyframes lightMotionShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes lightJarGlow{0%,100%{filter:drop-shadow(0 13px 20px rgba(72,102,77,.14))}50%{filter:drop-shadow(0 18px 31px rgba(183,126,68,.22))}}

html[data-ui-theme="dark"] .site-motion-orb{--motion-orb-color:var(--motion-orb-dark)}
html[data-ui-theme="light"] .site-motion-orb{--motion-orb-color:var(--motion-orb-light)}

html[data-ui-theme="light"] body{
  overflow-x:hidden;
  background-attachment:fixed;
}
html[data-ui-theme="light"] .site-motion-layer{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
}
html[data-ui-theme="light"] .site-motion-star{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(111,145,112,.58);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 12px rgba(103,146,109,.22);
  animation:lightMotionSparkle var(--d,4s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
html[data-ui-theme="light"] .site-motion-star:nth-child(3n){
  background:rgba(218,162,105,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 12px rgba(205,145,86,.2);
}
html[data-ui-theme="light"] .site-motion-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(24px) saturate(.82);
  opacity:.24;
  animation:lightMotionFloat var(--d,12s) ease-in-out infinite;
}
html[data-ui-theme="light"] .site-motion-trail{
  position:absolute;
  width:70vw;
  height:150px;
  border-top:1px solid rgba(113,143,115,.21);
  border-radius:50%;
  filter:blur(.3px) drop-shadow(0 0 12px rgba(197,145,91,.14));
  opacity:.26;
  animation:lightMotionTrail 15s ease-in-out infinite alternate;
}
html[data-ui-theme="light"] .ambient{
  animation:lightMotionFloat 13s ease-in-out infinite;
  will-change:transform;
}
html[data-ui-theme="light"] .ambient-two{animation-delay:-5s}
html[data-ui-theme="light"] .grain{display:block!important}
html[data-ui-theme="light"] main{animation:lightMotionPageIn .7s ease both}
html[data-ui-theme="light"] .site-header{animation:lightMotionHeader 8s ease-in-out infinite}
html[data-ui-theme="light"] .hope-jar-image{
  animation:lightMotionFloat 6.5s ease-in-out infinite,lightJarGlow 4.8s ease-in-out infinite;
  transform-origin:center bottom;
  will-change:transform,filter;
}
html[data-ui-theme="light"] .jar-particle{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bc8d57;
  box-shadow:0 0 11px rgba(187,133,76,.48);
  animation:lightMotionSparkle var(--duration,3s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
html[data-ui-theme="light"] :is(.hero h1 span,.page-hero h1 span,.auth-dual-intro h1 span){
  background:linear-gradient(110deg,#405f49,#8a6a43,#486c51);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:lightMotionShimmer 9s linear infinite;
}

html[data-ui-theme="light"] .reveal-item{
  opacity:0;
  transform:translateY(25px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1);
}
html[data-ui-theme="light"] .reveal-item.is-visible{opacity:1;transform:none}

html[data-ui-theme="light"] :is(
  .route-card,.reason-card,.daily-reason-card,.contact-card,.about-card,.about-quote,
  .principles-grid article,.daily-question-card,.daily-page-answers,.swipe-card,
  .auth-panel,.profile-cover,.profile-about,.profile-content,.support-compose,
  .support-list,.support-detail,.admin-card,.admin-head,.admin-filters,.prose-card,
  .account-info-grid>*,.account-action-grid>*,.activity-item
){
  transition:transform .26s cubic-bezier(.2,.75,.2,1),box-shadow .26s ease,border-color .26s ease,background .26s ease;
  will-change:transform;
}
@media(hover:hover) and (pointer:fine){
  html[data-ui-theme="light"] :is(
    .route-card,.reason-card,.daily-reason-card,.contact-card,.about-card,
    .principles-grid article,.auth-panel,.account-info-grid>*,.account-action-grid>*
  ):hover{
    transform:translateY(-6px);
    box-shadow:0 18px 46px rgba(53,76,59,.12);
    border-color:rgba(74,109,82,.22);
  }
  html[data-ui-theme="light"] :is(.primary-button,.soft-button,.ghost-button,.text-button,.contact-action,.filter,.main-tab):hover{
    transform:translateY(-2px);
  }
  html[data-ui-theme="light"] .brand-mark:hover{transform:rotate(8deg) scale(1.04)}
}
html[data-ui-theme="light"] :is(.primary-button,.soft-button,.ghost-button,.text-button,.contact-action,.filter,.main-tab,.brand-mark){
  transition:transform .23s ease,box-shadow .23s ease,border-color .23s ease,background .23s ease,color .23s ease;
}
html[data-ui-theme="light"] .top-nav .nav-link{transition:color .24s ease,transform .24s ease}
html[data-ui-theme="light"] .top-nav .nav-link:hover{transform:translateY(-1px)}
html[data-ui-theme="light"] .ui-theme-switch{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}

@media(max-width:700px){
  html[data-ui-theme="light"] .site-motion-star{width:3px;height:3px;opacity:.7}
  html[data-ui-theme="light"] .site-motion-orb{opacity:.16;filter:blur(31px)}
  html[data-ui-theme="light"] .site-motion-trail{opacity:.16}
}
@media(prefers-reduced-motion:reduce){
  html[data-ui-theme="light"] .site-motion-layer{display:none!important}
  html[data-ui-theme="light"] .ambient,
  html[data-ui-theme="light"] .hope-jar-image,
  html[data-ui-theme="light"] .site-header,
  html[data-ui-theme="light"] main{animation:none!important}
  html[data-ui-theme="light"] .reveal-item{opacity:1!important;transform:none!important;transition:none!important}
}