header_remove('X-Frame-Options');
header_remove('Content-Security-Policy');

<style>
    .dayinfo-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dayinfo-modal.open {
    display: flex;
    animation: dayinfoFade 0.2s ease-out;
}
@keyframes dayinfoFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dayinfo-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.dayinfo-window {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 90vh;
    max-height: 860px;
    background: #0a0c10;
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(255, 165, 0, 0.15),
        0 24px 60px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(255, 165, 0, 0.15);
    overflow: hidden;
    animation: dayinfoZoom 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes dayinfoZoom {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.dayinfo-window iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #0a0c10;
}
.dayinfo-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 165, 0, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #FFA500;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s, transform 0.15s, color 0.15s;
}
.dayinfo-close:hover {
    background: rgba(255, 165, 0, 0.35);
    color: #FFFFFF;
    transform: scale(1.08);
}
.dayinfo-close:active { transform: scale(0.95); }

@media (max-width: 480px) {
    .dayinfo-modal { padding: 8px; }
    .dayinfo-window { height: 94vh; border-radius: 14px; }
    .dayinfo-close { top: 6px; right: 6px; width: 34px; height: 34px; }
}
</style>    

    


<script type="text/javascript">
    var nods = document.getElementsByClassName('NO-CACHEa'); 
for (var i = 0; i < nods.length; i++) { nods[i].attributes['href'].value += "?a=" + Math.random(); }

       function elog(ev, object) {
        console.log(object.id + " - " + ev + ": " + object.value); 
       if (ev == 'change'  && object.id == 'dt2') {
       window.location.href  = 'moon.php?d='+object.value+"&s=1";
        }
       
       if (ev == 'change'  && object.id == 'dt3') {
       window.location.href  = 'moon.php?t='+object.value;
        }
       
       if (ev == 'change'  && object.id == 'dt22') {
       popupwindow('mooncalc/ru/day'+object.value+'.html', ' '+object.value+' лунный день',400,200)
        }
       }
</script>


<script type='text/javascript'>

function popupwindow(url, title, w, h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 

//~ const googleTranslateConfig = {
    //~ lang: "ru",
//~ };

//~ function TranslateInit() {

    //~ let code = TranslateGetCode();
    //~ // Находим флаг с выбранным языком для перевода и добавляем к нему активный класс
    //~ $('[data-google-lang="' + code + '"]').addClass('language__img_active');

    //~ if (code == googleTranslateConfig.lang) {
        //~ // Если язык по умолчанию, совпадает с языком на который переводим
        //~ // То очищаем куки
        //~ TranslateClearCookie();
    //~ }

    //~ // Инициализируем виджет с языком по умолчанию
    //~ new google.translate.TranslateElement({
        //~ pageLanguage: googleTranslateConfig.lang,
    //~ });

    //~ // Вешаем событие  клик на флаги
    //~ $('[data-google-lang]').click(function () {
        //~ TranslateSetCookie($(this).attr("data-google-lang"))
        //~ // Перезагружаем страницу
        //~ window.location.reload();
    //~ });
//~ }

//~ function TranslateGetCode() {
    //~ // Если куки нет, то передаем дефолтный язык
    //~ let lang = ($.cookie('googtrans') != undefined && $.cookie('googtrans') != "null") ? $.cookie('googtrans') : googleTranslateConfig.lang;
    //~ return lang.substr(-2);
//~ }

//~ function TranslateClearCookie() {
    //~ $.cookie('googtrans', null);
    //~ $.cookie("googtrans", null, {
        //~ domain: "." + document.domain,
    //~ });
//~ }

//~ function TranslateSetCookie(code) {
    //~ // Записываем куки /язык_который_переводим/язык_на_который_переводим
    //~ $.cookie('googtrans', "/auto/" + code);
    //~ $.cookie("googtrans", "/auto/" + code, {
        //~ domain: "." + document.domain,
    //~ });
//~ }
</script>

<!--script type='text/javascript'>

(function()
{
  if( window.localStorage )
  {
    if( !localStorage.getItem('firstLoad') )
    {
      localStorage['firstLoad'] = true;
      window.location.reload();
    }  
    else
      localStorage.removeItem('firstLoad');
  }
})();

</script-->
<!--
<link rel="stylesheet" href="../css/style.css">
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<!--
<script src="js/google-translate.js"></script>
<script src="//translate.google.com/translate_a/element.js?cb=TranslateInit"></script>
-->
<STYLE type="text/css">
	body {
    margin: 0;
    padding: 0;
}

.page {
    display: flex;
    min-height: 100vh;
}

/* Фиксируем позицию body, которую меняет панель гугла*/

.page_fix {
    top: 0 !important;
    position: static !important;
}

/* Прячем панель гугла */

.skiptranslate {
    display: none !important;
}

/* language */

.language {
position: fixed;
    left: 10px;
    top: 20px;
    /* transform: translateY(-10%); */
    display: flex;
    flex-direction: column;
    float: right;
}

.language__img {
    margin: 2px;
    cursor: pointer;
    opacity: .5;
}

.language__img:hover,
.language__img_active {
    opacity: 1;
    width:25px;
    height:20px;
}

/* content */

.content {
    text-align: center;
    margin: auto;
}
      TABLE  { padding:10px;font-size:1.4em;color: #FFFFFF;background-color: #000000; empty-cells: hide ;width: 100%; border: 0px outset #da7c0c; border-radius: 10px; cellpadding: 1; cellspacing: 10;align: center;}
      TR.top { }
      TD.35c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 45%; }
      TD.65c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 55%; }
      TD.50     { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 50%; }
      TD.50c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 50%; }
      TD.30     { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 30%; }
      TD.30c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 30%; }
      TD.20     { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 20%; }
      TD.20c    { background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 20%; }
      TD.l12  { font-size:1.3em;padding-left:10px; border: 1px outset #4D4D4D; border-radius: 10px; align: left; valign: middle; width: 70%; }

div {
  height: 100px;
  line-height: 100px;
  text-align: center;
  
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height:50px; 
  font-size:15vw;
  color:#FFFF00;
}

.container{
    width: 110px;
    height: 110px;
    margin: 100px auto;
}

.containerb{
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
}
.containerc{
	height: 1%;
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
    
}
.containerb a{
    display: inline-block;
    width: 30%;
    height: 100%;
    margin:  auto;
    background-color: #000000; border: 1px outset #da7c0c; border-radius: 10px; color:#1E90FF;font-weight: bold;font-size: 1.7em;;
    padding: 0%;
    }
#btn1{
    float:left;
}
#btn3{
    float:right;
}
/* ===== ТЕПЛОВАЯ КАРТА ===== */
.heatmap,
.heatmap div,
.heatmap span,
.heatmap table,
.heatmap td,
.heatmap th {
    /* Сброс глобальных правил div/span из stile.php */
    height: auto !important;
    line-height: 1.2 !important;
    font-size: inherit;
    color: inherit;
    box-sizing: border-box;
}
.heatmap {
    display: block !important;
    background-color: #1a1a1a !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin: 25px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #333 !important;
    overflow: visible !important;
    height: auto !important;
    line-height: normal !important;
}
.heatmap-title {
    color: #FFA500;
    font-size: 1.4em;
    text-align: center;
    margin: 0 0 15px 0;
    font-weight: bold;
    line-height: 1.4 !important;
}

.heatmap-legend {
    text-align: center;
    margin: 0 0 18px 0;
    color: #FFFFFF !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    height: auto !important;
}

.heatmap-legend .legend-item {
    display: inline-block;
    vertical-align: middle;
    margin: 0 12px;
    color: #FFFFFF !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    height: auto !important;
    white-space: nowrap;
}

