.cal-page {
    
    margin: 0 auto;
    
}


.cal-hero {
    margin: 14px 16px 0;
    border-radius: 26px;
    padding: 22px 22px 24px;
    color: #fff;
    position: relative;
    overflow: hidden;

    background-image:
        linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.08) 100%),
        linear-gradient(145deg,
            var(--color-primary-dark, #001a40) 0%,
            var(--color-primary, #0055a5) 60%,
            rgba(26,184,212,.85) 100%);

    border: 1px solid rgba(255,255,255,.38);
    box-shadow:
        0 16px 48px rgba(0,30,100,.28),
        0  4px 16px rgba(0,20, 80,.18),
        inset 0  1px 0 rgba(255,255,255,.70),
        inset 0 -1px 0 rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(4px) saturate(1.4);
            backdrop-filter: blur(4px) saturate(1.4);
}
.cal-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 48%;
    background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 50%, transparent 100%);
    border-radius: 26px 26px 0 0;
    pointer-events: none; z-index: 0;
}
.cal-hero::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 1px 1px 8px rgba(255,255,255,.22), inset -1px -1px 8px rgba(255,255,255,.08);
    pointer-events: none; z-index: 0;
}
.cal-hero-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    position: relative; z-index: 1; margin-bottom: 14px;
}
.cal-hero-month {
    font-size: 32px; font-weight: 900; letter-spacing: -.5px; line-height: 1;
    margin: 0 0 3px;
}
.cal-hero-year {
    font-size: 14px; font-weight: 600; opacity: .7;
}
.cal-season-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px;
    border-radius: 99px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.32);
    font-size: 12.5px; font-weight: 700;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}
.cal-season-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #fff; opacity: .9; flex-shrink: 0;
}
.cal-hero-bottom {
    display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 1;
}
.cal-today-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.26);
    font-size: 12px; font-weight: 600; color: rgba(255,255,255,.92);
}
.cal-today-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.cal-liturgy-year {
    font-size: 12px; font-weight: 700; opacity: .72;
    padding: 5px 10px; border-radius: 99px;
    background: rgba(0,0,0,.15);
}
[data-theme="dark"] .cal-hero {
    border-color: rgba(255,255,255,.18);
    box-shadow:
        0 20px 56px rgba(0,0,0,.50),
        0  4px 16px rgba(0,0,0,.35),
        inset 0  1px 0 rgba(255,255,255,.22),
        inset 0 -1px 0 rgba(255,255,255,.06);
}


.cal-intro-card {
    margin: 18px 16px 16px;
    padding: 22px;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
        radial-gradient(circle at 0 0, rgba(46,139,87,.12), transparent 36%),
        radial-gradient(circle at 100% 18%, rgba(245,126,27,.12), transparent 34%);
    border: 1px solid rgba(255,255,255,.82);
    box-shadow:
        0 14px 36px rgba(24, 39, 75, .10),
        inset 0 1px 0 rgba(255,255,255,.88);
    color: var(--color-text, #162033);
}
.cal-intro-head {
    max-width: 980px;
    margin-bottom: 14px;
}
.cal-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary, #2e7d32);
}
.cal-intro-eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(46,125,50,.12);
}
.cal-intro-card h1 {
    margin: 0;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: 0;
    color: var(--color-text, #111827);
}
.cal-intro-subtitle {
    margin: 10px 0 0;
    max-width: 860px;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(22,32,51,.72);
}
.cal-intro-body {
    max-width: 1180px;
    font-size: 17px;
    line-height: 1.78;
    color: rgba(22,32,51,.82);
}
.cal-intro-body p {
    margin: 0 0 12px;
}
.cal-intro-body p:last-child {
    margin-bottom: 0;
}
.cal-intro-body strong {
    color: var(--color-text, #111827);
}
.cal-intro-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
.cal-intro-chips span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(46,125,50,.10);
    border: 1px solid rgba(46,125,50,.16);
    color: var(--color-primary, #2e7d32);
    font-size: 13px;
    font-weight: 800;
}
[data-theme="dark"] .cal-intro-card {
    background:
        linear-gradient(145deg, rgba(31,41,55,.88), rgba(17,24,39,.76)),
        radial-gradient(circle at 0 0, rgba(34,197,94,.16), transparent 38%),
        radial-gradient(circle at 100% 18%, rgba(251,146,60,.14), transparent 36%);
    border-color: rgba(255,255,255,.12);
    box-shadow:
        0 18px 44px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.08);
    color: #f8fafc;
}
[data-theme="dark"] .cal-intro-card h1,
[data-theme="dark"] .cal-intro-body strong {
    color: #fff;
}
[data-theme="dark"] .cal-intro-subtitle,
[data-theme="dark"] .cal-intro-body {
    color: rgba(248,250,252,.78);
}
[data-theme="dark"] .cal-intro-chips span {
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.25);
    color: #86efac;
}
@media (max-width: 640px) {
    .cal-intro-card {
        margin: 14px 12px 14px;
        padding: 18px;
        border-radius: 20px;
    }
    .cal-intro-card h1 {
        font-size: 24px;
        line-height: 1.14;
    }
    .cal-intro-subtitle,
    .cal-intro-body {
        font-size: 15.5px;
        line-height: 1.68;
    }
    .cal-intro-chips {
        gap: 8px;
    }
    .cal-intro-chips span {
        min-height: 30px;
        padding: 6px 11px;
        font-size: 12px;
    }
}


