/* ============================================================
   EkhoniJanao — Phase 3 Enhancements
   Legal, animations, icons, map, notifications, events,
   leaderboard, achievements, settings, about.
   Loaded after styles.css so it can layer on top.
   ============================================================ */

/* Enhanced font rendering for splash screen */
.splash .splash-title,
.splash .splash-kicker,
.splash .splash-tag,
.splash .sf-name,
.splash .stat-num,
.splash .stat-label,
.splash .splash-badge,
.splash .splash-enter {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- LEGAL MODAL (Privacy / Terms / Contact) ---------- */
.legal-modal-box{max-width:680px;width:94%;max-height:86vh;display:flex;flex-direction:column}
.legal-body{padding:4px 26px 28px;overflow-y:auto;scroll-behavior:smooth}
.legal-body::-webkit-scrollbar{width:8px}
.legal-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.legal-updated{font-size:0.75rem;color:var(--text-muted);font-weight:600;letter-spacing:0.3px;margin-bottom:10px;text-transform:uppercase}
.legal-lead{font-size:0.95rem;line-height:1.7;color:var(--text-secondary);background:var(--accent-bg);border-left:3px solid var(--accent);padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:22px}
.legal-h{font-size:1rem;font-weight:800;color:var(--text-primary);margin:24px 0 8px;display:flex;align-items:center;gap:10px;letter-spacing:-0.2px}
.legal-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;border-radius:var(--radius-full);background:var(--gradient-accent,linear-gradient(135deg,var(--accent),var(--accent-light)));color:#fff;font-size:0.78rem;font-weight:800}
.legal-p{font-size:0.86rem;line-height:1.75;color:var(--text-secondary);margin-bottom:8px}
.legal-p strong{color:var(--text-primary);font-weight:700}
.legal-p a{color:var(--accent);font-weight:600;text-decoration:underline}
.legal-hint{font-size:0.74rem;color:var(--text-muted);margin-top:10px;text-align:center}

/* Contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:18px 0}
.contact-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent)}
.contact-card.static{cursor:default}
.contact-card.static:hover{transform:none;box-shadow:none}
.contact-card i{font-size:1.3rem;color:var(--accent);width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);border-radius:var(--radius-sm);flex-shrink:0}
.contact-card div{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-card strong{font-size:0.82rem;font-weight:700}
.contact-card span{font-size:0.78rem;color:var(--text-secondary);word-break:break-word}
.contact-card em{font-size:0.74rem;color:var(--text-muted);font-style:normal}
.legal-socials{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.legal-social{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--radius-full);background:var(--bg-primary);border:1px solid var(--border);font-size:0.8rem;font-weight:600;color:var(--text-secondary);text-decoration:none;transition:transform .18s,color .18s,border-color .18s}
.legal-social i{color:var(--sc,var(--accent))}
.legal-social:hover{transform:translateY(-2px);color:var(--sc,var(--accent));border-color:var(--sc,var(--accent))}
.contact-form .form-group{margin-bottom:14px}

/* ---------- SCROLL REVEAL / PAGE TRANSITIONS ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.tab-panel{animation:panelIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Stagger children of a revealed list */
.stagger > *{opacity:0;animation:staggerIn .45s cubic-bezier(.22,1,.36,1) forwards}
.stagger > *:nth-child(1){animation-delay:.03s}
.stagger > *:nth-child(2){animation-delay:.07s}
.stagger > *:nth-child(3){animation-delay:.11s}
.stagger > *:nth-child(4){animation-delay:.15s}
.stagger > *:nth-child(5){animation-delay:.19s}
.stagger > *:nth-child(6){animation-delay:.23s}
.stagger > *:nth-child(7){animation-delay:.27s}
.stagger > *:nth-child(8){animation-delay:.31s}
@keyframes staggerIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- BUTTON RIPPLE ---------- */
.btn,.auth-submit,.quick-action,.nav-item,.selection-card,.tab{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);pointer-events:none;animation:rippleAnim .6s ease-out}
.btn-outline .ripple,.quick-action .ripple,.nav-item .ripple,.tab .ripple,.selection-card .ripple{background:var(--accent-bg-hover)}
@keyframes rippleAnim{to{transform:scale(3);opacity:0}}

/* ---------- ANIMATED NAV ICONS ---------- */
.nav-item i{transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.nav-item:hover i{transform:translateY(-2px) scale(1.16) rotate(-6deg)}
.nav-item.active i{animation:navPop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes navPop{0%{transform:scale(1)}45%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1)}}
.quick-action:hover i{animation:wiggle .5s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.12)}75%{transform:rotate(12deg) scale(1.12)}}
.card-title .icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.card:hover .card-title .icon{transform:scale(1.12) rotate(-8deg)}

/* Respect reduced-motion preference (toggled in Settings too) */
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}

/* ---------- ENHANCED SPLASH SCREEN ANIMATIONS ---------- */
.splash-feat{transition:all .4s cubic-bezier(.2,.8,.3,1);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 24px;background:rgba(255,255,255,.85);
  border:2px solid rgba(22,163,74,.2);border-radius:20px;text-align:center;color:#166534;position:relative;overflow:hidden;
  backdrop-filter:blur(16px);box-shadow:0 8px 24px rgba(22,163,74,.12)}
.splash-feat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(22,163,74,.12),rgba(34,197,94,.12),transparent 50%);opacity:0;transition:opacity .4s ease}
.splash-feat:hover::before{opacity:1}
.splash-feat:hover{transform:translateY(-16px) scale(1.05);box-shadow:0 28px 56px rgba(22,163,74,.3);background:rgba(255,255,255,.98);border-color:rgba(22,163,74,.5)}
.splash-feat:active{transform:translateY(-12px) scale(1.03)}
.sf-ico{font-size:3.5rem;display:block;animation:iconFloat 4s ease-in-out infinite;filter:drop-shadow(0 8px 20px rgba(22,163,74,.3));transition:transform .3s ease}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(8deg)}}
.sf-name{font-size:1.25rem;font-weight:900;letter-spacing:-.5px;margin-bottom:8px;color:#166534;text-shadow:0 2px 4px rgba(22,163,74,.15)}
.sf-hint{font-size:.85rem;color:#374151;line-height:1.6;max-width:260px;margin:0;font-weight:500}
.splash-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:36px 0;animation:staggerIn 1s cubic-bezier(.2,.8,.3,1) both}
.splash-feat:nth-child(1){animation-delay:.15s}
.splash-feat:nth-child(2){animation-delay:.25s}
.splash-feat:nth-child(3){animation-delay:.35s}
.splash-feat:nth-child(4){animation-delay:.45s}
.splash-feat:nth-child(5){animation-delay:.55s}
.splash-feat:nth-child(6){animation-delay:.65s}
@keyframes staggerIn{
from{opacity:0;transform:translateY(30px) scale(.94)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.splash-feat-copy{font-size:.88rem;color:#4b5563;margin:0 0 28px;animation:fadeInUp .6s ease .8s both;line-height:1.6;font-weight:500;max-width:580px;margin-left:auto;margin-right:auto}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.splash-enter{animation:pulseBtn 2.5s ease-in-out infinite}
@keyframes pulseBtn{
0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(22,163,74,.3)}
50%{transform:scale(1.04);box-shadow:0 12px 36px rgba(22,163,74,.5)}
}
.splash-leaving{animation:splashFadeOut .8s ease-out forwards}
@keyframes splashFadeOut{
from{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(1.05)}
}
@media(max-width:900px){
  .splash-features{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .splash-features{grid-template-columns:1fr;max-width:340px;margin:24px auto}
  .sf-hint{max-width:100%}
}

/* ---------- SPLASH STATS ---------- */
.splash-stats{display:flex;gap:36px;justify-content:center;margin:32px 0;animation:fadeInUp .8s ease .4s both;flex-wrap:wrap}
.stat-item{text-align:center;position:relative;padding:12px 20px;background:rgba(255,255,255,.6);border-radius:18px;border:1.5px solid rgba(22,163,74,.2);backdrop-filter:blur(12px);box-shadow:0 4px 12px rgba(22,163,74,.08)}
.stat-item::after{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);width:52px;height:4px;background:linear-gradient(90deg,#16a34a,#22c55e);border-radius:4px;box-shadow:0 3px 10px rgba(22,163,74,.35)}
.stat-num{display:block;font-size:2.8rem;font-weight:900;color:#16a34a;line-height:1;margin-bottom:10px;animation:countUp 2s ease-out both;text-shadow:0 3px 10px rgba(22,163,74,.2)}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.stat-label{font-size:.78rem;color:#374151;text-transform:uppercase;letter-spacing:2px;font-weight:800}

/* ---------- SPLASH PARTICLES ---------- */
.splash-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.7}
.splash-particle{position:absolute;background:radial-gradient(circle,rgba(22,163,74,.6),rgba(34,197,94,.4));border-radius:50%;animation:particleFloat 15s linear infinite;box-shadow:0 0 8px rgba(22,163,74,.3)}
@keyframes particleFloat{
0%{transform:translateY(100vh) scale(0);opacity:0}
10%{opacity:.8}
90%{opacity:.8}
100%{transform:translateY(-40vh) scale(1.15);opacity:0}
}

/* ---------- SPLASH TAGLINE TYPING EFFECT ---------- */
.splash-tag{position:relative;overflow:hidden;display:inline-block}
.splash-tag::after{content:'';position:absolute;right:0;top:0;width:2px;height:100%;background:#16a34a;animation:blink 1s step-end infinite}
@keyframes blink{
0%,100%{opacity:1}
50%{opacity:0}
}

/* ---------- SPLASH PROGRESS BAR ---------- */
.splash-progress{display:none}

/* ---------- ENHANCED FEATURE CARD HOVER EFFECTS ---------- */
.splash-feat::after{content:'';position:absolute;inset:0;border-radius:16px;border:2px solid rgba(22,163,74,.5);opacity:0;transform:scale(1.05);transition:all .4s ease}
.splash-feat:hover::after{opacity:1;transform:scale(1)}
.sf-ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.splash-feat:hover .sf-ico{transform:scale(1.2) rotate(10deg)}

/* ---------- LEARN SECTION IMPROVEMENTS ---------- */
.learn-cat{font-size:.85rem;font-weight:700;color:var(--text-primary);padding:10px 18px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-full);transition:var(--transition);cursor:pointer}
.learn-cat:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.learn-cat.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.learn-content>p{font-size:.92rem;line-height:1.7;color:var(--text-primary);margin-bottom:16px}
.learn-content h3{font-size:1.3rem;font-weight:800;color:var(--text-primary);margin:20px 0 12px;letter-spacing:-.3px}
.learn-content h4{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin:16px 0 8px}
.learn-content ul,.learn-content ol{margin:12px 0;padding-left:24px;color:var(--text-secondary);line-height:1.6}
.learn-content li{margin-bottom:8px}
.learn-content strong{color:var(--text-primary);font-weight:700}
.learn-content .tip-box{background:var(--accent-bg);border-left:4px solid var(--accent);padding:16px;border-radius:var(--radius-sm);margin:16px 0}
.learn-content .tip-box p{color:var(--text-primary);font-size:.9rem;line-height:1.6;margin:0}
.learn-content .tip-box strong{color:var(--accent)}
.depth-sim{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin:20px 0}
.depth-level{padding:12px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer}
.depth-level:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.depth-level.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.depth-info{padding:16px;background:var(--bg-tertiary);border-radius:var(--radius-sm);margin-top:16px}
.depth-info p{color:var(--text-primary);font-size:.9rem;line-height:1.6;margin:0}
.di-metrics{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.metric-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:.82rem}
.metric-label{color:var(--text-muted);font-weight:500}
.metric-value{color:var(--accent);font-weight:700;text-align:right;max-width:60%}
.flip-card{perspective:1000px;height:120px;cursor:pointer;border-radius:var(--radius-md)}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;padding:16px;border-radius:var(--radius-md);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-front{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary)}
.flip-back{background:var(--accent-bg);border:1px solid var(--accent);color:var(--accent);transform:rotateY(180deg)}
.flip-tag{font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:var(--radius-full);margin-bottom:8px;display:inline-block}
.flip-tag.fact{background:var(--accent);color:#fff}
.flip-tag.myth{background:var(--warning);color:#fff}
.flip-card p{font-size:.85rem;line-height:1.5;margin:0;color:var(--text-secondary)}
.lc-node{padding:10px 16px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-full);font-size:.8rem;font-weight:600;color:var(--text-secondary);transition:var(--transition);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.lc-node.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.lc-emoji{font-size:1.8rem}
.lc-name{font-weight:700;color:var(--text-primary)}
.lc-day{font-size:0.74rem;color:var(--text-muted)}
.lc-detail{padding:16px;background:var(--bg-tertiary);border-radius:var(--radius-sm);margin-top:16px;text-align:center}
.lc-detail p{color:var(--text-primary);font-size:.9rem;line-height:1.6;margin:0}
.lc-science{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.lc-science-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:.8rem}
.lc-science-label{color:var(--text-muted);font-weight:500}
.lc-science-value{color:var(--accent);font-weight:700}
.checklist-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;transition:var(--transition);cursor:pointer}
.checklist-item:hover{background:var(--bg-tertiary);border-color:var(--accent)}
.checklist-item.completed{background:var(--success-light);border-color:var(--success)}
.checklist-item.completed .check-icon{background:var(--success);color:#fff}
.check-icon{width:24px;height:24px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--text-muted);flex-shrink:0;transition:var(--transition)}
.checklist-text{flex:1;font-size:.85rem;color:var(--text-primary);font-weight:500}
.ws-item{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:12px;transition:var(--transition);cursor:pointer}
.ws-item:hover{background:var(--bg-tertiary);border-color:var(--accent);transform:translateX(4px)}
.ws-item.correct{background:var(--success-light);border-color:var(--success)}
.ws-item.wrong{background:var(--danger-light);border-color:var(--danger)}
.ws-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.ws-text{flex:1;font-size:.9rem;color:var(--text-primary);font-weight:600}
.ws-desc{font-size:.75rem;color:var(--text-muted);margin-top:2px}
.aqi{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px}
.aqi-num{font-size:2.8rem;font-weight:800;line-height:1;letter-spacing:-1px;margin-bottom:8px}
.aqi-band{margin-left:auto;padding:6px 14px;border-radius:var(--radius-full);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.aqi-pm-data{margin-top:12px;padding:12px;background:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border)}
.pm-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:.82rem;border-bottom:1px solid var(--border-light)}
.pm-item:last-child{border-bottom:none}
.pm-label{color:var(--text-muted);font-weight:500}
.pm-value{color:var(--accent);font-weight:700}
.aqi-eg{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);font-size:.85rem;font-weight:600;color:var(--text-secondary)}
.aqi-eg:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.aqi-eg b{font-size:1.1rem;color:var(--text-primary)}
.aqi-eg small{font-size:0.74rem;color:var(--text-muted);font-weight:400;text-align:center}
/* ---------- Waste Decomposition Timeline ---------- */
.decomp{display:flex;flex-direction:column;gap:12px}
.dc-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}
.dc-row:hover{border-color:var(--accent);transform:translateX(2px)}
.dc-row.expanded{flex-direction:column;align-items:flex-start}
.dc-emoji{font-size:1.5rem}
.dc-track{flex:1;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden;position:relative}
.dc-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-light));width:0;transition:width 1.5s ease}
.dc-fill.run{width:var(--w)}
.dc-meta{display:flex;flex-direction:column;gap:2px;min-width:100px}
.dc-name{font-size:.85rem;font-weight:700;color:var(--text-primary)}
.dc-time{font-size:0.74rem;color:var(--text-muted)}
.dc-details{display:none;width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-light)}
.dc-row.expanded .dc-details{display:block}
.dc-details p{font-size:.8rem;color:var(--text-secondary);line-height:1.5;margin:0 0 8px}
.dc-carbon{font-size:.75rem;color:var(--accent);font-weight:700}
.monsoon-month{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:12px}
.monsoon-month.rainy{background:var(--info-light);border-color:var(--info)}
.monsoon-month.dry{background:var(--warning-light);border-color:var(--warning)}
.monsoon-rain{font-size:1.2rem}
.month-name{flex:1;font-size:.9rem;font-weight:700;color:var(--text-primary)}
.rain-amount{font-size:.85rem;color:var(--text-muted)}
.risk-badge{padding:4px 10px;border-radius:var(--radius-full);font-size:0.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.risk-badge.low{background:var(--success-light);color:var(--success)}
.risk-badge.moderate{background:var(--warning-light);color:#b8860b}
.risk-badge.high{background:var(--danger-light);color:var(--danger)}
.protocol-section{margin:24px 0;padding:20px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg)}
.protocol-section h3{font-size:1.1rem;font-weight:800;color:var(--text-primary);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.protocol-section h3 i{color:var(--accent);font-size:1.2rem}
.protocol-steps{margin-top:16px}
.protocol-step{display:flex;gap:16px;margin-bottom:16px}
.step-num{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}
.step-content{flex:1}
.step-content h4{font-size:.95rem;font-weight:700;color:var(--text-primary);margin:0 0 4px}
.step-content p{font-size:.85rem;color:var(--text-secondary);line-height:1.5;margin:0}

/* ---------- REALISTIC WATER SIMULATOR ---------- */
.depth-scene{position:relative;width:100%;height:280px;background:linear-gradient(180deg,#87CEEB 0%,#E0F7FA 50%,#B2EBF2 100%);border-radius:var(--radius-lg);overflow:hidden;box-shadow:inset 0 2px 10px rgba(0,0,0,.1)}
.depth-background{position:absolute;inset:0;background:linear-gradient(180deg,rgba(135,206,235,.3) 0%,rgba(224,247,250,.5) 100%);pointer-events:none}
.depth-ground{position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(180deg,#8B7355 0%,#6B5344 100%);border-top:3px solid #5D4037}
.depth-person{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:60px;height:120px;display:flex;align-items:flex-end;justify-content:center;z-index:10}
.depth-person span{font-size:2.5rem;transition:transform .3s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.depth-person span.bounce{animation:bounce .5s ease}
.depth-marks{position:absolute;right:10px;bottom:20px;height:100px;width:60px;border-left:2px dashed rgba(0,0,0,.2);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:10px;font-size:0.74rem;color:rgba(0,0,0,.5);font-style:italic}
.depth-marks i{position:absolute;right:8px;font-size:0.74rem}
.depth-water{position:absolute;bottom:20px;left:0;right:0;height:0;background:linear-gradient(180deg,rgba(0,106,78,.6) 0%,rgba(0,150,100,.8) 100%);transition:height .8s cubic-bezier(.4,0,.2,1);z-index:5;overflow:hidden}
.wave{position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);border-radius:50%;animation:waveMove 3s linear infinite}
.wave1{animation-delay:0s;opacity:.8}
.wave2{animation-delay:1s;opacity:.6;height:15px}
.wave3{animation-delay:2s;opacity:.4;height:10px}
@keyframes waveMove{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.wave-foam{position:absolute;top:0;left:0;right:0;height:8px;background:linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,255,255,.5),rgba(255,255,255,.2));animation:foamPulse 2s ease-in-out infinite}
@keyframes foamPulse{0%,100%{opacity:.5}50%{opacity:.8}}
.depth-rain{position:absolute;inset:0;pointer-events:none;z-index:20}
.raindrop{position:absolute;top:-10px;width:2px;height:15px;background:linear-gradient(180deg,transparent,rgba(100,149,237,.6));border-radius:50%;animation:rainFall linear infinite;opacity:0}
@keyframes rainFall{0%{transform:translateY(0)}100%{transform:translateY(300px);opacity:0}}
.depth-level{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border:2px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;font-size:.85rem;font-weight:600;color:var(--text-secondary);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow-sm)}
.depth-level::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,106,78,.05),transparent);opacity:0;transition:opacity .3s ease}
.depth-level:hover::before{opacity:1}
.depth-level:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.depth-level.active{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;border-color:var(--accent);box-shadow:0 4px 20px rgba(0,106,78,.4);transform:scale(1.05)}
.depth-level.active::before{opacity:0}
.dl-icon{font-size:1.8rem;transition:transform .3s ease}
.depth-level:hover .dl-icon{transform:scale(1.2) rotate(5deg)}
.dl-cm{font-size:1.1rem;font-weight:800}
.dl-name{font-size:.75rem;text-transform:uppercase;letter-spacing:.5px}
.depth-info{margin-top:20px;padding:20px;background:var(--bg-secondary);border-radius:var(--radius-lg);border:2px solid var(--border);transition:all .4s ease}
.depth-info.dg-safe{border-color:var(--success);background:var(--success-light)}
.depth-info.dg-warn{border-color:var(--warning);background:var(--warning-light)}
.depth-info.dg-high{border-color:var(--danger);background:var(--danger-light)}
.depth-info.dg-severe{border-color:var(--purple);background:var(--purple-light)}
.di-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.di-label{font-size:1.1rem;font-weight:800;color:var(--text-primary)}
.di-danger{font-size:.8rem;font-weight:700;padding:4px 12px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}
.depth-info.dg-safe .di-danger{background:var(--success);color:#fff}
.depth-info.dg-warn .di-danger{background:var(--warning);color:#fff}
.depth-info.dg-high .di-danger{background:var(--danger);color:#fff}
.depth-info.dg-severe .di-danger{background:var(--purple);color:#fff}
.di-tips{margin-top:16px;padding:14px;background:var(--bg-tertiary);border-radius:var(--radius-sm);border-left:4px solid var(--accent)}
.di-tips strong{display:block;margin-bottom:8px;font-size:.85rem;color:var(--text-primary);font-weight:700}
.di-tips ul{margin:0;padding-left:20px;color:var(--text-secondary);font-size:.8rem;line-height:1.6}
.di-tips li{margin-bottom:6px}
.di-warnings{margin-top:12px}
.warning-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--danger);color:#fff;border-radius:var(--radius-full);font-size:.8rem;font-weight:700;animation:pulse 1.5s ease infinite}
.depth-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}

/* ---------- LEARN SECTION ENHANCED STYLES ---------- */
.di-tips{margin-top:12px;padding:12px;background:var(--bg-tertiary);border-radius:var(--radius-sm);border-left:3px solid var(--accent)}
.di-tips strong{display:block;margin-bottom:8px;font-size:.85rem;color:var(--text-primary);font-weight:700}
.di-tips ul{margin:0;padding-left:20px;color:var(--text-secondary);font-size:.8rem;line-height:1.5}
.di-tips li{margin-bottom:4px}
.lc-tips{margin-top:12px;padding:12px;background:var(--accent-bg);border-radius:var(--radius-sm);border-left:3px solid var(--accent)}
.lc-tips strong{display:block;margin-bottom:8px;font-size:.85rem;color:var(--accent);font-weight:700}
.lc-tips ul{margin:0;padding-left:20px;color:var(--text-secondary);font-size:.8rem;line-height:1.5}
.lc-tips li{margin-bottom:4px}
.st-fix{display:block;margin-top:6px;font-size:.75rem;color:var(--text-secondary);line-height:1.3;padding:8px;background:var(--bg-tertiary);border-radius:var(--radius-sm)}
.spot-tile.animate{animation:pop .3s ease}
.spot-tile.done{transform:scale(.95)}
.spot-tile.is-danger{border-color:var(--danger);background:var(--danger-light)}
.spot-tile.is-safe{border-color:var(--success);background:var(--success-light)}
.st-flag{display:block;font-size:.75rem;font-weight:700;margin-bottom:4px}
.st-flag:empty{display:none}
.checklist-items{display:flex;flex-direction:column;gap:12px}
.check-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .3s ease}
.check-row:hover{background:var(--bg-tertiary);border-color:var(--accent);transform:translateX(4px)}
.check-row.on{background:var(--success-light);border-color:var(--success)}
.check-box{width:24px;height:24px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.check-row.on .check-box{background:var(--success);color:#fff;animation:spin .3s ease}
.check-box i{font-size:.8rem;opacity:0;transition:opacity .3s ease}
.check-row.on .check-box i{opacity:1}
.check-txt{flex:1;font-size:.85rem;color:var(--text-primary);font-weight:500}
.check-row.on .check-txt{text-decoration:line-through;color:var(--text-muted)}

/* ---------- LEARN SECTION MODERN FEATURES ---------- */
.depth-sim,.myths-grid,.lifecycle,.spotter-grid,.checklist-wrap,.water-tips,.emergency-kit{position:relative;overflow:hidden}
.depth-sim::before,.myths-grid::before,.lifecycle::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-light),var(--accent));animation:shimmer 2s linear infinite;background-size:200% 100%}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.water-tip-card{cursor:pointer;position:relative;overflow:hidden}
.water-tip-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(0,106,78,.05) 100%);opacity:0;transition:opacity .3s ease}
.water-tip-card:hover::before{opacity:1}
.ek-item{cursor:pointer;position:relative}
.ek-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transition:transform .3s ease}
.ek-item:hover::before{transform:scaleY(1)}
.ek-item.checked::before{background:var(--success);transform:scaleY(1)}
.co-tip{cursor:pointer;position:relative;overflow:hidden}
.co-tip::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(0,106,78,.03) 100%);opacity:0;transition:opacity .3s ease}
.co-tip:hover::before{opacity:1}
.ef-card{cursor:pointer;position:relative}
.ef-card::after{content:'';position:absolute;inset:0;border:2px solid var(--accent);border-radius:var(--radius-md);opacity:0;transition:opacity .3s ease}
.ef-card:hover::after{opacity:1}
.ef-next{position:relative;overflow:hidden}
.ef-next::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-100%);transition:transform .3s ease}
.ef-next:hover::before{transform:translateX(100%)}

