* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================================================
   GLASS PANEL DESIGN TOKENS
   One shared glass style for BOTH side panels:
     - .side-menu       (left,  slides in from the left)
     - .settings-screen (right, slides in from the right)
   Both consume these variables, so their size / radius / glass / rim always
   match; only the mirrored side (left vs right) differs.
   ========================================================================= */

:root {
    --glass-w: 48%;
    --glass-max-w: 200px;
    --glass-radius: 24px;
    --glass-pad-y: 18px;
    --glass-pad-x: 14px;

    --glass-bg: rgba(25, 29, 36, 0.5);
    --glass-blur: blur(20px) saturate(135%);
    /* lighter blur for the day-detail / event / popup cards - one blur layer
       per surface, cheap enough for Android WebView. Moderate 12px + a mild
       saturate for a premium frosted look (still lighter than --glass-blur). */
    --glass-blur-lite: blur(12px) saturate(1.4);

    --glass-shadow-blur: 44px;
    --glass-shadow-color: rgba(0, 0, 0, 0.42);
    --glass-top-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --glass-edge-highlight: rgba(255, 255, 255, 0.06);

    --glass-rim-w: 10px;
    --glass-rim-stops:
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.04) 34%,
        rgba(150, 190, 245, 0.10) 62%,
        rgba(0, 0, 0, 0.20) 100%;
}

:root[data-theme="light"] {
    --glass-bg: rgba(255, 255, 255, 0.55);
}

html {
    background: #0b0d11;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0b0d11;
    color: #f4f6f8;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}


/* =========================
   APP
========================= */

.app {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
   background: #141820;
}


/* =========================
   HEADER
========================= */

.app-header {
    min-height: 68px;
    background: #79aef2;
    color: #0c1117;

    display: grid;

    /* Flow items: [hamburger] [KBS logo] [Prabhupada, pinned right].
       The title is taken out of flow and sits at the true header centre. */
    grid-template-columns:
    18px
    auto
    1fr;

gap: 4px;
/* safe-area aware: pushes the header content below a status bar / notch
   (viewport-fit=cover is set); modest extra breathing room otherwise */
padding: max(10px, calc(env(safe-area-inset-top, 6px) + 6px)) 10px 8px;
align-items: center;

}

#menu-button {
    justify-self: start;
}


.header-title {
    position: absolute;
    left: 50%;
    /* stay optically centred in the VISIBLE part of the header when the
       header grows for a status bar / notch */
    top: calc(50% + (env(safe-area-inset-top, 0px) / 2));
    transform: translate(-50%, -50%);

    text-align: center;
    pointer-events: none;
}


.header-title h1 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;

    /* one premium near-black colour with a glossy, softly illuminated look:
       a faint light reflection above + a gentle depth shadow below.
       No gradients, no heavy 3D. */
    color: #0b0e13;
    text-shadow:
        0 -1px 1px rgba(255, 255, 255, 0.22),
        0  1px 2px rgba(0, 0, 0, 0.28);
}

.header-title p {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 1;

    /* same premium near-black + same subtle gloss as the title */
    color: #0b0e13;
    text-shadow:
        0 -1px 1px rgba(255, 255, 255, 0.2),
        0  1px 2px rgba(0, 0, 0, 0.25);
}


/* =========================
   BUTTONS
========================= */

button {
    font-family: inherit;
}

.icon-button,
.nav-button {
    border: 0;

    background: rgba(
        255,
        255,
        255,
        0.2
    );

    color: #0b1118;
    cursor: pointer;

    transition:
        background 0.16s ease,
        transform 0.12s ease;
}

.icon-button {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Hamburger icon - compact, evenly spaced 3 lines (CSS only).
   Pulled tight into the top-left corner, slightly smaller, but the
   button keeps a 40px touch target. */

#menu-button {
    font-size: 0;
    line-height: 0;

    /* lives in the .month-navigation row now: sized to match the ‹ › arrows,
       light hamburger lines for the dark calendar background */
    width: 34px;
    height: 34px;
    border-radius: 10px;

    justify-content: center;
    padding-left: 0;
    /* pulled close to the row's left edge (own spacing only); stays >=2px
       on-screen even at the <=370px breakpoint where .calendar-container's
       left padding drops to 12px, so it's never clipped off-viewport */
    margin-left: -10px;

    background: transparent;
    color: #eef1f4;
}

#menu-button::before {
    content: "";

    width: 18px;
    height: 2.5px;
    border-radius: 2px;

    background: currentColor;

    box-shadow:
        0 -5px 0 currentColor,
        0  5px 0 currentColor;
}


/* Move only the three dots button */
.app-header {
    position: relative;
}

#more-button {
    justify-self: end;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    width: auto;
    height: 44px;

    background: transparent;

    transform: none;
}

   
.icon-button:hover,
.nav-button:hover {
    background: rgba(
        255,
        255,
        255,
        0.32
    );
}



.icon-button:active,
.nav-button:active {
    transform: scale(0.94);
}


/* =========================
   CALENDAR CONTAINER
========================= */

.calendar-container {
    /* a little more top room so the month nav / weekdays / cells sit lower
       and the whole calendar block is vertically balanced on a phone;
       a small bottom padding keeps the day-detail card from touching the
       edge and clears a gesture / home-indicator bar, without leaving
       excess empty space beneath the card */
    padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px));
}


/* =========================
   MONTH NAVIGATION
========================= */

.month-navigation {
    /* compact row:  [menu] [‹] September 2026 [›]  */
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 8px;
}

/* invisible right-side spacer - sized (12px, not the hamburger's 34px) so
   the › arrow's centre lines up with the Prabhupada avatar in the header
   above; "September 2026" still sits close to optical centre (measured
   ~6px off on a 430px-wide screen - the same small, imperceptible margin
   the old 34px value left on the other side) */
