/* ========================
   THEME & TOKENS
======================== */
:root {
    --ShadedBackground: #F9F9F7;
    --Primary: #074252;
    --PrimaryDark: #ac99ea;
    --PrimaryLightText: #F8FCD1;
    --PrimaryDarkText: #074252;
    --ActivityIconColor: #074252;
    --ActivityIconSelectedColor: #F8FCD1;
    --ActivityIconFilter: brightness(0) saturate(100%) invert(18%) sepia(27%) saturate(1917%) hue-rotate(153deg) brightness(89%) contrast(96%);
    --ActivityIconSelectedFilter: brightness(0) saturate(100%) invert(95%) sepia(14%) saturate(702%) hue-rotate(18deg) brightness(104%) contrast(98%);
    --PrimaryBackground: #074252;
    --SecondaryBackground: #48A6B1;
    --LightOrangeBackground: #f0c986;
    --LightBlueBackground: #c3e9f8;
    --GreyBackground: #919191;
    --DarkBlueBackground: #08385a;
    --Secondary: #074252;
    --SecondaryDarkText: #9880e5;
    --Tertiary: #2B0B98;
    --GreenGlowEffect: #04c8c7;
    --RedGlowEffect: #babcbb;
    --White: #fff;
    --Black: #000;
    --Magenta: #D600AA;
    --MidnightBlue: #190649;
    --OffBlack: #1f1f1f;
    --Gray100: #E1E1E1;
    --Gray200: #C8C8C8;
    --Gray300: #ACACAC;
    --Gray400: #919191;
    --Gray500: #6E6E6E;
    --Gray600: #404040;
    --Gray900: #212121;
    --Gray950: #141414;
    /* Fluid sizing tokens (used on desktop + mobile) */
    --DayCellGapDesktop: 6px;
    --DayCellGapMobile: 6px;
    --DayNumSize: clamp(10px, 1.1vw, 18px);
    --DayIconMaxW: clamp(74%, 8vw, 94%);
    --DayIconMaxH: clamp(60%, 9vw, 82%);
    --DayCardPadX: clamp(2px, 0.55vw, 6px);
    --DayCardPadTop: clamp(3px, 0.65vw, 7px);
    --DayCardPadBottom: clamp(10px, 1.4vw, 16px);
    --DayCardGap: clamp(1px, 0.25vw, 3px);
    --DayIndicatorSize: clamp(8px, 0.72vw, 11px);
    --MoondayIconSize: clamp(56px, 6vw, 128px);
    --SunMoonBadge: clamp(28px, 2.5vw, 48px);
    --ZodiacIconSize: clamp(40px, 3.5vw, 96px);
    /* Home background gradient (like the app mockups) */
    --PageGradientTop: #F6F9DD;
    --PageGradientMid: #D8EBD7;
    --PageGradientBottom: #6AAEB4;
    --font-heading: "Josefin Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-ui: "Muli", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* 8pt spacing system */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --radius-tag: 10px;
    --radius-selector: 12px;
    --radius-button: 14px;
    --radius-day-card: 18px;
    --radius-day-card-mobile: var(--radius-day-card);
    --radius-main-panel: 24px;
    --radius-sm: var(--radius-selector);
    --radius-md: var(--radius-day-card);
    --radius-lg: var(--radius-main-panel);
    --shadow-soft: 0 12px 28px rgba(7,66,82,.10);
    --shadow-card: 0 18px 40px rgba(19,46,54,.12);
}

/* ========================
   BASE
======================== */
html, body {
    height: 100%;
    margin: 0;
    /* main page background stays clean/white */
    background: #ffffff;
    color: var(--PrimaryDarkText);
    font-family: var(--font-ui);
}

button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-title,
.month-title,
.day-layout .month-row,
.day-layout .daynum-row,
.info-modal__title,
.admin-gate__title,
.year-label {
    font-family: var(--font-heading);
}

a {
    color: var(--Secondary);
}

.header {
    padding: 1rem;
    text-align: center;
}

.container {
    max-width: 2000px;
    margin: 0 auto;
    padding: var(--space-4);
}

.card {
    background: #fff;
    border-radius: var(--radius-main-panel);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
}

.boot-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 42%, rgba(248,252,209,.18), transparent 34%),
        linear-gradient(180deg, var(--PageGradientTop) 0%, var(--PageGradientMid) 54%, var(--PageGradientBottom) 100%);
}

.boot-card {
    width: min(440px, 100%);
    padding: 26px;
    border-radius: var(--radius-main-panel);
    border: 1px solid rgba(255,255,255,.45);
    background: rgba(255,255,255,.72);
    box-shadow: 0 24px 60px rgba(7,66,82,.18);
    color: var(--PrimaryDarkText);
    text-align: center;
    backdrop-filter: blur(14px);
}

.boot-orbit {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(7,66,82,.95), rgba(72,166,177,.88));
    box-shadow: 0 14px 28px rgba(7,66,82,.18);
}

.boot-orbit span {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(248,252,209,.72);
    border-left-color: transparent;
    animation: boot-spin 5s linear infinite;
}

.boot-kicker {
    color: rgba(7,66,82,.70);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.boot-title {
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 5vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
}

.boot-subtitle,
.boot-footer {
    color: rgba(7,66,82,.72);
    line-height: 1.45;
}

.boot-subtitle {
    margin-top: 8px;
    font-size: .96rem;
}

.boot-progress {
    position: relative;
    height: 10px;
    margin: 22px 0 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(7,66,82,.12);
    box-shadow: inset 0 1px 2px rgba(7,66,82,.16);
}

.boot-progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--Primary), var(--SecondaryBackground), var(--LightOrangeBackground));
    animation: boot-progress 5s linear forwards;
}

.boot-footer {
    font-size: .84rem;
}

@keyframes boot-progress {
    from { width: 0%; }
    to { width: 100%; }
}

@keyframes boot-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .boot-progress span {
        animation-duration: 1ms;
    }

    .boot-orbit span {
        animation: none;
    }
}

/* ========================
   HEADER (Month switcher)
======================== */
.month-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.month-title {
    font-weight: 700;
    text-transform: capitalize;
}

.nav-btn {
    border: none;
    background: var(--LightBlueBackground);
    padding: .4rem .6rem;
    border-radius: var(--radius-button);
    cursor: pointer;
}

/* ========================
   LAYOUT SPLIT
======================== */
.split-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--space-5);
    align-items: start;
}

