/* ========================================================
   Moon Phase Widget — Styles
   ======================================================== */

.mp-widget {
    --mp-bg:          #0d1117;
    --mp-bg2:         #161b22;
    --mp-border:      #30363d;
    --mp-accent:      #f0c060;
    --mp-accent2:     #8b5cf6;
    --mp-text:        #e6edf3;
    --mp-muted:       #8b949e;
    --mp-moon-glow:   rgba(240, 192, 96, 0.35);
    --mp-radius:      16px;

    background:    var(--mp-bg);
    border:        1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding:       0;
    font-family:   'Segoe UI', system-ui, -apple-system, sans-serif;
    color:         var(--mp-text);
    max-width:     680px;
    margin:        2em auto;
    overflow:      hidden;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.6),
                   0 0 60px rgba(240, 192, 96, 0.06);
}

/* ── Заголовок ─────────────────────────────── */
.mp-header {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         18px 24px 16px;
    border-bottom:   1px solid var(--mp-border);
    background:      linear-gradient(90deg, #1c2230 0%, var(--mp-bg) 100%);
}
.mp-title-icon { font-size: 1.6rem; }
.mp-title-text {
    font-size:    1.25rem;
    font-weight:  700;
    letter-spacing: 0.5px;
    color:        var(--mp-accent);
}

/* ── Основное тело ─────────────────────────── */
.mp-body {
    display:   flex;
    gap:       28px;
    padding:   28px 28px 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ── Canvas луны ───────────────────────────── */
.mp-moon-wrap {
    flex-shrink: 0;
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         14px;
}
.mp-canvas {
    width:         200px;
    height:        200px;
    border-radius: 50%;
    box-shadow:    0 0 30px var(--mp-moon-glow),
                   0 0  8px rgba(240, 192, 96, 0.2);
    display:       block;
}
.mp-phase-badge {
    background:    linear-gradient(135deg, var(--mp-accent2), #6d28d9);
    color:         #fff;
    padding:       5px 16px;
    border-radius: 20px;
    font-size:     0.82rem;
    font-weight:   600;
    letter-spacing: 0.5px;
    text-align:    center;
    white-space:   nowrap;
}

/* ── Статистика ────────────────────────────── */
.mp-stats {
    flex:          1;
    min-width:     220px;
    display:       flex;
    flex-direction: column;
    gap:           10px;
}
.mp-stat-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    var(--mp-bg2);
    border:        1px solid var(--mp-border);
    border-radius: 10px;
    padding:       10px 14px;
    transition:    background 0.2s;
}
.mp-stat-row:hover {
    background: #1f2937;
}
.mp-stat-icon {
    font-size:   1.35rem;
    flex-shrink: 0;
    width:       28px;
    text-align:  center;
}
.mp-zodiac-glyph {
    font-size: 1.5rem;
    color:     var(--mp-accent);
}
.mp-stat-body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    flex:           1;
    min-width:      0;
}
.mp-stat-label {
    font-size:     0.72rem;
    color:         var(--mp-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.mp-stat-value {
    font-size:   0.97rem;
    font-weight: 600;
    color:       var(--mp-text);
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.mp-live-time {
    font-variant-numeric: tabular-nums;
    color: var(--mp-accent);
}
.mp-tz {
    font-size:  0.72rem;
    color:      var(--mp-muted);
    font-weight: 400;
}

/* Прогресс-бар освещённости */
.mp-bar-wrap {
    display:       inline-block;
    width:         80px;
    height:        5px;
    background:    rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow:      hidden;
    vertical-align: middle;
}
.mp-bar-fill {
    display:       block;
    height:        100%;
    background:    linear-gradient(90deg, var(--mp-accent2), var(--mp-accent));
    border-radius: 4px;
    transition:    width 0.5s ease;
}

/* ── Цикл-шкала ────────────────────────────── */
.mp-cycle {
    position:       relative;
    display:        flex;
    justify-content: space-around;
    align-items:    center;
    padding:        18px 24px 28px;
    border-top:     1px solid var(--mp-border);
    gap:            4px;
}
.mp-cycle-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    padding:        8px 12px;
    border-radius:  10px;
    opacity:        0.5;
    transition:     opacity 0.3s, background 0.3s;
}
.mp-cycle-item.mp-cycle-active {
    opacity:    1;
    background: rgba(240, 192, 96, 0.12);
    box-shadow: 0 0 12px rgba(240, 192, 96, 0.2);
}
.mp-cycle-icon  { font-size: 1.6rem; }
.mp-cycle-label {
    font-size:  0.68rem;
    color:      var(--mp-muted);
    white-space: nowrap;
}
.mp-cycle-active .mp-cycle-label {
    color:      var(--mp-accent);
}

/* Трек-ползунок */
.mp-cycle-track {
    position:      absolute;
    bottom:        10px;
    left:          24px;
    right:         24px;
    height:        3px;
    background:    rgba(255,255,255,0.08);
    border-radius: 3px;
}
.mp-cycle-pos {
    position:    absolute;
    top:         50%;
    transform:   translate(-50%, -50%);
    font-size:   0.95rem;
    line-height: 1;
    filter:      drop-shadow(0 0 4px var(--mp-accent));
}

/* ── Подвал ────────────────────────────────── */
.mp-footer {
    padding:     10px 24px 14px;
    font-size:   0.72rem;
    color:       var(--mp-muted);
    text-align:  center;
    border-top:  1px solid var(--mp-border);
}

/* ── Адаптив ───────────────────────────────── */
@media (max-width: 480px) {
    .mp-body {
        flex-direction: column;
        align-items:    center;
        padding:        20px 16px;
    }
    .mp-cycle {
        gap:     2px;
        padding: 14px 10px 24px;
    }
    .mp-cycle-label { display: none; }
    .mp-stats { width: 100%; }
}