.month-navigation::after {
    content: "";
    flex: 0 0 12px;
}

.month-navigation h2 {
    flex: 1;
    min-width: 0;

    text-align: center;
    font-size: 21px;
    line-height: 1.2;
    font-weight: 650;
    color: #f5f7fa;
}

.nav-button {
    width: 34px;
    height: 34px;
    border-radius: 10px;

    background: #21262d;
    color: #f3f5f7;

    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================
   TODAY BUTTON
========================= */

.today-action {
    min-height: 6px;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 2px;
}

.today-button {
    border: 1px solid #446e9c;

    background: #1d3147;
    color: #9fcaff;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        transform 0.12s ease;
}

.today-button:hover {
    background: #24405e;
}

.today-button:active {
    transform: scale(0.95);
}

.today-button[hidden] {
    display: none;
}


/* =========================
   CALENDAR
========================= */

.calendar {
    width: 100%;
    margin-bottom: 10px;
}


/* Week labels */

.weekdays {
    display: grid;
    grid-template-columns: repeat(
        7,
        minmax(0, 1fr)
    );

    column-gap: 5px;

    text-align: center;

    margin-top: 0;
    margin-bottom: 6px;

    color: #838c97;

    font-size: 14.5px;
    font-weight: 600;
}

.weekdays span {
    min-width: 0;
    padding: 7px 0;
    background: linear-gradient(
    135deg,
    #c9a227,
    #f1d77a
);

color: #1a1a1a;

box-shadow: 0 2px 5px rgba(201, 162, 39, 0.25);

}


/* Calendar grid */

.calendar-days {
    display: grid;

    grid-template-columns: repeat(
        7,
        minmax(0, 1fr)
    );

    column-gap: 5px;
    row-gap: 7px;

    width: 100%;
}


/* Empty date slot */

.empty-day {
    width: 100%;
}


/* Actual date */

.calendar-day {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #f4f6f8;

    font-size: 16px;
    font-weight: 500;

    cursor: pointer;
    outline: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

.calendar-day:hover {
    background: #232831;
}

.calendar-day:active {
    transform: scale(0.92);
}


/* ---- glassmorphism for day cells (UI only) ----
   Soft inset edge + light inner top highlight + subtle lift, done with
   box-shadow only so the box model / grid / date number / event dots /
   festival markers stay pixel-identical (no border, no size change).
   The translucent cell background (rgba(255,255,255,0.1)) already exists.
   .today keeps its ring (its own box-shadow wins by source order);
   .selected is excluded so the selected cell is unchanged.
   No backdrop-filter - 42 blurred cells would be an Android WebView
   perf problem, and the tint + edge already read as glass at this size. */
.calendar-day:not(.selected) {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.18);
}


/* =========================
   TODAY
========================= */

.calendar-day.today {
    color: #8fc5ff;

    font-weight: 700;

    box-shadow:
        inset 0 0 0 1.5px #5b91cb;
}


/* =========================
   SELECTED
========================= */

.calendar-day.selected {
    background: #edf5ff;
    color: #3271b4;

    font-weight: 700;

    box-shadow: none;
}


/* Today + Selected */

.calendar-day.today.selected {
    background: #edf5ff;
    color: #3271b4;

    box-shadow:
        0 0 0 2px
        rgba(121, 174, 242, 0.28);
}


/* =========================
   EKADASI / FESTIVAL CELL MARKERS
   All rules live in one place near the end of this file
   ("CALENDAR CELL SUB-LABEL"). Only .calendar-day-num stays here.
========================= */

.calendar-day-num {
    line-height: 1;
}


/* =========================
   DAY DETAILS
========================= */

.day-details {
    /* tight separation from the calendar grid - equal to .calendar's own
       margin-bottom (10px), so the two margins collapse (adjacent block
       siblings, no BFC in between) to a single 10px gap rather than
       summing - position only, the card's actual content/height still
       comes from its own padding + content below */
    margin-top: 10px;

    /* glassmorphism (UI only - no layout/logic change). One blur layer for
       the whole day panel; the event cards inside stay blur-free for perf. */
    background: rgba(24, 29, 40, 0.5);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);

    /* a touch more defined edge than before - still a soft rim, not a
       hard line */
    border: 1.5px solid rgba(255, 255, 255, 0.17);

    border-radius: 20px;

    padding: 13px 18px 11px;

    /* deeper "floating card" shadow for a more modern app feel, still
       subtle/dark-theme-appropriate */
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* fallback when backdrop-filter is unsupported - keep it a readable solid
   (the .special-days-panel fallback lives right after that rule so it wins
   the cascade) */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .day-details { background: #181d28; }
}

.day-details h2 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;

    margin-bottom: 7px;

    color: #f5f7fa;
}


/* =========================
   EVENTS
========================= */

#day-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.event-item,
.parana-item {
    font-size: 14px;
    line-height: 1.45;

    border-radius: 11px;

    padding: 11px 12px;
}

/* glass cards (UI only) - translucent over the frosted .day-details panel,
   no own backdrop-filter so a festival day with several cards stays smooth. */