.heatmap-legend .legend-dot {
    display: inline-block;
    width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

.heatmap-legend .legend-dot.good   { background-color: #4CAF50; }
.heatmap-legend .legend-dot.medium { background-color: #A5D6A7 !important; }
.heatmap-legend .legend-dot.bad    { background-color: #F48FB1; }

.heatmap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 1em;
    table-layout: fixed;
}

.heatmap-table th {
    color: #BFBFBF;
    font-size: 0.9em;
    padding: 4px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center;
    font-weight: normal;
    height: auto !important;
}

.heatmap-table td.heat-cell {
    border-radius: 10px;
    padding: 6px 4px !important;
    text-align: center;
    font-weight: bold;
    height: 56px !important;
    min-height: 56px !important;
    vertical-align: middle;
    border: 2px solid transparent;
    transition: transform 0.15s ease;
    width: 14.28%;
    display: table-cell !important;
    line-height: 1.1 !important;
    background-clip: padding-box;
}

.heatmap-table td.heat-cell:hover { transform: scale(1.05); }
.heatmap-table td.heat-cell.good   { background-color: #4CAF50 !important; color: #fff !important; }
.heatmap-table td.heat-cell.medium { background-color: #A5D6A7 !important; color: #000 !important; }
.heatmap-table td.heat-cell.bad    { background-color: #F48FB1 !important; color: #000 !important; }
.heatmap-table td.heat-cell.today  { border-color: #FFA500; box-shadow: 0 0 10px #FFA500; }
.heatmap-table td.heat-cell.empty  { background: transparent !important; border: none; }

.heatmap-table .heat-day {
    font-size: 1.6em !important;
    line-height: 1.1 !important;
    height: auto !important;
    display: block;
    text-align: center;
    font-weight: bold;
}
.heatmap-table .heat-label {
    font-size: 0.85em !important;
    line-height: 1 !important;
    height: auto !important;
    display: block;
    text-align: center;
    margin-top: 4px;
    font-weight: bold;
    opacity: 0.95;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.heatmap-table .heat-tithi {
    font-size: 0.95em !important;
    opacity: 0.9;
    line-height: 1 !important;
    height: auto !important;
    display: block;
    text-align: center;
    margin-top: 2px;
}

/* ===== Навигация по месяцам в тепловой карте ===== */
.heatmap-nav {
    text-align: center !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.heatmap-nav .heatmap-title {
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 14px !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-align: center;
    white-space: nowrap;
    color: #FFA500 !important;
    font-size: 1.4em !important;
    font-weight: bold !important;
}

.heatmap-nav-btn {
    display: inline-flex !important;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
    text-decoration: none !important;
    color: #FFA500 !important;
    background: rgba(255, 165, 0, 0.15);
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: 10px;
    font-size: 1.3em !important;
    font-weight: bold;
    line-height: 1 !important;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
    transition: background 0.15s ease, transform 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
.heatmap-nav-btn:hover {
    background: rgba(255, 165, 0, 0.35);
    transform: scale(1.05);
}
.heatmap-nav-btn:active {
    transform: scale(0.97);
}


.rect-auto,.c100.p51 .slice,.c100.p52 .slice,.c100.p53 .slice,.c100.p54 .slice,.c100.p55 .slice,.c100.p56 .slice,.c100.p57 .slice,.c100.p58 .slice,.c100.p59 .slice,.c100.p60 .slice,.c100.p61 .slice,.c100.p62 .slice,.c100.p63 .slice,.c100.p64 .slice,.c100.p65 .slice,.c100.p66 .slice,.c100.p67 .slice,.c100.p68 .slice,.c100.p69 .slice,.c100.p70 .slice,.c100.p71 .slice,.c100.p72 .slice,.c100.p73 .slice,.c100.p74 .slice,.c100.p75 .slice,.c100.p76 .slice,.c100.p77 .slice,.c100.p78 .slice,.c100.p79 .slice,.c100.p80 .slice,.c100.p81 .slice,.c100.p82 .slice,.c100.p83 .slice,.c100.p84 .slice,.c100.p85 .slice,.c100.p86 .slice,.c100.p87 .slice,.c100.p88 .slice,.c100.p89 .slice,.c100.p90 .slice,.c100.p91 .slice,.c100.p92 .slice,.c100.p93 .slice,.c100.p94 .slice,.c100.p95 .slice,.c100.p96 .slice,.c100.p97 .slice,.c100.p98 .slice,.c100.p99 .slice,.c100.p100 .slice{clip:rect(auto, auto, auto, auto)}.pie,.c100 .bar,.c100.p51 .fill,.c100.p52 .fill,.c100.p53 .fill,.c100.p54 .fill,.c100.p55 .fill,.c100.p56 .fill,.c100.p57 .fill,.c100.p58 .fill,.c100.p59 .fill,.c100.p60 .fill,.c100.p61 .fill,.c100.p62 .fill,.c100.p63 .fill,.c100.p64 .fill,.c100.p65 .fill,.c100.p66 .fill,.c100.p67 .fill,.c100.p68 .fill,.c100.p69 .fill,.c100.p70 .fill,.c100.p71 .fill,.c100.p72 .fill,.c100.p73 .fill,.c100.p74 .fill,.c100.p75 .fill,.c100.p76 .fill,.c100.p77 .fill,.c100.p78 .fill,.c100.p79 .fill,.c100.p80 .fill,.c100.p81 .fill,.c100.p82 .fill,.c100.p83 .fill,.c100.p84 .fill,.c100.p85 .fill,.c100.p86 .fill,.c100.p87 .fill,.c100.p88 .fill,.c100.p89 .fill,.c100.p90 .fill,.c100.p91 .fill,.c100.p92 .fill,.c100.p93 .fill,.c100.p94 .fill,.c100.p95 .fill,.c100.p96 .fill,.c100.p97 .fill,.c100.p98 .fill,.c100.p99 .fill,.c100.p100 .fill{position:absolute;border:0.08em solid #FFFF00;width:0.84em;height:0.84em;clip:rect(0em, 0.5em, 1em, 0em);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}.pie-fill,.c100.p51 .bar:after,.c100.p51 .fill,.c100.p52 .bar:after,.c100.p52 .fill,.c100.p53 .bar:after,.c100.p53 .fill,.c100.p54 .bar:after,.c100.p54 .fill,.c100.p55 .bar:after,.c100.p55 .fill,.c100.p56 .bar:after,.c100.p56 .fill,.c100.p57 .bar:after,.c100.p57 .fill,.c100.p58 .bar:after,.c100.p58 .fill,.c100.p59 .bar:after,.c100.p59 .fill,.c100.p60 .bar:after,.c100.p60 .fill,.c100.p61 .bar:after,.c100.p61 .fill,.c100.p62 .bar:after,.c100.p62 .fill,.c100.p63 .bar:after,.c100.p63 .fill,.c100.p64 .bar:after,.c100.p64 .fill,.c100.p65 .bar:after,.c100.p65 .fill,.c100.p66 .bar:after,.c100.p66 .fill,.c100.p67 .bar:after,.c100.p67 .fill,.c100.p68 .bar:after,.c100.p68 .fill,.c100.p69 .bar:after,.c100.p69 .fill,.c100.p70 .bar:after,.c100.p70 .fill,.c100.p71 .bar:after,.c100.p71 .fill,.c100.p72 .bar:after,.c100.p72 .fill,.c100.p73 .bar:after,.c100.p73 .fill,.c100.p74 .bar:after,.c100.p74 .fill,.c100.p75 .bar:after,.c100.p75 .fill,.c100.p76 .bar:after,.c100.p76 .fill,.c100.p77 .bar:after,.c100.p77 .fill,.c100.p78 .bar:after,.c100.p78 .fill,.c100.p79 .bar:after,.c100.p79 .fill,.c100.p80 .bar:after,.c100.p80 .fill,.c100.p81 .bar:after,.c100.p81 .fill,.c100.p82 .bar:after,.c100.p82 .fill,.c100.p83 .bar:after,.c100.p83 .fill,.c100.p84 .bar:after,.c100.p84 .fill,.c100.p85 .bar:after,.c100.p85 .fill,.c100.p86 .bar:after,.c100.p86 .fill,.c100.p87 .bar:after,.c100.p87 .fill,.c100.p88 .bar:after,.c100.p88 .fill,.c100.p89 .bar:after,.c100.p89 .fill,.c100.p90 .bar:after,.c100.p90 .fill,.c100.p91 .bar:after,.c100.p91 .fill,.c100.p92 .bar:after,.c100.p92 .fill,.c100.p93 .bar:after,.c100.p93 .fill,.c100.p94 .bar:after,.c100.p94 .fill,.c100.p95 .bar:after,.c100.p95 .fill,.c100.p96 .bar:after,.c100.p96 .fill,.c100.p97 .bar:after,.c100.p97 .fill,.c100.p98 .bar:after,.c100.p98 .fill,.c100.p99 .bar:after,.c100.p99 .fill,.c100.p100 .bar:after,.c100.p100 .fill{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100{position:relative;font-size:120px;width:1em;height:1em;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;float:left;margin:0 0.1em 0.1em 0;background-color:#000000}.c100 *,.c100 *:before,.c100 *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.c100.center{float:none;margin:0 auto}.c100.big{font-size:240px}.c100.small{font-size:80px}.c100 > span{position:absolute;width:100%;z-index:1;left:0;top:0;width:-1em;line-height:2em;font-size:0.5em;color:#FFFFFF;display:block;text-align:center;white-space:nowrap;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.c100:after{position:absolute;top:0.08em;left:0.08em;display:block;content:" ";-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;background-color:#000000;width:0.84em;height:0.84em;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in}.c100 .slice{position:absolute;width:1em;height:1em;clip:rect(0em, 1em, 1em, 0.5em)}.c100.p1 .bar{-webkit-transform:rotate(3.6deg);-moz-transform:rotate(3.6deg);-ms-transform:rotate(3.6deg);-o-transform:rotate(3.6deg);transform:rotate(3.6deg)}.c100.p2 .bar{-webkit-transform:rotate(7.2deg);-moz-transform:rotate(7.2deg);-ms-transform:rotate(7.2deg);-o-transform:rotate(7.2deg);transform:rotate(7.2deg)}.c100.p3 .bar{-webkit-transform:rotate(10.8deg);-moz-transform:rotate(10.8deg);-ms-transform:rotate(10.8deg);-o-transform:rotate(10.8deg);transform:rotate(10.8deg)}.c100.p4 .bar{-webkit-transform:rotate(14.4deg);-moz-transform:rotate(14.4deg);-ms-transform:rotate(14.4deg);-o-transform:rotate(14.4deg);transform:rotate(14.4deg)}.c100.p5 .bar{-webkit-transform:rotate(18deg);-moz-transform:rotate(18deg);-ms-transform:rotate(18deg);-o-transform:rotate(18deg);transform:rotate(18deg)}.c100.p6 .bar{-webkit-transform:rotate(21.6deg);-moz-transform:rotate(21.6deg);-ms-transform:rotate(21.6deg);-o-transform:rotate(21.6deg);transform:rotate(21.6deg)}.c100.p7 .bar{-webkit-transform:rotate(25.2deg);-moz-transform:rotate(25.2deg);-ms-transform:rotate(25.2deg);-o-transform:rotate(25.2deg);transform:rotate(25.2deg)}.c100.p8 .bar{-webkit-transform:rotate(28.8deg);-moz-transform:rotate(28.8deg);-ms-transform:rotate(28.8deg);-o-transform:rotate(28.8deg);transform:rotate(28.8deg)}.c100.p9 .bar{-webkit-transform:rotate(32.4deg);-moz-transform:rotate(32.4deg);-ms-transform:rotate(32.4deg);-o-transform:rotate(32.4deg);transform:rotate(32.4deg)}.c100.p10 .bar{-webkit-transform:rotate(36deg);-moz-transform:rotate(36deg);-ms-transform:rotate(36deg);-o-transform:rotate(36deg);transform:rotate(36deg)}.c100.p11 .bar{-webkit-transform:rotate(39.6deg);-moz-transform:rotate(39.6deg);-ms-transform:rotate(39.6deg);-o-transform:rotate(39.6deg);transform:rotate(39.6deg)}.c100.p12 .bar{-webkit-transform:rotate(43.2deg);-moz-transform:rotate(43.2deg);-ms-transform:rotate(43.2deg);-o-transform:rotate(43.2deg);transform:rotate(43.2deg)}.c100.p13 .bar{-webkit-transform:rotate(46.8deg);-moz-transform:rotate(46.8deg);-ms-transform:rotate(46.8deg);-o-transform:rotate(46.8deg);transform:rotate(46.8deg)}.c100.p14 .bar{-webkit-transform:rotate(50.4deg);-moz-transform:rotate(50.4deg);-ms-transform:rotate(50.4deg);-o-transform:rotate(50.4deg);transform:rotate(50.4deg)}.c100.p15 .bar{-webkit-transform:rotate(54deg);-moz-transform:rotate(54deg);-ms-transform:rotate(54deg);-o-transform:rotate(54deg);transform:rotate(54deg)}.c100.p16 .bar{-webkit-transform:rotate(57.6deg);-moz-transform:rotate(57.6deg);-ms-transform:rotate(57.6deg);-o-transform:rotate(57.6deg);transform:rotate(57.6deg)}.c100.p17 .bar{-webkit-transform:rotate(61.2deg);-moz-transform:rotate(61.2deg);-ms-transform:rotate(61.2deg);-o-transform:rotate(61.2deg);transform:rotate(61.2deg)}.c100.p18 .bar{-webkit-transform:rotate(64.8deg);-moz-transform:rotate(64.8deg);-ms-transform:rotate(64.8deg);-o-transform:rotate(64.8deg);transform:rotate(64.8deg)}.c100.p19 .bar{-webkit-transform:rotate(68.4deg);-moz-transform:rotate(68.4deg);-ms-transform:rotate(68.4deg);-o-transform:rotate(68.4deg);transform:rotate(68.4deg)}.c100.p20 .bar{-webkit-transform:rotate(72deg);-moz-transform:rotate(72deg);-ms-transform:rotate(72deg);-o-transform:rotate(72deg);transform:rotate(72deg)}.c100.p21 .bar{-webkit-transform:rotate(75.6deg);-moz-transform:rotate(75.6deg);-ms-transform:rotate(75.6deg);-o-transform:rotate(75.6deg);transform:rotate(75.6deg)}.c100.p22 .bar{-webkit-transform:rotate(79.2deg);-moz-transform:rotate(79.2deg);-ms-transform:rotate(79.2deg);-o-transform:rotate(79.2deg);transform:rotate(79.2deg)}.c100.p23 .bar{-webkit-transform:rotate(82.8deg);-moz-transform:rotate(82.8deg);-ms-transform:rotate(82.8deg);-o-transform:rotate(82.8deg);transform:rotate(82.8deg)}.c100.p24 .bar{-webkit-transform:rotate(86.4deg);-moz-transform:rotate(86.4deg);-ms-transform:rotate(86.4deg);-o-transform:rotate(86.4deg);transform:rotate(86.4deg)}.c100.p25 .bar{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.c100.p26 .bar{-webkit-transform:rotate(93.6deg);-moz-transform:rotate(93.6deg);-ms-transform:rotate(93.6deg);-o-transform:rotate(93.6deg);transform:rotate(93.6deg)}.c100.p27 .bar{-webkit-transform:rotate(97.2deg);-moz-transform:rotate(97.2deg);-ms-transform:rotate(97.2deg);-o-transform:rotate(97.2deg);transform:rotate(97.2deg)}.c100.p28 .bar{-webkit-transform:rotate(100.8deg);-moz-transform:rotate(100.8deg);-ms-transform:rotate(100.8deg);-o-transform:rotate(100.8deg);transform:rotate(100.8deg)}.c100.p29 .bar{-webkit-transform:rotate(104.4deg);-moz-transform:rotate(104.4deg);-ms-transform:rotate(104.4deg);-o-transform:rotate(104.4deg);transform:rotate(104.4deg)}.c100.p30 .bar{-webkit-transform:rotate(108deg);-moz-transform:rotate(108deg);-ms-transform:rotate(108deg);-o-transform:rotate(108deg);transform:rotate(108deg)}.c100.p31 .bar{-webkit-transform:rotate(111.6deg);-moz-transform:rotate(111.6deg);-ms-transform:rotate(111.6deg);-o-transform:rotate(111.6deg);transform:rotate(111.6deg)}.c100.p32 .bar{-webkit-transform:rotate(115.2deg);-moz-transform:rotate(115.2deg);-ms-transform:rotate(115.2deg);-o-transform:rotate(115.2deg);transform:rotate(115.2deg)}.c100.p33 .bar{-webkit-transform:rotate(118.8deg);-moz-transform:rotate(118.8deg);-ms-transform:rotate(118.8deg);-o-transform:rotate(118.8deg);transform:rotate(118.8deg)}.c100.p34 .bar{-webkit-transform:rotate(122.4deg);-moz-transform:rotate(122.4deg);-ms-transform:rotate(122.4deg);-o-transform:rotate(122.4deg);transform:rotate(122.4deg)}.c100.p35 .bar{-webkit-transform:rotate(126deg);-moz-transform:rotate(126deg);-ms-transform:rotate(126deg);-o-transform:rotate(126deg);transform:rotate(126deg)}.c100.p36 .bar{-webkit-transform:rotate(129.6deg);-moz-transform:rotate(129.6deg);-ms-transform:rotate(129.6deg);-o-transform:rotate(129.6deg);transform:rotate(129.6deg)}.c100.p37 .bar{-webkit-transform:rotate(133.2deg);-moz-transform:rotate(133.2deg);-ms-transform:rotate(133.2deg);-o-transform:rotate(133.2deg);transform:rotate(133.2deg)}.c100.p38 .bar{-webkit-transform:rotate(136.8deg);-moz-transform:rotate(136.8deg);-ms-transform:rotate(136.8deg);-o-transform:rotate(136.8deg);transform:rotate(136.8deg)}.c100.p39 .bar{-webkit-transform:rotate(140.4deg);-moz-transform:rotate(140.4deg);-ms-transform:rotate(140.4deg);-o-transform:rotate(140.4deg);transform:rotate(140.4deg)}.c100.p40 .bar{-webkit-transform:rotate(144deg);-moz-transform:rotate(144deg);-ms-transform:rotate(144deg);-o-transform:rotate(144deg);transform:rotate(144deg)}.c100.p41 .bar{-webkit-transform:rotate(147.6deg);-moz-transform:rotate(147.6deg);-ms-transform:rotate(147.6deg);-o-transform:rotate(147.6deg);transform:rotate(147.6deg)}.c100.p42 .bar{-webkit-transform:rotate(151.2deg);-moz-transform:rotate(151.2deg);-ms-transform:rotate(151.2deg);-o-transform:rotate(151.2deg);transform:rotate(151.2deg)}.c100.p43 .bar{-webkit-transform:rotate(154.8deg);-moz-transform:rotate(154.8deg);-ms-transform:rotate(154.8deg);-o-transform:rotate(154.8deg);transform:rotate(154.8deg)}.c100.p44 .bar{-webkit-transform:rotate(158.4deg);-moz-transform:rotate(158.4deg);-ms-transform:rotate(158.4deg);-o-transform:rotate(158.4deg);transform:rotate(158.4deg)}.c100.p45 .bar{-webkit-transform:rotate(162deg);-moz-transform:rotate(162deg);-ms-transform:rotate(162deg);-o-transform:rotate(162deg);transform:rotate(162deg)}.c100.p46 .bar{-webkit-transform:rotate(165.6deg);-moz-transform:rotate(165.6deg);-ms-transform:rotate(165.6deg);-o-transform:rotate(165.6deg);transform:rotate(165.6deg)}.c100.p47 .bar{-webkit-transform:rotate(169.2deg);-moz-transform:rotate(169.2deg);-ms-transform:rotate(169.2deg);-o-transform:rotate(169.2deg);transform:rotate(169.2deg)}.c100.p48 .bar{-webkit-transform:rotate(172.8deg);-moz-transform:rotate(172.8deg);-ms-transform:rotate(172.8deg);-o-transform:rotate(172.8deg);transform:rotate(172.8deg)}.c100.p49 .bar{-webkit-transform:rotate(176.4deg);-moz-transform:rotate(176.4deg);-ms-transform:rotate(176.4deg);-o-transform:rotate(176.4deg);transform:rotate(176.4deg)}.c100.p50 .bar{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.c100.p51 .bar{-webkit-transform:rotate(183.6deg);-moz-transform:rotate(183.6deg);-ms-transform:rotate(183.6deg);-o-transform:rotate(183.6deg);transform:rotate(183.6deg)}.c100.p52 .bar{-webkit-transform:rotate(187.2deg);-moz-transform:rotate(187.2deg);-ms-transform:rotate(187.2deg);-o-transform:rotate(187.2deg);transform:rotate(187.2deg)}.c100.p53 .bar{-webkit-transform:rotate(190.8deg);-moz-transform:rotate(190.8deg);-ms-transform:rotate(190.8deg);-o-transform:rotate(190.8deg);transform:rotate(190.8deg)}.c100.p54 .bar{-webkit-transform:rotate(194.4deg);-moz-transform:rotate(194.4deg);-ms-transform:rotate(194.4deg);-o-transform:rotate(194.4deg);transform:rotate(194.4deg)}.c100.p55 .bar{-webkit-transform:rotate(198deg);-moz-transform:rotate(198deg);-ms-transform:rotate(198deg);-o-transform:rotate(198deg);transform:rotate(198deg)}.c100.p56 .bar{-webkit-transform:rotate(201.6deg);-moz-transform:rotate(201.6deg);-ms-transform:rotate(201.6deg);-o-transform:rotate(201.6deg);transform:rotate(201.6deg)}.c100.p57 .bar{-webkit-transform:rotate(205.2deg);-moz-transform:rotate(205.2deg);-ms-transform:rotate(205.2deg);-o-transform:rotate(205.2deg);transform:rotate(205.2deg)}.c100.p58 .bar{-webkit-transform:rotate(208.8deg);-moz-transform:rotate(208.8deg);-ms-transform:rotate(208.8deg);-o-transform:rotate(208.8deg);transform:rotate(208.8deg)}.c100.p59 .bar{-webkit-transform:rotate(212.4deg);-moz-transform:rotate(212.4deg);-ms-transform:rotate(212.4deg);-o-transform:rotate(212.4deg);transform:rotate(212.4deg)}.c100.p60 .bar{-webkit-transform:rotate(216deg);-moz-transform:rotate(216deg);-ms-transform:rotate(216deg);-o-transform:rotate(216deg);transform:rotate(216deg)}.c100.p61 .bar{-webkit-transform:rotate(219.6deg);-moz-transform:rotate(219.6deg);-ms-transform:rotate(219.6deg);-o-transform:rotate(219.6deg);transform:rotate(219.6deg)}.c100.p62 .bar{-webkit-transform:rotate(223.2deg);-moz-transform:rotate(223.2deg);-ms-transform:rotate(223.2deg);-o-transform:rotate(223.2deg);transform:rotate(223.2deg)}.c100.p63 .bar{-webkit-transform:rotate(226.8deg);-moz-transform:rotate(226.8deg);-ms-transform:rotate(226.8deg);-o-transform:rotate(226.8deg);transform:rotate(226.8deg)}.c100.p64 .bar{-webkit-transform:rotate(230.4deg);-moz-transform:rotate(230.4deg);-ms-transform:rotate(230.4deg);-o-transform:rotate(230.4deg);transform:rotate(230.4deg)}.c100.p65 .bar{-webkit-transform:rotate(234deg);-moz-transform:rotate(234deg);-ms-transform:rotate(234deg);-o-transform:rotate(234deg);transform:rotate(234deg)}.c100.p66 .bar{-webkit-transform:rotate(237.6deg);-moz-transform:rotate(237.6deg);-ms-transform:rotate(237.6deg);-o-transform:rotate(237.6deg);transform:rotate(237.6deg)}.c100.p67 .bar{-webkit-transform:rotate(241.2deg);-moz-transform:rotate(241.2deg);-ms-transform:rotate(241.2deg);-o-transform:rotate(241.2deg);transform:rotate(241.2deg)}.c100.p68 .bar{-webkit-transform:rotate(244.8deg);-moz-transform:rotate(244.8deg);-ms-transform:rotate(244.8deg);-o-transform:rotate(244.8deg);transform:rotate(244.8deg)}.c100.p69 .bar{-webkit-transform:rotate(248.4deg);-moz-transform:rotate(248.4deg);-ms-transform:rotate(248.4deg);-o-transform:rotate(248.4deg);transform:rotate(248.4deg)}.c100.p70 .bar{-webkit-transform:rotate(252deg);-moz-transform:rotate(252deg);-ms-transform:rotate(252deg);-o-transform:rotate(252deg);transform:rotate(252deg)}.c100.p71 .bar{-webkit-transform:rotate(255.6deg);-moz-transform:rotate(255.6deg);-ms-transform:rotate(255.6deg);-o-transform:rotate(255.6deg);transform:rotate(255.6deg)}.c100.p72 .bar{-webkit-transform:rotate(259.2deg);-moz-transform:rotate(259.2deg);-ms-transform:rotate(259.2deg);-o-transform:rotate(259.2deg);transform:rotate(259.2deg)}.c100.p73 .bar{-webkit-transform:rotate(262.8deg);-moz-transform:rotate(262.8deg);-ms-transform:rotate(262.8deg);-o-transform:rotate(262.8deg);transform:rotate(262.8deg)}.c100.p74 .bar{-webkit-transform:rotate(266.4deg);-moz-transform:rotate(266.4deg);-ms-transform:rotate(266.4deg);-o-transform:rotate(266.4deg);transform:rotate(266.4deg)}.c100.p75 .bar{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.c100.p76 .bar{-webkit-transform:rotate(273.6deg);-moz-transform:rotate(273.6deg);-ms-transform:rotate(273.6deg);-o-transform:rotate(273.6deg);transform:rotate(273.6deg)}.c100.p77 .bar{-webkit-transform:rotate(277.2deg);-moz-transform:rotate(277.2deg);-ms-transform:rotate(277.2deg);-o-transform:rotate(277.2deg);transform:rotate(277.2deg)}.c100.p78 .bar{-webkit-transform:rotate(280.8deg);-moz-transform:rotate(280.8deg);-ms-transform:rotate(280.8deg);-o-transform:rotate(280.8deg);transform:rotate(280.8deg)}.c100.p79 .bar{-webkit-transform:rotate(284.4deg);-moz-transform:rotate(284.4deg);-ms-transform:rotate(284.4deg);-o-transform:rotate(284.4deg);transform:rotate(284.4deg)}.c100.p80 .bar{-webkit-transform:rotate(288deg);-moz-transform:rotate(288deg);-ms-transform:rotate(288deg);-o-transform:rotate(288deg);transform:rotate(288deg)}.c100.p81 .bar{-webkit-transform:rotate(291.6deg);-moz-transform:rotate(291.6deg);-ms-transform:rotate(291.6deg);-o-transform:rotate(291.6deg);transform:rotate(291.6deg)}.c100.p82 .bar{-webkit-transform:rotate(295.2deg);-moz-transform:rotate(295.2deg);-ms-transform:rotate(295.2deg);-o-transform:rotate(295.2deg);transform:rotate(295.2deg)}.c100.p83 .bar{-webkit-transform:rotate(298.8deg);-moz-transform:rotate(298.8deg);-ms-transform:rotate(298.8deg);-o-transform:rotate(298.8deg);transform:rotate(298.8deg)}.c100.p84 .bar{-webkit-transform:rotate(302.4deg);-moz-transform:rotate(302.4deg);-ms-transform:rotate(302.4deg);-o-transform:rotate(302.4deg);transform:rotate(302.4deg)}.c100.p85 .bar{-webkit-transform:rotate(306deg);-moz-transform:rotate(306deg);-ms-transform:rotate(306deg);-o-transform:rotate(306deg);transform:rotate(306deg)}.c100.p86 .bar{-webkit-transform:rotate(309.6deg);-moz-transform:rotate(309.6deg);-ms-transform:rotate(309.6deg);-o-transform:rotate(309.6deg);transform:rotate(309.6deg)}.c100.p87 .bar{-webkit-transform:rotate(313.2deg);-moz-transform:rotate(313.2deg);-ms-transform:rotate(313.2deg);-o-transform:rotate(313.2deg);transform:rotate(313.2deg)}.c100.p88 .bar{-webkit-transform:rotate(316.8deg);-moz-transform:rotate(316.8deg);-ms-transform:rotate(316.8deg);-o-transform:rotate(316.8deg);transform:rotate(316.8deg)}.c100.p89 .bar{-webkit-transform:rotate(320.4deg);-moz-transform:rotate(320.4deg);-ms-transform:rotate(320.4deg);-o-transform:rotate(320.4deg);transform:rotate(320.4deg)}.c100.p90 .bar{-webkit-transform:rotate(324deg);-moz-transform:rotate(324deg);-ms-transform:rotate(324deg);-o-transform:rotate(324deg);transform:rotate(324deg)}.c100.p91 .bar{-webkit-transform:rotate(327.6deg);-moz-transform:rotate(327.6deg);-ms-transform:rotate(327.6deg);-o-transform:rotate(327.6deg);transform:rotate(327.6deg)}.c100.p92 .bar{-webkit-transform:rotate(331.2deg);-moz-transform:rotate(331.2deg);-ms-transform:rotate(331.2deg);-o-transform:rotate(331.2deg);transform:rotate(331.2deg)}.c100.p93 .bar{-webkit-transform:rotate(334.8deg);-moz-transform:rotate(334.8deg);-ms-transform:rotate(334.8deg);-o-transform:rotate(334.8deg);transform:rotate(334.8deg)}.c100.p94 .bar{-webkit-transform:rotate(338.4deg);-moz-transform:rotate(338.4deg);-ms-transform:rotate(338.4deg);-o-transform:rotate(338.4deg);transform:rotate(338.4deg)}.c100.p95 .bar{-webkit-transform:rotate(342deg);-moz-transform:rotate(342deg);-ms-transform:rotate(342deg);-o-transform:rotate(342deg);transform:rotate(342deg)}.c100.p96 .bar{-webkit-transform:rotate(345.6deg);-moz-transform:rotate(345.6deg);-ms-transform:rotate(345.6deg);-o-transform:rotate(345.6deg);transform:rotate(345.6deg)}.c100.p97 .bar{-webkit-transform:rotate(349.2deg);-moz-transform:rotate(349.2deg);-ms-transform:rotate(349.2deg);-o-transform:rotate(349.2deg);transform:rotate(349.2deg)}.c100.p98 .bar{-webkit-transform:rotate(352.8deg);-moz-transform:rotate(352.8deg);-ms-transform:rotate(352.8deg);-o-transform:rotate(352.8deg);transform:rotate(352.8deg)}.c100.p99 .bar{-webkit-transform:rotate(356.4deg);-moz-transform:rotate(356.4deg);-ms-transform:rotate(356.4deg);-o-transform:rotate(356.4deg);transform:rotate(356.4deg)}.c100.p100 .bar{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}.c100:hover{cursor:default}.c100:hover > span{width:3.33em;line-height:3.33em;font-size:0.3em;color:#307bbb}.c100:hover:after{top:0.04em;left:0.04em;width:0.92em;height:0.92em}.c100.dark{background-color:#777777}.c100.dark .bar,.c100.dark .fill{border-color:#c6ff00 !important}.c100.dark > span{color:#777777}.c100.dark:after{background-color:#666666}.c100.dark:hover > span{color:#c6ff00}.c100.green .bar,.c100.green .fill{border-color:#4db53c !important}.c100.green:hover > span{color:#4db53c}.c100.green.dark .bar,.c100.green.dark .fill{border-color:#5fd400 !important}.c100.green.dark:hover > span{color:#5fd400}.c100.orange .bar,.c100.orange .fill{border-color:#dd9d22 !important}.c100.orange:hover > span{color:#dd9d22}.c100.orange.dark .bar,.c100.orange.dark .fill{border-color:#e08833 !important}.c100.orange.dark:hover > span{color:#e08833}
</STYLE>




<style>
    .moon-coords {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    padding: 6px 10px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    margin: 6px auto 0 auto !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    color: #BFBFBF !important;
    font-family: Arial, sans-serif !important;
    box-sizing: border-box !important;
}
.moon-coords-item {
    display: inline-block !important;
    margin: 2px 6px !important;
    padding: 0 !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
}
.moon-coords-item b {
    color: #FFEB3B !important;
    font-weight: bold !important;
    font-size: inherit !important;
}
.moon-coords-city {
    display: inline-block !important;
    padding: 2px 8px !important;
    margin: 2px 6px !important;
    background: rgba(255,165,0,0.18) !important;
    border: 1px solid rgba(255,165,0,0.5) !important;
    border-radius: 6px !important;
    color: #FFA500 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
}
.moon-coords-city b {
    color: #FFEB3B !important;
    font-size: inherit !important;
}
.moon-coords-edit {
    display: inline-block !important;
    padding: 2px 8px !important;
    margin: 2px 6px !important;
    color: #FFA500 !important;
    text-decoration: none !important;
    background: rgba(255,165,0,0.15) !important;
    border: 1px solid rgba(255,165,0,0.4) !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1.3 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}
.moon-coords-edit:hover {
    background: rgba(255,165,0,0.35) !important;
    transform: scale(1.04) !important;
}

@media (max-width: 640px) {
    .moon-coords,
    .moon-coords-item,
    .moon-coords-city,
    .moon-coords-edit { font-size: 11px !important; }
    .moon-coords { padding: 5px 8px !important; gap: 4px !important; }
    .moon-coords-item { margin: 2px 4px !important; }
}
    </style>
<div align=center style="border-radius:20px;background-color:#332F2F; line-height: 1.0;vertical-align:top;margin: 0 auto;width:100%;text-align:center">
	<table style="width:100%;" align=center>
		<tr>
		<td colspan=2 style="height:60px;border-bottom-width:thick; border-bottom:solid 3px #7F7878;text-align:center; background-color:black;color:#FFFFFF; font-size:1.3em;font-family: "'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;">
        <a style="text-align:left;color:#FFA500;" href="mooncalc/setcoord.php" onclick="popupwindow('mooncalc/setcoord.php', '...',400,400); return false;"><img src="mooncalc/wing.png" align="left" style="    margin-left: 5px;text-align:left;border-radius:5px;background-color:#E6E6FA;" width="45" height="45" border="1"></a>
		Универсальный лунный календарь. На любую дату и время. 
		</td>
        
       <tr>
<td colspan=2 style="padding:0 5px;">
    <div class="moon-coords">
                <span class="moon-coords-item">
            📍 Широта: <b>40.0°</b>
        </span>
        <span class="moon-coords-item">
            🌐 Долгота: <b>-83.0°</b>
        </span>
        <span class="moon-coords-item">
            🕒 Пояс: <b>America/Halifax</b>
            (UTC-3)
        </span>
        <a class="moon-coords-edit"
           href="mooncalc/setcoord.php"
           onclick="popupwindow('mooncalc/setcoord.php', 'Координаты', 420, 480); return false;">
            ✎ изменить
        </a>
    </div>
</td>
</tr>

        	
		</tr>	
		
		<tr>
			<td style="width:65%;" align="center">	
        <br>
        	</td>
		
		</tr>	
		
		<tr>
			<td style="width:65%;" align="center">	
                        <STYLE type="text/css">
      TABLE  { padding:10px;font-size:1.2em;color: #FFFFFF;background-color: #000000; empty-cells: hide ;width: 100%; border: 0px outset #da7c0c; border-radius: 20px; cellpadding: 1; cellspacing: 10;align: center;}
      TD.40c    {font-size:1em; background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: center; valign: middle; width: 40%; }
      TD.60c     { font-size:1em;background-color: #96c5d3; border: 2px outset #da7c0c; border-radius: 10px; align: left; valign: middle; width: 60%;}
</style>

				<table style="width:100%;margin: 0 auto;" align=center>

				<tr>
					<td class="40c" align="left"><p>Дата и время</p></td>
					<td class="60c" align="center"><p>21-07-2030 9:06  Воскресенье</p></td>
				</tr>

<tr>
    <td class="40c" align="left"><p>Лунный день</p></td>
    <td class="60c" align="center">
        <p style="">
            20        </p>
    </td>
</tr>

<tr>
    <td class="40c" align="left"><p>Окончание</p></td>
    <td class="60c" align="center">
        <p>22.07.2030 01:21</p>
    </td>
</tr>
                <tr>
					<td class="40c" align="left"><p>Фаза луны</p></td>
					<td class="60c" align="center"><p>Убывающая - 58.2%</p></td>
				</tr>	
				<tr>
					<td class="40c" align="left"><p>Астро-фаза</p></td>
					<td class="60c" align="center"><p>Последняя четверть </p></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Знак Луны</p></td>
					<td class="60c" align="center">
						<p style="color:#FFEB3B;font-weight:bold;font-size:1.1em;">
							♈							Овен						</p>
					</td>
				</tr>
				<tr>
					<td class="40c" align="left"><p>Знак Солнца</p></td>
					<td class="60c" align="center">
						<p style="color:#FFA500;font-weight:bold;font-size:1.1em;">
							♋							Рак						</p>
					</td>
				</tr>
				
                				
				<tr>
					<td class="40c" align="left" ><p >Восход луны</p></td>
					<td class="60c" align="center" style="color:#B8B80C"><p>21-07-2030 0:51</p></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Заход луны</p></td>
					<td class="60c" align="center" style="color:#A5BFDA"><p>21-07-2030 14:31</p></td>
				</tr>	
				
                
				<tr>
					<td class="40c" align="left"><p>Ваши координаты</p></td>
					<td class="60c" align="center"><a style="text-align:center;text-decoration: none;color:white;" href="mooncalc/setcoord.php" onclick="popupwindow('mooncalc/setcoord.php', '...',400,400); return false;"><pre>-83.0д &nbsp 40.0ш </pre></a></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Часовой пояс</p></td>
					<td class="60c" align="center"><p>America/Sao_Paulo</p></td>
				</tr>	

				<tr>
					<td class="40c" align="left"><p>Новолуние</p></td>
					<td class="60c" align="center"><p>   30-07-2030 8:11 </p></td>
				</tr>
				<tr>
					<td class="40c" align="left"><p>Полнолуние</p></td>
					<td class="60c" align="center"><p>   14-07-2030 23:11 </p></td>
				</tr>
				<tr>
					<td class="40c" align="left"><p>Следующее полнолуние</p></td>
					<td class="60c" align="center"><p>   13-08-2030 7:44 </p></td>
				</tr>

				</table>	
			</td>
			<td style="width:35%;" align="center">
                        
<STYLE type="text/css">
.container{
    width: 110px;
    height: 110px;
    margin: 100px auto;
}

.containerb{
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
}
.containerc{
	height: 1%;
    width: 100%;
    float: left;
    border: solid 0px blue;
    text-align: center;
    
}
.containerb a{
    display: inline-block;
    width: 30%;
    height: 100%;
    margin:  auto;
    background-color: #000000; border: 1px outset #da7c0c; border-radius: 10px; color:#1E90FF;font-weight: bold;font-size: 0.99em;
    padding: 0%;
    }

#btn1{
    float:left;
}
#btn3{
    float:right;
}
</STYLE>

	
<div class="c100 p58 center">
				<span>
				20								</span>
				
					<div class="slice">
						<div class="bar"></div>
						<div class="fill"></div>
					</div>
				</div>
				<br>
				<p align="left" style="text-align:center;font-size:1.0em; color:#FFFFFF;" > до 22.07.2030 01:21</p></div>
<input type="text" id="dt2" placeholder="ГГГГ-ММ-ДД" pattern="\d{4}-\d{2}-\d{2}"
style="border-radius:7px; text-align:center;font-size:1.3em;"
value="2030-07-21"
onchange="elog('change',this);"
onkeypress="if(event.keyCode==13){this.onchange();return false;}" />
                        
                        <input type="time" class="form-control"  style="border-radius: 7px;text-align:center;font-size:1.3em;"
                         value="09:06 " 
                        onchange="elog('change',this);return false;"
                         id="dt3" name="until_t" />
               
               <div class='containerb'>
               <table align="center" style="width:80%;cellspacing:10;cellpadding:1;max-height:30px;">
				   <tr >  
					   <td style="width:50%">  <a class="button" id="btn1" style="text-align:center;text-decoration:none;width:100%;height:100%;" href="moon.php?d=2030-07-20&t=09:06 " class="button" id="btn2" style="text-align:center;text-decoration:none;"><pre>предыдущий <br>день</pre></a></td>
					   <td style="width:50%">  <a class="button" id="btn3" style="text-align:center;text-decoration:none;width:100%;height:100%;" href="moon.php?d=2030-07-22&t=09:06 " class="button" id="btn2" style="text-align:center;text-decoration:none;"><pre>следующий <br>день</pre></a></td>
				   </tr>
				   <tr>
					   <td colspan=2 > <a class="button" id="btn2" style="text-align:center;text-decoration:none;width:100%;height:100%;" href="moon.php?d=2026-10-04&t=07:33 " class="button" id="btn2" style="text-align:center;text-decoration:none;"><pre>сейчас</pre></a></td>
                   </tr>
               </table>
               </div>
               
             
			</td>
		</tr>
	</table>

<br><br>
<iframe src="heatmap_online.php?d=2030-07-21&t=09:06"
        style="width:100%; border:none; border-radius:20px; background:#000; margin:20px 0; height:650px; display:block;"
        scrolling="no"
        id="heatmap_ifrm">
</iframe>
   	 
<style>
/* =================== ОПИСАНИЕ ЛУННОГО ДНЯ =================== */
.moonday-wrap {
    display: block !important;
    background: linear-gradient(160deg, #14161c 0%, #0d0f13 100%) !important;
    border: 1px solid #2a2f3a !important;
    border-radius: 22px !important;
    padding: 24px 20px 20px 20px !important;
    margin: 30px 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', Arial, sans-serif !important;
    color: #E6E6FA !important;
}
.moonday-wrap * { box-sizing: border-box !important; }

/* --- Заголовок --- */
.moonday-header {
    display: block !important;
    text-align: center !important;
    margin: 0 0 20px 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.moonday-badge {
    display: inline-block !important;
    padding: 6px 16px !important;
    background: linear-gradient(135deg, rgba(255,165,0,0.25), rgba(255,235,59,0.12)) !important;
    border: 1px solid rgba(255,165,0,0.45) !important;
    border-radius: 24px !important;
    color: #FFA500 !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
    height: auto !important;
    margin: 0 0 10px 0 !important;
    box-shadow: 0 0 18px rgba(255,165,0,0.25) !important;
}
.moonday-title {
    display: block !important;
    font-size: 1.7em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    height: auto !important;
    text-shadow: 0 0 14px rgba(255,165,0,0.5) !important;
}
.moonday-title .num {
    color: #FFEB3B !important;
    font-size: 1.15em !important;
}
.moonday-subtitle {
    display: block !important;
    margin-top: 8px !important;
    color: #B8B80C !important;
    font-size: 0.95em !important;
    line-height: 1.4 !important;
    height: auto !important;
    font-weight: normal !important;
}

/* --- Контент описания --- */
.moonday-content {
    display: block !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    border: 1px solid #2c323d !important;
    border-radius: 16px !important;
    padding: 22px 22px !important;
    margin: 0 0 16px 0 !important;
    color: #E6E6FA !important;
    font-size: 1.05em !important;
    line-height: 1.55 !important;
    height: auto !important;
    text-align: left !important;
    position: relative !important;
    overflow: hidden !important;
}
.moonday-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(180deg, #FFA500, #FFEB3B) !important;
    opacity: 0.8 !important;
}
.moonday-content h2,
.moonday-content h3,
.moonday-content p,
.moonday-content div,
.moonday-content span,
.moonday-content strong,
.moonday-content em {
    display: block !important;
    height: auto !important;
    line-height: 1.55 !important;
    color: #E6E6FA !important;
    font-size: 1em !important;
    text-align: left !important;
    font-family: inherit !important;
    margin: 0 0 12px 0 !important;
}
.moonday-content h2,
.moonday-content h3 {
    font-size: 1.1em !important;
    color: #FFEB3B !important;
    font-weight: bold !important;
    margin: 0 0 10px 0 !important;
}
.moonday-content p:last-child,
.moonday-content div:last-child {
    margin-bottom: 0 !important;
}

/* Ключевые врезки внутри описания */
.moonday-content b,
.moonday-content strong {
    display: inline !important;
    color: #FFEB3B !important;
    font-weight: bold !important;
    margin: 0 !important;
    line-height: inherit !important;
    font-size: inherit !important;
}

/* --- Блок "Рожденные в этот день" (если в HTML есть отдельный блок) --- */
.moonday-content .born {
    display: block !important;
    margin-top: 14px !important;
    padding: 14px 16px !important;
    background: rgba(255,165,0,0.08) !important;
    border-left: 3px solid #FFA500 !important;
    border-radius: 8px !important;
    color: #FFE082 !important;
    font-size: 0.98em !important;
    line-height: 1.5 !important;
    height: auto !important;
}

/* --- Селектор выбора другого дня --- */
.moonday-select-wrap {
    display: block !important;
    margin: 0 0 14px 0 !important;
    text-align: center !important;
    height: auto !important;
    line-height: normal !important;
}
.moonday-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    color: #FFA500 !important;
    font-size: 1.05em !important;
    font-weight: bold !important;
    border: 1px solid rgba(255,165,0,0.4) !important;
    border-radius: 12px !important;
    text-align: center !important;
    text-align-last: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.3 !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}
.moonday-select:hover,
.moonday-select:focus {
    background: linear-gradient(150deg, #262b36 0%, #1a1d24 100%) !important;
    border-color: #FFA500 !important;
    box-shadow: 0 0 18px rgba(255,165,0,0.3) !important;
}

/* --- Подсказка внизу --- */
.moonday-hint {
    display: block !important;
    text-align: center !important;
    color: #8b93a4 !important;
    font-size: 0.7em !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    font-weight: normal !important;
    opacity: 0.85 !important;
}
.moonday-hint .gear {
    color: #FFA500 !important;
    font-weight: bold !important;
    font-size: 0.95em !important;
}
@media (max-width: 640px) {
    .moonday-title { font-size: 1.35em !important; }
    .moonday-content { padding: 16px !important; font-size: 1em !important; }
}
</style>

<div class="moonday-wrap">

    <div class="moonday-header">
        <div class="moonday-badge">Лунный день 20</div>
        <div class="moonday-title">
            Описание <span class="num">20</span>-го лунного дня
        </div>
        <div class="moonday-subtitle">
            21.07.2030 · 22-е титхи
        </div>
    </div>

    <div class="moonday-content">
        Хороший день.
Этот день подходит для бизнеса, домашних дел, и начинаний.
Неблагоприятен для застолий и посиделок.
<br><br>
Рожденные в этот день: Не впадайте в гордость. Не перенапрягайтесь. Чувство легкости и восторга по жизни. Творческие. Активные. 
    </div>

    <div class="moonday-select-wrap">
        <select id="dt22" name="md22" class="moonday-select"
                oninput="elog('input',this);return false;"
                onchange="elog('change',this);return false;"
                onblur="elog('blur',this);return false;"
                onfocus="elog('focus',this);return false;"
                onkeyup="elog('keyup-'+event.keyCode,this);return false;"
                onkeypress="elog('keypress-'+event.keyCode,this);if(event.keyCode==13){this.onchange();return false;}">
            <option selected disabled>🔮 Посмотреть описание любого другого лунного дня</option>
                            <option value="1" >
                    1-й лунный день
                </option>
                            <option value="2" >
                    2-й лунный день
                </option>
                            <option value="3" >
                    3-й лунный день
                </option>
                            <option value="4" >
                    4-й лунный день
                </option>
                            <option value="5" >
                    5-й лунный день
                </option>
                            <option value="6" >
                    6-й лунный день
                </option>
                            <option value="7" >
                    7-й лунный день
                </option>
                            <option value="8" >
                    8-й лунный день
                </option>
                            <option value="9" >
                    9-й лунный день
                </option>
                            <option value="10" >
                    10-й лунный день
                </option>
                            <option value="11" >
                    11-й лунный день
                </option>
                            <option value="12" >
                    12-й лунный день
                </option>
                            <option value="13" >
                    13-й лунный день
                </option>
                            <option value="14" >
                    14-й лунный день
                </option>
                            <option value="15" >
                    15-й лунный день
                </option>
                            <option value="16" >
                    16-й лунный день
                </option>
                            <option value="17" >
                    17-й лунный день
                </option>
                            <option value="18" >
                    18-й лунный день
                </option>
                            <option value="19" >
                    19-й лунный день
                </option>
                            <option value="20" selected>
                    20-й лунный день
                </option>
                            <option value="21" >
                    21-й лунный день
                </option>
                            <option value="22" >
                    22-й лунный день
                </option>
                            <option value="23" >
                    23-й лунный день
                </option>
                            <option value="24" >
                    24-й лунный день
                </option>
                            <option value="25" >
                    25-й лунный день
                </option>
                            <option value="26" >
                    26-й лунный день
                </option>
                            <option value="27" >
                    27-й лунный день
                </option>
                            <option value="28" >
                    28-й лунный день
                </option>
                            <option value="29" >
                    29-й лунный день
                </option>
                            <option value="30" >
                    30-й лунный день
                </option>
                    </select>
    </div>

    <p class="moonday-hint">
        <span class="gear">⚙</span>
        Для более точного расчёта можно установить широту и долготу вручную
        <br>(кнопка с шестернёй вверху слева)
    </p>

</div>

 
<style>
/* =================== СОБЫТИЯ ГОДА =================== */
.events-wrap {
    display: block !important;
    background: linear-gradient(160deg, #14161c 0%, #0d0f13 100%) !important;
    border: 1px solid #2a2f3a !important;
    border-radius: 22px !important;
    padding: 24px 18px !important;
    margin: 30px 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
    color: #E6E6FA !important;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', Arial, sans-serif !important;
}
.events-wrap * { box-sizing: border-box !important; }

/* Сброс глобальных правил span/div из stile.php */
.events-wrap span,
.events-wrap b,
.events-wrap strong {
    display: inline !important;
    vertical-align: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.events-title {
    display: block !important;
    color: #FFA500 !important;
    font-size: 1.45em !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    height: auto !important;
    text-shadow: 0 0 12px rgba(255,165,0,0.35);
}
.events-subtitle {
    display: block !important;
    text-align: center !important;
    color: #8b93a4 !important;
    font-size: 0.9em !important;
    margin: 0 0 20px 0 !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.events-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}
.ev-card {
    display: block !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    border: 1px solid #2c323d !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px 14px !important;
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.ev-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 4px !important; height: 100% !important;
    background: #FFA500 !important;
    opacity: 0.8 !important;
}
.ev-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255,165,0,0.5) !important;
    box-shadow: 0 8px 24px rgba(255,165,0,0.15) !important;
}

.ev-card.ev-solar::before  { background: #FFA500 !important; }
.ev-card.ev-lunar::before  { background: #B39DDB !important; }
.ev-card.ev-spring::before { background: #4CAF50 !important; }
.ev-card.ev-summer::before { background: #F44336 !important; }
.ev-card.ev-autumn::before { background: #FF7043 !important; }
.ev-card.ev-winter::before { background: #29B6F6 !important; }

.ev-card.ev-cross::before  { background: #66BB6A !important; }
.ev-card.ev-peri::before   { background: #FFD54F !important; }
.ev-card.ev-aphe::before   { background: #64B5F6 !important; }

.ev-card.ev-orth::before          { background: #C8A95B !important; }
.ev-card.ev-orth-christmas::before{ background: #E8B84B !important; }
.ev-card.ev-orth-epiphany::before { background: #4FC3F7 !important; }
.ev-card.ev-orth-mary::before     { background: #90CAF9 !important; }
.ev-card.ev-orth-cross::before    { background: #B71C1C !important; }
.ev-card.ev-orth-transfig::before { background: #FFD54F !important; }
.ev-card.ev-orth-easter::before   { background: linear-gradient(180deg, #FFEB3B, #FF9800) !important; }
.ev-card.ev-orth-palm::before     { background: #66BB6A !important; }
.ev-card.ev-orth-trinity::before  { background: #81C784 !important; }
.ev-card.ev-orth-nikolay::before  { background: #6D4C41 !important; }
.ev-card.ev-orth-georgiy::before  { background: #C62828 !important; }
.ev-card.ev-orth-petr-pavel::before { background: #5D4037 !important; }
.ev-card.ev-orth-ioann::before    { background: #66BB6A !important; }
.ev-card.ev-orth-mihail::before   { background: #455A64 !important; }
.ev-card.ev-orth-obrezanie::before{ background: #8D6E63 !important; }

.ev-card.ev-retro-mercury::before { background: #FF9800 !important; }
.ev-card.ev-retro-venus::before   { background: #F06292 !important; }
.ev-card.ev-retro-mars::before    { background: #E53935 !important; }

.ev-card.ev-upcoming {
    border-color: rgba(255,165,0,0.45) !important;
    box-shadow: 0 0 18px rgba(255,165,0,0.12) !important;
}

/* --- Активный ретроградный период --- */
.ev-card.ev-active {
    border-color: rgba(255,82,82,0.7) !important;
    box-shadow:
        0 0 0 2px rgba(255,82,82,0.35),
        0 0 22px rgba(255,82,82,0.35) !important;
    animation: evActivePulse 2s ease-in-out infinite !important;
}
.ev-card.ev-active::before {
    background: #FF5252 !important;
    box-shadow: 0 0 12px #FF5252 !important;
}
@keyframes evActivePulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(255,82,82,0.35),
            0 0 22px rgba(255,82,82,0.35);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(255,82,82,0.55),
            0 0 34px rgba(255,82,82,0.55);
    }
}

.ev-icon {
    display: inline-block !important;
    font-size: 1.6em !important;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
    vertical-align: middle !important;
}
.ev-label {
    display: block !important;
    font-size: 0.72em !important;
    color: #8b93a4 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
}
.ev-date {
    display: block !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    height: auto !important;
}
.ev-time {
    display: block !important;
    font-size: 0.9em !important;
    color: #FFEB3B !important;
    line-height: 1.3 !important;
    margin-top: 4px !important;
    height: auto !important;
    font-weight: normal !important;
}
.ev-status {
    display: block !important;
    font-size: 0.78em !important;
    color: #8b93a4 !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    height: auto !important;
}
.ev-card.ev-upcoming .ev-status { color: #FFEB3B !important; }
.ev-card .ev-status.ev-today    { color: #FF5252 !important; font-weight: bold !important; }

/* --- Активный статус --- */
.ev-card .ev-status.ev-now {
    color: #FF5252 !important;
    font-weight: bold !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78em !important;
    line-height: 1.3 !important;
    height: auto !important;
}
.ev-card .ev-status.ev-now > span:not(.ev-live-dot) {
    display: inline !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    vertical-align: middle !important;
}
.ev-live-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    max-width: 8px !important;
    max-height: 8px !important;
    border-radius: 50% !important;
    background: #FF5252 !important;
    box-shadow: 0 0 8px #FF5252, 0 0 14px rgba(255,82,82,0.6) !important;
    animation: evLiveBlink 1.2s ease-in-out infinite !important;
    vertical-align: middle !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
@keyframes evLiveBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@media (max-width: 640px) {
    .events-grid { grid-template-columns: 1fr !important; }
}
</style>

<div class="events-wrap">
    <div class="events-title">🌠 Особые периоды и события</div>
    <div class="events-subtitle">
        Предстоящих событий: 14 · расчёт на 2030 год
    </div>

    <div class="events-grid">
            <div class="ev-card ev-cross ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-cross',
                 'Лугнасад',
                 '2030-08-01',
                 '');">
            <div class="ev-icon">🌿</div>
            <div class="ev-label">Лугнасад</div>
            <div class="ev-date">1 авг 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 11 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-transfig ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-transfig',
                 'Преображение Господне',
                 '2030-08-19',
                 '');">
            <div class="ev-icon">✨</div>
            <div class="ev-label">Преображение Господне</div>
            <div class="ev-date">19 авг 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 29 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Успение Пресвятой Богородицы',
                 '2030-08-28',
                 '');">
            <div class="ev-icon">🌾</div>
            <div class="ev-label">Успение Пресвятой Богородицы</div>
            <div class="ev-date">28 авг 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 38 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Рождество Пресвятой Богородицы',
                 '2030-09-21',
                 '');">
            <div class="ev-icon">🌸</div>
            <div class="ev-label">Рождество Пресвятой Богородицы</div>
            <div class="ev-date">21 сен 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 62 дн
                            </div>
        </div>
            <div class="ev-card ev-autumn ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-autumn',
                 'Осеннее равноденствие',
                 '2030-09-22',
                 '');">
            <div class="ev-icon">🍂</div>
            <div class="ev-label">Осеннее равноденствие</div>
            <div class="ev-date">22 сен 2030</div>
                            <div class="ev-time">20:33 (местное)</div>
                        <div class="ev-status ">
                                    через 63 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-cross ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-cross',
                 'Воздвижение Креста Господня',
                 '2030-09-27',
                 '');">
            <div class="ev-icon">✝️</div>
            <div class="ev-label">Воздвижение Креста Господня</div>
            <div class="ev-date">27 сен 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 68 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Покров Пресвятой Богородицы',
                 '2030-10-14',
                 '');">
            <div class="ev-icon">🛡</div>
            <div class="ev-label">Покров Пресвятой Богородицы</div>
            <div class="ev-date">14 окт 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 85 дн
                            </div>
        </div>
            <div class="ev-card ev-cross ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-cross',
                 'Самайн',
                 '2030-11-01',
                 '');">
            <div class="ev-icon">🌿</div>
            <div class="ev-label">Самайн</div>
            <div class="ev-date">1 ноя 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 103 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Казанская икона Божией Матери',
                 '2030-11-04',
                 '');">
            <div class="ev-icon">🕯</div>
            <div class="ev-label">Казанская икона Божией Матери</div>
            <div class="ev-date">4 ноя 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 106 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mihail ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mihail',
                 'Архангел Михаил',
                 '2030-11-21',
                 '');">
            <div class="ev-icon">⚔️</div>
            <div class="ev-label">Архангел Михаил</div>
            <div class="ev-date">21 ноя 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 123 дн
                            </div>
        </div>
            <div class="ev-card ev-solar ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-solar',
                 'Солнечное затмение',
                 '2030-11-25',
                 '');">
            <div class="ev-icon">☀️</div>
            <div class="ev-label">Солнечное затмение</div>
            <div class="ev-date">25 ноя 2030</div>
                            <div class="ev-time">03:47 (местное)</div>
                        <div class="ev-status ">
                                    через 127 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-mary ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-mary',
                 'Введение во храм Пресвятой Богородицы',
                 '2030-12-04',
                 '');">
            <div class="ev-icon">🕊</div>
            <div class="ev-label">Введение во храм Пресвятой Богородицы</div>
            <div class="ev-date">4 дек 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 136 дн
                            </div>
        </div>
            <div class="ev-card ev-orth-nikolay ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-orth-nikolay',
                 'Святитель Николай Мирликийский',
                 '2030-12-19',
                 '');">
            <div class="ev-icon">⛪</div>
            <div class="ev-label">Святитель Николай Мирликийский</div>
            <div class="ev-date">19 дек 2030</div>
                            <div class="ev-time">09:00 (местное)</div>
                        <div class="ev-status ">
                                    через 151 дн
                            </div>
        </div>
            <div class="ev-card ev-winter ev-upcoming"
             onclick="openEventInfo(event,
                 'ev-winter',
                 'Зимнее солнцестояние',
                 '2030-12-21',
                 '');">
            <div class="ev-icon">❄️</div>
            <div class="ev-label">Зимнее солнцестояние</div>
            <div class="ev-date">21 дек 2030</div>
                            <div class="ev-time">16:24 (местное)</div>
                        <div class="ev-status ">
                                    через 153 дн
                            </div>
        </div>
        </div>
</div>

<script>
(function () {
    function sendHeight() {
        var el = document.querySelector('.events-wrap');
        if (el && window.parent && window.parent !== window) {
            window.parent.postMessage({ eventsHeight: el.offsetHeight + 40 }, '*');
        }
    }
    sendHeight();
    window.addEventListener('resize', sendHeight);
    setTimeout(sendHeight, 300);
})();
</script>
 
	 
 <table style=" color:#E6E6FA;line-height: 1.0;vertical-align:top;max-height:600px;border-radius:20px;">      
	<caption style="padding-bottom:40px;font-size:1.4em;color:#000000;" align="center" ><br>Числа дня<br></caption>
        
    
    <tr>
<td class="l12" colspan=2 align="left" style="padding-left:0px;text-align:center;border: solid 0px; " >

		<br>
     </td> 
    </tr>

    
    <tr>
	
	
	
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >лунный день</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 20</p> 
    </td> 
    </tr>
    
    
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >день недели</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 7</p>  
    </td> 
    </tr>
    

    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >день месяца</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 21</p> 
    </td> 
    </tr>
    
    
    <tr>
    <td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >месяц</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 7</p> 
    </td> 
    </tr>
    
    
    <tr>
    <td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >неделя</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 29</p> 
    </td> 
    </tr>
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >день года</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 202</p> 
    </td> 
    </tr>
    
    
    
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >сумма чисел даты и месяца</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 1</p> 
    </td> 
    </tr>
    
    <tr>
	<td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >сумма чисел даты, месяца, года</p> 
    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 6</p> 
    
    </td> 
    </tr>
    
        <tr>
    <td class="l12" align="left" >
    <p align="left" style=" color:#E6E6FA;;" >День от Рождества Христова (от 1 января 1 г. н.э.)</p>    </td>
    <td class="l12" align="left" >
    <p align="center" style="font-size:5vw; color:#E6E6FA;;" > 741279</p>    </td>
    </tr>
    
    <td class="l12" colspan=2 align="left" style="padding-left:0px;text-align:center;border: solid 0px; " >
   
		<br>
     </td> 
    </tr>

    </table>    
    
    
    
	 
<style>
/* =================== ЛУННЫЙ ПОРТРЕТ =================== */

/* Сброс глобального правила span из stile.php */
.natal-wrap span {
    display: inline !important;
    vertical-align: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    height: auto !important;
    min-height: 0 !important;
}
.natal-wrap {
    display: block !important;
    background: linear-gradient(160deg, #14161c 0%, #0d0f13 100%) !important;
    border: 1px solid #2a2f3a !important;
    border-radius: 22px !important;
    padding: 24px 18px !important;
    margin: 30px 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    text-align: left !important;
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', Arial, sans-serif !important;
    color: #E6E6FA !important;
}
.natal-wrap * { box-sizing: border-box !important; }

.natal-title {
    display: block !important;
    color: #FFA500 !important;
    font-size: 1.45em !important;
    text-align: center !important;
    margin: 0 0 18px 0 !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px rgba(255,165,0,0.35);
}
.natal-title span { display: inline !important; font-size: inherit !important; }

/* --- Панель координат --- */
.natal-coords {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    text-align: center !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    margin: 0 0 12px 0 !important;
    font-size: 0.88em !important;
    line-height: 1.5 !important;
    color: #BFBFBF !important;
    height: auto !important;
}
.natal-coords .coords-item {
    display: inline-block !important;
    margin: 3px 8px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.natal-coords .coords-item b { color: #FFEB3B !important; }
.natal-coords .coords-city {
    display: inline-block !important;
    padding: 3px 10px !important;
    margin: 3px 8px !important;
    background: rgba(255,165,0,0.18) !important;
    border: 1px solid rgba(255,165,0,0.5) !important;
    border-radius: 8px !important;
    color: #FFA500 !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.natal-coords .coords-city b { color: #FFEB3B !important; }
.natal-coords .coords-edit {
    display: inline-block !important;
    padding: 3px 10px !important;
    margin: 3px 8px !important;
    color: #FFA500 !important;
    text-decoration: none !important;
    background: rgba(255,165,0,0.15) !important;
    border: 1px solid rgba(255,165,0,0.4) !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    height: auto !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}
.natal-coords .coords-edit:hover {
    background: rgba(255,165,0,0.35) !important;
    transform: scale(1.05) !important;
}

/* --- Поля ввода даты и времени --- */
.natal-datetime {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    height: auto !important;
}
.natal-datetime input {
    padding: 10px 14px !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    color: #FFEB3B !important;
    border: 1px solid #2c323d !important;
    border-radius: 10px !important;
    font-size: 1em !important;
    text-align: center !important;
    font-family: inherit !important;
    outline: none !important;
    height: auto !important;
    line-height: 1.3 !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.natal-datetime input:hover {
    border-color: rgba(255,165,0,0.5) !important;
}
.natal-datetime input:focus {
    border-color: #FFA500 !important;
    box-shadow: 0 0 12px rgba(255,165,0,0.35) !important;
}
.natal-datetime input[type="date"] {
    min-width: 170px !important;
}
.natal-datetime input[type="time"] {
    min-width: 110px !important;
}
/* Иконки календаря/часов в тёмной теме */
.natal-datetime input[type="date"]::-webkit-calendar-picker-indicator,
.natal-datetime input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) sepia(1) saturate(5) hue-rotate(0deg) !important;
    cursor: pointer !important;
}

/* --- Шапка с датой --- */
.natal-hero {
    display: block !important;
    background: linear-gradient(135deg, rgba(255,165,0,0.18), rgba(255,235,59,0.08)) !important;
    border: 1px solid rgba(255,165,0,0.35) !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    margin: 0 0 20px 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.natal-hero-date {
    display: block !important;
    font-size: 1.6em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    text-shadow: 0 0 10px rgba(255,165,0,0.6);
    height: auto !important;
}
.natal-hero-meta {
    display: block !important;
    font-size: 0.95em !important;
    color: #FFEB3B !important;
    line-height: 1.4 !important;
    height: auto !important;
}
.natal-hero-age {
    display: inline-block !important;
    margin-top: 10px !important;
    padding: 6px 14px !important;
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,235,59,0.3) !important;
    border-radius: 20px !important;
    font-size: 0.95em !important;
    color: #FFEB3B !important;
    font-weight: bold !important;
    line-height: 1.3 !important;
    height: auto !important;
}

/* --- Сетка карточек --- */
.natal-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: normal !important;
}

.natal-card {
    display: block !important;
    background: linear-gradient(150deg, #1f232c 0%, #16181d 100%) !important;
    border: 1px solid #2c323d !important;
    border-radius: 14px !important;
    padding: 14px 14px 12px 14px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
    height: auto !important;
    line-height: 1.3 !important;
    text-align: left !important;
    min-height: 110px !important;
}
.natal-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: #FFA500 !important;
    opacity: 0.7 !important;
    border-radius: 14px 0 0 14px !important;
}
.natal-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255,165,0,0.5) !important;
    box-shadow: 0 8px 24px rgba(255,165,0,0.15) !important;
}

.natal-card.c-moon::before   { background: #C0C0C0 !important; }
.natal-card.c-sun::before    { background: #FFA500 !important; }
.natal-card.c-phase::before  { background: #B39DDB !important; }
.natal-card.c-elem::before   { background: linear-gradient(180deg, #F44336, #2196F3) !important; }
.natal-card.c-num::before    { background: #FFEB3B !important; }
.natal-card.c-east::before   { background: #4CAF50 !important; }
.natal-card.c-stone::before  { background: #BA68C8 !important; }
.natal-card.c-time::before   { background: #29B6F6 !important; }

.natal-card-icon {
    display: inline-block !important;
    font-size: 1.6em !important;
    line-height: 1 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
    vertical-align: middle !important;
}
.natal-card-title {
    display: block !important;
    font-size: 0.72em !important;
    color: #8b93a4 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
    margin: 0 0 6px 0 !important;
    height: auto !important;
}
.natal-card-value {
    display: block !important;
    font-size: 1.35em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    height: auto !important;
}
.natal-card-value .em {
    display: inline !important;
    font-size: 1.15em !important;
    color: #FFEB3B !important;
    margin-right: 4px !important;
    line-height: 1 !important;
}
.natal-card-sub {
    display: block !important;
    font-size: 0.85em !important;
    color: #B8B80C !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
    height: auto !important;
    font-weight: normal !important;
}
.natal-card-sub.elem-fire  { color: #FF7043 !important; }
.natal-card-sub.elem-earth { color: #8BC34A !important; }
.natal-card-sub.elem-air   { color: #FFEB3B !important; }
.natal-card-sub.elem-water { color: #29B6F6 !important; }

@media (max-width: 640px) {
    .natal-grid { grid-template-columns: 1fr !important; }
    .natal-hero-date { font-size: 1.3em !important; }
    .natal-card-value { font-size: 1.2em !important; }
    .natal-coords { font-size: 0.8em !important; }
    .natal-datetime input[type="date"] { min-width: 140px !important; }
}
</style>

<div class="natal-wrap">

    <div class="natal-title">✨ <span>—</span> День рождения</div>

    <!-- ============ ПАНЕЛЬ КООРДИНАТ ============ -->
    <div class="natal-coords">
                <span class="coords-item">
            📍 Широта: <b>40.0°</b>
        </span>
        <span class="coords-item">
            🌐 Долгота: <b>-83.0°</b>
        </span>
        <span class="coords-item">
            🕒 Пояс: <b>ADT</b>
            (UTC-3)
        </span>
        <a class="coords-edit"
           href="mooncalc/setcoord.php"
           onclick="popupwindow('mooncalc/setcoord.php', 'Координаты', 420, 480); return false;">
            ✎ изменить
        </a>
    </div>

    <!-- ============ ПОЛЯ ДАТЫ И ВРЕМЕНИ ============ -->
    <div class="natal-datetime">
        <input type="date"
               value="2030-07-21"
               onchange="window.location.href='moon.php?d='+this.value+'&s=1';"
               title="Дата">
        <input type="time"
               value="09:06"
               onchange="window.location.href='moon.php?t='+this.value;"
               title="Время">
    </div>

    <div class="natal-hero">
        <div class="natal-hero-date">21 июля 2030</div>
        <div class="natal-hero-meta">Воскресенье</div>
                    <div class="natal-hero-age">
                🎂 3 лет · 1 386 дней от рождения
            </div>
            </div>

    <div class="natal-grid">

        <div class="natal-card c-moon">
            <div class="natal-card-icon">🌙</div>
            <div class="natal-card-title">Лунный день</div>
            <div class="natal-card-value">20</div>
            <div class="natal-card-sub">от восхода Луны</div>
        </div>

        <div class="natal-card c-phase">
            <div class="natal-card-icon">📿</div>
            <div class="natal-card-title">Титхи</div>
            <div class="natal-card-value">22 </div>
            <div class="natal-card-sub">
                кришна · Саптами            </div>
        </div>
        <div class="natal-card c-phase">
            <div class="natal-card-icon">🌗</div>
            <div class="natal-card-title">Фаза Луны</div>
            <div class="natal-card-value">Последняя четверть</div>
            <div class="natal-card-sub">Освещённость 58.2% · Убывающая -</div>
        </div>

        <div class="natal-card c-time">
            <div class="natal-card-icon">⏳</div>
            <div class="natal-card-title">Возраст Луны</div>
            <div class="natal-card-value">21.4 дн</div>
            <div class="natal-card-sub">от последнего новолуния</div>
        </div>

        <div class="natal-card c-sun">
            <div class="natal-card-icon">☀️</div>
            <div class="natal-card-title">Знак Солнца</div>
            <div class="natal-card-value">
                <span class="em">♋</span>Рак            </div>
            <div class="natal-card-sub elem-water">
                💧 стихия: вода            </div>
        </div>

        <div class="natal-card c-moon">
            <div class="natal-card-icon">🌕</div>
            <div class="natal-card-title">Знак Луны</div>
            <div class="natal-card-value">
                <span class="em">♈</span>Овен            </div>
            <div class="natal-card-sub elem-fire">
                🔥 стихия: огонь            </div>
        </div>

        <div class="natal-card c-elem">
            <div class="natal-card-icon">⚡</div>
            <div class="natal-card-title">Сочетание стихий</div>
            <div class="natal-card-value">
                🔥                💧            </div>
            <div class="natal-card-sub">Огонь и вода — «пар», эмоциональность</div>
        </div>

        <div class="natal-card c-num">
            <div class="natal-card-icon">🔢</div>
            <div class="natal-card-title">Число судьбы</div>
            <div class="natal-card-value">6</div>
            <div class="natal-card-sub">Хранитель дома и семьи</div>
        </div>

        <div class="natal-card c-east">
            <div class="natal-card-icon">🐕</div>
            <div class="natal-card-title">Восточный год</div>
            <div class="natal-card-value">Собака</div>
            <div class="natal-card-sub">стихия года: земля</div>
        </div>

        <div class="natal-card c-stone">
            <div class="natal-card-icon">💎</div>
            <div class="natal-card-title">Камень-талисман</div>
            <div class="natal-card-value" style="font-size:1.05em;">
                алмаз · рубин            </div>
            <div class="natal-card-sub">по знаку Луны — Овен</div>
        </div>

        <div class="natal-card c-phase">
            <div class="natal-card-icon">🌑</div>
            <div class="natal-card-title">Ближайшее новолуние</div>
            <div class="natal-card-value">+9.0 дн</div>
            <div class="natal-card-sub">от даты рождения</div>
        </div>

        <div class="natal-card c-sun">
            <div class="natal-card-icon">🌕</div>
            <div class="natal-card-title">Ближайшее полнолуние</div>
            <div class="natal-card-value">+22.9 дн</div>
            <div class="natal-card-sub">от даты рождения</div>
        </div>

        <div class="natal-card c-time">
            <div class="natal-card-icon">📅</div>
            <div class="natal-card-title">День от РХ</div>
            <div class="natal-card-value">741 279</div>
            <div class="natal-card-sub">2029 г · 6 мес · 20 дн</div>
        </div>

    </div>
</div>


<br><br>
 
    <iframe id="ifrm" src="mainmagic.html" style='width: 100%; min-height: 700px;'  align="top" frameborder="0" scrolling="no"  name="mm"  ></iframe>
					
<br><br>

<table style="width:100%;" align=center>
<tr>
<td  class="l50" style="display: contents;">
<p style="font-size:16pt;color:#BFBFBF;" align="center" > 
<br>
Внимание, информация в данном разделе имеет псевдо-научный развлекательный характер. 
<br>
</p>     
       
</td>                    	
</tr>		
</table>

<div style="width:100%;height:600px;">
		
</div>
<script>
/* --- открытие/закрытие модалки --- */
function openDayInfo(date) {
    var modal  = document.getElementById('dayinfo-modal');
    var iframe = document.getElementById('dayinfo-iframe');
    if (!modal || !iframe) return;
    iframe.src = 'mooncalc/dayinfo.php?d=' + encodeURIComponent(date);
    modal.classList.add('open');
    modal.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden';
}
function closeDayInfo() {
    var modal  = document.getElementById('dayinfo-modal');
    var iframe = document.getElementById('dayinfo-iframe');
    if (!modal) return;
    modal.classList.remove('open');
    modal.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
    if (iframe) iframe.src = 'about:blank';
}
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeDayInfo();
});



/* --- единый обработчик сообщений от iframe --- */
window.addEventListener('message', function (e) {
    if (!e.data) return;

    // растягивание тепловой карты по высоте
    if (e.data.heatmapHeight) {
        var f = document.getElementById('heatmap_ifrm');
        if (f) f.style.height = e.data.heatmapHeight + 'px';
    }

    // открытие модалки с описанием дня
    if (e.data.type === 'openDayInfo' && e.data.date) {
        openDayInfo(e.data.date);
    }
});
</script>

<script>
function openEventInfo(e, type, label, date, extra) {
    if (e && e.preventDefault) e.preventDefault();
    var url = 'mooncalc/eventinfo.php'
        + '?type='  + encodeURIComponent(type)
        + '&label=' + encodeURIComponent(label)
        + '&date='  + encodeURIComponent(date)
        + '&extra=' + encodeURIComponent(extra || '');

    var w = 640, h = 700;
    var left = (screen.width  - w) / 2;
    var top  = (screen.height - h) / 2;
    var win = window.open(url, 'eventInfo',
        'toolbar=no,location=no,directories=no,status=no,menubar=no,' +
        'scrollbars=yes,resizable=yes,copyhistory=no,' +
        'width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
    if (win) win.focus();
    return false;
}
</script>

<div id="dayinfo-modal" class="dayinfo-modal" aria-hidden="true">
    <div class="dayinfo-backdrop" onclick="closeDayInfo()"></div>
    <div class="dayinfo-window">
        <button type="button" class="dayinfo-close" onclick="closeDayInfo()" title="Закрыть">✕</button>
        <iframe id="dayinfo-iframe" src="about:blank" scrolling="yes"></iframe>
    </div>
</div>

</div><br>