/* ---------- LEARN SECTION HEADER STYLES ---------- */
.depth-header,.myths-header,.lifecycle-header,.spotter-header,.checklist-header,.water-tips-header,.emergency-header{margin-bottom:24px;text-align:center;padding:24px;background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border);position:relative;overflow:hidden}
.depth-header::before,.myths-header::before,.lifecycle-header::before,.spotter-header::before,.checklist-header::before,.water-tips-header::before,.emergency-header::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,106,78,.03) 0%,transparent 70%);animation:rotate 20s linear infinite}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.depth-header h3,.myths-header h3,.lifecycle-header h3,.spotter-header h3,.checklist-header h3,.water-tips-header h3,.emergency-header h3{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin:0 0 8px;letter-spacing:-.5px;position:relative}
.depth-header p,.myths-header p,.lifecycle-header p,.spotter-header p,.checklist-header p,.water-tips-header p,.emergency-header p{font-size:.95rem;color:var(--text-secondary);margin:0;line-height:1.5;position:relative}
.spotter-score{font-size:1.1rem;font-weight:700;color:var(--accent);text-align:center;margin-bottom:16px;padding:12px;background:var(--accent-bg);border-radius:var(--radius-full);position:relative;overflow:hidden}
.spotter-score::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,106,78,.1),transparent);animation:shimmer 2s linear infinite;background-size:200% 100%}
.spotter-score.complete{background:var(--success-light);color:var(--success)}
.checklist-progress{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px;padding:20px;background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border)}
.checklist-progress svg{flex-shrink:0}
.checklist-progress span{font-size:1.5rem;font-weight:800;color:var(--accent)}
.checklist-items{display:flex;flex-direction:column;gap:12px}
.myths-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.spotter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}

/* ---------- LEARN WIDGETS (sorter, judge, lifecycle, monsoon) ---------- */
.learn-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.learn-panel{animation:panelIn .35s var(--ease-out,ease) both}
.learn-lead{font-size:.92rem;line-height:1.7;color:var(--text-secondary);margin:0 0 16px}
.learn-score{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent);font-size:.75rem;font-weight:800}

.lifecycle{position:relative;padding:8px 0 4px}
.lc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative;z-index:1}
.lc-track{display:none}
.lifecycle-progress{display:flex;align-items:center;gap:12px;margin:8px 0 16px}
.lifecycle-bar{height:8px;width:0;max-width:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-light));transition:width .45s ease}
.lifecycle-label{font-size:.75rem;font-weight:800;color:var(--accent);white-space:nowrap}

.spot-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border:1.5px solid var(--border);border-radius:14px;background:var(--bg-secondary);cursor:pointer;text-align:left;font-family:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.spot-tile:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.st-emoji{font-size:1.7rem}
.st-name{font-size:.85rem;font-weight:700;color:var(--text-primary)}
.st-tap{font-size:0.74rem;color:var(--text-muted);font-weight:600}

.sorter{display:flex;flex-direction:column;gap:16px}
.sort-item{min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px;border-radius:18px;background:var(--bg-tertiary);border:1.5px dashed var(--border)}
.sort-item.pop{animation:pop .35s ease}
.si-emoji{font-size:2.6rem;line-height:1}
.si-name{font-size:1.02rem;font-weight:800;color:var(--text-primary)}
.sort-done{text-align:center;font-size:1rem;font-weight:700;color:var(--text-primary)}
.sort-bins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bin-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;border:1.5px solid var(--border);border-radius:14px;background:var(--bg-secondary);cursor:pointer;font-family:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.bin-btn:hover:not(:disabled){transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.bin-btn.right{border-color:var(--success);background:var(--success-light);animation:pop .3s ease}
.bin-btn.wrong{border-color:var(--danger);background:var(--danger-light);animation:shake .3s ease}
.bin-emoji{font-size:1.8rem}
.bin-label{font-size:.88rem;font-weight:800;color:var(--text-primary)}
.bin-hint{font-size:0.74rem;color:var(--text-muted);font-weight:600}
.bin-wet{border-bottom:3px solid #2e7d32}
.bin-dry{border-bottom:3px solid #1565c0}
.bin-haz{border-bottom:3px solid #c62828}
.sort-feedback{min-height:1.4em;font-size:.88rem;font-weight:700;text-align:center}
.sort-feedback.ok{color:var(--success)}
.sort-feedback.bad{color:var(--danger)}

.judge-card{padding:18px;border-radius:16px;background:var(--bg-secondary);border:1px solid var(--border)}
.judge-scenario{font-size:.95rem;font-weight:600;color:var(--text-primary);line-height:1.55;margin:0 0 14px}
.judge-opts{display:flex;flex-direction:column;gap:8px}
.judge-opt{padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg-tertiary);text-align:left;cursor:pointer;font-family:inherit;font-size:.88rem;font-weight:600;color:var(--text-primary);transition:transform .15s,border-color .15s}
.judge-opt:hover:not(:disabled){border-color:var(--accent);transform:translateX(4px)}
.judge-opt.good{border-color:var(--success);background:var(--success-light)}
.judge-opt.bad{border-color:var(--danger);background:var(--danger-light)}
.judge-fb{margin-top:12px;font-size:.85rem;line-height:1.55;font-weight:600}
.judge-fb.ok{color:var(--success)}
.judge-fb.bad{color:var(--danger)}
.judge-done{text-align:center;font-size:1rem;font-weight:700;padding:12px}

.fg-months{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}
.fg-month{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg-secondary);cursor:pointer;font-family:inherit;transition:transform .2s,border-color .2s}
.fg-month:hover{transform:translateY(-2px);border-color:var(--accent)}
.fg-month.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fg-m{font-size:.88rem;font-weight:800}
.fg-t{font-size:0.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.fg-month-detail{padding:14px 16px;border-radius:12px;background:var(--accent-bg);border-left:3px solid var(--accent);font-size:.9rem;line-height:1.6;color:var(--text-primary)}
.fg-q-row{display:flex;flex-direction:column;gap:8px}
.fg-q{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary);cursor:pointer;text-align:left;font-family:inherit;width:100%}
.fg-q.active{border-color:var(--accent);background:var(--accent-bg)}
.fg-q-ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent)}
.fg-q-title{font-size:.88rem;font-weight:700;color:var(--text-primary)}
.fg-q-body{margin-top:10px;padding:14px 16px;border-radius:12px;background:var(--accent-bg);font-size:.9rem;line-height:1.6;color:var(--text-primary)}
.fg-proto{list-style:none;display:flex;flex-direction:column;gap:12px}
.fg-proto li{display:flex;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-secondary)}
.fg-n{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.fg-proto strong{display:block;margin-bottom:4px}
.fg-proto p{margin:0;font-size:.85rem;color:var(--text-secondary);line-height:1.5}
.rrr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rrr-tile{padding:18px 16px;border:1px solid var(--border);border-radius:16px;background:var(--bg-secondary);cursor:pointer;text-align:center;transition:transform .2s,border-color .2s}
.rrr-tile:hover{transform:translateY(-3px);border-color:var(--accent)}
.rrr-emoji{font-size:1.8rem}
.rrr-title{font-size:.95rem;font-weight:800;margin:8px 0 4px}
.rrr-detail{font-size:.82rem;color:var(--text-secondary);line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .25s,margin .25s}
.rrr-tile.open .rrr-detail{max-height:160px;opacity:1;margin-top:8px}
@media (max-width:720px){.rrr-grid{grid-template-columns:1fr}}

.water-tips{display:flex;flex-direction:column;gap:10px}
.water-tip-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--bg-secondary);cursor:pointer}
.water-tip-card .wt-content p{display:none;margin:6px 0 0;font-size:.85rem;color:var(--text-secondary);line-height:1.55}
.water-tip-card.expanded .wt-content p{display:block}
.wt-icon{font-size:1.4rem}
.wt-arrow{margin-left:auto;color:var(--text-muted);transition:transform .25s}
.water-tip-card.expanded .wt-arrow{transform:rotate(180deg)}

.emergency-kit{display:flex;flex-direction:column;gap:8px}
.ek-item{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary)}
.ek-item.checked{background:var(--success-light);border-color:var(--success)}
.ek-check{width:22px;height:22px;border-radius:50%;background:var(--border);display:grid;place-items:center;color:#fff;flex-shrink:0}
.ek-item.checked .ek-check{background:var(--success)}
.ek-content strong{display:block;font-size:.88rem}
.ek-content small{display:block;font-size:.75rem;color:var(--text-secondary);line-height:1.45;margin-top:2px}
.ek-badge{margin-left:auto;font-size:0.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.ek-item input{display:none}

.community-tips{display:flex;flex-direction:column;gap:10px}
.co-tip{display:flex;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--bg-secondary)}
.co-step{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;flex-shrink:0}
.co-body strong{display:block;font-size:.92rem;margin-bottom:4px}
.co-body p{margin:0;font-size:.85rem;color:var(--text-secondary);line-height:1.55}

.env-facts{display:flex;flex-direction:column;align-items:center;gap:14px}
.ef-card{width:100%;padding:28px 22px;border-radius:18px;background:var(--bg-secondary);border:1px solid var(--border);text-align:center}
.ef-fact{display:block;font-size:1.15rem;font-weight:700;line-height:1.5;color:var(--text-primary)}
.ef-source{display:block;margin-top:10px;font-size:.75rem;color:var(--text-muted);font-weight:600}
.ef-next{padding:10px 18px;border:1.5px solid var(--border);border-radius:999px;background:var(--bg-secondary);cursor:pointer;font-family:inherit;font-weight:700;color:var(--text-primary)}
.ef-next:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:720px){
  .lc-row,.sort-bins,.fg-months{grid-template-columns:repeat(2,1fr)}
  .depth-levels{grid-template-columns:repeat(2,1fr)}
}

/* ---------- LEARN SECTION ANIMATIONS ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 5px var(--accent)}50%{box-shadow:0 0 20px var(--accent),0 0 30px var(--accent-light)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}

/* ---------- SPLASH BADGES ---------- */
.splash-badges{display:flex;gap:14px;justify-content:center;margin:28px 0;animation:fadeInUp .6s ease .9s both;flex-wrap:wrap}
.splash-badge{display:flex;align-items:center;gap:12px;padding:12px 20px;background:rgba(255,255,255,.75);border:2px solid rgba(22,163,74,.3);border-radius:16px;color:#166534;font-size:.82rem;font-weight:800;transition:all .3s ease;backdrop-filter:blur(12px);box-shadow:0 3px 12px rgba(22,163,74,.1)}
.splash-badge:hover{background:rgba(22,163,74,.15);border-color:rgba(22,163,74,.6);transform:translateY(-4px);box-shadow:0 6px 20px rgba(22,163,74,.25)}
.splash-badge i{color:#16a34a;font-size:1rem}

/* ---------- MODERN MAP PINS & CLUSTERS ---------- */
.cb-pin-wrap,.cb-cluster-wrap{background:transparent;border:none}
.cb-pin{position:relative;width:36px;height:36px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pc,#4285f4);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.35);border:2px solid #fff;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.cb-pin span{transform:rotate(45deg);font-size:0.94rem;line-height:1}
.cb-pin:hover{transform:rotate(-45deg) scale(1.15)}
.cb-pin-pulse::after{content:'';position:absolute;inset:-6px;border-radius:50% 50% 50% 0;border:2px solid var(--pc,#4285f4);opacity:.7;animation:pinPulse 1.8s ease-out infinite}
@keyframes pinPulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.cb-cluster{width:100%;height:100%;border-radius:50%;background:var(--cc,#4285f4);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,.9);box-shadow:0 3px 12px rgba(0,0,0,.3);animation:clusterPop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes clusterPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.custom-popup .btn{margin-top:6px}

/* ---------- NOTIFICATIONS ---------- */
.notif-count{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-full);background:var(--danger);color:#fff;font-size:0.74rem;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-secondary);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.bell-ring{animation:bellRing 2.4s ease-in-out infinite;transform-origin:top center}
@keyframes bellRing{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}84%{transform:rotate(9deg)}88%{transform:rotate(-6deg)}92%{transform:rotate(3deg)}}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}
.notif-head h4{font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px;margin:0}
.notif-head h4 i{color:var(--accent)}
.notif-head-count{font-size:0.74rem;font-weight:600;color:var(--text-muted)}
.notif-markread{background:var(--accent-bg);color:var(--accent);border:none;font-size:0.74rem;font-weight:700;padding:5px 10px;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition)}
.notif-markread:hover{background:var(--accent-bg-hover)}
.notif-tabs{display:flex;gap:6px;padding:6px 16px 10px;border-bottom:1px solid var(--border)}
.notif-tab{flex:1;padding:7px;border:none;background:var(--bg-primary);border-radius:var(--radius-sm);font-size:.76rem;font-weight:700;color:var(--text-muted);cursor:pointer;transition:var(--transition);font-family:inherit}
.notif-tab.active{background:var(--accent);color:#fff}
.notif-scroll{max-height:340px;overflow-y:auto;padding:6px}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .18s;border-left:3px solid transparent}
.notif-item:hover{background:var(--bg-primary)}
.notif-item.unread{background:var(--accent-bg);border-left-color:var(--accent)}
.notif-item-main{flex:1;min-width:0}
.notif-item-main strong{font-size:.8rem;font-weight:600;display:block;line-height:1.35}
.notif-item-time{font-size:0.74rem;color:var(--text-muted);margin-top:4px}
.notif-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px}

/* ---------- EVENTS ---------- */
.events-hero{background:var(--gradient-accent,linear-gradient(135deg,var(--accent),var(--accent-light)));color:#fff}
.events-hero h4,.events-hero p{color:#fff}
.events-list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.event-card{display:flex;gap:16px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);transition:transform .2s,box-shadow .2s,border-color .2s}
.event-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.event-card.past{opacity:.62}
.event-date{flex-shrink:0;width:60px;height:66px;border-radius:var(--radius-md);background:var(--accent-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--border)}
.event-date-day{font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1}
.event-date-mon{font-size:0.74rem;font-weight:700;color:var(--text-muted);letter-spacing:1px;margin-top:3px}
.event-body{flex:1;min-width:0}
.event-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.event-title{font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.event-type{font-size:0.74rem;font-weight:700;color:var(--accent);background:var(--accent-bg);padding:3px 9px;border-radius:var(--radius-full);white-space:nowrap}
.event-status{font-size:0.74rem;font-weight:800;padding:2px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.4px}
.event-status.open{background:var(--success-light);color:var(--success)}
.event-status.going{background:var(--info-light);color:var(--info)}
.event-status.full{background:var(--warning-light);color:#b8860b}
.event-status.past{background:var(--bg-tertiary);color:var(--text-muted)}
.event-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:.74rem;color:var(--text-secondary);margin-bottom:8px}
.event-meta i{color:var(--text-muted);margin-right:4px}
.event-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.55;margin-bottom:8px}
.event-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.event-tag{font-size:0.74rem;font-weight:600;color:var(--text-muted);background:var(--bg-primary);border:1px solid var(--border);padding:3px 9px;border-radius:var(--radius-full)}
.event-progress{height:6px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden;margin-bottom:12px}
.event-progress-fill{height:100%;background:var(--gradient-accent,linear-gradient(90deg,var(--accent),var(--accent-light)));border-radius:var(--radius-full);transition:width .6s cubic-bezier(.22,1,.36,1)}
.event-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- LEADERBOARD PODIUM ---------- */
.podium{display:none;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:end;margin:6px 0 18px}
.pod-col{display:flex;flex-direction:column;align-items:center;text-align:center;animation:podRise .55s cubic-bezier(.34,1.56,.64,1) backwards}
.pod-col:nth-child(1){animation-delay:.12s}
.pod-col:nth-child(2){animation-delay:0s}
.pod-col:nth-child(3){animation-delay:.22s}
@keyframes podRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pod-medal{font-size:1.5rem;margin-bottom:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.pod-avatar{width:52px;height:52px;border-radius:50%;background:var(--gradient-accent,linear-gradient(135deg,var(--accent),var(--accent-light)));color:#fff;font-size:1.3rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,106,78,.3);margin-bottom:6px;border:3px solid var(--bg-secondary)}
.pod-1 .pod-avatar{width:64px;height:64px;font-size:1.6rem}
.pod-name{font-size:.78rem;font-weight:700;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-score{font-size:0.74rem;color:var(--text-muted);font-weight:700;margin:2px 0 8px}
.pod-score i{color:var(--warning)}
.pod-block{width:100%;border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:var(--gradient-accent,linear-gradient(135deg,var(--accent),var(--accent-light)));color:#fff;font-weight:800;font-size:1.1rem;display:flex;align-items:center;justify-content:center;opacity:.92}
.pod-1 .pod-block{height:78px}
.pod-2 .pod-block{height:56px}
.pod-3 .pod-block{height:42px}

/* ---------- ACHIEVEMENT PROGRESS RINGS ---------- */
.achievement-card{position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.achievement-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-lg)}
.achievement-card.unlocked{border-color:var(--rc,var(--accent))}
.ach-rarity{position:absolute;top:8px;left:8px;font-size:0.74rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--rc,#9aa0a6);background:color-mix(in srgb,var(--rc,#9aa0a6) 14%,transparent);padding:2px 7px;border-radius:var(--radius-full)}
.ach-ring{position:relative;width:64px;height:64px;margin:14px auto 8px;display:flex;align-items:center;justify-content:center}
.ach-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ach-ring .ring-bg{fill:none;stroke:var(--bg-tertiary);stroke-width:5}
.ach-ring .ring-fg{fill:none;stroke:var(--rc,var(--accent));stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
.achievement-card.locked .ach-ring .ring-fg{stroke:var(--text-muted);opacity:.5}
.ach-ring .ach-icon{font-size:1.7rem;position:relative;z-index:1;filter:grayscale(0)}
.achievement-card.locked .ach-icon{filter:grayscale(1);opacity:.45}
.ach-progress-text{font-size:0.74rem;font-weight:700;color:var(--text-muted);margin-top:4px}
.achievement-card.unlocked .ach-progress-text{color:var(--success)}

/* ---------- LEARN & TIPS ---------- */
.tip-rotator{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(251,188,4,.16),rgba(0,106,78,.10));border:1px solid var(--border);margin-bottom:16px}
.tip-rotator-icon{width:44px;height:44px;flex-shrink:0;border-radius:50%;background:var(--warning);color:#5a4500;display:flex;align-items:center;justify-content:center;font-size:1.2rem;animation:bulbGlow 2.6s ease-in-out infinite}
@keyframes bulbGlow{0%,100%{box-shadow:0 0 0 0 rgba(251,188,4,.5)}50%{box-shadow:0 0 0 10px rgba(251,188,4,0)}}
.tip-rotator-body{flex:1;min-width:0}
.tip-rotator-label{font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--warning);margin-bottom:3px}
.tip-rotator-text{font-size:.85rem;line-height:1.5;color:var(--text-primary);transition:opacity .2s}
.tip-rotator-next{width:36px;height:36px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);background:var(--bg-secondary);color:var(--accent);cursor:pointer;transition:var(--transition)}
.tip-rotator-next:hover{background:var(--accent);color:#fff;transform:rotate(90deg)}
.learn-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.learn-cat{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--border);background:var(--bg-secondary);border-radius:var(--radius-full);font-size:.8rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:var(--transition);font-family:inherit}
.learn-cat i{transition:transform .25s}
.learn-cat:hover{border-color:var(--accent);color:var(--accent)}
.learn-cat:hover i{transform:scale(1.2) rotate(-8deg)}
.learn-cat.active{background:var(--gradient-accent,linear-gradient(135deg,var(--accent),var(--accent-light)));color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(0,106,78,.25)}
.learn-panel{animation:panelIn .3s ease}
.check-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.83rem;color:var(--text-secondary)}
.check-list li{position:relative;padding-left:28px;line-height:1.5}
.check-list li::before{content:'✓';position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--success-light);color:var(--success);font-weight:800;font-size:0.74rem;display:flex;align-items:center;justify-content:center}
.accordion{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.accordion[open]{border-color:var(--accent)}
.accordion summary{list-style:none;cursor:pointer;padding:14px 16px;font-size:.85rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:10px;transition:background .18s}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary i{color:var(--accent);transition:transform .25s}
.accordion summary:hover{background:var(--bg-primary)}
.accordion[open] summary i{transform:rotate(90deg)}
.accordion-body{padding:0 16px 15px 16px;font-size:.82rem;line-height:1.65;color:var(--text-secondary);animation:panelIn .25s ease}

/* ---------- Water Conservation Tips ---------- */
.water-tips{display:flex;flex-direction:column;gap:10px}
.water-tip-card{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}
.water-tip-card:hover{border-color:var(--accent);background:var(--accent-bg)}
.water-tip-card.expanded{background:var(--bg-secondary)}
.wt-icon{font-size:1.8rem;flex-shrink:0}
.wt-content{flex:1;min-width:0}
.wt-content strong{display:block;font-size:.85rem;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.wt-content p{font-size:.78rem;color:var(--text-secondary);line-height:1.4;margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease}
.water-tip-card.expanded .wt-content p{max-height:100px;margin-top:4px}
.wt-arrow{color:var(--text-muted);transition:transform .25s;font-size:.75rem}
.water-tip-card.expanded .wt-arrow{transform:rotate(180deg)}

/* ---------- Emergency Kit ---------- */
.emergency-kit{display:flex;flex-direction:column;gap:8px}
.ek-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition)}
.ek-item:hover{border-color:var(--accent)}
.ek-item.essential{border-left:3px solid var(--danger)}
.ek-item.checked{background:var(--success-light);border-color:var(--success)}
.ek-check{width:22px;height:22px;border-radius:50%;background:var(--bg-tertiary);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--success);font-size:0.74rem;transition:var(--transition)}
.ek-item.checked .ek-check{background:var(--success);border-color:var(--success)}
.ek-content{flex:1;min-width:0}
.ek-content strong{display:block;font-size:.82rem;font-weight:700;color:var(--text-primary)}
.ek-content small{display:block;font-size:0.74rem;color:var(--text-muted);margin-top:2px}
.ek-badge{font-size:0.74rem;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}
.ek-item.essential .ek-badge{background:var(--danger-light);color:var(--danger)}

/* ---------- Community Tips ---------- */
.community-tips{display:flex;flex-direction:column;gap:12px}
.co-tip{display:flex;gap:14px;padding:14px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md)}
.co-step{width:32px;height:32px;border-radius:50%;background:var(--gradient-accent);color:#fff;font-size:.85rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.co-body{flex:1}
.co-body strong{display:block;font-size:.85rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}
.co-body p{font-size:.78rem;color:var(--text-secondary);line-height:1.5;margin:0}

/* ---------- Environmental Facts ---------- */
.env-facts{display:flex;flex-direction:column;gap:14px}
.ef-card{padding:18px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;transition:opacity .2s}
.ef-card.fade{opacity:.5}
.ef-fact{display:block;font-size:.95rem;font-weight:600;color:var(--text-primary);line-height:1.5;margin-bottom:8px}
.ef-source{display:block;font-size:0.74rem;color:var(--text-muted);font-style:italic}
.ef-next{width:100%;padding:12px;background:var(--gradient-accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.82rem;font-weight:700;cursor:pointer;transition:var(--transition);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}
.ef-next:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,106,78,.3)}

/* ---------- ABOUT ENHANCEMENTS ---------- */
.about-hero{position:relative;overflow:hidden}
.about-hero-logo{width:96px;height:96px;background:#fff;border-radius:24px;padding:10px;margin-bottom:16px;box-shadow:0 12px 32px rgba(0,0,0,.28);position:relative}
.about-hero-logo img{width:100%;height:100%;display:block;border-radius:16px}
.about-hero-badge{display:inline-block;font-size:0.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,.22);padding:5px 13px;border-radius:var(--radius-full);margin-bottom:12px;backdrop-filter:blur(4px)}
.about-hero-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.hero-chip{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);color:#fff;padding:7px 14px;border-radius:var(--radius-full);backdrop-filter:blur(4px);transition:transform .2s,background .2s}
.hero-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.28)}
.privacy-trust-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.trust-badge{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:.78rem;font-weight:700;color:var(--text-secondary);transition:transform .2s,border-color .2s}
.trust-badge:hover{transform:translateY(-2px);border-color:var(--accent)}
.trust-badge i{color:var(--accent);font-size:1.05rem}
.privacy-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

/* ---------- SETTINGS ---------- */
.card-sub{font-size:.8rem;color:var(--text-secondary);line-height:1.55;margin:-4px 0 14px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border-light)}
.settings-row:last-child{border-bottom:none}
.settings-row-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.settings-row-text strong{font-size:.85rem;font-weight:700}
.settings-row-text span{font-size:.74rem;color:var(--text-muted);line-height:1.4}
.seg-control{display:inline-flex;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-full);padding:3px;gap:2px;flex-shrink:0}
.seg-control button{border:none;background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:700;padding:7px 14px;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition);font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.seg-control button.active{background:var(--bg-secondary);color:var(--accent);box-shadow:var(--shadow-sm)}
.seg-control button:hover:not(.active){color:var(--text-primary)}
#fontSeg button{width:38px;justify-content:center}
#fontSeg button:nth-child(2){font-size:.92rem}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border-light);cursor:pointer}
.switch-row:last-child{border-bottom:none}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--border);border-radius:var(--radius-full);transition:.28s cubic-bezier(.22,1,.36,1)}
.switch .slider::before{content:'';position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.28s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.settings-note{font-size:.74rem;color:var(--text-muted);margin-top:10px;padding:9px 12px;background:var(--bg-primary);border-radius:var(--radius-sm)}
.connected-accounts{display:flex;flex-direction:column;gap:10px}
.connected-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md)}
.conn-icon{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--cc,var(--accent));display:flex;align-items:center;justify-content:center;font-size:1.1rem;border:1px solid var(--border);flex-shrink:0}
.conn-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.conn-info strong{font-size:.84rem;font-weight:700}
.conn-info span{font-size:0.74rem;color:var(--text-muted)}
.conn-tag{font-size:0.74rem;font-weight:700;color:var(--text-muted);background:var(--bg-tertiary);padding:4px 10px;border-radius:var(--radius-full)}
.settings-storage{margin-bottom:14px}
.settings-storage-bar{height:8px;background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden;margin-bottom:6px}
.settings-storage-fill{height:100%;background:var(--gradient-accent,linear-gradient(90deg,var(--accent),var(--accent-light)));border-radius:var(--radius-full);transition:width .6s cubic-bezier(.22,1,.36,1)}
#storageLabel{font-size:0.74rem;color:var(--text-muted)}
.btn-row{display:flex;gap:8px}
.btn-danger-outline{border-color:var(--danger) !important;color:var(--danger) !important}
.danger-card{border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
.settings-about-foot{text-align:center;font-size:.76rem;color:var(--text-muted);line-height:1.8;padding:16px 0 4px}
.settings-about-foot strong{color:var(--text-secondary)}
.settings-about-foot a{color:var(--accent);font-weight:600;cursor:pointer}
.hc-pins .cb-pin{border-width:3px;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.4)}