.event-item {
    background: rgba(255, 255, 255, 0.055);

    border: 1.25px solid rgba(255, 255, 255, 0.12);

    color: #f1f3f5;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Parana keeps the same glass card look as every other card */

.parana-item {
    background: rgba(255, 255, 255, 0.055);

    border: 1.25px solid rgba(255, 255, 255, 0.12);

    color: #f1f3f5;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.no-event {
    font-size: 14px;
    line-height: 1.5;

    color: #9099a5;

    padding: 2px 1px;
}


/* English (kept) + Myanmar (added below) inside an event card */

.event-en {
    display: block;
}

.event-mm {
    display: block;

    margin-top: 5px;

    font-size: 13px;
    line-height: 1.6;

    color: #c3ccd7;
}

.event-note-mm {
    display: block;

    margin-top: 4px;

    font-size: 13px;
    line-height: 1.6;

    color: #c3ccd7;
}

.special-day-note-mm {
    color: #c3ccd7;
}


/* =========================
   EVENT TYPE - TEXT COLOURS ONLY (no coloured boxes)
   Applied to both the English line and the Myanmar line.
========================= */

.evt-festival .event-en,
.evt-festival .event-mm,
.evt-festival .event-note-mm {
    color: #E0B84C;                 /* Major festival - soft gold */
}

.evt-ekadasi .event-en,
.evt-ekadasi .event-mm,
.evt-ekadasi .event-note-mm {
    color: #74C6A8;                 /* Ekadasi - soft green / teal */
}

.parana-item .event-en,
.parana-item .event-mm {
    color: #8FD3B8;                 /* Parana line - light green / teal */
}

.evt-appearance .event-en,
.evt-appearance .event-mm,
.evt-appearance .event-note-mm {
    color: #83B9E8;                 /* Appearance day - soft blue */
}

.evt-disappearance .event-en,
.evt-disappearance .event-mm,
.evt-disappearance .event-note-mm {
    color: #B49BDD;                 /* Disappearance day - soft purple */
}

.evt-vrata .event-en,
.evt-vrata .event-mm,
.evt-vrata .event-note-mm {
    color: #E6A867;                 /* Vrata - soft orange */
}


/* Fasting phrase: follow the card's colour, keep a light emphasis */

.fast-hl,
.fast-hl-half {
    color: inherit;
    font-weight: 600;
}


/* Festival image inside the event detail card */

.festival-image {
    display: block;

    width: auto;
    max-width: 100%;

    max-height: 210px;
    margin: 0 auto 9px;

    object-fit: contain;

    border-radius: 9px;
}

.festival-credit {
    display: block;

    margin: -3px 0 8px;

    font-size: 11px;
    line-height: 1.4;

    color: #9099a5;
}


/* =========================
   SRILA PRABHUPADA - header avatar + gallery
========================= */

.prabhupada-avatar.is-tappable {
    cursor: pointer;

    transition:
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

.prabhupada-avatar.is-tappable:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.prabhupada-avatar.is-tappable:active {
    transform: scale(0.94);
}


.prabhupada-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Native-app history card - dark blue glass, rounded, image on top,
   clean app-designed info section below. No external source text. */

.prabhupada-gallery-item {
    margin: 0;

    padding: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(30, 41, 66, 0.72),
            rgba(20, 28, 46, 0.72)
        );

    border: 1px solid rgba(130, 160, 210, 0.16);
    border-radius: 16px;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    overflow: hidden;
}

.prabhupada-gallery-item img {
    display: block;
    width: 100%;

    max-height: 260px;
    object-fit: cover;

    border-radius: 11px;
}

.prabhupada-info {
    display: block;

    padding: 11px 5px 3px;
}

.prabhupada-title {
    display: block;

    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0.2px;

    color: #eef2f7;
}

.prabhupada-desc {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    line-height: 1.5;

    color: #aab4c2;
}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 370px) {

    .calendar-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-header {
        padding-left: 12px;
        padding-right: 12px;
        gap: 8px;
    }

    .calendar-day {
        font-size: 15px;
    }

    .month-navigation h2 {
        font-size: 19px;
    }

    .header-title h1 {
        font-size: 18px;
    }
}


/* =========================
   DESKTOP PREVIEW
========================= */

@media (min-width: 600px) {

    body {
        padding: 24px 0;
    }

    .app {
        border-radius: 22px;

        overflow: hidden;

        box-shadow:
            0 18px 60px
            rgba(0, 0, 0, 0.32);
    }
}
/* =========================
   MAIN FESTIVAL LOTUS LOGO
========================= */

.calendar-day.main-festival-day {
    position: relative;
}

.main-festival-logo {
    position: absolute;

    /* Top-left corner, inside the cell, above the (centred) date number.
       ~28% of the day-cell height. */
    top: 4%;
    left: 4%;

    height: 28%;
    max-height: 13px;
    width: auto;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    object-fit: cover;

    pointer-events: none;

    z-index: 3;
}

/* Festival image icon - mirrors .main-festival-logo on the top-right */
.festival-day-icon {
    position: absolute;

    top: 4%;
    right: 4%;

    height: 28%;
    max-height: 13px;
    width: auto;
    aspect-ratio: 1 / 1;

    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    object-fit: cover;

    pointer-events: none;

    z-index: 3;
}
/* =========================
   SIDE MENU
========================= */

.app {
    position: relative;
}

.menu-overlay {
    /* fixed (not absolute) so the dim backdrop covers the TRUE viewport,
       not just the centred .app card on wide/desktop screens */
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    opacity: 0;
    visibility: hidden;

    z-index: 20;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ---- shared glass panel : LEFT sidebar (mirror of .settings-screen) ---- */
.side-menu {
    /* fixed (not absolute) so it docks to the TRUE left edge of the screen
       instead of just the centred .app card's left edge on wide screens */
    position: fixed;

    top: 0;
    left: 0;

    width: var(--glass-w);
    max-width: var(--glass-max-w);
    height: 100%;

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border-radius: 0 var(--glass-radius) var(--glass-radius) 0;

    overflow-x: hidden;
    overflow-y: auto;

    z-index: 21;

    transform: translateX(-100%);

    transition:
        transform 0.28s ease;

    padding: var(--glass-pad-y) var(--glass-pad-x);
    padding-bottom: 78px;

    box-shadow:
        16px 0 var(--glass-shadow-blur) var(--glass-shadow-color),
        var(--glass-top-highlight),
        inset -1px 0 0 var(--glass-edge-highlight);
}

/* water / 3D glass rim along the vertical edge beside the (X) close button */
.side-menu::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    width: var(--glass-rim-w);

    pointer-events: none;

    background: linear-gradient(to right, var(--glass-rim-stops));

    box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.28);
}

