/* ── Design tokens (mirroring Prashanti) ── */
:root {
    --bg-primary: #faf8f6;
    --bg-card: #ffffff;
    --bg-card-alt: #fef9f4;
    --bg-input: #ffffff;
    --border-subtle: #ece5de;
    --border: #e5e2dd;
    --border-focus: #c7384f;
    --accent: #c7384f;
    --accent-light: #d4622b;
    --accent-glow: rgba(199, 56, 79, 0.14);
    --crimson: #c7384f;
    --crimson-light: #d4622b;
    --gold: #c49215;
    --gold-light: #d4a832;
    --saffron: #d4622b;
    --text-primary: #1c1210;
    --text-secondary: #5c4f49;
    --text-muted: #9a8d85;
    --success: #16a34a;
    --success-bg: #ecfdf5;
    --error: #dc2626;
    --warn: #ca8a04;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
}
body::before {
    content: '';
    position: fixed; inset: -40% -20% auto auto;
    width: 80%; height: 80%;
    background: radial-gradient(ellipse, rgba(212, 98, 43, 0.10) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
body::after {
    content: '';
    position: fixed; inset: auto -20% -30% auto;
    width: 70%; height: 70%;
    background: radial-gradient(ellipse, rgba(196, 146, 21, 0.08) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

/* ── Nav ── */
/* ── Top nav — sleek, modern, single-line "MYSSS · Sadhana" ── */
.sad-nav {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 1px 0 rgba(28, 18, 16, 0.05);
}
.sad-nav::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #6B1320 0%, #C7384F 35%, #D4622B 70%, #C49215 100%);
    opacity: 0.85;
}
.sad-nav-inner {
    max-width: 64rem; margin: 0 auto; padding: 0.6rem 1.1rem;
    display: flex; align-items: center; gap: 0.85rem; min-height: 3.85rem;
}
.sad-logo-wrap {
    width: 2.85rem; height: 2.85rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #C7384F 0%, #D4622B 100%);
    padding: 2px;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(199, 56, 79, 0.32);
}
.sad-logo {
    box-sizing: border-box;
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: contain;
    background: #fff;
    display: block;
    padding: 3px;
}
.sad-brand-wrap { line-height: 1.05; min-width: 0; }
.sad-brand {
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: 1.2px;
    line-height: 1;
}
.sad-brand-mysss { display: inline; letter-spacing: inherit; }
/* USA-flag wordmark: MY in Old Glory Blue, SSS in Old Glory Red */
.sad-brand-my  { color: #3C3B6E; -webkit-text-fill-color: #3C3B6E; }
.sad-brand-sss {
    color: #B22234;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #B22234;
}
.sad-brand-dot {
    width: 4px; height: 4px;
    background: var(--text-muted);
    border-radius: 50%;
    display: inline-block;
    margin: 0 0.05rem;
    transform: translateY(-2px);
    opacity: 0.55;
}
.sad-brand-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-secondary);
    letter-spacing: 0.4px;
}
.sad-nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; position: relative; }

/* ── Top hamburger menu ── */
.sad-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 0.6rem;
    background: rgba(199, 56, 79, 0.08); border: none; color: var(--accent);
    cursor: pointer; transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.sad-menu-btn[hidden] { display: none; }
.sad-menu-btn:hover { background: rgba(199, 56, 79, 0.15); }
.sad-menu-btn:active { transform: scale(0.94); }
.sad-menu {
    position: absolute; top: calc(100% + 0.55rem); right: 0; z-index: 120;
    min-width: 14.5rem;
    background: #fff; border: 1px solid var(--border-subtle);
    border-radius: 0.85rem; box-shadow: 0 18px 44px rgba(28, 18, 16, 0.18);
    padding: 0.4rem; overflow: hidden;
    animation: sadMenuPop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.sad-menu.hidden { display: none; }
@keyframes sadMenuPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.sad-menu-item {
    display: flex; align-items: center; gap: 0.7rem; width: 100%;
    padding: 0.62rem 0.7rem; border-radius: 0.55rem;
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
    text-align: left; text-decoration: none; transition: background 0.12s;
}
.sad-menu-item:hover { background: rgba(199, 56, 79, 0.07); }
.sad-menu-item[hidden] { display: none; }
.sad-menu-item svg { color: var(--accent); flex-shrink: 0; }
.sad-menu-item.danger { color: #dc2626; }
.sad-menu-item.danger svg { color: #dc2626; }
.sad-menu-sep { height: 1px; background: var(--border-subtle); margin: 0.3rem 0.2rem; }
.sad-nav-signout-icon { display: none; }

@media (max-width: 600px) {
    .sad-nav-inner { padding: 0.45rem 0.7rem; min-height: 3rem; gap: 0.5rem; }
    .sad-logo-wrap { width: 2.1rem; height: 2.1rem; padding: 1.5px; }
    /* Use less inner padding on the logo image on mobile so the artwork doesn't shrink to a dot */
    .sad-logo { padding: 1.5px; }
    /* Keep MYSSS · Sadhana on ONE line — just shrink everything to fit */
    .sad-brand { font-size: 0.95rem; letter-spacing: 0.6px; gap: 0.28rem; }
    .sad-brand-name { font-size: 0.78rem; }
    .sad-brand-dot { width: 3px; height: 3px; transform: translateY(-1px); margin: 0 0.02rem; }
    /* Hide the role chip in nav on mobile — it's already shown in the hero card */
    .sad-nav-right .sad-badge { display: none; }
    /* Compact icon-only sign-out on mobile: clean circular tap target, no border */
    .sad-nav-right .sad-btn {
        padding: 0 !important; width: 2.2rem; height: 2.2rem;
        border-radius: 50%; font-size: 0; line-height: 1; flex-shrink: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(199, 56, 79, 0.08) !important;
        border: none !important;
        color: var(--accent) !important;
        transition: background 0.15s, transform 0.1s;
    }
    .sad-nav-right .sad-btn:active { transform: scale(0.92); }
    .sad-nav-signout-icon { display: inline-block; width: 18px; height: 18px; color: currentColor; }
    .sad-nav-right .sad-btn-label { display: none; }
}

/* ── Views ── */
.sad-view { display: none; flex: 1; padding: 1.5rem 0 3rem; position: relative; z-index: 1; }
.sad-view-active { display: block; }

.sad-container { max-width: 64rem; margin: 0 auto; padding: 0 1rem; width: 100%; }
.sad-container-narrow { max-width: 30rem; }

/* ── Card ── */
.sad-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.03);
}
.sad-card-hero {
    border-color: rgba(199, 56, 79, 0.15);
    box-shadow: 0 10px 40px rgba(199, 56, 79, 0.08), 0 1px 3px rgba(0,0,0,0.04);
}
.sad-card-header {
    padding: 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.07), rgba(196, 146, 21, 0.05));
    border-bottom: 1px solid var(--border-subtle);
    position: relative;
}
.sad-card-body { padding: 1.5rem; }

/* ── Titles ── */
.sad-logo-circle {
    width: 4.5rem; height: 4.5rem; border-radius: 50%;
    background: #fff; padding: 0.5rem; margin: 0 auto 1rem;
    box-shadow: 0 6px 18px rgba(199, 56, 79, 0.18);
    border: 2px solid rgba(199, 56, 79, 0.18);
}
.sad-logo-circle img { width: 100%; height: 100%; object-fit: contain; }
.sad-title { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.35rem; }
.sad-title-sm { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.sad-subtitle { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; max-width: 24rem; margin: 0 auto; }
.sad-back {
    background: none; border: none; color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
    cursor: pointer; font-family: inherit; padding: 0.25rem 0; margin-bottom: 0.4rem;
    display: inline-flex; align-items: center; gap: 0.25rem; transition: color 0.2s;
}
.sad-back:hover { color: var(--accent); }

/* ── Login choice ── */
.sad-note {
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    margin-bottom: 1.25rem;
}
.sad-note-saffron {
    background: rgba(212, 98, 43, 0.08);
    border: 1px solid rgba(212, 98, 43, 0.18);
    color: var(--text-secondary);
}
.sad-note-saffron strong { color: var(--accent); font-weight: 700; }
.sad-note-info {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.16);
    color: var(--text-secondary);
}
.sad-note-warn {
    background: #fef3cd;
    border: 1px solid #ffc107;
    color: #856404;
}
.sad-login-choice { display: flex; flex-direction: column; gap: 0.6rem; }

/* ── Buttons ── */
.sad-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 0.6rem;
    font-size: 0.85rem; font-weight: 600;
    font-family: inherit; cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}
.sad-btn:active { transform: translateY(1px); }
.sad-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.sad-btn-primary {
    background: linear-gradient(135deg, var(--accent), #b32d40);
    color: #fff;
    box-shadow: 0 4px 14px rgba(199, 56, 79, 0.25);
}
.sad-btn-primary:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(199, 56, 79, 0.35); }
.sad-btn-saffron {
    background: linear-gradient(135deg, var(--saffron), #b8501e);
    color: #fff;
    box-shadow: 0 4px 14px rgba(212, 98, 43, 0.30);
}
.sad-btn-saffron:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(212, 98, 43, 0.40); }
.sad-btn-outline {
    background: #fff; color: var(--accent); border-color: var(--accent);
}
.sad-btn-outline:hover:not(:disabled) { background: rgba(199, 56, 79, 0.04); }
.sad-btn-ghost {
    background: transparent; color: var(--text-secondary); border-color: var(--border);
}
.sad-btn-ghost:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.sad-btn-lg { padding: 0.95rem 1.5rem; font-size: 0.9rem; }
.sad-btn-block { width: 100%; }
.sad-btn-icon { font-size: 1rem; line-height: 1; }
.sad-btn-icon-svg { flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ── Inputs ── */
.sad-label {
    display: block;
    font-size: 0.7rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 0.35rem;
}
.sad-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sad-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(199, 56, 79, 0.12);
}
.sad-error {
    color: var(--error);
    font-size: 0.78rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(220, 38, 38, 0.06);
    border-radius: 0.45rem;
    border: 1px solid rgba(220, 38, 38, 0.18);
}

/* ── Picker ── */
.sad-picker-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sad-picker-item {
    text-align: left; width: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    cursor: pointer; font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
    display: flex; align-items: center; gap: 0.75rem;
}
.sad-picker-item:hover { border-color: var(--accent); background: rgba(199, 56, 79, 0.03); }
.sad-picker-avatar {
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--saffron), var(--crimson));
    color: #fff; font-weight: 700; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sad-picker-info { flex: 1; min-width: 0; }
.sad-picker-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.sad-picker-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 1px; }

/* ── Greeting hero — warm sunrise palette that matches the rest of the site
   (deep wine → crimson → saffron → gold). Same warm family as the chant
   cards + Begin Chant button + page accents. ── */
.sad-greeting {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.4rem;
    background: linear-gradient(135deg, #6B1320 0%, #C7384F 35%, #D4622B 70%, #C49215 100%);
    border-radius: 1.4rem;
    box-shadow: 0 14px 40px rgba(199, 56, 79, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.08);
    color: #fff;
    isolation: isolate;
}
.sad-greeting-glow {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse 80% 70% at 110% -10%, rgba(255, 215, 138, 0.45), transparent 65%),
        radial-gradient(ellipse 80% 100% at -10% 110%, rgba(107, 19, 32, 0.50), transparent 70%);
    pointer-events: none;
}
.sad-greeting-ornament {
    position: relative; z-index: 1;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.55);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
    animation: sadGreetSpin 90s linear infinite;
}
.sad-greeting-ornament svg { display: block; }
@keyframes sadGreetSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.sad-greeting-text {
    position: relative; z-index: 1;
    flex: 1; min-width: 0;
}
.sad-greeting-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 0.4rem;
}
.sad-greeting-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.sad-greeting-date {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82);
    margin-top: 0.3rem;
    font-weight: 500;
}
.sad-greeting .sad-badge {
    position: relative; z-index: 1;
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    padding: 0.32rem 0.7rem;
    border-radius: 99px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    flex-shrink: 0;
}
.sad-greeting .sad-badge-ritwik,
.sad-greeting .sad-badge-guest { background: rgba(255, 255, 255, 0.20); color: #fff; }

/* Chips row inside the welcome banner — holds the role badge + streak chip */
.sad-greeting-chips {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-top: 0.7rem;
}
/* Streak chip — translucent on the gradient, matches the role badge family */
.sad-greeting-streak {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 0.3rem 0.7rem; border-radius: 99px;
    color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2px;
    white-space: nowrap; line-height: 1;
}
.sad-greeting-streak.hidden { display: none; }
.sad-greeting-streak.is-done { background: rgba(255, 255, 255, 0.28); }
.sad-greeting-streak-ic { display: inline-flex; }
.sad-greeting-streak-ic svg { display: block; width: 14px; height: 14px; }
.sad-greeting-streak-check { display: inline-flex; }
.sad-greeting-streak-check.hidden { display: none; }
.sad-greeting-streak-check svg { display: block; width: 13px; height: 13px; }

@media (max-width: 480px) {
    /* More horizontal breathing room so the text sits comfortably away from the edge */
    .sad-greeting { padding: 1.25rem 1.4rem; gap: 0.9rem; margin-bottom: 1.1rem; border-radius: 1.2rem; }
    /* Shrink the spinning ornament so the name has room and pull it inward slightly */
    .sad-greeting-ornament svg { width: 54px; height: 54px; }
    .sad-greeting-name { font-size: 1.5rem; letter-spacing: -0.4px; }
    .sad-greeting-eyebrow { font-size: 0.58rem; letter-spacing: 1.6px; margin-bottom: 0.35rem; }
    .sad-greeting-date { font-size: 0.74rem; margin-top: 0.25rem; }
    /* Tighter badge so it doesn't crowd the name on narrow screens */
    .sad-greeting .sad-badge { font-size: 0.6rem; padding: 0.28rem 0.6rem; letter-spacing: 1px; }
}
/* Extra-narrow phones (≤360px / older devices): stack badge below text so it doesn't compress the name */
@media (max-width: 360px) {
    .sad-greeting { padding: 1.15rem 1.2rem; gap: 0.7rem; }
    .sad-greeting-ornament svg { width: 46px; height: 46px; }
    .sad-greeting-name { font-size: 1.35rem; }
}
.sad-badge {
    font-size: 0.65rem; font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 99px;
    background: rgba(199, 56, 79, 0.1);
    color: var(--accent);
    text-transform: uppercase; letter-spacing: 1px;
}
.sad-badge-ritwik { background: rgba(212, 98, 43, 0.12); color: var(--saffron); }
.sad-badge-guest { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }

.sad-section-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.75rem; gap: 0.75rem; flex-wrap: wrap;
}
.sad-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem; font-weight: 700;
    color: var(--text-primary);
}
.sad-section-subhead {
    font-size: 0.7rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 0.6rem;
}
.sad-tz-note {
    font-size: 0.7rem; color: var(--text-muted);
    background: var(--bg-card-alt);
    padding: 0.2rem 0.5rem; border-radius: 99px;
}