.cal-nav-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 4px;
    gap: 10px;
}
.cal-nav-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.68);
    background: rgba(255,255,255,.62);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
            backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 2px 10px rgba(0,30,80,.10), inset 0 1px 0 rgba(255,255,255,.90);
    color: var(--color-text, #1a2540);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
    transition: transform .12s, box-shadow .12s;
    -webkit-tap-highlight-color: transparent;
}
.cal-nav-btn:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,30,80,.16), inset 0 1px 0 rgba(255,255,255,.95); }
.cal-nav-btn:active { transform: scale(.94); }
.cal-nav-btn svg { pointer-events: none; }
.cal-nav-label {
    flex: 1; text-align: center;
    font-size: 17px; font-weight: 800;
    color: var(--color-text, #1a2540);
    letter-spacing: -.2px;
}
[data-theme="dark"] .cal-nav-btn {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: #e8eaf0;
    box-shadow: 0 2px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
}


.cal-grid-wrap {
    padding: 0 16px;
}
.cal-grid-card {
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
            backdrop-filter: blur(18px) saturate(1.5);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.80);
    box-shadow:
        0 8px 32px rgba(0,30,80,.10),
        inset 0  1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.04);
    overflow: hidden;
    position: relative;
}

.cal-grid-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 38%;
    background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
    border-radius: 22px 22px 0 0;
    pointer-events: none; z-index: 0;
}


.cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    padding: 12px 4px 6px;
    border-bottom: 1px solid rgba(0,30,80,.07);
    position: relative; z-index: 1;
}
.cal-wday {
    text-align: center;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-muted, #8898b0);
    padding: 0 2px;
}
.cal-wday:first-child { color: #c62828; } 
.cal-wday:last-child  { color: #1565c0; } 


.cal-days {
    display: grid; grid-template-columns: repeat(7, 1fr);
    padding: 4px 4px 12px;
    position: relative; z-index: 1;
    gap: 1px 0;
}
.cal-day {
    display: flex; flex-direction: column; align-items: center;
    padding: 5px 2px;
    min-height: 58px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: background .14s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.cal-day:hover:not(.cal-day--empty) {
    background: rgba(0,85,165,.07);
}
.cal-day:active:not(.cal-day--empty) { transform: scale(.92); }
.cal-day--empty { cursor: default; pointer-events: none; }


.cal-day-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 700;
    color: var(--color-text, #1a2540);
    line-height: 1;
    transition: background .14s;
    flex-shrink: 0;
}


.cal-day--sunday .cal-day-num { color: #c62828; }
.cal-day--saturday .cal-day-num { color: #1565c0; }


.cal-day--today .cal-day-num {
    background-image:
        linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.08) 100%),
        linear-gradient(145deg, var(--color-primary-dark, #003d80) 0%, var(--color-primary, #0055a5) 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,60,160,.32), inset 0 1px 0 rgba(255,255,255,.40);
}
.cal-day--today { background: rgba(0,85,165,.05); border-radius: 12px; }


.cal-day-dot {
    width: 5px; height: 5px; border-radius: 50%;
    margin-top: 3px; flex-shrink: 0;
}


.cal-day-name {
    font-size: 9px; font-weight: 600;
    color: var(--color-text-muted, #7a8aaa);
    text-align: center;
    overflow: hidden; white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%; padding: 0 2px;
    margin-top: 2px;
    line-height: 1.2;
}
.cal-day--today .cal-day-name { color: var(--color-primary, #0055a5); font-weight: 700; }


.cal-day-rank {
    font-size: 8px; line-height: 1;
    margin-top: 1px;
}

.cal-day-read {
    position: absolute; top: 3px; right: 4px;
    font-size: 9px; opacity: .7;
}


.cal-day--holy .cal-day-num::after {
    content: '✝';
    position: absolute;
    top: -1px; right: -1px;
    font-size: 7px;
    color: var(--color-primary, #0055a5);
}


[data-theme="dark"] .cal-grid-card {
    background: rgba(10,20,50,.68);
    border-color: rgba(255,255,255,.10);
    box-shadow:
        0 8px 32px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -1px 0 rgba(0,0,0,.18);
}
[data-theme="dark"] .cal-grid-card::before {
    background: linear-gradient(180deg, rgba(255,255,255,.07) 0%, transparent 100%);
}
[data-theme="dark"] .cal-weekdays { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .cal-day-num { color: #dde4f0; }
[data-theme="dark"] .cal-day--sunday .cal-day-num { color: #ff7070; }
[data-theme="dark"] .cal-day--saturday .cal-day-num { color: #70a8ff; }
[data-theme="dark"] .cal-day:hover:not(.cal-day--empty) { background: rgba(255,255,255,.06); }
[data-theme="dark"] .cal-day-name { color: rgba(255,255,255,.38); }
[data-theme="dark"] .cal-day--today { background: rgba(0,85,165,.15); }


.cal-upcoming-section {
    padding: 18px 0 0;
}
.cal-section-label {
    padding: 0 16px 10px;
    font-size: 14px; font-weight: 800;
    color: var(--color-text, #1a2540);
    display: flex; align-items: center; gap: 7px;
}
.cal-section-label::before {
    content: '';
    display: inline-block; width: 3px; height: 16px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--color-primary-dark, #003d80), var(--color-primary, #0055a5));
}
.cal-upcoming-scroll {
    display: flex; gap: 10px;
    overflow-x: auto; padding: 0 16px 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cal-upcoming-scroll::-webkit-scrollbar { display: none; }
.cal-upcoming-card {
    flex-shrink: 0;
    width: 120px;
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 4px 18px rgba(0,30,80,.09), inset 0 1px 0 rgba(255,255,255,.92);
    padding: 12px 12px 14px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    cursor: pointer;
    transition: transform .14s, box-shadow .14s;
    -webkit-tap-highlight-color: transparent;
    position: relative; overflow: hidden;
}
.cal-upcoming-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
    border-radius: 18px 18px 0 0; pointer-events: none;
}
.cal-upcoming-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,30,80,.13), inset 0 1px 0 rgba(255,255,255,.95); }
.cal-upcoming-card:active { transform: scale(.96); }
.cal-upcoming-date {
    font-size: 22px; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--color-primary-dark, #003d80), var(--color-primary, #0055a5));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cal-upcoming-weekday {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-text-muted, #8898b0);
    margin-top: -5px;
}
.cal-upcoming-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    margin-top: 2px;
}
.cal-upcoming-name {
    font-size: 11px; font-weight: 700;
    color: var(--color-text, #1a2540);
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.cal-upcoming-type {
    font-size: 9.5px; font-weight: 600;
    padding: 2px 8px; border-radius: 99px;
    background: rgba(0,85,165,.09);
    color: var(--color-primary, #0055a5);
}
[data-theme="dark"] .cal-upcoming-card {
    background: rgba(10,20,50,.65);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 4px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="dark"] .cal-upcoming-card::before { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%); }
[data-theme="dark"] .cal-upcoming-name { color: #dde4f0; }
[data-theme="dark"] .cal-upcoming-weekday { color: rgba(255,255,255,.40); }
[data-theme="dark"] .cal-upcoming-type { background: rgba(0,85,165,.22); }


.cal-season-section {
    padding: 18px 16px 0;
}
.cal-season-ribbon {
    background: rgba(255,255,255,.70);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 4px 18px rgba(0,30,80,.09), inset 0 1px 0 rgba(255,255,255,.92);
    padding: 16px;
    position: relative; overflow: hidden;
}
.cal-season-ribbon::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, transparent 100%);
    border-radius: 18px 18px 0 0; pointer-events: none;
}
.cal-season-title {
    font-size: 12.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-text-muted, #8898b0);
    margin-bottom: 12px; position: relative; z-index: 1;
}
.cal-season-track {
    display: flex; gap: 3px; align-items: stretch;
    position: relative; z-index: 1;
    border-radius: 99px; overflow: hidden;
    height: 12px;
}
.cal-season-seg {
    flex: 1;
    border-radius: 0;
    position: relative;
    min-width: 0;
}
.cal-season-seg:first-child { border-radius: 99px 0 0 99px; }
.cal-season-seg:last-child  { border-radius: 0 99px 99px 0; }

.cal-season-marker {
    position: absolute; top: -3px; bottom: -3px; width: 3px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0,0,0,.3);
    z-index: 2;
}
.cal-season-labels {
    display: flex; gap: 3px; margin-top: 8px;
    position: relative; z-index: 1;
}
.cal-season-seg-label {
    flex: 1; font-size: 8.5px; font-weight: 700; text-align: center;
    color: var(--color-text-muted, #8898b0);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
[data-theme="dark"] .cal-season-ribbon {
    background: rgba(10,20,50,.65);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 4px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="dark"] .cal-season-ribbon::before { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%); }


.cal-detail-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0; pointer-events: none;
    transition: opacity .26s;
}
.cal-detail-backdrop.open { opacity: 1; pointer-events: auto; }

.cal-detail-sheet {
    position: fixed; left: 50%; bottom: 0;
    width: 100%; max-width: 640px;
    transform: translateX(-50%) translateY(100%);
    z-index: 1001;
    transition: transform .30s cubic-bezier(.32,.72,0,1);
    padding: 0 0 calc(var(--safe-bottom, 0px));
}
.cal-detail-sheet.open { transform: translateX(-50%) translateY(0); }

.cal-detail-panel {
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
            backdrop-filter: blur(28px) saturate(1.6);
    border-radius: 28px 28px 0 0;
    border: 1px solid rgba(255,255,255,.80);
    border-bottom: none;
    box-shadow:
        0 -12px 48px rgba(0,30,80,.16),
        inset 0  1px 0 rgba(255,255,255,.95);
    padding: 0 0 24px;
    position: relative; overflow: hidden;
    max-height: 80dvh;
    overflow-y: auto;
}

.cal-detail-panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, transparent 100%);
    border-radius: 28px 28px 0 0; pointer-events: none;
}
.cal-detail-handle {
    width: 36px; height: 4px; border-radius: 3px;
    background: rgba(0,30,80,.18);
    margin: 12px auto 0;
    position: relative; z-index: 1;
}
.cal-detail-header {
    padding: 14px 20px 16px;
    position: relative; z-index: 1;
    border-bottom: 1px solid rgba(0,30,80,.06);
}
.cal-detail-date-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.cal-detail-day-num {
    font-size: 36px; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, var(--color-primary-dark, #003d80), var(--color-primary, #0055a5));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cal-detail-day-label {
    font-size: 13px; color: var(--color-text-muted, #888); font-weight: 600;
}
.cal-detail-vestment-badge {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 700;
    border: 1.5px solid currentColor;
    opacity: .85;
}
.cal-detail-vestment-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.cal-detail-feast {
    font-size: 16px; font-weight: 800;
    color: var(--color-text, #1a2540);
    line-height: 1.35;
    margin-bottom: 6px;
}
.cal-detail-flags {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.cal-detail-flag {
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: 99px; display: inline-flex; align-items: center; gap: 4px;
}
.cal-detail-flag--season  { background: rgba(0,85,165,.08); color: var(--color-primary, #0055a5); }
.cal-detail-flag--type    { background: rgba(180,140,0,.10); color: #7C5700; }
.cal-detail-flag--holy    { background: rgba(200,30,30,.08); color: #c62828; }
.cal-detail-flag--fast    { background: rgba(80,80,80,.08); color: #555; }

.cal-detail-body {
    padding: 16px 20px;
    position: relative; z-index: 1;
}
.cal-detail-section-title {
    font-size: 11.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--color-text-muted, #888);
    margin-bottom: 10px; margin-top: 16px;
}
.cal-detail-section-title:first-child { margin-top: 0; }
.cal-detail-reading {
    background: rgba(0,85,165,.05);
    border-radius: 14px; padding: 12px 14px;
    border-left: 3px solid var(--color-primary, #0055a5);
    margin-bottom: 8px;
}
.cal-detail-reading-type {
    font-size: 11px; font-weight: 700;
    color: var(--color-primary, #0055a5);
    margin-bottom: 4px;
}
.cal-detail-reading-title {
    font-size: 13.5px; font-weight: 700; color: var(--color-text, #1a2540);
    line-height: 1.4;
}
.cal-detail-reading-snippet {
    font-size: 12.5px; line-height: 1.65; color: var(--color-text-muted, #888);
    margin-top: 4px;
}
.cal-detail-reading-snippet p  { margin: 0 0 6px; }
.cal-detail-reading-snippet p:last-child { margin-bottom: 0; }
.cal-detail-reading-snippet em { font-style: italic; }
.cal-detail-reading-snippet strong { font-weight: 700; color: var(--color-text, #1a2540); }
.cal-detail-cta {
    margin-top: 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.cal-detail-btn {
    width: 100%; padding: 14px;
    border-radius: 16px;
    border: none; cursor: pointer;
    font-size: 14.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity .14s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.cal-detail-btn--primary {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.06) 100%),
        linear-gradient(135deg, var(--color-primary-dark, #003d80) 0%, var(--color-primary, #0055a5) 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.30);
    box-shadow: 0 4px 18px rgba(0,60,160,.24), inset 0 1px 0 rgba(255,255,255,.45);
}
.cal-detail-btn--secondary {
    background: rgba(0,85,165,.07);
    border: 1.5px solid rgba(0,85,165,.18);
    color: var(--color-primary, #0055a5);
}
.cal-detail-btn:hover { opacity: .9; }
.cal-detail-btn:active { transform: scale(.97); }
.cal-detail-empty {
    text-align: center; padding: 28px 0;
    color: var(--color-text-muted, #888);
    font-size: 14px; line-height: 1.6;
}
.cal-detail-empty-icon { font-size: 36px; margin-bottom: 8px; }
[data-theme="dark"] .cal-detail-panel {
    background: rgba(10,18,42,.92);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 -12px 48px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] .cal-detail-handle { background: rgba(255,255,255,.18); }
[data-theme="dark"] .cal-detail-header { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .cal-detail-feast { color: #dde4f0; }
[data-theme="dark"] .cal-detail-reading { background: rgba(0,85,165,.12); }
[data-theme="dark"] .cal-detail-reading-title { color: #dde4f0; }
[data-theme="dark"] .cal-detail-flag--type { background: rgba(255,200,0,.12); color: #ffc840; }
[data-theme="dark"] .cal-detail-flag--fast { background: rgba(255,255,255,.08); color: #aaa; }
[data-theme="dark"] .cal-detail-btn--secondary { background: rgba(0,85,165,.18); border-color: rgba(0,85,165,.35); }


.cal-loading-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.60);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    border-radius: inherit;
    z-index: 10;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
}
.cal-loading-overlay.active { opacity: 1; pointer-events: auto; }
.cal-spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid rgba(0,85,165,.15);
    border-top-color: var(--color-primary, #0055a5);
    animation: cal-spin .7s linear infinite;
}
@keyframes cal-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .cal-loading-overlay { background: rgba(10,18,42,.60); }


.cal-days.anim-left  { animation: cal-slide-left  .22s ease both; }
.cal-days.anim-right { animation: cal-slide-right .22s ease both; }
@keyframes cal-slide-left  { from { opacity:0; transform:translateX(24px);  } to { opacity:1; transform:none; } }
@keyframes cal-slide-right { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:none; } }


.cal-today-block {
    margin: 12px 16px 0;
    border-radius: 22px;
    padding: 18px 18px 16px;
    position: relative; overflow: hidden;

    background: rgba(255,255,255,.74);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
            backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.82);
    border-left: 4px solid var(--tb-vhex, var(--color-primary, #0055a5));
    box-shadow:
        0 6px 28px rgba(0,30,80,.10),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.03);
    cursor: default;
}

.cal-today-block::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 42%;
    background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, transparent 100%);
    border-radius: 22px 22px 0 0; pointer-events: none; z-index: 0;
}


.cal-tb-meta {
    display: flex; align-items: center; gap: 8px;
    position: relative; z-index: 1;
    margin-bottom: 10px;
}
.cal-tb-weekday {
    font-size: 12px; font-weight: 700;
    color: var(--color-text-muted, #8898b0);
    text-transform: uppercase; letter-spacing: .05em;
}
.cal-tb-season-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 99px;
    background: rgba(0,85,165,.07);
    border: 1px solid rgba(0,85,165,.12);
    font-size: 11px; font-weight: 700;
    color: var(--color-primary, #0055a5);
}
.cal-tb-season-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}


.cal-tb-date-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    position: relative; z-index: 1;
    margin-bottom: 12px;
}
.cal-tb-solar {
    display: flex; align-items: flex-end; gap: 8px;
}
.cal-tb-day-num {
    font-size: 52px; font-weight: 900; line-height: 1;
    background: linear-gradient(145deg, var(--tb-vhex, var(--color-primary-dark, #003d80)), var(--color-primary, #0055a5));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cal-tb-solar-sub {
    display: flex; flex-direction: column; gap: 2px;
    padding-bottom: 6px;
}
.cal-tb-month-label {
    font-size: 14px; font-weight: 800;
    color: var(--color-text, #1a2540);
}
.cal-tb-year-label {
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted, #8898b0);
}


.cal-tb-lunar {
    text-align: right; padding-top: 4px;
}
.cal-tb-lunar-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-text-muted, #8898b0);
    margin-bottom: 2px;
}
.cal-tb-lunar-val {
    font-size: 13px; font-weight: 700;
    color: var(--color-text, #1a2540);
}


.cal-tb-feast-row {
    display: flex; align-items: flex-start; gap: 10px;
    position: relative; z-index: 1;
    margin-bottom: 10px;
}
.cal-tb-vest-swatch {
    width: 14px; height: 14px; border-radius: 50%;
    flex-shrink: 0; margin-top: 3px;
    border: 2px solid rgba(255,255,255,.8);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.cal-tb-feast-info {
    flex: 1; min-width: 0;
}
.cal-tb-vest-label {
    font-size: 11px; font-weight: 700; text-transform: capitalize;
    color: var(--color-text-muted, #8898b0);
    margin-bottom: 2px;
}
.cal-tb-feast-name {
    font-size: 15px; font-weight: 800;
    color: var(--color-text, #1a2540);
    line-height: 1.35;
}
.cal-tb-feast-type {
    font-size: 11px; font-weight: 600;
    color: var(--tb-vhex, var(--color-primary, #0055a5));
    margin-top: 2px;
}


.cal-tb-quote {
    position: relative; z-index: 1;
    padding: 10px 12px;
    background: rgba(0,85,165,.05);
    border-radius: 12px;
    border-left: 3px solid var(--tb-vhex, var(--color-primary, #0055a5));
    margin-bottom: 10px;
    display: flex; gap: 6px; align-items: flex-start;
}
.cal-tb-quote-mark {
    font-size: 18px; line-height: 1;
    color: var(--tb-vhex, var(--color-primary, #0055a5));
    opacity: .6; flex-shrink: 0; margin-top: -2px;
}
.cal-tb-quote-text {
    font-size: 13px; font-style: italic; line-height: 1.55;
    color: var(--color-text, #1a2540);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}


.cal-tb-readings {
    display: flex; flex-wrap: wrap; gap: 5px;
    position: relative; z-index: 1;
    margin-bottom: 12px;
}
.cal-tb-chip {
    font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 99px;
    background: rgba(0,85,165,.08);
    border: 1px solid rgba(0,85,165,.15);
    color: var(--color-primary, #0055a5);
}


.cal-tb-cta {
    width: 100%; padding: 11px;
    border-radius: 14px; border: none;
    cursor: pointer;
    font-size: 13.5px; font-weight: 700;
    color: #fff;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.06) 100%),
        linear-gradient(135deg, var(--tb-vhex, var(--color-primary-dark, #003d80)) 0%, var(--color-primary, #0055a5) 100%);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 3px 14px rgba(0,60,160,.20), inset 0 1px 0 rgba(255,255,255,.42);
    transition: opacity .14s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    position: relative; z-index: 1;
}
.cal-tb-cta:hover  { opacity: .92; }
.cal-tb-cta:active { transform: scale(.97); }


[data-theme="dark"] .cal-today-block {
    background: rgba(10,20,50,.68);
    border-color: rgba(255,255,255,.10);
    border-left-color: var(--tb-vhex, var(--color-primary, #0055a5));
    box-shadow: 0 6px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="dark"] .cal-tb-weekday  { color: rgba(255,255,255,.38); }
[data-theme="dark"] .cal-tb-season-tag { background: rgba(0,85,165,.20); border-color: rgba(0,85,165,.30); }
[data-theme="dark"] .cal-tb-month-label { color: #dde4f0; }
[data-theme="dark"] .cal-tb-year-label  { color: rgba(255,255,255,.40); }
[data-theme="dark"] .cal-tb-lunar-val   { color: #dde4f0; }
[data-theme="dark"] .cal-tb-feat-name   { color: #dde4f0; }
[data-theme="dark"] .cal-tb-vest-label  { color: rgba(255,255,255,.40); }
[data-theme="dark"] .cal-tb-feast-name  { color: #dde4f0; }
[data-theme="dark"] .cal-tb-quote       { background: rgba(0,85,165,.14); }
[data-theme="dark"] .cal-tb-quote-text  { color: #dde4f0; }
[data-theme="dark"] .cal-tb-chip { background: rgba(0,85,165,.22); border-color: rgba(0,85,165,.35); }


.cal-view-toggle {
    display: flex; align-items: center; gap: 6px;
    margin: 14px 16px 0;
    padding: 4px;
    background: rgba(255,255,255,.66);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
            backdrop-filter: blur(12px) saturate(1.4);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 2px 10px rgba(0,30,80,.07), inset 0 1px 0 rgba(255,255,255,.90);
}
.cal-vtab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 6px;
    border-radius: 10px;
    border: none; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 700;
    color: var(--color-text-muted, #8898b0);
    transition: background .14s, color .14s, box-shadow .14s;
    -webkit-tap-highlight-color: transparent;
}
.cal-vtab svg { flex-shrink: 0; opacity: .7; }
.cal-vtab--active {
    background-image:
        linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.06) 100%),
        linear-gradient(135deg, var(--color-primary-dark, #003d80) 0%, var(--color-primary, #0055a5) 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,60,160,.22), inset 0 1px 0 rgba(255,255,255,.35);
}
.cal-vtab--active svg { opacity: 1; stroke: #fff; }
[data-theme="dark"] .cal-view-toggle {
    background: rgba(10,20,50,.65);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .cal-vtab {color: rgba(255,255,255,.70);}
[data-theme="dark"] .cal-vtab--active { color: #fff; }


.cal-week-nav-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 4px; gap: 10px;
}
.cal-week-nav-label {
    flex: 1; text-align: center;
    font-size: 15px; font-weight: 800;
    color: var(--color-text, #1a2540);
    letter-spacing: -.15px;
}
[data-theme="dark"] .cal-week-nav-label { color: #dde4f0; }

.cal-week-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
            backdrop-filter: blur(18px) saturate(1.5);
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.80);
    box-shadow:
        0 8px 32px rgba(0,30,80,.10),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(0,0,0,.04);
}
.cal-week-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 36%;
    background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, transparent 100%);
    border-radius: 22px 22px 0 0; pointer-events: none; z-index: 0;
}

.cal-week-list {
    position: relative; z-index: 1;
}


.cal-week-row {
    display: flex; align-items: stretch;
    padding: 0;
    border-bottom: 1px solid rgba(0,30,80,.06);
    cursor: pointer;
    transition: background .14s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.cal-week-row:last-child { border-bottom: none; }
.cal-week-row:hover:not(.cal-week-row--empty) { background: rgba(0,85,165,.05); }
.cal-week-row:active:not(.cal-week-row--empty) { background: rgba(0,85,165,.09); }
.cal-week-row--empty { cursor: default; pointer-events: none; opacity: .55; }


.cal-week-row--today {
    background: rgba(0,85,165,.06);
}
.cal-week-row--today::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--color-primary-dark, #003d80), var(--color-primary, #0055a5));
    border-radius: 0;
}
.cal-week-row:first-child.cal-week-row--today::before { border-top-left-radius: 22px; }
.cal-week-row:last-child.cal-week-row--today::before  { border-bottom-left-radius: 22px; }


.cal-week-day-col {
    flex-shrink: 0; width: 60px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 12px 6px;
    border-right: 1px solid rgba(0,30,80,.06);
    gap: 1px;
}
.cal-week-wday {
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted, #8898b0);
}
.cal-week-num {
    font-size: 22px; font-weight: 900; line-height: 1;
    color: var(--color-text, #1a2540);
}
.cal-week-month {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-text-muted, #8898b0); opacity: .7;
}
.cal-week-row--sunday .cal-week-wday,
.cal-week-row--sunday .cal-week-num  { color: #c62828; }
.cal-week-row--saturday .cal-week-wday,
.cal-week-row--saturday .cal-week-num { color: #1565c0; }
.cal-week-row--today .cal-week-num {
    background-image:
        linear-gradient(145deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.08) 100%),
        linear-gradient(145deg, var(--color-primary-dark, #003d80) 0%, var(--color-primary, #0055a5) 100%);
    color: #fff;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,60,160,.28), inset 0 1px 0 rgba(255,255,255,.38);
}


.cal-week-info-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 11px 14px 11px 12px;
    gap: 5px;
}


.cal-week-feast-row {
    display: flex; align-items: flex-start; gap: 7px;
}
.cal-week-dot {
    width: 8px; height: 8px; border-radius: 50; flex-shrink: 0;
    margin-top: 4px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.7);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.cal-week-fname {
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 700;
    color: var(--color-text, #1a2540);
    line-height: 1.38;
}
.cal-week-fname-text { }
.cal-week-fname-muted { color: var(--color-text-muted, #8898b0); font-weight: 600; font-size: 13px; }
.cal-week-rank-star { font-size: 12px; }


.cal-week-badges {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.cal-week-badge {
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px;
}
.cal-week-badge--type  { background: rgba(180,140,0,.10); color: #7C5700; }
.cal-week-badge--holy  { background: rgba(200,30,30,.08); color: #c62828; }
.cal-week-badge--fast  { background: rgba(80,80,80,.09); color: #666; }
.cal-week-badge--read  { background: rgba(22,163,74,.10); color: #16A34A; }


[data-theme="dark"] .cal-week-card {
    background: rgba(10,20,50,.68);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 8px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
[data-theme="dark"] .cal-week-card::before { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%); }
[data-theme="dark"] .cal-week-row { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .cal-week-row:hover:not(.cal-week-row--empty) { background: rgba(255,255,255,.05); }
[data-theme="dark"] .cal-week-row--today { background: rgba(0,85,165,.14); }
[data-theme="dark"] .cal-week-day-col { border-right-color: rgba(255,255,255,.07); }
[data-theme="dark"] .cal-week-num  { color: #dde4f0; }
[data-theme="dark"] .cal-week-wday,
[data-theme="dark"] .cal-week-month { color: rgba(255,255,255,.38); }
[data-theme="dark"] .cal-week-row--sunday .cal-week-wday,
[data-theme="dark"] .cal-week-row--sunday .cal-week-num  { color: #ff7070; }
[data-theme="dark"] .cal-week-row--saturday .cal-week-wday,
[data-theme="dark"] .cal-week-row--saturday .cal-week-num { color: #70a8ff; }
[data-theme="dark"] .cal-week-fname      { color: #dde4f0; }
[data-theme="dark"] .cal-week-fname-muted { color: rgba(255,255,255,.35); }
[data-theme="dark"] .cal-week-badge--type  { background: rgba(255,200,0,.12); color: #ffc840; }
[data-theme="dark"] .cal-week-badge--fast  { background: rgba(255,255,255,.08); color: #aaa; }
[data-theme="dark"] .cal-week-badge--read  { background: rgba(22,163,74,.18); color: #4ade80; }




.cal-day-name {
    display: none;
}


.cal-day-name--sol {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 8.5px; font-weight: 700;
    color: var(--color-primary, #0055a5);
    text-align: center;
    line-height: 1.25;
    width: 100%; padding: 0 2px;
    margin-top: 2px;
    white-space: normal;
}


.cal-day-name--feast {
    display: block;
    font-size: 8px; font-weight: 600;
    color: var(--color-text-muted, #7a8aaa);
    text-align: center;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    width: 100%; padding: 0 2px;
    margin-top: 2px; line-height: 1.2;
}


.cal-day--today .cal-day-name--sol,
.cal-day--today .cal-day-name--feast { color: var(--color-primary, #0055a5); font-weight: 800; }


[data-theme="dark"] .cal-day-name--sol   { color: rgba(120,160,255,.85); }
[data-theme="dark"] .cal-day-name--feast { color: rgba(255,255,255,.38); }
[data-theme="dark"] .cal-day--today .cal-day-name--sol,
[data-theme="dark"] .cal-day--today .cal-day-name--feast { color: rgba(160,200,255,.90); }