/* ---------- GUIDED TOUR (on-demand quick guide) ---------- */
#tourOverlay{position:fixed;inset:0;z-index:14000;pointer-events:auto;isolation:isolate;--tour-dim:color-mix(in srgb,var(--text-primary) 46%,transparent);color:var(--text-primary);font-family:var(--font-sans,inherit);overscroll-behavior:contain;animation:tourArrive .18s ease-out}
#tourOverlay [hidden]{display:none!important}
/* Retained because other existing components also use this named animation. */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes tourArrive{from{opacity:0}to{opacity:1}}
html.tour-lock{--tour-active:1;overflow:hidden}
html.tour-lock :is(#panel,.map-wrapper){scroll-behavior:auto!important;transition:none!important}
.tour-veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--tour-dim);opacity:0}
.tour-veil.on{opacity:1}
.tour-spot{position:fixed;z-index:2;border-radius:12px;pointer-events:none;box-shadow:0 0 0 9999px var(--tour-dim),inset 0 0 0 2px var(--accent)}
/* No position transitions: the ring always matches the clipped live target. */
.tour-card{position:fixed;z-index:3;display:flex;flex-direction:column;width:420px;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:hidden;isolation:isolate;background:var(--bg-secondary);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-2xl, var(--shadow-xl));color:var(--text-primary);text-align:start}
.tour-card.tour-sheet{max-height:60vh;max-height:60dvh}
.tour-botanical{position:absolute;right:0;top:-4px;width:150px;height:140px;color:var(--accent);opacity:.13;pointer-events:none;z-index:-1}
.tour-top{display:flex;align-items:flex-start;gap:12px;flex:none;padding:22px 20px 14px;background:linear-gradient(125deg,var(--accent-bg),transparent 78%)}
.tour-head{flex:1;min-width:0}
#tourOverlay .tour-eyebrow{font-size:.72rem;font-weight:750;letter-spacing:.07em;line-height:1.5;color:var(--accent);margin-bottom:7px}
#tourTitle{font-size:clamp(1.12rem,2.4vw,1.4rem);font-weight:800;letter-spacing:-.025em;line-height:1.3;margin:0;color:var(--text-primary);overflow-wrap:anywhere}
#tourOverlay button,#tourOverlay select{min-width:44px;min-height:44px;box-sizing:border-box;font:inherit;font-size:.875rem;line-height:1.4;cursor:pointer;border:1px solid var(--border);border-radius:12px;color:var(--text-primary);background:var(--bg-primary);touch-action:manipulation}
#tourOverlay button{padding:10px 14px;font-weight:700;transition:background-color .15s ease,border-color .15s ease}
#tourOverlay button:hover{border-color:var(--accent);background:var(--accent-bg)}
#tourOverlay :is(button,select,[tabindex]):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#tourTitle:focus{outline:none}
#tourTitle:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
#tourOverlay .tour-close{flex:none;padding:10px 12px;background:var(--bg-secondary);color:var(--text-secondary);border-radius:var(--radius-full,999px)}
.tour-progress{flex:none;display:flex;flex-direction:column;gap:8px;padding:0 20px 12px;color:var(--text-secondary);font-size:.75rem;line-height:1.4}
#tourProgress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:4px;border:0;border-radius:999px;overflow:hidden;background:var(--bg-tertiary);color:var(--accent)}
#tourProgress::-webkit-progress-bar{background:var(--bg-tertiary);border-radius:999px}
#tourProgress::-webkit-progress-value{background:var(--accent);border-radius:999px}
#tourProgress::-moz-progress-bar{background:var(--accent);border-radius:999px}
.tour-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:2px 20px 18px;scroll-padding-block:8px;-webkit-overflow-scrolling:touch}
#tourOverlay p{margin:0;font-size:.9rem;line-height:1.7;color:var(--text-secondary)}
.tour-paths{display:grid;gap:9px;margin-top:17px}
#tourOverlay .tour-path{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 14px;text-align:start;border-radius:14px;background:var(--bg-secondary);box-shadow:var(--shadow-xs)}
#tourOverlay .tour-path:first-child{background:var(--accent-bg);border-color:color-mix(in srgb,var(--accent) 36%,var(--border))}
.tour-path strong{display:block;color:var(--text-primary);font-size:.94rem;line-height:1.4}
.tour-path small{display:block;margin-top:4px;font-size:.76rem;font-weight:400;line-height:1.5;color:var(--text-secondary)}
.tour-path-count{flex:none;font-size:.71rem;color:var(--accent);font-weight:700}
.tour-topic-field{display:grid;gap:7px;margin-top:17px}
.tour-topic-field label{font-size:.78rem;font-weight:700;color:var(--text-secondary)}
#tourTopic{display:block;width:100%;padding:10px 30px 10px 12px;text-overflow:ellipsis}
#tourTopic option{background:var(--bg-secondary);color:var(--text-primary)}
#tourOverlay .tour-tip{margin-top:16px;padding:11px 13px;border-inline-start:3px solid var(--accent);border-radius:0 10px 10px 0;background:var(--accent-bg);color:var(--text-primary);font-size:.82rem;line-height:1.6}
#tourOverlay .tour-preview-note{margin-top:12px;font-size:.75rem;line-height:1.6}
#tourOverlay .tour-open{display:block;width:100%;margin-top:14px;background:var(--bg-secondary);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 38%,var(--border))}
#tourOverlay .tour-open:hover{background:var(--accent-bg)}
.tour-footer{flex:none;padding:12px 20px 14px;border-top:1px solid var(--border);background:var(--bg-secondary)}
.tour-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
#tourOverlay .tour-next{margin-inline-start:auto;min-width:104px;background:var(--accent);color:var(--text-inverse);border-color:var(--accent)}
#tourOverlay .tour-next:hover{background:var(--accent);box-shadow:inset 0 0 0 2px var(--bg-secondary)}
#tourOverlay .tour-kbd{margin-top:10px;text-align:center;color:var(--text-secondary);font-size:.7rem;line-height:1.5}
/* Calm, persistent entry point rather than an endlessly pulsing invitation. */
.top-btn.guide-btn{position:relative;color:var(--accent);min-width:44px;min-height:44px}
.top-btn.guide-btn:hover{background:var(--accent-bg)}
.guide-ring{display:none}
[data-theme="dark"] #tourOverlay{--tour-dim:color-mix(in srgb,var(--bg-primary) 76%,transparent)}
@media(max-width:719px){
  .tour-card{border-radius:18px}
  .tour-top{padding:15px 15px 10px;gap:9px}
  #tourOverlay .tour-eyebrow{font-size:.69rem;margin-bottom:4px}
  #tourTitle{font-size:1.08rem}
  .tour-progress{padding:0 15px 10px;gap:6px}
  .tour-content{padding:2px 15px 14px}
  #tourOverlay p{font-size:.86rem;line-height:1.65}
  #tourOverlay .tour-tip{font-size:.8rem}
  .tour-footer{padding:10px 15px max(10px,env(safe-area-inset-bottom))}
  #tourOverlay .tour-kbd{display:none}
  .tour-botanical{width:120px;height:112px}
}
@media(max-height:480px){
  .tour-top{padding-block:8px}
  #tourOverlay .tour-eyebrow,#tourOverlay .tour-kbd{display:none}
  .tour-progress{padding-bottom:6px;gap:4px}
  .tour-footer{padding-block:8px}
}
html.reduce-motion #tourOverlay,html.reduce-motion #tourOverlay *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){
  #tourOverlay,#tourOverlay *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- MODAL / GATE VISIBILITY FIXES ---------- */
/* Modals must never stay transparent: the fadeIn animation is decorative only,
   so pin the shown state to full opacity in case the animation is interrupted. */
.modal-backdrop.show{opacity:1}
/* Never let an in-flight animation control modal visibility: drop the backdrop
   fade and animate only the inner box's transform, so opacity is always 1. */
.modal-backdrop.show{animation:none}
.modal-backdrop.show .modal-box,.modal-backdrop.show .legal-modal-box{animation:modalPopScale .26s cubic-bezier(.34,1.56,.64,1)}
@keyframes modalPopScale{from{transform:scale(.93) translateY(8px)}to{transform:scale(1) translateY(0)}}
/* Legal/contact modal must sit above the sign-in gate (z-index 10000). */
#legalModal{z-index:10003}
/* When the auth gate is dismissed, remove it from painting + hit-testing entirely
   so it can never sit invisibly on top of other UI. */
.auth-gate.hidden{visibility:hidden}

/* ---------- ENVIRONMENTAL BACKDROP ---------- */
/* The garden that drifts behind the app is built at runtime by js/nature.js. */
.auth-gate .auth-container,.auth-gate .auth-left,.auth-gate .auth-right{position:relative;z-index:2}

/* ---------- ENTRY / AUTH-GATE POLISH ---------- */
/* Make the "just let me in" path obvious: a prominent, inviting guest button. */
.auth-anonymous-btn{background:var(--accent-bg);border:1.5px solid var(--accent);color:var(--accent);font-size:0.9rem;padding:13px;position:relative;overflow:hidden}
.auth-anonymous-btn:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,106,78,.28)}
.auth-anonymous-btn i{transition:transform .3s}
.auth-anonymous-btn:hover i{transform:translateX(3px)}
.auth-anonymous{border-top:1px dashed var(--border)}
.auth-anonymous-note{font-size:0.74rem}
/* Reason banner: friendly, not alarming. */
#authReasonBanner{background:var(--accent-bg);border:1px solid var(--accent);border-left-width:4px;border-radius:var(--radius-sm);color:var(--text-primary)}
#authReasonBanner i{color:var(--accent)}
/* Gentle entrance for the gate card. */
.auth-container{animation:authSlideUp .5s cubic-bezier(.22,1,.36,1)}

/* ---------- COMMUNITY BOARD ---------- */
.comm-hero{display:flex;align-items:center;gap:16px;justify-content:space-between;background:var(--accent-bg);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:16px}
.comm-hero-text h2{font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:9px;margin-bottom:6px}
.comm-hero-text h2 i{color:var(--accent)}
.comm-hero-text p{font-size:0.83rem;line-height:1.6;color:var(--text-secondary)}
.comm-toolbar{margin-bottom:14px}
.comm-search{position:relative;margin-bottom:10px}
.comm-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:0.8rem}
.comm-search .form-input{padding-left:34px}
.comm-tabs{display:flex;gap:7px;flex-wrap:wrap}
.comm-tab{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border:1.5px solid var(--border);border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-secondary);font-size:0.74rem;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--transition-fast)}
.comm-tab:hover{border-color:var(--accent);color:var(--accent)}
.comm-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.comm-tab-count{font-size:0.74rem;opacity:.8;font-weight:700}
.comm-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:12px;transition:var(--transition);position:relative}
.comm-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent)}
.comm-card.resolved{opacity:.72;border-style:dashed}
.comm-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.comm-cat{display:inline-flex;align-items:center;gap:5px;font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--cc);background:color-mix(in srgb,var(--cc) 12%,transparent);padding:3px 9px;border-radius:var(--radius-full)}
.comm-resolved-tag{display:inline-flex;align-items:center;gap:4px;font-size:0.74rem;font-weight:700;color:var(--success)}
.comm-area{margin-left:auto;font-size:0.74rem;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px}
.comm-title{font-size:0.98rem;font-weight:700;margin-bottom:6px;line-height:1.35}
.comm-body{font-size:0.84rem;line-height:1.65;color:var(--text-secondary);margin-bottom:11px;white-space:pre-line}
.comm-meta{display:flex;gap:14px;font-size:0.74rem;color:var(--text-muted);margin-bottom:11px}
.comm-meta i{margin-right:4px}
.comm-actions{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--border-light);padding-top:11px}
.comm-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--border);border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-secondary);font-size:0.74rem;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--transition-fast)}
.comm-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.comm-btn.voted{background:var(--accent);border-color:var(--accent);color:#fff}
.comm-resolve:hover{border-color:var(--success);color:var(--success)}
.comm-replies{margin-top:12px;border-top:1px dashed var(--border);padding-top:12px}
.comm-reply{padding:8px 0;border-bottom:1px solid var(--border-light);font-size:0.8rem}
.comm-reply strong{color:var(--text-primary);margin-right:8px}
.comm-reply .comm-time{font-size:0.74rem;color:var(--text-muted)}
.comm-reply p{margin-top:4px;color:var(--text-secondary);line-height:1.55}
.comm-reply-box{display:flex;gap:8px;align-items:flex-start;margin-top:10px}
.comm-reply-box textarea{flex:1;min-height:44px;font-size:0.82rem}
.comm-cat-picker{display:flex;flex-wrap:wrap;gap:7px}
.comm-cat-opt{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-secondary);font-size:0.76rem;font-weight:600;cursor:pointer;font-family:inherit;transition:var(--transition-fast)}
.comm-cat-opt:hover{border-color:var(--accent);color:var(--accent)}
.comm-cat-opt.active{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:560px){.comm-hero{flex-direction:column;align-items:flex-start}.comm-area{margin-left:0}}