/* ── Active session banner ── */
.sad-active-banner {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(199, 56, 79, 0.07), rgba(212, 98, 43, 0.05));
    border: 1px solid rgba(199, 56, 79, 0.25);
    border-radius: 0.85rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 18px rgba(199, 56, 79, 0.10);
}
.sad-pulse-dot {
    width: 0.65rem; height: 0.65rem; border-radius: 50%;
    background: var(--crimson);
    box-shadow: 0 0 0 0 rgba(199, 56, 79, 0.7);
    animation: sadPulse 1.5s infinite;
    flex-shrink: 0;
}
@keyframes sadPulse {
    0% { box-shadow: 0 0 0 0 rgba(199, 56, 79, 0.7); }
    70% { box-shadow: 0 0 0 0.6rem rgba(199, 56, 79, 0); }
    100% { box-shadow: 0 0 0 0 rgba(199, 56, 79, 0); }
}
.sad-active-text { flex: 1; min-width: 0; }
.sad-active-title { font-weight: 700; font-size: 0.95rem; color: var(--accent); }
.sad-active-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; }

/* ── Session list ── */
.sad-sessions {
    display: grid; gap: 0.9rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.sad-session-card {
    position: relative;
    background: linear-gradient(160deg, #fff 0%, #FEF9F4 100%);
    border: 1px solid var(--border-subtle);
    border-radius: 1.1rem;
    padding: 1.05rem 1.15rem;
    transition: border-color 0.18s, box-shadow 0.22s, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(199, 56, 79, 0.04);
}
.sad-session-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--saffron), var(--crimson));
    opacity: 0;
    transition: opacity 0.2s;
}
.sad-session-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(199, 56, 79, 0.10); }
.sad-session-card.active {
    border-color: rgba(212, 98, 43, 0.40);
    box-shadow: 0 8px 26px rgba(199, 56, 79, 0.18);
    background: linear-gradient(160deg, #fff 0%, #FFE8C7 100%);
}
.sad-session-card.active::before { opacity: 1; }
.sad-session-card.ended { background: linear-gradient(160deg, #FAF8F6 0%, #F1ECE8 100%); opacity: 0.85; }
.sad-session-card.upcoming { cursor: default; }
.sad-session-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.sad-session-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 700; font-size: 1.05rem;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.25;
}
.sad-session-time {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem; font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sad-session-status {
    font-size: 0.62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.4px;
    padding: 0.25rem 0.65rem; border-radius: 99px;
    display: inline-block;
    margin-bottom: 0.55rem;
}
.sad-status-upcoming { background: rgba(37, 99, 235, 0.10); color: #2563eb; }
.sad-status-active   { background: rgba(22, 163, 74, 0.12);  color: var(--success); }
.sad-status-ended    { background: rgba(115, 115, 115, 0.10); color: var(--text-muted); }
.sad-session-countdown {
    font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.75rem;
    line-height: 1.45;
}
.sad-session-actions { margin-top: 0.85rem; }
.sad-session-actions .sad-btn { width: 100%; }

/* ── Loading state ── */
.sad-loading {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}
.sad-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: sadSpin 0.8s linear infinite;
    margin: 0 auto 0.85rem;
}
.sad-loading p { font-size: 0.88rem; }
.sad-loading small { color: var(--text-muted); font-size: 0.75rem; display: block; margin-top: 0.4rem; }
@keyframes sadSpin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.sad-empty {
    text-align: center; padding: 3rem 1rem;
    color: var(--text-muted);
}
.sad-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; opacity: 0.6; color: var(--text-secondary); }
.sad-empty-icon svg { display: block; margin: 0 auto; }
.sad-empty p { margin-bottom: 0.35rem; }

/* ── Active session view ── */
.sad-session-header {
    margin-bottom: 1.5rem;
}
.sad-session-title-wrap { margin-top: 0.4rem; }
.sad-session-title { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.sad-session-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.sad-session-grid {
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
@media (min-width: 760px) {
    .sad-session-grid { grid-template-columns: 1.6fr 1fr; }
}

/* ── Player ── */
.sad-now-playing {
    text-align: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.06), rgba(199, 56, 79, 0.04));
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}
.sad-np-label { font-size: 0.65rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 0.5rem; }
.sad-np-title { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--accent); }
.sad-np-counter { font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.35rem; }
.sad-progress { margin: 1rem 0 1.25rem; }
.sad-progress-bar {
    height: 0.4rem; background: var(--bg-card-alt); border: 1px solid var(--border-subtle);
    border-radius: 99px; overflow: hidden;
}
.sad-progress-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--saffron), var(--crimson));
    border-radius: 99px; transition: width 0.5s linear;
}
.sad-progress-times {
    display: flex; justify-content: space-between;
    font-size: 0.72rem; color: var(--text-muted); margin-top: 0.4rem;
}
.sad-player-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.sad-synced-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding: 0.65rem 0.8rem;
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 0.55rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
}
.sad-synced-notice .sad-pulse-dot {
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
    flex-shrink: 0;
    margin-top: 0.3rem;
}
.sad-synced-notice strong { color: var(--text-primary); font-weight: 600; }
.sad-playlist { margin-top: 1.5rem; }
.sad-playlist-list { list-style: none; padding: 0; counter-reset: pl; }
.sad-playlist-list li {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: background 0.15s;
    counter-increment: pl;
}
.sad-playlist-list li::before {
    content: counter(pl);
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--bg-card-alt); color: var(--text-muted);
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sad-playlist-list li.playing {
    background: rgba(199, 56, 79, 0.06);
    border-color: rgba(199, 56, 79, 0.18);
    color: var(--accent);
    font-weight: 600;
}
.sad-playlist-list li.playing::before {
    background: var(--accent); color: #fff;
}
.sad-playlist-list li.done { color: var(--text-muted); }
.sad-playlist-list li.done::before { background: var(--success-bg); color: var(--success); }
.sad-track-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sad-track-dur { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ── Participants ── */
.sad-participants-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem;
}
.sad-participants-count {
    background: var(--accent); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.15rem 0.55rem; border-radius: 99px;
    min-width: 1.5rem; text-align: center;
}
.sad-participants-list { list-style: none; padding: 0; max-height: 24rem; overflow-y: auto; }
.sad-participants-list li {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-subtle);
}
.sad-participants-list li:last-child { border-bottom: none; }
.sad-participant-avatar {
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: linear-gradient(135deg, var(--saffron), var(--crimson));
    color: #fff; font-weight: 700; font-size: 0.72rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sad-participant-avatar.guest { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.sad-participant-info { flex: 1; min-width: 0; }
.sad-participant-name {
    font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sad-participant-meta { font-size: 0.7rem; color: var(--text-muted); }
.sad-participant-self { font-size: 0.7rem; color: var(--accent); font-weight: 700; margin-left: 0.2rem; }
.sad-participant-badge {
    font-size: 0.6rem; font-weight: 700;
    padding: 0.1rem 0.4rem; border-radius: 99px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.sad-participant-badge.ritwik { background: rgba(212, 98, 43, 0.12); color: var(--saffron); }
.sad-participant-badge.guest { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }
.sad-participants-empty {
    text-align: center; padding: 1.5rem 0.75rem;
    color: var(--text-muted); font-size: 0.78rem;
    border: none !important;
}

/* ── Attendance ── */
.sad-attendance { margin-top: 2rem; }
.sad-attendance-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sad-attendance-item {
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 0.55rem;
    padding: 0.55rem 0.85rem;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.82rem;
}
.sad-attendance-when { color: var(--text-secondary); }
.sad-attendance-dur {
    color: var(--text-primary); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Misc ── */
.sad-mb-1 { margin-bottom: 0.75rem; }
.sad-mt-1 { margin-top: 1rem; }
.sad-text-muted { color: var(--text-muted); }
.sad-text-xs { font-size: 0.72rem; }
.sad-uppercase { text-transform: uppercase; }
.sad-letter-spaced { letter-spacing: 1px; }
.hidden { display: none !important; }

/* ── Session state banner (big, friendly, unmissable) ── */
.sad-state-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    border: 2px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.sad-state-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sad-state-text { flex: 1; min-width: 0; }
.sad-state-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}
.sad-state-sub {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Waiting Room — session not started yet */
.sad-state-banner.state-waiting {
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.08), rgba(196, 146, 21, 0.06));
    border-color: rgba(212, 98, 43, 0.25);
}
.sad-state-banner.state-waiting .sad-state-label { color: var(--saffron); }
.sad-state-banner.state-waiting .sad-state-icon {
    background: rgba(212, 98, 43, 0.15);
}

/* Ready to Join — session is live but user hasn't joined */
.sad-state-banner.state-ready {
    background: linear-gradient(135deg, rgba(199, 56, 79, 0.10), rgba(212, 98, 43, 0.06));
    border-color: rgba(199, 56, 79, 0.35);
    box-shadow: 0 4px 18px rgba(199, 56, 79, 0.10);
}
.sad-state-banner.state-ready .sad-state-label { color: var(--accent); }
.sad-state-banner.state-ready .sad-state-icon {
    background: rgba(199, 56, 79, 0.15);
    animation: sadGentlePulse 2s ease-in-out infinite;
}
@keyframes sadGentlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Connecting — user has tapped Join but audio/video is still buffering. Static icon (no spinner). */
.sad-state-banner.state-connecting {
    background: linear-gradient(135deg, rgba(199, 56, 79, 0.06), rgba(199, 56, 79, 0.03));
    border-color: rgba(199, 56, 79, 0.25);
}
.sad-state-banner.state-connecting .sad-state-label { color: var(--accent); }
.sad-state-banner.state-connecting .sad-state-icon {
    background: rgba(199, 56, 79, 0.12);
    color: var(--accent);
}

/* "You're In" — compact pill shown below the video instead of the big state banner.
   The big state banner is hidden while joined; only this pill stays visible. */
.sad-joined-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: max-content;
    max-width: 100%;
    padding: 0.35rem 0.85rem;
    margin: -0.25rem 0 0.85rem;
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 99px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
}
.sad-joined-check { color: var(--success); flex-shrink: 0; }
.sad-joined-bar strong { color: var(--success); font-weight: 700; }
@media (max-width: 480px) {
    .sad-joined-bar { font-size: 0.74rem; padding: 0.35rem 0.75rem; gap: 0.4rem; }
}

/* Ended */
.sad-state-banner.state-ended {
    background: var(--bg-card-alt);
    border-color: var(--border-subtle);
}
.sad-state-banner.state-ended .sad-state-label { color: var(--text-secondary); }

/* Big "Join" button variant for elderly clarity */
.sad-btn-jumbo {
    padding: 1.1rem 1.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    min-height: 3.5rem;
    box-shadow: 0 6px 20px rgba(199, 56, 79, 0.30) !important;
}
.sad-btn-jumbo .sad-btn-icon { font-size: 1.25rem; }

/* ── Video viewer ── */
.sad-video-wrap {
    background: #000;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    border: 1px solid var(--border-subtle);
}
.sad-video-stage {
    position: relative;
    width: 100%;
    /* 16:9 by default until the video's actual dimensions are known. JS replaces this
       with `${videoWidth} / ${videoHeight}` once `loadedmetadata` fires — so portrait
       videos, square videos, or anything non-16:9 size correctly with no black bars. */
    aspect-ratio: 16 / 9;
    background: #000;
    margin-left: auto;
    margin-right: auto;
}
/* Mobile cap so a portrait video doesn't take over the screen */
.sad-video-stage { max-height: 70vh; }
/* Desktop: more vertical room */
@media (min-width: 900px) {
    .sad-video-wrap { max-height: none; }
    .sad-video-stage {
        max-height: 75vh;
        min-height: 30vh;
    }
}
.sad-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
    /* User can't tap to pause/seek — sync is enforced by the player */
    pointer-events: none;
    /* Hide any default Safari/iOS controls that might leak through */
    -webkit-user-select: none;
    user-select: none;
}
.sad-video-el::-webkit-media-controls,
.sad-video-el::-webkit-media-controls-panel,
.sad-video-el::-webkit-media-controls-start-playback-button,
.sad-video-el::-webkit-media-controls-overlay-play-button,
.sad-video-el::-webkit-media-controls-enclosure {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.sad-video-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    /* Eats taps so the video element underneath can't receive any */
    pointer-events: auto;
    cursor: default;
    z-index: 2;
}
.sad-video-sync-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.65rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
    z-index: 3;
    line-height: 1;
}
.sad-video-sync-badge .sad-pulse-dot {
    width: 0.45rem;
    height: 0.45rem;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
}