.side-menu.open {
    transform: translateX(0);
}

.side-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;

    font-size: 18px;
    font-weight: 700;
}

.menu-close-button {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 10px;

    background: #252b34;
    color: #ffffff;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;
}

.menu-item {
    width: 100%;

    display: block;

    border: none;
    border-radius: 12px;

    background: transparent;
    color: #f5f7fa;

    padding: 14px 16px;
    margin-bottom: 8px;

    text-align: left;

    font-size: 16px;

    cursor: pointer;
}

.menu-item:hover {
    background: #252b34;
}

/* ---- Account section at the top of the left panel ---- */

.side-account {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 12px;

    border: none;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.06);
    color: #f5f7fa;

    padding: 12px 14px;
    margin-bottom: 14px;

    text-align: left;
    cursor: pointer;
}

.side-account:hover {
    background: rgba(255, 255, 255, 0.10);
}

.side-account-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #79aef2, #5b91cb);
    background-size: cover;
    background-position: center;

    color: #10151d;
    font-size: 16px;
    font-weight: 700;
}

.side-account-text {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-account-name {
    font-size: 14.5px;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-account-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: #9aa3af;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-account.is-signed-in .side-account-sub {
    color: #7fb0e6;
}

.side-account-chevron {
    flex-shrink: 0;
    color: #8892a0;
    font-size: 18px;
}

.side-nav-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #8892a0;

    padding: 0 4px 8px;
}

.side-nav-heading + .menu-item {
    margin-top: 0;
}

#side-nav-heading-account {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Circular Settings button - pinned to the bottom-left of the open sidebar.
   Lives inside .side-menu, so it is only on screen while the sidebar is open. */
.sidebar-settings-button {
    position: absolute;
    left: 16px;
    bottom: 18px;

    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;

    background: #252b34;
    color: #f5f7fa;

    font-size: 20px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: background 0.16s ease, transform 0.12s ease;
}

.sidebar-settings-button:hover {
    background: #2f3743;
}

.sidebar-settings-button:active {
    transform: scale(0.94);
}

/* =========================
   SPECIAL DAYS POPUP
========================= */

.special-days-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.65);

    z-index: 30;
}


.special-days-panel {
    width: 100%;
    max-width: 360px;
    max-height: 75%;

    overflow-y: auto;

    /* glassmorphism (UI only) - matches the already-frosted .settings-screen
       / .side-menu / .auth-gate-panel. Base class for the About/Privacy/Terms,
       Ekadasi-list and Main-Festivals-list popups. */
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur-lite);
    backdrop-filter: var(--glass-blur-lite);

    /* soft transparent-white edge - defined but not a hard line */
    border: 1.25px solid rgba(255, 255, 255, 0.14);

    border-radius: 18px;

    padding: 18px;

    /* subtle 3D depth: soft outer shadow + inner top highlight */
    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* fallback when backdrop-filter is unsupported - readable solid */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .special-days-panel { background: #191d24; }
}


.special-days-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;

    margin-bottom: 18px;
}


.special-days-header h2 {
    margin: 0;

    flex: 1;

    font-size: 20px;
    font-weight: 700;

    color: #ffffff;
}


/* back-arrow button - same transparent glass control, "<-" instead of "x" */
.special-days-close {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 10px;

    background: #252b34;
    color: #ffffff;

    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}


.special-days-empty {
    margin: 10px 0 4px;

    color: #aeb6c2;

    font-size: 14px;

    text-align: center;
}


/* ---- startup Login prompt (auth/auth-startup-prompt.js) ---- */

.auth-gate-panel {
    /* same glass tokens as .side-menu / .settings-screen */
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--glass-radius);
}

.auth-gate-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-gate-message {
    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color: #cdd4dd;
}

.auth-gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-gate-login {
    width: 100%;

    padding: 13px 14px;

    border: none;
    border-radius: 14px;

    background: #79aef2;
    color: #10151d;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.auth-gate-login:active {
    opacity: 0.85;
}

.auth-gate-guest {
    width: 100%;

    padding: 11px 14px;

    border: none;
    border-radius: 14px;

    background: transparent;
    color: #9aa3af;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.auth-gate-guest:active {
    color: #cdd4dd;
}

:root[data-theme="light"] .auth-gate-message {
    color: #3a434e;
}

:root[data-theme="light"] .auth-gate-login {
    color: #ffffff;
}

:root[data-theme="light"] .auth-gate-guest {
    color: #5b6673;
}


/* About App - content inside the settings "About App" panel */
.about-app {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-app-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #f5f7fa;
}

.about-app-version {
    margin-top: -3px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #9aa3af;
}

.about-app-desc {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.7;
    color: #cdd4dd;
}

.about-app-desc strong {
    color: #f5f7fa;
    font-weight: 600;
}

.about-app-divider {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-app-section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8892a0;
}

.about-app-link {
    color: #79aef2;
    text-decoration: none;
}

.about-app-link:hover,
.about-app-link:active {
    text-decoration: underline;
}

/* label / value rows in the About > App Information block */
.about-app-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;

    font-size: 13.5px;
    line-height: 1.6;
    color: #cdd4dd;
}

.about-app-row-label {
    flex-shrink: 0;
    color: #8892a0;
}

.about-app-row-value {
    text-align: right;
    word-break: break-word;
}