/* ========================
   HOME: MERGED GRADIENT SURFACE
   - one continuous gradient under BOTH left + right panels
   - main page remains white
======================== */

/* Apply gradient to the shared split surface (the container is .card.split-2) */
.card.split-2 {
    background:
        radial-gradient(ellipse 140% 80% at 12% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 48%),
        radial-gradient(ellipse 110% 86% at 100% 100%, rgba(7,66,82,.055) 0%, rgba(7,66,82,0) 58%),
        linear-gradient(180deg,
        var(--PageGradientTop) 0%,
        var(--PageGradientMid) 38%,
        var(--PageGradientBottom) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-sizing: border-box;
}

/* Panels become transparent so the merged gradient reads as one surface */
.tabs-panel,
.desktop-right {
    background: transparent;
    border-radius: 0;
    padding: var(--space-3);
    box-sizing: border-box;
}

/* Mobile overlay remains gradient (full panel) */
.mobile-overlay__body {
    background:
        radial-gradient(ellipse 130% 78% at 12% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 48%),
        radial-gradient(ellipse 115% 90% at 100% 100%, rgba(7,66,82,.05) 0%, rgba(7,66,82,0) 58%),
        linear-gradient(180deg,
        var(--PageGradientTop) 0%,
        var(--PageGradientMid) 38%,
        var(--PageGradientBottom) 100%);
    border-radius: var(--radius-main-panel);
    padding: 1rem;
    box-sizing: border-box;
}

/* Prevent grid children from overflowing their column (important for long inline content) */
.split-2 > * { min-width: 0; }

/* ========================
   LEFT PANEL: Calendar
======================== */
.tabs-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
    z-index: 2;
}

.activity-selector--inline {
    margin-top: .35rem;
    padding: .25rem 0 0;
    background: transparent;
}

/* Right side wrapper (desktop) */
.desktop-right{
    position: relative;
    z-index: 1;
    padding-left: .15rem;
}

/* Weekday header + calendar grid */
.weekday-header,
.tabs-strip-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
}

.weekday-cell {
    text-align: center;
    font-weight: 700;
    font-size: .9rem;
    color: var(--PrimaryDarkText);
}

.weekday-header {
    margin-bottom: var(--space-2);
}

/* Empty padding cells match real day squares */
.daycell-empty {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-day-card);
    background: transparent;
}

/* Day card — fully responsive: number, icon, padding and indicator all scale together */
.daycard {
    border: 1px solid rgba(255,255,255,.22);
    padding: var(--DayCardPadTop) var(--DayCardPadX) var(--DayCardPadBottom);
    border-radius: clamp(var(--radius-day-card-mobile), 1.25vw, var(--radius-day-card));
    cursor: pointer;
    background: linear-gradient(180deg, rgba(10,84,102,.96) 0%, rgba(7,66,82,.98) 100%);
    color: #fff;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    align-items: start;
    gap: var(--DayCardGap);
    outline: none;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(7,66,82,.12);
    transition: transform .18s ease, background .28s ease, opacity .18s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
    aspect-ratio: 1 / 1.22;
    min-width: 0;
    min-height: 0;
}

.daycard::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 42%);
    pointer-events: none;
}

.daycard:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(7,66,82,.14);
    border-color: rgba(255,255,255,.34);
}

.daycard:active {
    transform: translateY(0) scale(.985);
}

.daycard:focus-visible {
    border-color: rgba(240,201,134,.9);
    box-shadow: 0 0 0 3px rgba(240,201,134,.22), inset 0 1px 0 rgba(255,255,255,.12), 0 14px 26px rgba(7,66,82,.16);
}

.daycard.active {
    transform: translateY(-3px) scale(1.04);
    border-color: rgba(255,255,246,.98);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,246,.72),
        inset 0 1px 0 rgba(255,255,255,.25),
        0 0 0 3px rgba(72,166,177,.42),
        0 0 28px rgba(255,238,177,.34),
        0 18px 34px rgba(7,66,82,.28);
}

.daycard-day {
    font-weight: 800;
    font-size: var(--DayNumSize);
    line-height: 1;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0,.16);
    position: relative;
    z-index: 1;
    margin: 0;
}

.daycard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.daycard-icon img {
    width: auto;
    height: auto;
    max-width: var(--DayIconMaxW);
    max-height: var(--DayIconMaxH);
    object-fit: contain;
    display: block;
    margin: 0;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

.daycard.active::before {
    display: none;
}

.daycard.is-today {
    transform: translateY(-2px) scale(1.03);
    background:
        radial-gradient(ellipse 96% 84% at 50% 44%, rgba(255,255,246,.24) 0%, rgba(255,238,177,.14) 34%, rgba(72,166,177,.10) 66%, rgba(72,166,177,0) 100%),
        linear-gradient(180deg, rgba(18,126,141,.99) 0%, rgba(7,66,82,1) 100%);
    border-color: rgba(255,255,255,.28);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 0 22px rgba(255,238,177,.20),
        0 14px 26px rgba(7,66,82,.20);
}

.daycard.is-today.active {
    transform: translateY(-3px) scale(1.04);
    background:
        radial-gradient(ellipse 96% 84% at 50% 44%, rgba(255,255,246,.24) 0%, rgba(255,238,177,.14) 34%, rgba(72,166,177,.10) 66%, rgba(72,166,177,0) 100%),
        linear-gradient(180deg, rgba(18,126,141,.99) 0%, rgba(7,66,82,1) 100%);
    border-color: rgba(255,255,246,.98);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,246,.72),
        inset 0 1px 0 rgba(255,255,255,.25),
        0 0 0 3px rgba(72,166,177,.42),
        0 0 28px rgba(255,238,177,.34),
        0 18px 34px rgba(7,66,82,.28);
}

.daycard.is-today .daycard-day {
    color: #fffbed;
    text-shadow: 0 1px 2px rgba(0,0,0,.22), 0 0 10px rgba(255,255,246,.52), 0 0 16px rgba(255,238,177,.29);
}

.daycard.is-today .daycard-icon {
    overflow: visible;
    isolation: isolate;
}

.daycard.is-today .daycard-icon::before {
    content: "";
    position: absolute;
    inset: -18% -12%;
    z-index: 0;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(255,255,246,.34) 0%,
        rgba(255,238,177,.19) 36%,
        rgba(72,166,177,.14) 62%,
        rgba(72,166,177,0) 82%);
    filter: blur(12px);
    mix-blend-mode: screen;
    opacity: .70;
}