/* Fullscreen button */
.sad-video-fs-btn {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 4;
    width: 2.6rem;
    height: 2.6rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 99px;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.sad-video-fs-btn:hover { background: rgba(0, 0, 0, 0.78); transform: scale(1.06); }
.sad-video-fs-btn:active { transform: scale(0.94); }
.sad-video-fs-icon-expand,
.sad-video-fs-icon-exit { display: block; }
.sad-video-fs-icon-exit { display: none; }
.sad-fullscreen-faux .sad-video-fs-icon-expand,
.sad-video-wrap:fullscreen .sad-video-fs-icon-expand,
.sad-video-wrap:-webkit-full-screen .sad-video-fs-icon-expand { display: none; }
.sad-fullscreen-faux .sad-video-fs-icon-exit,
.sad-video-wrap:fullscreen .sad-video-fs-icon-exit,
.sad-video-wrap:-webkit-full-screen .sad-video-fs-icon-exit { display: block; }

/* Buffering indicator */
.sad-video-buffering {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    pointer-events: none;
}
.sad-video-buffering-text {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.sad-spinner-light {
    border-color: rgba(255,255,255,0.25);
    border-top-color: #fff;
}

/* Fullscreen state — when the video wrap is the fullscreen element */
.sad-video-wrap:fullscreen,
.sad-video-wrap:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: #000;
}
.sad-video-wrap:fullscreen .sad-video-stage,
.sad-video-wrap:-webkit-full-screen .sad-video-stage {
    flex: 1;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
}
.sad-video-wrap:fullscreen .sad-video-caption,
.sad-video-wrap:-webkit-full-screen .sad-video-caption {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-top-color: rgba(255, 255, 255, 0.15);
}
.sad-video-wrap:fullscreen .sad-video-caption-title,
.sad-video-wrap:-webkit-full-screen .sad-video-caption-title {
    color: #fff;
}

/* CSS-based "faux fullscreen" — used on iOS Safari where the native Fullscreen API
   either replaces our UI with the iOS player (loses sync badge, allows scrubbing)
   or just isn't available. This keeps our locked UI intact at viewport size. */
body.sad-noscroll { overflow: hidden; touch-action: none; }
.sad-video-wrap.sad-fullscreen-faux {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    z-index: 999;
    margin: 0;
    border-radius: 0;
    border: none;
    background: #000;
    display: flex;
    flex-direction: column;
    animation: sadFsEnter 0.22s ease-out;
}
.sad-video-wrap.sad-fullscreen-faux .sad-video-stage {
    flex: 1;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
}
.sad-video-wrap.sad-fullscreen-faux .sad-video-caption {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border-top-color: rgba(255, 255, 255, 0.15);
}
.sad-video-wrap.sad-fullscreen-faux .sad-video-caption-title { color: #fff; }
.sad-video-wrap.sad-fullscreen-faux .sad-video-fs-btn {
    width: 3rem;
    height: 3rem;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.75);
}
.sad-video-wrap.sad-fullscreen-faux .sad-video-sync-badge {
    top: 1rem;
    left: 1rem;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
}
@keyframes sadFsEnter {
    from { opacity: 0.5; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* Loading indicator in fullscreen — make it bigger and more centered */
.sad-video-wrap.sad-fullscreen-faux .sad-video-buffering,
.sad-video-wrap:fullscreen .sad-video-buffering,
.sad-video-wrap:-webkit-full-screen .sad-video-buffering {
    background: rgba(0, 0, 0, 0.6);
}
.sad-video-wrap.sad-fullscreen-faux .sad-spinner,
.sad-video-wrap:fullscreen .sad-spinner,
.sad-video-wrap:-webkit-full-screen .sad-spinner {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}
.sad-video-wrap.sad-fullscreen-faux .sad-video-buffering-text,
.sad-video-wrap:fullscreen .sad-video-buffering-text,
.sad-video-wrap:-webkit-full-screen .sad-video-buffering-text {
    font-size: 1rem;
}
.sad-video-caption {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--border-subtle);
}
.sad-video-caption-icon { font-size: 1rem; color: var(--accent); flex-shrink: 0; }
svg.sad-video-caption-icon { display: block; }
.sad-video-caption-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Playlist preview: video badge */
.sad-video-chip {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 99px;
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.25);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Compact "Open PDF" pill button (visible inline when track has a PDF) ── */
.sad-pdf-pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.08), rgba(196, 146, 21, 0.05));
    border: 1px solid rgba(212, 98, 43, 0.25);
    border-radius: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.sad-pdf-pill:hover {
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.13), rgba(196, 146, 21, 0.08));
    border-color: rgba(212, 98, 43, 0.40);
}
.sad-pdf-pill:active { transform: scale(0.995); }
.sad-pdf-pill-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; color: var(--accent); }
svg.sad-pdf-pill-icon { display: block; }
.sad-pdf-pill-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.sad-pdf-pill-title {
    font-weight: 700;
    font-size: 0.93rem;
    color: var(--accent);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sad-pdf-pill-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sad-pdf-pill-chevron {
    font-size: 1.4rem;
    color: var(--accent);
    opacity: 0.6;
    flex-shrink: 0;
    line-height: 1;
}

/* ── PDF fullscreen reader ── */
.sad-pdf-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: #faf8f6;
    display: flex;
    flex-direction: column;
    animation: sadFadeIn 0.2s ease-out;
}
.sad-pdf-fs-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.10), rgba(196, 146, 21, 0.06));
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.sad-pdf-fs-icon { font-size: 1.25rem; flex-shrink: 0; color: var(--accent); }
svg.sad-pdf-fs-icon { display: block; }
.sad-pdf-fs-title-wrap { flex: 1; min-width: 0; line-height: 1.15; }
.sad-pdf-fs-label {
    font-size: 0.6rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
}
.sad-pdf-fs-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--accent);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sad-pdf-fs-status {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
    background: var(--bg-card-alt);
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
}
.sad-pdf-fs-close {
    width: 2.6rem; height: 2.6rem;
    border-radius: 99px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: background 0.15s, transform 0.1s;
}
.sad-pdf-fs-close:hover { background: var(--bg-card-alt); }
.sad-pdf-fs-close:active { transform: scale(0.94); }
.sad-pdf-langs {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border-subtle);
    background: #fff;
    scrollbar-width: thin;
}
.sad-pdf-langs::-webkit-scrollbar { height: 4px; }
.sad-pdf-langs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sad-pdf-lang {
    flex: 0 0 auto;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 99px;
    background: var(--bg-card-alt);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
    min-height: 2rem;
    line-height: 1;
}
.sad-pdf-lang:hover:not(.active) {
    border-color: var(--accent);
    color: var(--accent);
}
.sad-pdf-lang.active {
    background: linear-gradient(135deg, var(--accent), #b32d40);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(199, 56, 79, 0.25);
}
.sad-pdf-lang-sub {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    opacity: 0.7;
    margin-top: 1px;
}

.sad-pdf-viewer {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.6rem;
    background: #f4f1ed;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Native browser pinch-zoom works fine — we don't disable touch-action here */
}
.sad-pdf-viewer:focus { outline: none; }
.sad-pdf-page-wrap {
    margin: 0 auto 0.65rem;
    max-width: 100%;
    position: relative;
}
.sad-pdf-page-wrap:last-child { margin-bottom: 0.2rem; }
.sad-pdf-page {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 14px rgba(0,0,0,0.06);
    border-radius: 0.3rem;
}
.sad-pdf-page-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.3rem;
    letter-spacing: 0.5px;
}

