™æT‰VgWÜòŒ}À»X'‘¿‘	5/>'º)A·hÏ¶vJa ˜Ñ7á2¯X6![ý|¬TÒff¶þ±áÓ¹îáø„oû+Dð†ßL÷„)²1${}ÐYõ*•öælMlÏùÁlƒ0(ÈR™æ–8› <á¥Ézvåc6êÓ&® ³´šú¹É¥äìÜ›ý]‚ƒÇŒRÙæ¸+p´W
ûÀ_*4«Xºã,,8FióKmv»ˆ³ÙŠ…ö.ÔS\m‹Ú¼ªÃý}ªåá„7y~¢Öä’ôè{ë!'¾&)³©©13ÓJñ,Ï]ð]õ[þÀgÌPj’‹›P¢“È(7H&Ë_NnO¦a!£üùÞ2‡x»ŒJménõZl¡âjÀa«RÞ{ÀÛŒE_Ì<›UpÓe…¬ÑÉ9ÅÎÔ¥GKy˜É´1:²Ý yìÛXåÀ;¿ˆòG—vÐ«tØ8ÀåEÜ=ÌU`@_¶ò;À£ÎÜ{>\v«m¢ñdÛ¾°÷(<@šòUB<mjaÉo”»ÄÙ-˜RL€´Ä¨Ö»fQÁ´aÀ—ðaâ“™+kR¼òäÜqæx¥pµ=zöÈ*0i>ÖpÿÌþì{Ro =y£ébFzØýç2f;û.! Í¹4ÿÌ
7\L›S˜ãÃ¡á&v¥:Ý,îŒdJ
zªÈœxk.R»áõ®ZÕˆtñÙì‰?m!Z±Œ¨øîÇPì9pE¨÷—÷â÷qÎBíí})˜ž²Ú®Ž›–•kiù€à­û4)àúd½Çyo£Âò«ÝvGÔp'í÷4µaÚª§Ý>^>	ÍzIñ-žçæ) ù^GýM6|BZçº(+‘­èÁ; ¯
pËÔ×wWªð>SÀ¤ŒÉG¯œä7ÙP5W`'{^­j©ŸgÉùí€ñÖÝ}²®ÉKÙ­ª¶Lˆä/ìÎþäo ÒîZ==½¢O,­Ì²èÆ™Z4V¶ƒ£²”OoÌ­?!(ª-Î9ò.-í˜cdýÎŠ­þ­uÈ–·0OÊô¦ígÅ}[ö»¼s^€É1wØžöÆ#Ï·?†tx	@³Yjò»iXÌà©+ªå‡ŒŸ°MOoKMEy,CI/ÈèPµ9šryÂûæÏÈƒgbISL9O‡.Œ8ÃÓ›ßÈ
ÀµŠMÊØ8°-Ñ÷MÔU‰·€é2¦'~í±x»ç©w<”cÑA÷»’CïèÊ%£âÐFnºÿÕwúNó¼ÃV`Ú3èôs)Yý‘h*Œ5ç¾No\h„àV#ôYaêNoÊ:91Öé¹£¥Y]Ž%¢kÀn[²ÉŸ5ò?ÛW¶#£Žd§l*ÓgqéXRL¸ÑÐþrò˜‹IW8yùQœW^¯Ù÷—<9h‰æ—óc`´Â1ÃÂ¦£—Š“;×½4ùÈt(ÂµRÈY©GyôXCÿÕ,Wê`¸8A»ÌÍ‚cJã9DåT–Ê²hÒ`·éî}¥ÒíV~ÙÞ£ÞWÈ¦·ƒ¦Á—U½(¬Ï¡X§Ê$sûäF LÅô*ˆ
ÔgÁ3=òIÓ¯–9õ+r·ºf±— aù¡D0ü
â
9Gº®54¼Ž1Ãúj´“º|áŽvOiÏ­ ›!ïó}óx×ºAf›xà@¿2¶’ç©‘ÞJKî[P
žR¨¸(š{àžIîÎ×o^Ñe¹³´Õù	ã•Àc42ŠHmMwÄ\‚Œì´AÌ½|+£ƒ¸Ï8øYõ¶‡E
o"†k3‹	é6H‹ô'+žËÃL JM@£q\èž³-hn?óf®Ö‡2cðæŒŽ´ÂA>2S,”“j2"…¬3á¼w²ûÆRÙ_w„0Q k2…¾pedÆ§0lB¹¬>úbJ]ì¦ÍOtÜŠeËÜ‹}êr ñ¢÷k{El·?M$·á²SuèøCý¸k^•)oäc
DÔ»ñy‰`jLÔµëÇ{/…ì—H›£#A%…‰1O{dð”²géÓß¦€„.ÈwÍö›‘¤sUúWˆ¶ˆ{°ðFh­bžósZ	ŸvZu’C9ðÜN–f¹©ß2îï›êºkÆ¡h!õU¦YÜ/-WÉw‰ÝÙMùý	ÉÁË»6¶5³—§mÙS[	?´Ô6oèŸºSÇTW#æ6ì5ô`«ŒI¦‰¹¯›ø—ºÁ‚ÞÍ¿«ÕCs_¸ÈpSD×Ê™‹ù«èø#Øäã H–/ÜGö,=–KñÎÚ€}Uê©íFëØA¹i<Åw{íÌ¬¥Òñ0Þâ¢.2­2´TaÜóecö8xÿ?‰wc)ÙŸXàã:·âÂ]¯±#3¶'aÜÞÇjôúQTÌ—w…ÃÅÐÇÓÝ›¥IR8±x—¾qR÷9åö |_§Ó6r=è[%ÞÕõ‚@ú±2R‚:—Ì¯ fojÉqi‚ß„…_·L·âî/rrªïè{C/Ü ×Ö~^[vr8}6áƒ¨‘J^Çœª7ˆIÆ"¼”?Ùm]XâL(Ç?“ÎÖÚýjŠÝ=.”ñY^¡yåëÅª¦sXrX DA|ˆ’Î$#ÿ™”	aa½¤B›·™›b>BëÝ»­4Ù]U _CÅ¼QÆ‹ˆ"÷1¨ìzÎ…m…­ÂZ¤)â,7|ºmc.×£:[µ;TÒô7VGÊ®7rÆf“Ñz¯çT3b±Êöè¨ìµ}´µéw°¨Çð†Ö1}'±•„lö£e4¹Ý.è§~üy¿
/v²ñ¸ÏË¼ž]1âTfH•ÒÊ,Ï›œEíuËêRß'á<Ãeàç@þaÖÒÅþ?%íôLytT§³u•Ogw$—rI²ô¼àžŸÞYbaH/Ù(Ÿ
EJ2†àIÀÝÑh„´»ÏÉâÝ¸R.¯¦€mgŠ‡£ð.¥=¸qªzÀ­Ç
Ðè±üR„¹*òž¿ýœ&tÕ{_;§¬ßððf'9:1}œ«Ñÿ’nÌèï 2ÿ{D‡_±®)›éóäFº#Ù B=¾= R T,#VŸ‹Ç"d’éý iÔý«7ñ%ÉB3Æ#†ÏÄÿÈîôë|A·[_Á\ÝÉ—Û5ÒÐ †
H'l£éªâpH(<6¨¸ÙàÇÉY¯?°)k©mÜYÌ°“¨à‹¬N!¨«^åg:,öðæPãœïZÎ)•#@ãÇØ–z‚m/òoÓBýÞ9W‘\PdpÁ²ý0þ6¸eÏ	“ÜÌ?’´³\+*:Ò5cµ»6lv)©½øRŸ»þ&n¨ZþkäËçßþÿxŠ7¢ÙÄvˆWduç/J¸åÃ/)QÜ›¾Ü;¯L¢[e”>	$u¢ŒÂ†IØRô‹9•o‘YÁs‘×À­‡oÒ6Am	¡u•¹&BS¡ZÊûjkUõÛhœÈ<¥Z\Aw¬¸¢!/JVÔ ÐM×à…Ìñ€E²ç4 Æ:üsÈòy½Si‚PeÙˆË•ñBýß.O©ª?&%ƒ›=–ÝÓÔÛìÐ¥§"ªDCK@ÕöŽFQÏ£ 3PßËOðÐ«PØH‰QIƒ™¶åçâ]¶‚ÛËÇ{ïßAG? ‡EêÞûi‘µQkr_œ-šV$I1o½ßSWâ»6Ì?ãmJ¬!C¼ÖßDlMëRÄÌºf•RÓ¥G®l-“3qä²þ1Ñ­~#ÞÞ§ÒÉ)…ó®I…lb«c|Sæ8fXÉ&ê0´\›=ƒH­£x>Uk#Ú“u¿½_ôˆƒÔäMÝnV‚¬K‹BFÛ¢ÿ]yYÏØgÎ"HE±‹›%T’5H½*»Îp)_‡fkE„(o`0ŽÂäA²X5|8åD&Ä!(4®Ég}ÌG•§z2ÐQ¯¿÷©h£‰©\çËÌ’«ç©ëS/æ£Åá*eÏc¶’E¸Þ9ïn;9$2ÉÌ+]õ­_*N$›î„³©%FêÉ§-fô8µ¥Ó‹]™?N^ú@¹x2•¯ÙAÏ7à’¿3‚šs±•î«½ÍÔe9ý†2Zñ×¨Œ žÊ%tji¹8ìlð½®òt˜¯ÆoX*?=,áE3 AÆ¸M{åÌmEjã±˜Âèj{ffož’ˆÿø
Ç¸.¢×SN _qZ8Åg+žIÓå1b?¦3>Ÿ„ŒC(]8qBJ¯õ1&¯d¹ÅÀø[HOkjé]ôNy>¢Or¨íû7Ä¯c`ê;äEŒÈGêáxXƒs¯‘3$—!Ö¾žƒ‚¼×f¡¾K‰½]`uf;ótË?x×çniÀà±/"q&·•‡o—ŠKü7Z†cÙñJœœOTúI„­Ÿbœ¯	*îÖý»ÎtDgÜlvÚ!•†“£ûkÙ`n–ü8ÖÊ‡Ÿ»*y½³g<Qe[}†<ì¸BÖ*:†í˜uz¸ø;°
,^ý.¢Êä‰ÊWä˜ÍÛ~ÓkJÔ˜×©7£@÷(ñsªA©Ã?„j…Áq}VOÂÿÀ`I¥W£OåZ]bbC®R×ÿ4ƒ&“LÙ#Ô§Nþ±¬·êo˜œ¶LüAÖ[Îž!9Ò…÷uW3aÂúYùv	þøñ¬Á<ß½›¤L–©`‡[½@›é*Ý^Ï:áÅè–öèÊ€’Ê’†þïÛM‘òlnRá2fÆ»$‹ls34ôK4ùõ˜¹«µKƒ¼zÕlW„¶³tÕXE@/[‹}?ê×²ûzúµ3…¡ã¡ÁŒ]º¨ÒYxü¸“´ú—(Œj¸Ë²(\®ó_sùÝÊ°j|àù¹‹­àkÜà1ÑjúŽÆ‘+êˆž§FD1'Ûlí$A€w(…EQ
–É¸Lç,sV«™Wj“âWŽÒy®qÄ¯öc]Â"œ¤Ñh…Jý óß4ðžŽXÛ…I˜ŒgË™Að¯)Ò“@Ò"Ãz˜_“¤DˆÃ•³Ø¨Sá½!€dÌì9 _ãg?Ñmb3Ì/ö{šuBYiœP¥Ž^£;S"åž¥¬(TÉ%HiÝkô¯Ï‹[“äB‡!‚t&tü5#-âÈ\;v¥'ˆvïD¡0ffý	×Š–Œ‰½K—Caßð^OÙw»&€*/¡q¬Ë>`‹‰ˆ¥'ˆvïD¡0ffý	×Š–¥'ˆvïD¡0ffý	×Š–¥'ˆvïD¡0ffý	×Š–¥'ˆvïD¡0ffý	×Š–¥'ˆvïD¡0ffý	×Š––¥ex¯µŸÒƒ·X!nKe…òVˆÐƒÝ	š!UAdr´èœ3~0°]Cäž«ü]éÐokÝÒbg-white rounded-2xl border border-gray-200 p-8 mb-6 shadow-sm fade-in">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div class="flex items-center gap-6">
                    <div id="aqi-badge" class="w-24 h-24 rounded-full flex items-center justify-center text-3xl font-semibold bg-gray-100 text-gray-400 transition-all duration-500">
                        --
                    </div>
                    <div>
                        <div class="text-sm text-gray-500 uppercase tracking-wider mb-1">Ð˜Ð½Ð´ÐµÐºÑ AQI (US)</div>
                        <div id="aqi-status" class="text-2xl font-medium text-gray-900">ÐÐ½Ð°Ð»Ð¸Ð·...</div>
                        <div id="aqi-description" class="text-sm text-gray-500 mt-1">ÐžÐ¶Ð¸Ð´Ð°Ð½Ð¸Ðµ Ð¾Ñ‚Ð²ÐµÑ‚Ð° Ð¾Ñ‚ Ð¼ÐµÑ‚ÐµÐ¾ÑÑ‚Ð°Ð½Ñ†Ð¸Ð¸</div>
                    </div>
                </div>
                <div class="flex items-center gap-10 text-gray-700">
                                              <!-- Ð¢ÐµÐ¼Ð¿ÐµÑ€Ð°Ñ‚ÑƒÑ€Ð° -->
        <div class="flex flex-col items-center gap-1">
               <i data-lucide="thermometer" class="w-6 h-6 text-orange-500"></i>
                <span id="temp-value" class="text-2xl font-bold">--Â°C</span>
                <span class="text-[10px] text-gray-400 uppercase font-bold">Ð¢ÐµÐ¼Ð¿.</span>
           </div>
    
                                              <!-- Ð’Ð»Ð°Ð¶Ð½Ð¾ÑÑ‚ÑŒ -->
        <div class="flex flex-col items-center gap-1">
               <i data-lucide="droplets" class="w-6 h-6 text-blue-500"></i>
               <span id="humidity-value" class="text-2xl font-bold">--%</span>
               <span id="hum-status" class="text-[10px] text-gray-400 uppercase font-bold">Ð’Ð»Ð°Ð¶Ð½Ð¾ÑÑ‚ÑŒ</span>
            </div>
    
                                              <!-- Ð’ÐµÑ‚ÐµÑ€ -->
        <div class="flex flex-col items-center gap-1">
                <i data-lucide="navigation" class="w-6 h-6 text-gray-500"></i>
                <span id="wind-value" class="text-2xl font-bold">-- Ð¼/Ñ</span>
                <span class="text-[10px] text-gray-400 uppercase font-bold">Ð’ÐµÑ‚ÐµÑ€</span>
            </div>
        </div>

            </div>
        </div>

                  <!-- Sunrise & Sunset Section -->
<div class="grid grid-cols-2 gap-4 mb-6 fade-in" style="animation-delay: 0.1s">
    <div class="bg-white rounded-2xl border border-gray-200 p-4 flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-3">
            <div class="p-2 bg-orange-50 rounded-lg">
                <i data-lucide="sunrise" class="w-5 h-5 text-orange-500"></i>
            </div>
            <div>
                <p class="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Ð’Ð¾ÑÑ…Ð¾Ð´</p>
                <p id="sunrise-val" class="text-xl font-medium text-gray-900">--:--</p>
            </div>
        </div>
        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-200"></i>
    </div>

    <div class="bg-white rounded-2xl border border-gray-200 p-4 flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-3">
            <div class="p-2 bg-purple-50 rounded-lg">
                <i data-lucide="sunset" class="w-5 h-5 text-purple-500"></i>
            </div>
            <div>
                <p class="text-[10px] text-gray-400 uppercase font-bold tracking-wider">Ð—Ð°ÐºÐ°Ñ‚</p>
                <p id="sunset-val" class="text-xl font-medium text-gray-900">--:--</p>
            </div>
        </div>
        <i data-lucide="chevron-right" class="w-4 h-4 text-gray-200"></i>
    </div>
</div>
<!--------------------------ÐšÐ°Ñ€Ñ‚Ð¾Ñ‡ÐºÐ°----------------------------------------------------------------------------------------->
        <!-- Pollutants Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

            <!-- Ð¾Ñ‰ÑŽÑˆÐ°ÐµÑ‚ÑÑ ÐºÐ°Ðº -->

            <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
              <div class="flex items-center justify-between mb-4">
                <span class="text-sm font-medium text-gray-600">ÐžÑ‰ÑƒÑ‰Ð°ÐµÑ‚ÑÑ ÐºÐ°Ðº</span>
                  <i data-lucide="thermometer-sun" class="w-4 h-4 text-orange-400"></i>
              </div>
                      <div class="flex items-end gap-2">
                <span id="app-temp-val" class="text-3xl font-light">--</span>
                <span class="text-xs text-gray-400 mb-1">Â°C</span>
              </div>
            </div>

            <!-- ÐÐ°Ð¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ Ð²ÐµÑ‚Ñ€Ð° -->
            <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
              <div class="flex items-center justify-between mb-4">
               <span class="text-sm font-medium text-gray-600">ÐÐ°Ð¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ Ð²ÐµÑ‚Ñ€Ð°</span>
                 <i data-lucide="compass" id="wind-icon" class="w-5 h-5 text-blue-500 transition-transform duration-700"></i>
              </div>
                   <div class="flex items-end gap-2">
               <span id="wind-dir-text" class="text-3xl font-light">--</span>
               <span id="wind-deg" class="text-xs text-gray-400 mb-1">--Â°</span>
                  </div>
                 <div class="mt-2 text-[10px] text-gray-400 uppercase font-bold tracking-widest" id="wind-desc">Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÑÐµÑ‚ÑÑ</div>
        </div>
            
            <!-- Ð”Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ -->
            <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm font-medium text-gray-600">Ð”Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ</span>
                    <span class="text-xs text-gray-400">Ð¼Ð¼ Ñ€Ñ‚. ÑÑ‚.</span>
                </div>
                <div class="flex items-end gap-2">
                    <span id="press-val" class="text-3xl font-light">--</span>
                     <span id="press-status" class="text-xs font-medium mb-1">--</span>
                     </div>
            </div>
                         
            <!-- Ð’Ð¸Ð´Ð¸Ð¼Ð¾ÑÑ‚ÑŒ -->
            <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm font-medium text-gray-600">Ð’Ð¸Ð´Ð¸Ð¼Ð¾ÑÑ‚ÑŒ</span>
                    <span class="text-xs text-gray-400">ÐºÐ¼</span>
                </div>
                <div class="flex items-end gap-2">
                    <span id="vis-val" class="text-3xl font-light">--</span>
                    <span class="text-xs text-gray-400 mb-1">ÑÑÐ½Ð¾</span>
                </div>
            </div>
             <!-- ÐšÐ°Ñ€Ñ‚Ð¾Ñ‡ÐºÐ° Ð£Ð¤-Ð˜Ð½Ð´ÐµÐºÑ -->
<div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow">
    <div class="flex justify-between items-center mb-4">
        <span class="text-sm font-medium text-gray-500">Ð£Ð¤-Ð˜Ð½Ð´ÐµÐºÑ</span>
        <i data-lucide="sun" class="w-4 h-4 text-yellow-500"></i>
    </div>
    <div class="flex items-end gap-2">
        <span id="uv-val" class="text-3xl font-light">--</span>
        <span id="uv-status" class="text-[10px] font-bold uppercase mb-1 tracking-tighter">--</span>
    </div>
</div>              


                               <!-- ÐšÐ°Ñ€Ñ‚Ð¾Ñ‡ÐºÐ° Ð“ÐµÐ¾Ð¼Ð°Ð³Ð½Ð¸Ñ‚Ð½Ð¾Ð¹ Ð°ÐºÑ‚Ð¸Ð²Ð½Ð¾ÑÑ‚Ð¸ -->
<div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow fade-in" style="animation-delay: 0.2s">
    <div class="flex items-center justify-between mb-4">
        <span class="text-sm font-medium text-gray-600">Ð“ÐµÐ¾Ð¼Ð°Ð³Ð½Ð¸Ñ‚Ð½Ñ‹Ð¹ Ñ„Ð¾Ð½</span>
        <i data-lucide="activity" class="w-4 h-4 text-purple-500"></i>
    </div>
    <div class="flex items-end gap-2 mb-2">
        <span id="kp-index-val" class="text-3xl font-bold text-gray-900">--</span>
        <span class="text-gray-400 pb-1 text-sm">Kp</span>
    </div>
    <!-- Ð¨ÐºÐ°Ð»Ð°-Ð¸Ð½Ð´Ð¸ÐºÐ°Ñ‚Ð¾Ñ€ -->
    <div class="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden">
        <div id="kp-bar" class="h-full bg-green-500 transition-all duration-1000" style="width: 0%"></div>
    </div>
    <div id="kp-text" class="text-[10px] text-gray-400 uppercase font-bold mt-3 tracking-wider">Ð—Ð°Ð³Ñ€ÑƒÐ·ÐºÐ° Ð´Ð°Ð½Ð½Ñ‹Ñ…...</div>
</div>
          <!-- Ð£Ð³Ð°Ñ€Ð½Ñ‹Ð¹ Ð³Ð°Ð· (CO) -->
            <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm font-medium text-gray-600">Ð£Ð³Ð°Ñ€Ð½Ñ‹Ð¹ Ð³Ð°Ð· (CO)</span>
                    <i data-lucide="factory" class="w-4 h-4 text-gray-400"></i>
                </div>
                <div class="flex items-end gap-2">
                    <span id="co-val" class="text-3xl font-light">--</span>
                    <span class="text-xs text-gray-400 mb-1">Ð¼ÐºÐ³/Ð¼Â³</span>
                </div>
                <div id="co-status" class="mt-2 text-[10px] text-gray-400 uppercase font-bold tracking-widest">Ð°Ð½Ð°Ð»Ð¸Ð·...</div>
            </div>
            <!-- PM2.5 -->
            <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm font-medium text-gray-600">PM2.5</span>
                    <span class="text-xs text-gray-400">Ð¼ÐºÐ³/Ð¼Â³</span>
                </div>
                <div class="flex items-end gap-2">
                    <span id="pm25-val" class="text-3xl font-light">--</span>
                    <span id="pm25-status" class="text-xs px-2 py-1 rounded-full bg-gray-100 text-gray-500 mb-1">Ð½ÐµÑ‚ Ð´Ð°Ð½Ð½Ñ‹Ñ…</span>
                </div>
                <div class="mt-3 h-1 bg-gray-100 rounded-full overflow-hidden">
                    <div id="pm25-bar" class="h-full bg-gray-300 transition-all duration-700" style="width: 0%"></div>
                </div>
            </div>

           

                               <!-- Ð’ÐµÑ€Ð¾ÑÑ‚Ð½Ð¾ÑÑ‚ÑŒ Ð´Ð¾Ð¶Ð´Ñ -->
            <div class="bg-white rounded-xl border border-gray-200 p-6 hover:shadow-md transition-shadow bg-blue-50/30">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm font-medium text-blue-600 font-bold">ÐžÑÐ°Ð´ÐºÐ¸</span>
                    <span class="text-xs text-gray-400">%</span>
                </div>
                <div class="flex items-end gap-2">
                    <span id="rain-val" class="text-3xl font-bold text-blue-600">--</span>
                    <span id="rain-status" class="text-xs font-medium mb-1 text-blue-500">--</span>
                </div>
            </div>
        </div>
        <!-- Forecast Section -->
<div class="mb-8 fade-in" style="animation-delay: 0.6s">
      <!-- Ð Ð°Ð·Ð´ÐµÐ»Ð¸Ñ‚ÐµÐ»ÑŒ Ñ Ð¸ÐºÐ¾Ð½ÐºÐ¾Ð¹ Ð¿Ð¾ Ñ†ÐµÐ½Ñ‚Ñ€Ñƒ -->
             <div class="relative my-16 flex items-center">
                <div class="flex-grow border-t-2 border-slate-200"></div>
                     <span class="flex-shrink mx-4 text-slate-300">
                     <i data-lucide="calendar-days" class="w-6 h-6"></i>
                    </span>
                <div class="flex-grow border-t-2 border-slate-200"></div>
             </div>
    <h3 class="text-xl font-light mb-6 flex items-center gap-2">
        <i data-lucide="calendar" class="w-5 h-5 text-gray-400"></i>
        ÐŸÑ€Ð¾Ð³Ð½Ð¾Ð· Ð½Ð° 7 Ð´Ð½ÐµÐ¹
    </h3>
    <div id="forecast-container" class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- ÐšÐ°Ñ€Ñ‚Ð¾Ñ‡ÐºÐ¸ Ð¿Ñ€Ð¾Ð³Ð½Ð¾Ð·Ð° Ð¿Ð¾ÑÐ²ÑÑ‚ÑÑ Ð·Ð´ÐµÑÑŒ -->
    </div>
</div>
    </main>
<script>
    lucide.createIcons();
    let currentLat = 55.33, currentLon = 86.08, currentCity = "ÐšÐµÐ¼ÐµÑ€Ð¾Ð²Ð¾", currentTimezone = "auto";
//-----------------------------------------------------------------------------------------------------------------------------------------------
    function updateClock() {
        const now = new Date();
        const options = { hour: '2-digit', minute: '2-digit', timeZone: currentTimezone === "auto" ? undefined : currentTimezone };
        try {
            document.getElementById('current-time').innerText = now.toLocaleTimeString('ru-RU', options);
        } catch (e) {
            document.getElementById('current-time').innerText = now.toLocaleTimeString('ru-RU', {hour: '2-digit', minute: '2-digit'});
        }
    }
    setInterval(updateClock, 1000);
//.................................................................................................................................................
    function updateUI(data, cityName) {
    try {
        const cur = data.current;
        const hourly = data.hourly;
        // ÐÐ°Ñ…Ð¾Ð´Ð¸Ð¼ Ð¸Ð½Ð´ÐµÐºÑ Ñ‚ÐµÐºÑƒÑ‰ÐµÐ³Ð¾ Ñ‡Ð°ÑÐ° (0-23)
        const hourIdx = new Date().getHours();

        // 1. ÐžÑÐ½Ð¾Ð²Ð½Ñ‹Ðµ Ð¿Ð¾ÐºÐ°Ð·Ð°Ñ‚ÐµÐ»Ð¸ (ÑƒÐ¶Ðµ Ñ€Ð°Ð±Ð¾Ñ‚Ð°ÑŽÑ‚, Ð½Ð¾ Ð¾Ð±Ð½Ð¾Ð²Ð¸Ð¼ Ð´Ð»Ñ Ð½Ð°Ð´ÐµÐ¶Ð½Ð¾ÑÑ‚Ð¸)
        document.getElementById('city-name').innerText = cityName;
        document.getElementById('temp-value').innerText = Math.round(cur.temperature_2m) + 'Â°C';
        document.getElementById('humidity-value').innerText = cur.relative_humidity_2m + '%';
        document.getElementById('wind-value').innerText = (cur.wind_speed_10m / 3.6).toFixed(1) + ' Ð¼/Ñ';
        document.getElementById('app-temp-val').innerText = Math.round(data.current.apparent_temperature);
        // 2. Ð”Ð°Ð²Ð»ÐµÐ½Ð¸Ðµ Ð¸ Ð’Ð¸Ð´Ð¸Ð¼Ð¾ÑÑ‚ÑŒ
        const press = Math.round(cur.surface_pressure * 0.750062);
        document.getElementById('press-val').innerText = press;
        const pStat = document.getElementById('press-status');
        if (pStat) {
            pStat.innerText = (press >= 740 && press <= 760) ? "Ð½Ð¾Ñ€Ð¼Ð°" : "Ð¾Ñ‚ÐºÐ»Ð¾Ð½ÐµÐ½Ð¸Ðµ";
            pStat.className = "text-xs font-medium mb-1 " + (press >= 740 && press <= 760 ? "text-green-500" : "text-orange-500");
        }
        document.getElementById('vis-val').innerText = cur.visibility ? (cur.visibility / 1000).toFixed(0) : "10";

        // 3. Ð’ÐžÐ—Ð”Ð£Ð¥ (AQI, PM2.5, ÐžÐ·Ð¾Ð½, ÐÐ·Ð¾Ñ‚) â€” Ð±ÐµÑ€ÐµÐ¼ Ð¸Ð· hourly[hourIdx]
        const aqi = (hourly && hourly.us_aqi) ? hourly.us_aqi[hourIdx] : 0;
        const pm25 = (hourly && hourly.pm2_5) ? hourly.pm2_5[hourIdx] : 0;

            // Ð’Ñ‹Ð²Ð¾Ð´ CO (Ð±ÐµÐ·Ð¾Ð¿Ð°ÑÐ½Ð¾)
if (data.current && data.current.air_quality) {
    var co = Math.round(data.current.air_quality.carbon_monoxide);
    document.getElementById('co-val').textContent = co;
    var coStatus = document.getElementById('co-status');
    coStatus.textContent = co < 4400 ? "Ð’ Ð½Ð¾Ñ€Ð¼Ðµ" : "ÐŸÐ¾Ð²Ñ‹ÑˆÐµÐ½";
    coStatus.style.color = co < 4400 ? "#22c55e" : "#f97316";
}
        
        // Ð’Ñ‹Ð²Ð¾Ð´ AQI
        const badge = document.getElementById('aqi-badge');
        if (badge) {
            badge.innerText = aqi;
            badge.className = `w-24 h-24 rounded-full flex items-center justify-center text-3xl font-semibold transition-all ${aqi <= 50 ? 'bg-green-100 text-green-600' : 'bg-yellow-100 text-yellow-600'}`;
            document.getElementById('aqi-status').innerText = aqi <= 50 ? "Ð§Ð¸ÑÑ‚Ñ‹Ð¹ Ð²Ð¾Ð·Ð´ÑƒÑ…" : "Ð£Ð¼ÐµÑ€ÐµÐ½Ð½Ð¾";
            document.getElementById('aqi-description').innerText = aqi <= 50 ? "ÐšÐ°Ñ‡ÐµÑÑ‚Ð²Ð¾ Ð²Ð¾Ð·Ð´ÑƒÑ…Ð° Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð¾Ðµ" : "Ð’Ð¾Ð·Ð¼Ð¾Ð¶ÐµÐ½ Ð½ÐµÐ±Ð¾Ð»ÑŒÑˆÐ¾Ð¹ Ð´Ð¸ÑÐºÐ¾Ð¼Ñ„Ð¾Ñ€Ñ‚";
        }
              if (data.daily && data.daily.sunrise && data.daily.sunset) {
    // Ð‘ÐµÑ€Ñ‘Ð¼ 0-Ð¹ ÑÐ»ÐµÐ¼ÐµÐ½Ñ‚ Ð¼Ð°ÑÑÐ¸Ð²Ð° (ÑÐµÐ³Ð¾Ð´Ð½Ñ), Ñ€Ð°Ð·Ð´ÐµÐ»ÑÐµÐ¼ Ð¿Ð¾ "T" Ð¸ Ð±ÐµÑ€Ñ‘Ð¼ Ð²Ñ‚Ð¾Ñ€ÑƒÑŽ Ñ‡Ð°ÑÑ‚ÑŒ (Ð²Ñ€ÐµÐ¼Ñ)
    const sunrise = data.daily.sunrise[0].split("T")[1];
    const sunset = data.daily.sunset[0].split("T")[1];

    document.getElementById('sunrise-val').innerText = sunrise;
    document.getElementById('sunset-val').innerText = sunset;
}
        // Ð’Ñ‹Ð²Ð¾Ð´ PM2.5
        const pm25Value = pm25 || 0; 
        document.getElementById('pm25-val').innerText = Number(pm25Value).toFixed(1);
        const pmStatus = document.getElementById('pm25-status');
        if (pmStatus) {
            pmStatus.innerText = pm25 < 12 ? "Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð¾" : "Ð½Ð¾Ñ€Ð¼Ð°";
            pmStatus.className = "text-xs px-2 py-1 rounded-full mb-1 " + (pm25 < 12 ? "bg-green-100 text-green-600" : "bg-yellow-100 text-yellow-600");
        }

                // 4. ÐžÐ¡ÐÐ”ÐšÐ˜
        const rain = cur.precipitation || 0; 
        const rainValEl = document.getElementById('rain-val');
        const rStat = document.getElementById('rain-status');

        if (rainValEl) {
    // Ð¢ÐµÐ¿ÐµÑ€ÑŒ Ð¾ÑˆÐ¸Ð±ÐºÐ° "rain is not defined" Ð¸ÑÑ‡ÐµÐ·Ð½ÐµÑ‚
    rainValEl.innerText = Number(rain).toFixed(1);
    
    if (rStat) {
        rStat.innerText = rain > 0 ? "Ð¸Ð´ÐµÑ‚ Ð´Ð¾Ð¶Ð´ÑŒ" : "Ð±ÐµÐ· Ð¾ÑÐ°Ð´ÐºÐ¾Ð²";
        rStat.className = "text-xs font-medium mb-1 " + (rain > 0 ? "text-blue-600" : "text-gray-400");
    }

        // 3. Ð”Ð»Ñ Ð²ÐµÑ‚Ñ€Ð° (ÐµÑÐ»Ð¸ Ñ‚Ð°Ð¼ ÐµÑÑ‚ÑŒ Ð¾ÑˆÐ¸Ð±ÐºÐ°)
        const windValue = cur.wind_speed_10m || 0;
        document.getElementById('wind-value').innerText = (windValue / 3.6).toFixed(1) + ' Ð¼/Ñ';

        }

        // Ð›Ð¾Ð³Ð¸ÐºÐ° Ð´Ð»Ñ ÐÐ°Ð¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ñ Ð²ÐµÑ‚Ñ€Ð°
        const windDeg = data.current.wind_direction_10m || 0;
        const windDirTextEl = document.getElementById('wind-dir-text');
        const windDegEl = document.getElementById('wind-deg');
        const windIcon = document.getElementById('wind-icon');

    if (windDirTextEl && windDegEl) {
    // ÐœÐ°ÑÑÐ¸Ð² Ð½Ð°Ð¿Ñ€Ð°Ð²Ð»ÐµÐ½Ð¸Ð¹
        const directions = ['Ð¡', 'Ð¡Ð’', 'Ð’', 'Ð®Ð’', 'Ð®', 'Ð®Ð—', 'Ð—', 'Ð¡Ð—'];
    // Ð’Ñ‹Ñ‡Ð¸ÑÐ»ÑÐµÐ¼ Ð¸Ð½Ð´ÐµÐºÑ (Ð´ÐµÐ»Ð¸Ð¼ ÐºÑ€ÑƒÐ³ Ð½Ð° 8 Ñ‡Ð°ÑÑ‚ÐµÐ¹)
        const index = Math.round(windDeg / 45) % 8;
    
    windDirTextEl.innerText = directions[index];
    windDegEl.innerText = windDeg + 'Â°';
    
    // ÐŸÐ¾Ð²Ð¾Ñ€Ð°Ñ‡Ð¸Ð²Ð°ÐµÐ¼ Ð¸ÐºÐ¾Ð½ÐºÑƒ ÐºÐ¾Ð¼Ð¿Ð°ÑÐ° (ÐµÑÐ»Ð¸ Ñ…Ð¾Ñ‡ÐµÑˆÑŒ ÑÑ„Ñ„ÐµÐºÑ‚ "ÑÑ‚Ñ€ÐµÐ»ÐºÐ¸")
    if (windIcon) {
        windIcon.style.transform = `rotate(${windDeg}deg)`;
    }
    
    // ÐŸÐ¾Ð´Ð¿Ð¸ÑÑŒ Ð´Ð»Ñ Ð¿Ð¾Ð½ÑÑ‚Ð½Ð¾ÑÑ‚Ð¸
        const fullNames = ['Ð¡ÐµÐ²ÐµÑ€Ð½Ñ‹Ð¹', 'Ð¡ÐµÐ²ÐµÑ€Ð¾-Ð²Ð¾ÑÑ‚Ð¾Ñ‡Ð½Ñ‹Ð¹', 'Ð’Ð¾ÑÑ‚Ð¾Ñ‡Ð½Ñ‹Ð¹', 'Ð®Ð³Ð¾-Ð²Ð¾ÑÑ‚Ð¾Ñ‡Ð½Ñ‹Ð¹', 'Ð®Ð¶Ð½Ñ‹Ð¹', 'Ð®Ð³Ð¾-Ð·Ð°Ð¿Ð°Ð´Ð½Ñ‹Ð¹', 'Ð—Ð°Ð¿Ð°Ð´Ð½Ñ‹Ð¹', 'Ð¡ÐµÐ²ÐµÑ€Ð¾-Ð·Ð°Ð¿Ð°Ð´Ð½Ñ‹Ð¹'];
        document.getElementById('wind-desc').innerText = fullNames[index];
    }
   // Ð›Ð¾Ð³Ð¸ÐºÐ° Ð´Ð»Ñ Ð£Ð¤-Ð˜Ð½Ð´ÐµÐºÑÐ°
        const uv = data.current.uv_index || 0;
        const uvValEl = document.getElementById('uv-val');
        const uvStatusEl = document.getElementById('uv-status');

        if (uvValEl && uvStatusEl) {
            uvValEl.innerText = uv.toFixed(1);
    
    // Ð¦Ð²ÐµÑ‚ Ð² Ð·Ð°Ð²Ð¸ÑÐ¸Ð¼Ð¾ÑÑ‚Ð¸ Ð¾Ñ‚ Ð¾Ð¿Ð°ÑÐ½Ð¾ÑÑ‚Ð¸
        if (uv <= 2) {
        uvStatusEl.innerText = "Ð±ÐµÐ·Ð¾Ð¿Ð°ÑÐ½Ð¾";
        uvStatusEl.className = "text-[10px] font-bold uppercase mb-1 text-green-500";
    } else if (uv <= 5) {
        uvStatusEl.innerText = "Ð½ÑƒÐ¶ÐµÐ½ ÐºÑ€ÐµÐ¼";
        uvStatusEl.className = "text-[10px] font-bold uppercase mb-1 text-yellow-500";
    } else {
        uvStatusEl.innerText = "Ð¾Ð¿Ð°ÑÐ½Ð¾";
        uvStatusEl.className = "text-[10px] font-bold uppercase mb-1 text-orange-500";
        }
    }
        // 5. ÐŸÐ ÐžÐ“ÐÐžÐ—
        const forecastContainer = document.getElementById('forecast-container');
        if (forecastContainer && data.daily) {
            forecastContainer.innerHTML = '';
            for (let i = 1; i <= 7; i++) {
                const date = new Date(data.daily.time[i]).toLocaleDateString('ru-RU', { weekday: 'short', day: 'numeric' });
                forecastContainer.innerHTML += `
                    <div class="bg-white rounded-2xl border-l-4 border-l-blue-500 border border-gray-100 p-5 flex items-center justify-between shadow-sm">
                        <div class="flex flex-col text-left">
                            <span class="text-sm font-bold text-slate-800 capitalize">${date}</span>
                            <span class="text-[10px] text-blue-500 font-black uppercase tracking-widest mt-1">ÐŸÑ€Ð¾Ð³Ð½Ð¾Ð·</span>
                        </div>
                        <div class="text-right bg-slate-50 rounded-xl px-4 py-2 border border-slate-100">
                            <div class="text-xl font-black text-slate-900">${Math.round(data.daily.temperature_2m_max[i])}Â°</div>
                            <div class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter">Ð½Ð¾Ñ‡ÑŒ ${Math.round(data.daily.temperature_2m_min[i])}Â°</div>
                        </div>
                    </div>`;
            }
        }

        if (window.lucide) lucide.createIcons();

    } catch (e) {
        console.error("ÐžÑˆÐ¸Ð±ÐºÐ° UI:", e);
       }
         const statusText = document.getElementById('status-text');
         const statusDot = document.getElementById('status-dot');

        if (statusText && statusDot) {
    statusText.innerText = "ÐžÐ±Ð½Ð¾Ð²Ð»ÐµÐ½Ð¾ Ð² " + new Date().toLocaleTimeString('ru-RU', {hour:'2-digit', minute:'2-digit'});
    statusDot.className = "w-2 h-2 rounded-full bg-green-500"; // ÐœÐµÐ½ÑÐµÐ¼ Ð¶ÐµÐ»Ñ‚Ñ‹Ð¹ Ð½Ð° Ð·ÐµÐ»ÐµÐ½Ñ‹Ð¹
    }
}

//-----------------------------------------------------Init----------------------------------------------------------------------------------------------
    async function init(mLat = null, mLon = null, mName = null) {
        let lat = mLat || currentLat, lon = mLon || currentLon, city = mName || currentCity;
        if (!mLat) {
            try {
                const geo = await fetch('https://ipapi.co').then(r => r.json());
                if (geo.latitude) { lat = geo.latitude; lon = geo.longitude; city = geo.city; }
            } catch (e) {}
        }
        currentLat = lat; currentLon = lon; currentCity = city;
        try {
            const url = "https://api.open-meteo.com/v1/forecast?latitude=" + lat + 
                    "&longitude=" + lon + 
                    "&current=temperature_2m,relative_humidity_2m,apparent_temperature,surface_pressure,wind_speed_10m,wind_direction_10m,visibility" +
            "&daily=temperature_2m_max,temperature_2m_min,weather_code,sunrise,sunset" + 
            "&forecast_days=8&timezone=auto";
            const res = await fetch(url);
            const data = await res.json();
            currentTimezone = data.timezone;
            updateUI(data, city);
        } catch (err) {
            document.getElementById('status-text').innerText = "ÐžÑˆÐ¸Ð±ÐºÐ° API";
        }
    }
//----------------------------------searchCity-------------------------------------------------------------------------------------------------------------
    async function searchCity() {
            const input = document.getElementById('city-input');
            const resultsContainer = document.getElementById('search-results');
            const query = input.value.trim();

        if (query.length < 2) return;

    try {
        const url = "https://geocoding-api.open-meteo.com/v1/search?name=" + encodeURIComponent(query) + "&count=5&language=ru&format=json";
        const res = await fetch(url);
        const data = await res.json();

        if (!data.results) {
            resultsContainer.classList.add('hidden');
            return;
        }

        // ÐžÑ‡Ð¸Ñ‰Ð°ÐµÐ¼ Ð¸ Ð¿Ð¾ÐºÐ°Ð·Ñ‹Ð²Ð°ÐµÐ¼ ÑÐ¿Ð¸ÑÐ¾Ðº
        resultsContainer.innerHTML = '';
        resultsContainer.classList.remove('hidden');

        data.results.forEach(city => {
            const div = document.createElement('div');
            div.className = "px-4 py-3 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-none flex flex-col";
            
            // Ð¤Ð¾Ñ€Ð¼Ð¸Ñ€ÑƒÐµÐ¼ ÐºÑ€Ð°ÑÐ¸Ð²ÑƒÑŽ Ð¿Ð¾Ð´Ð¿Ð¸ÑÑŒ: Ð“Ð¾Ñ€Ð¾Ð´, ÐžÐ±Ð»Ð°ÑÑ‚ÑŒ, Ð¡Ñ‚Ñ€Ð°Ð½Ð°
            const admin = city.admin1 ? city.admin1 + ", " : "";
            const country = city.country || "";
            
            div.innerHTML = `
                <span class="font-medium text-gray-900">${city.name}</span>
                <span class="text-xs text-gray-400">${admin}${country}</span>
            `;

            // ÐŸÑ€Ð¸ ÐºÐ»Ð¸ÐºÐµ Ð½Ð° Ð²Ð°Ñ€Ð¸Ð°Ð½Ñ‚ â€” Ð·Ð°Ð³Ñ€ÑƒÐ¶Ð°ÐµÐ¼ Ð¸Ð¼ÐµÐ½Ð½Ð¾ ÐµÐ³Ð¾ ÐºÐ¾Ð¾Ñ€Ð´Ð¸Ð½Ð°Ñ‚Ñ‹
            div.onclick = () => {
                init(city.latitude, city.longitude, city.name);
                resultsContainer.classList.add('hidden');
                input.value = "";
            };
            resultsContainer.appendChild(div);
        });

    } catch (e) {
        console.error("ÐžÑˆÐ¸Ð±ÐºÐ° Ð¿Ð¾Ð¸ÑÐºÐ°:", e);
    }
}

// Ð—Ð°ÐºÑ€Ñ‹Ð²Ð°Ñ‚ÑŒ ÑÐ¿Ð¸ÑÐ¾Ðº Ð¿Ñ€Ð¸ ÐºÐ»Ð¸ÐºÐµ Ð² Ð»ÑŽÐ±Ð¾Ðµ Ð´Ñ€ÑƒÐ³Ð¾Ðµ Ð¼ÐµÑÑ‚Ð¾
     document.addEventListener('click', (e) => {
         if (!e.target.closest('#city-input')) {
        document.getElementById('search-results').classList.add('hidden');
    }
});
     // ÐÐ°Ñ…Ð¾Ð´Ð¸Ð¼ Ð¿Ð¾Ð»Ðµ Ð²Ð²Ð¾Ð´Ð° Ð¿Ð¾ ID
const cityInput = document.getElementById('city-input');

// Ð”Ð¾Ð±Ð°Ð²Ð»ÑÐµÐ¼ ÑÐ»ÐµÐ¶ÐºÑƒ Ð·Ð° Ð½Ð°Ð¶Ð°Ñ‚Ð¸ÐµÐ¼ ÐºÐ»Ð°Ð²Ð¸Ñˆ
cityInput.addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        searchCity(); // Ð’Ñ‹Ð·Ñ‹Ð²Ð°ÐµÐ¼ Ñ‚Ñƒ Ð¶Ðµ Ñ„ÑƒÐ½ÐºÑ†Ð¸ÑŽ, Ñ‡Ñ‚Ð¾ Ð¸ Ð½Ð° ÐºÐ½Ð¾Ð¿ÐºÐµ
    }
});
    init();


    async function updateGeomagneticData() {
    try {
        // Ð—Ð°Ð¿Ñ€Ð¾Ñ Ðº Ñ‚Ð²Ð¾ÐµÐ¼Ñƒ ÑÐ¾Ð±ÑÑ‚Ð²ÐµÐ½Ð½Ð¾Ð¼Ñƒ ÑÐµÑ€Ð²ÐµÑ€Ñƒ (Ð¾ÑˆÐ¸Ð±ÐºÐ¸ CORS Ð½Ðµ Ð±ÑƒÐ´ÐµÑ‚)
        const response = await fetch('get_kp.php');
        const data = await response.json();
        
        // Ð˜Ð·Ð²Ð»ÐµÐºÐ°ÐµÐ¼ ÑƒÑ€Ð¾Ð²ÐµÐ½ÑŒ G (0-5) Ð¸Ð· Ð´Ð°Ð½Ð½Ñ‹Ñ… NOAA Ð¸ Ð¿ÐµÑ€ÐµÐ²Ð¾Ð´Ð¸Ð¼ Ð² Kp
        // ÐžÐ±Ñ‹Ñ‡Ð½Ð¾ G0 = Kp 1-4, G1 = Kp 5, G2 = Kp 6 Ð¸ Ñ‚.Ð´.
        const gIndex = parseInt(data['0']?.Scale) || 0;
        const kpIndex = gIndex > 0 ? (gIndex + 4) : 2; 

        const kpValEl = document.getElementById('kp-index-val');
        const kpBarEl = document.getElementById('kp-bar');
        const kpTextEl = document.getElementById('kp-text');

        if (kpValEl) kpValEl.innerText = kpIndex;
        
        if (kpBarEl) {
            const percent = (kpIndex / 9) * 100;
            kpBarEl.style.width = percent + '%';
            
            // Ð¦Ð²ÐµÑ‚Ð° Ð² Ð·Ð°Ð²Ð¸ÑÐ¸Ð¼Ð¾ÑÑ‚Ð¸ Ð¾Ñ‚ Ð¸Ð½Ð´ÐµÐºÑÐ°
            if (kpIndex < 4) {
                kpTextEl.innerText = "Ð¡Ð¿Ð¾ÐºÐ¾Ð¹Ð½Ð¾";
                kpBarEl.className = "h-full bg-green-500";
            } else if (kpIndex === 4) {
                kpTextEl.innerText = "ÐÐµÐ±Ð¾Ð»ÑŒÑˆÐ¸Ðµ Ð²Ð¾Ð·Ð¼ÑƒÑ‰ÐµÐ½Ð¸Ñ";
                kpBarEl.className = "h-full bg-yellow-400";
            } else {
                kpTextEl.innerText = `ÐœÐ°Ð³Ð½Ð¸Ñ‚Ð½Ð°Ñ Ð±ÑƒÑ€Ñ (G${gIndex})`;
                kpBarEl.className = "h-full bg-red-500";
            }
        }
    } catch (error) {
        console.error("ÐžÑˆÐ¸Ð±ÐºÐ° Kp:", error);
        document.getElementById('kp-text').innerText = "Ð”Ð°Ð½Ð½Ñ‹Ðµ Ð²Ñ€ÐµÐ¼ÐµÐ½Ð½Ð¾ Ð½ÐµÐ´Ð¾ÑÑ‚ÑƒÐ¿Ð½Ñ‹";
    }
}

// Ð—Ð°Ð¿ÑƒÑÐº
updateGeomagneticData();
</script>



</body>
</html>