.daycard.is-today .daycard-icon img {
    position: relative;
    z-index: 2;
    transform: scale(1.03);
    filter: brightness(1.06) contrast(1.04) drop-shadow(0 4px 10px rgba(0,0,0,.16)) drop-shadow(0 0 13px rgba(255,255,246,.35)) drop-shadow(0 0 10px rgba(255,238,177,.27));
}

.daycard-indicator {
    position: absolute;
    left: 50%;
    bottom: clamp(1px, 0.3vw, 3px);
    transform: translateX(-50%);
    width: clamp(12px, 1.2vw, 16px);
    height: clamp(12px, 1.2vw, 16px);
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 3;
    pointer-events: none;
}

.daycard-indicator.is-empty {
    opacity: 0;
}

.daycard-indicator.has-indicator {
    opacity: 1;
}

.quality-dot {
    width: var(--DayIndicatorSize);
    height: var(--DayIndicatorSize);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.62);
    box-shadow: 0 0 0 2px rgba(7,66,82,.34), 0 4px 10px rgba(0,0,0,.28);
}

.quality-dot.good {
    background: radial-gradient(circle at 34% 30%, #7cf2b0 0%, #37cb7a 48%, #1f8f53 100%);
}

.quality-dot.bad {
    background: radial-gradient(circle at 34% 30%, #ff9b93 0%, #e95b53 48%, #a93532 100%);
}

.daycard.active .quality-dot.good {
    background: radial-gradient(circle at 34% 30%, #9affc3 0%, #4be18f 48%, #24985d 100%);
    box-shadow: 0 0 0 2px rgba(240,201,134,.24), 0 5px 14px rgba(0,0,0,.30);
}

.daycard.active .quality-dot.bad {
    background: radial-gradient(circle at 34% 30%, #ffb0aa 0%, #ff6c64 48%, #b73a36 100%);
    box-shadow: 0 0 0 2px rgba(240,201,134,.24), 0 5px 14px rgba(0,0,0,.30);
}

.quality-dot.neutral,
.quality-dot.none { display: none; }

.daycard.active .quality-dot.good {
    background: radial-gradient(circle at 34% 30%, #9affc3 0%, #4be18f 48%, #24985d 100%);
    box-shadow: 0 0 0 2px rgba(240,201,134,.24), 0 5px 14px rgba(0,0,0,.30);
}

.daycard.active .quality-dot.bad {
    background: radial-gradient(circle at 34% 30%, #ffb0aa 0%, #ff6c64 48%, #b73a36 100%);
    box-shadow: 0 0 0 2px rgba(240,201,134,.24), 0 5px 14px rgba(0,0,0,.30);
}

/* Activity selector */
.activity-selector--inline {
    margin-top: 0;
    padding: var(--space-4);
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(255,255,255,.42);
    border-radius: var(--radius-main-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-soft);
    backdrop-filter: blur(10px);
}

.activity-selector__title {
    font-weight: 700;
    margin: 0 0 .8rem;
    color: var(--PrimaryDarkText);
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .76rem;
    opacity: .78;
}

.tabs-panel .activity-selector__title {
    margin-top: .1rem;
}

.activity-grid {
    --activity-gap: 12px;
    --activity-pad: 8px;
    --activity-col: 0;
    --activity-row: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--activity-gap);
    padding: var(--activity-pad);
    border-radius: var(--radius-selector);
    background: rgba(7,66,82,.06);
    border: 1px solid rgba(7,66,82,.08);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.22);
    overflow: hidden;
}

.activity-grid__slider {
    position: absolute;
    top: var(--activity-pad);
    left: var(--activity-pad);
    width: calc((100% - (var(--activity-pad) * 2) - (var(--activity-gap) * 4)) / 5);
    height: calc((100% - (var(--activity-pad) * 2) - var(--activity-gap)) / 2);
    border-radius: var(--radius-selector);
    background: linear-gradient(135deg, #074252 0%, #13616d 100%);
    border: 1px solid rgba(7,66,82,.18);
    box-shadow: 0 8px 18px rgba(7,66,82,.22);
    opacity: 0;
    transition: left .32s cubic-bezier(.2,.8,.2,1), top .32s cubic-bezier(.2,.8,.2,1), width .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, opacity .18s ease;
    pointer-events: none;
    z-index: 0;
}

.activity-btn {
    --activity-icon-size: 34px;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    padding: 12px 8px;
    background: transparent;
    color: rgba(7,66,82,.82);
    cursor: pointer;
    display: grid;
    grid-template-rows: var(--activity-icon-size) minmax(2.3em, auto);
    align-content: center;
    justify-items: center;
    gap: 6px;
    min-height: 72px;
    transition: color .24s ease, transform .18s ease, box-shadow .24s ease, background .24s ease, border-color .24s ease, opacity .24s ease;
}

.activity-btn:hover {
    transform: translateY(-1px);
    color: rgba(7,66,82,.96);
}

.activity-btn.selected {
    color: #fff;
    border-color: rgba(7,66,82,.18);
}

.activity-btn.selected .activity-btn__label,
.activity-btn.selected .activity-btn__icon {
    color: #fff;
    opacity: 1;
}

.activity-btn.selected .activity-btn__icon {
    color: var(--ActivityIconSelectedColor);
}

.activity-btn.selected .activity-icon-img {
    filter: var(--ActivityIconSelectedFilter);
}

.activity-btn:not(.selected):hover {
    background: rgba(255,255,255,.28);
    border-color: rgba(7,66,82,.08);
}

.activity-btn__icon {
    align-items: center;
    align-self: center;
    color: var(--ActivityIconColor);
    display: inline-flex;
    height: var(--activity-icon-size);
    justify-content: center;
    justify-self: center;
    line-height: 1;
    transition: color .18s ease, opacity .18s ease, transform .18s ease;
    width: var(--activity-icon-size);
}

.activity-icon-img {
    display: block;
    filter: var(--ActivityIconFilter);
    height: 100%;
    object-fit: contain;
    width: 100%;
}
.activity-btn__label {
    align-self: start;
    display: block;
    max-width: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    min-height: 2.3em;
    opacity: .88;
    overflow-wrap: anywhere;
    text-align: center;
    transition: color .18s ease, opacity .18s ease;
    white-space: normal;
}

.activity-btn:hover .activity-btn__icon,
.activity-btn.selected .activity-btn__icon {
    transform: translateY(-1px);
}

@media (max-width: 520px) {
    .activity-selector--inline {
        padding: .8rem;
        border-radius: var(--radius-main-panel);
    }

    .activity-grid {
        --activity-gap: 8px;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--activity-gap);
        border-radius: var(--radius-selector);
    }

    .activity-grid__slider,
    .activity-btn {
        border-radius: var(--radius-button);
    }

    .activity-btn {
        --activity-icon-size: 28px;
        gap: 5px;
        min-height: 74px;
        padding: 9px 4px;
    }

    .activity-btn__label {
        font-size: 10px;
        line-height: 1.1;
        min-height: 2.2em;
    }
}


.day-layout .astro-frame,
.desktop-right .astro-frame,
.mobile-overlay__panel .astro-frame {
    background: linear-gradient(180deg, rgba(10,84,102,.96) 0%, rgba(7,66,82,.98) 100%);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(7,66,82,.10);
}

.day-layout .astro-frame .frame-title,
.desktop-right .astro-frame .frame-title,
.mobile-overlay__panel .astro-frame .frame-title,
.day-layout .astro-frame,
.desktop-right .astro-frame,
.mobile-overlay__panel .astro-frame {
    color: #fff;
}

/* ========================
   RIGHT PANEL: shared content
   (Used by desktop-right AND popup)
======================== */
.day-layout {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: var(--space-4);
    align-content: start;
    justify-items: stretch;
}

/* Ensure each row can take full width by default (frames need this) */
.day-layout > * {
    width: 100%;
}

/* Remove width: 100% from these elements to allow proper centering */
.day-layout .month-row,
.day-layout .daynum-row,
.day-layout .weekday-row {
    text-align: center;
    justify-self: center;
    align-self: center;
    /* Remove: width: 100%; */
}

.day-layout .month-row {
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    font-weight: 700;
    text-transform: capitalize;
}

.day-layout .daynum-row {
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
}

.day-layout .weekday-row {
    font-size: clamp(0.9rem, 1vw, 1.1rem);
    font-weight: 600;
    opacity: .85;
    text-transform: capitalize;
}

.day-layout .month-row,
.day-layout .daynum-row,
.day-layout .weekday-row {
    letter-spacing: .02em;
}

/* Ensure the moon day row content is centered */
.day-layout .moonday-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin: 2px 0 4px;
}

.day-layout .moonday-row img {
    width: var(--MoondayIconSize);
    height: var(--MoondayIconSize);
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* ========================
   DARK FRAMES (Home right panel)
   - matches the rounded dark cards in your design reference
======================== */
.astro-frame{
    width: 100%;
    max-width: none;
    background: linear-gradient(180deg, rgba(10,84,102,.96) 0%, rgba(7,66,82,.98) 100%);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-main-panel);
    padding: clamp(1rem, 1.25vw, 1.5rem);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px rgba(0,0,0,.18);
    box-sizing: border-box;
}

.astro-frame--moonday{
    padding: clamp(1.05rem, 1.5vw, 1.65rem);
}

.astro-frame--planets{
    display: flex;
    flex-direction: column;
    gap: .6rem;
    justify-self: stretch;
}

/* 2-row layout:
   Row 1: 2 columns (Sun + Moon) centered
   Row 2: 3 columns (Mercury + Venus + Mars) centered */
.astro-frame--planets .planet-grid{
    display: grid;
    gap: .75rem;
    width: 100%;
}

.astro-frame--planets .planet-grid--top{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
}

.astro-frame--planets .planet-grid--bottom{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
}

.astro-frame--planets .planet-cell{
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto);
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-width: 0;
}

.astro-frame--planets .planet-cell--clickable {
    width: auto;
    border: 0;
    border-radius: var(--radius-button);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: .12rem .18rem;
    text-align: inherit;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.astro-frame--planets .planet-cell--clickable:hover,
.astro-frame--planets .planet-cell--clickable:focus-visible {
    background: rgba(248,252,209,.08);
    box-shadow: inset 0 0 0 1px rgba(248,252,209,.12);
}

.astro-frame--planets .planet-icon{
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.astro-frame--planets .planet-zodiac{
    display: flex;
    align-items: center;
    gap: .45rem;
    justify-content: center;
    min-width: 0;
}

/* Hide the long label inside the planet frame to keep it clean */
.astro-frame--planets .astro-label{
    display: none;
}

/* Non-transition: make zodiac icon compact and aligned */
.astro-zodiac-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.astro-frame--planets .astro-zodiac-current img{
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

/* Transition block: signs above, time below */
.astro-frame--planets .astro-transition{
    display: inline-grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: .16rem;
    min-width: 0;
}

.astro-frame--planets .astro-transition__signs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .18rem;
}

.astro-frame--planets .astro-transition img{
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

.astro-frame--planets .astro-transition__connector {
    width: clamp(5px, .7vw, 12px);
    height: 1px;
    flex: 0 1 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(248,252,209,.18), rgba(240,201,134,.62));
}

.astro-frame--planets .astro-transition__time {
    padding: .12rem .34rem;
    border-radius: var(--radius-tag);
    background: linear-gradient(180deg, rgba(248,252,209,.30), rgba(240,201,134,.20));
    border: 1px solid rgba(248,252,209,.28);
    color: var(--PrimaryLightText, #F8FCD1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.15;
}

/* inside dark frames: remove the small light boxes */
.astro-frame .astro-col{
    background: transparent;
    padding: .25rem;
}

.astro-frame .md-line-wrap{
    /* remove the wide translucent band; keep only the thin golden line */
    background: transparent;
    height: 12px;
}

.astro-frame .md-line{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        rgba(248,252,209,.20) 0%,
        rgba(240,201,134,.75) 50%,
        rgba(248,252,209,.20) 100%);
}

.astro-frame .md-marker-bar{
    background: rgba(248,252,209,.95);
}

.astro-frame .md-marker-label{
    color: var(--PrimaryLightText, #F8FCD1);
    background: rgba(7,66,82,.55);
    border: 1px solid rgba(248,252,209,.18);
}


/* ========================
   MOON-DAY TIMELINE (Right panel)
======================== */
.md-timeline{
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-4);
    align-items: center;
}

.md-side{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0;
}

.md-side img{
    width: var(--MoondayIconSize);
    height: var(--MoondayIconSize);
    object-fit: contain;
}

.md-line-wrap{
    position: relative;
    height: 56px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    overflow: visible;
}

.md-line{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background: #074252;
}

/* Marker: vertical bar + time label */
.md-marker{
    position: absolute;
    left: var(--target, 0%);
    top: 50%;
    /* Keep the BAR perfectly centered on the timeline line.
       Label is positioned independently so it won't pull the marker off-center. */
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    pointer-events: none;
    animation: md-marker-move 0.5s ease-out forwards;
}

.md-marker-bar {
    position: absolute;
    left: 0;
    top: -14px;
    transform: translateX(-50%);
    width: 2px;
    height: 28px;
    border-radius: 2px;
    background: #074252;
}

.md-marker--mid .md-marker-bar {
    background: #074252;
}

.md-marker-label {
    position: absolute;
    left: 0;
    top: 22px;
    transform: translateX(-50%) translateY(-2px);
    font-size: 11px;
    line-height: 1;
    opacity: 0;
    /* subtle "pop" without affecting alignment */
    will-change: opacity, transform;
    transform-origin: center;
    animation: md-marker-label 180ms ease-out forwards;
    animation-delay: 0.5s;    
    padding: 2px 6px;
    border-radius: var(--radius-tag);
    letter-spacing: .02em;
    user-select: none;
    color: #074252;
}

@keyframes md-marker-label{
    to{ opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes md-marker-move{
    from{ left: 0%; }
    to{ left: var(--target, 0%); }
}

/* Middle (triple) Moon-day icon: compact and centered precisely over the middle marker */
.md-mini{
    position: absolute;
    top: -16px;
    left: var(--target, 0%);
    width: clamp(22px, 2vw, 30px);
    height: clamp(22px, 2vw, 30px);
    transform: translateX(-50%);
    opacity: .98;
    border-radius: 999px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-mini img{
    width: auto;
    height: 28px;
    max-width: 28px;
    object-fit: contain;
    display: block;
}

/* Generic icon button (used to make icons clickable without changing layout) */
.icon-btn{
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}

.icon-btn:focus{
    outline: none;
}

.icon-btn:hover img{
    filter: brightness(1.05);
}

.muted {
    color: var(--Gray500);
}

/* Row 5: two columns Sun(left) / Moon(right) */
.astro-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

/* Row 6: three columns Mercury/Venus/Mars */
.astro-three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .8rem;
}

.astro-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .6rem;
    background: var(--ShadedBackground);
    border-radius: 12px;
}

.astro-label {
    font-weight: 600;
}

/* Planet sign transitioning (Prev sign • time • New sign) */
.astro-transition {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

.astro-transition img {
    width: calc(var(--ZodiacIconSize) * 0.70);
    height: calc(var(--ZodiacIconSize) * 0.70);
    object-fit: contain;
}

.astro-transition__time {
    font-weight: 700;
    font-size: .95rem;
    padding: .12rem .45rem;
    border-radius: var(--radius-tag);
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(0,0,0,.08);
    line-height: 1.2;
}

/* scale small badges and big zodiac icons */
.astro-col > img[alt="Sun"],
.astro-col > img[alt="Moon"],
.astro-col > img[alt="Mercury"],
.astro-col > img[alt="Venus"],
.astro-col > img[alt="Mars"] {
    width: var(--SunMoonBadge);
    height: var(--SunMoonBadge);
    object-fit: contain;
}

.astro-col img[alt="Sun sign"],
.astro-col img[alt="Moon sign"],
.astro-col img[alt="Mercury sign"],
.astro-col img[alt="Venus sign"],
.astro-col img[alt="Mars sign"] {
    width: var(--ZodiacIconSize);
    height: var(--ZodiacIconSize);
    object-fit: contain;
}

/* Events list under rows */
.astro-frame--events.is-clickable {
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.astro-frame--events.is-clickable:hover,
.astro-frame--events.is-clickable:focus-visible {
    border-color: rgba(248,252,209,.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(7,66,82,.18);
}

.events-list {
    grid-column: 1 / -1;
    margin: .4rem 0 0 0;
    padding-left: 0;
    list-style: none;
    color: var(--PrimaryLightText, #F8FCD1);
}

.astro-frame--events .events-list li {
    color: var(--PrimaryLightText, #F8FCD1);
    font-weight: 600;
}

.event-title {
    min-width: 0;
}

/* ========================
   POPUP OVERLAY (blocked on desktop)
======================== */
.mobile-overlay {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1000;
}
/* NOTE: no global .open rule => overlay never shows on desktop */

.mobile-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
}

.mobile-overlay__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 88vh;
    background: #fff;
    border-top-left-radius: var(--radius-main-panel);
    border-top-right-radius: var(--radius-main-panel);
    box-shadow: 0 -10px 30px rgba(0,0,0,.2);
    transform: translateY(100%);
    transition: transform .28s ease;
    display: flex;
    flex-direction: column;
}

.mobile-overlay__header {
    display: flex;
    justify-content: flex-end;
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.overlay-close {
    border: none;
    background: var(--LightBlueBackground);
    padding: .4rem .6rem;
    border-radius: var(--radius-button);
    cursor: pointer;
    font-size: 1rem;
}

.mobile-overlay__body {
    overflow: auto;
    padding: 1rem;
}

/* Make popup use the exact same right-panel styling */
.mobile-overlay .day-layout { /* inherits everything */
}

/* ========================
   INFO MODAL (Moon-day / Planet details)
======================== */
.info-modal{
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.info-modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
}

.info-modal__panel{
    position: relative;
    width: min(760px, 94vw);
    max-height: 72vh;
    max-height: min(72vh, calc(100vh - 4rem));
    max-height: min(72dvh, calc(100dvh - 4rem));
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: var(--radius-main-panel);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.info-modal__header{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.55);
}

.info-modal__title{
    font-weight: 800;
    color: #063646;
}

.info-modal__close{
    border: none;
    background: rgba(7,66,82,.08);
    color: #063646;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-button);
    cursor: pointer;
    font-size: 1rem;
}

.info-modal__body{
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.info-modal__text{
    white-space: normal;
    line-height: 1.55;
    color: #05303d;
}

.info-modal__event + .info-modal__event {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(7,66,82,.14);
}

.info-modal__event-title {
    margin-bottom: .35rem;
    color: #063646;
    font-weight: 800;
    line-height: 1.3;
}

/* ========================
   RESPONSIVE (Mobile tweaks)
======================== */

/* ========================
   SMALL MOBILE WIDTH RECOVERY
======================== */
@media (max-width: 640px) {
    .header-actions {
        flex-shrink: 0;
    }

    .header-actions .lang-switcher {
        gap: 0;
        padding: 3px;
        border-radius: var(--radius-selector);
    }

    .header-actions .lang-select {
        min-width: 62px;
        padding: 6px 25px 6px 10px;
        font-size: .84rem;
    }

    .header-actions .lang-switcher--select::after {
        right: 9px;
    }

    .header-actions .lang-btn {
        min-width: 38px;
        padding: 6px 8px;
        line-height: 1;
        border-radius: var(--radius-tag);
    }

    .info-modal {
        align-items: flex-start;
        padding: max(1rem, env(safe-area-inset-top)) 10px max(1rem, env(safe-area-inset-bottom));
    }

    .info-modal__panel {
        width: min(560px, 96vw);
        max-height: 68vh;
        max-height: min(68vh, calc(100vh - 2rem));
        max-height: min(68dvh, calc(100dvh - 2rem));
        margin: auto 0;
    }

    .info-modal__header {
        padding: .75rem .85rem;
    }

    .info-modal__body {
        padding: .85rem;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .card {
        padding: 12px;
        border-radius: var(--radius-main-panel);
    }

    .card.split-2 {
        padding: 10px;
        gap: 10px;
    }

    .tabs-panel,
    .desktop-right {
        padding: 4px;
    }

    .weekday-header {
        margin-bottom: 6px;
    }

    .weekday-header,
    .tabs-strip-grid {
        gap: 4px;
    }

    .activity-selector--inline {
        margin-top: 2px;
        padding-top: 0;
    }
}

@media (max-width: 420px) {
    .container {
        padding-left: 6px;
        padding-right: 6px;
    }

    .card {
        padding: 10px;
    }

    .card.split-2 {
        padding: 8px;
        gap: 8px;
    }

    .tabs-panel,
    .desktop-right {
        padding: 2px;
    }

    .weekday-header,
    .tabs-strip-grid {
        gap: 3px;
    }
}

@media (max-width: 900px) {
    /* Single column; hide desktop right on small screens */
    .container {
        padding: 8px;
    }

    .app-main {
        padding-top: 4px;
        padding-bottom: 18px;
    }

    .split-2 {
        grid-template-columns: 1fr;
        padding: var(--space-2);
        gap: var(--space-4);
    }

    .desktop-right {
        display: none;
    }

    .tabs-panel {
        gap: var(--space-3);
    }

    .month-header {
        padding: var(--space-2);
    }

    /* Calendar: 7 columns, mobile gaps; perfect squares already applied */
    .weekday-header,
    .tabs-strip-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: clamp(4px, 0.9vw, var(--DayCellGapMobile));
    }

    .weekday-header {
        margin-bottom: 6px;
    }

    .weekday-cell {
        font-size: clamp(10px, 2.3vw, 12px);
        padding: 1px 0;
    }

    .tabs-strip-grid {
        gap: clamp(4px, 0.9vw, var(--DayCellGapMobile));
    }

    .daycard {
        --DayCardPadX: clamp(1px, 0.8vw, 4px);
        --DayCardPadTop: clamp(1px, 0.8vw, 4px);
        --DayCardPadBottom: clamp(10px, 2vw, 14px);
        --DayCardGap: 0px;
        --DayNumSize: clamp(10px, 2.7vw, 13px);
        --DayIconMaxW: 98%;
        --DayIconMaxH: 78%;
        --DayIndicatorSize: clamp(5px, 1.2vw, 8px);
        border-radius: 13px;
        aspect-ratio: 1 / 1.34;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(7,66,82,.12);
    }

    .daycard-icon img {
        max-width: var(--DayIconMaxW);
        max-height: var(--DayIconMaxH);
    }

    .daycard-indicator {
        bottom: 3px;
        width: 12px;
        height: 12px;
    }

    .activity-selector--inline {
        padding: 10px;
        border-radius: var(--radius-main-panel);
    }

    .tabs-strip-grid {
        gap: clamp(4px, 0.9vw, var(--DayCellGapMobile));
    }

    .daycard {
        --DayCardPadX: clamp(2px, 0.8vw, 5px);
        --DayCardPadTop: clamp(2px, 0.8vw, 5px);
        --DayCardPadBottom: clamp(10px, 2vw, 14px);
        --DayCardGap: 1px;
        --DayNumSize: clamp(10px, 2.7vw, 13px);
        --DayIconMaxW: 96%;
        --DayIconMaxH: 78%;
        --DayIndicatorSize: clamp(6px, 1.5vw, 9px);
        border-radius: 13px;
        aspect-ratio: 1 / 1.34;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(7,66,82,.12);
    }

    .daycell-empty {
        border-radius: 13px;
    }

    .daycard.active,
    .daycard.is-today.active {
        border-color: rgba(255,255,255,.22);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            0 0 22px rgba(255,238,177,.18),
            0 12px 24px rgba(7,66,82,.20);
    }

    .daycard-icon img {
        max-width: var(--DayIconMaxW);
        max-height: var(--DayIconMaxH);
    }

    /* Show overlay only on mobile when flagged open */
    body.mobile-day-overlay-open .app-header {
        z-index: 0;
        pointer-events: none;
    }

    body.mobile-day-overlay-open .app-main {
        z-index: 5000;
    }

    .app-main:has(.mobile-overlay.open) {
        z-index: 5000;
    }

    .mobile-overlay.open {
        display: block;
        z-index: 6000;
    }

    .mobile-overlay.open .mobile-overlay__panel {
        transform: translateY(0);
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top)));
    }

    .mobile-overlay__body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-overlay__panel .astro-frame--planets {
        gap: .65rem;
    }

    .mobile-overlay__panel .astro-frame--planets .planet-cell {
        grid-template-columns: auto minmax(0, auto);
        justify-items: stretch;
        gap: .32rem;
    }

    .mobile-overlay__panel .astro-frame--planets .planet-icon {
        width: 30px;
        height: 30px;
    }

    .mobile-overlay__panel .astro-frame--planets .astro-zodiac-current img {
        width: 34px;
        height: 34px;
    }

    .mobile-overlay__panel .astro-frame--planets .astro-transition img {
        width: 22px;
        height: 22px;
    }

    .mobile-overlay__panel .astro-frame--planets .astro-transition__connector {
        width: 3px;
        flex-basis: 3px;
    }

    .mobile-overlay__panel .astro-frame--planets .astro-transition__time {
        font-size: .65rem;
        padding: .1rem .23rem;
    }

    /* Prevent accidental horizontal scroll */
    html, body {
        overflow-x: hidden;
    }
}

/* Disable hover zoom on touch devices */
@media (hover:none) {
    .daycard:hover {
        transform: none;
    }
}

/* Activity tags in DayEvent */
.gb-tags-wrap {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.gb-tags {
    display: flex;
    flex-direction: column; /* one column */
    align-items: center; /* centered */
    gap: 8px;
    width: 100%;
}

.gb-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-tag);
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    width: min(320px, 92%); /* nice centered column */
    justify-content: center;
}

.gb-tag__icon {
    align-items: center;
    color: var(--ActivityIconColor);
    display: inline-flex;
    flex: 0 0 auto;
    height: 22px;
    justify-content: center;
    width: 22px;
}

.gb-tag__icon .activity-icon-img {
    height: 22px;
    width: 22px;
}

.gb-tag__label {
    font-weight: 600;
    font-size: 14px;
}

.gb-tag.tag-good {
    border-color: rgba(0, 180, 90, .55);
    background: rgba(0, 180, 90, .14);
}

.gb-tag.tag-bad {
    border-color: rgba(220, 50, 50, .55);
    background: rgba(220, 50, 50, .14);
}

.gb-tags-empty {
    text-align: center;
    padding: 8px 0;
}

/* ========================
   PROFESSIONAL OUTER SHELL
======================== */
html, body {
    background:
        radial-gradient(ellipse 120% 86% at 50% 18%, rgba(255,255,255,.56) 0%, rgba(255,255,255,.18) 36%, rgba(255,255,255,0) 64%),
        radial-gradient(ellipse 112% 80% at 0% 0%, rgba(248,252,209,.26) 0%, rgba(248,252,209,.08) 32%, rgba(248,252,209,0) 58%),
        radial-gradient(ellipse 95% 78% at 100% 100%, rgba(7,66,82,.075) 0%, rgba(7,66,82,.035) 38%, rgba(7,66,82,0) 72%),
        linear-gradient(180deg, rgba(246,249,221,.96) 0%, rgba(216,235,215,.94) 43%, rgba(106,174,180,.88) 100%);
    background-attachment: fixed;
}

body {
    min-height: 100vh;
}

.app-shell {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
}

.app-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 82% at 18% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.055) 34%, rgba(255,255,255,0) 64%),
        radial-gradient(ellipse 120% 88% at 86% 8%, rgba(72,166,177,.075) 0%, rgba(72,166,177,.025) 38%, rgba(72,166,177,0) 70%),
        radial-gradient(ellipse 110% 94% at 50% 50%, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 45%, rgba(7,66,82,.045) 100%),
        linear-gradient(180deg, rgba(7,66,82,.018) 0%, rgba(7,66,82,0) 46%, rgba(7,66,82,.035) 100%);
}

.app-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .32;
    background:
        linear-gradient(115deg, rgba(255,255,255,.018) 0%, rgba(255,255,255,0) 34%, rgba(7,66,82,.018) 100%),
        radial-gradient(ellipse 118% 78% at 50% 42%, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 46%, rgba(7,66,82,.04) 100%);
}

.app-main {
    position: relative;
    z-index: 1;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px 16px 7px;
    backdrop-filter: blur(18px);
}

.header-row {
    max-width: 1680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    padding: 11px 16px;
    border-radius: var(--radius-main-panel);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 18px 45px rgba(19,46,54,.10);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 17px;
    flex-wrap: wrap;
}

.brand-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: default;
    color: var(--PrimaryDarkText);
}

.brand-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-button);
    background:
        radial-gradient(circle at 30% 30%, #f8fcd1 0, #dfe7b4 20%, rgba(248,252,209,.15) 22%),
        linear-gradient(145deg, #074252 0%, #1d6a73 55%, #48A6B1 100%);
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        0 10px 22px rgba(7,66,82,.18);
    position: relative;
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: var(--radius-tag);
    border: 1px solid rgba(248,252,209,.55);
}

.brand-text-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.brand-title {
    font-size: clamp(1.08rem, 1.05vw, 1.35rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: .04em;
}

.brand-subtitle {
    font-size: .82rem;
    color: rgba(7,66,82,.72);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.main-nav {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 4px;
    border-radius: var(--radius-selector);
    background: rgba(7,66,82,.06);
    border: 1px solid rgba(7,66,82,.08);
    min-width: 180px;
    overflow: hidden;
}

.main-nav__slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    border-radius: var(--radius-selector);
    background: linear-gradient(135deg, #074252 0%, #13616d 100%);
    box-shadow: 0 8px 18px rgba(7,66,82,.22);
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    z-index: 0;
}

.main-nav.is-year .main-nav__slider {
    transform: translateX(100%);
}

.main-nav__link,
.main-nav a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(7,66,82,.82);
    padding: 8px 14px;
    border-radius: var(--radius-button);
    font-weight: 700;
    transition: color .24s ease, opacity .24s ease;
}

.main-nav__link.active,
.main-nav a.active {
    color: #fff;
}


.main-nav__link:not(.active):hover,
.main-nav a:not(.active):hover {
    color: rgba(7,66,82,.96);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px;
    border-radius: var(--radius-selector);
    background: rgba(7,66,82,.06);
}

.lang-switcher--select::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(255,255,255,.9);
    transform: translateY(-40%);
    pointer-events: none;
}

.lang-select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 70px;
    border: 1px solid rgba(7,66,82,.12);
    border-radius: var(--radius-button);
    padding: 6px 30px 6px 12px;
    background: linear-gradient(135deg, #074252 0%, #1f6d77 100%);
    box-shadow: 0 8px 18px rgba(7,66,82,.22);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
}

.lang-select:focus-visible {
    outline: 2px solid rgba(190,155,98,.55);
    outline-offset: 2px;
}

.lang-select option {
    color: #05303d;
    background: #fff;
}

.lang-btn {
    border: 1px solid transparent;
    background: transparent;
    color: rgba(7,66,82,.8);
    border-radius: var(--radius-button);
    padding: 6px 11px;
    cursor: pointer;
    font-weight: 700;
    transition: all .2s ease;
}

.lang-btn:hover {
    background: rgba(7,66,82,.08);
}

.lang-btn.active {
    color: #fff;
    border-color: rgba(7,66,82,.12);
    background: linear-gradient(135deg, #074252 0%, #1f6d77 100%);
    box-shadow: 0 8px 18px rgba(7,66,82,.22);
}

.app-main {
    padding-top: 8px;
    padding-bottom: 32px;
}

.container {
    max-width: 1680px;
}

.card {
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 18px 48px rgba(19,46,54,.10);
}

.calendar-shell {
    padding: var(--space-4);
    border-radius: var(--radius-main-panel);
    background: linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.16) 100%);
    border: 1px solid rgba(255,255,255,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.34), var(--shadow-soft);
}