/* Playlist entry indicator that a track has a PDF */
.sad-pdf-chip {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 99px;
    background: rgba(212, 98, 43, 0.10);
    color: var(--saffron);
    border: 1px solid rgba(212, 98, 43, 0.25);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* When PDF is active, give it more breathing room: stack player+participants below */
.sad-session-grid { gap: 1rem; }

/* ── Session-complete celebration modal ── */
.sad-completion-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(28, 18, 16, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: sadFadeIn 0.3s ease-out;
}
.sad-completion-card {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem 1.5rem 1.6rem;
    text-align: center;
    max-width: 26rem;
    width: 100%;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.30);
    animation: sadCompletionEntry 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    border: 2px solid rgba(212, 98, 43, 0.18);
}
.sad-completion-icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sadIconFloat 2.5s ease-in-out infinite;
}
.sad-completion-icon svg { display: block; }
@keyframes sadIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.sad-completion-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 0.85rem;
    line-height: 1.1;
}
.sad-completion-mantra {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.sad-completion-mantra-line {
    display: block;
    font-style: italic;
    color: var(--saffron);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.sad-completion-mantra em {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: normal;
}
.sad-completion-stats {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
    margin-bottom: 1.5rem;
    background: rgba(22, 163, 74, 0.05);
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
}
.sad-completion-stat {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.sad-completion-stat-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.sad-completion-stat-text { flex: 1; min-width: 0; }
.sad-completion-stat strong {
    color: var(--success);
    font-weight: 700;
}

@keyframes sadFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes sadCompletionEntry {
    0% { transform: scale(0.85) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
    .sad-completion-card { padding: 1.5rem 1.2rem 1.3rem; }
    .sad-completion-icon { font-size: 3rem; }
    .sad-completion-title { font-size: 1.45rem; }
    .sad-completion-mantra { font-size: 0.92rem; }
    .sad-completion-stat { font-size: 0.84rem; }
}

/* ── "New version available" banner ── */
.sad-update-banner {
    position: fixed;
    /* Sits just below the sticky nav (which is ~3rem tall on mobile, ~3.5rem on desktop) */
    top: calc(env(safe-area-inset-top, 0px) + 4rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, var(--accent), #b32d40);
    color: #fff;
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 6px 22px rgba(199, 56, 79, 0.30);
    max-width: 92vw;
    animation: sadToastIn 0.25s ease-out;
}
.sad-update-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
svg.sad-update-icon { display: block; }
.sad-update-text { white-space: nowrap; }
.sad-update-btn {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 99px;
    padding: 0.3rem 0.75rem;
    font-weight: 700;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.sad-update-btn:hover { background: rgba(255, 255, 255, 0.30); }
@media (max-width: 480px) {
    .sad-update-text { font-size: 0.78rem; }
}

/* ── Toast ── */
.sad-toast-holder {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 1080;
    display: flex; flex-direction: column; gap: 0.5rem;
    pointer-events: none;
}
.sad-toast {
    background: #1c1210; color: #fff;
    padding: 0.65rem 1rem; border-radius: 0.55rem;
    font-size: 0.82rem; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    max-width: 22rem;
    pointer-events: auto;
    animation: sadToastIn 0.2s ease-out;
}
.sad-toast.error { background: var(--error); }
.sad-toast.success { background: var(--success); }
@keyframes sadToastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Responsive: comprehensive mobile pass (< 760 px) ── */
@media (max-width: 760px) {
    /* Wider container, tighter horizontal padding */
    .sad-container { padding: 0 0.85rem; }
    .sad-container-narrow { max-width: 100%; }
    .sad-view { padding: 1rem 0 2.5rem; }

    /* Sticky bottom-controls leave room — only applied in the session view.
       Tuned so the video is fully visible ABOVE the player card without overlap.
       Includes safe-area-inset-bottom for iPhones with a home indicator. */
    .sad-session-view { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

    /* ── Nav ── */
    .sad-nav-inner { padding: 0.4rem 0.85rem; min-height: 3rem; gap: 0.55rem; }
    .sad-logo { width: 2rem; height: 2rem; }
    .sad-brand { font-size: 1rem; }
    .sad-brand-sub { font-size: 0.62rem; letter-spacing: 1.5px; }

    /* ── Login card ── */
    .sad-card-hero { box-shadow: 0 6px 24px rgba(199, 56, 79, 0.10); }
    .sad-card-header { padding: 1.3rem 1.1rem; }
    .sad-card-body { padding: 1.1rem; }
    .sad-logo-circle { width: 4rem; height: 4rem; }
    .sad-title { font-size: 1.35rem; }
    .sad-subtitle { font-size: 0.82rem; }
    .sad-btn-lg { padding: 0.95rem 1.25rem; font-size: 0.92rem; }

    /* ── Sessions list — compact greeting (stacks vertically so long names fit) ── */
    .sad-greeting {
        flex-direction: column; align-items: flex-start; gap: 0.55rem;
        padding: 1.35rem 1.5rem; margin-bottom: 1rem;
    }
    .sad-greeting-name { font-size: 1.45rem; }
    .sad-badge { font-size: 0.6rem; padding: 0.25rem 0.55rem; }

    /* Section heading on its own line */
    .sad-section-header { flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-bottom: 0.75rem; }
    .sad-section-title { font-size: 0.95rem; }
    .sad-tz-note { font-size: 0.65rem; }

    /* Active banner — prominent and tap-friendly */
    .sad-active-banner {
        flex-direction: column; align-items: flex-start; gap: 0.85rem;
        padding: 0.95rem 1.1rem; margin-bottom: 1rem;
    }
    .sad-active-banner .sad-pulse-dot {
        position: absolute; top: 0.95rem; right: 0.95rem;
    }
    .sad-active-banner { position: relative; }
    .sad-active-title { font-size: 0.95rem; padding-right: 1.25rem; }
    .sad-active-sub { font-size: 0.75rem; }
    .sad-active-banner .sad-btn { width: 100%; min-height: 2.85rem; font-size: 0.95rem; }

    /* Session cards — taller, touch-friendly */
    .sad-sessions {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }
    .sad-session-card { padding: 1rem 1.1rem; }
    .sad-session-card-header { margin-bottom: 0.75rem; }
    .sad-session-name { font-size: 1rem; }
    .sad-session-time { font-size: 1.05rem; }
    .sad-session-status { font-size: 0.62rem; padding: 0.25rem 0.6rem; }
    .sad-session-countdown { font-size: 0.78rem; }
    .sad-session-actions .sad-btn { min-height: 2.6rem; font-size: 0.88rem; }

    /* ── Session view: compact header ── */
    .sad-session-header { margin-bottom: 0.65rem; }
    .sad-session-title { font-size: 1.4rem; }
    .sad-session-meta { font-size: 0.85rem; color: var(--text-secondary); }
    .sad-back { font-size: 0.9rem; padding: 0.5rem 0; margin-bottom: 0.4rem; min-height: 2.5rem; }

    /* State banner — bigger and more prominent on mobile */
    .sad-state-banner { padding: 1rem 1.1rem; margin-bottom: 0.9rem; gap: 0.85rem; }
    .sad-state-icon { width: 2.6rem; height: 2.6rem; font-size: 1.7rem; }
    .sad-state-label { font-size: 1.05rem; }
    .sad-state-sub { font-size: 0.85rem; }

    /* Video and PDF take a moderate share — leave room for participants below + sticky player */
    /* Cap video so the sticky player below + nav/header leaves no overlap. Uses dvh (dynamic
       viewport height) on modern browsers — accounts for the address bar appearing/disappearing
       on mobile Safari. Falls back to vh for older browsers. */
    .sad-video-wrap { max-height: 42vh; max-height: 42dvh; margin-bottom: 0.75rem; }
    .sad-video-stage { max-height: 42vh; max-height: 42dvh; }
    .sad-pdf-pill { padding: 0.7rem 0.85rem; margin-bottom: 0.85rem; min-height: 3rem; }
    .sad-pdf-pill-title { font-size: 0.9rem; }
    .sad-pdf-pill-meta { font-size: 0.68rem; }
    .sad-pdf-fs-header { padding: 0.6rem 0.85rem; gap: 0.5rem; }
    .sad-pdf-fs-status { display: none; }
    .sad-pdf-fs-close { width: 2.3rem; height: 2.3rem; }
    .sad-pdf-toolbar { padding: 0.5rem 0.7rem; }
    .sad-pdf-title { max-width: 11rem; font-size: 0.82rem; }
    .sad-video-caption { padding: 0.5rem 0.75rem; }
    .sad-video-caption-title { font-size: 0.85rem; }
    .sad-video-sync-badge { top: 0.45rem; left: 0.45rem; font-size: 0.62rem; padding: 0.25rem 0.55rem; }

    /* Language pills */
    .sad-pdf-lang { padding: 0.4rem 0.65rem; font-size: 0.74rem; min-height: 2.1rem; }
    .sad-pdf-lang-sub { font-size: 0.55rem; }

    /* ── Player card becomes a sticky bottom bar ── */
    .sad-session-grid { gap: 0.65rem; display: flex; flex-direction: column; }
    .sad-participants-card { order: 1; }
    .sad-player-card {
        order: 2;
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 40;
        border-radius: 1.1rem 1.1rem 0 0;
        border-bottom: 0;
        margin: 0;
        /* Cap so the video has space to be fully visible above the player card */
        max-height: 38vh;
        max-height: 38dvh;
        overflow-y: auto;
        box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.12), 0 -1px 0 var(--border-subtle);
        -webkit-overflow-scrolling: touch;
        background: #fff;
        /* Respect home-indicator area on iPhones — extends the card's background down into
           the safe area so content doesn't sit on top of the home indicator. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .sad-player-card::before {
        content: '';
        display: block;
        width: 2.5rem; height: 0.25rem;
        background: var(--border);
        border-radius: 99px;
        margin: 0.4rem auto 0;
    }
    .sad-player-card .sad-card-body { padding: 0.85rem 1rem 1.1rem; }

    /* Compact now-playing inside the sticky bar — grid: [icon] [title / counter stacked] */
    .sad-now-playing {
        padding: 0.55rem 0.85rem; margin-bottom: 0.6rem;
        text-align: left;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.65rem;
        row-gap: 0;
        align-items: center;
    }
    .sad-now-playing::before {
        content: '♪';
        font-size: 1.2rem; color: var(--accent);
        grid-row: 1 / span 2;
        align-self: center;
    }
    .sad-np-label { display: none; }
    .sad-np-title {
        font-size: 0.92rem; margin: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        grid-column: 2; grid-row: 1;
    }
    .sad-np-counter {
        font-size: 0.68rem;
        grid-column: 2; grid-row: 2;
        margin-top: 0;
    }

    /* Compact progress */
    .sad-progress { margin: 0.45rem 0 0.75rem; }
    .sad-progress-bar { height: 0.32rem; }
    .sad-progress-times { font-size: 0.68rem; margin-top: 0.3rem; }

    /* Bigger, hand-friendly action button */
    .sad-player-actions .sad-btn { min-height: 2.85rem; font-size: 0.92rem; font-weight: 700; }

    /* Synced notice — slightly tighter */
    .sad-synced-notice { font-size: 0.72rem; padding: 0.55rem 0.7rem; }

    /* Playlist — capped so the bar stays compact; user can scroll inside */
    .sad-playlist { margin-top: 0.7rem; }
    .sad-playlist-list { max-height: 8rem; overflow-y: auto; }
    .sad-playlist-list li { padding: 0.45rem 0.55rem; font-size: 0.76rem; }
    .sad-section-subhead { font-size: 0.65rem; }

    /* ── Participants — compact horizontal-friendly list ── */
    .sad-participants-card { box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
    .sad-participants-card .sad-card-body { padding: 0.85rem 1rem; }
    .sad-participants-header { margin-bottom: 0.4rem; }
    .sad-participants-list { max-height: 12rem; }
    .sad-participants-list li { padding: 0.45rem 0; }
    .sad-participant-avatar { width: 1.7rem; height: 1.7rem; font-size: 0.68rem; }
    .sad-participant-name { font-size: 0.82rem; }
    .sad-participant-badge { font-size: 0.55rem; padding: 0.1rem 0.4rem; }

    /* Attendance section */
    .sad-attendance { margin-top: 1.25rem; }
    .sad-attendance-item { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
    .sad-attendance-when { line-height: 1.3; }

    /* ── Login + form views ── */
    .sad-login-choice { gap: 0.5rem; }
    .sad-picker-item { padding: 0.95rem 1rem; }
    .sad-picker-avatar { width: 2.5rem; height: 2.5rem; font-size: 0.95rem; }
    .sad-picker-name { font-size: 0.95rem; }
    .sad-input { padding: 0.85rem 0.9rem; font-size: 1rem; min-height: 2.85rem; }
    .sad-btn { min-height: 2.6rem; }
    .sad-btn-block { padding: 0.85rem 1rem; font-size: 0.92rem; }

    /* Toasts on mobile sit above the sticky player */
    .sad-toast-holder { bottom: 5.5rem; right: 0.85rem; left: 0.85rem; }
    .sad-toast { max-width: 100%; font-size: 0.85rem; padding: 0.7rem 1rem; }
}

/* Very small phones (e.g. iPhone SE) */
@media (max-width: 380px) {
    .sad-container { padding: 0 0.7rem; }
    .sad-card-body { padding: 1rem; }
    .sad-title { font-size: 1.2rem; }
    .sad-session-time { font-size: 0.95rem; }
    .sad-active-banner { padding: 0.85rem 0.95rem; }
}

/* ============================================================================
   SESSION VIEW — MOBILE REDESIGN
   Layout: header → video → status row → tabs → tab panel (scrolls) → sticky bottom action bar
   Tabs are mobile-only; on desktop the playlist + participants render as a 2-col grid.
   ============================================================================ */

/* Status row: connected pill + PDF button side by side */
.sad-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin: 0.75rem 0 1rem;
}
.sad-status-row .sad-joined-bar,
.sad-status-row .sad-pdf-pill {
    margin: 0;             /* override any default margin */
    flex: 1 1 auto;
    min-width: 0;
}
.sad-status-row .sad-pdf-pill { min-height: 2.5rem; }
/* Hide the row when both children are hidden — done via JS to support browsers without :has() */

/* Mobile tab nav — visible only below 760px; hidden on desktop */
.sad-tabs {
    display: none;
    gap: 0.3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 0.75rem;
    padding: 0.3rem;
    margin: 0 0 1rem;
    position: sticky;
    top: 0;
    z-index: 30;
}
.sad-tab-btn {
    flex: 1 1 50%;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.65rem 0.5rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    min-height: 2.65rem;
    position: relative;
}
.sad-tab-btn .sad-tab-icon { flex-shrink: 0; }
.sad-tab-btn svg.sad-tab-icon { display: block; }
.sad-tab-btn .sad-tab-label { white-space: nowrap; }
.sad-tab-btn .sad-tab-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 99px;
    min-width: 1.2rem;
    text-align: center;
    transition: background 0.2s;
}
.sad-tab-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(199, 56, 79, 0.25);
}
.sad-tab-btn.active .sad-tab-badge { background: rgba(255, 255, 255, 0.25); color: #fff; }

/* Sticky bottom action bar — Join/Leave always reachable on mobile */
.sad-bottom-actions {
    display: none;
}
.sad-bottom-actions .sad-btn { margin: 0; }
.sad-bottom-actions .sad-btn-jumbo {
    padding: 0.95rem 1.25rem !important;
    font-size: 1.02rem !important;
    min-height: 3.1rem;
}

/* Tighter session header on mobile */
@media (max-width: 760px) {
    .sad-session-view {
        /* leave room at the bottom for the sticky action bar — exact height adjusted below */
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }
    .sad-session-container { padding-bottom: 0.25rem; }
    .sad-session-header { margin-bottom: 0.6rem; }
    .sad-session-title { font-size: 1.2rem; }
    .sad-session-meta { font-size: 0.74rem; }
    .sad-back {
        font-size: 0.78rem; padding: 0.35rem 0.6rem;
        background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 99px;
        margin-bottom: 0.5rem;
    }

    /* Show the tab nav, hide all but the active panel */
    .sad-tabs { display: flex; }
    .sad-session-grid {
        display: block !important;     /* stack vertically instead of grid */
        gap: 0;
    }
    .sad-tab-panel { display: none; }
    .sad-tab-panel.active { display: block; }
    .sad-tab-panel + .sad-tab-panel { margin-top: 0; }

    /* Tab panels become flush cards — no extra outer padding eating space */
    .sad-session-grid > .sad-card { margin: 0; }

    /* Override the OLD mobile design that pinned player-card to bottom — the new layout
       puts Join/Leave in a dedicated action bar and lets the card flow inline. */
    .sad-player-card {
        position: static !important;
        max-height: none !important;
        overflow-y: visible !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
        border-radius: 1rem !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        order: initial !important;
        left: auto !important; right: auto !important; bottom: auto !important;
    }
    .sad-player-card::before { display: none !important; }      /* hide the old grab-handle */

    /* Restore the centered "Now Playing" layout on mobile (old design squeezed it into a grid) */
    .sad-now-playing {
        display: block;
        text-align: center;
        padding: 0.95rem 0.8rem;
        margin-bottom: 0.75rem;
    }
    .sad-now-playing::before { content: none; }
    .sad-np-label { display: block; }
    .sad-np-title { font-size: 1.05rem; white-space: normal; }
    .sad-np-counter { font-size: 0.72rem; margin-top: 0.3rem; }

    /* Let the participant & playlist lists grow inside the tab panel instead of being capped at 8/12rem */
    .sad-playlist-list { max-height: none !important; }
    .sad-participants-list { max-height: none !important; }
    .sad-participants-card { order: initial !important; }

    /* Show the sticky bottom action bar */
    .sad-bottom-actions {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(180deg, rgba(255, 248, 230, 0) 0%, rgba(255, 248, 230, 0.92) 22%, rgba(255, 248, 230, 0.98) 100%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--border-subtle);
    }

    /* Video sized so it never blocks the content tabs/scrollable area */
    .sad-video-wrap { margin-bottom: 0.5rem; }
    .sad-video-stage { max-height: 38vh; max-height: 38dvh; }

    /* Tighten card padding for more usable space */
    .sad-session-view .sad-card-body { padding: 0.85rem 0.9rem; }
    .sad-now-playing { padding: 0.85rem 0.75rem; margin-bottom: 0.65rem; }
    .sad-np-title { font-size: 1.05rem; }
    .sad-np-counter { font-size: 0.72rem; }
    .sad-progress { margin: 0.65rem 0 0.85rem; }
    .sad-playlist { margin-top: 0.85rem; }
    .sad-playlist-list { display: flex; flex-direction: column; gap: 0.3rem; }
    .sad-playlist-list li { padding: 0.55rem 0.7rem; font-size: 0.85rem; }

    /* Participant list — let it grow with the panel instead of capping at 24rem */
    .sad-participants-list { max-height: none; }

    /* State banner more compact on mobile (only shown waiting/connecting/ended) */
    .sad-state-banner { padding: 0.85rem 0.95rem; gap: 0.65rem; margin-bottom: 0.7rem; }
    .sad-state-icon { font-size: 1.75rem; }
    .sad-state-label { font-size: 1rem; }
    .sad-state-sub { font-size: 0.78rem; }

    /* Status row: stack only if both items wrap (default still tries side-by-side) */
    .sad-status-row { margin: 0.6rem 0 0.75rem; gap: 0.45rem; }
    .sad-joined-bar { padding: 0.45rem 0.8rem; font-size: 0.76rem; }
    .sad-pdf-pill { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
    .sad-pdf-pill-meta { display: none; }   /* save vertical space — title is enough on mobile */

    /* Toasts above the sticky action bar */
    .sad-toast-holder { bottom: 7rem; }

    /* PDF reader gets a little extra bottom padding so close button isn't covered by phone gesture bar */
    .sad-pdf-fullscreen { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* On desktop we keep the old side-by-side grid and the bottom action bar disappears */
@media (min-width: 761px) {
    .sad-tabs { display: none; }
    .sad-tab-panel { display: block !important; }
    .sad-bottom-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
        position: static;
        background: none;
        border: none;
        padding: 0;
    }
    .sad-bottom-actions .sad-btn { max-width: 22rem; align-self: center; }
}

/* iPhone landscape — video gets even smaller, content has more room */
@media (max-width: 900px) and (orientation: landscape) {
    .sad-video-stage { max-height: 60dvh; }
    .sad-session-header { margin-bottom: 0.35rem; }
    .sad-session-title { font-size: 1.05rem; }
}

/* Native fullscreen on a <video> element (iOS Safari, Chrome, all modern browsers).
   When the video itself is fullscreened (rather than the wrap div), our CSS-overlay
   tricks don't apply — the browser shows native controls. We accept this trade-off
   so users get device rotation; the playback-sync loop in player.js re-snaps the
   time if someone tries to seek. */
.sad-video-el:fullscreen,
.sad-video-el:-webkit-full-screen { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ============================================================================
   TEXT-COMPANION (read-along for tracks that have plain text attached)
   Pill button in status row + fullscreen reader with adjustable font size.
   ============================================================================ */
.sad-text-pill {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(196, 146, 21, 0.10), rgba(212, 98, 43, 0.06));
    border: 1px solid rgba(196, 146, 21, 0.28);
    border-radius: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.sad-text-pill:hover {
    background: linear-gradient(135deg, rgba(196, 146, 21, 0.16), rgba(212, 98, 43, 0.10));
    border-color: rgba(196, 146, 21, 0.45);
}
.sad-text-pill:active { transform: scale(0.995); }
.sad-text-pill-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; color: var(--saffron); }
svg.sad-text-pill-icon { display: block; }
.sad-text-pill-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.sad-text-pill-title {
    font-weight: 700;
    font-size: 0.93rem;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sad-text-pill-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Status row sizing on mobile */
.sad-status-row .sad-text-pill { margin: 0; flex: 1 1 auto; min-width: 0; min-height: 2.5rem; }
@media (max-width: 760px) {
    .sad-text-pill { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
    .sad-text-pill-meta { display: none; }
}

/* Fullscreen text reader */
.sad-text-fullscreen {
    position: fixed; inset: 0;
    background: linear-gradient(180deg, #FAF8F6 0%, #FFFAF3 100%);
    z-index: 1000;
    display: flex; flex-direction: column;
    animation: sadTextFsEnter 0.22s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sad-text-fullscreen.hidden { display: none; }
@keyframes sadTextFsEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sad-text-fs-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.sad-text-fs-icon { color: var(--saffron); flex-shrink: 0; }
svg.sad-text-fs-icon { display: block; }
.sad-text-fs-title-wrap { flex: 1; min-width: 0; }
.sad-text-fs-label {
    font-size: 0.62rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.5px;
}
.sad-text-fs-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700; font-size: 1rem;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sad-text-fs-size-btn {
    flex-shrink: 0;
    width: 2.25rem; height: 2.25rem;
    border: 1px solid var(--border-subtle);
    background: #fff;
    border-radius: 0.5rem;
    font-family: inherit; font-weight: 700; font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sad-text-fs-size-btn:hover { border-color: var(--accent); color: var(--accent); }
.sad-text-fs-close {
    flex-shrink: 0;
    width: 2.25rem; height: 2.25rem;
    border: 1px solid var(--border-subtle);
    background: #fff;
    border-radius: 0.5rem;
    font-family: inherit; font-weight: 700; font-size: 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1;
}
.sad-text-fs-close:hover { color: var(--red); border-color: var(--red); }
.sad-text-fs-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: 1.6rem 1.4rem 3rem;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    color: #2A1E18;
    -webkit-overflow-scrolling: touch;
    max-width: 42rem;
    width: 100%;
    margin: 0 auto;
}
.sad-text-fs-body p {
    margin: 0 0 1.1em;
    text-align: left;
}
.sad-text-fs-body p:first-child::first-letter {
    font-family: 'Outfit', serif;
    font-weight: 700;
    font-size: 2.4em;
    float: left;
    line-height: 0.9;
    margin: 0.05em 0.12em 0 0;
    color: var(--accent);
}
@media (max-width: 480px) {
    .sad-text-fs-header { padding: 0.7rem 0.85rem; gap: 0.5rem; }
    .sad-text-fs-title { font-size: 0.9rem; }
    .sad-text-fs-size-btn { width: 2rem; height: 2rem; font-size: 0.72rem; }
    .sad-text-fs-close { width: 2rem; height: 2rem; }
    .sad-text-fs-body { padding: 1.2rem 1.1rem 2.5rem; }
}

/* ============================================================================
   PERSONAL SADHANA — stunning home cards + fullscreen chant session view
   ============================================================================ */

/* ── Section headers — calm, consistent across Personal / Collective / Attendance.
   A single quiet style with a subtle color-coded left accent so the page reads as
   one clean system instead of three competing gradient banners. ── */
.psd-hero {
    margin: 2rem 0 1rem;
    text-align: left;
    padding-left: 0.8rem;
    border-left: 3px solid var(--crimson, #C7384F);   /* Personal Sadhana accent (default) */
}
.psd-hero-head { display: flex; align-items: center; gap: 0.5rem; }
.psd-hero-ic { display: inline-flex; flex-shrink: 0; color: var(--crimson, #C7384F); }
.psd-hero-ic svg { display: block; }
.psd-hero-collective .psd-hero-ic { color: #D4622B; }
.psd-hero-attendance .psd-hero-ic { color: #2D7D8A; }
.psd-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    line-height: 1.2;
    /* calm solid title — no gradient fill */
    background: none;
    -webkit-text-fill-color: currentColor;
}
.psd-hero-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.45;
    max-width: 42rem;
}
.psd-hero-sub strong { color: var(--text-secondary); font-weight: 700; }
/* Per-section accent colour on the left bar (subtle wayfinding, not loud) */
.psd-hero-collective { border-left-color: #D4622B; }
.psd-hero-attendance { border-left-color: #2D7D8A; }
.psd-hero-collective .psd-hero-title,
.psd-hero-attendance .psd-hero-title { background: none; -webkit-text-fill-color: currentColor; color: var(--text-primary); }
.psd-hero-sub-tz { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; line-height: 1.4; }
@media (max-width: 480px) {
    .psd-hero { margin: 1.5rem 0 0.85rem; }
    .psd-hero-title { font-size: 1.18rem; }
    .psd-hero-sub { font-size: 0.78rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Upcoming Events — compact list with a countdown to the next event
   ───────────────────────────────────────────────────────────────────────────── */
.uev-section { margin: 0 0 1.4rem 0; }
/* Header is a full-width toggle button */
.uev-head {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; background: none; border: none; cursor: pointer;
    padding: 0; margin: 0 0 0.7rem 0; font-family: inherit; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.uev-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800;
    color: var(--text-primary); letter-spacing: -0.2px;
}
.uev-title svg { color: var(--accent); }
.uev-toggle-hint {
    margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
    white-space: nowrap;
}
.uev-chevron { color: var(--text-muted); flex-shrink: 0; transition: transform 0.25s ease; }
.uev-section:not(.is-collapsed) .uev-chevron { transform: rotate(180deg); }
.uev-list { display: flex; flex-direction: column; gap: 0.6rem; }
.uev-extra { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
/* Collapsed = hide everything past the first (next) event */
.uev-section.is-collapsed .uev-extra { display: none; }

.uev-card {
    position: relative;
    display: flex; align-items: center; gap: 0.9rem;
    background: #fff;
    border: 1px solid rgba(28, 18, 16, 0.08);
    border-radius: 0.9rem;
    padding: 0.8rem 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
/* The soonest event is highlighted with a warm gradient frame */
.uev-card.is-next {
    border-color: rgba(199, 56, 79, 0.30);
    background: linear-gradient(135deg, rgba(199,56,79,0.05), rgba(212,98,43,0.06));
    box-shadow: 0 4px 16px rgba(199, 56, 79, 0.08);
}
/* Calendar-tile style date block */
.uev-date {
    flex-shrink: 0; width: 3.2rem; text-align: center;
    background: linear-gradient(135deg, #6B1320 0%, #C7384F 60%, #D4622B 100%);
    color: #fff; border-radius: 0.6rem; padding: 0.4rem 0.2rem 0.45rem;
    box-shadow: 0 4px 12px rgba(199, 56, 79, 0.25);
}
.uev-date-mon { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: 0.92; }
.uev-date-day { font-family: 'Outfit', sans-serif; font-size: 1.35rem; font-weight: 800; line-height: 1; margin-top: 1px; }
.uev-info { flex: 1; min-width: 0; }
.uev-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text-primary); line-height: 1.2; }
.uev-when { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.15rem; }
.uev-note { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.2rem; }
.uev-countdown {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-top: 0.3rem; font-size: 0.7rem; font-weight: 800;
    color: var(--accent); letter-spacing: 0.2px;
}
.uev-countdown.is-live { color: #0F766E; }
.uev-countdown-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.uev-countdown.is-live .uev-countdown-dot { animation: uevPulse 1.4s ease-in-out infinite; }
@keyframes uevPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.uev-actions { display: flex; flex-direction: column; gap: 0.35rem; flex-shrink: 0; }
.uev-btn {
    display: inline-flex; align-items: center; gap: 0.3rem; justify-content: center;
    padding: 0.4rem 0.7rem; border-radius: 0.5rem;
    font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
    text-decoration: none; white-space: nowrap; border: 1px solid transparent;
    transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
}
.uev-btn:active { transform: translateY(1px); }
.uev-btn-join {
    background: linear-gradient(135deg, #065F46 0%, #0F766E 100%);
    color: #fff; box-shadow: 0 3px 10px rgba(15, 118, 110, 0.28);
}
.uev-btn-info {
    background: #fff; color: var(--accent); border-color: rgba(199, 56, 79, 0.3);
}
.uev-empty { font-size: 0.82rem; color: var(--text-muted); font-style: italic; padding: 0.4rem 0; }

@media (max-width: 600px) {
    .uev-card { gap: 0.7rem; padding: 0.7rem 0.8rem; flex-wrap: wrap; }
    .uev-date { width: 2.9rem; }
    .uev-name { font-size: 0.92rem; }
    .uev-actions { flex-direction: row; width: 100%; margin-top: 0.2rem; }
    .uev-btn { flex: 1; }
}

.psd-section { margin-bottom: 1.4rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   Monthly Collective Sadhana — quarterly group practice signups (Ritwiks only)
   ───────────────────────────────────────────────────────────────────────────── */
.mcs-section {
    margin: 0 0 1.5rem 0;
    background: linear-gradient(135deg, rgba(199,56,79,0.04) 0%, rgba(212,98,43,0.06) 50%, rgba(196,146,21,0.04) 100%);
    border: 1px solid rgba(199, 56, 79, 0.18);
    border-radius: 1.2rem;
    padding: 1.3rem 1.4rem 1.2rem;
    box-shadow: 0 6px 24px rgba(199, 56, 79, 0.06);
}
/* Clickable collapse header */
.mcs-collapse-head {
    display: flex; align-items: center; gap: 0.7rem;
    width: 100%; background: none; border: none; cursor: pointer;
    padding: 0; font-family: inherit; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.mcs-collapse-titles { flex: 1; min-width: 0; }
.mcs-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem; font-weight: 800;
    background: linear-gradient(135deg, #6B1320 0%, #C7384F 50%, #D4622B 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: -0.4px; line-height: 1.15;
}
.mcs-collapse-hint { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-top: 0.15rem; }
.mcs-chevron { color: var(--accent); flex-shrink: 0; transition: transform 0.25s ease; }
.mcs-section:not(.collapsed) .mcs-chevron { transform: rotate(180deg); }
/* Collapsed body hidden; expanded body gets a little breathing room from the header */
.mcs-body { margin-top: 1rem; }
.mcs-section.collapsed .mcs-body { display: none; }
.mcs-sub {
    font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5;
    max-width: 38rem; margin-bottom: 1rem;
}
.mcs-sub strong { color: var(--text-primary); font-weight: 700; }
.mcs-status-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.8rem; border-radius: 99px;
    font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.8px;
    background: linear-gradient(135deg, #065F46 0%, #0F766E 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.28);
}
.mcs-status-badge.is-partial {
    background: linear-gradient(135deg, #C49215 0%, #D4622B 100%);
    box-shadow: 0 4px 14px rgba(212, 98, 43, 0.28);
}
.mcs-status-badge svg { display: inline-block; }

.mcs-events { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }

.mcs-event-card {
    background: #fff;
    border: 1px solid rgba(28, 18, 16, 0.08);
    border-radius: 0.9rem;
    padding: 0.95rem 1.05rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem 1rem;
    align-items: center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mcs-event-card.is-set { border-color: rgba(15, 118, 110, 0.35); box-shadow: 0 2px 10px rgba(15, 118, 110, 0.08); }
.mcs-event-card.is-set.is-zoom { border-color: rgba(212, 98, 43, 0.35); box-shadow: 0 2px 10px rgba(212, 98, 43, 0.08); }
.mcs-event-card.is-set.is-awareness { border-color: rgba(196, 146, 21, 0.35); box-shadow: 0 2px 10px rgba(196, 146, 21, 0.08); }

.mcs-event-info { min-width: 0; }
.mcs-event-date {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.02rem;
    color: var(--text-primary); line-height: 1.2;
}
.mcs-event-when { font-size: 0.74rem; color: var(--text-secondary); margin-top: 0.1rem; }
.mcs-event-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.15rem; font-weight: 600; }

.mcs-select-wrap { position: relative; min-width: 13rem; }
.mcs-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 100%;
    background: #fff;
    border: 1.5px solid rgba(28, 18, 16, 0.16);
    border-radius: 0.55rem;
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    font-family: inherit; font-size: 0.82rem; font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s;
}
.mcs-select:hover { border-color: rgba(199, 56, 79, 0.45); }
.mcs-select:focus { border-color: var(--accent); outline: none; }
.mcs-select-wrap::after {
    content: ''; position: absolute; top: 50%; right: 0.85rem; pointer-events: none;
    width: 0.4rem; height: 0.4rem;
    border-right: 1.8px solid var(--text-muted);
    border-bottom: 1.8px solid var(--text-muted);
    transform: translateY(-65%) rotate(45deg);
}

.mcs-actions {
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap;
}
.mcs-save-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: linear-gradient(135deg, #C7384F 0%, #D4622B 100%);
    color: #fff; border: none;
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.88rem;
    border-radius: 0.6rem; cursor: pointer;
    box-shadow: 0 4px 14px rgba(199, 56, 79, 0.32);
    transition: transform 0.1s, box-shadow 0.2s, opacity 0.2s;
}
.mcs-save-btn:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(199, 56, 79, 0.42); }
.mcs-save-btn:active:not(:disabled) { transform: translateY(1px); }
.mcs-save-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.mcs-save-btn.is-saved {
    background: linear-gradient(135deg, #065F46 0%, #0F766E 100%);
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.32);
}
.mcs-save-icon { display: inline-flex; }

.mcs-msg { font-size: 0.78rem; color: var(--text-muted); }
.mcs-msg.is-success { color: #065F46; font-weight: 600; }
.mcs-msg.is-error { color: var(--accent); font-weight: 600; }

@media (max-width: 600px) {
    .mcs-section { padding: 1.05rem 1.05rem 1rem; border-radius: 1rem; }
    .mcs-title { font-size: 1.2rem; }
    .mcs-sub { font-size: 0.78rem; }
    .mcs-event-card { grid-template-columns: 1fr; gap: 0.55rem; padding: 0.85rem 0.95rem; }
    .mcs-event-card .mcs-select-wrap { min-width: 0; width: 100%; }
    .mcs-event-date { font-size: 0.95rem; }
    .mcs-save-btn { width: 100%; justify-content: center; }
    .mcs-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}

/* ── Cards: gradient surfaces, subtle deity mark, big today number ── */
.psd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem; }
@media (max-width: 720px) { .psd-cards { grid-template-columns: 1fr; } }

.psd-card {
    position: relative;
    border-radius: 1.4rem;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(199, 56, 79, 0.08), 0 2px 6px rgba(0,0,0,0.04);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    isolation: isolate;
}
.psd-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(199, 56, 79, 0.14), 0 4px 10px rgba(0,0,0,0.05); }
.psd-card-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 98, 43, 0.25), transparent 70%);
    pointer-events: none; z-index: 0;
    opacity: 0.9;
}
.psd-card-ganapati { background: linear-gradient(160deg, #FFF8EE 0%, #FFE8C7 60%, #FFCC8A 100%); }
.psd-card-ganapati .psd-card-glow { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 98, 43, 0.28), transparent 70%); }
.psd-card-chandi { background: linear-gradient(160deg, #FFF1E6 0%, #FFD1B0 60%, #F49B7A 100%); }
.psd-card-chandi .psd-card-glow { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(199, 56, 79, 0.28), transparent 70%); }
.psd-card-body {
    position: relative; z-index: 1;
    padding: 1.4rem 1.2rem 1.2rem;
    display: flex; flex-direction: column;
}
.psd-card-mark {
    position: absolute; top: 1.05rem; right: 1.1rem;
    color: var(--accent);
    opacity: 0.45;
}
.psd-card-mark svg { display: block; }
.psd-card-ganapati .psd-card-mark { color: #C49215; }
.psd-card-chandi .psd-card-mark { color: var(--crimson); }
.psd-card-deity {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.4px;
    line-height: 1;
    margin-bottom: 0.85rem;
}
.psd-card-ganapati .psd-card-deity { color: #6B3617; }
.psd-card-chandi .psd-card-deity { color: #6B1320; }

.psd-card-headline {
    display: flex; align-items: baseline; gap: 0.2rem;
    font-family: 'Outfit', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-bottom: 0.1rem;
}
.psd-card-today {
    font-size: 3.3rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -2px;
}
.psd-card-divider { font-size: 2rem; font-weight: 500; color: var(--text-muted); margin: 0 0.25rem; }
.psd-card-target { font-size: 1.4rem; font-weight: 600; color: var(--text-muted); }
.psd-card-today-label {
    font-size: 0.62rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 2px;
    margin-bottom: 0.85rem;
}

.psd-progress {
    height: 0.55rem;
    background: rgba(60, 30, 15, 0.10);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 0.8rem;
}
.psd-progress-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--saffron), var(--crimson));
    border-radius: 99px;
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(199, 56, 79, 0.4);
}
.psd-progress.complete .psd-progress-fill {
    background: linear-gradient(90deg, #16a34a, #22c55e);
    box-shadow: 0 0 14px rgba(22, 163, 74, 0.45);
}

.psd-card-done-badge {
    display: none;
    align-items: center; gap: 0.35rem;
    align-self: flex-start;
    padding: 0.32rem 0.7rem;
    background: rgba(22, 163, 74, 0.16);
    color: #16a34a;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    animation: psdBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.psd-card-done-badge.visible { display: inline-flex; }
.psd-card-done-badge svg { display: block; }
@keyframes psdBadgePop {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.psd-card-meta { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.psd-card-meta-item { display: flex; flex-direction: column; min-width: 0; }
.psd-card-meta-label { font-size: 0.6rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.3px; }
.psd-card-meta-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem; font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.psd-card-meta-of { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); margin-left: 1px; }

/* The big chant CTA */
.psd-chant-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    width: 100%;
    padding: 0.95rem 1.1rem;
    background: linear-gradient(135deg, var(--saffron) 0%, var(--crimson) 100%);
    color: #fff;
    border: none;
    border-radius: 0.85rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(199, 56, 79, 0.34);
    transition: transform 0.14s ease, box-shadow 0.2s ease;
    min-height: 3.1rem;
    letter-spacing: 0.3px;
    overflow: hidden;
}
.psd-chant-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(199, 56, 79, 0.42); }
.psd-chant-btn:active { transform: translateY(0); }
.psd-chant-btn svg { display: block; flex-shrink: 0; position: relative; z-index: 1; }
.psd-chant-btn span:not(.psd-chant-btn-ripple) { position: relative; z-index: 1; }
.psd-chant-btn-ripple {
    position: absolute; inset: -50%;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.16), transparent);
    transform: translateX(-100%);
    animation: psdBtnRipple 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes psdBtnRipple {
    0%, 70% { transform: translateX(-100%); }
    100%    { transform: translateX(100%); }
}

/* Community totals strip below cards */
.psd-global-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; justify-content: center; }
.psd-global-strip:empty { display: none; }
.psd-global-pill {
    padding: 0.4rem 0.95rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(212, 98, 43, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 99px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.psd-global-pill strong { color: var(--accent); font-weight: 700; }

/* ── Chant session — fullscreen immersive view ── */
.psd-session {
    position: fixed; inset: 0;
    z-index: 1100;
    display: flex; flex-direction: column;
    color: #fff;
    overflow: hidden;
    animation: psdSessionEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.psd-session.hidden { display: none; }
@keyframes psdSessionEnter {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}
.psd-session-bg {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(circle at 30% 20%, #F49B7A 0%, #C7384F 35%, #6B1320 100%);
}
.psd-session-bg[data-chant="ganapati"] {
    background: radial-gradient(circle at 30% 20%, #FFD78A 0%, #D4622B 40%, #6B3617 100%);
}
.psd-session-bg::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0,0,0,0.45), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.12), transparent 60%);
}
.psd-session-header {
    position: relative; z-index: 2;
    display: flex; align-items: center;
    padding: env(safe-area-inset-top, 0.5rem) 1.1rem 0.6rem;
    padding-top: max(env(safe-area-inset-top, 0px), 0.85rem);
}
.psd-session-close {
    width: 2.5rem; height: 2.5rem;
    background: rgba(0,0,0,0.25);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 50%;
    font-size: 1.25rem; font-family: inherit; font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s, transform 0.1s;
}
.psd-session-close:hover { background: rgba(0,0,0,0.36); }
.psd-session-close:active { transform: scale(0.93); }
.psd-session-deity {
    flex: 1; text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem; font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.psd-session-spacer { width: 2.5rem; }

.psd-session-stage {
    position: relative; z-index: 2;
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 1.5rem 1.25rem;
    gap: 0.85rem;
    text-align: center;
}
.psd-mandala {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.8);
    pointer-events: none;
    opacity: 0.4;
}
.psd-mandala svg { display: block; animation: psdMandalaSpin 60s linear infinite; }
.psd-session.chanting .psd-mandala { opacity: 0.7; }
.psd-session.chanting .psd-mandala-ring.r1 { animation: psdMandalaSpin 40s linear infinite; transform-origin: center; }
.psd-session.chanting .psd-mandala-ring.r2 { animation: psdMandalaSpin 30s linear infinite reverse; transform-origin: center; transform-box: fill-box; }
.psd-session.chanting .psd-mandala-ring.r3 { animation: psdMandalaSpin 20s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes psdMandalaSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.psd-session-count {
    position: relative; z-index: 1;
    display: flex; align-items: baseline; gap: 0.2rem;
    font-family: 'Outfit', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 4px 16px rgba(0,0,0,0.30);
}
.psd-session-count-num { font-size: 5.5rem; font-weight: 800; letter-spacing: -3px; color: #fff; }
.psd-session-count-sep { font-size: 3rem; color: rgba(255,255,255,0.55); margin: 0 0.45rem; }
.psd-session-count-total { font-size: 2rem; color: rgba(255,255,255,0.75); font-weight: 600; }
.psd-session-count-bar {
    position: relative; z-index: 1;
    width: min(280px, 70%);
    height: 0.5rem;
    background: rgba(255,255,255,0.18);
    border-radius: 99px;
    overflow: hidden;
}
.psd-session-count-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, #FFD78A, #fff, #FFD78A);
    border-radius: 99px;
    box-shadow: 0 0 14px rgba(255,255,255,0.55);
    transition: width 0.4s ease;
}
.psd-session-phase {
    position: relative; z-index: 1;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.88);
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0,0,0,0.30);
    letter-spacing: 0.4px;
}

.psd-session-footer {
    position: relative; z-index: 2;
    padding: 1rem 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.psd-session-summary {
    display: flex; justify-content: space-around;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.85rem;
    padding: 0.7rem 0.85rem;
}
.psd-session-summary-item { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex: 1; }
.psd-session-summary-label {
    font-size: 0.6rem; font-weight: 700;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase; letter-spacing: 1.4px;
}
.psd-session-summary-value {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem; font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ── Resource strip (Preamble + Documents buttons above the chant cards) ── */
.psd-resources { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.95rem; }
.psd-resources:empty { display: none; }
.psd-resource-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    background: rgba(255, 255, 255, 0.72);
    color: var(--accent);
    border: 1px solid rgba(212, 98, 43, 0.22);
    border-radius: 99px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.psd-resource-btn[hidden] { display: none !important; }
.psd-resource-btn:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.9); }
.psd-resource-btn:active { transform: scale(0.98); }
.psd-resource-btn svg { display: block; flex-shrink: 0; }
a.psd-resource-btn { text-decoration: none; }

/* ── Add manually link below Begin Chant on each card ── */
.psd-manual-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    margin-top: 0.45rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px dashed rgba(212, 98, 43, 0.30);
    border-radius: 0.6rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.psd-manual-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(212, 98, 43, 0.05); }
.psd-manual-btn:active { transform: scale(0.99); }
.psd-manual-btn svg { display: block; flex-shrink: 0; }

/* ── Generic centered modal (manual entry + documents list) ── */
.psd-modal {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(28, 18, 16, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
    animation: psdModalFade 0.18s ease-out;
}
.psd-modal.hidden { display: none; }
@keyframes psdModalFade { from { opacity: 0; } to { opacity: 1; } }
.psd-modal-card {
    position: relative;
    background: #fff;
    border-radius: 1.1rem;
    padding: 1.4rem 1.25rem 1.1rem;
    width: 100%;
    max-width: 22rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.30);
    animation: psdModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.psd-modal-card-wide { max-width: 28rem; }
/* Monthly Collective registration modal — wider + scrolls if many events */
.mcs-modal-card { max-width: 30rem; max-height: 86vh; overflow-y: auto; }

/* ── Monthly Collective — compact home-page entry button ── */
.mcs-entry {
    width: 100%;
    display: flex; align-items: center; gap: 0.8rem;
    margin: 0 0 1.4rem 0;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, rgba(199,56,79,0.06), rgba(212,98,43,0.07));
    border: 1px solid rgba(199, 56, 79, 0.22);
    border-radius: 0.9rem;
    cursor: pointer; font-family: inherit; text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.mcs-entry:hover { border-color: rgba(199, 56, 79, 0.4); box-shadow: 0 4px 16px rgba(199, 56, 79, 0.10); }
.mcs-entry:active { transform: translateY(1px); }
.mcs-entry.hidden { display: none; }
.mcs-entry-ic {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 0.7rem;
    background: linear-gradient(135deg, #6B1320, #C7384F 60%, #D4622B);
    color: #fff; box-shadow: 0 4px 12px rgba(199, 56, 79, 0.28);
}
.mcs-entry-text { flex: 1; min-width: 0; }
.mcs-entry-title { display: block; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.98rem; color: var(--text-primary); line-height: 1.2; }
.mcs-entry-status { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 0.12rem; font-weight: 600; }
.mcs-entry.is-complete .mcs-entry-status { color: #0F766E; }
.mcs-entry.is-partial .mcs-entry-status { color: #C2410C; }
.mcs-entry-badge {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.28rem 0.6rem; border-radius: 99px;
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
    background: linear-gradient(135deg, #065F46, #0F766E); color: #fff;
}
.mcs-entry-badge.hidden { display: none; }
.mcs-entry-badge.is-partial { background: linear-gradient(135deg, #C49215, #D4622B); }
.mcs-entry-badge svg { display: block; }
.mcs-entry-arrow { flex-shrink: 0; color: var(--text-muted); }
@keyframes psdModalPop { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.psd-modal-close {
    position: absolute; top: 0.5rem; right: 0.6rem;
    width: 2rem; height: 2rem;
    background: transparent; border: none;
    color: var(--text-muted);
    font-size: 1.1rem; font-family: inherit; cursor: pointer;
    border-radius: 50%; transition: background 0.15s, color 0.15s;
}
.psd-modal-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
.psd-modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem; font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
    padding-right: 1.5rem;
    letter-spacing: -0.3px;
}
.psd-modal-help { font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 1rem; line-height: 1.45; }
.psd-modal-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; }
.psd-modal-field > span { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
.psd-modal-field input {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.6rem;
    font-family: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.psd-modal-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 98, 43, 0.12); }
.psd-modal-status { font-size: 0.78rem; min-height: 1.1rem; margin: 0.2rem 0 0.5rem; }
.psd-modal-status.is-error { color: #C7384F; font-weight: 600; }
.psd-modal-status.is-ok { color: #16a34a; font-weight: 600; }
.psd-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.psd-modal-btn {
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: 0.7rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.2s;
    letter-spacing: 0.2px;
}
.psd-modal-btn:active { transform: scale(0.98); }
.psd-modal-btn.primary { background: linear-gradient(135deg, var(--saffron), var(--crimson)); color: #fff; box-shadow: 0 4px 14px rgba(199, 56, 79, 0.30); }
.psd-modal-btn.primary:hover { box-shadow: 0 6px 20px rgba(199, 56, 79, 0.38); }
.psd-modal-btn.primary:disabled { opacity: 0.55; cursor: not-allowed; }
.psd-modal-btn.ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.psd-modal-btn.ghost:hover { color: var(--text-primary); border-color: var(--text-secondary); }

/* ── Documents list ── */
.psd-docs-list { display: flex; flex-direction: column; gap: 0.45rem; max-height: 60vh; overflow-y: auto; }
.psd-doc-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-subtle);
    border-radius: 0.65rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
}
.psd-doc-item:hover { border-color: var(--accent); background: rgba(212, 98, 43, 0.05); }
.psd-doc-icon {
    width: 2.1rem; height: 2.1rem;
    border-radius: 0.5rem;
    background: rgba(212, 98, 43, 0.10);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.psd-doc-icon[data-doc-type="drive"] { background: rgba(37, 99, 235, 0.10); color: #2563eb; }
.psd-doc-text { flex: 1; min-width: 0; }
.psd-doc-name { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psd-doc-type { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.psd-doc-chev { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; }
.psd-docs-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; font-style: italic; }

/* ── Preamble overlay player ──
   In-page overlay (not system fullscreen) so older users can clearly see
   the labeled "← Back" button to exit. A separate ⛶ button is available
   for opt-in native fullscreen. */
.psd-preamble-viewer {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(20, 12, 8, 0.96);
    display: flex; flex-direction: column;
    animation: psdModalFade 0.22s ease-out;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.psd-preamble-viewer.hidden { display: none; }

.psd-preamble-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: max(env(safe-area-inset-top, 0px), 0.9rem) 1rem 0.85rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
    flex-shrink: 0;
}
.psd-preamble-back {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.7rem 1.15rem 0.7rem 0.95rem;
    background: rgba(255,255,255,0.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 0.7rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.15s, transform 0.1s;
    letter-spacing: 0.2px;
}
.psd-preamble-back:hover { background: rgba(255,255,255,0.26); }
.psd-preamble-back:active { transform: scale(0.97); }
.psd-preamble-back svg { display: block; flex-shrink: 0; }
.psd-preamble-title {
    flex: 1; min-width: 0;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.psd-preamble-fs {
    width: 2.85rem; height: 2.85rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 0.7rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.1s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.psd-preamble-fs:hover { background: rgba(255,255,255,0.22); }
.psd-preamble-fs:active { transform: scale(0.95); }
.psd-preamble-fs svg { display: block; }

.psd-preamble-stage {
    flex: 1; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0.5rem 0.75rem 1.5rem;
}
.psd-preamble-stage video {
    width: 100%; max-width: 100%;
    max-height: 100%;
    background: #000;
    border-radius: 0.85rem;
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
    object-fit: contain;
}
@media (max-width: 480px) {
    .psd-preamble-back { padding: 0.6rem 0.95rem 0.6rem 0.8rem; font-size: 0.92rem; }
    .psd-preamble-back svg { width: 18px; height: 18px; }
    .psd-preamble-fs { width: 2.5rem; height: 2.5rem; }
    .psd-preamble-fs svg { width: 18px; height: 18px; }
    .psd-preamble-title { font-size: 0.98rem; }
    .psd-preamble-stage { padding: 0.4rem 0.6rem 1rem; }
}

/* Three-button phase bar (Pre / Main / Post) */
.psd-phase-bar {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 0.45rem;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem;
    padding: 0.45rem;
}
.psd-phase-btn {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.3rem;
    padding: 0.75rem 0.5rem;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s, color 0.15s;
    overflow: hidden;
}
.psd-phase-btn:hover { background: rgba(255,255,255,0.14); }
.psd-phase-btn:active { transform: scale(0.97); }
.psd-phase-btn-main {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.24);
}
.psd-phase-btn.is-active {
    background: #fff;
    color: var(--crimson);
    border-color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 0 4px rgba(255,255,255,0.18);
}
.psd-session-bg[data-chant="ganapati"] ~ * .psd-phase-btn.is-active,
.psd-session-bg[data-chant="ganapati"] + * .psd-phase-btn.is-active { color: #B14D1A; }
.psd-phase-btn.is-active.is-paused { background: rgba(255,255,255,0.92); }
.psd-phase-btn.is-active::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 60% at 50% 100%, currentColor, transparent 70%);
    opacity: 0.05;
}
.psd-phase-icon {
    display: flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
}
.psd-phase-btn-main .psd-phase-icon { width: 2.2rem; height: 2.2rem; }
.psd-phase-btn.is-active .psd-phase-icon { background: rgba(199, 56, 79, 0.12); }
.psd-phase-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
}
.psd-phase-btn-main .psd-phase-label { font-size: 0.78rem; }
.psd-phase-btn[data-phase="main"].is-active .psd-phase-label::after {
    content: ''; /* placeholder so live count can mount here later if we want */
}

.psd-session-stop-btn {
    width: 100%;
    padding: 0.7rem 1rem;
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 0.8rem;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.3px;
    visibility: hidden;
}
.psd-session-stop-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }

@media (max-width: 480px) {
    .psd-card-body { padding: 1.15rem 1rem 1rem; }
    .psd-card-today { font-size: 2.85rem; }
    .psd-session-count-num { font-size: 4.2rem; }
    .psd-session-count-sep { font-size: 2.2rem; }
    .psd-session-count-total { font-size: 1.55rem; }
    .psd-mandala svg { width: 190px; height: 190px; }
    .psd-session-deity { font-size: 1.05rem; }
    .psd-session-summary { padding: 0.6rem 0.5rem; }
    .psd-session-summary-value { font-size: 0.86rem; }
    .psd-phase-bar { padding: 0.35rem; gap: 0.35rem; }
    .psd-phase-btn { padding: 0.6rem 0.35rem; gap: 0.25rem; }
    .psd-phase-label { font-size: 0.66rem; }
    .psd-phase-btn-main .psd-phase-label { font-size: 0.7rem; }
    .psd-phase-icon { width: 1.65rem; height: 1.65rem; }
    .psd-phase-btn-main .psd-phase-icon { width: 1.95rem; height: 1.95rem; }
    .psd-session-stage { padding: 1rem 0.85rem; gap: 0.65rem; }
    .psd-session-footer { padding: 0.85rem 0.95rem 1.25rem; gap: 0.65rem; }
}
@media (max-height: 680px) and (max-width: 480px) {
    /* On short screens (older phones), shrink the mandala + count so everything fits without scroll */
    .psd-mandala svg { width: 160px; height: 160px; }
    .psd-session-count-num { font-size: 3.6rem; }
}

/* ============================================================================
   STREAK CARD — sessions view header
   Shows the user's daily streak and whether they've already completed today.
   ============================================================================ */
.sad-streak-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.08), rgba(199, 56, 79, 0.05));
    border: 1px solid rgba(212, 98, 43, 0.18);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(199, 56, 79, 0.06);
}
.sad-streak-card.is-done {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(22, 163, 74, 0.04));
    border-color: rgba(22, 163, 74, 0.28);
}
.sad-streak-card.is-fresh {
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.05), rgba(255, 248, 230, 1));
    border-color: var(--border-subtle);
}
.sad-streak-icon {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    filter: drop-shadow(0 1px 2px rgba(199, 56, 79, 0.15));
}
.sad-streak-card.is-fresh .sad-streak-icon { color: var(--saffron); opacity: 0.7; }
.sad-streak-card.is-done .sad-streak-icon { color: #16a34a; }
.sad-streak-icon svg { display: block; }
.sad-streak-card.is-done .sad-streak-icon { filter: drop-shadow(0 1px 2px rgba(22, 163, 74, 0.2)); }
.sad-streak-body { flex: 1; min-width: 0; }
.sad-streak-headline {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.sad-streak-card.is-done .sad-streak-headline { color: #16a34a; }
.sad-streak-sub {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    line-height: 1.35;
}
.sad-streak-status { flex-shrink: 0; }
.sad-streak-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

/* Streak line inside the completion modal */
.sad-completion-streak {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0 0.5rem;
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(212, 98, 43, 0.10), rgba(199, 56, 79, 0.06));
    border: 1px solid rgba(212, 98, 43, 0.2);
    border-radius: 0.75rem;
    font-size: 0.92rem;
    color: var(--text-primary);
}
.sad-completion-streak-icon { flex-shrink: 0; color: var(--accent); }
.sad-completion-streak-icon svg { display: block; }
.sad-completion-streak-text strong { font-family: 'Outfit', sans-serif; color: var(--accent); }

@media (max-width: 480px) {
    .sad-streak-card { padding: 0.7rem 0.85rem; gap: 0.7rem; margin-bottom: 0.85rem; }
    .sad-streak-icon { font-size: 1.55rem; }
    .sad-streak-headline { font-size: 0.95rem; }
    .sad-streak-sub { font-size: 0.72rem; }
    .sad-streak-check { width: 1.75rem; height: 1.75rem; font-size: 0.9rem; }
    .sad-completion-streak { font-size: 0.85rem; padding: 0.55rem 0.8rem; }
}

/* ============================================================================
   COLLECTIVE SADHANA — session cards (modern redesign)
   Big readable layout for older eyes: huge time, clear status badge with a
   pulsing live dot, single primary action button.
   ============================================================================ */
.sad-sessions {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
@media (max-width: 480px) { .sad-sessions { grid-template-columns: 1fr; } }

.sad-sess-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.4rem;
    padding: 1.3rem 1.2rem 1.15rem;
    background: linear-gradient(160deg, #fff 0%, #FEF9F4 100%);
    border: 1px solid rgba(212, 98, 43, 0.18);
    box-shadow: 0 6px 20px rgba(199, 56, 79, 0.06);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s, border-color 0.18s;
    isolation: isolate;
}
.sad-sess-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(199, 56, 79, 0.12); }
.sad-sess-card-bg {
    position: absolute; top: 0; left: 0; right: 0; height: 65%;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 98, 43, 0.10), transparent 70%);
    pointer-events: none; z-index: 0;
}
.sad-sess-active {
    background: linear-gradient(160deg, #FFF8EE 0%, #FFE8C7 100%);
    border-color: rgba(212, 98, 43, 0.42);
    box-shadow: 0 10px 32px rgba(199, 56, 79, 0.18), 0 0 0 1px rgba(212, 98, 43, 0.10);
}
.sad-sess-active .sad-sess-card-bg {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212, 98, 43, 0.20), transparent 70%);
}
.sad-sess-ended {
    background: linear-gradient(160deg, #FAF8F6 0%, #F0EAE4 100%);
    border-color: var(--border-subtle);
    opacity: 0.85;
}
.sad-sess-ended .sad-sess-card-bg { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(115, 115, 115, 0.06), transparent 70%); }

.sad-sess-card-top {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.95rem;
    gap: 0.5rem;
}
.sad-sess-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.32rem 0.75rem;
    background: rgba(115, 115, 115, 0.10);
    color: var(--text-secondary);
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.sad-sess-active .sad-sess-badge {
    background: rgba(22, 163, 74, 0.14);
    color: #16a34a;
}
.sad-sess-upcoming .sad-sess-badge {
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
}
.sad-sess-badge-pulse {
    width: 0.55rem; height: 0.55rem;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55);
    animation: sadSessPulse 1.6s ease-out infinite;
}
@keyframes sadSessPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.sad-sess-duration {
    font-size: 0.72rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

.sad-sess-time {
    position: relative; z-index: 1;
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -1.3px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.2rem;
}
.sad-sess-active .sad-sess-time {
    background: linear-gradient(135deg, var(--saffron), var(--crimson));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sad-sess-name {
    position: relative; z-index: 1;
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.3px;
}
.sad-sess-ended .sad-sess-name { color: var(--text-secondary); }
.sad-sess-date {
    position: relative; z-index: 1;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}
.sad-sess-helper {
    position: relative; z-index: 1;
    font-size: 0.86rem;
    color: var(--text-secondary);
    margin-top: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.sad-sess-helper.sad-sess-countdown { color: #2563eb; font-weight: 600; }
.sad-sess-helper.sad-sess-live { color: #16a34a; font-weight: 600; }

/* Match the .psd-chant-btn style used in Personal Sadhana — same rounding,
   filled gradient, soft shadow, and slow ripple animation. The two variants
   (live vs waiting) just swap the gradient palette so users can tell them
   apart at a glance. */
.sad-sess-cta {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    width: 100%;
    padding: 0.95rem 1.1rem;
    margin-top: 1rem;
    border: none;
    border-radius: 0.85rem;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.2s ease;
    min-height: 3.1rem;
    letter-spacing: 0.3px;
    overflow: hidden;
}
.sad-sess-cta:active { transform: translateY(0); }
.sad-sess-cta svg { display: block; flex-shrink: 0; position: relative; z-index: 1; }
.sad-sess-cta span:not(.sad-sess-cta-ripple) { position: relative; z-index: 1; }
.sad-sess-cta-ripple {
    position: absolute; inset: -50%;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: translateX(-100%);
    animation: sadSessRipple 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes sadSessRipple {
    0%, 70% { transform: translateX(-100%); }
    100%    { transform: translateX(100%); }
}

.sad-sess-cta.is-live {
    background: linear-gradient(135deg, var(--saffron) 0%, var(--crimson) 100%);
    box-shadow: 0 6px 20px rgba(199, 56, 79, 0.34);
}
.sad-sess-cta.is-live:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(199, 56, 79, 0.42); }

.sad-sess-cta.is-waiting {
    /* Deep emerald → teal — classic saffron-complement, calm "patient" feel */
    background: linear-gradient(135deg, #065F46 0%, #0F766E 100%);
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.34);
}
.sad-sess-cta.is-waiting:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(15, 118, 110, 0.42); }

@media (max-width: 480px) {
    .sad-sess-card { padding: 1.1rem 1rem 1rem; }
    .sad-sess-time { font-size: 2.3rem; }
    .sad-sess-name { font-size: 1.02rem; }
}

/* ============================================================================
   ATTENDANCE CARDS — calendar-tile style for the recent-attendance list
   ============================================================================ */
.sad-attendance-list {
    display: flex; flex-direction: column; gap: 0.65rem;
    margin-top: 0.5rem;
}
/* Show-all / show-less toggle for the attendance list */
.sad-attendance-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0.7rem auto 0; padding: 0.5rem 1.1rem;
    background: #fff; border: 1px solid rgba(199, 56, 79, 0.25);
    color: var(--accent); border-radius: 99px;
    font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.sad-attendance-toggle:hover { background: rgba(199, 56, 79, 0.06); }
.sad-attendance-toggle:active { transform: translateY(1px); }
.sad-attendance-toggle-chevron { transition: transform 0.25s ease; }
.sad-attendance-toggle[aria-expanded="true"] .sad-attendance-toggle-chevron { transform: rotate(180deg); }
.sad-att-card {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(199, 56, 79, 0.04);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.sad-att-card:hover { transform: translateY(-1px); border-color: rgba(212, 98, 43, 0.25); box-shadow: 0 6px 18px rgba(199, 56, 79, 0.08); }
.sad-att-date {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 0.5rem 0.4rem;
    background: linear-gradient(160deg, rgba(212, 98, 43, 0.08), rgba(196, 146, 21, 0.05));
    border: 1px solid rgba(212, 98, 43, 0.18);
    border-radius: 0.7rem;
    text-align: center;
}
.sad-att-date-day {
    font-size: 0.6rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.2px;
    line-height: 1;
}
.sad-att-date-num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem; font-weight: 800;
    color: var(--accent);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
    margin-top: 0.05rem;
}
.sad-att-date-mon {
    font-size: 0.62rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    line-height: 1;
    margin-top: 0.05rem;
}
.sad-att-info { min-width: 0; }
.sad-att-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem; font-weight: 700;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.25;
}
.sad-att-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
}
.sad-att-dur {
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 99px;
    background: rgba(115, 115, 115, 0.08);
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sad-att-dur.is-done {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}
.sad-att-dur.is-live {
    background: rgba(199, 56, 79, 0.12);
    color: var(--accent);
}

@media (max-width: 480px) {
    .sad-att-card { grid-template-columns: 3.4rem 1fr auto; gap: 0.7rem; padding: 0.7rem 0.85rem; }
    .sad-att-date { padding: 0.4rem 0.3rem; }
    .sad-att-date-num { font-size: 1.4rem; }
    .sad-att-name { font-size: 0.93rem; }
    .sad-att-dur { font-size: 0.78rem; padding: 0.35rem 0.65rem; }
}

/* ── 30-day listening bar chart — pixel-based heights, fully responsive ── */
.sad-att-chart-wrap {
    margin-top: 1.1rem;
    padding: 1.2rem 1.3rem 1rem;
    background: linear-gradient(160deg, #fff 0%, #FFFAF3 100%);
    border: 1px solid rgba(212, 98, 43, 0.18);
    border-radius: 1.2rem;
    box-shadow: 0 6px 20px rgba(199, 56, 79, 0.06);
}
.sad-att-chart-wrap.hidden { display: none; }
.sad-att-chart-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.95rem;
}
.sad-att-chart-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}
.sad-att-chart-legend {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700;
}
.sad-att-chart-legend-dot {
    width: 0.6rem; height: 0.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--saffron), var(--crimson));
    box-shadow: 0 0 8px rgba(199, 56, 79, 0.45);
}

/* Chart layout — yaxis labels left, bars right */
.sad-att-chart {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0.6rem;
}
.sad-att-chart-yaxis {
    display: flex; flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    color: var(--text-muted);
    font-weight: 700;
    padding-bottom: 26px;         /* match CHART_LABEL_GAP + small fudge */
    padding-top: 2px;
    line-height: 1;
}
.sad-att-chart-bars {
    display: flex; align-items: stretch;
    gap: 3px;
    position: relative;
}
.sad-att-chart-bars::before {
    /* subtle baseline at bottom of bars, above the label band */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    height: 1px;
    background: rgba(28, 18, 16, 0.08);
}
.sad-att-bar-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.3rem;
}
.sad-att-bar-canvas {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 1px;
}
.sad-att-bar {
    width: 100%;
    background: linear-gradient(180deg, #D4622B 0%, #C7384F 100%);
    border-radius: 5px 5px 1px 1px;
    transition: opacity 0.15s, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s;
    box-shadow: 0 2px 8px rgba(199, 56, 79, 0.22);
}
.sad-att-bar:hover { transform: translateY(-2px); filter: brightness(1.06); }
.sad-att-bar.empty {
    background: rgba(115, 115, 115, 0.16);
    box-shadow: none;
    border-radius: 2px;
}
.sad-att-bar.today {
    background: linear-gradient(180deg, #C49215 0%, #D4622B 100%);
    box-shadow: 0 4px 14px rgba(196, 146, 21, 0.35);
}

.sad-att-bar-xlabel {
    font-family: 'Outfit', sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
    height: 12px;
    font-variant-numeric: tabular-nums;
}
.sad-att-bar-xlabel.today { color: var(--accent); }

.sad-att-chart-foot {
    display: flex; justify-content: space-between;
    margin-top: 0.6rem;
    padding-left: 3.2rem;
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.2px;
    font-weight: 700;
}

@media (max-width: 480px) {
    .sad-att-chart-wrap { padding: 1rem 1.05rem 0.9rem; }
    .sad-att-chart { grid-template-columns: 2.1rem 1fr; gap: 0.45rem; }
    .sad-att-chart-yaxis { font-size: 0.6rem; }
    .sad-att-chart-bars { gap: 2px; }
    .sad-att-bar-xlabel { font-size: 0.6rem; }
    .sad-att-chart-foot { padding-left: 2.55rem; font-size: 0.58rem; }
    .sad-att-chart-title { font-size: 0.92rem; }
    .sad-att-chart-legend { font-size: 0.6rem; }
}