/* ===== LocalPulse App CSS v1 ===== */

/* ===== CSS Variables ===== */
:root{--bg:#FDF8F0;--bg2:#F8FAFC;--card:rgba(255,255,255,.75);--glass:rgba(255,255,255,.15);--text:#1E293B;--text2:#475569;--mut:#94A3B8;--grad:linear-gradient(135deg,#FF6B35,#00B4D8);--grad-s:linear-gradient(135deg,#FF6B35,#FF8C5A);--grad-o:linear-gradient(135deg,#00B4D8,#33C9E8);--r:20px;--rs:16px;--sh:0 2px 16px rgba(0,0,0,.06);--shg:0 4px 24px rgba(0,0,0,.1);--blur:16px;--touch:48px;--facts-bg:rgba(243,244,246,0.8);--facts-border:rgba(0,0,0,0.1)}
.dark{--bg:#0F172A;--bg2:#1E293B;--card:rgba(30,41,59,.55);--glass:rgba(30,41,59,.35);--text:#F1F5F9;--text2:#CBD5E1;--mut:#64748B;--sh:0 2px 16px rgba(0,0,0,.2);--shg:0 4px 24px rgba(0,0,0,.3);--facts-bg:rgba(15,23,42,0.6);--facts-border:rgba(255,255,255,0.08)}

/* Component Visibility */
@media (min-width:768px){.component-bottom{display:none!important}}
@media (max-width:767px){.component-header{display:none!important}}

/* ===== Reset ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:16px;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s,color .3s}
@media (max-width:767px){body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}}

/* ===== Typography ===== */
h1,h2,h3,h4,h5,h6{font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.subheading{font-family:'Inter',system-ui,sans-serif;font-weight:600}

/* ===== Components ===== */
.tg{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gl{background:var(--glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid rgba(255,255,255,.18)}
.dark .gl{border-color:rgba(255,255,255,.08)}
.cd{background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.06);box-shadow:var(--sh)}
.dark .cd{border-color:rgba(255,255,255,.06);box-shadow:var(--shg)}

/* ===== Animations ===== */
@keyframes pl{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.6}}
.pl{animation:pl 2s ease-in-out infinite}
@keyframes fu{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.a0{animation:fu .6s ease-out forwards}.a1{animation:fu .6s ease-out .15s forwards;opacity:0}.a2{animation:fu .6s ease-out .3s forwards;opacity:0}

/* ===== Facts adaptive colors ===== */
:root:not(.dark) .text-facts-title{color:#1E293B}
:root.dark .text-facts-title{color:#F1F5F9}
:root:not(.dark) .text-facts-value{color:#1E293B}
:root.dark .text-facts-value{color:#F1F5F9}
:root:not(.dark) .text-facts-label{color:rgba(0,0,0,0.6)}
:root.dark .text-facts-label{color:rgba(255,255,255,0.6)}
:root:not(.dark) .text-facts-refresh{color:rgba(0,0,0,0.4)}
:root.dark .text-facts-refresh{color:rgba(255,255,255,0.4)}
:root:not(.dark) .text-facts-refresh:hover{color:rgba(0,0,0,0.7)}
:root.dark .text-facts-refresh:hover{color:rgba(255,255,255,0.8)}

/* ===== Utilities ===== */
.hs::-webkit-scrollbar{display:none}.hs{scrollbar-width:none;-ms-overflow-style:none}
.lc1{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.lc2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hov{background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.05) 100%)}

/* ===== Carousel (Touch + Mouse Drag) ===== */
.cc{scroll-behavior:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom;cursor:grab;-webkit-user-select:none;user-select:none}
.cc.dragging{cursor:grabbing;touch-action:none}
.cc>*{scroll-snap-align:start}
.cc.dragging>*{touch-action:none}

/* ===== Carousel arrows ===== */
.ca{position:absolute;top:50%;transform:translateY(-50%);z-index:10}.ca-l{left:2px}.ca-r{right:2px}

/* ===== Photo modal navigation ===== */
.pn{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:20px;cursor:pointer;transition:background .2s;min-height:44px}
.pn:hover{background:rgba(0,0,0,.7)}
.pp{left:8px}.pnx{right:8px}
@media(max-width:767px){.pn,.pnx{display:none}}

/* ===== Fade-edges ===== */
.fe{position:relative}
.fe::after{content:'';position:absolute;right:0;top:0;bottom:0;width:40px;pointer-events:none;background:linear-gradient(to right,transparent,var(--bg));border-radius:0 var(--r) var(--r) 0}

/* ===== Search ===== */
.si{position:relative}
.si input{width:100%;padding:1rem 1rem 1rem 3.25rem;border-radius:var(--r);background:rgba(255,255,255,.95);border:2px solid transparent;font-family:'Inter',system-ui,sans-serif;font-size:16px;color:var(--text);box-shadow:var(--shg);transition:border-color .2s}
.dark .si input{background:rgba(30,41,59,.85);color:var(--text)}
.si input:focus{outline:none;border-color:#FF6B35}
.si input::placeholder{color:var(--mut);font-size:15px}
.si .ic{position:absolute;left:1.125rem;top:50%;transform:translateY(-50%);font-size:1.25rem;pointer-events:none}
.si{cursor:pointer}
.si:hover{opacity:.9}

/* ===== Weather ===== */
.wmain{display:flex;align-items:center;gap:1rem}
@media(min-width:640px){.wmain{gap:1.5rem}}
.wparams{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(128,128,128,.12)}
.wparam{display:flex;align-items:center;gap:.375rem;font-size:13px;color:rgba(255,255,255,.6)}
.dark .wparam{color:rgba(255,255,255,.5)}

/* Forecast */
.fc{display:flex;gap:.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-top:.75rem;border-top:1px solid rgba(128,128,128,.12);margin-top:.75rem}
.fc::-webkit-scrollbar{display:none}
.fcd{flex:0 0 64px;scroll-snap-align:center;text-align:center;padding:.5rem .25rem;border-radius:var(--rs);background:rgba(128,128,128,.06)}
.fcd .dn{font-size:11px;opacity:.5;margin-bottom:.25rem;font-family:'Inter',system-ui,sans-serif;font-weight:500}
.fcd .di{font-size:20px;margin-bottom:.125rem}
.fcd .dt{font-size:13px;font-weight:700;font-family:'Manrope',system-ui,sans-serif}
.fcd .dr{font-size:10px;color:rgba(128,128,128,.6);margin-top:.125rem}

/* ===== Photo modal ===== */
.pm{display:none;position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:100;align-items:center;justify-content:center;padding:1rem;padding-bottom:5rem}
.pm.on{display:flex}
.pmc{position:relative;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;background:#1f2937;border-radius:1rem;border:1px solid #374151;touch-action:pan-y}
.light .pmc{background:#f3f4f6;border-color:#d1d5db}
.pmi{width:100%;max-height:70vh;object-fit:contain;border-radius:1rem 1rem 0 0}

/* ===== Menu ===== */
#mm{transition:opacity .3s,visibility .3s}
#mm.cl{opacity:0;visibility:hidden;pointer-events:none}
#mmp{transition:transform .3s ease}
#mm.cl #mmp{transform:translateX(-100%)}

/* ===== Sub navigation ===== */
.sub-nav{background:var(--bg2);border-bottom:1px solid rgba(128,128,128,.1)}
.dark .sub-nav{background:var(--bg2);border-color:rgba(255,255,255,.06)}
.sub-nav a{color:var(--text2);text-decoration:none;font-size:14px;font-family:'Inter',system-ui,sans-serif;font-weight:500;transition:color .2s;padding:.5rem 0;white-space:nowrap;flex-shrink:0}
.sub-nav a:hover{color:var(--text)}
.sub-nav a.active-link{font-weight:700}

/* ===== PWA ===== */
#pwa{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:90;max-width:400px;margin:0 auto}
@media(min-width:640px){#pwa{left:auto;right:1rem;max-width:360px}}
.pwc{display:flex;align-items:center;gap:.75rem;background:var(--card);backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.08);border-radius:var(--r);padding:.875rem 1rem;box-shadow:var(--shg)}
.dark .pwc{border-color:rgba(255,255,255,.08)}
.pwi{font-size:28px;flex-shrink:0}
.pwt h3{font-family:'Manrope',system-ui,sans-serif;font-size:14px;font-weight:700;line-height:1.2}.pwt p{font-size:12px;opacity:.6;font-family:'Inter',system-ui,sans-serif}
.pwa2{display:flex;gap:.5rem;margin-left:auto;flex-shrink:0}
.pwb{min-height:var(--touch);min-width:44px;padding:.5rem .75rem;border-radius:var(--rs);font-size:12px;font-weight:600;border:none;cursor:pointer;transition:.2s;font-family:'Inter',system-ui,sans-serif}
.pwb.ok{background:var(--grad);color:#fff}.pwb.no{background:rgba(0,0,0,.06);color:var(--text2)}.dark .pwb.no{background:rgba(255,255,255,.1)}

/* ===== Game ===== */
.gc{aspect-ratio:1;cursor:pointer;user-select:none;border-radius:var(--rs);perspective:600px}
.gc:active .gc-inner{transform:scale(.95)}

/* ===== Accessibility ===== */
:focus-visible{outline:2px solid #FF6B35;outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ===== Facts bright border ===== */
@media (prefers-color-scheme:light){#factsBlock{border-color:rgba(255,255,255,.25)!important;box-shadow:0 8px 32px rgba(0,0,0,.12)}}

/* ===== Telegram safe-area ===== */
.tg-safe-area{padding-top:env(safe-area-inset-top)}
.tg-safe-area-bottom{padding-bottom:env(safe-area-inset-bottom)}

/* ===== Search Modal ===== */
body.search-open{overflow:hidden!important;position:fixed!important;width:100%!important}
.search-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.search-overlay.active{opacity:1;visibility:visible}
.search-modal{position:fixed;inset:0;z-index:100000;background:var(--bg,#FDF8F0);display:flex;flex-direction:column;height:100vh;height:100dvh;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,.72,0,1);will-change:transform}
.search-overlay.active .search-modal{transform:translateY(0)}
.search-modal__header{position:sticky;top:0;z-index:10;background:var(--bg,#FDF8F0);padding:10px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(128,128,128,.12);flex-shrink:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg,#FDF8F0) 85%,transparent)}
.search-modal__back,.search-modal__clear{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text,#1E293B);cursor:pointer;border-radius:12px;transition:background .15s}
.search-modal__back:hover,.search-modal__clear:hover{background:rgba(128,128,128,.1)}
.search-modal__back svg,.search-modal__clear svg{pointer-events:none}
.search-modal__input{flex:1;min-height:44px;padding:10px 14px;border:2px solid rgba(128,128,128,.15);border-radius:12px;background:rgba(128,128,128,.04);color:var(--text,#1E293B);font-size:16px;font-family:'Inter',system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.search-modal__input:focus{outline:none;border-color:#FF6B35;background:rgba(255,107,53,.04)}
.search-modal__input::placeholder{color:rgba(128,128,128,.5)}
.search-modal__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 32px;max-width:800px;margin:0 auto;width:100%}
.search-section{margin-bottom:28px}
.search-section__title{font-family:'Manrope',system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px;opacity:.55;margin-bottom:10px;color:var(--text,#1E293B)}
.search-towns{display:flex;flex-wrap:wrap;gap:8px}
.town-chip{display:inline-flex;align-items:center;padding:9px 16px;border-radius:24px;background:rgba(128,128,128,.06);border:1.5px solid rgba(128,128,128,.12);cursor:pointer;font-size:14px;color:var(--text,#1E293B);transition:all .15s;min-height:40px;user-select:none;font-family:'Inter',system-ui,sans-serif;white-space:nowrap}
.town-chip:has(input:checked),.town-chip.selected{background:#FF6B35;color:#fff;border-color:#FF6B35}
.town-chip input{position:absolute;opacity:0;pointer-events:none}
.town-chip--all{font-weight:600}
.search-popular{display:flex;flex-direction:column;gap:6px}
.search-popular__item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:14px;background:rgba(128,128,128,.05);border:1px solid transparent;font-size:15px;color:var(--text,#1E293B);cursor:pointer;transition:background .15s,border-color .15s;min-height:52px;font-family:'Inter',system-ui,sans-serif;text-align:left}
.search-popular__item:hover{background:rgba(128,128,128,.1);border-color:rgba(128,128,128,.12)}
.search-popular__item:active{background:rgba(128,128,128,.15)}
.search-popular__icon{font-size:22px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(128,128,128,.07);border-radius:10px}
.search-popular__label{line-height:1.3}
.search-results__group{margin-bottom:24px}
.search-results__group-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.search-results__group-icon{font-size:18px}
.search-results__group-title{font-weight:700;font-size:15px;color:var(--text,#1E293B)}
.search-results__count{font-weight:400;font-size:13px;color:rgba(128,128,128,.5);margin-left:auto}
.search-results__item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:rgba(128,128,128,.05);margin-bottom:6px;transition:background .15s;min-height:56px;text-decoration:none;color:var(--text,#1E293B)}
.search-results__item:hover{background:rgba(128,128,128,.1)}
.search-results__item:active{background:rgba(128,128,128,.14)}
.search-results__item-icon{font-size:22px;flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:rgba(128,128,128,.07);border-radius:10px}
.search-results__item-info{flex:1;min-width:0}
.search-results__item-title{font-weight:600;font-size:14px;margin-bottom:2px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results__item-town{font-size:12px;color:rgba(128,128,128,.5);line-height:1.3}
.search-empty{text-align:center;padding:72px 16px;color:rgba(128,128,128,.5)}
.search-empty__icon{font-size:52px;margin-bottom:14px;opacity:.45}
.search-empty__title{font-weight:700;font-size:17px;margin-bottom:6px;color:var(--text,#1E293B)}
.search-empty__desc{font-size:14px;line-height:1.5}
.search-loading{text-align:center;padding:72px 16px;color:rgba(128,128,128,.5)}
.search-loading__spinner{width:32px;height:32px;border:3px solid rgba(128,128,128,.12);border-top-color:#FF6B35;border-radius:50%;animation:search-spin .7s linear infinite;margin:0 auto 14px}
@keyframes search-spin{to{transform:rotate(360deg)}}
.search-loading__text{font-size:14px}

/* Search Modal Dark theme */
.dark .search-modal{background:#0F172A}
.dark .search-modal__header{border-bottom-color:rgba(255,255,255,.06);background:color-mix(in srgb,#0F172A 85%,transparent)}
.dark .search-modal__back,.dark .search-modal__clear{color:#F1F5F9}
.dark .search-modal__input{background:rgba(30,41,59,.5);color:#F1F5F9;border-color:rgba(255,255,255,.08)}
.dark .search-modal__input:focus{border-color:#FF6B35;background:rgba(255,107,53,.06)}
.dark .search-modal__input::placeholder{color:rgba(241,245,249,.3)}
.dark .search-section__title{color:rgba(241,245,249,.4)}
.dark .town-chip{background:rgba(30,41,59,.35);border-color:rgba(255,255,255,.06);color:#F1F5F9}
.dark .town-chip:has(input:checked),.dark .town-chip.selected{background:#FF6B35;color:#fff;border-color:#FF6B35}
.dark .search-popular__item{background:rgba(30,41,59,.35);border-color:rgba(255,255,255,.04);color:#F1F5F9}
.dark .search-popular__item:hover{background:rgba(30,41,59,.6)}
.dark .search-popular__item:active{background:rgba(30,41,59,.75)}
.dark .search-popular__icon{background:rgba(30,41,59,.5)}
.dark .search-results__item{background:rgba(30,41,59,.35)}
.dark .search-results__item:hover{background:rgba(30,41,59,.55)}
.dark .search-results__item-icon{background:rgba(30,41,59,.5)}
.dark .search-results__item-town{color:rgba(241,245,249,.35)}
.dark .search-empty__title{color:#F1F5F9}
.search-modal__suggestions{margin-bottom:16px;border-radius:14px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);overflow:hidden}
.search-modal__suggestion{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:15px;color:#1E293B;cursor:pointer;transition:background .1s;min-height:46px;border-bottom:1px solid rgba(0,0,0,.04)}
.search-modal__suggestion:last-child{border-bottom:none}
.search-modal__suggestion:hover{background:rgba(0,0,0,.06)}
.search-modal__suggestion:active{background:rgba(0,0,0,.1)}
.search-modal__suggestion-icon{font-size:16px;opacity:.5;flex-shrink:0}
.search-modal__suggestion-text{flex:1}
.search-modal__suggestion-text mark{background:transparent;color:#FF6B35;font-weight:600}
.dark .search-modal__suggestions{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.dark .search-modal__suggestion{color:#F1F5F9;border-bottom-color:rgba(255,255,255,.04)}
.dark .search-modal__suggestion:hover{background:rgba(255,255,255,.08)}
.dark .search-modal__suggestion mark{color:#FF6B35}

/* ===== Bottom Nav ===== */
#bottomNav{z-index:100000!important}

/* ===== Village page styles ===== */
.village-title{color:#1a1a2e}.dark .village-title{color:#ffffff}
.village-subtitle{color:rgba(0,0,0,0.6)}.dark .village-subtitle{color:rgba(255,255,255,0.7)}
#villageWeather{background:rgba(255,255,255,0.9);border-color:rgba(0,0,0,0.08)}
.dark #villageWeather{background:rgba(15,23,42,0.85);border-color:rgba(255,255,255,0.1)}
.photo-header,.events-header{color:#1a1a2e}.dark .photo-header,.dark .events-header{color:#ffffff}
.photo-link{color:rgba(0,0,0,0.5)}.dark .photo-link{color:rgba(255,255,255,0.6)}
.photo-link:hover{color:#1a1a2e}.dark .photo-link:hover{color:#ffffff}
.event-card{background:rgba(15,23,42,0.06)}.dark .event-card{background:rgba(255,255,255,0.08)}
.event-title{color:#1a1a2e}.dark .event-title{color:#ffffff}
.event-date{color:rgba(0,0,0,0.6)}.dark .event-date{color:rgba(255,255,255,0.6)}
.event-placeholder{background:rgba(0,0,0,0.04)}.dark .event-placeholder{background:rgba(255,255,255,0.06)}
.weather-detail{color:rgba(0,0,0,0.6)}.dark .weather-detail{color:rgba(255,255,255,0.6)}
.weather-detail:hover{color:#1a1a2e}.dark .weather-detail:hover{color:#ffffff}

/* ===== Subscribe block ===== */
#subscribeBlock{background:rgba(240,245,255,0.95);border-color:rgba(0,0,0,0.08)}
.dark #subscribeBlock{background:rgba(15,23,42,0.85);border-color:rgba(255,255,255,0.1)}
#subTitle{color:#1a1a2e}.dark #subTitle{color:#ffffff}
#subDesc{color:rgba(0,0,0,0.7)}.dark #subDesc{color:rgba(255,255,255,0.8)}
#subTg,#subVk{background:rgba(0,0,0,0.06);color:#1a1a2e;border-color:rgba(0,0,0,0.12)}
.dark #subTg,.dark #subVk{background:rgba(255,255,255,0.1);color:#ffffff;border-color:rgba(255,255,255,0.15)}
#subTg:hover,#subVk:hover{background:rgba(0,0,0,0.12)}
.dark #subTg:hover,.dark #subVk:hover{background:rgba(255,255,255,0.2)}

.shadow-glass{box-shadow:0 8px 32px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.02)}
.hover\:shadow-glass:hover{box-shadow:0 12px 40px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04)}