.month-header--inside {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    justify-content: space-between;
    border-radius: var(--radius-selector);
    background: rgba(255,255,255,.36);
    border: 1px solid rgba(255,255,255,.32);
}

.month-title {
    font-size: clamp(1.05rem, 1vw, 1.25rem);
    letter-spacing: .04em;
}

.nav-btn {
    min-width: 42px;
    min-height: 42px;
    font-weight: 700;
    color: var(--PrimaryDarkText);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(7,66,82,.08);
    box-shadow: 0 6px 14px rgba(7,66,82,.08);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.nav-btn:hover {
    transform: translateY(-1px);
    background: #fff;
    box-shadow: 0 10px 18px rgba(7,66,82,.12);
}

.admin-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.admin-gate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7,22,27,.45);
    backdrop-filter: blur(6px);
}

.admin-gate__panel {
    position: relative;
    z-index: 1;
    width: min(92vw, 420px);
    margin: 14vh auto 0;
    padding: 22px;
    border-radius: var(--radius-main-panel);
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.82);
    box-shadow: 0 24px 60px rgba(10,30,35,.24);
}

.admin-gate__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.admin-gate__eyebrow {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(7,66,82,.58);
    margin-bottom: 4px;
}

.admin-gate__title {
    font-size: 1.1rem;
    font-weight: 750;
    color: var(--PrimaryDarkText);
}