/* Privacy / Terms / Acknowledgements - native <details>, no extra JS */
.about-app-fold {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.about-app-fold > summary {
    list-style: none;
    cursor: pointer;

    padding: 11px 0;

    font-size: 13.5px;
    font-weight: 600;
    color: #dfe4ea;
}

.about-app-fold > summary::-webkit-details-marker {
    display: none;
}

.about-app-fold > summary::after {
    content: "\FF0B";
    float: right;
    color: #79aef2;
    font-weight: 700;
}

.about-app-fold[open] > summary::after {
    content: "\2212";
}

.about-app-fold[open] > summary {
    color: #ffffff;
}

.about-app-fold p {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.75;
    color: #b6bdc7;
}

.about-app-button {
    margin-top: 8px;
    align-self: flex-start;

    padding: 9px 18px;

    border: 0;
    border-radius: 12px;

    background: #79aef2;
    color: #10151d;

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;

    cursor: pointer;
}

.about-app-button:active {
    transform: scale(0.97);
}

.day-report-issue-button {
    display: block;
    width: 100%;

    margin-top: 4px;
    padding: 6px 0 0;

    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;

    color: #79aef2;
    font-size: 12.5px;
    text-align: center;

    cursor: pointer;
}

.day-report-issue-button:active {
    opacity: 0.7;
}

/* Personal note shown on the day panel (notes-store.js / notes-ui.js) */
.day-note-preview {
    margin-top: 6px;
    padding: 9px 12px;

    border-radius: 12px;
    background: rgba(177, 140, 240, 0.12);

    color: #cdd4dd;
    font-size: 13px;
    line-height: 1.6;

    white-space: pre-wrap;
    word-break: break-word;
}

.day-note-star {
    color: #b18cf0;
}

/* "My Notes" list card - .feedback-item rendered as a button */
.day-note-card {
    width: 100%;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.day-note-card:active {
    opacity: 0.75;
}

.day-note-button {
    color: #b18cf0;
}

.day-note-delete {
    color: #ff8a8a;
    justify-content: center;
    text-align: center;
}

:root[data-theme="light"] .day-note-preview {
    background: rgba(124, 77, 191, 0.1);
    color: #46505d;
}


/* ---- Account / Login screen (auth-ui.js) ---- */

.auth-input {
    width: 100%;
    box-sizing: border-box;

    padding: 15px 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.05);
    color: #f5f7fa;

    font-size: 16px;
    font-family: inherit;

    outline: none;

    transition: border-color 0.16s ease, background 0.16s ease;
}

.auth-input::placeholder {
    color: #7d8794;
}

.auth-input:focus {
    border-color: #79aef2;
    background: rgba(255, 255, 255, 0.08);
}

.auth-error {
    padding: 2px 2px 4px;

    color: #ff8a8a;
    font-size: 13px;
    line-height: 1.5;
}

.auth-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 15px 14px;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.auth-profile-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;

    border-radius: 50%;
    object-fit: cover;
}

.auth-profile-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, #79aef2, #5b91cb);
    color: #ffffff;

    font-size: 18px;
    font-weight: 700;
}