/* ============ REPORT FORMS — MODERN MEDIA + ANIMATIONS ============ */
/* Entrance: transform-only reveals so content is never invisible if animations are throttled. */
@keyframes cardIn{from{transform:translateY(14px) scale(.99)}to{transform:none}}
@keyframes selPop{0%{transform:scale(.82)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes dzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes countBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes pressIn{0%{transform:scale(1)}50%{transform:scale(.94)}100%{transform:scale(1)}}
.tab-panel.active .card{animation:cardIn .45s cubic-bezier(.22,1,.36,1) both}

/* Media group header */
.media-group{border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;background:var(--bg-primary)}
.media-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.media-pts{margin-left:6px;font-size:0.74rem;font-weight:700;color:var(--accent);background:var(--accent-bg);padding:2px 8px;border-radius:var(--radius-full);text-transform:none;letter-spacing:0;white-space:nowrap}
.media-count{font-size:0.74rem;font-weight:600;color:var(--text-muted);background:var(--bg-tertiary);border:1px solid var(--border);padding:3px 9px;border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.media-count i{color:var(--accent)}
.media-count.bump{animation:countBump .4s ease}

/* Dropzones (photo + video) */
.media-dropzones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dropzone{--dzc:var(--accent);position:relative;border:2px dashed var(--border);border-radius:var(--radius-md);padding:18px 10px;text-align:center;cursor:pointer;transition:var(--transition);background:var(--bg-secondary);overflow:hidden}
.dropzone:focus-visible{outline:none;border-color:var(--dzc);box-shadow:0 0 0 3px color-mix(in srgb,var(--dzc) 20%,transparent)}
.dz-video{--dzc:#8b5cf6}
.dz-icon{width:44px;height:44px;margin:0 auto 8px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:var(--dzc);background:color-mix(in srgb,var(--dzc) 12%,transparent);transition:var(--transition);animation:dzFloat 3.2s ease-in-out infinite}
.dz-text{font-size:0.82rem;font-weight:700;color:var(--text-primary)}
.dz-sub{font-size:0.74rem;color:var(--text-muted);margin-top:3px;line-height:1.35}
.dropzone:hover{border-color:var(--dzc);background:color-mix(in srgb,var(--dzc) 6%,transparent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.dropzone:hover .dz-icon{transform:scale(1.08) rotate(-4deg)}
.dropzone.dragover{border-color:var(--dzc);border-style:solid;background:color-mix(in srgb,var(--dzc) 14%,transparent);transform:scale(1.02)}
.dropzone.dragover .dz-icon{animation:none;transform:scale(1.16)}
.dropzone:active{animation:pressIn .25s ease}

/* Previews */
.preview-container{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.preview-container:empty{display:none;margin-top:0}
.preview-thumb{position:relative;width:84px;height:84px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-tertiary);animation:selPop .34s cubic-bezier(.34,1.56,.64,1) both}
.preview-thumb img,.preview-thumb video{width:100%;height:100%;object-fit:cover;display:block;border:2px solid var(--border)}
.preview-video video{border-color:#8b5cf6}
.thumb-tag{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,0.6);color:#fff;font-size:0.74rem;padding:2px 6px;border-radius:var(--radius-full);backdrop-filter:blur(4px)}
.thumb-tag.video-tag{background:#8b5cf6}
.video-play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.74rem;pointer-events:none;border:2px solid rgba(255,255,255,0.85)}
.preview-thumb .remove-photo{position:absolute;top:-4px;right:-4px;width:23px;height:23px;background:var(--danger);color:#fff;border:2px solid var(--bg-secondary);border-radius:50%;cursor:pointer;font-size:0.74rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:var(--transition-fast);z-index:2}
.preview-thumb .remove-photo:hover{transform:scale(1.15) rotate(90deg)}

/* Character counter */
.char-counter{font-size:0.74rem;color:var(--text-muted);margin-top:6px;display:flex;align-items:center;gap:6px;transition:var(--transition-fast)}
.char-counter .cc-len{font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.char-counter .cc-len.cc-max{color:var(--warning)}
.char-counter .cc-hint{color:var(--text-muted)}
.char-counter.cc-bonus{color:var(--success)}
.char-counter .cc-ok{font-weight:700;color:var(--success);display:inline-flex;align-items:center;gap:5px}
.char-counter.cc-bonus .cc-ok{animation:selPop .4s cubic-bezier(.34,1.56,.64,1) both}

/* Video gallery in detail modal */
.video-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:10px}
.video-gallery video{width:100%;max-height:240px;border-radius:var(--radius-sm);border:1px solid var(--border);background:#000;display:block}

/* Selection card micro-interactions */
.selection-card{transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s,background .18s,color .18s,box-shadow .18s}
.selection-card:active{transform:scale(.94)}
.selection-card.selected{box-shadow:0 0 0 3px var(--accent-bg);animation:selPop .3s cubic-bezier(.34,1.56,.64,1)}
.selection-card.selected::after{content:'✓';position:absolute;top:-7px;right:-7px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:0.74rem;font-weight:800;color:#fff;background:var(--accent);border-radius:50%;box-shadow:var(--shadow-sm)}
.selection-card .sel-icon{transition:transform .25s cubic-bezier(.34,1.56,.64,1);display:inline-block}
.selection-card:hover .sel-icon{transform:scale(1.18) rotate(-6deg)}
.selection-card.selected .sel-icon{transform:scale(1.12)}

/* Submit button press feedback */
.btn-full:active{transform:scale(.985)}

@media(max-width:560px){
  .media-dropzones{grid-template-columns:1fr}
  .dropzone{padding:14px 10px}
  .dz-icon{width:38px;height:38px;font-size:1rem;margin-bottom:6px}
}

/* ============ DASHBOARD v2 ============ */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kpi-card{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);animation:cardIn .45s cubic-bezier(.22,1,.36,1) both;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.kpi-icon{width:38px;height:38px;flex:none;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1rem}
.kpi-body{min-width:0}
.kpi-value{font-size:1.35rem;font-weight:800;line-height:1.1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpi-label{font-size:0.74rem;color:var(--text-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-total .kpi-icon{background:var(--info-light);color:var(--info)} .kpi-total .kpi-value{color:var(--info)}
.kpi-resolved .kpi-icon{background:var(--success-light);color:var(--success)} .kpi-resolved .kpi-value{color:var(--success)}
.kpi-progress .kpi-icon{background:var(--warning-light);color:#b8860b} .kpi-progress .kpi-value{color:#b8860b}
.kpi-new .kpi-icon{background:var(--danger-light);color:var(--danger)} .kpi-new .kpi-value{color:var(--danger)}
.kpi-rate .kpi-icon{background:var(--accent-bg);color:var(--accent)} .kpi-rate .kpi-value{color:var(--accent)}
.kpi-areas .kpi-icon{background:var(--purple-light);color:var(--purple)} .kpi-areas .kpi-value{color:var(--purple)}

.dash-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.chart-box{position:relative;height:190px;margin:6px 0 12px}
.chart-box.chart-wide{height:170px}
.chart-box canvas{max-width:100%}
.chart-empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:.82rem;color:var(--text-muted);font-weight:600}

.legend-row{display:flex;align-items:center;gap:8px;font-size:.78rem;padding:5px 0}
.legend-dot{width:11px;height:11px;border-radius:50%;flex:none}
.legend-name{flex:1;color:var(--text-secondary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend-val{font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}
.status-legend{margin-top:4px}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dash-table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:420px}
.dash-table thead th{text-align:left;font-size:0.74rem;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-weight:700;padding:8px 8px;border-bottom:2px solid var(--border)}
.dash-table tbody td{padding:9px 8px;border-bottom:1px solid var(--border-light);vertical-align:middle}
.dash-table tbody tr:last-child td{border-bottom:none}
.dash-table tbody tr{transition:background var(--transition-fast)}
.dash-table tbody tr:hover{background:var(--bg-primary)}
.tbl-medal{width:34px;font-size:1rem;text-align:center}
.tbl-rank{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--bg-tertiary);color:var(--text-secondary);font-size:0.74rem;font-weight:700}
.tbl-area{font-weight:700;color:var(--text-primary);white-space:nowrap}
.tbl-num{text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.tbl-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--radius-full);font-size:0.74rem;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--pc) 15%,transparent);color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 35%,transparent)}
.tbl-bar-cell{min-width:90px}
.tbl-bar{height:7px;border-radius:var(--radius-full);background:var(--bg-tertiary);overflow:hidden}
.tbl-bar span{display:block;height:100%;border-radius:var(--radius-full);transition:width .5s ease}
.tbl-rate{font-size:0.74rem;font-weight:700;color:var(--text-muted);margin-left:6px}

.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.impact-tile{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 10px;text-align:center;animation:cardIn .45s cubic-bezier(.22,1,.36,1) both;transition:transform var(--transition-fast),border-color var(--transition-fast)}
.impact-tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.impact-num{font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.impact-cap{font-size:0.74rem;color:var(--text-muted);font-weight:600;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:5px}

@media(max-width:900px){
  .dash-grid-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-value{font-size:1.2rem}
}

/* ============ MAP VIEW v2 ============ */
.map-search-card{position:relative}
.map-search-card .search-wrap{margin-bottom:0}
.map-search-card .search-wrap input{padding-right:38px}
.search-clear{position:absolute;right:8px;top:6px;width:26px;height:26px;border:none;background:var(--bg-tertiary);color:var(--text-muted);border-radius:50%;cursor:pointer;display:none;align-items:center;justify-content:center;transition:var(--transition-fast);z-index:2}
.search-clear:hover{background:var(--danger-light);color:var(--danger)}
.map-search-card .search-wrap .search-clear i{position:static;transform:none;color:inherit;font-size:.78rem}
.search-hint{font-size:0.74rem;color:var(--text-muted);margin-top:8px;display:flex;align-items:center;gap:6px}
.search-suggest{position:relative;z-index:20;margin-top:6px;display:none;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto}
.search-suggest.open{display:flex}
.suggest-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:transparent;cursor:pointer;text-align:left;border-bottom:1px solid var(--border-light);transition:background var(--transition-fast)}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover{background:var(--accent-bg)}
.si-icon{width:30px;height:30px;flex:none;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:.95rem;background:color-mix(in srgb,var(--sc) 16%,transparent)}
.si-name{flex:1;font-size:.82rem;font-weight:600;color:var(--text-primary)}
.si-name b{color:var(--accent);font-weight:800}
.si-cat{font-size:0.74rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}

.explore-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.explore-cat{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1.5px solid var(--border);background:var(--bg-primary);border-radius:var(--radius-full);font-size:.74rem;font-weight:700;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}
.explore-cat span{font-size:0.74rem;background:var(--bg-tertiary);padding:1px 6px;border-radius:var(--radius-full);color:var(--text-muted)}
.explore-cat:hover{border-color:var(--accent);color:var(--accent)}
.explore-cat.active{background:var(--accent);border-color:var(--accent);color:#fff}
.explore-cat.active span{background:rgba(255,255,255,.25);color:#fff}
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:340px;overflow-y:auto;padding-right:2px}
.place-chip{position:relative;display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid var(--border);background:var(--bg-primary);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast);animation:cardIn .4s cubic-bezier(.22,1,.36,1) both}
.place-chip:hover{transform:translateY(-2px);border-color:var(--pc);background:color-mix(in srgb,var(--pc) 8%,transparent)}
.place-chip:active{transform:scale(.97)}
.pc-icon{font-size:.95rem;flex:none}
.pc-name{font-size:.76rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--radius-full);background:var(--danger);color:#fff;font-size:0.74rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}

.layer-toggles{display:flex;flex-direction:column;gap:8px}
.layer-toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--border);background:var(--bg-primary);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);opacity:.55}
.layer-toggle.active{opacity:1;border-color:var(--accent);background:var(--accent-bg)}
.layer-toggle:hover{transform:translateX(2px)}
.lt-dot{width:30px;height:30px;flex:none;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:.95rem;background:color-mix(in srgb,var(--lc) 16%,transparent);border:1.5px solid var(--lc)}
.lt-name{flex:1;font-size:.83rem;font-weight:700;color:var(--text-primary)}
.lt-count{font-size:0.74rem;font-weight:800;color:var(--text-secondary);background:var(--bg-tertiary);padding:2px 9px;border-radius:var(--radius-full);font-variant-numeric:tabular-nums}

.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.quick-action{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 8px;border:1px solid var(--border);background:var(--bg-primary);border-radius:var(--radius-md);cursor:pointer;font-size:0.74rem;font-weight:700;color:var(--text-secondary);transition:var(--transition-fast)}
.quick-action i{font-size:1.1rem;color:var(--accent)}
.quick-action:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}
.quick-action:active{transform:scale(.96)}
.map-tip-list{display:flex;flex-direction:column;gap:7px}
.map-tip{display:flex;align-items:flex-start;gap:8px;font-size:.74rem;color:var(--text-muted);line-height:1.4}
.map-tip i{color:var(--accent);margin-top:2px}
.map-tip b{color:var(--text-secondary)}

/* ============ HAZARD PICKER POPUP ============ */
.leaflet-popup-content-wrapper{overflow:hidden}
.hazard-picker{min-width:230px;padding:2px}
.hp-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hp-pin{width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:var(--purple-light);animation:selPop .45s cubic-bezier(.34,1.56,.64,1) both}
.hp-head-txt{min-width:0}
.hp-title{font-size:.92rem;font-weight:800;color:var(--text-primary);letter-spacing:-.2px}
.hp-area{font-size:0.74rem;color:var(--text-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-coords{font-size:0.74rem;color:var(--text-muted);font-family:monospace;background:var(--bg-primary);padding:5px 8px;border-radius:var(--radius-sm);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.hp-options{display:flex;flex-direction:column;gap:7px}
.hp-opt{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:1.5px solid var(--border);border-left:4px solid var(--oc);background:var(--bg-primary);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:transform var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)}
.hp-opt:hover{transform:translateX(3px);background:color-mix(in srgb,var(--oc) 10%,transparent);box-shadow:var(--shadow-sm)}
.hp-opt:active{transform:scale(.97)}
.hp-ico{width:32px;height:32px;flex:none;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.05rem;background:color-mix(in srgb,var(--oc) 16%,transparent)}
.hp-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.hp-txt b{font-size:.82rem;color:var(--text-primary);font-weight:700}
.hp-txt small{font-size:0.74rem;color:var(--text-muted)}
.hp-arrow{color:var(--oc);font-size:.8rem}
.hp-foot{font-size:0.74rem;color:var(--text-muted);margin-top:9px;display:flex;align-items:center;gap:5px;line-height:1.35}
.pin-popup h4{color:var(--accent)}

/* ============ ROUTES v2 ============ */
.route-hero{display:flex;align-items:center;gap:14px;padding:16px;margin-bottom:14px;border-radius:var(--radius-lg);background:var(--gradient-accent);color:#fff;box-shadow:var(--shadow-md);animation:cardIn .5s cubic-bezier(.22,1,.36,1) both}
.route-hero-icon{width:46px;height:46px;flex:none;border-radius:var(--radius-md);background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.route-hero-txt h3{font-size:1.05rem;font-weight:800;margin-bottom:3px}
.route-hero-txt p{font-size:.76rem;opacity:.92;line-height:1.4}

.route-endpoint{display:flex;align-items:flex-end;gap:10px}
.re-dot{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#fff;margin-bottom:4px}
.re-from{background:#34a853}
.re-to{background:#ea4335}
.re-field{flex:1;min-width:0}
.re-field .form-label{margin-bottom:4px}
.re-locate{width:34px;height:34px;flex:none;margin-bottom:4px;border:1.5px solid var(--accent);background:var(--accent-bg);color:var(--accent);border-radius:var(--radius-md);cursor:pointer;font-size:.9rem;transition:var(--transition-fast)}
.re-locate:hover{background:var(--accent);color:#fff}
.re-locate.locating{animation:pulseRing 1s ease infinite}
.re-locate.locating i{animation:spin 1s linear infinite}
.route-swap{display:flex;justify-content:center;margin:2px 0}
.route-swap button{width:32px;height:32px;border:1.5px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);border-radius:50%;cursor:pointer;transition:var(--transition-fast)}
.route-swap button:hover{border-color:var(--accent);color:var(--accent);transform:rotate(180deg)}
.route-quick-label{font-size:0.74rem;font-weight:700;color:var(--text-muted);margin:14px 0 7px;display:flex;align-items:center;gap:6px}
.route-quick{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.route-quick-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1.5px solid var(--border);background:var(--bg-primary);border-radius:var(--radius-full);font-size:0.74rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}
.route-quick-chip i{font-size:0.74rem;color:var(--accent)}
.route-quick-chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.route-quick-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.route-quick-chip.active i{color:#fff}
.route-go{margin-top:2px}
.route-live{display:none;align-items:center;gap:8px;margin-top:11px;padding:9px 12px;border-radius:var(--radius-sm);background:var(--bg-primary);font-size:.76rem;color:var(--text-secondary);font-weight:600}
.route-live.show{display:flex}
.route-live i{color:var(--accent)}

.route-loading{text-align:center;padding:28px 16px}
.rl-spin{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.5rem;animation:pulseRing 1.4s ease infinite}
.route-loading p{font-size:.84rem;color:var(--text-secondary);font-weight:600;margin-bottom:14px}
.rl-bar{height:5px;border-radius:var(--radius-full);background:var(--bg-tertiary);overflow:hidden;width:180px;margin:0 auto}
.rl-bar span{display:block;height:100%;width:40%;border-radius:var(--radius-full);background:var(--gradient-accent);animation:loadSlide 1.2s ease-in-out infinite}

.route-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;animation:cardIn .4s cubic-bezier(.22,1,.36,1) both}
.rs-item{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:11px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.rs-num{font-size:1.3rem;font-weight:800;color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.rs-num.ok{color:var(--success)} .rs-num.warn{color:var(--warning)}
.rs-lab{font-size:0.74rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}

.route-card{background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:11px;cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);animation:cardIn .45s cubic-bezier(.22,1,.36,1) both}
.route-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.route-card.selected{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 3px var(--accent-bg)}
.rc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.rc-title{font-size:.95rem;font-weight:800;color:var(--text-primary)}
.rc-title i{color:var(--accent)}
.rc-tags{display:flex;gap:4px;flex-wrap:wrap}
.rt-badge{font-size:0.74rem;font-weight:800;padding:3px 8px;border-radius:var(--radius-full);white-space:nowrap}
.rt-rec{background:var(--success-light);color:var(--success)}
.rt-safe{background:var(--info-light);color:var(--info)}
.rt-fast{background:var(--warning-light);color:#b8860b}
.rt-detour{background:var(--purple-light);color:var(--purple)}
.rc-stats{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;align-items:center;margin-bottom:11px}
.rc-stat{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;background:var(--bg-primary);border-radius:var(--radius-md)}
.rc-stat i{font-size:0.74rem;color:var(--text-muted)}
.rc-stat b{font-size:1.05rem;font-weight:800;color:var(--text-primary);line-height:1.1;font-variant-numeric:tabular-nums}
.rc-stat span{font-size:0.74rem;color:var(--text-muted);font-weight:600}
.risk-pill{font-size:0.74rem;font-weight:800;padding:5px 10px;border-radius:var(--radius-full);white-space:nowrap}
.risk-none{background:var(--success-light);color:var(--success)}
.risk-low{background:var(--info-light);color:var(--info)}
.risk-med{background:var(--warning-light);color:#b8860b}
.risk-high{background:var(--danger-light);color:var(--danger)}
.rc-why{display:flex;gap:8px;font-size:.76rem;line-height:1.5;color:var(--text-secondary);background:var(--bg-primary);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:9px 11px;margin-bottom:10px}
.rc-why i{color:var(--warning);margin-top:2px}
.rt-sub{font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.rt-safe-note{font-size:.76rem;color:var(--success);font-weight:600;display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--success-light);border-radius:var(--radius-sm)}
.rt-haz-item{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--text-secondary);padding:5px 0;border-bottom:1px solid var(--border-light)}
.rt-haz-item:last-child{border-bottom:none}
.rh-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--danger)}
.rh-name{flex:1;font-weight:600}
.rh-depth{font-size:0.74rem;color:var(--danger);text-transform:capitalize;background:var(--danger-light);padding:2px 7px;border-radius:var(--radius-full)}
.rc-roads{margin-top:10px}
.rc-roads summary{list-style:none;cursor:pointer;font-size:.74rem;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:7px;padding:7px 0}
.rc-roads summary::-webkit-details-marker{display:none}
.rc-roads summary .rc-roads-n{margin-left:auto;font-size:0.74rem;color:var(--text-muted);font-weight:600}
.rt-roads{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.rt-road{display:flex;align-items:center;gap:8px;font-size:.74rem;padding:7px 9px;background:var(--bg-primary);border-radius:var(--radius-sm)}
.rt-road.flooded{background:var(--danger-light)}
.rr-name{flex:1;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-km{font-size:0.74rem;color:var(--text-muted);font-weight:700;font-variant-numeric:tabular-nums}
.rr-warn{font-size:0.74rem;font-weight:800;color:var(--danger);display:flex;align-items:center;gap:3px}
.rr-ok{font-size:0.74rem;color:var(--success)}
.route-foot-note{font-size:0.74rem;color:var(--text-muted);line-height:1.4;margin:4px 0 12px;display:flex;align-items:flex-start;gap:6px}
.route-foot-note i{margin-top:2px}

/* Leaflet animated route flow */
.route-flow{animation:routeFlow 1s linear infinite}
@keyframes routeFlow{to{stroke-dashoffset:-19}}
@keyframes loadSlide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 var(--accent-bg)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:560px){
  .explore-grid{grid-template-columns:1fr}
  .rc-stats{grid-template-columns:repeat(3,1fr);}
  .rc-stat:last-child{grid-column:1/-1}
  .quick-actions{grid-template-columns:1fr 1fr}
}

/* ============ MEDIA LIGHTBOX ============ */
.lbx{position:fixed;inset:0;z-index:200000;display:none;align-items:center;justify-content:center}
.lbx.open{display:flex}
.lbx-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.92);backdrop-filter:blur(6px)}
.lbx-stage{position:relative;z-index:2;max-width:92vw;max-height:82vh;display:flex;flex-direction:column;align-items:center;gap:10px;animation:lbxIn .22s ease}
@keyframes lbxIn{from{transform:scale(.94)}to{transform:scale(1)}}
.lbx-media{display:flex;align-items:center;justify-content:center;max-width:92vw;max-height:74vh}
.lbx-media img,.lbx-media video{max-width:92vw;max-height:74vh;border-radius:var(--radius-md);box-shadow:0 18px 60px rgba(0,0,0,.6);background:#000;object-fit:contain}
.lbx-caption{color:#e8eaed;font-size:.82rem;text-align:center;max-width:80vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbx-close{position:absolute;top:16px;right:16px;z-index:3;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.1rem;cursor:pointer;transition:var(--transition-fast)}
.lbx-close:hover{background:rgba(255,255,255,.28);transform:rotate(90deg)}
.lbx-counter{position:absolute;top:24px;left:20px;z-index:3;color:#e8eaed;font-size:.8rem;font-weight:700;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:var(--radius-full)}
.lbx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:1.1rem;cursor:pointer;transition:var(--transition-fast)}
.lbx-nav:hover{background:rgba(255,255,255,.3)}
.lbx-prev{left:14px}
.lbx-next{right:14px}
.detail-hint{font-size:0.74rem;font-weight:500;color:var(--text-muted);margin-left:6px}
.video-thumb{position:relative;cursor:pointer;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border);background:#000;transition:var(--transition-fast)}
.video-thumb:hover{transform:scale(1.02)}
.video-thumb video{width:100%;max-height:240px;display:block;pointer-events:none}
.video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;background:rgba(0,0,0,.28);transition:var(--transition-fast)}
.video-thumb:hover .video-play{background:rgba(0,0,0,.45)}
.video-play i{width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.7)}

/* ============ MY REPORTS v2 ============ */
.mr-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:16px}
.mr-stat{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 6px;text-align:center}
.mr-stat-v{font-size:1.25rem;font-weight:800;color:var(--text-primary);line-height:1}
.mr-stat-l{font-size:0.74rem;color:var(--text-muted);margin-top:5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.mr-card{display:flex;gap:12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;margin-bottom:12px;cursor:pointer;transition:var(--transition-fast)}
.mr-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.mr-thumb{position:relative;width:74px;height:74px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center}
.mr-thumb img{width:100%;height:100%;object-fit:cover}
.mr-thumb-emoji{font-size:2rem}
.mr-thumb-badge{position:absolute;bottom:3px;right:3px;background:rgba(0,0,0,.72);color:#fff;font-size:0.74rem;font-weight:700;padding:2px 5px;border-radius:var(--radius-full)}
.mr-body{flex:1;min-width:0}
.mr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.mr-heading{min-width:0}
.mr-title{font-size:.92rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-sub{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap}
.mr-type{font-size:0.74rem;font-weight:600;color:var(--text-secondary)}
.mr-id{font-size:0.74rem;font-family:monospace;color:var(--text-muted)}
.mr-progress{height:4px;background:var(--bg-tertiary);border-radius:var(--radius-full);margin:9px 0;overflow:hidden}
.mr-progress-fill{height:100%;border-radius:var(--radius-full);transition:width .4s ease}
.mr-engagement{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.mr-chip{display:inline-flex;align-items:center;gap:4px;font-size:0.74rem;font-weight:600;color:var(--text-secondary);background:var(--bg-primary);border:1px solid var(--border);padding:3px 7px;border-radius:var(--radius-full)}
.mr-chip i{font-size:0.74rem;color:var(--text-muted)}
.mr-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.mr-btn{display:inline-flex;align-items:center;gap:5px;font-size:0.74rem;font-weight:600;padding:6px 11px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}
.mr-btn:hover{border-color:var(--accent);color:var(--accent)}
.mr-btn-success:hover{border-color:var(--success);color:var(--success)}
.mr-btn-danger{margin-left:auto;padding:6px 9px}
.mr-btn-danger:hover{border-color:var(--danger);color:var(--danger)}
.mr-resolved-tag{display:inline-flex;align-items:center;gap:5px;font-size:0.74rem;font-weight:700;color:var(--success)}
@media(max-width:560px){.mr-summary{grid-template-columns:repeat(3,1fr)}}

/* ============ LEADERBOARD v2 ============ */
.lbd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.lbd-stat{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 8px;text-align:center}
.lbd-stat-v{font-size:1.4rem;font-weight:800;color:var(--text-primary);line-height:1}
.lbd-stat-l{font-size:0.74rem;color:var(--text-muted);margin-top:6px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.lbd-crown{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(251,188,4,.16),rgba(251,188,4,.05));border:1px solid rgba(184,134,11,.35);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:16px}
.lbd-crown-icon{font-size:1.8rem}
.lbd-crown-label{font-size:0.74rem;text-transform:uppercase;letter-spacing:.5px;color:#b8860b;font-weight:700}
.lbd-crown-name{font-size:.95rem;font-weight:800;color:var(--text-primary);margin-top:2px}
.lbd-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;background:var(--bg-primary);transition:var(--transition-fast)}
.lbd-item:hover{border-color:var(--accent);transform:translateX(2px)}
.lbd-item-you{border-color:var(--accent);background:var(--accent-bg)}
.lbd-rank{width:26px;text-align:center;font-size:.9rem;font-weight:800;color:var(--text-muted);flex-shrink:0}
.lbd-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;flex-shrink:0}
.lbd-info{flex:1;min-width:0}
.lbd-name{font-size:.88rem;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:6px}
.lbd-you-tag{font-size:0.74rem;font-weight:700;background:var(--accent);color:#fff;padding:1px 6px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.4px}
.lbd-detail{font-size:0.74rem;color:var(--text-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbd-tier{font-weight:700}
.lbd-score{font-size:.9rem;font-weight:800;color:var(--warning);flex-shrink:0;display:flex;align-items:center;gap:4px}
.card-title-tag{margin-left:auto;font-size:0.74rem;font-weight:700;color:var(--text-muted);background:var(--bg-tertiary);padding:3px 9px;border-radius:var(--radius-full)}
@media(max-width:560px){.lbd-stats{grid-template-columns:repeat(2,1fr)}}

/* ============ PROFILE v2 ============ */
.profile-rank-banner{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--gradient-accent);border-radius:var(--radius-md);padding:16px 12px;margin-bottom:16px;box-shadow:var(--shadow-md)}
.prb-left,.prb-mid,.prb-right{text-align:center;color:#fff}
.prb-mid{border-left:1px solid rgba(255,255,255,.25);border-right:1px solid rgba(255,255,255,.25)}
.prb-rank{font-size:1.5rem;font-weight:800;line-height:1}
.prb-pct{font-size:1.2rem;font-weight:800;line-height:1.2}
.prb-pts{font-size:1.5rem;font-weight:800;line-height:1}
.prb-label{font-size:0.74rem;opacity:.85;margin-top:5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.profile-ach-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pach{background:var(--bg-primary);border:1px solid var(--border);border-left:3px solid var(--rc,#9aa0a6);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;transition:var(--transition-fast)}
.pach:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.pach-icon{font-size:1.5rem}
.pach-name{font-size:0.74rem;font-weight:700;color:var(--text-primary);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pach-pts{font-size:0.74rem;font-weight:700;color:var(--warning);margin-top:2px}
@media(max-width:560px){.profile-ach-preview{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .profile-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .profile-stat{padding:12px 6px}
  .profile-stat-value{font-size:1.4rem}
  .profile-stat-label{font-size:0.74rem;letter-spacing:.2px}
}

/* ============ ACHIEVEMENT CELEBRATION ============ */
.celeb-overlay{position:fixed;inset:0;z-index:190000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease}
.celeb-overlay.show{opacity:1}
.celeb-rays{position:absolute;width:140vmax;height:140vmax;background:conic-gradient(from 0deg,rgba(255,255,255,.10) 0deg 10deg,transparent 10deg 20deg);animation:celebSpin 14s linear infinite;pointer-events:none}
@keyframes celebSpin{to{transform:rotate(360deg)}}
.celeb-card{position:relative;z-index:2;width:min(88vw,360px);background:var(--bg-secondary);border:2px solid var(--rc,#f9a825);border-radius:20px;padding:30px 24px 24px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.5);transform:scale(.7);transition:transform .42s cubic-bezier(.2,1.4,.4,1)}
.celeb-overlay.show .celeb-card{transform:scale(1)}
.celeb-icon{font-size:4rem;line-height:1;animation:celebPop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes celebPop{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.celeb-kicker{font-size:0.74rem;text-transform:uppercase;letter-spacing:2px;color:var(--rc,#f9a825);font-weight:800;margin-top:12px}
.celeb-name{font-size:1.5rem;font-weight:800;color:var(--text-primary);margin:6px 0 4px;letter-spacing:-.4px}
.celeb-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.5}
.celeb-foot{display:flex;justify-content:center;gap:10px;margin-top:16px}
.celeb-rarity{font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#fff;background:var(--rc,#f9a825);padding:4px 12px;border-radius:var(--radius-full)}
.celeb-points{font-size:.8rem;font-weight:800;color:var(--warning);background:var(--warning-light);padding:4px 12px;border-radius:var(--radius-full)}
.celeb-close{margin-top:18px;width:100%;padding:11px;border:none;border-radius:var(--radius-full);background:var(--gradient-accent);color:#fff;font-weight:800;font-size:.9rem;cursor:pointer;font-family:inherit;transition:transform .15s}
.celeb-close:hover{transform:translateY(-2px)}
.celeb-burst{position:absolute;left:50%;top:60px;width:0;height:0;pointer-events:none}
.celeb-spark{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--rc,#f9a825);opacity:0}
.celeb-overlay.show .celeb-spark{animation:celebSpark .9s ease-out forwards;animation-delay:.1s}
@keyframes celebSpark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(calc(cos(var(--i)*25.7deg)*130px),calc(sin(var(--i)*25.7deg)*130px)) scale(.2)}}

/* ============ STREAK CALENDAR + SUBSTATS ============ */
.streak-substats{display:flex;gap:10px;margin-top:14px}
.streak-sub{flex:1;background:rgba(255,255,255,.18);border-radius:var(--radius-sm);padding:9px 6px;text-align:center}
.streak-sub-v{display:block;font-size:1.15rem;font-weight:800;line-height:1}
.streak-sub-l{display:block;font-size:0.74rem;opacity:.9;margin-top:3px;text-transform:uppercase;letter-spacing:.4px}
.streak-cal{color:var(--text-primary)}
.cal-head{font-size:.82rem;font-weight:800;text-align:center;margin-bottom:10px;color:var(--text-primary)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{font-size:0.74rem;font-weight:700;color:var(--text-muted);text-align:center;text-transform:uppercase}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:0.74rem;font-weight:600;border-radius:var(--radius-sm);background:var(--bg-primary);border:1px solid var(--border);color:var(--text-muted)}
.cal-cell.empty{background:transparent;border:none}
.cal-cell.active{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;border-color:transparent;font-weight:800;box-shadow:0 2px 6px rgba(245,124,0,.35)}
.cal-cell.today{outline:2px solid var(--accent);outline-offset:1px}

/* ============ SHARED MEDIA STRIP ============ */
.media-strip{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.ms-thumb{position:relative;width:82px;height:82px;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:1px solid var(--border);background:#000;transition:transform .18s}
.ms-thumb:hover{transform:scale(1.05)}
.ms-thumb img,.ms-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ms-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.32);font-size:1.1rem}

/* ============ EVENTS v2 ============ */
.events-hero-wrap{display:flex;gap:12px;align-items:stretch;margin-bottom:14px}
.events-hero-wrap .events-hero{flex:1;margin-bottom:0}
.ev-host-btn{align-self:flex-start;white-space:nowrap;flex-shrink:0}
.ev-remind-head{font-size:.78rem;font-weight:800;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ev-remind{display:flex;align-items:center;gap:11px;background:var(--accent-bg);border:1px solid var(--accent);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:8px}
.ev-remind-emoji{font-size:1.4rem}
.ev-remind-body{flex:1;min-width:0}
.ev-remind-title{font-size:.84rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-remind-sub{font-size:0.74rem;color:var(--text-secondary);margin-top:2px}
.ev-remind-map{width:34px;height:34px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;flex-shrink:0;transition:transform .15s}
.ev-remind-map:hover{transform:scale(1.1)}
.ev-loc{cursor:pointer;text-decoration:underline dotted}
.ev-loc:hover{color:var(--accent)}
.event-host{display:inline-block;font-size:0.74rem;color:var(--text-muted);margin:4px 0}
.event-media{margin:8px 0 10px}
.event-media-label{font-size:.78rem;font-weight:700;color:var(--text-secondary);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.event-pop-media{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.event-pop-thumb{position:relative;width:52px;height:52px;padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;background:#111}
.event-pop-thumb img,.event-pop-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.event-mine-tag{font-size:0.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;background:var(--purple);color:#fff;padding:2px 7px;border-radius:var(--radius-full);margin-left:6px;vertical-align:middle}
.event-card.mine{border-color:var(--purple)}
.ev-min-note{font-size:0.74rem;font-weight:600;color:var(--text-muted);text-transform:none;letter-spacing:0}
.ev-counter{font-size:0.74rem;margin-top:6px;color:var(--text-muted)}
.ev-coord-note{font-size:0.74rem;color:var(--text-secondary);margin-top:8px;line-height:1.5}
.event-pin{width:40px;height:40px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.4);border:2px solid #fff}
.event-pin>*{transform:rotate(45deg)}
.event-pin{font-size:1.1rem}
.event-popup{font-size:.8rem;line-height:1.5;min-width:170px}
.event-pop-title{font-weight:800;font-size:.86rem;margin-bottom:4px}
.event-pop-line{color:#444;font-size:.74rem}
.event-pop-going{margin-top:6px;font-size:0.74rem;font-weight:700;color:var(--success)}

/* ============ COMMUNITY v2 (Facebook-style) ============ */
.comm-author-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.comm-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.1rem;background:hsl(var(--h,200),55%,48%)}
.comm-author-meta{flex:1;min-width:0}
.comm-author-name{font-size:.9rem;font-weight:800;color:var(--text-primary)}
.comm-author-sub{font-size:0.74rem;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.comm-cat-dot{color:var(--cc);font-weight:700}
.comm-cat-dot i{margin-right:3px}
.comm-extra{background:var(--bg-primary);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:9px 11px;margin:9px 0}
.comm-extra-row{display:flex;gap:8px;font-size:.78rem;padding:2px 0}
.comm-extra-k{color:var(--text-muted);font-weight:700;min-width:96px;flex-shrink:0}
.comm-extra-v{color:var(--text-secondary);flex:1}
.comm-btn.comm-like.voted{background:var(--info);border-color:var(--info);color:#fff}
.comm-btn.comm-helpful:hover{border-color:var(--danger);color:var(--danger)}
.comm-btn.pop{animation:commPop .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes commPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.comm-reply{display:flex;gap:9px;padding:9px 0;border-bottom:1px solid var(--border-light);font-size:.8rem}
.comm-reply-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.8rem;background:hsl(var(--h,200),55%,48%)}
.comm-reply-main{flex:1;min-width:0}
.comm-reply-main strong{color:var(--text-primary);margin-right:8px}
@media(max-width:560px){
  .events-hero-wrap{flex-direction:column}
  .ev-host-btn{width:100%}
  .comm-extra-row{flex-direction:column;gap:2px}
  .comm-extra-k{min-width:0}
}

/* ============ DARK MODE VISIBILITY PASS ============ */
/* Amber-on-light-yellow text disappears on dark backgrounds; use a bright gold instead. */
[data-theme="dark"]{--text-muted:#98a2ad;--text-secondary:#b6c0cb}
[data-theme="dark"] .status-progress,
[data-theme="dark"] .priority-medium,
[data-theme="dark"] .info-banner.warning i,
[data-theme="dark"] .event-status.full,
[data-theme="dark"] .rt-fast,
[data-theme="dark"] .risk-med,
[data-theme="dark"] .lbd-crown-label{color:#ffd54f}
[data-theme="dark"] .kpi-progress .kpi-icon,
[data-theme="dark"] .kpi-progress .kpi-value{color:#ffd54f}
[data-theme="dark"] .status-progress,
[data-theme="dark"] .priority-medium,
[data-theme="dark"] .event-status.full,
[data-theme="dark"] .rt-fast,
[data-theme="dark"] .risk-med{background:rgba(255,213,79,.12)}
[data-theme="dark"] .rank-2{background:linear-gradient(135deg,#8d99a6,#5b6673);color:#fff}
[data-theme="dark"] .event-pop-line{color:var(--text-secondary)}

/* Leaflet chrome: zoom buttons, attribution, scale bar, popups, cluster counts */
[data-theme="dark"] .leaflet-bar a{background:#1b222c!important;color:#e8eaed!important;border-color:#2c3542!important}
[data-theme="dark"] .leaflet-bar a:hover{background:#263040!important}
[data-theme="dark"] .leaflet-control-attribution{background:rgba(12,16,22,.78)!important;color:#9aa4b0!important}
[data-theme="dark"] .leaflet-control-attribution a{color:#7fd4b0!important}
[data-theme="dark"] .leaflet-control-scale-line{background:rgba(12,16,22,.6)!important;color:#d5dbe3!important;border-color:#3a4655!important}
[data-theme="dark"] .leaflet-popup-content-wrapper{box-shadow:0 8px 28px rgba(0,0,0,.6)!important}
[data-theme="dark"] .leaflet-popup-content{color:var(--text-primary)}
[data-theme="dark"] .leaflet-popup-content b,
[data-theme="dark"] .leaflet-popup-content strong{color:#fff}
[data-theme="dark"] a.leaflet-popup-close-button{color:#aab4c0!important}
[data-theme="dark"] .marker-cluster div{background:rgba(0,168,107,.85)}
[data-theme="dark"] .hazard-picker .hp-coords,
[data-theme="dark"] .hazard-picker .hp-foot{color:var(--text-secondary)}
[data-theme="dark"] .hazard-picker .hp-opt{background:var(--bg-tertiary);border-color:var(--border)}
[data-theme="dark"] .hazard-picker .hp-opt:hover{border-color:var(--oc)}

/* ============ MAP PIN → FORM HANDOFF ============ */
/* Flash a field that was just filled in by the map, so users see what changed. */
@keyframes fieldAutofill{
  0%{background:rgba(0,168,107,.28);box-shadow:0 0 0 3px rgba(0,168,107,.25)}
  100%{background:var(--bg-secondary);box-shadow:0 0 0 0 rgba(0,168,107,0)}
}
.field-autofill{animation:fieldAutofill 1.6s ease-out}
[data-theme="dark"] .field-autofill{animation-name:fieldAutofillDark}
@keyframes fieldAutofillDark{
  0%{background:rgba(0,230,169,.2);box-shadow:0 0 0 3px rgba(0,230,169,.18)}
  100%{background:var(--bg-tertiary);box-shadow:0 0 0 0 rgba(0,230,169,0)}
}
/* Nudge users to click the map when the custom option is waiting for a pin. */
.map-await-pin::after{
  content:'Click anywhere to drop your pin';
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:600;background:rgba(12,20,16,.88);color:#c8ffe8;
  font-size:.76rem;font-weight:700;letter-spacing:.2px;
  padding:9px 16px;border-radius:999px;border:1px solid rgba(0,230,169,.45);
  pointer-events:none;animation:awaitPin 1.4s ease-in-out infinite;white-space:nowrap;
}
@keyframes awaitPin{0%,100%{opacity:.72;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(-4px)}}

/* ============ AUTH GATE: FIT ANY SCREEN + POLISH ============ */
/* The register form is taller than a laptop viewport; let each column scroll
   independently instead of clipping the top and bottom of the card. */
@media(max-height:820px){
  .auth-container{min-height:0}
  .auth-left{padding:34px 38px}
  .auth-right{padding:30px 38px}
  .auth-hero h1{font-size:1.55rem}
  .auth-hero p{margin-bottom:18px}
  .auth-features{gap:11px}
}
@media(max-height:680px){
  .auth-features{display:none}
  .auth-hero{padding:10px 0}
  .auth-brand-icon{width:46px;height:46px;font-size:1.38rem}
  .auth-tabs{margin-bottom:18px}
  .auth-right{justify-content:flex-start}
}
/* Visual polish for the sign-up side */
.auth-right .form-group{position:relative}
.auth-form.active .form-group{animation:authFieldIn .45s both}
.auth-form.active .form-group:nth-child(1){animation-delay:.02s}
.auth-form.active .form-group:nth-child(2){animation-delay:.06s}
.auth-form.active .form-group:nth-child(3){animation-delay:.1s}
.auth-form.active .form-group:nth-child(4){animation-delay:.14s}
.auth-form.active .form-group:nth-child(5){animation-delay:.18s}
.auth-form.active .form-group:nth-child(6){animation-delay:.22s}
@keyframes authFieldIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.auth-right .form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.auth-submit{background:linear-gradient(135deg,var(--accent) 0%,#00c48c 100%);box-shadow:0 6px 18px rgba(0,168,107,.28);transition:transform .16s ease,box-shadow .16s ease}
.auth-submit:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,168,107,.36)}
.auth-submit:active{transform:translateY(0)}

/* ============ WELCOME SPLASH ============ */
/* The page is lit with the colours of the garden falling through it: river
   blue high left, marigold gold high right, slate cool low right, and leaf
   green pooling at the bottom where the grass fringe takes root. */
.splash{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(92% 72% at 10% 4%, rgba(224,242,254,.95), transparent 58%),
    radial-gradient(74% 58% at 90% 10%, rgba(254,243,199,.92), transparent 56%),
    radial-gradient(68% 54% at 94% 82%, rgba(226,232,240,.85), transparent 58%),
    radial-gradient(58% 46% at 4% 74%, rgba(255,237,213,.8), transparent 56%),
    linear-gradient(180deg,#fbfdfe 0%,#f5f9fc 24%,#f7faf3 56%,#edf7e8 80%,#d3ecd0 100%);
  transition:opacity .65s ease,transform .65s ease;overflow:hidden;padding:20px;min-height:100vh;color:#14532d}
.splash::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.46),transparent 62%);pointer-events:none}
.splash.leaving{opacity:0;transform:scale(1.02);pointer-events:none}
.splash-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.splash-bg::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 22% 28%,rgba(2,132,199,.07) 0%,transparent 50%),radial-gradient(circle at 78% 66%,rgba(202,138,4,.07) 0%,transparent 50%);pointer-events:none}
/* A slow-breathing wash of blossom light. It sits under the garden and never
   settles, so the page reads as outdoors rather than as a coloured rectangle. */
.splash-veil{position:absolute;inset:-12%;pointer-events:none;filter:blur(30px);
  background:
    radial-gradient(44% 38% at 24% 26%, rgba(56,189,248,.22), transparent 68%),
    radial-gradient(38% 34% at 76% 20%, rgba(251,191,36,.22), transparent 66%),
    radial-gradient(50% 42% at 64% 84%, rgba(59,130,246,.16), transparent 70%),
    radial-gradient(42% 36% at 16% 78%, rgba(74,222,128,.18), transparent 68%);
  animation:veilBreathe 24s ease-in-out infinite alternate}
@keyframes veilBreathe{
  0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);opacity:.82}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.09) rotate(3deg);opacity:1}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.05) rotate(-3deg);opacity:.9}
}
/* Warm light that leans toward the pointer. */
.splash-glow{position:absolute;left:0;top:0;width:76vmax;height:76vmax;margin:-38vmax 0 0 -38vmax;
  border-radius:50%;pointer-events:none;filter:blur(16px);will-change:transform;
  transform:translate3d(50vw,44vh,0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(circle,rgba(255,252,240,.5) 0%,rgba(253,230,138,.24) 34%,rgba(186,230,253,.18) 54%,transparent 70%)}
.splash-inner{position:relative;z-index:2;text-align:center;max-width:960px;animation:splashIn 1s cubic-bezier(.2,.8,.3,1) both;padding:40px 28px;max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;border-radius:24px;background:rgba(255,255,255,.2);backdrop-filter:blur(24px);box-shadow:0 12px 48px rgba(22,163,74,.15),0 0 0 1px rgba(255,255,255,.3)}
.splash-inner::before{content:'';position:absolute;inset:-40px;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);pointer-events:none}
@keyframes splashIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.splash-logo-wrap{position:relative;width:120px;height:120px;margin:0 auto 28px}
/* A soft floral halo breathing behind the logo — light through petals, no
   hard shapes, and it fades to nothing well inside the card's clip edge. */
.logo-halo{position:absolute;inset:-28%;border-radius:50%;pointer-events:none;filter:blur(12px);
  background:radial-gradient(circle,rgba(255,253,245,.9) 0 20%,rgba(253,230,138,.44) 30%,rgba(125,211,252,.3) 42%,rgba(148,163,184,.18) 53%,transparent 62%);
  animation:haloBreathe 7.5s ease-in-out infinite alternate}
@keyframes haloBreathe{from{transform:scale(.94);opacity:.78}to{transform:scale(1.07);opacity:1}}
.splash-ring{position:absolute;inset:0;width:120px;height:120px;transform:rotate(-90deg)}
.splash-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.splash-ring .ring-track{stroke:rgba(22,163,74,.15)}
.splash-ring .ring-spin{stroke:#16a34a;stroke-dasharray:90 370;animation:ringSpin 3s linear infinite;transform-origin:60px 60px}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.splash-logo{position:absolute;inset:22px;border-radius:50%;background:linear-gradient(135deg,rgba(22,163,74,.18),rgba(34,197,94,.18));backdrop-filter:blur(16px);
  border:2px solid rgba(22,163,74,.3);display:flex;align-items:center;justify-content:center;font-size:2.8rem;color:#16a34a;
  animation:logoPulse 3s ease-in-out infinite;box-shadow:0 12px 36px rgba(22,163,74,.25)}
.splash-logo img{width:72%;height:72%;border-radius:24%;box-shadow:0 6px 18px rgba(0,0,0,.18)}
@keyframes logoPulse{0%,100%{transform:scale(1);box-shadow:0 12px 36px rgba(22,163,74,.25)}50%{transform:scale(1.1);box-shadow:0 20px 52px rgba(22,163,74,.35)}}
.splash-kicker{font-size:.85rem;letter-spacing:4px;text-transform:uppercase;color:#15803d;font-weight:800;margin-bottom:8px;animation:fadeInUp .6s ease .2s both;text-shadow:0 1px 2px rgba(21,128,61,.1)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.splash-title{font-size:clamp(2.5rem,8vw,4rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin:0 0 14px;display:flex;justify-content:center;gap:0;color:#166534;animation:fadeInUp .6s ease .3s both;text-shadow:0 2px 8px rgba(22,163,74,.12)}
.splash-title span{display:inline;animation:letterIn .5s cubic-bezier(.2,1.5,.4,1) both}
.splash-title .accent{background:linear-gradient(135deg,#16a34a,#22c55e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(22,163,74,.2))}
@keyframes letterIn{from{opacity:0;transform:translateY(15px) rotate(-3deg)}to{opacity:1;transform:none}}
.splash-tag{font-size:1.05rem;color:#15803d;margin:0 auto 24px;max-width:580px;line-height:1.65;animation:fadeInUp .6s ease .4s both;font-weight:500;text-shadow:0 1px 3px rgba(21,128,61,.08)}
.splash-rotator{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:.95rem;color:#166534;margin-bottom:28px;animation:fadeInUp .6s ease .5s both;font-weight:700}
.splash-word-wrap{position:relative;display:inline-block;min-width:220px;height:28px;overflow:hidden;text-align:left}
.splash-word-wrap b{position:absolute;left:0;top:0;color:#16a34a;font-weight:900;white-space:nowrap;animation:wordCycle .5s ease both;font-size:1rem}
@keyframes wordCycle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.splash-enter{display:inline-flex;align-items:center;gap:14px;padding:18px 48px;border:none;border-radius:20px;cursor:pointer;font-family:inherit;
  font-size:1.15rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 12px 36px rgba(22,163,74,.4);
  transition:all .3s cubic-bezier(.2,.8,.3,1);animation:chipPop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:1s;position:relative;overflow:hidden;letter-spacing:.6px}
.splash-enter::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent);opacity:0;transition:opacity .3s ease}
.splash-enter:hover::before{opacity:1}
.splash-enter:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 20px 48px rgba(22,163,74,.5)}
.splash-enter:active{transform:translateY(-3px) scale(1.02)}
.splash-hint{margin-top:18px;font-size:.78rem;color:#6b7280;animation:fadeInUp .6s ease .9s both;font-weight:500}
.splash-hint kbd{background:rgba(255,255,255,.7);border:2px solid rgba(255,255,255,.8);border-radius:10px;padding:5px 12px;font-size:0.74rem;font-family:inherit;color:#6b7280;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.splash-skip{position:absolute;top:28px;right:28px;z-index:3;background:rgba(255,255,255,.75);border:2px solid rgba(255,255,255,.85);color:#6b7280;
  border-radius:16px;padding:12px 20px;font-size:.78rem;font-weight:900;cursor:pointer;font-family:inherit;transition:all .3s ease;backdrop-filter:blur(12px);box-shadow:0 3px 12px rgba(0,0,0,.08)}
.splash-skip:hover{background:rgba(255,255,255,.95);color:#374151;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
@media(max-width:640px){
  .splash{padding:16px}
  .splash-inner{padding:24px 16px}
  .splash-logo-wrap,.splash-ring,.splash-ring circle{width:100px;height:100px}
  .splash-ring{width:100px;height:100px}
  .splash-logo{inset:18px;font-size:2.2rem}
  .splash-word-wrap{min-width:0;width:100%;text-align:center}
  .splash-rotator{justify-content:center}
  .splash-title{font-size:2.2rem}
  .splash-enter{padding:16px 36px;font-size:1.05rem}
  .splash-kicker{font-size:.78rem;letter-spacing:3px}
  .splash-tag{font-size:.95rem}
  .sf-ico{font-size:3rem}
  .sf-name{font-size:1.15rem}
  .sf-hint{font-size:.8rem}
  .splash-features{gap:16px}
  .splash-feat{padding:24px 18px}
  .splash-stats{gap:24px}
  .stat-item{padding:10px 14px}
  .stat-num{font-size:2.4rem}
  .splash-badges{gap:10px}
  .splash-badge{padding:10px 16px;font-size:.75rem}
}
html.reduce-motion .splash-title span,
html.reduce-motion .splash-enter{animation:none}
html.reduce-motion .splash-logo,
html.reduce-motion .splash-veil,
html.reduce-motion .logo-halo,
html.reduce-motion .splash-ring .ring-spin{animation:none}

/* ============ AQI READER (Learn → Air quality) ============ */
.aqi{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 16px}
.aqi-readout{display:flex;align-items:baseline;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.aqi-num{font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-1px;transition:color .2s ease}
.aqi-unit{font-size:0.74rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-muted)}
.aqi-band{margin-left:auto;background:var(--warning);color:#04301f;font-size:.74rem;font-weight:800;padding:5px 12px;border-radius:999px;transition:background .2s ease}
.aqi-scale{display:flex;gap:2px;height:10px;border-radius:6px;overflow:hidden}
.aqi-seg{background:var(--c);opacity:.85}
.aqi-marker-wrap{position:relative;height:12px;margin-top:-11px}
.aqi-marker{position:absolute;top:0;left:50%;width:4px;height:12px;background:var(--text-primary);border-radius:2px;transform:translateX(-50%);transition:left .12s linear;box-shadow:0 0 0 2px var(--bg-primary)}
.aqi-slider{width:100%;margin:10px 0 4px;accent-color:var(--accent);cursor:grab}
.aqi-slider:active{cursor:grabbing}
.aqi-ticks{display:flex;justify-content:space-between;font-size:0.74rem;color:var(--text-muted);font-weight:600;margin-bottom:14px}
.aqi-body p,.aqi-advice p{font-size:.84rem;line-height:1.6;color:var(--text-secondary);margin:0}
.aqi-body p b{color:var(--text-primary)}
.aqi-advice{margin-top:10px;background:var(--accent-bg);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:11px 13px}
.aqi-advice-k{display:block;font-size:0.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.aqi-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.aqi-eg{display:flex;align-items:center;gap:7px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px;padding:7px 13px;cursor:pointer;font-family:inherit;transition:border-color .16s,transform .16s}
.aqi-eg:hover{border-color:var(--accent);transform:translateY(-1px)}
.aqi-eg b{font-size:.82rem;color:var(--text-primary)}
.aqi-eg span{font-size:0.74rem;color:var(--text-muted)}
.aqi-note{font-size:0.74rem;color:var(--text-muted);margin-top:10px;font-style:italic}

/* ============ TIP ROTATOR — topic labels + citations ============ */
.tip-rotator{transition:background .35s ease,border-color .35s ease}
.tip-rotator-src{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:7px;font-size:0.74rem}
.tip-src-note{color:var(--text-muted);font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.kb-inline-src{color:var(--accent);font-weight:700;text-decoration:none;border-bottom:1px dashed currentColor;cursor:pointer;transition:var(--transition-fast)}
.kb-inline-src:hover{color:var(--accent-light)}
.tip-rotator.tip-dengue{background:linear-gradient(135deg,rgba(234,67,53,.14),rgba(156,39,176,.10))}
.tip-rotator.tip-water{background:linear-gradient(135deg,rgba(66,133,244,.16),rgba(0,168,120,.10))}
.tip-rotator.tip-waste{background:linear-gradient(135deg,rgba(52,168,83,.16),rgba(251,188,4,.10))}
.tip-rotator.tip-air{background:linear-gradient(135deg,rgba(90,100,120,.16),rgba(66,133,244,.10))}
.tip-rotator.tip-safety{background:linear-gradient(135deg,rgba(251,188,4,.18),rgba(234,67,53,.12))}
.tip-rotator.tip-health{background:linear-gradient(135deg,rgba(234,67,53,.14),rgba(52,168,83,.10))}
.tip-rotator.tip-civic{background:linear-gradient(135deg,rgba(0,106,78,.16),rgba(66,133,244,.10))}
.tip-rotator.tip-science{background:linear-gradient(135deg,rgba(156,39,176,.16),rgba(66,133,244,.10))}
.tip-rotator.tip-reporting{background:linear-gradient(135deg,rgba(251,188,4,.16),rgba(0,106,78,.10))}
.tip-dots{display:flex;align-items:center;gap:10px;margin:-8px 2px 16px;padding:0 2px}
.tip-count{font-size:0.74rem;font-weight:700;color:var(--text-muted);letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.tip-track{flex:1;height:4px;background:var(--border);border-radius:999px;overflow:hidden}
.tip-track-fill{display:block;height:100%;background:var(--gradient-accent);border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}

/* ============ RESOURCE LIBRARY ============ */
.kb-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.kb-chips{display:flex;flex-wrap:wrap;gap:7px}
.kb-chips .chip{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);border-radius:999px;padding:7px 13px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;transition:var(--transition-fast)}
.kb-chips .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.kb-chips .chip.active{background:var(--gradient-accent);border-color:transparent;color:#fff;box-shadow:var(--shadow-sm)}
.kb-tools{display:grid;grid-template-columns:1fr auto auto;gap:8px}
.kb-tools .input{width:100%}
.kb-tools .select{min-width:150px}
.kb-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kb-count{font-size:0.74rem;font-weight:700;color:var(--text-muted);letter-spacing:.5px;text-transform:uppercase}
.kb-prog-slot{flex:1;min-width:180px;max-width:340px}
.kb-prog{display:flex;align-items:center;gap:8px}
.kb-prog-txt{font-size:0.74rem;font-weight:700;color:var(--text-secondary);white-space:nowrap}
.kb-prog-track{flex:1;height:5px;background:var(--border);border-radius:999px;overflow:hidden}
.kb-prog-fill{height:100%;background:var(--gradient-accent);border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.kb-prog-pct{font-size:0.74rem;font-weight:800;color:var(--accent);min-width:32px;text-align:right}

.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.kb-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:8px;transition:var(--transition);position:relative;overflow:hidden}
.kb-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-accent);opacity:0;transition:opacity .2s ease}
.kb-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.kb-card:hover::before{opacity:1}
.kb-card.opened{border-style:dashed}
.kb-card.opened .kb-title::after{content:' ✓ read';color:var(--accent);font-size:0.74rem;font-weight:800}
.kb-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kb-kind{font-size:0.74rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary);background:var(--bg-tertiary);padding:3px 9px;border-radius:999px}
.kb-time{font-size:0.74rem;font-weight:700;color:var(--text-muted)}
.kb-level{margin-left:auto;font-size:0.74rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.kb-level.easy{background:var(--success-light);color:var(--success)}
.kb-level.deep{background:var(--purple-light);color:var(--purple)}
.kb-title{font-size:.95rem;font-weight:800;line-height:1.3;color:var(--text-primary)}
.kb-org{font-size:0.74rem;font-weight:600;color:var(--accent)}
.kb-learn{font-size:.8rem;line-height:1.55;color:var(--text-secondary);flex:1}
.kb-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--border-light)}
.kb-topic{font-size:0.74rem;font-weight:700;color:var(--text-muted)}
.kb-open{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:800;color:var(--accent);text-decoration:none;padding:5px 11px;border-radius:999px;background:var(--accent-bg);transition:var(--transition-fast)}
.kb-open:hover{background:var(--accent);color:#fff}

.kb-fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.kb-fact{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;transition:var(--transition)}
.kb-fact:hover{border-color:var(--accent);transform:translateY(-2px)}
.kf-num{font-size:1.75rem;font-weight:800;line-height:1;color:var(--accent);letter-spacing:-1px}
.kf-unit{font-size:.85rem;font-weight:700;margin-left:3px;color:var(--accent-light)}
.kf-txt{font-size:.78rem;line-height:1.5;color:var(--text-secondary);margin:7px 0 6px}
.kf-src{font-size:0.74rem}

.kb-path{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-secondary);margin-bottom:10px;overflow:hidden}
.kb-path-head{display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;user-select:none}
.kb-path-head:hover{background:var(--bg-primary)}
.kp-emoji{font-size:1.5rem;line-height:1}
.kp-head-txt{flex:1;min-width:0}
.kp-head-txt h5{font-size:.92rem;font-weight:800;color:var(--text-primary);margin-bottom:3px}
.kp-head-txt p{font-size:.76rem;line-height:1.5;color:var(--text-secondary)}
.kp-meter{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.kp-meter b{font-size:.82rem;color:var(--accent)}
.kp-bar{display:block;width:74px;height:5px;background:var(--border);border-radius:999px;overflow:hidden}
.kp-bar span{display:block;height:100%;background:var(--gradient-accent);transition:width .4s ease}
.kp-caret{color:var(--text-muted);transition:transform .25s ease;flex-shrink:0}
.kb-path.open .kp-caret{transform:rotate(180deg)}
.kb-path-steps{list-style:none;max-height:0;overflow:hidden;transition:max-height .35s ease;padding:0 14px}
.kb-path.open .kb-path-steps{max-height:1400px;padding-bottom:12px}
.kb-path-steps.complete .kp-step:last-child .kp-t{color:var(--success)}
.kp-step{display:flex;gap:11px;padding:10px 0;border-top:1px dashed var(--border);align-items:flex-start}
.kp-check{width:24px;height:24px;flex-shrink:0;border-radius:50%;border:2px solid var(--border);background:transparent;color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.74rem;transition:var(--transition-fast)}
.kp-step.on .kp-check{background:var(--accent);border-color:var(--accent);color:#fff}
.kp-body{flex:1;min-width:0}
.kp-t{font-size:.84rem;font-weight:700;color:var(--text-primary);line-height:1.4}
.kp-step.on .kp-t{text-decoration:line-through;opacity:.65}
.kp-d{font-size:.76rem;line-height:1.5;color:var(--text-secondary);margin-top:2px}
.kp-meta{margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:0.74rem}
.kp-jump{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:999px;padding:4px 11px;font-size:0.74rem;font-weight:800;color:var(--accent);cursor:pointer;font-family:inherit;transition:var(--transition-fast)}
.kp-jump:hover{background:var(--accent);color:#fff;border-color:transparent}

.kb-gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.kb-term{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);overflow:hidden}
.kb-term summary{list-style:none;cursor:pointer;padding:11px 13px;font-size:.8rem;font-weight:800;color:var(--text-primary);display:flex;align-items:center;justify-content:space-between;gap:8px}
.kb-term summary::-webkit-details-marker{display:none}
.kb-term summary i{color:var(--accent);font-size:0.74rem;transition:transform .2s ease}
.kb-term[open] summary i{transform:rotate(45deg)}
.kb-term[open] summary{background:var(--bg-primary)}
.kb-term-body{padding:11px 13px;font-size:.78rem;line-height:1.6;color:var(--text-secondary);border-top:1px solid var(--border-light)}
.kb-term-body p{margin-bottom:7px}

.kb-literacy{display:flex;flex-direction:column;gap:10px}
.kl-item{display:flex;flex-direction:column;gap:3px;background:var(--bg-primary);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:11px 13px}
.kl-item b{font-size:.82rem;color:var(--text-primary)}
.kl-item span{font-size:.77rem;line-height:1.55;color:var(--text-secondary)}
.kb-literacy-foot{font-size:0.74rem;font-style:italic;color:var(--text-muted);margin-top:12px}

.kb-cite{list-style:none;counter-reset:cite;display:flex;flex-direction:column;gap:7px}
.kb-cite li{counter-increment:cite;font-size:.76rem;line-height:1.55;color:var(--text-secondary);padding-left:26px;position:relative}
.kb-cite li::before{content:counter(cite);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--bg-tertiary);color:var(--text-muted);font-size:0.74rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.kb-cite li em{color:var(--text-primary);font-style:italic}
.kb-cite li a{color:var(--accent);text-decoration:none;word-break:break-all}
.kb-cite li a:hover{text-decoration:underline}
.kb-cite-note{color:var(--text-muted);font-size:0.74rem;white-space:nowrap}
.kb-cite-foot{margin-top:14px;font-size:0.74rem;line-height:1.6;color:var(--text-muted);border-top:1px solid var(--border-light);padding-top:12px}
.kb-target{animation:kbPulse 1.8s ease}
@keyframes kbPulse{0%,100%{box-shadow:var(--shadow-sm)}30%{box-shadow:0 0 0 4px var(--accent-bg),var(--shadow-lg)}}

/* ============ QUIZ ARENA ============ */
.qz-intro{display:flex;flex-direction:column;gap:16px}
.qz-lead{font-size:.86rem;line-height:1.65;color:var(--text-secondary)}
.qz-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.qz-level{display:flex;flex-direction:column;gap:7px;text-align:left;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;cursor:pointer;font-family:inherit;transition:var(--transition);position:relative;overflow:hidden}
.qz-level::after{content:'';position:absolute;inset:auto 0 0 0;height:4px;background:var(--gradient-accent);opacity:.5;transition:opacity .2s ease}
.qz-level:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.qz-level:hover::after{opacity:1}
.qz-level.easy::after{background:var(--gradient-success)}
.qz-level.medium::after{background:var(--gradient-info)}
.qz-level.hard::after{background:var(--gradient-danger)}
.ql-emoji{font-size:1.7rem;line-height:1}
.ql-name{font-size:1rem;font-weight:800;color:var(--text-primary)}
.ql-blurb{font-size:.77rem;line-height:1.55;color:var(--text-secondary)}
.ql-meta{font-size:0.74rem;font-weight:700;color:var(--text-muted);letter-spacing:.3px}
.ql-best{font-size:0.74rem;font-weight:800;color:var(--accent)}
.qz-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px}
.qz-stats .qs{display:flex;flex-direction:column;gap:2px;text-align:center}
.qz-stats .qs b{font-size:1.15rem;font-weight:800;color:var(--text-primary)}
.qz-stats .qs span{font-size:0.74rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.qz-note{font-size:.74rem;line-height:1.6;color:var(--text-muted);border-top:1px solid var(--border-light);padding-top:12px}
.qz-rules{display:flex;flex-direction:column;gap:9px}
.qr-rule{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;line-height:1.55;color:var(--text-secondary)}
.qr-rule i{color:var(--purple);margin-top:2px;flex-shrink:0;width:16px;text-align:center}

.qz-card{display:flex;flex-direction:column;gap:14px}
.qz-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qz-level-tag{font-size:0.74rem;font-weight:800;padding:4px 11px;border-radius:999px;background:var(--bg-tertiary);color:var(--text-secondary)}
.qz-level-tag.easy{background:var(--success-light);color:var(--success)}
.qz-level-tag.medium{background:var(--info-light);color:var(--info)}
.qz-level-tag.hard{background:var(--danger-light);color:var(--danger)}
.qz-dots{display:flex;gap:4px;align-items:center}
.qz-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:var(--transition-fast)}
.qz-dot.now{background:var(--text-muted);transform:scale(1.35)}
.qz-dot.ok{background:var(--success)}
.qz-dot.bad{background:var(--danger)}
.qz-score{margin-left:auto;font-size:.76rem;font-weight:800;color:var(--text-primary)}
.qz-quit{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-size:0.74rem;transition:var(--transition-fast)}
.qz-quit:hover{background:var(--danger);border-color:transparent;color:#fff}
.qz-timer{height:6px;background:var(--bg-tertiary);border-radius:999px;overflow:hidden}
.qz-timer span{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .2s linear,background .3s ease}
.qz-timer span.mid{background:var(--warning)}
.qz-timer span.low{background:var(--danger);animation:qzPulse .6s ease-in-out infinite}
@keyframes qzPulse{0%,100%{opacity:1}50%{opacity:.5}}
.qz-question{font-size:1.05rem;font-weight:800;line-height:1.4;color:var(--text-primary)}
.qz-opts{display:flex;flex-direction:column;gap:8px}
.qz-opt{display:flex;align-items:center;gap:11px;text-align:left;background:var(--bg-secondary);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;cursor:pointer;font-family:inherit;transition:var(--transition-fast)}
.qz-opt:hover:not(:disabled){border-color:var(--accent);transform:translateX(3px);background:var(--accent-bg)}
.qz-opt:disabled{cursor:default}
.qo-key{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--bg-tertiary);color:var(--text-secondary);font-size:0.74rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.qo-txt{font-size:.86rem;line-height:1.45;color:var(--text-primary)}
.qz-opt.good{border-color:var(--success);background:var(--success-light)}
.qz-opt.good .qo-key{background:var(--success);color:#fff}
.qz-opt.bad{border-color:var(--danger);background:var(--danger-light)}
.qz-opt.bad .qo-key{background:var(--danger);color:#fff}
.qz-feedback{display:none;border-radius:var(--radius-md);padding:14px;border:1px solid var(--border)}
.qz-feedback.show{display:block;animation:qzIn .28s cubic-bezier(.2,.9,.3,1.2)}
.qz-feedback.ok{background:var(--success-light);border-color:rgba(52,168,83,.35)}
.qz-feedback.bad{background:var(--danger-light);border-color:rgba(234,67,53,.35)}
@keyframes qzIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qz-fb-head{font-size:.86rem;font-weight:800;color:var(--text-primary);margin-bottom:5px}
.qz-fb-why{font-size:.8rem;line-height:1.6;color:var(--text-secondary);margin-bottom:9px}
.qz-fb-src{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:0.74rem;margin-bottom:12px}
.qz-fb-topic{background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px;padding:2px 9px;font-weight:700;text-transform:capitalize;color:var(--text-muted)}
.qz-next{align-self:flex-start}

.qz-results{display:flex;flex-direction:column;gap:18px}
.qz-ring-wrap{position:relative;width:150px;height:150px;margin:6px auto 0}
.qz-ring{width:150px;height:150px;transform:rotate(-90deg)}
.qz-ring .qr-track{fill:none;stroke:var(--bg-tertiary);stroke-width:10}
.qz-ring .qr-fill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.3,.8,.3,1)}
.qz-ring .qr-fill.easy{stroke:var(--success)}
.qz-ring .qr-fill.medium{stroke:var(--info)}
.qz-ring .qr-fill.hard{stroke:var(--danger)}
.qz-ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.qz-ring-txt b{font-size:1.7rem;font-weight:800;color:var(--text-primary);letter-spacing:-1px}
.qz-ring-txt span{font-size:0.74rem;font-weight:700;color:var(--text-muted)}
.qz-verdict{text-align:center}
.qz-verdict h5{font-size:1.15rem;font-weight:800;color:var(--text-primary);margin-bottom:5px}
.qz-verdict p{font-size:.84rem;line-height:1.55;color:var(--text-secondary)}
.qz-verdict-meta{margin-top:9px;font-size:.76rem;color:var(--text-muted);font-weight:600}
.qz-verdict-meta b{color:var(--accent)}
.qz-earned{margin-top:12px;display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:var(--accent-bg);border-radius:999px;padding:8px 20px}
.qz-earned b{font-size:1rem;font-weight:800;color:var(--accent)}
.qz-earned span{font-size:0.74rem;color:var(--text-muted)}
.qz-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.qz-review summary{cursor:pointer;font-size:.86rem;font-weight:800;color:var(--text-primary);padding:4px 0}
.qz-review summary:hover{color:var(--accent)}
.qz-rev{border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);margin-top:9px;overflow:hidden}
.qz-rev.ok{border-left-color:var(--success)}
.qz-rev.bad{border-left-color:var(--danger)}
.qr-head{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg-primary)}
.qr-n{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--bg-tertiary);color:var(--text-secondary);font-size:0.74rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.qr-q{flex:1;font-size:.82rem;font-weight:700;line-height:1.4;color:var(--text-primary)}
.qr-mark{font-size:.9rem;font-weight:800}
.qz-rev.ok .qr-mark{color:var(--success)}
.qz-rev.bad .qr-mark{color:var(--danger)}
.qr-body{padding:11px 13px;font-size:.79rem;line-height:1.6;color:var(--text-secondary)}
.qr-body p b{color:var(--text-primary)}
.qr-why{margin-top:6px}
.qr-src{margin-top:8px;font-size:0.74rem}

/* Learn tabs: give the two new ones a distinct look so they read as destinations */
.learn-cat.kb-tab{border-color:rgba(66,133,244,.45)}
.learn-cat.kb-tab:hover{background:var(--info-light);border-color:var(--info);color:var(--info)}
.learn-cat.qz-tab{border-color:rgba(156,39,176,.45)}
.learn-cat.qz-tab:hover{background:var(--purple-light);border-color:var(--purple);color:var(--purple)}
.learn-cat.kb-tab.active{background:var(--gradient-info);border-color:transparent;color:#fff}
.learn-cat.qz-tab.active{background:var(--gradient-purple);border-color:transparent;color:#fff}

[data-theme="dark"] .kb-card.opened{border-color:var(--border)}
[data-theme="dark"] .kb-term[open] summary{background:var(--bg-tertiary)}
[data-theme="dark"] .qz-opt{background:var(--bg-tertiary)}
[data-theme="dark"] .qr-head{background:var(--bg-tertiary)}
[data-theme="dark"] .kb-fact,[data-theme="dark"] .kl-item,[data-theme="dark"] .qz-stats{background:var(--bg-tertiary)}
[data-theme="dark"] .kf-num,[data-theme="dark"] .kf-unit{color:var(--accent)}
[data-theme="dark"] .qz-timer{background:var(--bg-quaternary)}
[data-theme="dark"] .qz-dot{background:var(--bg-quaternary)}

@media(max-width:760px){
  .kb-tools{grid-template-columns:1fr}
  .kb-tools .select{min-width:0;width:100%}
  .kb-grid{grid-template-columns:1fr}
  .kp-head-txt p{display:none}
  .qz-ring-wrap,.qz-ring{width:124px;height:124px}
  .qz-actions .btn{flex:1}
}
@media(max-width:420px){
  .kb-fact-grid{grid-template-columns:1fr}
  .qz-question{font-size:.96rem}
}
html.reduce-motion .kb-card:hover,html.reduce-motion .qz-level:hover{transform:none}
html.reduce-motion .qz-timer span.low{animation:none}
html.reduce-motion .qz-feedback.show{animation:none}
html.reduce-motion .qz-ring .qr-fill{transition:none}

/* ============ LIBRARY: saved list + search highlights ============ */
.kb-star{margin-left:6px;width:26px;height:26px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.74rem;transition:var(--transition-fast)}
.kb-star:hover{border-color:var(--warning);color:var(--warning);transform:scale(1.12)}
.kb-star.on{background:var(--warning);border-color:var(--warning);color:#5a4500}
.kb-saved-chip{border-color:rgba(251,188,4,.5)}
.kb-saved-chip span{display:inline-block;min-width:17px;padding:0 5px;margin-left:4px;border-radius:999px;background:var(--bg-tertiary);color:var(--text-secondary);font-size:0.74rem;font-weight:800}
.kb-saved-chip.active span{background:rgba(255,255,255,.25);color:#fff}
.kb-grid mark,.kb-title mark,.kb-org mark,.kb-learn mark{background:rgba(251,188,4,.45);color:inherit;border-radius:3px;padding:0 1px}
[data-theme="dark"] .kb-grid mark{background:rgba(251,188,4,.3);color:var(--text-primary)}

/* ============ QUIZ: streak + weakest-topic nudge ============ */
.qz-streak{font-size:0.74rem;font-weight:800;color:var(--warning);opacity:0;transition:opacity .2s ease;white-space:nowrap}
.qz-streak.on{opacity:1;animation:qzStreak .4s cubic-bezier(.2,.9,.3,1.4)}
@keyframes qzStreak{from{transform:scale(.7)}to{transform:scale(1)}}
.qz-nudge{display:flex;gap:11px;align-items:flex-start;background:var(--warning-light);border:1px solid rgba(251,188,4,.35);border-radius:var(--radius-md);padding:13px 15px;font-size:.8rem;line-height:1.55;color:var(--text-secondary)}
.qz-nudge i{color:#b8860b;margin-top:2px}
.qz-nudge b{color:var(--text-primary);text-transform:capitalize}
html.reduce-motion .qz-streak.on{animation:none}

/* ============ REPORT FORMS v2 — THEMED HERO, TRACKER, METERS, BUTTONS ============ */
.rf-card{--rfc:var(--accent);--rfc-soft:color-mix(in srgb,var(--rfc) 13%,transparent);--rfc-line:color-mix(in srgb,var(--rfc) 32%,transparent);position:relative;overflow:hidden}
.rf-card.rf-water{--rfc:#2f7ff0}
.rf-card.rf-dengue{--rfc:#e0483a}
.rf-card.rf-garbage{--rfc:#dd9c07}
.rf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--rfc),transparent);opacity:.55;pointer-events:none}

/* --- Hero --- */
@keyframes rfGlyphFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-6deg)}}
@keyframes rfRing{0%{transform:scale(.72);opacity:.6}100%{transform:scale(1.65);opacity:0}}
@keyframes rfLive{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rfc) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes rfStarSpin{0%,72%{transform:rotate(0) scale(1)}80%{transform:rotate(18deg) scale(1.35)}88%{transform:rotate(-14deg) scale(1.2)}100%{transform:rotate(0) scale(1)}}
@keyframes rfFieldIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.rf-hero{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--radius-lg);margin-bottom:13px;position:relative;overflow:hidden;border:1px solid var(--rfc-line);background:linear-gradient(135deg,color-mix(in srgb,var(--rfc) 13%,var(--bg-secondary)),var(--bg-secondary) 78%)}
.rf-hero::after{content:'';position:absolute;top:-45%;right:-8%;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,var(--rfc-soft),transparent 70%);pointer-events:none}
.rf-hero-art{position:relative;flex:none;width:54px;height:54px;display:grid;place-items:center}
.rf-hero-glyph{position:relative;z-index:1;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:1.22rem;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--rfc) 78%,#fff),color-mix(in srgb,var(--rfc) 72%,#000));box-shadow:0 7px 18px var(--rfc-soft);animation:rfGlyphFloat 4.6s ease-in-out infinite}
.rf-hero-ring{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--rfc-line);opacity:0;animation:rfRing 3.6s ease-out infinite}
.rf-hero-ring.r2{animation-delay:1.8s}
.rf-hero-body{flex:1;min-width:0;position:relative;z-index:1}
.rf-hero-kicker{display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--rfc)}
.rf-live{width:7px;height:7px;border-radius:50%;background:var(--rfc);animation:rfLive 1.9s ease-out infinite}
.rf-hero-title{font-size:1.02rem;font-weight:800;letter-spacing:-.25px;margin:4px 0 5px;color:var(--text-primary);line-height:1.25}
.rf-hero-sub{font-size:.755rem;line-height:1.58;color:var(--text-secondary)}
.rf-hero-pts{flex:none;position:relative;z-index:1;text-align:center;padding:7px 11px 6px;border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--rfc-line);color:var(--rfc);box-shadow:var(--shadow-xs)}
.rf-hero-pts i{font-size:0.74rem;display:block;animation:rfStarSpin 5.4s ease-in-out infinite}
.rf-hero-pts b{display:block;font-size:1.06rem;line-height:1.1;font-weight:800;letter-spacing:-.4px}
.rf-hero-pts span{display:block;font-size:0.74rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--text-muted);margin-top:1px}

/* --- Completeness tracker --- */
@keyframes rfShimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(320%)}}
@keyframes rfPtsPop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}
.rf-track{padding:12px 14px;border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--border);margin-bottom:12px;transition:background .4s,border-color .4s,box-shadow .4s}
.rf-track-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.rf-track-label{display:inline-flex;align-items:center;gap:7px;font-size:0.74rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--text-secondary)}
.rf-track-label i{color:var(--rfc)}
.rf-track-pct{font-size:0.74rem;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.rf-track-pct b{font-size:1.08rem;font-weight:800;color:var(--rfc);margin-right:1px}
.rf-track-bar{position:relative;height:9px;border-radius:var(--radius-full);background:var(--bg-tertiary);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.09)}
.rf-track-fill{display:block;height:100%;width:0;border-radius:var(--radius-full);background:linear-gradient(90deg,color-mix(in srgb,var(--rfc) 70%,#fff),var(--rfc));transition:width .6s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.rf-track-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:rfShimmer 2.6s ease-in-out infinite}
.rf-track-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.rf-pts-now{display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:700;color:var(--text-muted);padding:4px 11px;border-radius:var(--radius-full);background:var(--bg-tertiary);border:1px solid transparent;transition:color .3s,background .3s,border-color .3s}
.rf-pts-now b{font-variant-numeric:tabular-nums;font-size:.78rem}
.rf-pts-now.rf-pts-live{color:var(--rfc);background:var(--rfc-soft);border-color:var(--rfc-line);animation:rfPtsPop .45s cubic-bezier(.34,1.56,.64,1)}
.rf-next{font-size:0.74rem;font-weight:600;color:var(--text-muted)}
.rf-track.rf-track-full{border-color:var(--rfc-line);box-shadow:0 0 0 3px var(--rfc-soft);background:linear-gradient(135deg,color-mix(in srgb,var(--rfc) 7%,var(--bg-secondary)),var(--bg-secondary))}

/* --- Type-specific meters --- */
@keyframes rfWave{0%{transform:translateX(0) rotate(0)}100%{transform:translateX(-33%) rotate(360deg)}}
@keyframes rfBarPulse{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.09)}}
@keyframes rfPileIn{0%{transform:translateY(9px) scale(.7)}60%{transform:translateY(-3px) scale(1.12)}100%{transform:none}}
@keyframes rfStepPop{0%{transform:scale(.82)}60%{transform:scale(1.09)}100%{transform:scale(1)}}
.rf-meter{display:flex;align-items:center;gap:15px;padding:13px 15px;border-radius:var(--radius-md);border:1px dashed var(--border);background:var(--bg-secondary);margin-bottom:13px;transition:border-color .35s,border-style .35s,box-shadow .35s}
.rf-meter[data-level]:not([data-level="0"]){border-style:solid;border-color:var(--rfc-line);box-shadow:0 2px 12px var(--rfc-soft)}
.rf-meter-txt{flex:1;min-width:0}
.rf-meter-val{display:flex;align-items:center;gap:7px;font-size:.85rem;font-weight:800;letter-spacing:-.15px;color:var(--text-primary)}
.rf-meter-val i{color:var(--rfc);font-size:.78rem}
.rf-meter-hint{font-size:0.74rem;line-height:1.55;color:var(--text-secondary);margin-top:4px}
.rf-meter-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rf-meter-steps span{font-size:0.74rem;font-weight:700;padding:4px 11px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--bg-primary);color:var(--text-muted);cursor:pointer;font-family:inherit;transition:transform .18s,border-color .2s,color .2s,background .25s,box-shadow .25s}
.rf-meter-steps span:hover{border-color:var(--rfc);color:var(--rfc);transform:translateY(-2px)}
.rf-meter-steps span:focus-visible{outline:2px solid var(--rfc);outline-offset:2px}
.rf-meter-steps span.on{background:var(--rfc);border-color:var(--rfc);color:#fff;box-shadow:0 4px 12px var(--rfc-soft);animation:rfStepPop .42s cubic-bezier(.34,1.56,.64,1) both}

.rf-tube{position:relative;flex:none;width:44px;height:96px;border-radius:13px;background:var(--bg-tertiary);border:2px solid var(--border);overflow:hidden;box-shadow:inset 0 2px 7px rgba(0,0,0,.09)}
.rf-tube-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#6fb0ff,#2f7ff0 65%,#1a58c0);transition:height .75s cubic-bezier(.22,1,.36,1)}
.rf-depth[data-level="1"] .rf-tube-fill{height:30%}
.rf-depth[data-level="2"] .rf-tube-fill{height:62%}
.rf-depth[data-level="3"] .rf-tube-fill{height:93%}
.rf-wave{position:absolute;top:-8px;left:-25%;width:150%;height:16px;border-radius:44%;background:rgba(255,255,255,.34);animation:rfWave 3.2s linear infinite}
.rf-wave.w2{top:-6px;background:rgba(255,255,255,.2);animation-duration:4.6s;animation-direction:reverse}
.rf-tube-ticks{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-evenly;padding:6px 0;pointer-events:none}
.rf-tube-ticks i{display:block;height:1px;background:color-mix(in srgb,var(--text-muted) 40%,transparent)}

.rf-bars{flex:none;display:flex;align-items:flex-end;gap:5px;height:66px;width:76px}
.rf-bars i{flex:1;border-radius:5px 5px 2px 2px;background:var(--bg-tertiary);border:1px solid var(--border);transform-origin:bottom;transition:background .35s,border-color .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.rf-bars i:nth-child(1){height:24%} .rf-bars i:nth-child(2){height:41%} .rf-bars i:nth-child(3){height:58%} .rf-bars i:nth-child(4){height:77%} .rf-bars i:nth-child(5){height:100%}
.rf-risk[data-level="1"] .rf-bars i:nth-child(-n+2){background:var(--success);border-color:transparent}
.rf-risk[data-level="2"] .rf-bars i:nth-child(-n+4){background:var(--warning);border-color:transparent}
.rf-risk[data-level="3"] .rf-bars i{background:var(--danger);border-color:transparent;animation:rfBarPulse 1.15s ease-in-out infinite}
.rf-risk[data-level="3"] .rf-bars i:nth-child(2){animation-delay:.09s}
.rf-risk[data-level="3"] .rf-bars i:nth-child(3){animation-delay:.18s}
.rf-risk[data-level="3"] .rf-bars i:nth-child(4){animation-delay:.27s}
.rf-risk[data-level="3"] .rf-bars i:nth-child(5){animation-delay:.36s}

.rf-pile-viz{flex:none;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:76px;font-size:1.5rem;line-height:1}
.rf-pile-viz span{filter:grayscale(1);opacity:.3;transform:translateY(5px) scale(.88);transition:filter .35s,opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.rf-pile[data-level="1"] .rf-pile-viz span:nth-child(1),
.rf-pile[data-level="2"] .rf-pile-viz span:nth-child(-n+2),
.rf-pile[data-level="3"] .rf-pile-viz span{filter:none;opacity:1;transform:none}
.rf-pile-viz span.on{animation:rfPileIn .55s cubic-bezier(.34,1.56,.64,1) both}

/* --- Smart suggestion --- */
.rf-suggest{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:var(--radius-md);background:var(--warning-light);border:1px solid rgba(251,188,4,.38);margin-bottom:14px;font-size:0.74rem;line-height:1.55;color:var(--text-secondary)}
.rf-suggest[hidden]{display:none}
.rf-suggest.show{animation:rfFieldIn .4s cubic-bezier(.22,1,.36,1) both}
.rf-suggest i{color:#b8860b;margin-top:2px;animation:bulbGlow 2.8s ease-in-out infinite}
.rf-suggest b{color:var(--text-primary)}

/* --- Field states + staggered reveal --- */
@keyframes rfShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes rfRipple{to{transform:scale(2.5);opacity:0}}
.rf-field{position:relative}
.rf-enter .rf-field{animation:rfFieldIn .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--rf-i,0) * 55ms + 70ms)}
.rf-card .form-group > .form-label::after{content:'Optional';margin-left:7px;font-size:0.74rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--text-muted);background:var(--bg-tertiary);padding:2px 8px;border-radius:var(--radius-full);vertical-align:middle;transition:color .25s,background .25s}
.rf-card .form-group.rf-req > .form-label::after{content:'Required';color:var(--rfc);background:var(--rfc-soft)}
.rf-card .form-group.rf-done > .form-label::after{content:'Added';color:var(--accent);background:var(--accent-bg)}
.rf-card .form-group.rf-req.rf-done > .form-label::after{content:'Done';color:#fff;background:var(--success)}
.rf-card .form-group.rf-error > .form-label::after{content:'Missing';color:#fff;background:var(--danger)}
.rf-card .form-group.rf-shake{animation:rfShake .55s cubic-bezier(.36,.07,.19,.97) both}
.rf-card .form-input,.rf-card .form-select{transition:border-color .22s,box-shadow .22s,background .22s}
.rf-card .form-input:focus,.rf-card .form-select:focus{border-color:var(--rfc);box-shadow:0 0 0 3px var(--rfc-soft)}
.rf-card .form-group.rf-done .form-input,.rf-card .form-group.rf-done .form-select{border-color:color-mix(in srgb,var(--success) 48%,var(--border))}
.rf-card .form-group.rf-error .form-input,.rf-card .form-group.rf-error .form-select{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 5%,var(--bg-primary))}
.rf-card .form-group.rf-error .selection-card{border-color:color-mix(in srgb,var(--danger) 55%,var(--border))}
.rf-card .form-group.rf-error .form-label{color:var(--danger)}

/* --- Selection cards --- */
.rf-ripple{position:absolute;border-radius:50%;background:var(--rfc-soft);transform:scale(0);animation:rfRipple .6s ease-out forwards;pointer-events:none;z-index:0}
.rf-card .selection-card > *:not(.rf-ripple){position:relative;z-index:1}
.rf-card .selection-card:hover{border-color:var(--rfc);transform:translateY(-3px);box-shadow:0 7px 18px var(--rfc-soft)}
.rf-card .selection-card:focus-visible{outline:none;border-color:var(--rfc);box-shadow:0 0 0 3px var(--rfc-soft)}
.rf-card .selection-card.selected{border-color:var(--rfc);background:var(--rfc-soft);color:var(--rfc);box-shadow:0 0 0 3px color-mix(in srgb,var(--rfc) 10%,transparent)}
.rf-card .selection-card.selected::after{background:var(--rfc)}
.rf-card .selection-card .sel-label{font-weight:700}
.rf-card .selection-card .sel-desc{font-size:0.74rem;color:var(--text-muted);margin-top:3px;line-height:1.3;transition:color .25s}
.rf-card .selection-card.selected .sel-desc{color:var(--rfc);opacity:.85}

/* --- Location detect row --- */
@keyframes rfSweep{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes rfScanSpin{to{transform:rotate(360deg)}}
.loc-detect{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}
.loc-status{display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:600;color:var(--text-secondary);background:var(--bg-tertiary);border:1px solid var(--border);padding:5px 11px;border-radius:var(--radius-full);animation:rfFieldIn .3s ease both}
.loc-status i{color:var(--rfc,var(--accent))}
.loc-gps{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:var(--radius-full);border:1.5px solid var(--rfc-line,var(--border));background:var(--bg-secondary);color:var(--rfc,var(--accent));font-size:0.74rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:var(--shadow-xs);transition:transform .18s,box-shadow .25s,border-color .25s,background .25s,color .25s}
.loc-gps:hover{transform:translateY(-2px);border-color:var(--rfc,var(--accent));background:var(--rfc-soft,var(--accent-bg));box-shadow:0 5px 14px var(--rfc-soft,var(--accent-bg))}
.loc-gps:active{transform:scale(.95)}
.loc-gps:focus-visible{outline:2px solid var(--rfc,var(--accent));outline-offset:2px}
.loc-gps i{transition:transform .35s}
.loc-gps:hover i{transform:scale(1.18)}
.loc-gps.scanning{color:#fff;background:var(--gradient-info);border-color:transparent}
.loc-gps.scanning i{animation:rfScanSpin 1.1s linear infinite}
.loc-gps.scanning::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:rfSweep 1.3s linear infinite}

/* --- Submit button --- */
.rf-submit-wrap{margin-top:6px}
.rf-submit{position:relative;overflow:hidden;min-height:53px;padding:0 18px;border-radius:var(--radius-md);font-size:.9rem;font-weight:800;letter-spacing:.05px;color:#fff;box-shadow:0 7px 20px var(--rfc-soft),inset 0 1px 0 rgba(255,255,255,.24)}
.rf-submit.rf-water{background:linear-gradient(135deg,#5a9dff,#1a5fd0)}
.rf-submit.rf-dengue{background:linear-gradient(135deg,#f2685b,#bf2a20)}
.rf-submit.rf-garbage{background:linear-gradient(135deg,#ffc93c,#d68600)}
.rf-submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--rfc) 34%,transparent)}
.rf-submit:active{transform:translateY(0) scale(.99)}
.rf-submit:focus-visible{outline:3px solid var(--rfc-soft);outline-offset:3px}
.rf-btn-face,.rf-btn-busy,.rf-btn-done{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;transition:opacity .3s,transform .3s}
.rf-btn-busy,.rf-btn-done{position:absolute;inset:0;opacity:0;transform:translateY(11px);pointer-events:none}
.rf-btn-icon{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:9px;background:rgba(255,255,255,.22);font-size:.85rem;transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.rf-submit:hover .rf-btn-icon{transform:translateX(3px) rotate(-9deg) scale(1.08)}
.rf-btn-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rf-btn-badge{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:0.74rem;font-weight:800;padding:4px 11px;border-radius:var(--radius-full);background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.3);white-space:nowrap}
.rf-btn-sweep{position:absolute;top:0;left:0;width:46%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-120%) skewX(-18deg);animation:rfSweep 3.6s ease-in-out infinite;pointer-events:none}
.rf-submit.is-busy{pointer-events:none;filter:saturate(.7) brightness(.97)}
.rf-submit.is-busy .rf-btn-face{opacity:0;transform:translateY(-11px)}
.rf-submit.is-busy .rf-btn-busy{opacity:1;transform:none}
.rf-submit.is-busy .rf-btn-sweep{animation-duration:.95s}
@keyframes rfDonePop{0%{transform:scale(.9)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
.rf-submit.is-done{background:linear-gradient(135deg,#43c96f,#1d8a47);box-shadow:0 10px 26px rgba(52,168,83,.38)}
.rf-submit.is-done .rf-btn-face{opacity:0;transform:translateY(-11px)}
.rf-submit.is-done .rf-btn-done{opacity:1;transform:none;animation:rfDonePop .5s cubic-bezier(.34,1.56,.64,1) both}
.rf-submit.is-done .rf-btn-sweep{opacity:0}
.rf-submit.rf-blocked{animation:rfShake .5s cubic-bezier(.36,.07,.19,.97) both}
.rf-hint{display:none;align-items:flex-start;gap:8px;margin-top:11px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--danger-light);border:1px solid rgba(234,67,53,.3);font-size:0.74rem;line-height:1.5;color:var(--text-secondary)}
.rf-hint.show{display:flex;animation:rfFieldIn .35s cubic-bezier(.22,1,.36,1) both}
.rf-hint i{color:var(--danger);margin-top:2px}
.rf-after{display:grid;gap:7px;margin-top:14px;padding-top:13px;border-top:1px dashed var(--border)}
.rf-after span{display:flex;align-items:flex-start;gap:10px;font-size:0.74rem;color:var(--text-muted);line-height:1.5}
.rf-after b{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:0.74rem;font-weight:800;color:var(--rfc);background:var(--rfc-soft);margin-top:1px}
.rf-after code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.74rem;background:var(--bg-tertiary);padding:1px 6px;border-radius:5px;color:var(--text-secondary)}

/* --- Dengue alert card + garbage banner --- */
@keyframes rfMosquito{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-15px,9px) rotate(-10deg)}50%{transform:translate(7px,-7px) rotate(8deg)}75%{transform:translate(-7px,-11px) rotate(-6deg)}}
.rf-alert{position:relative;overflow:hidden}
.rf-alert h4{display:flex;align-items:center;gap:8px}
.rf-alert p{padding-right:44px}
.rf-alert-mosquito{position:absolute;right:14px;top:12px;font-size:1.4rem;opacity:.55;animation:rfMosquito 7.5s ease-in-out infinite;pointer-events:none}
.rf-banner p b{color:var(--text-primary)}
.weather-widget .weather-icon{animation:rfGlyphFloat 4.2s ease-in-out infinite}

/* --- Dark mode --- */
[data-theme="dark"] .rf-card::before{opacity:.8}
[data-theme="dark"] .rf-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--rfc) 20%,var(--bg-secondary)),var(--bg-secondary) 80%)}
[data-theme="dark"] .rf-hero-pts{background:var(--bg-tertiary)}
[data-theme="dark"] .rf-track-bar{background:var(--bg-quaternary);box-shadow:inset 0 1px 3px rgba(0,0,0,.55)}
[data-theme="dark"] .rf-pts-now{background:var(--bg-tertiary)}
[data-theme="dark"] .rf-tube{background:var(--bg-quaternary);border-color:var(--border)}
[data-theme="dark"] .rf-meter{background:var(--bg-secondary)}
[data-theme="dark"] .rf-meter-steps span{background:var(--bg-tertiary)}
[data-theme="dark"] .loc-gps{background:var(--bg-tertiary)}
[data-theme="dark"] .loc-status{background:var(--bg-tertiary)}
[data-theme="dark"] .rf-submit{box-shadow:0 7px 20px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
[data-theme="dark"] .rf-suggest{color:var(--text-secondary)}
[data-theme="dark"] .rf-suggest i{color:var(--warning)}
[data-theme="dark"] .rf-card .form-group > .form-label::after{background:var(--bg-tertiary)}
[data-theme="dark"] .rf-card .selection-card .sel-desc{color:var(--text-muted)}

/* --- Responsive --- */
@media(max-width:640px){
  .rf-hero{gap:11px;padding:14px}
  .rf-hero-art{width:46px;height:46px}
  .rf-hero-glyph{width:40px;height:40px;font-size:1.05rem;border-radius:13px}
  .rf-hero-title{font-size:.94rem}
  .rf-hero-pts{padding:6px 9px 5px}
  .rf-hero-pts b{font-size:.94rem}
  .rf-meter{gap:12px;padding:12px}
  .rf-tube{width:36px;height:80px}
  .rf-bars{width:58px;height:54px;gap:4px}
  .rf-pile-viz{width:58px;font-size:1.2rem}
  .rf-submit{min-height:49px;font-size:.84rem;padding:0 14px;gap:7px}
  .rf-btn-badge{padding:3px 9px;font-size:0.74rem}
  .rf-track-foot{flex-direction:column;align-items:flex-start;gap:7px}
}
/* Narrow phones: let the submit label wrap instead of ellipsizing away. */
@media (max-width: 480px){
  .rf-submit{height:auto;min-height:49px;padding:9px 14px}
  .rf-btn-face{flex-wrap:wrap;gap:8px}
  .rf-btn-txt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;text-align:center}
}

/* --- Reduced motion --- */
html.reduce-motion .rf-hero-glyph,
html.reduce-motion .rf-hero-ring,
html.reduce-motion .rf-live,
html.reduce-motion .rf-hero-pts i,
html.reduce-motion .rf-track-fill::after,
html.reduce-motion .rf-wave,
html.reduce-motion .rf-btn-sweep,
html.reduce-motion .rf-alert-mosquito,
html.reduce-motion .weather-widget .weather-icon,
html.reduce-motion .rf-suggest i,
html.reduce-motion .loc-gps.scanning::after,
html.reduce-motion .loc-gps.scanning i,
html.reduce-motion .rf-risk[data-level="3"] .rf-bars i{animation:none!important}
html.reduce-motion .rf-enter .rf-field,
html.reduce-motion .rf-card .form-group.rf-shake,
html.reduce-motion .rf-submit.rf-blocked,
html.reduce-motion .rf-meter-steps span.on,
html.reduce-motion .rf-pile-viz span.on{animation:none!important}
html.reduce-motion .rf-track-fill,
html.reduce-motion .rf-tube-fill,
html.reduce-motion .rf-bars i,
html.reduce-motion .rf-pile-viz span{transition-duration:.01ms}

/* ============ APP FOOTER — DEVELOPER CREDIT ============ */
.app-footer{position:relative;overflow:hidden;margin:26px 0 4px;padding:20px 18px 15px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:radial-gradient(120% 150% at 100% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%),var(--bg-secondary);
  box-shadow:var(--shadow-xs);translate:0 16px;
  transition:translate .65s cubic-bezier(.22,1,.36,1),box-shadow var(--transition)}
.app-footer.af-in{translate:0 0}
.app-footer:hover{box-shadow:var(--shadow-sm)}

.af-watermark{position:absolute;right:-10px;bottom:-42px;font-size:9.5rem;font-weight:900;line-height:1;letter-spacing:-.07em;
  pointer-events:none;user-select:none;opacity:.55;
  background:linear-gradient(158deg,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.af-hairline{position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:.6;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:38% 100%;background-repeat:no-repeat;
  animation:afHairline 6s cubic-bezier(.55,0,.45,1) infinite}
@keyframes afHairline{0%{background-position:-38% 0}55%,100%{background-position:138% 0}}

.af-head{position:relative;display:flex;align-items:center;gap:13px}
.af-mark{position:relative;flex:none;width:48px;height:48px;padding:0;overflow:hidden;border-radius:15px;cursor:pointer;
  display:grid;place-items:center;font-family:inherit;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border));
  background:linear-gradient(150deg,var(--accent-bg),var(--bg-tertiary));
  transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast)}
.af-mark:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 65%,transparent)}
.af-mark:active{transform:scale(.93)}
.af-mark:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-bg)}
.af-mark-ring{position:absolute;inset:-45%;opacity:0;transition:opacity .3s ease;animation:afSpin 3.6s linear infinite;animation-play-state:paused;
  background:conic-gradient(from 0deg,transparent 0 58%,color-mix(in srgb,var(--accent) 60%,transparent) 76%,transparent 94%)}
.af-mark:hover .af-mark-ring,.af-mark.copied .af-mark-ring{opacity:1;animation-play-state:running}
.app-footer:not(.af-visible) :is(.af-hairline,.af-name,.af-mark-ring){animation-play-state:paused}
@keyframes afSpin{to{rotate:360deg}}
.af-mono{position:relative;z-index:1;font-size:1.02rem;font-weight:900;letter-spacing:.6px}
.af-mark-copy{position:absolute;right:5px;bottom:4px;z-index:1;font-size:0.74rem;opacity:0;transition:var(--transition-fast)}
.af-mark:hover .af-mark-copy{opacity:.65}
.af-mark.copied{background:var(--gradient-success);border-color:transparent;color:#fff}
.af-mark.copied .af-mono{animation:afCopiedPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes afCopiedPop{0%{scale:1}45%{scale:1.24}100%{scale:1}}

.af-head-txt{min-width:0}
.af-kicker{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:0.74rem;font-weight:800;
  letter-spacing:.95px;text-transform:uppercase;color:var(--text-muted)}
.af-flag{font-size:.8rem;letter-spacing:0}
.af-credit{font-size:.85rem;font-weight:600;line-height:1.35;color:var(--text-secondary)}
.af-name{font-size:.95rem;font-weight:800;letter-spacing:-.2px;
  background:linear-gradient(92deg,var(--accent),#00a878,var(--info),var(--accent));background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:afNameShift 8s linear infinite}
@keyframes afNameShift{to{background-position:280% 0}}

.af-chips{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.af-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-full);
  border:1px solid var(--border);background:var(--bg-tertiary);
  font-size:0.74rem;font-weight:700;color:var(--text-muted);transition:var(--transition-fast)}
.af-chip i{font-size:0.74rem;color:var(--accent)}
.af-chip:hover{color:var(--text-primary);border-color:color-mix(in srgb,var(--accent) 38%,var(--border));translate:0 -2px}
.af-chip-safe{color:var(--success);background:var(--success-light);border-color:color-mix(in srgb,var(--success) 28%,transparent)}
.af-chip-safe i{color:var(--success)}

.af-actions{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.af-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--radius-full);border:1.5px solid var(--border);
  background:var(--bg-primary);color:var(--text-secondary);font-family:inherit;font-size:0.74rem;font-weight:700;
  text-decoration:none;cursor:pointer;transition:var(--transition-fast)}
.af-btn::after{content:'';position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,color-mix(in srgb,var(--accent) 26%,transparent) 50%,transparent 66%);
  background-size:250% 100%;background-position:130% 0;transition:opacity .25s ease}
.af-btn i{font-size:.78rem}
.af-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg);
  translate:0 -2px;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.af-btn:hover::after{opacity:1;animation:afBtnSweep 1.1s ease}
.af-btn:active{scale:.97}
.af-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-bg)}
@keyframes afBtnSweep{from{background-position:130% 0}to{background-position:-130% 0}}
.af-top{margin-left:auto;width:35px;padding:8px 0;justify-content:center}

.af-legal{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--border);font-size:0.74rem;line-height:1.6;color:var(--text-muted)}
.af-legal a{color:var(--text-muted);font-weight:600;text-decoration:none;transition:var(--transition-fast)}
.af-legal a:hover{color:var(--accent)}
.af-legal-dot{opacity:.45}

.auth-footer-dev{margin-top:6px;font-size:0.74rem;color:rgba(255,255,255,.72);letter-spacing:.2px}
.auth-footer-dev strong{color:#fff;font-weight:700}

[data-theme="dark"] .app-footer{background:radial-gradient(120% 150% at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%),var(--bg-secondary)}
[data-theme="dark"] .af-btn{background:var(--bg-tertiary)}
[data-theme="dark"] .af-chip{background:var(--bg-tertiary)}
[data-theme="dark"] .af-watermark{opacity:.8}
[data-theme="dark"] .af-name{background-image:linear-gradient(92deg,var(--accent),#5eead4,var(--info),var(--accent))}

@media(max-width:640px){
  .app-footer{margin-top:20px;padding:16px 14px 13px;border-radius:var(--radius-md)}
  .af-watermark{font-size:6.5rem;bottom:-28px;right:-6px}
  .af-mark{width:42px;height:42px;border-radius:13px}
  .af-mono{font-size:.92rem}
  .af-credit{font-size:.8rem}
  .af-name{font-size:.88rem}
  .af-btn{flex:1 1 auto;justify-content:center;padding:8px 11px}
  .af-top{margin-left:0;flex:0 0 auto;width:35px}
}

html.reduce-motion .app-footer,html.reduce-motion .app-footer *{animation:none!important;transition-duration:1e-6s!important}
html.reduce-motion .app-footer{translate:0 0}

/* ---------- EXPORT DIALOG ---------- */
.exp-box{position:relative;max-width:580px;padding:0;overflow:hidden;display:flex;flex-direction:column;max-height:min(92vh,760px)}
.exp-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--accent),#00a878,var(--info),var(--accent));background-size:220% 100%;
  animation:expBar 7s linear infinite}
@keyframes expBar{to{background-position:220% 0}}
.exp-box .modal-head{margin-bottom:0;padding:22px 24px 14px;border-bottom:none;
  background:radial-gradient(120% 190% at 0% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%)}
.exp-box .modal-head h2{display:flex;align-items:center;gap:10px;font-size:1.12rem}
.exp-box .modal-head h2 i{color:var(--accent);font-size:1rem}
.exp-sub{padding:0 24px 14px;margin:0;font-size:.82rem;line-height:1.6;color:var(--text-secondary);
  border-bottom:1px solid var(--border)}
.exp-body{padding:18px 24px 4px;overflow-y:auto;flex:1;scrollbar-width:thin}
.exp-body::-webkit-scrollbar{width:8px}
.exp-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
.exp-group{margin-bottom:20px}
.exp-label{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:0.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.9px;color:var(--text-muted)}
.exp-all{margin-left:auto;padding:2px 6px;background:none;border:none;border-radius:var(--radius-xs);
  font-family:inherit;font-size:0.74rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--accent);cursor:pointer;transition:background var(--transition-fast)}
.exp-all:hover{background:var(--accent-bg)}
.exp-chips{display:flex;flex-wrap:wrap;gap:7px}
.exp-chips .chip{display:inline-flex;align-items:center;font-family:inherit}
.exp-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;flex:none}
.exp-dates{display:none;margin-top:10px}
.exp-dates.show{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exp-date{display:flex;flex-direction:column;gap:5px;font-size:0.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted)}
.exp-date input{padding:9px 11px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg-tertiary);color:var(--text-primary);font-family:inherit;font-size:.82rem;
  transition:border-color var(--transition-fast),background var(--transition-fast)}
.exp-date input:focus{outline:none;border-color:var(--accent);background:var(--bg-secondary)}
.exp-secs{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.exp-sec{display:flex;align-items:flex-start;gap:11px;width:100%;padding:11px 13px;text-align:left;
  font-family:inherit;cursor:pointer;background:var(--bg-secondary);border:none;
  border-bottom:1px solid var(--border);transition:background var(--transition-fast)}
.exp-sec:last-child{border-bottom:none}
.exp-sec:hover{background:var(--bg-tertiary)}
.exp-sec-sw{position:relative;width:34px;height:19px;border-radius:99px;flex:none;margin-top:1px;
  background:var(--border);transition:background .22s ease}
.exp-sec-knob{position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:translate .24s cubic-bezier(.22,1,.36,1)}
.exp-sec.on .exp-sec-sw{background:var(--gradient-accent)}
.exp-sec.on .exp-sec-knob{translate:15px 0}
.exp-sec-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.exp-sec-txt strong{font-size:.82rem;font-weight:700;color:var(--text-secondary);transition:color var(--transition-fast)}
.exp-sec.on .exp-sec-txt strong{color:var(--text-primary)}
.exp-sec-txt small{font-size:0.74rem;line-height:1.45;color:var(--text-muted)}
.exp-sec:not(.on){opacity:.62}
.exp-foot{display:flex;flex-direction:column;gap:11px;padding:14px 24px 18px;
  border-top:1px solid var(--border);background:var(--bg-secondary)}
.exp-match{font-size:.8rem;color:var(--text-secondary)}
.exp-match b{margin-right:5px;font-size:1.02rem;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.exp-empty .exp-match{color:var(--warning)}
.exp-empty .exp-match b{color:var(--warning)}
.exp-btns{display:flex;gap:8px}
.exp-dl{flex:1;padding:10px 12px;font-size:.8rem}
.exp-btns .btn-ghost{border:1.5px solid var(--border)}
.exp-dl[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.exp-file{display:flex;align-items:center;gap:7px;font-size:0.74rem;color:var(--text-muted);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.exp-file i{color:var(--accent)}
[data-theme="dark"] .exp-sec-knob{background:#e8f6f1}
[data-theme="dark"] .exp-btns .btn-ghost{border-color:var(--border)}
@media(max-width:640px){
  .exp-box{max-height:94vh}
  .exp-box .modal-head,.exp-sub,.exp-body,.exp-foot{padding-left:16px;padding-right:16px}
  .exp-btns{flex-wrap:wrap}
  .exp-dl{flex:1 1 44%}
  #expPdf{flex:1 1 100%}
  .exp-dates.show{grid-template-columns:1fr}
}
html.reduce-motion .exp-box::before,html.reduce-motion .exp-box *{animation:none!important;transition-duration:1e-6s!important}

/* ============================================================
   AUTH v2 — sliding tabs, rich buttons, live validation,
   success animation, avatar photos
   ============================================================ */

/* --- Sliding tab indicator (driven by data-active on .auth-tabs) --- */
.auth-tabs{position:relative;isolation:isolate}
.auth-tabs::before{content:'';position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);background:var(--bg-secondary);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);transition:transform .4s cubic-bezier(.34,1.3,.5,1)}
.auth-tabs[data-active="register"]::before{transform:translateX(calc(100% + 4px))}
.auth-tab{position:relative;z-index:1}
.auth-tab.active{background:transparent;box-shadow:none}
.auth-tab:focus-visible,.auth-social-btn:focus-visible,.auth-submit:focus-visible,
.auth-anonymous-btn:focus-visible,.password-toggle:focus-visible,.auth-remember a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Social buttons: brand icons, shine, press, loading, "Last used" --- */
.auth-social-btn{position:relative;overflow:hidden;isolation:isolate}
.auth-social-btn .auth-brand-ico{flex-shrink:0}
.auth-social-btn::after,.auth-submit::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.auth-submit::after{z-index:0}
.auth-social-btn:hover:not(:disabled)::after,.auth-submit:hover:not(:disabled)::after{transform:translateX(120%)}
.auth-social-btn:active:not(:disabled){transform:translateY(0) scale(.97)}
.auth-social-btn:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}
.auth-social-btn.is-loading{opacity:1;cursor:progress;border-color:var(--accent);background:var(--accent-bg);color:var(--text-primary)}
.auth-last-used{position:absolute;top:0;right:0;font-size:0.74rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px 2px 8px;border-radius:0 0 0 8px;background:var(--accent);color:#fff;animation:authFieldIn .4s both}
[data-theme="dark"] .auth-last-used{color:#032c20}

/* --- Primary submit: loading + locked states --- */
.auth-submit{position:relative;overflow:hidden}
.auth-submit>*{position:relative;z-index:1}
.auth-submit:active:not(:disabled){transform:translateY(0) scale(.985)}
.auth-submit:disabled{cursor:not-allowed;transform:none}
.auth-submit.is-loading{cursor:progress;opacity:.92;box-shadow:0 4px 14px rgba(0,168,107,.22)}
.auth-submit.is-locked{background:var(--bg-tertiary);color:var(--text-muted);box-shadow:none;border:1.5px solid var(--border)}
.auth-spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:authSpin .7s linear infinite;flex-shrink:0}
@keyframes authSpin{to{transform:rotate(360deg)}}

/* --- Live field validation --- */
.auth-input-wrap.is-valid .auth-input{border-color:var(--success)}
.auth-input-wrap.is-valid .auth-input:focus{box-shadow:0 0 0 3px var(--success-light)}
.auth-input-wrap.is-invalid .auth-input{border-color:var(--danger)}
.auth-input-wrap.is-invalid .auth-input:focus{box-shadow:0 0 0 3px var(--danger-light)}
.auth-input-wrap.shake{animation:shake .35s ease}
.auth-hint{font-size:0.74rem;margin-top:5px;line-height:1.35;color:var(--text-muted)}
.auth-hint:empty{display:none}
.auth-hint.bad{color:var(--danger)}
.auth-hint.ok{color:var(--success)}
.auth-caps{display:none;align-items:center;gap:6px;margin-top:6px;font-size:0.74rem;font-weight:600;color:#b06c00}
[data-theme="dark"] .auth-caps{color:var(--warning)}
.auth-caps.show{display:flex;animation:authFieldIn .25s both}

/* --- Password rule chips --- */
.auth-rules{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.auth-rules span{display:inline-flex;align-items:center;gap:5px;font-size:0.74rem;font-weight:600;padding:3px 9px;border-radius:var(--radius-full);background:var(--bg-tertiary);color:var(--text-muted);transition:background .25s ease,color .25s ease,transform .25s ease}
.auth-rules span i{font-size:0.74rem;opacity:.3;transition:opacity .25s ease,transform .25s ease}
.auth-rules span.met{background:var(--success-light);color:var(--success)}
.auth-rules span.met i{opacity:1;transform:scale(1.2)}

/* --- Success overlay (drawn over the card before it closes) --- */
.auth-success-overlay{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:24px;text-align:center;background:color-mix(in srgb,var(--bg-secondary) 95%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:authOverlayIn .3s ease both}
.auth-success-check{width:88px;height:88px;animation:ascPop .6s .45s cubic-bezier(.34,1.56,.64,1) both}
.auth-success-check svg{width:100%;height:100%;overflow:visible}
.asc-circle{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:ascDraw .6s .05s cubic-bezier(.65,0,.45,1) forwards}
.asc-tick{stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:ascDraw .35s .5s ease-out forwards}
.auth-success-overlay h3{margin:12px 0 0;font-size:1.45rem;font-weight:800;letter-spacing:-.3px;animation:authFieldIn .45s .4s both}
.auth-success-overlay p{margin:0;font-size:.9rem;color:var(--text-muted);animation:authFieldIn .45s .5s both}
@keyframes ascDraw{to{stroke-dashoffset:0}}
@keyframes ascPop{from{transform:scale(.8)}to{transform:scale(1)}}
@keyframes authOverlayIn{from{opacity:0}to{opacity:1}}

/* --- Profile photos from Google / GitHub in avatars --- */
.user-avatar.has-photo,.sidebar-user-avatar.has-photo,#profileAvatar.has-photo{background-repeat:no-repeat;background-color:var(--bg-tertiary)}

/* --- Motion preferences --- */
@media (prefers-reduced-motion:reduce){
  .auth-tabs::before{transition:none}
  .auth-social-btn::after,.auth-submit::after{display:none}
  .auth-spinner{animation-duration:1.6s}
  .auth-success-check,.asc-circle,.asc-tick,.auth-success-overlay,.auth-success-overlay h3,.auth-success-overlay p{animation-duration:.001ms!important;animation-delay:0s!important}
}
html.reduce-motion .auth-tabs::before{transition:none}
html.reduce-motion .auth-social-btn::after,html.reduce-motion .auth-submit::after{display:none}
html.reduce-motion .auth-spinner{animation-duration:1.6s!important}

/* ===== SHARED BACKEND: upload progress pill + import row ===== */
.cloud-progress{position:fixed;left:50%;bottom:24px;transform:translate(-50%,24px);z-index:99998;display:flex;align-items:center;gap:12px;min-width:260px;max-width:calc(100vw - 32px);padding:12px 18px;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-md,12px);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;font-size:.85rem}
.cloud-progress.show{opacity:1;transform:translate(-50%,0)}
.cloud-progress .auth-spinner{color:var(--accent);width:20px;height:20px}
.cloud-progress > div{flex:1;min-width:0}
.cloud-progress strong{display:block;font-weight:600;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-bar{height:5px;border-radius:99px;background:var(--border);overflow:hidden}
.cp-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width .3s ease}
.import-local-row{margin:4px 0 14px}
html.reduce-motion .cloud-progress,html.reduce-motion .cp-bar i{transition:none}