.admin-gate__close {
    border: none;
    background: rgba(7,66,82,.06);
    color: var(--PrimaryDarkText);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-button);
    cursor: pointer;
}

.admin-gate__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-gate__input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(7,66,82,.12);
    font-size: 1rem;
    outline: none;
}

.admin-gate__input:focus {
    border-color: rgba(7,66,82,.35);
    box-shadow: 0 0 0 4px rgba(72,166,177,.14);
}

.admin-gate__hint {
    font-size: .86rem;
    color: rgba(7,66,82,.65);
}

.admin-gate__error {
    color: #a32929;
    font-weight: 600;
    font-size: .92rem;
}

.admin-gate__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.app-snackbar {
    position: fixed;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 14px 12px 18px;
    border-radius: 16px;
    background: rgba(17, 24, 27, .94);
    color: #fff;
    font-size: .95rem;
    font-weight: 650;
    box-shadow: 0 14px 30px rgba(7, 31, 38, .24);
}

.app-snackbar__message {
    min-width: 0;
}

.app-snackbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.app-snackbar__button {
    border: 0;
    background: transparent;
    color: #e8f4d0;
    cursor: pointer;
    font: inherit;
    font-size: .86rem;
    font-weight: 800;
    padding: 6px 8px;
    border-radius: var(--radius-button);
}

