* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: Arial, sans-serif;
            background: radial-gradient(circle at top, #fff2c9 0, #eef3ff 48%, #f8fbff 100%);
            color: var(--text);
            padding: 24px;
        }

        .moon-wrap {
            max-width: 1040px;
            margin: 0 auto;
        }

        .moon-widget {
            background: rgba(104, 91, 199, 0.08);
            border: 1px solid rgba(104, 91, 199, 0.16);
            border-radius: 26px;
            padding: 28px;
            box-shadow: 0 24px 80px rgba(62, 72, 105, 0.14);
        }

        .moon-header {
            display: flex;
            gap: 20px;
            align-items: center;
            margin-bottom: 24px;
        }

        .moon-icon {
            width: 104px;
            height: 104px;
            border-radius: 50%;
            background: rgba(104, 91, 199, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 66px;
            flex-shrink: 0;
        }

        h1 {
            margin: 0 0 8px;
            font-size: 34px;
            line-height: 1.15;
        }

        .subtitle {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.5;
        }

        .moon-form {
            display: grid;
            grid-template-columns: 1fr 1fr auto;
            gap: 12px;
            margin: 24px 0;
        }

        input,
        select,
        button {
            border: 0;
            border-radius: 14px;
            padding: 13px 15px;
            font-size: 15px;
            width: 100%;
        }

        input,
        select {
            background: #ffffff;
            color: #26324d;
        }

        button {
            background: #facc15;
            color: #26324d;
            font-weight: 700;
            cursor: pointer;
        }

        button:hover {
            background: #fde047;
        }

        .moon-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-bottom: 22px;
        }

        .moon-card {
            background: rgba(104, 91, 199, 0.1);
            border-radius: 18px;
            padding: 16px;
            min-height: 96px;
        }

        .moon-card-wide {
            grid-column: span 2;
        }

        .moon-label {
            color: var(--muted);
            font-size: 13px;
            margin-bottom: 8px;
        }

        .moon-value {
            font-size: 22px;
            font-weight: 800;
            line-height: 1.25;
        }

        .moon-section {
            margin-top: 22px;
            background: rgba(104, 91, 199, 0.08);
            border-radius: 20px;
            padding: 22px;
            color: #40506b;
            line-height: 1.65;
        }

        .moon-section h2 {
            margin: 0 0 16px;
            color: var(--text);
            font-size: 24px;
        }

        .local-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .local-list li {
            background: rgba(104, 91, 199, 0.08);
            border-radius: 14px;
            padding: 12px 14px;
        }

        .local-list span {
            display: block;
            color: var(--muted);
            font-size: 13px;
            margin-bottom: 4px;
        }

        .local-list b {
            color: var(--text);
            font-size: 16px;
        }

        .city-notice {
            display: none;
            margin-top: 12px;
            padding: 12px 14px;
            border-radius: 14px;
            background: rgba(250, 204, 21, 0.12);
            border: 1px solid rgba(250, 204, 21, 0.25);
            color: #fde68a;
            font-size: 14px;
            line-height: 1.5;
        }

        .city-notice.error {
            background: rgba(239, 68, 68, 0.14);
            border-color: rgba(239, 68, 68, 0.28);
            color: #fecaca;
        }

        .moon-content {
            margin-top: 22px;
            background: rgba(104, 91, 199, 0.08);
            border-radius: 20px;
            padding: 22px;
            color: #40506b;
            line-height: 1.65;
        }

        .moon-content h2 {
            margin-top: 30px;
            color: var(--text);
            font-size: 24px;
        }

        .moon-content h2:first-child {
            margin-top: 0;
        }

        .moon-content ul {
            padding-left: 22px;
        }

        .moon-content li {
            margin-bottom: 8px;
        }

        .moon-ratings-visual {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
            margin-top: 16px;
        }

        .moon-rating-card {
            border-radius: 16px;
            padding: 15px;
            background: rgba(104, 91, 199, 0.08);
            border: 1px solid rgba(104, 91, 199, 0.12);
        }

        .moon-rating-head {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 10px;
        }

        .moon-rating-head strong {
            color: var(--text);
            font-size: 15px;
        }

        .moon-rating-head span {
            font-size: 13px;
            color: var(--muted);
            text-align: right;
        }

        .moon-rating-stars {
            font-size: 21px;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }

        .moon-rating-bar {
            height: 8px;
            border-radius: 999px;
            background: rgba(104, 91, 199, 0.12);
            overflow: hidden;
        }

        .moon-rating-bar i {
            display: block;
            height: 100%;
            border-radius: 999px;
        }

        .rating-best {
            background: rgba(34, 197, 94, 0.15);
            border-color: rgba(34, 197, 94, 0.35);
        }

        .rating-best .moon-rating-bar i {
            background: #22c55e;
        }

        .rating-best .moon-rating-stars {
            color: #86efac;
        }

        .rating-good {
            background: rgba(132, 204, 22, 0.14);
            border-color: rgba(132, 204, 22, 0.32);
        }

        .rating-good .moon-rating-bar i {
            background: #84cc16;
        }

        .rating-good .moon-rating-stars {
            color: #bef264;
        }

        .rating-neutral {
            background: rgba(250, 204, 21, 0.13);
            border-color: rgba(250, 204, 21, 0.3);
        }

        .rating-neutral .moon-rating-bar i {
            background: #facc15;
        }

        .rating-neutral .moon-rating-stars {
            color: #fde047;
        }

        .rating-warn {
            background: rgba(249, 115, 22, 0.14);
            border-color: rgba(249, 115, 22, 0.35);
        }

        .rating-warn .moon-rating-bar i {
            background: #f97316;
        }

        .rating-warn .moon-rating-stars {
            color: #fdba74;
        }

        .rating-bad {
            background: rgba(239, 68, 68, 0.14);
            border-color: rgba(239, 68, 68, 0.35);
        }

        .rating-bad .moon-rating-bar i {
            background: #ef4444;
        }

        .rating-bad .moon-rating-stars {
            color: #fca5a5;
        }

        .moon-rating-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 16px;
            margin-top: 16px;
            color: var(--muted);
            font-size: 13px;
        }

        .legend-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 6px;
        }

        .legend-bad {
            background: #ef4444;
        }

        .legend-warn {
            background: #f97316;
        }

        .legend-neutral {
            background: #facc15;
        }

        .legend-good {
            background: #84cc16;
        }

        .legend-best {
            background: #22c55e;
        }

        .page-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: -8px 0 18px;
        }

        .page-action-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 42px;
            border-radius: 999px;
            padding: 10px 16px;
            color: var(--text);
            text-decoration: none;
            background: rgba(104, 91, 199, 0.09);
            border: 1px solid rgba(104, 91, 199, 0.16);
            font-size: 14px;
            font-weight: 700;
        }

        .page-action-link:hover {
            background: rgba(104, 91, 199, 0.16);
        }

        .day-nav {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin: 0 0 22px;
        }

        .day-nav-link {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 116px;
            border-radius: 18px;
            padding: 14px;
            color: #40506b;
            text-decoration: none;
            background: rgba(104, 91, 199, 0.08);
            border: 1px solid rgba(104, 91, 199, 0.12);
            transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
        }

        .day-nav-link:hover {
            transform: translateY(-2px);
            background: rgba(104, 91, 199, 0.13);
            border-color: rgba(250, 204, 21, 0.45);
        }

        .day-nav-link.is-active {
            min-height: 136px;
            background: rgba(250, 204, 21, 0.15);
            border-color: rgba(250, 204, 21, 0.5);
            box-shadow: 0 18px 50px rgba(62, 72, 105, 0.1);
        }

        .day-nav-label {
            color: #facc15;
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .day-nav-date {
            color: var(--text);
            font-size: 20px;
            font-weight: 900;
            line-height: 1.15;
            margin-bottom: 8px;
        }

        .day-nav-summary {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .day-nav-rating {
            display: flex;
            flex-direction: column;
            gap: 3px;
            margin-top: 10px;
        }

        .day-nav-stars {
            font-size: 15px;
            letter-spacing: 1px;
            line-height: 1;
        }

        .day-nav-rating-label {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.25;
        }

        .day-nav-link.rating-best {
            background: rgba(34, 197, 94, 0.15);
            border-color: rgba(34, 197, 94, 0.38);
        }

        .day-nav-link.rating-best .day-nav-stars {
            color: #86efac;
        }

        .day-nav-link.rating-good {
            background: rgba(132, 204, 22, 0.14);
            border-color: rgba(132, 204, 22, 0.34);
        }

        .day-nav-link.rating-good .day-nav-stars {
            color: #bef264;
        }

        .day-nav-link.rating-neutral {
            background: rgba(250, 204, 21, 0.13);
            border-color: rgba(250, 204, 21, 0.32);
        }

        .day-nav-link.rating-neutral .day-nav-stars {
            color: #fde047;
        }

        .day-nav-link.rating-warn {
            background: rgba(249, 115, 22, 0.14);
            border-color: rgba(249, 115, 22, 0.36);
        }

        .day-nav-link.rating-warn .day-nav-stars {
            color: #fdba74;
        }

        .day-nav-link.rating-bad {
            background: rgba(239, 68, 68, 0.14);
            border-color: rgba(239, 68, 68, 0.36);
        }

        .day-nav-link.rating-bad .day-nav-stars {
            color: #fca5a5;
        }

        .day-nav-link.is-disabled {
            opacity: 0.55;
            cursor: not-allowed;
            pointer-events: none;
        }

        @media (max-width: 820px) {
            .day-nav {
                grid-template-columns: 1fr;
            }

            .day-nav-link,
            .day-nav-link.is-active {
                min-height: auto;
            }

            .moon-form {
                grid-template-columns: 1fr;
            }

            .moon-grid {
                grid-template-columns: 1fr 1fr;
            }

            .moon-card-wide {
                grid-column: span 2;
            }

            .local-list {
                grid-template-columns: 1fr;
            }

            .moon-ratings-visual {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 520px) {
            body {
                padding: 14px;
            }

            .moon-widget {
                padding: 20px;
            }

            .moon-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .moon-grid {
                grid-template-columns: 1fr;
            }

            .moon-card-wide {
                grid-column: span 1;
            }

            h1 {
                font-size: 28px;
            }
        }
        .moon-disclaimer {
            margin-top: 18px;
            color: var(--muted-dark);
            font-size: 12px;
            line-height: 1.55;
            text-align: center;
            opacity: 0.9;
        }

        .seo-day-summary {
            margin-top: 22px;
        }

        .seo-day-summary p {
            margin: 0 0 14px;
        }

        .seo-day-links {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }

        .seo-day-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 10px 15px;
            color: var(--text);
            text-decoration: none;
            background: rgba(104, 91, 199, 0.09);
            border: 1px solid rgba(104, 91, 199, 0.16);
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
        }

        .seo-day-link:hover {
            background: rgba(104, 91, 199, 0.15);
            border-color: rgba(250, 204, 21, 0.45);
        }

        .faq-list {
            display: grid;
            gap: 10px;
        }

        .faq-list details {
            background: rgba(104, 91, 199, 0.07);
            border: 1px solid rgba(104, 91, 199, 0.12);
            border-radius: 14px;
            overflow: hidden;
        }

        .faq-list summary {
            position: relative;
            padding: 15px 44px 15px 16px;
            color: var(--text);
            font-weight: 800;
            cursor: pointer;
            list-style: none;
        }

        .faq-list summary::-webkit-details-marker {
            display: none;
        }

        .faq-list details p {
            margin: 0;
            padding: 0 16px 16px;
            color: var(--muted);
        }

.moon-rating-fill { display: block; }
.moon-rating-fill-0 { width: 0%; }
.moon-rating-fill-1 { width: 1%; }
.moon-rating-fill-2 { width: 2%; }
.moon-rating-fill-3 { width: 3%; }
.moon-rating-fill-4 { width: 4%; }
.moon-rating-fill-5 { width: 5%; }
.moon-rating-fill-6 { width: 6%; }
.moon-rating-fill-7 { width: 7%; }
.moon-rating-fill-8 { width: 8%; }
.moon-rating-fill-9 { width: 9%; }
.moon-rating-fill-10 { width: 10%; }
.moon-rating-fill-11 { width: 11%; }
.moon-rating-fill-12 { width: 12%; }
.moon-rating-fill-13 { width: 13%; }
.moon-rating-fill-14 { width: 14%; }
.moon-rating-fill-15 { width: 15%; }
.moon-rating-fill-16 { width: 16%; }
.moon-rating-fill-17 { width: 17%; }
.moon-rating-fill-18 { width: 18%; }
.moon-rating-fill-19 { width: 19%; }
.moon-rating-fill-20 { width: 20%; }
.moon-rating-fill-21 { width: 21%; }
.moon-rating-fill-22 { width: 22%; }
.moon-rating-fill-23 { width: 23%; }
.moon-rating-fill-24 { width: 24%; }
.moon-rating-fill-25 { width: 25%; }
.moon-rating-fill-26 { width: 26%; }
.moon-rating-fill-27 { width: 27%; }
.moon-rating-fill-28 { width: 28%; }
.moon-rating-fill-29 { width: 29%; }
.moon-rating-fill-30 { width: 30%; }
.moon-rating-fill-31 { width: 31%; }
.moon-rating-fill-32 { width: 32%; }
.moon-rating-fill-33 { width: 33%; }
.moon-rating-fill-34 { width: 34%; }
.moon-rating-fill-35 { width: 35%; }
.moon-rating-fill-36 { width: 36%; }
.moon-rating-fill-37 { width: 37%; }
.moon-rating-fill-38 { width: 38%; }
.moon-rating-fill-39 { width: 39%; }
.moon-rating-fill-40 { width: 40%; }
.moon-rating-fill-41 { width: 41%; }
.moon-rating-fill-42 { width: 42%; }
.moon-rating-fill-43 { width: 43%; }
.moon-rating-fill-44 { width: 44%; }
.moon-rating-fill-45 { width: 45%; }
.moon-rating-fill-46 { width: 46%; }
.moon-rating-fill-47 { width: 47%; }
.moon-rating-fill-48 { width: 48%; }
.moon-rating-fill-49 { width: 49%; }
.moon-rating-fill-50 { width: 50%; }
.moon-rating-fill-51 { width: 51%; }
.moon-rating-fill-52 { width: 52%; }
.moon-rating-fill-53 { width: 53%; }
.moon-rating-fill-54 { width: 54%; }
.moon-rating-fill-55 { width: 55%; }
.moon-rating-fill-56 { width: 56%; }
.moon-rating-fill-57 { width: 57%; }
.moon-rating-fill-58 { width: 58%; }
.moon-rating-fill-59 { width: 59%; }
.moon-rating-fill-60 { width: 60%; }
.moon-rating-fill-61 { width: 61%; }
.moon-rating-fill-62 { width: 62%; }
.moon-rating-fill-63 { width: 63%; }
.moon-rating-fill-64 { width: 64%; }
.moon-rating-fill-65 { width: 65%; }
.moon-rating-fill-66 { width: 66%; }
.moon-rating-fill-67 { width: 67%; }
.moon-rating-fill-68 { width: 68%; }
.moon-rating-fill-69 { width: 69%; }
.moon-rating-fill-70 { width: 70%; }
.moon-rating-fill-71 { width: 71%; }
.moon-rating-fill-72 { width: 72%; }
.moon-rating-fill-73 { width: 73%; }
.moon-rating-fill-74 { width: 74%; }
.moon-rating-fill-75 { width: 75%; }
.moon-rating-fill-76 { width: 76%; }
.moon-rating-fill-77 { width: 77%; }
.moon-rating-fill-78 { width: 78%; }
.moon-rating-fill-79 { width: 79%; }
.moon-rating-fill-80 { width: 80%; }
.moon-rating-fill-81 { width: 81%; }
.moon-rating-fill-82 { width: 82%; }
.moon-rating-fill-83 { width: 83%; }
.moon-rating-fill-84 { width: 84%; }
.moon-rating-fill-85 { width: 85%; }
.moon-rating-fill-86 { width: 86%; }
.moon-rating-fill-87 { width: 87%; }
.moon-rating-fill-88 { width: 88%; }
.moon-rating-fill-89 { width: 89%; }
.moon-rating-fill-90 { width: 90%; }
.moon-rating-fill-91 { width: 91%; }
.moon-rating-fill-92 { width: 92%; }
.moon-rating-fill-93 { width: 93%; }
.moon-rating-fill-94 { width: 94%; }
.moon-rating-fill-95 { width: 95%; }
.moon-rating-fill-96 { width: 96%; }
.moon-rating-fill-97 { width: 97%; }
.moon-rating-fill-98 { width: 98%; }
.moon-rating-fill-99 { width: 99%; }
.moon-rating-fill-100 { width: 100%; }

/* Светлая тема страницы дня и единый FAQ */
body {
    padding: 0 0 32px;
    color: var(--text);
    background:
        radial-gradient(circle at 8% 0%, rgba(255, 220, 137, 0.38), transparent 28%),
        radial-gradient(circle at 94% 10%, rgba(151, 190, 242, 0.34), transparent 31%),
        linear-gradient(180deg, #f9fbff 0%, #f1f4fc 52%, #fbf8f3 100%);
}

.moon-wrap {
    width: min(1040px, calc(100% - 32px));
}

.moon-widget {
    color: var(--text);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(94, 82, 174, 0.18);
    box-shadow: 0 24px 70px rgba(64, 75, 110, 0.13);
}

.moon-card,
.moon-section,
.moon-content,
.local-list li,
.moon-rating-card,
.day-navigation-card,
.seo-day-card,
.faq-list details {
    color: var(--text);
    background: rgba(248, 249, 255, 0.95);
    border-color: rgba(104, 91, 199, 0.14);
}

.moon-card,
.moon-section,
.moon-content,
.faq-list details {
    box-shadow: 0 8px 24px rgba(73, 79, 108, 0.04);
}

.moon-section h2,
.moon-content h2,
.moon-rating-head strong,
.local-list b,
.day-navigation-card strong,
.seo-day-card h3,
.faq-list summary {
    color: var(--text);
}

.moon-label,
.subtitle,
.local-list span,
.moon-rating-head span,
.faq-list details p {
    color: var(--muted);
}

input,
select {
    color: var(--text);
    background: #fff;
    border: 1px solid rgba(104, 91, 199, 0.2);
}

button {
    color: var(--accent-dark);
    background: linear-gradient(135deg, #f5bd45, #ffd86d);
}

button:hover {
    background: linear-gradient(135deg, #ffc956, #ffe28c);
}

.seo-day-link {
    color: #493f89;
    background: #f5f3ff;
    border-color: rgba(104, 91, 199, 0.2);
}

.seo-day-link:hover {
    background: #ede9ff;
    border-color: rgba(104, 91, 199, 0.42);
}

.faq-list summary {
    padding: 15px 16px 15px 42px;
    list-style: none;
}

.faq-list summary::after,
.faq-list details[open] summary::after {
    content: none;
}

.faq-list summary::before {
    position: absolute;
    top: 50%;
    left: 17px;
    content: "▶";
    color: #7468cf;
    font-size: 11px;
    line-height: 1;
    transform: translateY(-50%);
}

.faq-list details[open] summary::before {
    content: "▼";
}

.faq-list details[open] {
    background: #fffdf7;
    border-color: rgba(230, 171, 54, 0.38);
}

@media (max-width: 760px) {
    .moon-wrap {
        width: min(100% - 20px, 1040px);
    }
}