.auth-profile-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-profile-text .about-app-title,
.auth-profile-text .about-app-version {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---- Feedback screen (feedback-ui.js) ---- */

.form-textarea {
    resize: vertical;
    min-height: 96px;

    line-height: 1.5;
}

.form-success {
    padding: 12px 14px;
    margin-bottom: 4px;

    border-radius: 14px;

    background: rgba(107, 201, 138, 0.14);
    color: #6bc98a;

    font-size: 13.5px;
    line-height: 1.5;
}

.feedback-item {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 14px;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.feedback-item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    font-size: 12px;
    color: #9aa3af;
}

.feedback-status {
    padding: 2px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.feedback-status-new,
.feedback-status-pending {
    background: rgba(121, 174, 242, 0.18);
    color: #79aef2;
}

.feedback-status-reviewing,
.feedback-status-reviewed {
    background: rgba(245, 195, 68, 0.18);
    color: #f5c344;
}

.feedback-status-fixed,
.feedback-status-resolved {
    background: rgba(107, 201, 138, 0.18);
    color: #6bc98a;
}

.feedback-status-replied {
    background: rgba(177, 140, 240, 0.18);
    color: #b18cf0;
}

.feedback-reply {
    margin-top: 4px;
    padding-top: 8px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feedback-file-input {
    display: none;
}

.feedback-screenshot-preview {
    width: 100%;
    max-height: 220px;

    display: block;
    object-fit: contain;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.feedback-screenshot-thumb {
    width: 100%;
    max-height: 160px;

    display: block;
    object-fit: cover;

    border-radius: 11px;
}


/* ---- developer feedback inbox (VCFeedback.adminUi) ---- */

.feedback-admin-item {
    cursor: pointer;
}

.feedback-admin-user {
    font-size: 12px;
    color: #9aa3af;
    word-break: break-word;
}

.feedback-admin-full {
    width: 100%;
    max-height: 60vh;

    display: block;
    object-fit: contain;

    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.feedback-admin-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* =========================
   SETTINGS SIDE PANEL (slides in from the right, ~half screen width)
========================= */

.settings-screen-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;

    background: rgba(0, 0, 0, 0.4);

    animation: settings-panel-overlay-in 0.28s ease;
}

.settings-screen-overlay.closing {
    background: rgba(0, 0, 0, 0);
    transition: background 0.28s ease;
}

/* ---- shared glass panel : RIGHT settings panel (mirror of .side-menu) ---- */
.settings-screen {
    position: relative;

    display: flex;
    flex-direction: column;

    width: var(--glass-w);
    max-width: var(--glass-max-w);
    height: 100%;

    background: var(--glass-bg);

    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);

    border-radius: var(--glass-radius) 0 0 var(--glass-radius);

    overflow: hidden;

    box-shadow:
        -16px 0 var(--glass-shadow-blur) var(--glass-shadow-color),
        var(--glass-top-highlight),
        inset 1px 0 0 var(--glass-edge-highlight);

    animation: settings-panel-in 0.28s ease;
}

/* water / 3D glass rim along the vertical edge beside the (X) close button */
.settings-screen::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: var(--glass-rim-w);

    pointer-events: none;

    background: linear-gradient(to left, var(--glass-rim-stops));

    box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.28);
}

.settings-screen-overlay.closing .settings-screen {
    animation: settings-panel-out 0.28s ease forwards;
}

@keyframes settings-panel-overlay-in {
    from { background: rgba(0, 0, 0, 0); }
    to   { background: rgba(0, 0, 0, 0.4); }
}

@keyframes settings-panel-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes settings-panel-out {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

.settings-screen-header {
    flex-shrink: 0;

    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 10px;

    padding: var(--glass-pad-y) var(--glass-pad-x);

    /* transparent so the glass shows through, like .side-menu-header */
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-screen-close,
.settings-screen-info {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: #252b34;
    color: #f5f7fa;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition: background 0.16s ease, transform 0.12s ease;
}

.settings-screen-info {
    font-size: 20px;
    justify-self: end;
}

.settings-screen-close:hover,
.settings-screen-info:hover {
    background: #2f3743;
}

.settings-screen-close:active,
.settings-screen-info:active {
    transform: scale(0.94);
}

.settings-screen-title {
    margin: 0;

    text-align: center;

    font-size: 18px;
    font-weight: 700;

    color: #ffffff;
}

.settings-screen-list {
    flex: 1;

    overflow-y: auto;

    padding: var(--glass-pad-y) var(--glass-pad-x) 24px;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-row {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 15px 14px;

    border: none;
    border-radius: 14px;

    /* subtle frosted card on the glass, like the sidebar menu items */
    background: rgba(255, 255, 255, 0.05);
    color: #f5f7fa;

    font-size: 16px;
    text-align: left;

    cursor: pointer;

    transition: background 0.16s ease;
}

.settings-row:hover {
    background: rgba(255, 255, 255, 0.10);
}

.settings-row:active {
    background: rgba(255, 255, 255, 0.14);
}

.settings-row-label {
    flex: 1;
}

.settings-row-chevron {
    flex-shrink: 0;

    color: #7d8794;
    font-size: 20px;
    line-height: 1;
}


.special-day-option {
    width: 100%;

    display: block;

    border: none;
    border-radius: 12px;

    background: #252b34;
    color: #f5f7fa;

    padding: 14px 16px;
    margin-bottom: 10px;

    text-align: left;

    font-size: 15px;

    cursor: pointer;
}


.special-day-option:hover {
    background: #303844;
}


.special-day-option:last-child {
    margin-bottom: 0;
}

/* =========================
   SPECIAL DAY DETAILS
========================= */

.special-day-date {
    margin-bottom: 10px;

    font-size: 16px;
    font-weight: 700;

    color: #ffffff;
}


.special-day-event-en {
    margin-top: 8px;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.45;

    color: #f5f7fa;
}


.special-day-event-mm {
    margin-top: 4px;
    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.55;

    color: #cbd2dc;
}


.prabhupada-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.kbs-header-logo {
    width: 36px;
    height: 36px;

    border-radius: 50%;
    object-fit: cover;

    justify-self: center;
}
 

.kbs-header-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    justify-self: start;
    /* hamburger moved out of the header -> keep this logo in the 2nd grid
       track (its original position) */
    grid-column: 2;
}

.header-profile {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    /* stay pinned to the right track after the hamburger left the header */
    grid-column: 3;

    /* nudge the Prabhupada logo in from the edge */
    margin-right: 12px;
}

.prabhupada-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

#more-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    background: transparent;
    border: none;
}

.calendar-day {
    color: #ffffff !important;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day {
    color: white !important;
    background: rgba(255,255,255,0.1) !important;
    font-size: 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}


/* =========================
   MORE MENU (3-dot dropdown)
========================= */

.more-dropdown {
    position: absolute;
    top: calc(100% - 4px);
    right: 6px;

    z-index: 25;

    min-width: 172px;

    display: flex;
    flex-direction: column;

    padding: 6px;

    background: #191d24;

    border: 1px solid #303741;
    border-radius: 12px;

    box-shadow:
        0 14px 34px
        rgba(0, 0, 0, 0.45);
}

.more-dropdown-item {
    width: 100%;

    display: block;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: #f5f7fa;

    padding: 11px 12px;

    text-align: left;

    font-size: 15px;

    cursor: pointer;
}

.more-dropdown-item:hover {
    background: #252b34;
}


/* =========================
   SETTINGS MODAL
========================= */

.settings-section {
    margin-bottom: 18px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    margin-bottom: 9px;

    color: #aeb6c2;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-segmented {
    display: flex;
    gap: 6px;
}

.settings-segmented-wrap {
    flex-wrap: wrap;
}

.settings-segmented-wrap .settings-segment {
    flex: 1 1 30%;
    min-width: 104px;
}

.settings-segment {
    flex: 1;

    border: 1px solid #303741;
    border-radius: 10px;

    background: #20252d;
    color: #cbd2dc;

    padding: 9px 8px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.settings-segment.active {
    background: #1d3147;
    border-color: #446e9c;
    color: #9fcaff;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 11px 0;

    color: #f1f3f5;

    font-size: 14px;

    cursor: pointer;
}

.settings-toggle-row + .settings-toggle-row {
    border-top: 1px solid #262c35;
}

.settings-toggle {
    width: 18px;
    height: 18px;

    flex-shrink: 0;

    accent-color: #5b91cb;

    cursor: pointer;
}

.settings-line {
    margin-bottom: 5px;

    font-size: 14px;
    line-height: 1.5;

    color: #f5f7fa;
}

.settings-line:last-child {
    margin-bottom: 0;
}

.settings-line.muted {
    color: #aeb6c2;
}

.settings-line-mm {
    color: #cbd2dc;
    line-height: 1.55;
}


/* =========================
   CALENDAR MARKER TOGGLES
========================= */

.app.hide-ekadasi .calendar-day.ekadasi-day .calendar-day-ekadasi {
    display: none;
}

.app.hide-festivals .main-festival-logo {
    display: none;
}


/* =========================
   LIGHT THEME (opt-in)
========================= */

:root[data-theme="light"] body {
    background: #eef1f5;
    color: #1b2129;
}

:root[data-theme="light"] html,
:root[data-theme="light"] {
    background: #eef1f5;
}

:root[data-theme="light"] .app {
    background: #ffffff;
}

:root[data-theme="light"] .month-navigation h2 {
    color: #1b2129;
}

:root[data-theme="light"] .nav-button {
    background: #e7ebf1;
    color: #1b2129;
}

:root[data-theme="light"] .calendar-day {
    color: #1b2129 !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .calendar-day:hover {
    background: rgba(0, 0, 0, 0.09) !important;
}

:root[data-theme="light"] .calendar-day.selected {
    background: #1d3147 !important;
    color: #ffffff !important;
}

:root[data-theme="light"] .calendar-day-ekadasi {
    color: #8f2b2b;
}

:root[data-theme="light"] .calendar-day.selected .calendar-day-ekadasi {
    color: #ffd3d0;
}

:root[data-theme="light"] .day-details {
    background: #f6f8fa;
    border-color: #dfe4ea;
}

:root[data-theme="light"] .day-details h2,
:root[data-theme="light"] #selected-day-title {
    color: #1b2129;
}

:root[data-theme="light"] .event-item {
    background: #eef1f5;
    border-color: #dbe0e7;
    color: #1b2129;
}

:root[data-theme="light"] .parana-item {
    background: #eef1f5;
    border-color: #dbe0e7;
    color: #1b2129;
}

:root[data-theme="light"] .no-event {
    color: #5b6673;
}

:root[data-theme="light"] .event-mm {
    color: #55606d;
}

:root[data-theme="light"] .event-note-mm,
:root[data-theme="light"] .special-day-note-mm {
    color: #55606d;
}


/* Event type colours - darker tones for the light card background */

:root[data-theme="light"] .evt-festival .event-en,
:root[data-theme="light"] .evt-festival .event-mm,
:root[data-theme="light"] .evt-festival .event-note-mm {
    color: #9A6B10;
}

:root[data-theme="light"] .evt-ekadasi .event-en,
:root[data-theme="light"] .evt-ekadasi .event-mm,
:root[data-theme="light"] .evt-ekadasi .event-note-mm {
    color: #2E7D5B;
}

:root[data-theme="light"] .parana-item .event-en,
:root[data-theme="light"] .parana-item .event-mm {
    color: #327A5C;
}

:root[data-theme="light"] .evt-appearance .event-en,
:root[data-theme="light"] .evt-appearance .event-mm,
:root[data-theme="light"] .evt-appearance .event-note-mm {
    color: #2F6BA6;
}

:root[data-theme="light"] .evt-disappearance .event-en,
:root[data-theme="light"] .evt-disappearance .event-mm,
:root[data-theme="light"] .evt-disappearance .event-note-mm {
    color: #634BA0;
}

:root[data-theme="light"] .evt-vrata .event-en,
:root[data-theme="light"] .evt-vrata .event-mm,
:root[data-theme="light"] .evt-vrata .event-note-mm {
    color: #B0671C;
}

:root[data-theme="light"] .festival-credit {
    color: #5b6673;
}

:root[data-theme="light"] .prabhupada-gallery-item {
    background: linear-gradient(180deg, #f3f5f9, #eaeef4);
    border-color: #d7dee8;
}

:root[data-theme="light"] .prabhupada-title {
    color: #1b2129;
}

:root[data-theme="light"] .prabhupada-desc {
    color: #5b6673;
}

:root[data-theme="light"] .special-days-panel,
:root[data-theme="light"] .more-dropdown {
    background: #ffffff;
    color: #1b2129;
}

/* both glass panels keep the frosted look in light mode (token --glass-bg) */
:root[data-theme="light"] .side-menu,
:root[data-theme="light"] .settings-screen {
    background: var(--glass-bg);
    color: #1b2129;
}

:root[data-theme="light"] .menu-item,
:root[data-theme="light"] .more-dropdown-item,
:root[data-theme="light"] .special-day-option,
:root[data-theme="light"] .side-menu-header,
:root[data-theme="light"] .special-days-header h2 {
    color: #1b2129;
}

:root[data-theme="light"] .menu-item:hover,
:root[data-theme="light"] .more-dropdown-item:hover,
:root[data-theme="light"] .special-day-option {
    background: #eef1f5;
}

:root[data-theme="light"] .menu-close-button,
:root[data-theme="light"] .special-days-close {
    background: #e7ebf1;
    color: #1b2129;
}

:root[data-theme="light"] .side-account {
    background: rgba(0, 0, 0, 0.05);
    color: #1b2129;
}

:root[data-theme="light"] .side-account:hover {
    background: rgba(0, 0, 0, 0.09);
}

:root[data-theme="light"] .side-account-sub {
    color: #5b6673;
}

:root[data-theme="light"] .side-account.is-signed-in .side-account-sub {
    color: #2f6fb8;
}

:root[data-theme="light"] .side-nav-heading,
:root[data-theme="light"] .side-account-chevron {
    color: #6b7480;
}

:root[data-theme="light"] #side-nav-heading-account {
    border-top-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .settings-segment {
    background: #eef1f5;
    border-color: #dbe0e7;
    color: #46505d;
}

:root[data-theme="light"] .settings-segment.active {
    background: #1d3147;
    border-color: #1d3147;
    color: #ffffff;
}

:root[data-theme="light"] .settings-toggle-row {
    color: #1b2129;
}

:root[data-theme="light"] .settings-toggle-row + .settings-toggle-row {
    border-top-color: #e2e6ec;
}

:root[data-theme="light"] .settings-line,
:root[data-theme="light"] .special-day-date,
:root[data-theme="light"] .special-day-event-en {
    color: #1b2129;
}

:root[data-theme="light"] .settings-line.muted,
:root[data-theme="light"] .settings-line-mm,
:root[data-theme="light"] .special-day-event-mm,
:root[data-theme="light"] .special-days-empty {
    color: #5b6673;
}

:root[data-theme="light"] .about-app-title {
    color: #1b2129;
}

:root[data-theme="light"] .about-app-version {
    color: #5b6673;
}

:root[data-theme="light"] .about-app-desc {
    color: #3a434e;
}

:root[data-theme="light"] .about-app-desc strong {
    color: #1b2129;
}

:root[data-theme="light"] .about-app-divider {
    border-top-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .about-app-section-title {
    color: #5b6673;
}

:root[data-theme="light"] .about-app-link {
    color: #2f6fb8;
}

:root[data-theme="light"] .about-app-row {
    color: #3a434e;
}

:root[data-theme="light"] .about-app-row-label {
    color: #6b7480;
}

:root[data-theme="light"] .about-app-fold {
    border-top-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .about-app-fold > summary {
    color: #1b2129;
}

:root[data-theme="light"] .about-app-fold p {
    color: #46505d;
}

:root[data-theme="light"] .day-report-issue-button {
    border-top-color: rgba(0, 0, 0, 0.08);
    color: #2f6fb8;
}

:root[data-theme="light"] .auth-input {
    border-color: rgba(0, 0, 0, 0.14);
    background: rgba(0, 0, 0, 0.04);
    color: #1b2129;
}

:root[data-theme="light"] .auth-input::placeholder {
    color: #8a93a0;
}

:root[data-theme="light"] .auth-input:focus {
    background: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .auth-error {
    color: #c62828;
}

:root[data-theme="light"] .auth-profile-card {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .form-success {
    background: rgba(46, 139, 87, 0.12);
    color: #1e7a4c;
}

:root[data-theme="light"] .feedback-item {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .feedback-item-meta {
    color: #5b6673;
}

:root[data-theme="light"] .feedback-reply {
    border-top-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .feedback-screenshot-preview {
    background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .settings-screen {
    background: var(--glass-bg);
}

:root[data-theme="light"] .settings-screen-header {
    background: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .settings-screen-title {
    color: #1b2129;
}

:root[data-theme="light"] .settings-screen-close,
:root[data-theme="light"] .settings-screen-info {
    background: #e7ebf1;
    color: #1b2129;
}

:root[data-theme="light"] .settings-screen-close:hover,
:root[data-theme="light"] .settings-screen-info:hover {
    background: #dde2ea;
}

:root[data-theme="light"] .settings-row {
    background: rgba(0, 0, 0, 0.04);
    color: #1b2129;
}

:root[data-theme="light"] .settings-row:hover {
    background: rgba(0, 0, 0, 0.07);
}

:root[data-theme="light"] .settings-row-chevron {
    color: #9aa3af;
}


/* =========================
   CALENDAR CELL SUB-LABEL  (visual only - no logic / data change)

   Layout contract, identical for EVERY day cell:
     - the date number is the only in-flow child  -> always dead-centre.
     - the sub-label band is position:absolute, left:0 right:0, pinned to
       the cell base at the SAME offset in every cell.
     - the label TEXT is centred in that band and never shifts left/right
       with its length.

   Content - keyword TEXT label only, no coloured dot of any kind:
     Ekadasi (any)  ->  "Ekadasi"
     festival       ->  short keyword
========================= */

.calendar-day-ekadasi,
.calendar-day-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1px;

    margin: 0;
    padding: 0;

    font-size: 6px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.1px;

    text-align: center;
    pointer-events: none;
}

/* the centred word / keyword - up to two short lines, then clipped.
   Horizontal padding keeps it clear of the cell edge so it stays
   optically centred in the cell no matter how long the text is. */
.calendar-day-ekadasi-text,
.calendar-day-label-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;

    max-height: 2.1em;
    overflow: hidden;

    /* small inset so a very long word clears the cell edge; short
       keywords are centred well inside this */
    padding: 0 3px;

    text-align: center;
    overflow-wrap: anywhere;
    hyphens: none;
}

.calendar-day-ekadasi-text {
    color: #d0736d;                 /* muted maroon - observance marker */
}

.calendar-day-label-text {
    color: #d5ddda;
}

.calendar-day.selected .calendar-day-ekadasi-text {
    color: #b34a44;
}

.calendar-day.selected .calendar-day-label-text {
    color: #34506a;
}

:root[data-theme="light"] .calendar-day-label-text {
    color: #3c5a4a;
}

:root[data-theme="light"] .calendar-day.selected .calendar-day-label-text {
    color: #e7eef5;
}

/* subtle "breathing" for long festival keywords (.is-long is added by
   renderCalendar when the keyword is > 12 chars, so it wraps to two clipped
   lines). Opacity only - no layout, no size, no reflow; compositor-only, and
   only ~2-5 cells a month carry it. Short labels stay static. */
@keyframes vc-cell-label-breathe {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

.calendar-day-label-text.is-long {
    animation: vc-cell-label-breathe 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .calendar-day-label-text.is-long {
        animation: none;
    }
}

/* keep the date digit itself centred, sub-label or not */
.calendar-day > .calendar-day-num {
    line-height: 1;
}

/* honour the "hide festivals" toggle for the green keyword too */
.app.hide-festivals .calendar-day-label {
    display: none;
}

@media (max-width: 370px) {

    .calendar-day-ekadasi,
    .calendar-day-label {
        font-size: 5.5px;
    }

    .calendar-day-ekadasi-text,
    .calendar-day-label-text {
        padding: 0 2px;
    }
}