.app-snackbar__button:hover:not(:disabled),
.app-snackbar__button:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, .12);
}

.app-snackbar__button:disabled {
    cursor: wait;
    opacity: .58;
}

.app-snackbar__button--retry {
    color: #88edf0;
}

@media (max-width: 900px) {
    .app-header {
        padding: 10px 10px 6px;
    }

    .header-row {
        padding: 10px;
        gap: 8px;
        border-radius: var(--radius-main-panel);
    }

    .brand-block {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: 0;
    }

    .brand-trigger {
        flex: 0 1 auto;
        gap: 7px;
        min-width: 0;
    }

    .brand-title {
        font-size: clamp(.92rem, 2.8vw, 1.08rem);
        letter-spacing: .025em;
        white-space: nowrap;
    }

    .main-nav {
        flex: 1 1 132px;
        min-width: 132px;
        overflow: hidden;
    }

    .main-nav__link,
    .main-nav a {
        padding: 7px 9px;
        font-size: .9rem;
    }

    .header-actions {
        flex: 0 0 auto;
    }

    .card.split-2 {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .calendar-shell {
        padding: 0;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .activity-selector--inline {
        margin-top: 8px;
        padding: clamp(10px, 3vw, var(--space-4));
        border-radius: var(--radius-main-panel);
        background: rgba(255,255,255,.34);
        border: 1px solid rgba(255,255,255,.42);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-soft);
        backdrop-filter: blur(10px);
    }

    .activity-grid {
        --activity-gap: clamp(8px, 2.4vw, 12px);
        --activity-pad: 8px;
        gap: var(--activity-gap);
        padding: var(--activity-pad);
        border-radius: var(--radius-selector);
        background: rgba(7,66,82,.06);
        border: 1px solid rgba(7,66,82,.08);
        box-shadow: inset 0 1px 1px rgba(255,255,255,.22);
    }

    .md-timeline {
        gap: var(--space-3);
    }

    .md-line-wrap {
        height: 48px;
    }

    .md-mini {
        top: -16px;
        width: 30px;
        height: 30px;
    }

    .md-mini img {
        height: 26px;
        max-width: 26px;
    }

    .md-side img {
        width: clamp(52px, 14vw, 72px);
        height: clamp(52px, 14vw, 72px);
    }
}

@media (max-width: 640px) {
    .header-row {
        padding: 8px;
        gap: 6px;
    }

    .brand-block {
        gap: 6px;
    }

    .brand-trigger {
        gap: 6px;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
    }

    .brand-mark::after {
        inset: 6px;
    }

    .brand-title {
        font-size: .92rem;
    }

    .main-nav {
        flex-basis: 118px;
        min-width: 118px;
        padding: 3px;
    }

    .main-nav__slider {
        top: 3px;
        left: 3px;
        width: calc(50% - 3px);
        height: calc(100% - 6px);
    }

    .main-nav__link,
    .main-nav a {
        padding: 6px 7px;
        font-size: .82rem;
    }

    .weekday-header,
    .tabs-strip-grid {
        gap: 3px;
    }

    .daycard {
        --DayCardPadX: 2px;
        --DayCardPadTop: 2px;
        --DayCardPadBottom: 10px;
        --DayIconMaxH: 76%;
        border-radius: 12px;
        aspect-ratio: 1 / 1.34;
    }

    .daycell-empty {
        border-radius: 12px;
    }

    .lang-select {
        min-width: 58px;
        padding: 5px 23px 5px 9px;
        font-size: .8rem;
    }
}